diff --git a/.DS_Store b/.DS_Store index a9112f40b..1bee47f02 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.gitignore b/.gitignore index 090dec300..ad520e5cc 100644 --- a/.gitignore +++ b/.gitignore @@ -92,3 +92,4 @@ typings/ 98-Projects/GRJ/server.ts .vscode/settings.json .vscode/settings.json +.vscode/settings.json diff --git a/.vscode/.vscode.code-workspace b/.vscode/.vscode.code-workspace new file mode 100644 index 000000000..7db056202 --- /dev/null +++ b/.vscode/.vscode.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "." + }, + { + "path": "../01-HTML-CSS" + }, + { + "path": "../09-CSS-final-test" + } + ] +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..3cd0f7ca9 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "wscats.eno" + ] +} \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..c5674dab8 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6bb6e8e97 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,27 @@ +{ + "liveServer.settings.port": 5503, + "compile-hero.disable-compile-files-on-did-save-code": false, + "cSpell.words": [ + "divs", + "imgs", + "Karako", + "Nemo", + "Sahandrin", + "Sheva", + "Succ", + "בבית", + "בהרי", + "במקום", + "בעיירה", + "למשתמש", + "מופלא", + "מידע", + "מציגים", + "מתגוררת", + "קולומביה", + "קסום", + "שומרים" + ], + "explorer.openEditors.sortOrder": "alphabetical", + "explorer.sortOrder": "type" +} diff --git a/00-principles of good code/ppogc.md b/00-principles of good code/ppogc.md new file mode 100644 index 000000000..2ac7c005b --- /dev/null +++ b/00-principles of good code/ppogc.md @@ -0,0 +1,10 @@ +# Variables # + +## Globals are bad ## +Globals are bad: somebody can change your variable, which will change the code's behavior unexpectedly. Avoid them as much as you can. + +## const is better than let ## +Const is better than let: Nobody can change your variable unexpectedly when using const. Use let only when you must. + +## Functions ## +Pure functions is better than unpure functions. in pure functions you know what you get and what you return. in unpure functions you \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/Exrecise2/aviva-elias/index.html b/01-HTML-CSS/02-position-box-model/Exrecise2/aviva-elias/index.html index fa956a6f7..92c5ba4b3 100644 --- a/01-HTML-CSS/02-position-box-model/Exrecise2/aviva-elias/index.html +++ b/01-HTML-CSS/02-position-box-model/Exrecise2/aviva-elias/index.html @@ -10,14 +10,13 @@
- + +
Lorem ipsum sit amet consectetur adipisicing elit. Obcaecati dolorum explicabo cupiditate quidem et vitae aut officia voluptates molestiae sit odit blanditiis aliquid veniam cum alias voluptas non, corporis natus numquam. Consequatur labore numquam recusandae sed aliquam sapiente ipsam, voluptate adipisci, rem non quas facere doloribus harum dolor, earum temporibus velit voluptates sint esse ipsum distinctio dolorem nihil exercitationem eveniet. Veritatis magnam blanditiis at itaque beatae reiciendis, velit fugit doloribus impedit, explicabo alias quae quis cum repellendus dolorum amet. Enim provident eos recusandae? Assumenda, fuga, in perferendis accusantium labore veritatis ratione expedita hic incidunt quae officiis repellendus, officia aperiam! Quae impedit eligendi consequatur provident sit labore at eos nulla voluptate excepturi id aperiam porro, velit, commodi doloribus fugit corrupti ratione vel libero molestiae maxime? Optio quaerat dolores eaque enim velit nihil voluptatum odit a fugiat ea harum, aspernatur facilis quasi? Vitae harum tenetur veniam totam, ducimus, recusandae nobis quasi mollitia id iure, ipsum commodi? Laudantium aspernatur cupiditate alias ducimus, natus aut voluptate officiis blanditiis? Dolorum tempore sapiente dignissimos esse! Ut nulla corrupti perferendis optio modi doloremque beatae illum. Deserunt aliquam eum doloremque assumenda voluptates officia explicabo nisi eaque architecto aut dolor harum maxime sapiente dolores debitis asperiores, earum ducimus temporibus eligendi, voluptatem in repellendus nesciunt. Ex distinctio fuga tempore sequi, vel odit soluta similique itaque reiciendis corrupti necessitatibus aut quam maiores nulla possimus sint perferendis a placeat sapiente perspiciatis. Quod repellendus nostrum qui harum delectus facere temporibus eos hic eius quidem error consequatur corporis, laborum soluta sapiente, sequi culpa! Temporibus delectus soluta fugiat laborum nulla, molestiae porro cum aspernatur, nam voluptates ducimus enim voluptate incidunt ad sapiente non deserunt obcaecati a nobis, nisi dolor iusto perferendis vero similique. Quibusdam nulla quo eaque recusandae. Autem aliquid fugiat facere asperiores laboriosam rem quae dolores numquam ex, quod quasi blanditiis quidem illo facilis ducimus saepe deleniti. Assumenda laborum numquam fugit consequuntur praesentium cum sapiente harum facere doloribus, suscipit sed laudantium deserunt ea recusandae molestiae saepe veniam a facilis corrupti, blanditiis asperiores quam soluta. Fugiat cupiditate adipisci quae itaque ratione distinctio, dignissimos nam iure possimus, laborum ipsam autem tempora iusto doloremque minus atque. Aperiam doloremque ex molestiae excepturi expedita consequuntur aspernatur. Veniam ut, qui doloribus dignissimos iure ea veritatis accusamus in, ipsum, reprehenderit expedita vero quibusdam eos accusantium aliquam eaque neque atque tempora modi praesentium eveniet. Modi a quibusdam voluptatum animi, delectus vitae accusamus quasi amet libero, corrupti id ipsam laborum reprehenderit eveniet iste ab quos iure dolorem corporis optio? Quibusdam, voluptas. Totam, quis! Aliquid sunt, quidem dolorem odio tenetur necessitatibus error perspiciatis asperiores alias, minima mollitia quos aliquam repudiandae consequuntur sapiente. Harum, totam ullam nostrum quis amet corrupti dolore impedit, laboriosam voluptates beatae velit ipsa fugit veritatis deserunt? Dolorem magnam laboriosam ab ipsam itaque eius quae repellendus maxime unde! Eius officia cupiditate eligendi quas, ipsam rerum esse vel cum fugiat earum libero ad quidem ipsa maiores accusamus soluta iusto amet totam omnis. Eaque ad fugit beatae quo maiores, ex in quod sapiente dolore alias dicta molestias praesentium dolorem, ab harum magni necessitatibus suscipit excepturi exercitationem et nam. Veritatis provident itaque laudantium voluptatibus sunt tenetur sint voluptatem, temporibus quaerat, vitae debitis, culpa reiciendis et. Esse blanditiis laboriosam, at exercitationem cumque minima numquam, fugit reprehenderit ducimus debitis optio nisi magnam voluptates. In a eligendi dolorum. Nobis ratione, consequuntur fugiat earum pariatur saepe doloribus. Voluptatem nemo veniam quae. Optio incidunt aliquid consequuntur quidem beatae adipisci, magni aperiam minima. Veniam, autem nostrum molestiae labore sed ratione optio saepe ea rerum, ad ipsa amet quibusdam deleniti, doloribus hic nam facilis blanditiis? At nulla quod dignissimos voluptatem? In, ut. Alias ad ut voluptate fugit facilis similique tempora esse cum commodi assumenda, nam dicta porro voluptates quas expedita itaque sit quisquam? Corrupti assumenda eum dolores iure perspiciatis, sit natus, illo nobis amet eaque, quis quisquam veritatis veniam inventore voluptatum exercitationem sequi. Sit, veniam sapiente quos voluptatibus ea labore pariatur ab porro optio, eveniet, est similique. Et nobis dignissimos minima expedita tempore, eveniet nam enim voluptate quibusdam ea harum! Commodi et qui, voluptatem aliquid iure debitis officia quis perferendis sint suscipit blanditiis, quos cumque sequi doloremque explicabo repellat recusandae fugiat consequuntur sapiente est? Pariatur delectus iure quia eos corrupti tempore quam molestias culpa ipsam non officiis aliquid nostrum enim autem veritatis, sed quaerat voluptate debitis accusamus id! Commodi assumenda magni tempora sequi voluptatibus? Ab commodi ullam aliquam nam. Suscipit expedita repellat culpa natus. Eius modi voluptas expedita perspiciatis consequatur ab repellat architecto numquam earum, voluptates nisi vitae assumenda tempore delectus exercitationem ipsa id illo, impedit culpa! Cum omnis aliquid adipisci aliquam voluptas est molestiae eligendi, quis enim, officia, tenetur non voluptatibus aspernatur perferendis rem veniam! Sapiente quis debitis iste, officia expedita iure atque unde adipisci veniam esse perferendis quia nobis ipsa, porro facere est veritatis illum assumenda explicabo harum beatae inventore aspernatur magni possimus? Ipsum illum non exercitationem sunt inventore provident corporis placeat dignissimos praesentium odio! Beatae vitae molestiae distinctio, autem illum temporibus rem debitis, velit dolorem veniam vero dicta doloremque in molestias nesciunt eaque earum saepe officiis sunt illo qui eum quas magnam sapiente? Laboriosam est commodi cum repellendus nisi architecto eveniet maxime, provident dolores consequuntur sed fugiat quas! Quibusdam, et temporibus fugiat nesciunt laudantium, ut eius, pariatur necessitatibus laborum doloribus explicabo dicta aperiam voluptate ratione libero recusandae quasi vitae autem illo! Alias voluptas voluptate vel nisi odit incidunt doloremque dolores reprehenderit, natus explicabo maxime asperiores itaque! Veniam porro ex nesciunt neque sint. Sapiente quibusdam veritatis consequuntur est ullam magnam voluptatibus dolores officiis unde eos laudantium nemo veniam iste asperiores qui error vel eum reiciendis magni earum a modi, sint repellendus eius? Hic iste, beatae dolorum nobis qui, minus nam in cupiditate ratione quidem, quod saepe cumque. Aperiam pariatur rerum odio, officiis consectetur quos maxime reiciendis doloribus voluptate alias perferendis impedit asperiores laboriosam magni aut eos possimus, repudiandae unde qui architecto. Dolor consectetur dignissimos eveniet culpa voluptate odio quod ad, optio iusto quas ea quibusdam neque doloremque impedit ipsum tempora quae? Nesciunt itaque corrupti ipsam consectetur delectus minima facere inventore est vero repudiandae, ullam provident corporis fuga impedit perferendis debitis. - + + + + + + Document + + + +
+
+ + + +
+
+ + +
+
+
+ +
+
+ +

shlomi

+
+
+ +

moshe

+
+
+ +

avi

+
+
+ +

doron

+
+
+ +

beni

+
+
+ +

dror

+
+
+ + +
+
+ + +

shlomi

+
+ + +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

+
+ +
+
+ + +

dror

+
+ + +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

+
+ +
+
+ + +

beni

+
+ + +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

+
+ +
+ + + + + +
+
+ + + + diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/style.css b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai copy/style.css similarity index 100% rename from 01-HTML-CSS/02-position-box-model/HW/shlomi-samai/style.css rename to 01-HTML-CSS/02-position-box-model/HW/shlomi-samai copy/style.css diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/Logo.PNG b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/Logo.PNG new file mode 100644 index 000000000..c4317e2b0 Binary files /dev/null and b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/Logo.PNG differ diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/control.ts b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/control.ts new file mode 100644 index 000000000..be93b4613 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/control.ts @@ -0,0 +1,205 @@ + +function renderStory(users:User[]){ + +let storyPage = ""; +let k = 0; +for (k = 0; k <= users.length - 1; k++) { + storyPage += `
+
` + ; +} +const htmlStory: HTMLDivElement | null = document.querySelector("#storyBox"); +if (htmlStory !== null) { + htmlStory.innerHTML = storyPage; +} +render(posts) +} + + + + +function renderusers(users:User[]){ + let page = ""; + let j = 0; + for (j = 0; j <= users.length - 1; j++) { + page += `
+ + +
`; + } + +// + + const html: HTMLDivElement | null = document.querySelector("#listofUsers"); + if (html !== null) { + html.innerHTML = page; + } + localStorage.setItem("users", JSON.stringify(users)); +} + +function handleDeleteUser(uid: string) { + try { + const index = users.findIndex((User) => User.uid === uid); + if (index === -1) throw new Error("item not found"); + users.splice(index, 1); + renderusers(users); + + + } catch (error) { + console.error(error); + } +} + + + +function handleAddItem(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const BigPictureURL = ev.target.elements.BigPictureURL.value; + const smallPictureURL = ev.target.elements.smallPictureURL.value; + + posts.push(new Post(name,BigPictureURL,smallPictureURL)); + + ev.target.reset(); + localStorage.setItem("posts", JSON.stringify(posts)); + + render(posts); + } catch (error) { + console.error(error); + } +} + +function handleaddUser(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const PictureURL = ev.target.elements.PictureURL.value; + + users.push(new User(name,PictureURL)); + + ev.target.reset(); + localStorage.setItem("users", JSON.stringify(users)); + + // let page = ""; + // let j = 0; + // for (j = 0; j <= users.length - 1; j++) { + // page += `
+ //

${users[j].name}

+ // + // Enter + //
`; + // } + // const html: HTMLDivElement | null = document.querySelector("#listofUsers"); + // if (html !== null) { + // html.innerHTML = page; + // } + } catch (error) { + console.error(error); + } + renderusers(getUserFromStorage()) +} + +function render(posts:Post[]) { + let page = ""; + let j = 0; + for (j = 0; j <= posts.length - 1; j++) { + page += `
+
+ + +

${posts[j].name}

+
+ + +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

+
+
`; + } + console.log(page); + const html: HTMLDivElement | null = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } + localStorage.setItem("posts", JSON.stringify(posts)); +} + +function handleDeleteItem(uid: string) { + try { + const index = posts.findIndex((Post) => Post.uid === uid); + if (index === -1) throw new Error("item not found"); + posts.splice(index, 1); + render(posts); + + + } catch (error) { + console.error(error); + } +} + +function handleUpdatePic(uid: string) { + try { + const index = posts.findIndex((Post) => Post.uid === uid); + if (index === -1) throw new Error("item not found"); + const newPic = prompt("Enter a new URL pic"); + if (!newPic) throw new Error("Please enter a valid URL"); + posts[index].smallPictureURL=newPic; + localStorage.setItem("posts", JSON.stringify(posts)); + render(posts); + } catch (error) { + console.error(error); + } +} + + +function filterUser(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + + ev.target.reset(); + + renderfilterUser(posts,name); + } catch (error) { + console.error(error); + } +} + + + +function renderfilterUser(posts:Post[],user:string) { + debugger; + try { + let page = ""; + let j = 0; + for (j = 0; j <= posts.length - 1; j++) { + if (posts[j].name===user){ + page += `
+
+ + +

${posts[j].name}

+
+ + +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

+
+ `; + } +} + console.log(page); + const html: HTMLDivElement | null = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + } + // localStorage.setItem("posts", JSON.stringify(posts)); + } catch (error) { + alert("no post availble") + console.error(error); + } + +} + diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/control.js b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/control.js new file mode 100644 index 000000000..4f6dda8cf --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/control.js @@ -0,0 +1,156 @@ +function renderStory(users) { + var storyPage = ""; + var k = 0; + for (k = 0; k <= users.length - 1; k++) { + storyPage += "
\"\"/\n
"; + } + var htmlStory = document.querySelector("#storyBox"); + if (htmlStory !== null) { + htmlStory.innerHTML = storyPage; + } + render(posts); +} +function renderusers(users) { + var page = ""; + var j = 0; + for (j = 0; j <= users.length - 1; j++) { + page += "
\n \n \n
"; + } + // + var html = document.querySelector("#listofUsers"); + if (html !== null) { + html.innerHTML = page; + } + localStorage.setItem("users", JSON.stringify(users)); +} +function handleDeleteUser(uid) { + try { + var index = users.findIndex(function (User) { return User.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + users.splice(index, 1); + renderusers(users); + } + catch (error) { + console.error(error); + } +} +function handleAddItem(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var BigPictureURL = ev.target.elements.BigPictureURL.value; + var smallPictureURL = ev.target.elements.smallPictureURL.value; + posts.push(new Post(name, BigPictureURL, smallPictureURL)); + ev.target.reset(); + localStorage.setItem("posts", JSON.stringify(posts)); + render(posts); + } + catch (error) { + console.error(error); + } +} +function handleaddUser(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var PictureURL = ev.target.elements.PictureURL.value; + users.push(new User(name, PictureURL)); + ev.target.reset(); + localStorage.setItem("users", JSON.stringify(users)); + // let page = ""; + // let j = 0; + // for (j = 0; j <= users.length - 1; j++) { + // page += `
+ //

${users[j].name}

+ // + // Enter + //
`; + // } + // const html: HTMLDivElement | null = document.querySelector("#listofUsers"); + // if (html !== null) { + // html.innerHTML = page; + // } + } + catch (error) { + console.error(error); + } + renderusers(getUserFromStorage()); +} +function render(posts) { + var page = ""; + var j = 0; + for (j = 0; j <= posts.length - 1; j++) { + page += "
\n
\n \"\"\n \n

" + posts[j].name + "

\n
\n \n \"\"\n

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

\n
\n "; + } + console.log(page); + var html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } + localStorage.setItem("posts", JSON.stringify(posts)); +} +function handleDeleteItem(uid) { + try { + var index = posts.findIndex(function (Post) { return Post.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + posts.splice(index, 1); + render(posts); + } + catch (error) { + console.error(error); + } +} +function handleUpdatePic(uid) { + try { + var index = posts.findIndex(function (Post) { return Post.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + var newPic = prompt("Enter a new URL pic"); + if (!newPic) + throw new Error("Please enter a valid URL"); + posts[index].smallPictureURL = newPic; + localStorage.setItem("posts", JSON.stringify(posts)); + render(posts); + } + catch (error) { + console.error(error); + } +} +function filterUser(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + ev.target.reset(); + renderfilterUser(posts, name); + } + catch (error) { + console.error(error); + } +} +function renderfilterUser(posts, user) { + debugger; + try { + var page = ""; + var j = 0; + for (j = 0; j <= posts.length - 1; j++) { + if (posts[j].name === user) { + page += "
\n
\n \"\"\n \n

" + posts[j].name + "

\n
\n \n \"\"\n

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

\n
\n "; + } + } + console.log(page); + var html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + } + // localStorage.setItem("posts", JSON.stringify(posts)); + } + catch (error) { + alert("no post availble"); + console.error(error); + } +} diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/helpers.js b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/helpers.js new file mode 100644 index 000000000..bbfdcdaee --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36); +} diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/model.js b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/model.js new file mode 100644 index 000000000..7e4da647f --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/model.js @@ -0,0 +1,25 @@ +var Post = /** @class */ (function () { + function Post(name, BigPictureURL, smallPictureURL) { + this.name = name; + this.BigPictureURL = BigPictureURL; + this.smallPictureURL = smallPictureURL; + this.uid = uid(); + } + return Post; +}()); +var User = /** @class */ (function () { + function User(name, pictureURL) { + this.name = name; + this.pictureURL = pictureURL; + this.uid = uid(); + } + return User; +}()); +var posts = []; +posts.push(new Post("dad", "data:image/jpeg;base64,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", "data:image/jpeg;base64,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")); +posts.push(new Post("son", "data:image/jpeg;base64,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", "data:image/jpeg;base64,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")); +posts.push(new Post("mom", "data:image/jpeg;base64,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", "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAggMBEQACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAABAwIGAAUHBP/EAEUQAAEDAQMFDAYGCgMAAAAAAAEAAgMEBQYREhUhMVQHEzVBUWFzkZOywdFCcXSBobEUI1NjcvAiJCUyNkNiZJLhJkRS/8QAGwEAAgMBAQEAAAAAAAAAAAAAAgMAAQUEBgf/xAAzEQACAQICBwcDAwUAAAAAAAAAAQIDEQQSBRMhMVFScRQyM0GBkcEiJDRCYbEjodHw8f/aAAwDAQACEQMRAD8A6UvnhsGKiGKyjFZAIkAzCmIFgKbEUyBK6oIRJi3FdcEc02Sonfr9P0gWhQW1HMn9SLBbOiy6k/0LSHYjwpFIfIjjEwpSFmROURTkQccSmIBhDjqV2KuBWQChRZ18vPooENiGK0igKyGI0gGAo4oBgKfFCpC3LqghEhTyuymjkmw0J/aFN0gWjRW1HMu+ix25wTVfgXcjoxPgyKC9yfFHnZMUXaU1IW2EORWKuTacVC7jMFC7A9yshZF8xsfRAYqrEBirsQGKuxQCUaQLAXI4oBkSU+KFSIOK6aaOeYt5XZTRyTQaA/tGm6QLvpbzmXfRZLc4JqujXat50YnwZFAeumJ52SFFMFMwIihjFC0ehupQNBwULsb4lfOHE+hkC5DlLsRLlMpVgZSLKSwC5EogtAL0xRAaIl6bGIpogXLohERJEHOXZTRyVETs7hGm6QLtpbzlt9aLPbnBFV+Bdi3j8R4UiguGK6EzAlEWWpqYlozBEDYm0KF2HMRWCsNBGH7oV2CLz9CpfsWLC7Fh+RHrddU4g+g0n2DOpTsWH5ETX1OJn0Ck+wZ1Kdiw/Iia+pzGZvo/sGdSnYsPyImvqcTM3Umzxq+x4fkRWuqcQZuo9njU7JQ5UTW1OJmbaLZmK+zUeVFayfEzNtFszFfZ6XKVmb8wZsodmjRamC8gQss2ije17KZgc04g8iNQityByreeiaJk0bo5GhzHDAg8aIuUVJWZ48z2dskfUizMT2ek/wBJmZrN2OJTPLiV2ajyoGZrN2OLqV6yXEnZaHKg5ns3ZIlNZPiTstDlQc0WdskfUprZ8Sdlo8qMzTZ+yx9SmtnxJ2Wjyorrq+pH/Zm/zK83rKvM/dnpNRT5V7C3WhVbTN2hVa2rzP3Zeop8q9hZtGr2qftCpravM/dhdnp8q9jYXfrKia0QyWeV7cgnBzyQuvBTqOr9UmzlxlKEaV0jZXmnkp6CN8Mj2OMoGLXYHDArrxspRppxdtpy4OCnUaavsKznKr2uftCs5VKvM/c0HQhyozOVZtc/aFMU6nM/cW6MOCBnKs2uftCmRnPixEqUeBmcqza5+0KfGUuIicEA2lW7ZUdqU+LZzTiwZyrdsqO1d5p8Tmnm4gNpVu2VHau805JHPKU+LBnGu22o7V3mmKMeAlyqcz9wZxrttqO1d5pihHgLdSpzP3CLQrttqe1d5otXHgDrKvM/ckLRrdsqO1d5o9XDgTWVeZ+5LONbtdR2rvNTVQ4E1tXmfuKfIvIZD6EoiXSqsgaiLdKpkCym2uo/KtcD7t3gunCRtUOHSEbUfU3N8nZNlxH78d1y6sWrwXU4tHK9V9P8FM3xcGU13EO+I1EVKJmWmRiIlEzLT4xOeUTMtOijlnAzLT4o5pwMy05HNKBmUmoRKBmUmIU4BDkaAcCQcjByk8VCZRT5V5XIfR1EQ+XnUyBqIsy86mQLKbu5b8q3APuneCbQj9ZwaTVqHqby/TsmyIT/AHDe65Prq8TP0Wr1n0+UUbfFy5TbcQiRGoipRDviYoiJRPbZtn1dpPLaWPFo/ee7Q1vvTYxOOrOEO8yy0tz4g0Gqq5HO4xGA0fHFMSOGVa+5HpddOzyND6gHlyx5I1KwpybNbXXSnjaXUU4lw9B4yT16vkmRqcQGrlbmEkEjopmOjkboc1wwIXRHatgqUCIfzpiEuAQ/SjSFuBMPRAuJPLUKynkfIvO5T6KoiHSKZRiiLMimUvKb+4rsbeHQv8EdONpGdpZfbepYN0E4WNCf7lvdcmVFdGbohXrvp8ooG+JWU33EIkRKIqUTbXdsqS2K3IJLaePAyvHyHOUxRODF1lRjfzZ0GWWisegynllPTRD84cpR7jFpwqYiplirtlPtC/c73ltm07GR/wDubST7gdHxS3Pgb1DQkEr1ZXf7HjivjbAdi6SF3MYtHwQZ5HQ9D4Xg/csVjXugq3thrmCnldoDwcWE+HvRRqp7GZeK0TOks1N5l/c2du2PDa1MWnBk7R9XLyHkPMuiE3BmQc2mElPM+GdpZIx2S5p4itCLurguAGyI0LcCbZFYDiMy1Csp4pHrDsfQUhLnqZRiQsuUsXYsVwDjeED7h/giirMzNLr7b1XyWPdGOFiQe1N7rkUlczNDeO+nyjneUhynomg5Suwpo6ndOhbQWJTtIwklG+PPOf8AWARHlsbV1lZvyWwoN87afadryQxv/VaZxZG0ai4a3dej1BUz0+i8GqFBSfeltfwjSMcltGi0PYUtgMexLYJf7l2m+rpn0k7i6SADIJOks/15J9Kd1ZnmNK4VUpqpHc/5NPuiUYgq6eujGAmG9v8AxDUer5LSw0rpozI7SpCRdSKcRjJOdWA4jd8UBynme5Y9j3yQlzlLDLEMpSxZZNz043jHQP8ABSxlaY/F9V8lj3SuA4Pam916sy9C/kPo/wCUc5x0q7Ho2jHHFpGOGKuwtnbJPq6Z29+hGckDmCE8WtstpwphJ0knE6SqZ9DewexAwT0MS5AM9DOJLYDLHclxbbjQPSicD8D4K6PfMrSyTwz6o226RgLAY4621DcOorTw3fPN0u8c0Ei7xrQ1kigtobvihWUg8rJse5QpxUsGiJKliyy7nZ/5GOgf4KMytM/i+q+SybpfAUHtbe69RGVoX8h9PlHNsUZ6RmHSCOVWhbZ2ew6sWhY9JUgh2+RDK9eo/HFLexnjsRT1VWUeD/4cmtqzX2XatRRuBAY7GM8rDqP55EtntcLiFXoxqL/X5nmY1Cx7Y9gS2Ax7EtgsuFw6JxnmrnD9Brd7YeUnSfkOtMox23MHTFZKKpLqefdUrWspqKhaf0nvMrhyADAfM9S1MLHa2Y9Fb2c7D12jWNY9QBoblqAjXrKPboU5QNEVCyy7nf8AEg6B/gqZk6Z/F9V8ll3S+AoPa2916kTK0L+Q+nyjmyNI9GyJRWFtlx3PrebSTusuqeGxTOxhcToDz6Pv4uf1oZxvtMXSeGzrWx3reWy8t34bbgBxEdVGPq5MPgeZJaucWBx88LLjF70c7tCyK2zHltZTuY0fzBpYfeku63nqaGLo11/Tl6efseePJJABBJ1YcaW2PZYbGuzW172umY6np+N7xg4jmCuNNy3mVitJUqKtF3kXlzqOxrNLnFsFLTsxJPEPErqjH9KPMznOtNyltbOL3gtiS27WmrpWlrXYNjYfQYNQ+Z9ZWrThkjY6oxyxsa8ORlMY1ysBjwHEY4FUVY9TtKyj2qFuCgRHBQhZdzz+Ix0D/BVLcZWmfxfVfJZd0vgOD2tvdepEy9DeO+nyjmpTEeibIlEhMmQdgQQjSFNlxu5fuSkY2lthr54hobO3S9o/qHH69frQSpX2oyMTgVJ5qez9i80Ft2XaLAaSvp5CdbcsBw9bTpCS4yW9GZOjOHeR7T9HhBeTHGDrdoHxQ2AeZmita+ViWW12NW2omGqKnIececjQPeU2NGcvIZGjN+RzK815628Ew37CGlYcY6dhxAPK48ZXdSpKn1OqFNQNHinFsIV2AYxpUsCNExAw0KrFGxWSezIuChdyOCslyybnwwvGOgf4IZbjK0w/tvVFj3SuA4Pam916uG8y9D+O+nyjmxTEegbIFGhUmLciQmTFuKNITJingHWExCnIW4DkHUiQlyAiFtgRIWzFYFwhWCMCooxQo2+pZB7MzWoDuMyVZVyyXAGF4R0L/BVLcZeln9v6lg3SOA4Pam916kN5m6Jdqz6fKObuCcjdchbkSEyYlyNITJinJiQlsWUSFNkCjFNkTqRC2wKwGFWCEKFBBUKDpUIbp2srHPZGDUoUySsWyy3EAz/Ho/kP+YVS3GXpTwH1N7uj8CQ+1N7rlIbzO0X4z6fKObuTjbYpyMTIS5GhTFPTEJYoo0KZBEKYFaAZKMYvAPKrBZFWCYFCBChBihR//9k=")); +var users = []; +users.push(new User("dad", "data:image/png;base64,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")); +users.push(new User("mom", "data:image/png;base64,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")); +users.push(new User("son", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDim2kq_9yyl5gxJEgCiqPV1Zh0OEUvmz07w&usqp=CAU")); diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/style.css b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/style.css new file mode 100644 index 000000000..34713d165 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/style.css @@ -0,0 +1,294 @@ +.bodyHomePage { + background-color: rgba(9, 179, 179, 0.555); +} +.bodyHomePage__userForm { + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border-radius: 10px; + position: relative; + left: 70px; +} +.bodyHomePage__mainLogo { + width: 300px; + margin-left: 40%; + border: 1px solid black; + border-radius: 10px; +} + +.form { + position: relative; + left: 120px; +} + +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + border: solid coral; + padding: 50px; +} +.list img { + width: 100%; +} + +#listofUsers { + display: flex; + flex-direction: row; + width: 1000px; + margin: auto; +} + +.linkButton { + height: 100px; + width: 100px; +} + +.userForm { + background-color: #c215c2; + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.recurring_div { + display: flex; + flex-direction: column; + background-color: white; + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.recurring_user { + display: flex; + flex-direction: column; + background-color: #ececee; + border: 5px black; + width: 100%; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.headline { + display: flex; + flex-direction: row; + height: 90px; + border: 1px solid rgba(0, 0, 0, 0.3151); + border-radius: 10px; + position: sticky; + top: 0px; + background-color: white; + z-index: 1; +} +.headline__instegram_logo { + position: relative; + left: 10px; + top: 20px; + height: 70px; +} +.headline__formClass { + padding-left: 50%; + padding-top: 5%; + padding-left: 40%; +} + +#id_heart { + position: relative; + left: 140px; + bottom: 85px; + height: 60px; + width: 60px; + margin: auto; + margin-bottom: 8px; +} + +input[type=search] { + width: 230px; + height: 30px; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + background-color: white; + padding: 12px 20px 12px 40px; + position: relative; + bottom: 40px; + right: 100px; +} + +.body_background_color { + background-color: #cbcbcb; +} + +.h1_design { + position: relative; + left: 10px; + font-size: 20px; +} + +.small_logo { + width: 50px; + height: 50px; + border-radius: 100px; + float: left; + position: relative; + right: 10; +} + +.bottom_headline { + display: flex; + flex-direction: row; + height: 60px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: white; + z-index: 1; +} + +#storyBox { + background-color: #ececee; + width: 650px; + height: 100px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} + +#storyBox2 { + background-color: #ececee; + width: 650px; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} + +#storyBox3 { + background-color: #ececee; + width: 16%; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; + position: relative; + top: 20px; +} + +.frame { + background-color: aliceblue; + width: 800px; + height: 100%; + margin: auto; + border-radius: 10px; +} + +.img_story { + border-radius: 180px; + width: 50px; + height: 50px; + border: 2px solid #ec2525; + border-image: repeat; + position: relative; + top: 20px; +} + +.bottom_headline { + height: 50px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: white; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-radius: 10px; +} + +.img_bottom_headline { + width: 30px; + height: 30px; + position: relative; + top: 10px; +} + +.story_text { + position: relative; + top: 3px; + font-size: 17px; +} + +.dots { + width: 30px; + height: 30px; + position: relative; + left: 470px; + top: 20px; + display: inline; +} + +.recurring_div_headline { + display: flex; + flex-direction: row; +} + +@keyframes color { + 0% { + background: #33CCCC; + } + 20% { + background: #33CC36; + } + 40% { + background: #B8CC33; + } + 60% { + background: #FCCA00; + } + 80% { + background: #33CC36; + } + 100% { + background: #33CCCC; + } +} +body { + background: #33CCCC; + /* Fallback */ + animation: color 9s infinite linear; +} \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/view.js b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/view.js new file mode 100644 index 000000000..a3b19bac5 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/dist/view.js @@ -0,0 +1,24 @@ +// function getItemsFromStorage(){ +// try { +// const postsString = localStorage.getItem("posts"); +// if (!postsString) throw new Error("Couldn't find items in storage"); +// const items = JSON.parse(postsString); +// render(items) +// } +// catch (error) { +// console.error(error); +// } +// } +function getUserFromStorage() { + try { + var postsString = localStorage.getItem("users"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + var users = JSON.parse(postsString); + return (users); + } + catch (error) { + console.error(error); + return (undefined); + } +} diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/getProduct.html b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/getProduct.html new file mode 100644 index 000000000..e04541a14 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/getProduct.html @@ -0,0 +1,32 @@ + + + + + + + setProduct + + + + + + + +
+ + + + + + + + + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/helpers.ts b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/helpers.ts new file mode 100644 index 000000000..6cf771409 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/helpers.ts @@ -0,0 +1,7 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36); + } + + + + \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index copy.html b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index copy.html new file mode 100644 index 000000000..3a651ccd2 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index copy.html @@ -0,0 +1,21 @@ + + + + + + + main + + + + + + + + + + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index.html b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index.html index 6a732a839..c004b4140 100644 --- a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index.html +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/index.html @@ -1,96 +1,59 @@ - - - - + + + + Document - - - + + + + + + + + + +
-
- - - -
-
- - -
-
-
+
+ +
+ + +
+
-
-
- -

shlomi

-
-
- -

moshe

-
-
- -

avi

-
-
- -

doron

-
-
- -

beni

-
-
- -

dror

-
-
+
click to filter
+
-
-
- - -

shlomi

-
- - -

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

-
-
-
- - -

dror

-
- - -

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

-
-
-
- - -

beni

-
- - -

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

-
- -
- - - - - -
-
+
+ + + + +
+ + +
+
- +
+ + +
+ + diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/model.ts b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/model.ts new file mode 100644 index 000000000..f38f18e05 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/model.ts @@ -0,0 +1,46 @@ +class Post { + uid: string; + + constructor( + public name: string, + public BigPictureURL: string, + public smallPictureURL: string + ) { + this.uid = uid(); + } +} + +class User { + uid: string; + constructor(public name: string, public pictureURL: string) + { + this.uid = uid(); + } +} + +const posts: Post[] = []; + +posts.push(new Post("dad","data:image/jpeg;base64,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","data:image/jpeg;base64,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")); +posts.push(new Post("son","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHcAswMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAGAAIDBAUHAf/EAD4QAAIBAwMBBgQDBgQFBQAAAAECAwAEEQUSITEGE0FRcYEiMmGRFKGxFSNCUsHwFtHh8QczQ2KCFyQ0cpL/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMEAAX/xAAqEQACAgEDAwEIAwAAAAAAAAAAAQIRAxIhMQRBURMFFCIjMkJhcVJigf/aAAwDAQACEQMRAD8AGBq1w02TIVGfPNXjrN3ZoGt2DNnJO7OaGe93CvVeTwJppQixlOSDzT+2k37uOWJST83xY96JLTWLTUFkEbK5Tkgj+tcgAPnU8F1c2+RDIyg9cGoT6eLXwlIZmn8R1uXTdOvkBe0UAjJkXjmqDaAkIZtOkYSZ+VgMHjPjQPpvaPULJ+GDp/Iw4ohse2paDbLbYKnhl8qx5MOaH08GiGSEv2M1bSJWyWSGKXGWwME/XFY8dkYbgd+RKgPJU1ral2imvLB4otvXhgPjA+tDaS3TMcOc5zVsXqaXqBk0WnQb2eniYAvppnjI+F1bB+la9nokEyknTjEy+BkOaBbXW9SSPu+9YruyPDafpWsO0muSLH/7h1x/EB81ZMuPLfJVST4QYS6LE21HVyuPl2ZI96y7vsvay7gpigOerED8qzE1zWmAH4h8+JyapTw3V1M0s7lnY5JNSipxf1DNN9iR+zGZ2jivrNyPKUU2bsvcpHkvEAOmHB/rTDZMo+tPj06Z+cMBWn1pfyEeJeDOfRnGeFOOuGFV5NKdOWjIFb66W44CGrMehTyDPdyfaqrq65YjwRfYEvwgQ9Ka1up8B9qM/wDDUh6o/wBqmi7LjGX+2Kp77HyRfTgL+CDdBTl00kfKaP49Aij8Pypx06OPjaKL69dge7IA49NkzwGHtWlawXEeMIxI8xRUtuq/9P8AKpljixlgB7Uk+tbXA0emSB4SXWBlB/8AilRCRGD/AA/avKh7x/Uto/Jyo2FiYg0d8pfxVlxinrot1IjvaFZ1QZJjbNZIJqW2u57Zy1vK8beamtr11szOnC90TPb3CNtaJgfSnLbXDf8ASf7VMNe1IrtNwWHkVFSJr2plO67/AOAjGNopdWXwhtOL8nkVmsci/jA6g+XWiPTtM0llKzNOuekhX4aG5tTu7mJIZ5d6LyowMj+tPS6mZEjknZUXoMdKjkjOS5orBwi+A8t9M0HBWa+hb6bgv38amt+zehBTm5V2IyAsmKDIrS2lTvp79i3mUJPvTSkSnZEZCQeo6VjeKXabNH+HRoOzmjMFcRnGPm3DBP3qdtKsGXurVVYfNtWQD6cUDaeNzKu5vPBo30DSmYrJ3k6HwKp/XNZZwmpadVheyux6aI0R2mLjONw59q0IOzjNHuIC+QYcn7UQWNp+GzmSRs/zGrfyjp0rZh9nprVkb/Rkn1UrqIMHQbWP4psMRzwOv50021kp+VmHgMVu3M7jIGMY6EVmS7T/AAL7Cs3UQhB1AeEpPeRXH4VflgHvXpm8gB6UmEeeQajIj8zU4yKNDzNnzrzvmFM+D615gEcGn9RC6T1pj44qFgrn5QPSnMB4mmkH+HHvSvKg6RdxGPlPsRTZY13coCPSq88t0mdqKRVKW6u2PxBQPShqbHUS+Y4snp9q9rIMtznhl+1Km38ho5TDayzruijZ1zjKqetXYdGvX5FuQP8Au4oo0qzKwMqbigb5z/GfE48DV9LJs55Fb8nUtOkSjhj3BEdm79ukaD/ypl3oF7aCPPdGWQ4RNx5xR1HZcAtyPrXkyxLPHGsYdw2DjgrnxzUl1U7GeKFABZ9nLmS7YGSNXHmTwcDPOPr0rYg7KTN817Cvua1JGtoLozSld4kKxiRgq8Z9Tmr17qdhZTCOQkjblnjTITpjPrmjPPle0QRhCPKAvV449IeeNpi7xpuDDoTg/p19vSqGgamX3tcxS3SBdqpEAHLdfP6HPlVbtVdpfXvfLJyB/NjB6dP8qz7ONhIksJYKpy7A44/z4NbIw+XUuTM8j17HXezFppWqxGe3guozG+x45WAIbr18RXQNMkFtGI1ikO3jmQmuI9nu0N3DLapG8MqvhFVm+NBnJz0GcdPzrp9vcbgNpwvXAPWvGzrJhy60zWvmR3DKO5Zue6K+uM017teQDQ6t2+3bvP3qf8W5GN1UftKdUR93pl6aUt61UdjVY3JU5LV5+ILKGBX0xWGWVydssoUh7NzTSGxUDzFeS5P0U4qN7mEjDPL96MWxqLDZrwSKDgsPvVN57Yjq5PrUBngU8h6puwaTReVP5hTO+T+fNZ8l3bAdXBqnNfKPkOaaONsNGy0p5wMioGn65Ufesc6oygqOKgfU2I4b8qosD8AujaMik520qwv2i38/5Uqb0GNZcgWK1AhlnXviCxDMASB4/bFSQSI7OAyts+b4gcVzZ9BV0z+1y7DncYyf60+HR5YJlnXVJ9y9e7iILevnWl4YP7jMs7XY6TJNtHwgmqU978DE446ZIFc51Bbq4mzJqt+zEHC90Tj6YBqJLjULR0SH9o9yjbsHCqST+X3po9LHyF9Ul2NmK6v9X1krbEQWasG2yAfvORkH+XzzV3tNpTX8csbSELEAVCHjcOBxWTfavPcA77dWV/4ZJAAufL4jmo7rWbyW0Kx6gWzjgd3hT4c8+NX0u00SeWFNMG5LGItFCkbCZvh3hshjx/fvXtqxtLhVWTeFcjawOMelTXMc985kjkVXQ5OG2jJPUeXtXqWMzAma6iEwyzDO49fH+zWhyVbsgq7E8Uq98kWcRw8hRjx/sV1Xs7KW0uApC0ShQFHJz965baaLcSv3zzqzMcnuULDw8engKI9OtbiC4heXUrhJIx+7V144+4rzuq9OXc3dPq8HRFnO7AcZ8s1N35XqfzoShtLqVt82pXJJyDjAAHTjjyqS70y9SMiG5mdeuyQfEPQ+VYHjTRsWNvkI5bkZ/wCYv3qMSyKcqc0KSQTtF8bKZVIHznn2IpktnfQQ98tzO+34tqD5uOhxQjp4YXj22CtrssSCCMcZqnJfw953ZnRZP5SwzQrPaX87lkuZgGHOw8+1Y93pGqDUpJUWUxkcd5jcOOvFaMccb+5EcjceEH0l5FG6rJPGrNyAWHNYms9qLWyRhHmSUeDAhfuAc+1Ch024V0iF0ucFmKt8ufL65zVO50S6ludkcyyKctuJ8R51rx4sd7syzzTrZBbpep3V1pt3dFwcI0qM3RR/LgVTtNbZEE97cmdGIRe7QD4j4HHSh0aVOISDduGIJZN3BGcc46806LSHEYjS4UFgRtI4OP6Vp0Q8knkmaN92pa3vWMJ7yAgFFIA9ea1tM1WPUIO9kT8OvgXfg+h4oITSLlpGiEKqQNwYsMEU+LRbkyOhjAVTncTjdjxHgadwhXIiyTTs6KsYZQyuCD0ORXlCSWd0iBYdTdUA4AjJx+deVLSvJX1H4Gvq93LcKoZNhcgOp+nj7/pT7jVLpJHjNwykLlNo/wC0HNYsO5ptsZJVhuIAxxk4I8jVkxzXlxuihLMpCnj7nn0H3pnjjfBkqTLj6gzx5a+Gc4Zc4OKW6UI0izM43c55GPP1qFdLe4nYTMkSgEBlHzVce0tLWLL95IN2QM9cjge1BqK4CkUktorlpQwY4JwzcYNWbK10yLL5lPI3DPHNVLsR94BApCk5GRjHmPavbZIFZ41UtuwMvJgk/SnlF1yGLSfBeitrVJmmgncjO5lbIwPLjinK0cjxLAJUlLZGMNuHkDipbbS8KshnwvUxlck+/A8ua0YjHapsgUID1IHJ9T1qehs0Ri+6oltI7kIBeSd0qniNG+Lr4noK0YHRQAowPqck+prJEhJyasRyECklhjzRrxSSN6zLTTJGG5Zgo96Je0cRt7mGRM7WQ45+v+tDfZmVBq1oZsbFbec/QE/rijDteqiziuOu2TacfUGpSw3jZd5qyxRgSRwXiDcg3jpQ3f6bd28u+zuHGDkozYz7/wC1apuu6bp+dKS7WdMOVzjrWWONp8F56ZIGf2zf2YEbRhSCQzTDnPXrTz2ojJVHQ8j5s8f31qxfxggCRFljH8LeHof7H0rBm02ORj+GyxY8R9GHp/N7c/StMemxvdowZZ5cfG4+8h0+7uHlS4ZC/JC+GP8AavETuwq2d0hQkhVfhsk/60P3UcqSHYGJB2MOhH0INVY2lU7txCgYGK1xwOuTDLMn23C9IZiCLkoCQQVLZI+nHvVe2spYlEiwRqCcYDYPP+orCgv7iMKgb+Lc3Oc+ta9jrTFXE5XEYBzjn0oPHOK2FuDfJdu4Hgj3GJiScAkAA9KzXuJI7YOP3ZyVK54z/SrJ1YXUJDKE8N3vVaZoZw0HwgseSAQOOSP9f1roRfcMpLsQSaiiOVWRyBgcHivKt2mlSNbRmNBIhHDFcZH3pVS4Cb+R1y9layhQQxZcuQ2enOefT2qaS87uMi22JIVyGPhuGQTz9PvWPI0Ms0xuXQ2+dw2rtOecYz556Utxuo0itIGd4chNq4IBz4+QHh60NHBzm2T3bX9yxWFU7uTBCjlvcVDEs7gKp7yQHGGGSc/n5nw/KtLT7bUJF3PJHB4KETLD1zx+vpV20tY7GFooyXVjls/xHzOOtMrWw8cTe7ILLQIO7hmv7g5QEdzGoBJ+rfKOvhn6+VXlis7b/wCJbJD4cEk+5PX9PpTC5JxkDngk4A/yot0TRuzkaLLquq2d5Oee4hulEaePxHqf09aZR8lPhhwCMk4zyeOlNDjxYelHtl2l0GC+is9I7NJdSu23csSLu8yBjoPM46USavZaQ1vI2o2NjsCE7jEq7QB1BHT2ptIPUOPBsmpVfBxmtfst2dOtXEkrM8dhG5G8nDPjHA48uSfD3o31Ofs12St4O70aGa5lzsBVS20eLM2SBn++tLpH9SnSOeJN8Pwkn0Nan4y4dAsk8rIf4GckV0fQjovarRGuZNJtoxvMbo0akqR4gjB8R5UBdqtKi0fX4LCOUJbT7Sksp4RS205P059sVKeJ9iuPOm6ZmTSjqfDxNUTdYbAKn0NdPgbslYW4W2l0+ZgvxOXR5DgZ8efasW27U6VqmoR2TaFCO/YLGXjRlP8A9hj/ADrliRzzt7pAVJNuGD+tUbkKQSwGOmTzRt2o7PWv4V7iwtmt5YxuKI2UkHp4N16cVldmdV0GytB+OhSS5JJaSaDfgeAB5HSqKFMSWbUrBh7pZgI72JLpQNoLNhwPIP8A0OR9KiOkpcBn0+c3HGe4dAsoHp/F/wCJz9KK9a1/Sxcsltp9vc25QZk2qCT6FeKZf6Np93Cs9jGYC43R7QVx6jw9RT6fBnlT5Of3dnKi/wDL3Kp5Krhl88jwqqjqYNqg5YnOV+nH9aLZL7vN1vqsZnUcd/G2JVH0b+IfRgfaqsug/iIzJpki3oAHCqBNGB4tH4+qk0OOScsb7A8qmTayswIPUj0z+lWI8B137s4YEjqSORxUyB7dAO7EhDEfAOR7H++lMtZIvw7TIrmfPlznz44/2rrFo14X7uJEQZCjGdhrysb9piP4HMu4dcUqloYbN6Hsj3WPxt6gkB4ig+Js+O5s4HtmtaSOJFVUWOJVGAsQx9znJphmIGAeP0qCSQDxp2m+TXGMYrYkdwBgAAeAFVZZevFSW9vc31wltZwSTTP8qoPDz9Pr0o20fsLFbbZNXzcTbhmKMkxpzjr/ABn7CmUQSmkBGn6bf6pL3dhbPMdwUsvCqfqTxRRY9hxCQdTumkl4/cW4/Vj/AKYo1Kfs1THGgGWwAmBsBHAGBwP786H9a0iG7hle7u59pcYgjkCrnAB4xz4c5p6Jajxtc7PdmY3isFV7ggKwgUFgRzy5/wAzQlq3aDUdflFuSUikkASBGJyTwNx8fDHhWnJ2Z0q3tXnvJpolVSzjePgGOPDnJHFYPZx4v8QWjSfu073Iyc7eDj+lBjKuTp2i2jWFpawxD90FCq27hyOc48yT16Vz7tXqb6l2gupmPwxnukHgAvB/PJ96PEaOW6RWT913e2NiSvpxx0APXyrCm7BSSX8khvFFs7vJgLl+STjPr41zQsWk7YX/APDWE23ZC2Mgw1zK8vP8pbA+4APvQv8A8XiP2vp6cl1tyTz4FuP0NdAsCltbpBiOG3ghXGeAox9foPOuPdt9XGua/NcwBmhGIYvMqOh9ySfehJbUHHvKynZWs9/cCG2Qu2NzHPCDzPkOaPtD7P2mmIJiwnu3TPe+CAjkL5HmqGmWf7KsPw+0STYVpMnadxx09Og9a0Wke7smUySxyqoO4SYbgDoxXrgHmuUaDKbexmdqu0C2ljJp6v3lyyd3tznYDxk+OceB9a5u+QMr08hXQT2R08TlHa4bdyqh+W8znb+v9abf9jbZdLlntu/Fxg9yjSAhz4L06np70WmcmkqOf29zLa3CTwPh4zkHFEZ7R28jIRFNG/U4IKn++a97PTaM4W3vbWKOcNlZmyQ/kMHofyNP1nREkO6ARoWJKNGDhl5OSBnp/fXFFCvncrSWdnqsZuVlInb4nO4MPcHp6VlXdpc6bOrMxUZOyVCRyPzFamiWU9rdkzNH3TrsOH5Oce46+9Ebae8kC2lxGZ4DkbscgHnrj15+nvR5BdAkNQtdQATWrbvm423lvhJlx5no/vUd12en7trzS7j9pQBgSYQFePzLqeftVe9tfwd3Nblt2xyoIPWm21xNaTLNbSvFKvRkODSOPgZqL5MqWNWkYiLx8EGP1pUVf4mL/Fd6Xp1xMfnmeEBnPmceNe0tS8CaI+SmWpEjo3NKlTljb0XtRNotp3dnp9nubPeTsGLv6nPT6dK0v/UfUQpC2NmM5AOX4zn6/WlSrrF0ooDtxeRBlWys1yfAOePLr9ao/wCKLokO1tbswPU7sk+fWlSooFIp6nrdzqUZWSOJAW3HYOuOg+grMLMOhwRyDSpVwTf0rtVe2iRiWJJ0jwQT8JOBgZ9q2j/xBuCoWKxXJ4O6bj7BaVKgckjJ1jtTqmrhoppFht2PMEAKqT4Z5yennisRpu5ZJMA92wIHvSpUB6pGunbG+UvJGsWXIViwJ6f7CvLPtffW7DENuVA2nO7kff6eGOtKlTE6NGTttdyq0jWVkc46BgV9Oada9vNQt0VEtbQqB8rBjg+Y56/WlSoWM4oGtUuReX092YY4u/cyNHHnaCeuM/XJ96ks9VvbAEQzfu8A7HG4Ljy8valSrjmiynaGUFma3jIZeVXCgjoeMVds+2lzbxvCLWGRSCEaQnMfpj/SlSooRpGFe3Et3dS3VwQ0srbnOOuarMRjj3pUqIWRbvMfnSpUqYU//9k=","data:image/jpeg;base64,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")) +posts.push(new Post("mom","data:image/jpeg;base64,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","data:image/jpeg;base64,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")) + +const users: User[] = []; + +users.push( + new User( + "dad", + "data:image/png;base64,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" + ) + ); + users.push( + new User( + "mom", + "data:image/png;base64,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" + ) + ); + users.push( + new User( + "son", + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDim2kq_9yyl5gxJEgCiqPV1Zh0OEUvmz07w&usqp=CAU" + ) + ); diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/selectUser.html b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/selectUser.html new file mode 100644 index 000000000..7c30dd83f --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/selectUser.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + + + + + + + + +
+ + + +
+
click any picture to enter the album
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/setPost.html b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/setPost.html new file mode 100644 index 000000000..fa0cce6a3 --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/setPost.html @@ -0,0 +1,33 @@ + + + + + + + setPost + + + + + + + + +
+ + + + + + + + + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/style.scss b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/style.scss new file mode 100644 index 000000000..7c8aa841b --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/style.scss @@ -0,0 +1,283 @@ +.bodyHomePage { + background-color: rgba(9, 179, 179, 0.555); + &__userForm { + // background-color: rgb(194, 21, 194); + // border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + // border: 1px solid black; + border-radius: 10px; + position: relative; + left: 70px; + } + &__mainLogo { + width: 300px; + margin-left: 40%; + border: 1px solid black; + border-radius: 10px; + } +} + +.form{ + position: relative; + left: 120px; +} + +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + img { + width: 100%; + } + border: solid coral; + padding: 50px; +} + +#listofUsers { + display: flex; + flex-direction: row; + width: 1000px; + margin: auto; +} + +.linkButton { + height: 100px; + width: 100px; +} +.userForm { + background-color: rgb(194, 21, 194); + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.recurring_div { + display: flex; + flex-direction: column; + background-color: rgba(255, 255, 255, 1); + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.recurring_user { + display: flex; + flex-direction: column; + background-color: rgb(236,236,238); + border: 5px black; + width: 100%; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.headline { + display: flex; + flex-direction: row; + height: 90px; + border: 1px solid rgba(0, 0, 0, 0.3151); + border-radius: 10px; + position: sticky; + top: 0px; + background-color: rgba(255, 255, 255, 1); + z-index: 1; + &__instegram_logo { + position: relative; + left: 10px; + top: 20px; + height: 70px; + } + &__formClass { + padding-left: 50%; + padding-top: 5%; + padding-left: 40%; + } +} + +#id_heart { + position: relative; + left: 140px; + bottom: 85px; + height: 60px; + width: 60px; + margin: auto; + margin-bottom: 8px; +} + +input[type="search"] { + width: 230px; + height: 30px; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + background-color: white; + padding: 12px 20px 12px 40px; + position: relative; + bottom: 40px; + right: 100px; +} + + + +.body_background_color { + background-color: rgb(203, 203, 203); +} + +.h1_design { + position: relative; + left: 10px; + font-size: 20px; +} + +.small_logo { + width: 50px; + height: 50px; + border-radius: 100px; + + float: left; + position: relative; + right: 10; +} + +.bottom_headline { + display: flex; + flex-direction: row; + height: 60px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: rgba(255, 255, 255, 1); + z-index: 1; +} + +#storyBox { + background-color: rgb(236, 236, 238); + width: 650px; + height: 100px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} +#storyBox2{ + background-color: rgb(236, 236, 238); + width: 650px; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} +#storyBox3{ + background-color: rgb(236, 236, 238); + width: 16%; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; + position: relative; + top: 20px; +} + +.frame { + background-color: aliceblue; + width: 800px; + height: 100%; + margin: auto; + border-radius: 10px; +} + +.img_story { + border-radius: 180px; + width: 50px; + height: 50px; + border: 2px solid rgb(236, 37, 37); + border-image: repeat; + position: relative; + top: 20px; +} + +.bottom_headline { + height: 50px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: rgba(255, 255, 255, 1); + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-radius: 10px; +} +.img_bottom_headline { + width: 30px; + height: 30px; + position: relative; + top: 10px; +} +.story_text { + position: relative; + top: 3px; + font-size: 17px; +} + +.dots { + width: 30px; + height: 30px; + position: relative; + left: 470px; + top: 20px; + display: inline; +} + +.recurring_div_headline { + display: flex; + flex-direction: row; +} + +@keyframes color { + 0% { background: #33CCCC; } + 20% { background: #33CC36; } + 40% { background: #B8CC33; } + 60% { background: #FCCA00; } + 80% { background: #33CC36; } + 100% { background: #33CCCC; } +} + +body { + background: #33CCCC; /* Fallback */ + animation: color 9s infinite linear; +} diff --git a/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/view.ts b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/view.ts new file mode 100644 index 000000000..75ed7237d --- /dev/null +++ b/01-HTML-CSS/02-position-box-model/HW/shlomi-samai/view.ts @@ -0,0 +1,29 @@ + + +// function getItemsFromStorage(){ +// try { +// const postsString = localStorage.getItem("posts"); +// if (!postsString) throw new Error("Couldn't find items in storage"); +// const items = JSON.parse(postsString); +// render(items) +// } +// catch (error) { +// console.error(error); +// } +// } + + function getUserFromStorage(){ + try { + const postsString = localStorage.getItem("users"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const users = JSON.parse(postsString); + return(users) + + } + catch (error) { + console.error(error); + return(undefined) + } + } + + \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Group_2/style.css b/01-HTML-CSS/03-nestting/BBC/Group_2/style.css new file mode 100644 index 000000000..2fbe040f6 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Group_2/style.css @@ -0,0 +1,15 @@ +.header { + background-color: black; + height: 60px; + color: white; + display: flex; + justify-content: center; + align-items: center; +} + +.header__left_title { + display: flex; + justify-content: center; + align-items: center; + height: 60px; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Group_2/style.css.map b/01-HTML-CSS/03-nestting/BBC/Group_2/style.css.map new file mode 100644 index 000000000..48457cd5a --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Group_2/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;ACCJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Omer.Virshuvski-BBC/style.css b/01-HTML-CSS/03-nestting/BBC/Omer.Virshuvski-BBC/style.css new file mode 100644 index 000000000..8e6d9a4c5 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Omer.Virshuvski-BBC/style.css @@ -0,0 +1,161 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body > * { + padding: 0px 3px; +} + +.header { + width: 100%; + height: 50px; + background-color: black; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + z-index: 50; +} +.header__menu { + color: white; + display: flex; + align-items: center; + justify-content: space-between; + width: 800px; +} +.header__menu input { + background-color: gray; + border: none; + border-radius: 5px; + padding: 5px; + color: white; +} +.header__menu input::-moz-placeholder { + color: white; +} +.header__menu input:-ms-input-placeholder { + color: white; +} +.header__menu input::placeholder { + color: white; +} +.header__signIn { + color: white; + display: flex; + align-items: center; + margin: 0; +} +.header__signIn > img { + margin: 0px 5px; +} +.header__logo { + display: flex; + justify-content: space-between; + width: 220px; +} +.header__logo__bigSquare { + width: 35px; + height: 35px; + background-color: white; + display: grid; + place-items: center; + font-weight: bolder; +} + +.gray { + color: gray; +} + +.newsSection { + margin-top: 80px; +} +.newsSection__headline { + display: flex; + justify-content: space-between; + margin-top: 30px; + margin-bottom: 15px; +} +.newsSection__headline__line { + border-left: 2px red solid; + padding-left: 7px; +} +.newsSection__headline__line1 { + border-left: 2px yellow solid; + padding-left: 7px; +} +.newsSection__articles1 > * { + height: 100%; + width: 100%; + position: relative; +} +.newsSection__articles1 > * > * { + position: absolute; + bottom: 0; + color: white; +} +.newsSection__articles1 { + display: grid; + grid-gap: 10px; + width: 100%; + height: 400px; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + margin: 30px 0px; +} +.newsSection__articles1__img1 { + grid-column: 1/3; + grid-row: 1/3; +} +.newsSection__articles1__img1__img { + width: 100%; + height: 100%; + position: absolute; + top: 0; + z-index: -1; +} +.newsSection__articles1__img1__shadow { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.306); + z-index: 5; +} +.newsSection__articles1__img1__text { + padding-left: 8px; + padding-bottom: 3px; + z-index: 6; +} +.newsSection__articles1__img1__text > p { + margin: 3px 0px; +} +.newsSection__articles1__img2 { + grid-column: 3/4; + grid-row: 1/2; +} +.newsSection__articles1__img3 { + grid-column: 4/5; + grid-row: 1/2; +} +.newsSection__articles1__img4 { + grid-column: 3/4; + grid-row: 2/3; +} +.newsSection__articles1__img5 { + grid-column: 4/5; + grid-row: 2/3; +} +.newsSection__articles2 > * { + position: relative; +} +.newsSection__articles2 > * > img { + width: 100%; +} +.newsSection__articles2 { + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Omer.Virshuvski-BBC/style.css.map b/01-HTML-CSS/03-nestting/BBC/Omer.Virshuvski-BBC/style.css.map new file mode 100644 index 000000000..532ac6800 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Omer.Virshuvski-BBC/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,SAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,eAAA;EACA,MAAA;EACA,WAAA;ACCJ;ADCI;EACI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,YAAA;ACCR;ADEI;EACI,sBAAA;EACA,YAAA;EACA,kBAAA;EACA,YAAA;EACA,YAAA;ACAR;ADGI;EACI,YAAA;ACDR;ADAI;EACI,YAAA;ACDR;ADAI;EACI,YAAA;ACDR;ADII;EACI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;ACFR;ADII;EACI,eAAA;ACFR;ADKI;EACI,aAAA;EACA,8BAAA;EACA,YAAA;ACHR;ADMQ;EACI,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACJZ;;ADUA;EACI,WAAA;ACPJ;;ADUA;EAEI,gBAAA;ACRJ;ADWI;EACI,aAAA;EACA,8BAAA;EACA,gBAAA;EACA,mBAAA;ACTR;ADWQ;EACI,0BAAA;EACA,iBAAA;ACTZ;ADYQ;EACI,6BAAA;EACA,iBAAA;ACVZ;ADcI;EACI,YAAA;EACA,WAAA;EACA,kBAAA;ACZR;ADeI;EACI,kBAAA;EACA,SAAA;EACA,YAAA;ACbR;ADgBI;EACI,aAAA;EACA,cAAA;EACA,WAAA;EACA,aAAA;EACA,sCAAA;EACA,2BAAA;EACA,gBAAA;ACdR;ADkBQ;EACI,gBAAA;EACA,aAAA;AChBZ;ADiBY;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;ACfhB;ADiBY;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sCAAA;EACA,UAAA;ACfhB;ADiBY;EACI,iBAAA;EACA,mBAAA;EACA,UAAA;ACfhB;ADiBY;EACI,eAAA;ACfhB;ADoBQ;EACI,gBAAA;EACA,aAAA;AClBZ;ADqBQ;EACI,gBAAA;EACA,aAAA;ACnBZ;ADsBQ;EACI,gBAAA;EACA,aAAA;ACpBZ;ADuBQ;EACI,gBAAA;EACA,aAAA;ACrBZ;AD4BI;EACI,kBAAA;AC1BR;AD6BI;EACI,WAAA;AC3BR;AD8BI;EACI,aAAA;EACA,cAAA;EACA,kCAAA;EACA,uBAAA;AC5BR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Tomer-C-group/style.css b/01-HTML-CSS/03-nestting/BBC/Tomer-C-group/style.css new file mode 100644 index 000000000..38218bfaf --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Tomer-C-group/style.css @@ -0,0 +1,15 @@ +body { + margin: 0; +} + +.wrapper { + width: 100%; + height: 50px; + background-color: black; +} + +.wrapper__box1__bbc { + width: 90px; + height: 50px; + margin-left: 15px; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Tomer-C-group/style.css.map b/01-HTML-CSS/03-nestting/BBC/Tomer-C-group/style.css.map new file mode 100644 index 000000000..b4d6b5fc9 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Tomer-C-group/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,WAAA;EACA,YAAA;EACA,uBAAA;ACCJ;;ADCA;EACI,WAAA;EACA,YAAA;EACA,iBAAA;ACEJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Uriel-shlomiA/style.css b/01-HTML-CSS/03-nestting/BBC/Uriel-shlomiA/style.css new file mode 100644 index 000000000..e35008a6f --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Uriel-shlomiA/style.css @@ -0,0 +1,13 @@ +body { + margin: 0; +} + +.navbar { + width: 100%; + height: 50px; + background-color: black; + display: flex; +} +.navbar__logo { + background-color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/Uriel-shlomiA/style.css.map b/01-HTML-CSS/03-nestting/BBC/Uriel-shlomiA/style.css.map new file mode 100644 index 000000000..61d678466 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/Uriel-shlomiA/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;ACCJ;ADEI;EACI,uBAAA;ACAR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/bbc-ex/style.css b/01-HTML-CSS/03-nestting/BBC/bbc-ex/style.css new file mode 100644 index 000000000..297d8b735 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/bbc-ex/style.css @@ -0,0 +1,15 @@ +body { + margin: 0; + overflow-x: hidden; +} + +.wrapper { + width: 100vw; + height: 100px; + background-color: black; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: baseline; + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/bbc-ex/style.css.map b/01-HTML-CSS/03-nestting/BBC/bbc-ex/style.css.map new file mode 100644 index 000000000..93649ade0 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/bbc-ex/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,kBAAA;ACCJ;;ADCA;EACI,YAAA;EACA,aAAA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,qBAAA;EACA,YAAA;ACEJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/grop_a/style.css b/01-HTML-CSS/03-nestting/BBC/grop_a/style.css new file mode 100644 index 000000000..7749bf347 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/grop_a/style.css @@ -0,0 +1,29 @@ +body { + margin: 0; +} + +.title { + width: 100%; + height: 100px; + background-color: black; + display: flex; + align-items: center; +} +.title .title__bbca { + margin-left: 100px; +} +.title .title__bbca__bbc { + text-align: center; + width: 30px; + height: 30px; + border: solid 2px black; + color: black; + background-color: white; + font-size: x-large; + border-radius: 3px; +} + +.a { + font-size: xx-large; + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/grop_a/style.css.map b/01-HTML-CSS/03-nestting/BBC/grop_a/style.css.map new file mode 100644 index 000000000..d2fb3d602 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/grop_a/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,SAAA;ACCD;;ADCA;EACA,WAAA;EACA,aAAA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;ACEA;ADCA;EACI,kBAAA;ACCJ;ADCI;EAGI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,kBAAA;ACDR;;ADUA;EACI,mBAAA;EACA,YAAA;ACPJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/room7/style.css b/01-HTML-CSS/03-nestting/BBC/room7/style.css new file mode 100644 index 000000000..9a87be0d3 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/room7/style.css @@ -0,0 +1,12 @@ +body { + margin: 0; + color: white; +} + +.container { + background-color: black; + width: 100vw; + height: 5rem; + display: flex; + flex-flow: row wrap; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/room7/style.css.map b/01-HTML-CSS/03-nestting/BBC/room7/style.css.map new file mode 100644 index 000000000..bf9135c42 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/room7/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,YAAA;ACCJ;;ADCA;EACI,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACEJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/vladi/style.css b/01-HTML-CSS/03-nestting/BBC/vladi/style.css index a7a9cbd5a..ffca3ecd4 100644 --- a/01-HTML-CSS/03-nestting/BBC/vladi/style.css +++ b/01-HTML-CSS/03-nestting/BBC/vladi/style.css @@ -1,70 +1,101 @@ -body{ - width:100vw +body { + width: 100vw; } -.nav{ - background-color: black; - color: white; - width: 80%; - height: 4rem; - margin: 0 auto; - display: flex; - justify-content: space-between; - +.wrapper { + width: 80%; + margin: 0 auto; } -.grid{ - display: flex; - align-items: center; - width: auto; +.nav { + background-color: black; + color: white; + height: 4rem; + display: flex; + justify-content: space-between; } - -.left{ - width:20%; - display: flex; - justify-content: space-around; - font-size: 1.1rem; +.nav .x { + display: flex; + align-items: center; + width: auto; } - -.left>img{ - height: 100%; +.nav .left { + width: 20%; + display: flex; + justify-content: space-around; + font-size: 1.1rem; } - -.mid{ - width: 50%; +.nav .left img { + height: 100%; } - -.mid>ul{ - display: flex; - flex-wrap: wrap; - justify-content: space-around; - position: relative; - width: 100%; - padding: 0; - list-style-type: none; - font-size: 13px; - font-weight: 700; +.nav .mid { + width: 50%; } - -.right{ - width:25%; - display: flex; - justify-content: space-evenly; +.nav .mid ul { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + position: relative; + width: 100%; + padding: 0; + list-style-type: none; + font-size: 13px; + font-weight: 700; } - -.right>input{ - width: 80%; - border: none; - border-radius: 2px; - background-color: black; +.nav .right { + width: 25%; + display: flex; + justify-content: space-evenly; } - -.right>input::placeholder{ - color: aliceblue; - font-weight: 500; - text-align: center; +.nav .right input { + width: 80%; + border: none; + border-radius: 2px; + background-color: black; +} +.nav .right input::-moz-placeholder { + color: aliceblue; + font-weight: 500; + text-align: center; +} +.nav .right input:-ms-input-placeholder { + color: aliceblue; + font-weight: 500; + text-align: center; +} +.nav .right input::placeholder { + color: aliceblue; + font-weight: 500; + text-align: center; +} +.nav .right .dots { + margin-bottom: 0.2em; } -.right>.dots{ - margin-bottom: .2em; +.grid { + width: 100%; + height: 300px; + display: grid; + grid-template-areas: "box1 box1 box2 box3" "box1 box1 box2 box3" "box1 box1 box4 box5" "box1 box1 box4 box5"; + gap: 5px; +} +.grid .box1 { + background-color: aqua; + grid-area: box1; +} +.grid .box2 { + grid-area: box2; + background-color: red; +} +.grid .box3 { + grid-area: box3; + background-color: black; +} +.grid .box4 { + grid-area: box4; + background-color: green; +} +.grid .box5 { + grid-area: box5; + background-color: blue; } \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/BBC/vladi/style.css.map b/01-HTML-CSS/03-nestting/BBC/vladi/style.css.map new file mode 100644 index 000000000..52933ac05 --- /dev/null +++ b/01-HTML-CSS/03-nestting/BBC/vladi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,YAAA;ACCJ;;ADEA;EACI,UAAA;EACA,cAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;ACCJ;ADAI;EACI,aAAA;EACA,mBAAA;EACA,WAAA;ACER;ADCI;EACI,UAAA;EACA,aAAA;EACA,6BAAA;EACA,iBAAA;ACCR;ADAQ;EACI,YAAA;ACEZ;ADCI;EACI,UAAA;ACCR;ADAQ;EACI,aAAA;EACA,eAAA;EACA,6BAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;EACA,qBAAA;EACA,eAAA;EACA,gBAAA;ACEZ;ADCI;EACI,UAAA;EACA,aAAA;EACA,6BAAA;ACCR;ADAQ;EACI,UAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;ACEZ;ADAQ;EACI,gBAAA;EACA,gBAAA;EACA,kBAAA;ACEZ;ADLQ;EACI,gBAAA;EACA,gBAAA;EACA,kBAAA;ACEZ;ADLQ;EACI,gBAAA;EACA,gBAAA;EACA,kBAAA;ACEZ;ADAQ;EACI,oBAAA;ACEZ;;ADGA;EAEI,WAAA;EACA,aAAA;EACA,aAAA;EACA,4GACA;EAIA,QAAA;ACLJ;ADMI;EACI,sBAAA;EACA,eAAA;ACJR;ADMI;EACI,eAAA;EACA,qBAAA;ACJR;ADMI;EACI,eAAA;EACA,uBAAA;ACJR;ADMI;EACI,eAAA;EACA,uBAAA;ACJR;ADMI;EACI,eAAA;EACA,sBAAA;ACJR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Example/style.css b/01-HTML-CSS/03-nestting/Example/style.css new file mode 100644 index 000000000..6c0705d68 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Example/style.css @@ -0,0 +1,46 @@ +@charset "UTF-8"; +body { + margin: 0%; +} + +.wrapper { + background-color: aqua; + height: 500px; + width: 500px; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +.wrapper__box { + background-color: purple; + height: 50px; + width: 50px; + border: 1px solid black; +} +.wrapper__box__header { + color: aqua; +} + +#green { + background-color: green; +} + +#red { + background-color: red; +} + +#yellow { + background-color: yellow; + order: 4; +} + +/*FLEX*/ +/* - display: flex +flex-direction: row / column / row-reverse / column-reverse +flex-wrap: האם יש לנו "אנטר" באמצע שורת הפלקס- מונע מעיכה +flex-flow: direction + wrap +align-content: ממקם את כל התוכן של הדיו לפי המיקום של הפלקס +justify-content: +align-items +order: סידור לפי המיקום (רשימה) +*/ \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Example/style.css.map b/01-HTML-CSS/03-nestting/Example/style.css.map new file mode 100644 index 000000000..229d3aae3 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Example/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;EACI,UAAA;ADEJ;;ACCA;EACI,sBAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,6BAAA;ADEJ;ACCI;EACI,wBAAA;EACA,YAAA;EACA,WAAA;EACA,uBAAA;ADCR;ACEQ;EACI,WAAA;ADAZ;;ACMA;EACI,uBAAA;ADHJ;;ACMA;EACI,qBAAA;ADHJ;;ACMA;EACI,wBAAA;EACA,QAAA;ADHJ;;ACMA,OAAA;AACA;;;;;;;;CAAA","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/Itai-g/style.css b/01-HTML-CSS/03-nestting/Followup/Itai-g/style.css new file mode 100644 index 000000000..609253955 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/Itai-g/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/Itai-g/style.css.map b/01-HTML-CSS/03-nestting/Followup/Itai-g/style.css.map new file mode 100644 index 000000000..c0a9bf55d --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/Itai-g/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/aviva elias/aviva/style.css b/01-HTML-CSS/03-nestting/Followup/aviva elias/aviva/style.css new file mode 100644 index 000000000..0bb7e8f89 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/aviva elias/aviva/style.css @@ -0,0 +1,27 @@ +body { + background-color: antiquewhite; + margin: 0; +} + +.big-box { + width: 50vw; + height: 50vh; + border: 10px solid black; + margin: auto; +} + +.img { + width: 100%; + height: 50%; +} + +img { + width: 100%; + height: 100%; +} + +.headline { + width: 100%; + height: 50%; + text-align: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/aviva elias/aviva/style.css.map b/01-HTML-CSS/03-nestting/Followup/aviva elias/aviva/style.css.map new file mode 100644 index 000000000..a2b1e9dd1 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/aviva elias/aviva/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,8BAAA;EACA,SAAA;ACCJ;;ADGA;EACI,WAAA;EACA,YAAA;EACA,wBAAA;EACF,YAAA;ACAF;;ADEA;EACI,WAAA;EACA,WAAA;ACCJ;;ADEA;EACI,WAAA;EACA,YAAA;ACCJ;;ADCA;EACI,WAAA;EACA,WAAA;EACA,kBAAA;ACEJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/aviva elias/index.html b/01-HTML-CSS/03-nestting/Followup/aviva elias/index.html index 96f75ba80..b1c9fac4a 100644 --- a/01-HTML-CSS/03-nestting/Followup/aviva elias/index.html +++ b/01-HTML-CSS/03-nestting/Followup/aviva elias/index.html @@ -14,6 +14,7 @@

hello

+ /*עלעלחעחלי*/
@@ -22,6 +23,7 @@
+ diff --git a/01-HTML-CSS/03-nestting/Followup/aviva elias/style.css b/01-HTML-CSS/03-nestting/Followup/aviva elias/style.css new file mode 100644 index 000000000..3d3fff03c --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/aviva elias/style.css @@ -0,0 +1,18 @@ +body { + margin: 0; +} + +.wrapper { + height: 500px; + width: 500px; + background-color: antiquewhite; +} +.wrapper__box { + height: 50px; + width: 50px; + background-color: purple; + border: 1px solid black; +} +.wrapper__box__header { + color: aqua; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/aviva elias/style.css.map b/01-HTML-CSS/03-nestting/Followup/aviva elias/style.css.map new file mode 100644 index 000000000..fa9636d70 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/aviva elias/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,YAAA;EACA,8BAAA;ACCJ;ADAA;EACI,YAAA;EACA,WAAA;EACA,wBAAA;EACA,uBAAA;ACEJ;ADAC;EACO,WAAA;ACER","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/noa-meillet/style.css b/01-HTML-CSS/03-nestting/Followup/noa-meillet/style.css new file mode 100644 index 000000000..7ef780e6f --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/noa-meillet/style.css @@ -0,0 +1,18 @@ +body { + margin: 0; +} + +.wrapper { + background-color: aliceblue; + width: 70%; + display: flex; + flex-direction: row; +} +.wrapper__box { + width: 100px; + height: 100px; + background-color: cadetblue; + border: 1px solid black; +} + +/*flex*/ \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/noa-meillet/style.css.map b/01-HTML-CSS/03-nestting/Followup/noa-meillet/style.css.map new file mode 100644 index 000000000..65487eb74 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,2BAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;ACCJ;ADCI;EACA,YAAA;EACA,aAAA;EACA,2BAAA;EACA,uBAAA;ACCJ;;ADIA,OAAA","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/shalomcop/style.css b/01-HTML-CSS/03-nestting/Followup/shalomcop/style.css new file mode 100644 index 000000000..820404c33 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/shalomcop/style.css @@ -0,0 +1,4 @@ +h1 { + width: auto; + color: red; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/shalomcop/style.css.map b/01-HTML-CSS/03-nestting/Followup/shalomcop/style.css.map new file mode 100644 index 000000000..7cd06bca6 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/shalomcop/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,UAAA;ACCJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/shlomi- samai/style.css b/01-HTML-CSS/03-nestting/Followup/shlomi- samai/style.css new file mode 100644 index 000000000..7c44f0766 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/shlomi- samai/style.css @@ -0,0 +1,3 @@ +body { + margin: 0%; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/shlomi- samai/style.css.map b/01-HTML-CSS/03-nestting/Followup/shlomi- samai/style.css.map new file mode 100644 index 000000000..e8b498883 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/shlomi- samai/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/tomercohenfollowup/style.css b/01-HTML-CSS/03-nestting/Followup/tomercohenfollowup/style.css new file mode 100644 index 000000000..6587f094f --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/tomercohenfollowup/style.css @@ -0,0 +1,9 @@ +body { + margin: 0; +} + +.box { + display: flex; + justify-content: flex-end; + align-items: flex-start; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/tomercohenfollowup/style.css.map b/01-HTML-CSS/03-nestting/Followup/tomercohenfollowup/style.css.map new file mode 100644 index 000000000..b93ae047f --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/tomercohenfollowup/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADKA;EACA,aAAA;EACA,yBAAA;EACA,uBAAA;ACFA","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/uriel bargil/style.css b/01-HTML-CSS/03-nestting/Followup/uriel bargil/style.css new file mode 100644 index 000000000..35770477d --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/uriel bargil/style.css @@ -0,0 +1,6 @@ +body { + margin: 0%; + background-color: aquamarine; + width: 1000px; + height: 1100px; +} \ No newline at end of file diff --git a/01-HTML-CSS/03-nestting/Followup/uriel bargil/style.css.map b/01-HTML-CSS/03-nestting/Followup/uriel bargil/style.css.map new file mode 100644 index 000000000..4671de832 --- /dev/null +++ b/01-HTML-CSS/03-nestting/Followup/uriel bargil/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,4BAAA;EACA,aAAA;EACA,cAAA;ACCJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Angela/style.css b/01-HTML-CSS/04-grid/BBC-HW/Angela/style.css new file mode 100644 index 000000000..8c2785fc5 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Angela/style.css @@ -0,0 +1,276 @@ +body { + margin: 0; + overflow-x: hidden; +} + +.nav-wrapper { + width: 100vw; + height: 5rem; + background-color: black; + display: flex; + align-items: center; +} +.nav-wrapper__left { + height: 100%; + width: 12rem; + margin-left: 7rem; + display: flex; + justify-content: center; + align-items: center; + justify-content: space-evenly; + color: white; +} +.nav-wrapper__left h4 { + background-color: white; + color: black; + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: larger bold; +} +.nav-wrapper__left a { + color: white; + text-decoration: none; + transition: all 500ms; +} +.nav-wrapper__left a:hover { + border-bottom: 0.2rem solid rgb(255, 255, 255); +} +.nav-wrapper__right { + height: 100%; + margin-left: 3rem; + width: 71rem; + display: flex; + justify-content: center; + align-items: center; + justify-content: space-evenly; + color: white; +} +.nav-wrapper__right input[type=text] { + padding: 0.5rem; + box-sizing: border-box; + border: none; + background-color: rgba(238, 232, 232, 0.647); + color: aliceblue; +} +.nav-wrapper__right input[type=text]:focus { + background-color: aliceblue; +} +.nav-wrapper__right a { + color: white; + text-decoration: none; +} + +.body { + height: auto; + margin: 2rem 7rem; +} +.body h5 { + border-left: 0.2rem solid red; + color: grey; + font-size: larger; + transition: all 500ms; +} +.body h5:hover { + color: black; + border-left-width: 0.5rem; +} + +.body__grid-container-upper { + height: 25rem; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + -moz-column-gap: 1rem; + column-gap: 1rem; + row-gap: 0.5rem; + grid-template-areas: "main main article1 article2 " "main main article3 article4 "; +} +.body__grid-container-upper__item1 { + grid-area: main; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url("https://www.state.gov/wp-content/uploads/2019/04/North-Macedonia-2560x1100.png"); + color: white; + display: grid; + grid-template-rows: repeat(5, 1fr); +} +.body__grid-container-upper__item1 h3 { + grid-row: 3; + font-size: x-large; +} +.body__grid-container-upper__item1 article { + grid-row: 4; + font-size: larger; +} +.body__grid-container-upper__item1 a { + grid-row: 5/5; + font-size: larger; + margin-left: 0.2rem; + color: rgba(255, 255, 255, 0.523); + text-decoration: none; + transition: all 500ms; +} +.body__grid-container-upper__item1 a:hover { + border-left: 0.5rem solid red; + color: white; +} +.body__grid-container-upper__item2 { + background-color: burlywood; + grid-area: article1; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url("https://library.sportingnews.com/styles/twitter_card_120x120/s3/2021-10/fifa-2022-world-cup-logo-qatar_z5t4wjudq9ty1mh5kqpn38ott.jpg?itok=EC9Y27cF"); + background-size: cover; + background-repeat: no-repeat; + display: grid; + grid-template-rows: repeat(5, 2.5rem); + color: white; +} +.body__grid-container-upper__item2 h3 { + grid-row: 3; +} +.body__grid-container-upper__item2 article { + grid-row: 4; +} +.body__grid-container-upper__item2 a { + grid-row: 5; + color: rgba(255, 255, 255, 0.523); + text-decoration: none; + transition: all 500ms; + margin-left: 0.2rem; +} +.body__grid-container-upper__item2 a:hover { + border-left: 0.5rem solid red; + color: white; +} +.body__grid-container-upper__item3 { + background-color: rgb(28, 16, 81); + grid-area: article2; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url("https://media-cldnry.s-nbcnews.com/image/upload/newscms/2019_02/2706861/190107-messy-desk-stock-cs-910a.jpg"); + background-size: cover; + background-repeat: no-repeat; + display: grid; + grid-template-rows: repeat(5, 2.5rem); + color: white; +} +.body__grid-container-upper__item3 h3 { + grid-row: 3; +} +.body__grid-container-upper__item3 article { + grid-row: 4; +} +.body__grid-container-upper__item3 a { + grid-row: 5; + color: rgba(255, 255, 255, 0.523); + text-decoration: none; + transition: all 500ms; + margin-left: 0.2rem; +} +.body__grid-container-upper__item3 a:hover { + border-left: 0.5rem solid red; + color: white; +} +.body__grid-container-upper__item4 { + background-color: rgb(135, 41, 96); + grid-area: article3; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url("https://i0.wp.com/www.nfid.org/wp-content/uploads/2020/02/Coronavirus.png?fit=767%2C512&ssl=1"); + background-size: cover; + background-repeat: no-repeat; + display: grid; + grid-template-rows: repeat(5, 2.5rem); + color: white; +} +.body__grid-container-upper__item4 h3 { + grid-row: 3; +} +.body__grid-container-upper__item4 article { + grid-row: 4; +} +.body__grid-container-upper__item4 a { + grid-row: 5; + color: rgba(255, 255, 255, 0.523); + text-decoration: none; + transition: all 500ms; + margin-left: 0.2rem; +} +.body__grid-container-upper__item4 a:hover { + border-left: 0.5rem solid red; + color: white; +} +.body__grid-container-upper__item5 { + background-color: rgb(51, 101, 128); + grid-area: article4; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url("https://pbs.twimg.com/media/FhsgrtGXEAEpymE?format=jpg&name=small"); + background-size: 100% 100%; + background-repeat: no-repeat; + display: grid; + grid-template-rows: repeat(5, 2.5rem); + color: white; +} +.body__grid-container-upper__item5 h3 { + grid-row: 3; +} +.body__grid-container-upper__item5 article { + grid-row: 4; +} +.body__grid-container-upper__item5 a { + grid-row: 5; + color: rgba(255, 255, 255, 0.523); + text-decoration: none; + transition: all 500ms; + margin-left: 0.2rem; +} +.body__grid-container-upper__item5 a:hover { + border-left: 0.5rem solid red; + color: white; +} + +.body__flex-container { + height: 20rem; + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: center; + justify-content: space-evenly; +} +.body__flex-container__item1 { + height: 100%; + width: 30%; + display: flex; + flex-flow: column nowrap; + background-color: rgba(220, 220, 220, 0.334); +} +.body__flex-container__item1 img { + width: 90%; + height: 60%; +} +.body__flex-container__item1 h3 { + align-self: center; +} +.body__flex-container__item2 { + height: 100%; + width: 30%; + display: flex; + flex-flow: column nowrap; + background-color: rgba(220, 220, 220, 0.334); +} +.body__flex-container__item2 img { + width: 90%; + height: 60%; +} +.body__flex-container__item2 h3 { + align-self: center; +} +.body__flex-container__item3 { + height: 100%; + width: 30%; + display: flex; + flex-flow: column nowrap; + background-color: rgba(220, 220, 220, 0.334); +} +.body__flex-container__item3 img { + width: 90%; + height: 60%; +} +.body__flex-container__item3 h3 { + align-self: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Angela/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Angela/style.css.map new file mode 100644 index 000000000..b0693ebab --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Angela/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Ayala-P- BBC/style.css b/01-HTML-CSS/04-grid/BBC-HW/Ayala-P- BBC/style.css new file mode 100644 index 000000000..df61b7a61 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Ayala-P- BBC/style.css @@ -0,0 +1,223 @@ +@charset "UTF-8"; +/* +*{ + box-sizing: border-box; /* מרחיב את הפדחנג והורדר כלפי פנים*/ +body { + background-color: whitesmoke; + margin: 0%; + font-family: sans-serif; + overflow-x: hidden; +} + +.all { + width: 97vw; + height: 500vw; + margin: auto; + padding: 5px; + border: 5px solid white; +} +.all .header { + background-color: black; + margin: auto; + width: 100%; + height: 50px; + display: flex; + padding: 5px; + align-items: center; + justify-content: space-between; +} +.all .header__bbc { + display: flex; + width: 500px; + padding: 8px; + flex-direction: row; + justify-content: space-evenly; + flex-direction: row; + align-items: center; +} +.all .header__bbc__logo { + width: 100px; + display: flex; + position: relative; + top: 1px; + justify-content: space-evenly; +} +.all .header__bbc__icon { + width: 10px; + display: flex; + position: relative; + top: 1px; + justify-content: space-evenly; +} +.all .header__bbc p { + font-size: x-large; + width: 25px; + height: 25px; + color: black; + background-color: white; +} +.all .header__bbc__Sign_in { + margin-left: 0; + width: 100px; + color: white; + align-items: center; + top: 1px; + padding: 1px; + position: relative; + justify-content: space-evenly; +} +.all .header__bbc__Sign_in h3 { + font-size: large; +} +.all .header nav { + width: 100vw; + background-color: black; + font-weight: bold; + align-items: center; +} +.all .header a { + color: white; + align-items: center; +} +.all .header ul { + list-style: none; + margin: 0; + display: flex; + justify-content: flex-end; + align-items: center; + padding: 1emm 0; +} +.all .header li { + top: 1px; + -webkit-text-emphasis: none; + text-emphasis: none; + color: white; + padding-right: 3em; + position: relative; + align-items: center; +} +.all .container { + padding: 1rem 0; + margin: auto; + width: 99%; + height: 100px; + display: flex; + padding: 5px; + align-items: center; + justify-content: space-between; + display: inherit; + padding-bottom: 1rem; + background-color: white; + border: 3px solid white; + padding-top: 1rem; + font-weight: normal; + display: inherit; +} +.all .container strip { + align-items: center; + margin-left: 0; + font-size: x-large; + width: 25px; + height: 25px; + color: black; +} +.all .container h3 { + padding: 5px; + height: 25px; + margin-left: 82%; + margin-top: -50px; +} +.all .grid-container { + height: 345px; + /* + height: 8%;*/ + display: grid; + grid-template-columns: 5fr 1fr 1fr 1fr 1fr; + grid-template-rows: 80px; + row-gap: 100px; + -moz-column-gap: 10px; + column-gap: 10px; + border: 3px solid white; +} + +.wrapper { + padding: 1rem 0; + margin: auto; + width: 99%; + height: 100px; + display: flex; + padding: 5px; + align-items: center; + justify-content: space-between; + display: inherit; + padding-bottom: 1rem; + background-color: white; + border: 3px solid white; + padding-top: 1rem; + font-weight: normal; + display: inherit; + display: grid; +} +.wrapper main { + font-size: 1.75rem; + align-items: center; + margin-left: 0; + font-size: x-large; + width: 25px; + height: 25px; + color: black; + justify-content: space-between; +} + +.grid-wrapper { + height: 500px; + /* + height: 8%;*/ + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 80px; + row-gap: 100px; + -moz-column-gap: 10px; + column-gap: 10px; + border: 3px solid white; +} + +.wraps { + padding: 1rem 0; + margin: auto; + width: 99%; + height: 100px; + display: flex; + padding: 5px; + align-items: center; + justify-content: space-between; + display: inherit; + padding-bottom: 1rem; + background-color: white; + border: 3px solid white; + padding-top: 1rem; + font-weight: normal; + display: inherit; + display: grid; +} +.wraps box { + font-size: 1.75rem; + align-items: center; + margin-left: 0; + font-size: x-large; + width: 25px; + height: 25px; + color: black; + justify-content: space-between; +} + +.grid-wraps { + height: 500px; + display: grid; + grid-template-columns: 3fr 3fr 3fr; + grid-template-rows: 80px; + row-gap: 100px; + -moz-column-gap: 10px; + column-gap: 10px; + border: 3px solid white; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Ayala-P- BBC/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Ayala-P- BBC/style.css.map new file mode 100644 index 000000000..a9c2822f7 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Ayala-P- BBC/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/dist/style.css b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/dist/style.css index d696f37d4..abd7fc3a0 100644 --- a/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/dist/style.css +++ b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/dist/style.css @@ -99,6 +99,7 @@ margin-left: 40px; font-size: 20px; cursor: pointer; + box-sizing: border-box; } .navbar .submenu { display: none; diff --git a/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.css b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.css new file mode 100644 index 000000000..a5e97a908 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.css @@ -0,0 +1,516 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.Header { + position: relative; + display: flex; + width: 100%; + height: 70px; + background: black; + align-items: center; +} +.Header .Header__box { + display: flex; + text-align: center; + margin-left: 50px; + font-size: 30px; +} +.Header .Header__box .B, .Header .Header__box .C { + color: black; + background-color: white; + border: 2px solid black; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + width: 30px; +} +.Header .Header__box .Header__box i { + color: white; +} + +.Header__box a { + text-decoration: none; +} + +.UserIcon { + display: flex; + color: white; + font-size: 30px; + align-items: center; + margin-left: 10px; + margin-top: 3px; +} + +.Signin { + display: flex; + color: white; + font-size: 20px; + align-items: center; + margin-left: 5px; +} + +.navbar { + position: absolute; + display: flex; + color: white; + font-size: 17px; + margin-left: 500px; +} +.navbar .N, .navbar .S, .navbar .R, .navbar .W, .navbar .T, .navbar .F, .navbar .C { + margin-left: 30px; + color: white; +} +.navbar .N, .navbar .S, .navbar .R, .navbar .W, .navbar .T, .navbar .F, .navbar .C, .navbar a { + text-decoration: none; +} +.navbar .H { + color: white; +} +.navbar .H:hover { + border-bottom: 2px solid white; + padding-bottom: 10px; +} +.navbar .N:hover { + border-bottom: 2px solid red; + padding-bottom: 10px; +} +.navbar .S:hover { + border-bottom: 2px solid yellow; + padding-bottom: 10px; +} +.navbar .R:hover, .navbar .W:hover { + border-bottom: 2px solid rgb(0, 68, 255); + padding-bottom: 10px; +} +.navbar .T:hover { + border-bottom: 2px solid green; + padding-bottom: 10px; +} +.navbar .F:hover { + border-bottom: 2px solid rgb(0, 255, 179); + padding-bottom: 10px; +} +.navbar .C:hover { + border-bottom: 2px solid rgb(255, 0, 255); + padding-bottom: 10px; +} +.navbar .menu { + margin-left: 40px; + font-size: 20px; + cursor: pointer; + box-sizing: border-box; +} +.navbar .submenu { + display: none; +} +.navbar .insubmenu hr { + position: relative; + width: 100%; +} +.navbar .menu:hover .submenu { + display: block; + position: absolute; + background: rgb(77, 77, 77); + z-index: 1; + height: 180px; +} +.navbar .insubmenu .link1, .navbar .link2, .navbar .link3 { + position: relative; + width: 100%; + height: 33%; +} +.navbar .menu a { + color: white; + text-decoration: none; +} +.navbar .insubmenu { + display: flex; + flex-direction: column; + padding: 10px; + gap: 20px; + text-align: start; +} + +.submenu { + -webkit-animation: growOut 300ms ease-in-out forwards; + animation: growOut 300ms ease-in-out forwards; + transform-origin: top center; +} +@-webkit-keyframes growOut { + 0% { + transform: scale(0); + } + 80% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} +@keyframes growOut { + 0% { + transform: scale(0); + } + 80% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +.hr { + margin-left: 200px; + height: 50%; +} + +.SearchBBC { + position: relative; + text-align: right; + margin-left: 30px; + color: #fff; +} +.SearchBBC input { + position: absolute; + background-color: #313131; + width: 190px; + height: 35px; + margin-top: -12px; + text-align: center; + border: none; + color: #fff; +} +.SearchBBC input::-moz-placeholder { + color: #fff; +} +.SearchBBC input:-ms-input-placeholder { + color: #fff; +} +.SearchBBC input::placeholder { + color: #fff; +} + +.searchicon { + display: flex; + position: absolute; + margin-left: 101%; + top: -2px; +} + +.grid-container { + position: relative; + width: 90%; + height: 400px; + display: grid; + margin-left: 5%; + grid-template-columns: 2fr 1fr 1fr; + gap: 10px; +} +.grid-container .grid-container__box1 { + grid-row-start: 1; + grid-row-end: 3; + height: 100%; + width: 2fr; +} +.grid-container .grid-container__box1 img { + position: absolute; + height: 100%; + width: 48%; +} +.grid-container .grid-container__box1 img:hover { + opacity: 0.8; +} +.grid-container .grid-container__box2 img { + position: absolute; + height: 50%; + width: 25%; +} +.grid-container .grid-container__box2 img:hover { + opacity: 0.8; +} +.grid-container .grid-container__box3 img { + position: absolute; + height: 50%; + width: 25%; +} +.grid-container .grid-container__box3 img:hover { + opacity: 0.8; +} +.grid-container .grid-container__box4 img { + position: absolute; + height: 49%; + width: 25%; +} +.grid-container .grid-container__box4 img:hover { + opacity: 0.8; +} +.grid-container .grid-container__box5 img { + position: absolute; + height: 49%; + width: 25%; +} +.grid-container .grid-container__box5 img:hover { + opacity: 0.8; +} +.grid-container .headline { + position: absolute; + color: white; + bottom: 20%; + text-align: left; + font-size: 14px; + left: 10px; +} +.grid-container .Subtitle { + position: absolute; + color: white; + bottom: 10%; + font-size: 14.5px; + text-align: justify; + left: 10px; +} +.grid-container .backgroundbox { + position: absolute; + background: rgba(54, 54, 54, 0.8); + height: 75px; + width: 48%; + bottom: 9%; +} +.grid-container .headline a, .grid-container .Subtitle a, .grid-container .headline2 a { + text-decoration: none; + color: white; +} +.grid-container .headline a:hover { + text-decoration: underline; +} +.grid-container .headline2 { + position: absolute; + color: white; + text-align: left; + font-size: 14px; + bottom: 60%; + margin-left: 10px; +} +.grid-container .headline2 a:hover { + text-decoration: underline; +} +.grid-container .grid-container__box2 p { + position: absolute; + color: white; + bottom: 52%; + margin-left: 20px; +} +.grid-container .grid-container__box2 hr { + position: absolute; + border: 1px solid rgb(0, 162, 255); + width: 1.5%; + transform: rotate(90deg); + bottom: 54%; +} +.grid-container .headline3 { + position: absolute; + font-size: 20px; + bottom: 57%; + margin-left: 10px; +} +.grid-container .headline3 a { + color: white; + text-decoration: none; +} +.grid-container .headline3 a:hover { + text-decoration: underline; +} +.grid-container .grid-container__box3 p { + position: absolute; + color: white; + bottom: 52%; + margin-left: 20px; +} +.grid-container .grid-container__box3__hr { + position: absolute; + border: 1px solid red; + width: 1.5%; + transform: rotate(90deg); + bottom: 54%; +} +.grid-container .headline4 { + position: absolute; + font-size: 20px; + bottom: 8%; + margin-left: 10px; +} +.grid-container .headline4 a { + text-decoration: none; + color: white; +} +.grid-container .headline4 a:hover { + text-decoration: underline; +} +.grid-container .grid-container__box4 p { + color: white; + position: absolute; + bottom: 2%; + margin-left: 20px; + font-size: 13px; +} +.grid-container .grid-container__box4 hr { + position: absolute; + border: 1px solid rgb(157, 255, 0); + width: 1.5%; + transform: rotate(90deg); + bottom: 3.5%; +} +.grid-container .headline5 { + position: absolute; + bottom: 8%; + margin-left: 10px; +} +.grid-container .headline5 a { + text-decoration: none; + color: white; +} +.grid-container .headline5 a:hover { + text-decoration: underline; +} +.grid-container .grid-container__box5 p { + position: absolute; + color: white; + bottom: 2%; + margin-left: 20px; + font-size: 13px; +} +.grid-container .grid-container__box5 hr { + position: absolute; + border: 1px solid rgb(255, 0, 242); + width: 1.5%; + transform: rotate(90deg); + bottom: 3.5%; +} + +.date { + color: grey; + margin-left: 85%; + display: inline-block; +} + +.welcome-page { + position: absolute; + margin-left: 5%; + margin-top: 1%; + color: rgb(54, 54, 54); +} + +.News-container { + width: 91%; + height: 500px; + margin-left: 70px; +} + +.News-container__bixbox { + display: flex; + align-items: center; + justify-content: space-between; + height: 330px; +} + +.News-container__box1 { + width: 30%; + height: 230px; + margin-bottom: 70px; +} + +.News-container__box1 img { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + height: 230px; +} + +.News-container__box2 { + width: 30%; + height: 230px; + margin-bottom: 70px; +} + +.News-container__box2 img { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + height: 230px; +} + +.News-container__box3 { + width: 30%; + height: 230px; + margin-bottom: 70px; +} + +.News-container__box3 img { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + height: 230px; +} + +.News-container__bixbox img:hover { + opacity: 0.8; +} + +.NewsTitle { + font-size: 30px; + margin-left: 40px; + margin-top: 20px; +} + +.NewsTitle a { + color: black; + text-decoration: none; +} + +.NewsTitle:hover { + font-weight: bold; +} + +.HRNews { + position: absolute; + width: 2.5%; + border: 1px solid red; + transform: rotate(90deg); + margin-top: 15px; + margin-left: 10px; +} + +.footerbox { + display: flex; + position: fixed; + width: 100%; + height: 30px; + background: rgb(124, 124, 124); + bottom: 0; + justify-content: center; + align-items: center; + font-family: "Times New Roman", Times, serif; +} + +.footerbox h3 { + color: white; + text-transform: uppercase; + -webkit-animation: flip 3s infinite; + animation: flip 3s infinite; + -webkit-animation-delay: calc(0.4s * var(--i)); + animation-delay: calc(0.4s * var(--i)); +} + +@-webkit-keyframes flip { + 100%, 80% { + transform: rotateY(360deg); + } +} + +@keyframes flip { + 100%, 80% { + transform: rotateY(360deg); + } +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.css.map new file mode 100644 index 000000000..fcb3292c4 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.scss b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.scss index e8da7b74c..3fe2b407d 100644 --- a/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.scss +++ b/01-HTML-CSS/04-grid/BBC-HW/BBC - yovel.p/style.scss @@ -98,6 +98,7 @@ margin-left: 40px; font-size: 20px; cursor: pointer; + box-sizing: border-box; } .submenu{ display: none; diff --git a/01-HTML-CSS/04-grid/BBC-HW/Itai-G/style.css b/01-HTML-CSS/04-grid/BBC-HW/Itai-G/style.css new file mode 100644 index 000000000..f3a106359 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Itai-G/style.css @@ -0,0 +1,191 @@ +body { + margin: 0; + box-sizing: border-box; + padding: 0; +} + +.hole_news_page { + width: 70vw; + margin: auto; +} + +.wrapper_nav { + width: 100%; + height: 100px; + background-color: black; + display: flex; + justify-content: space-around; + flex-direction: row; + align-items: center; + font-size: xx-large; +} +.wrapper_nav img { + width: 100px; +} +.wrapper_nav .wrapper_nav_Sign_in { + height: 40px; + color: white; + font-size: large; +} +.wrapper_nav .material-symbols-outlined { + font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48; + color: white; +} +.wrapper_nav .wrapper_nav_items { + color: white; +} +.wrapper_nav .wrapper_nav_searchbox { + text-align: left; + background-color: black; + color: white; + font-size: large; +} + +.text_on_top { + display: flex; + justify-content: space-between; +} + +.grid_wrapper { + display: grid; + grid-template-columns: auto auto auto; + gap: 15px; + background-color: white; + margin-top: auto; +} +.grid_wrapper img { + width: 280px; +} +.grid_wrapper .grid_wrapper_item1 { + position: relative; + grid-area: 1/1/3; + text-align: left; +} +.grid_wrapper .grid_wrapper_item1 img { + width: 100%; + height: 93%; +} +.grid_wrapper .grid_wrapper_item1 h3 { + position: absolute; + bottom: 25%; + color: white; + font-size: 3rem; +} +.grid_wrapper .grid_wrapper_item1 .grid_wrapper_item1_big_content { + position: absolute; + bottom: 10%; + font-size: 17px; + color: white; + text-align: left; +} +.grid_wrapper .grid_wrapper_item2 { + position: relative; + color: white; +} +.grid_wrapper .grid_wrapper_item2 img { + width: 85%; + height: 85%; +} +.grid_wrapper .grid_wrapper_item2 h3 { + position: absolute; + bottom: 30%; +} +.grid_wrapper .grid_wrapper_item2 p { + position: absolute; + bottom: 12%; +} +.grid_wrapper .grid_wrapper_item3 { + position: relative; + color: white; +} +.grid_wrapper .grid_wrapper_item3 img { + width: 85%; + height: 85%; +} +.grid_wrapper .grid_wrapper_item3 h3 { + position: absolute; + bottom: 30%; +} +.grid_wrapper .grid_wrapper_item3 p { + position: absolute; + bottom: 12%; +} +.grid_wrapper .grid_wrapper_item4 { + position: relative; + color: white; +} +.grid_wrapper .grid_wrapper_item4 img { + height: 85%; + width: 85%; +} +.grid_wrapper .grid_wrapper_item4 h3 { + position: absolute; + bottom: 30%; +} +.grid_wrapper .grid_wrapper_item4 p { + position: absolute; + bottom: 15%; +} +.grid_wrapper .grid_wrapper_item5 { + position: relative; + color: white; +} +.grid_wrapper .grid_wrapper_item5 img { + width: 85%; + height: 85%; +} +.grid_wrapper .grid_wrapper_item5 h3 { + position: absolute; + bottom: 30%; +} +.grid_wrapper .grid_wrapper_item5 p { + position: absolute; + bottom: 15%; +} + +.header_2 { + background-color: red; + display: inline; +} + +.grid_warpper_middle_grid { + display: grid; + grid-template-columns: auto auto auto; + gap: 5px; + margin-top: auto; +} +.grid_warpper_middle_grid .grid_warpper_middle_grid_box1 img { + width: 95%; + height: 60%; +} +.grid_warpper_middle_grid .grid_warpper_middle_grid_box2 img { + width: 95%; + height: 60%; +} +.grid_warpper_middle_grid .grid_warpper_middle_grid_box3 img { + width: 95%; + height: 60%; +} + +.header_3 { + background-color: red; + display: inline; +} + +.Botom_grid_news { + display: grid; + grid-template-columns: auto auto auto; + gap: 5px; +} +.Botom_grid_news .Botom_grid_news_box1 img { + width: 95%; + height: 100%; +} +.Botom_grid_news .Botom_grid_news_box2 img { + width: 95%; + height: 100%; +} +.Botom_grid_news .Botom_grid_news_box3 img { + width: 95%; + height: 100%; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Itai-G/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Itai-G/style.css.map new file mode 100644 index 000000000..f01af6b13 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Itai-G/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,sBAAA;EACA,UAAA;ACCF;;ADCA;EACE,WAAA;EACA,YAAA;ACEF;;ADAA;EACE,WAAA;EACA,aAAA;EACA,uBAAA;EACA,aAAA;EACA,6BAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;ACGF;ADFE;EACE,YAAA;ACIJ;ADFE;EACE,YAAA;EACA,YAAA;EACA,gBAAA;ACIJ;ADFE;EACE,kEAAA;EACA,YAAA;ACIJ;ADFE;EACE,YAAA;ACIJ;ADFE;EACE,gBAAA;EACA,uBAAA;EACA,YAAA;EACA,gBAAA;ACIJ;;ADCA;EACE,aAAA;EACA,8BAAA;ACEF;;ADAA;EACE,aAAA;EACA,qCAAA;EACA,SAAA;EACA,uBAAA;EACA,gBAAA;ACGF;ADFE;EACE,YAAA;ACIJ;ADFE;EACE,kBAAA;EACA,gBAAA;EACA,gBAAA;ACIJ;ADHI;EACE,WAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;ACKN;ADFE;EACE,kBAAA;EACA,YAAA;ACIJ;ADHI;EACE,UAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADFE;EACE,kBAAA;EACA,YAAA;ACIJ;ADHI;EACE,UAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADFE;EACE,kBAAA;EACA,YAAA;ACIJ;ADHI;EACE,WAAA;EACA,UAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADFE;EACE,kBAAA;EACA,YAAA;ACIJ;ADHI;EACE,UAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;ADHI;EACE,kBAAA;EACA,WAAA;ACKN;;ADDA;EACE,qBAAA;EACA,eAAA;ACIF;;ADFA;EACE,aAAA;EACA,qCAAA;EACA,QAAA;EACA,gBAAA;ACKF;ADHI;EACE,UAAA;EACA,WAAA;ACKN;ADDI;EACE,UAAA;EACA,WAAA;ACGN;ADCI;EACE,UAAA;EACA,WAAA;ACCN;;ADGA;EACE,qBAAA;EACA,eAAA;ACAF;;ADEA;EACE,aAAA;EACA,qCAAA;EACA,QAAA;ACCF;ADCI;EACE,UAAA;EACA,YAAA;ACCN;ADGI;EACE,UAAA;EACA,YAAA;ACDN;ADKI;EACE,UAAA;EACA,YAAA;ACHN","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/dist/style.css b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/dist/style.css index c01c3336f..76829e42a 100644 --- a/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/dist/style.css +++ b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/dist/style.css @@ -83,7 +83,8 @@ body { border: 1px solid #0c0c0c; background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/3555/production/_127735631_workbuilding.png.webp); background-repeat: no-repeat; - background-size: 100% 100%; + background-position: center; + background-size: cover; position: relative; } .item1 h1 { diff --git a/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.css b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.css new file mode 100644 index 000000000..022303f31 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.css @@ -0,0 +1,328 @@ +body { + margin: 0%; + height: 3000px; + width: auto; + overflow-x: auto; +} + +.wrapper { + overflow-x: auto; + margin-left: 50px; + margin-right: 50px; +} +.wrapper__bar { + background-color: black; + width: auto; + height: 50px; + display: flex; + justify-content: space-between; + position: relative; + list-style-type: none; + font-size: 13px; + font-weight: 700; + justify-content: flex-start; +} +.wrapper__bar__icons { + width: 100%; + height: 50px; + display: flex; + color: white; + font-size: 20px; + margin-top: 15px; + overflow-x: auto; +} +.wrapper__bar__icons img { + width: 60px; + height: 30px; + margin-left: 20px; +} +.wrapper .search { + background-color: black; + width: 50pxpx; + height: 150pxpx; + color: rgb(244, 250, 250); +} +.wrapper .material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.img_search { + width: 20px; + height: 20px; + margin-top: 18px; + margin-right: 10px; +} + +.welcome { + display: flex; + justify-content: space-between; + font-size: 1em; + font-family: ReithSans, Arial, Helvetica, freesans, sans-serif; + margin-bottom: -150px; + margin-top: 150px; +} +.welcome h2 { + color: darkgray; +} + +.grid-container { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto auto; + gap: 10px; + padding: 10px; + margin-top: 15px; +} + +.grid-container > div { + padding: 20px; +} + +.item1 { + grid-area: 1/1/5/3; + border: 1px solid rgb(12, 12, 12); + background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/3555/production/_127735631_workbuilding.png.webp); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; +} +.item1 h1 { + color: black; + position: absolute; + margin-top: 290px; + font-size: 20px; + font-weight: bolder; + font-weight: bold; + font-style: italic; + text-align: start; + bottom: 15%; + background-color: rgb(168, 238, 215); +} +.item1 p { + font-size: 15px; + position: absolute; + color: rgb(0, 0, 0); + bottom: 2%; + background-color: aquamarine; +} + +.item2 { + grid-area: 1/3/3/5; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/live-experience/cps/624/cpsprodpb/vivo/live/images/2022/11/22/a648fbb4-d9f7-41fd-8213-f6d6186bafe2.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + position: relative; +} +.item2 h1 { + font-size: 20px; + position: absolute; + bottom: 2%; +} + +.item3 { + grid-area: 3/3/5/5; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/onesport/cps/976/cpsprodpb/150EE/production/_127745268_tv080112965.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + position: relative; +} +.item3 span { + font-size: 2rem; + position: absolute; + color: black; + bottom: 2%; + right: 2%; +} + +.grid_container_2 { + display: grid; + grid-template-columns: auto auto auto; + gap: 20px; + padding: 10px; + margin-top: 15px; + height: 500px; +} + +.grid_container_2 > div { + padding: 20px; + font-size: 30px; +} + +.item11 { + grid-area: 1/1/4/2; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/B86E/production/_127741274_1c3ac92f17c5f7c336c1b4e049ac851c4361da050_314_5080_28581000x563.jpg.webp); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.item22 { + grid-area: 1/2/4/3; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/11751/production/_127750517_china_iphone_factory.jpg.webp); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.item33 { + grid-area: 1/3/4/4; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/061D/production/_127756510_mediaitem127756506.jpg.webp); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.item44 { + grid-area: 4/1/5/2; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.item44 span { + padding-right: 15%; +} +.item44 p { + font-size: 15px; + border-left: 3px solid red; + padding-right: 15%; +} + +.item55 { + grid-area: 4/2/5/3; +} +.item55 span { + padding-right: 15%; +} +.item55 p { + font-size: 15px; + border-left: 3px solid rgb(0, 255, 0); + padding-right: 15%; +} + +.item66 { + grid-area: 4/3/5/4; +} +.item66 span { + padding-right: 15%; +} +.item66 p { + font-size: 15px; + border-left: 3px solid rgb(210, 247, 2); + padding-right: 15%; +} + +.grid-container { + display: grid; + grid-template-columns: auto auto auto; + gap: 10px; + padding: 10px; + margin-top: 150px; + height: 700px; +} + +.grid-container > div { + padding: 20px; + font-size: 30px; +} + +.item111 { + grid-area: 1/1/2/1.99; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/388B/production/_127757441_gettyimages-1417089283.jpg.webp); + background-repeat: no-repeat; + background-size: 100% 100%; +} +.item111 h1 { + color: white; +} + +.item222 { + grid-area: 1/2/9/3.5; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/live-experience/cps/624/cpsprodpb/vivo/live/images/2022/11/23/fbf0a1b4-ddbf-4adf-b3ca-e24034495f9e.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +.item333 { + grid-area: 1/3/2/5; + border: 1px solid black; + background-image: url(https://ichef.bbci.co.uk/onesport/cps/976/cpsprodpb/6707/production/_127757362_whatsubject.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + padding-right: 25%; +} + +.item444 { + grid-area: 2/1/3/2; + font-size: 1rem; + width: 250px; +} +.item444 span { + padding-right: 35%; + font-size: 20px; +} +.item444 p { + font-size: 15px; + border-left: 3px solid red; + margin-right: 15%; +} + +.item555 { + font-size: 1rem; + width: 250px; +} +.item555 span { + font-size: 20px; +} +.item555 p { + font-size: 15px; + border-left: 3px solid rgb(182, 230, 10); + margin-right: 15%; +} + +.item666 { + grid-area: 2/3/3/5; + height: 15rem; + width: 150px; + margin-bottom: -29%; +} +.item666 span { + width: 50px; + font-size: 20px; +} +.item666 p { + font-size: 15px; + border-left: 3px solid rgb(8, 209, 245); + width: 450px; +} + +.news { + font-size: 5rem; + padding-top: 80px; + font-family: ReithSans, Arial, Helvetica, freesans, sans-serif; +} + +.sport { + font-size: 5rem; + font-family: ReithSans, Arial, Helvetica, freesans, sans-serif; + margin-bottom: -150px; +} + +#idcta-username { + color: white; + cursor: pointer; +} + +#white { + color: white; + cursor: pointer; +} + +.weather { + width: 760px; + margin-left: 500px; + margin-bottom: -150px; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.css.map new file mode 100644 index 000000000..2983a9f3d --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.scss b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.scss index 827d79bc1..d40d775c4 100644 --- a/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.scss +++ b/01-HTML-CSS/04-grid/BBC-HW/Itay-Amosi-BBC/style.scss @@ -82,7 +82,8 @@ body { border: 1px solid rgb(12, 12, 12); background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/3555/production/_127735631_workbuilding.png.webp); background-repeat: no-repeat; - background-size: 100% 100%; + background-position: center; + background-size:cover; position: relative; h1 { color: black; diff --git a/01-HTML-CSS/04-grid/BBC-HW/Karin-Levi/style.css b/01-HTML-CSS/04-grid/BBC-HW/Karin-Levi/style.css new file mode 100644 index 000000000..ec04d8a19 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Karin-Levi/style.css @@ -0,0 +1,265 @@ +body { + margin: 0%; +} + +.header { + width: 100%; + height: 50px; + background-color: black; + display: flex; + justify-content: center; + margin: auto; +} +.header__logo { + width: 100px; + height: 35px; + display: flex; + justify-content: space-between; +} +.header__logo__bbc { + width: 70px; + height: 100%; + display: flex; + justify-content: space-between; +} +.header__logo__bbc h3 { + background-color: white; + margin: 0; + margin-top: 10px; + font-size: x-large; +} +.header__sign_in { + width: 120px; + height: 40px; + display: flex; + justify-content: space-between; +} +.header__sign_in__icon img { + height: 100%; + width: 100%; +} +.header__sign_in__button { + height: 40px; + width: 70px; +} +.header__sign_in__button h3 { + color: white; + margin-top: 10px; + font-size: smaller; +} +.header__menu { + width: 500px; + height: 100%; + display: flex; + justify-content: space-between; + margin-top: 4px; +} +.header__menu h3 { + color: white; + font-size: small; +} +.header__rigth { + width: 100px; + height: 50px; + display: flex; + justify-content: space-between; +} +.header__rigth__dots { + width: 30px; + height: 30px; + margin-top: 10px; +} +.header__rigth__dots img { + height: 100%; + width: 100%; +} +.header__rigth__search { + height: 50px; + width: 50px; + padding-top: 15px; +} + +.title { + width: 85%; + height: 60px; + background-color: white; + display: flex; + justify-content: space-between; + margin: auto; +} +.title__welcome { + width: 300px; + margin-left: 120px; +} +.title__welcome h2 { + color: rgb(73, 72, 72); +} +.title__date { + color: rgb(183, 181, 181); + margin-right: 0; + width: 300px; +} + +.grid_container { + margin: auto; + display: grid; + gap: 10px; + grid-template-areas: "item1 item1 item2 item3" "item1 item1 item4 item5"; + width: 1000px; + height: 200px; +} +.grid_container__item1 { + grid-area: item1; + position: relative; + text-align: center; + color: white; +} +.grid_container__item1__centered1 { + position: absolute; + top: 65%; + left: 35%; + transform: translate(-50%, -50%); +} +.grid_container__item1__centered1 h4 { + font-size: x-large; +} +.grid_container__item1 img { + width: 100%; + height: 100%; +} +.grid_container__item2 { + grid-area: item2; + position: relative; + text-align: center; + color: white; +} +.grid_container__item2__centered2 { + position: absolute; + top: 65%; + left: 35%; + transform: translate(-50%, -50%); +} +.grid_container__item2 img { + width: 100%; + height: 100%; +} +.grid_container__item3 { + grid-area: item3; + position: relative; + text-align: center; + color: white; +} +.grid_container__item3__centered3 { + position: absolute; + top: 55%; + left: 35%; + transform: translate(-50%, -50%); +} +.grid_container__item3 img { + width: 100%; + height: 100%; +} +.grid_container__item4 { + grid-area: item4; + position: relative; + text-align: center; + color: white; +} +.grid_container__item4__centered4 { + position: absolute; + top: 55%; + left: 35%; + transform: translate(-50%, -50%); +} +.grid_container__item4 img { + width: 100%; + height: 100%; +} +.grid_container__item5 { + grid-area: item5; + position: relative; + text-align: center; + color: white; +} +.grid_container__item5__centered5 { + position: absolute; + top: 65%; + left: 35%; + transform: translate(-50%, -50%); +} +.grid_container__item5 img { + width: 100%; + height: 100%; +} + +.title2 { + width: 100%; + height: 60px; + background-color: white; + display: flex; + justify-content: space-between; +} +.title2__news h2 { + color: rgb(73, 72, 72); + padding-left: 200px; +} + +.grid_container2 { + margin: auto; + display: grid; + gap: 10px; + grid-template-areas: "item1 item2 item3"; + width: 820px; + height: 340px; +} +.grid_container2__item1 { + grid-area: item1; +} +.grid_container2__item1 img { + width: 100%; + height: 50%; +} +.grid_container2__item2 { + grid-area: item2; +} +.grid_container2__item2 img { + width: 100%; + height: 50%; +} +.grid_container2__item3 { + grid-area: item3; +} +.grid_container2__item3 img { + width: 100%; + height: 50%; +} + +.grid_container3 { + margin: auto; + display: grid; + gap: 10px; + grid-template-areas: "item1 item2 item3"; + width: 820px; + height: 340px; +} +.grid_container3__item1 { + grid-area: item1; +} +.grid_container3__item1 img { + width: 100%; + height: 50%; +} +.grid_container3__item2 { + grid-area: item2; +} +.grid_container3__item2 img { + width: 100%; + height: 50%; +} +.grid_container3__item3 { + grid-area: item3; +} +.grid_container3__item3 img { + width: 100%; + height: 50%; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Karin-Levi/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Karin-Levi/style.css.map new file mode 100644 index 000000000..5ca85209d --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Karin-Levi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Kseniya_T/style.css b/01-HTML-CSS/04-grid/BBC-HW/Kseniya_T/style.css new file mode 100644 index 000000000..8df3e111f --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Kseniya_T/style.css @@ -0,0 +1,270 @@ +body { + margin: 0; + font-family: "Nunito", sans-serif; + font-family: "Open Sans", sans-serif; + font-family: "Quicksand", sans-serif; +} + +.navbar_container { + background-color: black; + height: 10vh; + color: white; + display: flex; + align-items: center; + justify-content: space-between; +} + +.left_icons { + display: flex; + align-items: center; + justify-content: center; + padding-left: 30vh; + justify-content: center; +} + +.bbc_icon { + font-weight: bold; + padding-right: 2vh; +} + +.account_icon { + padding-right: 2vh; +} + +.navbar_elements { + display: flex; + align-items: center; + justify-content: space-evenly; + padding-right: 30vh; + width: 57vw; +} + +.intro_container { + color: black; + padding-top: 2vh; + padding-left: 30vh; + padding-right: 30vh; +} + +.center { + overflow-y: auto; + height: 89vh; +} + +.intro_start { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 4vh; + padding-bottom: 3vh; +} +.intro_start__date { + color: grey; +} + +.intro_articles_container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + grid-column-gap: 2vh; + grid-row-gap: 1vh; + height: 50vh; +} + +.main_aritcle { + background-image: url(https://cdn.i24news.tv/uploads/ce/0f/df/8f/56/56/7b/d5/c6/59/2a/36/a7/96/7a/65/ce0fdf8f56567bd5c6592a36a7967a65.jpg?width=1000&type=webp); + grid-area: 1/1/5/3; + display: flex; + align-items: end; + padding-left: 2vh; +} +.main_aritcle__title { + font-size: 4vh; + color: white; + font-weight: 900; +} +.main_aritcle__desc { + font-size: 2.5vh; + color: white; + font-weight: bold; +} +.main_aritcle__category { + font-size: 2.5vh; + color: white; + padding-top: 1vh; + padding-bottom: 1vh; + font-weight: bold; +} + +.item_1 { + background-image: url(https://www.afghanistantimes.af/wp-content/uploads/2022/11/52d02d3d-db6d-4e44-b332-f3f831e53e92-660x330.jpg); + grid-area: 1/3/3/4; + display: flex; + align-items: flex-end; + padding-left: 1vh; + color: white; +} +.item_1__title { + font-weight: 800; + font-size: 2.5vh; +} + +.item_2 { + background-image: url(data:image/jpeg;base64,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); + grid-area: 3/4/5/5; + color: white; + display: flex; + align-items: flex-end; + padding-left: 1vh; +} +.item_2__title { + font-weight: 800; + font-size: 2.5vh; +} +.item_2__cate { + font-size: 2.5vh; + color: white; + padding-top: 1vh; + padding-bottom: 1vh; + font-weight: bold; +} + +.item_3 { + background-image: url(data:image/jpeg;base64,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); + grid-area: 1/4/3/5; + color: white; + display: flex; + align-items: flex-end; + padding-left: 1vh; +} +.item_3__title { + font-weight: 800; + font-size: 2.5vh; +} + +.item_4 { + background-image: url(data:image/jpeg;base64,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); + grid-area: 3/3/5/4; + color: white; + display: flex; + align-items: flex-end; + padding-left: 1vh; + padding-right: 1vh; +} +.item_4__title { + font-weight: 800; + font-size: 2.5vh; +} + +.news_header { + font-size: 5vh; + padding-left: 30vh; + padding-right: 30vh; + padding-bottom: 3vh; + padding-top: 2vh; +} + +.news_container { + padding-left: 30vh; + display: flex; + align-items: center; + justify-content: space-between; + padding-right: 30vh; + padding-bottom: 2vh; +} + +.aritcle_trump { + width: 50vh; +} +.aritcle_trump__title { + font-size: 3vh; + font-weight: bolder; + padding-bottom: 1vh; + padding-top: 1vh; +} +.aritcle_trump__img { + width: 50vh; +} + +.article_election { + width: 50vh; +} +.article_election__title { + font-size: 3vh; + font-weight: bolder; + padding-bottom: 1vh; + padding-top: 1vh; +} +.article_election__img { + width: 50vh; +} + +.article_artemis { + width: 50vh; +} +.article_artemis__title { + font-size: 3vh; + font-weight: bolder; + padding-bottom: 1vh; + padding-top: 1vh; +} +.article_artemis__img { + width: 50vh; +} + +.sport_header { + font-size: 5vh; + padding-left: 30vh; + padding-right: 30vh; + padding-bottom: 3vh; + padding-top: 2vh; +} + +.sport_container { + padding-left: 30vh; + display: flex; + align-items: center; + justify-content: space-between; + padding-right: 30vh; + padding-bottom: 2vh; +} + +.aritcle_japan { + width: 50vh; +} +.aritcle_japan__img { + width: 50vh; + margin-top: 3vh; +} +.aritcle_japan__title { + font-size: 3vh; + font-weight: bolder; + padding-bottom: 1vh; + padding-top: 1vh; +} + +.article_ronaldo { + width: 50vh; +} +.article_ronaldo__img { + width: 50vh; +} +.article_ronaldo__title { + font-size: 3vh; + font-weight: bolder; + padding-bottom: 1vh; + padding-top: 1vh; +} + +.article_australia { + width: 50vh; +} +.article_australia__img { + width: 50vh; +} +.article_australia__title { + font-size: 3vh; + font-weight: bolder; + padding-bottom: 1vh; + padding-top: 1vh; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Kseniya_T/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Kseniya_T/style.css.map new file mode 100644 index 000000000..0482d6713 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Kseniya_T/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Matanel - BBC/css/style.css b/01-HTML-CSS/04-grid/BBC-HW/Matanel - BBC/css/style.css new file mode 100644 index 000000000..0430e1867 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Matanel - BBC/css/style.css @@ -0,0 +1,497 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); +* { + margin: 0; + padding: 0; +} + +body { + font-family: "Roboto", sans-serif; +} + +.container { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: rgb(0, 0, 0); + z-index: 3; +} + +.items-center-row { + display: flex; + align-items: center; +} + +.search-container { + background-color: rgb(39, 39, 39); + padding: 8px 20px; + overflow: hidden; + border-radius: 5px; +} + +.search-container input { + border: none; + background-color: transparent; + outline: none; + color: rgb(136, 136, 136); + width: 230px; + font-size: 16px; +} + +.fa-search { + color: rgb(14, 14, 14); + margin-right: 2px; +} + +.space-icon { + margin: 0 10px; + font-size: 20px; +} + +nav { + border-bottom: 1px solid rgb(58, 58, 58); + background-color: rgb(0, 0, 0); +} + +.fa-user { + color: white; + cursor: pointer; +} + +.logo-img { + width: 112px; + height: 32px; + cursor: pointer; +} + +.logo-container { + border-right: 2px groove rgb(54, 54, 54); +} + +ul { + color: white; + margin-right: 2rem; + cursor: pointer; +} + +.navigation-container { + display: flex; + flex-direction: row; +} + +a { + color: white; + margin-right: 10px; + cursor: pointer; +} + +.more-info { + margin-left: 50px; + margin-bottom: 15px; +} + +#signin-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + position: relative; + cursor: pointer; +} + +#signin-effect:after { + content: ""; + position: absolute; + background-color: #0178ff; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#signin-effect:hover:after { + width: 100%; +} + +#home-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#home-effect:after { + content: ""; + position: absolute; + background-color: white; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#home-effect:hover:after { + width: 100%; +} + +#news-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#news-effect:after { + content: ""; + position: absolute; + background-color: red; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#news-effect:hover:after { + width: 100%; +} + +#sport-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#sport-effect:after { + content: ""; + position: absolute; + background-color: yellow; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#sport-effect:hover:after { + width: 100%; +} + +#reel-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#reel-effect:after { + content: ""; + position: absolute; + background-color: #0178ff; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#reel-effect:hover:after { + width: 100%; +} + +#worklife-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#worklife-effect:after { + content: ""; + position: absolute; + background-color: #0178ff; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#worklife-effect:hover:after { + width: 100%; +} + +#travel-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#travel-effect:after { + content: ""; + position: absolute; + background-color: green; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#travel-effect:hover:after { + width: 100%; +} + +#future-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#future-effect:after { + content: ""; + position: absolute; + background-color: rgb(7, 46, 119); + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#future-effect:hover:after { + width: 100%; +} + +#culture-effect { + color: white; + margin-right: 8px; + font-size: 15px; + letter-spacing: 0.5; + margin-right: 2rem; + position: relative; + cursor: pointer; +} + +#culture-effect:after { + content: ""; + position: absolute; + background-color: rgb(75, 11, 100); + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#culture-effect:hover:after { + width: 100%; +} + +#menu-effect { + color: white; + margin-right: 8px; + font-size: 25px; + letter-spacing: 0.5; + position: relative; + cursor: pointer; +} + +#menu-effect:after { + content: ""; + position: absolute; + background-color: white; + height: 3px; + width: 0; + left: 0; + bottom: -5px; + transition: 0.3s; +} + +#menu-effect:hover:after { + width: 100%; +} + +.welcome-text { + color: black; + font-size: 0.8rem; + margin-top: 100px; + margin-left: 330px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.welcome-text h1 { + color: #4a4a4a; + font-family: "Poppins", sans-serif; +} + +.welcome-text p { + color: #4a4a4a; + font-size: 1.3rem; + font-family: "Poppins", sans-serif; + margin-right: 340px; +} + +.band { + width: 90%; + max-width: 1240px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: 20px; +} +@media (min-width: 30em) { + .band { + grid-template-columns: 1fr 1fr; + } +} +@media (min-width: 60em) { + .band { + grid-template-columns: repeat(4, 1fr); + } +} + +.card { + background: rgb(255, 255, 255); + text-decoration: none; + color: #444; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + min-height: 100%; + position: relative; + top: 0; + transition: all 0.1s ease-in; +} +.card:hover { + top: -2px; + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); +} +.card article { + padding: 20px; + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.card h1 { + font-size: 20px; + margin: 0; + color: #333; +} +.card p { + flex: 1; + line-height: 1.4; +} +.card span { + font-size: 12px; + font-weight: bold; + color: #999; + text-transform: uppercase; + letter-spacing: 0.05em; + margin: 2em 0 0 0; +} +.card .thumb { + padding-bottom: 60%; + background-size: cover; + background-position: center center; + filter: brightness(70%); +} + +@media (min-width: 60em) { + .item-1 { + grid-column: 1/span 2; + } + .item-1 h1 { + font-size: 24px; + } +} + +.footer { + background: #000; + padding: 30px 0px; + font-family: "Play", sans-serif; + text-align: center; +} + +.footer .row { + width: 100%; + margin: 1% 0%; + padding: 0.6% 0%; + color: gray; + font-size: 0.8em; +} + +.footer .row a { + text-decoration: none; + color: gray; + transition: 0.5s; +} + +.footer .row a:hover { + color: #fff; +} + +.footer .row ul { + width: 100%; +} + +.footer .row ul li { + display: inline-block; + margin: 0px 30px; +} + +.footer .row a i { + font-size: 2em; + margin: 0% 1%; +} + +@media (max-width: 720px) { + .footer { + text-align: left; + padding: 5%; + } + .footer .row ul li { + display: block; + margin: 10px 0px; + text-align: left; + } + .footer .row a i { + margin: 0% 3%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Matanel - BBC/css/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Matanel - BBC/css/style.css.map new file mode 100644 index 000000000..7dda66d19 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Matanel - BBC/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Nikita-Rossenko Task4-BBC/style.css b/01-HTML-CSS/04-grid/BBC-HW/Nikita-Rossenko Task4-BBC/style.css new file mode 100644 index 000000000..1e031a301 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Nikita-Rossenko Task4-BBC/style.css @@ -0,0 +1,844 @@ +body { + margin: 0; + padding: 0; +} + +a { + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; + color: white; + text-decoration: none; + display: inline-block; + position: relative; +} + +a::after { + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: -1rem; + left: 0; + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +#home:after { + background-color: white; +} + +#news:after { + background-color: #e91802; +} + +#sport:after { + background-color: #ffd930; +} + +#reel:after { + background-color: #0068ff; +} + +#workflow:after { + background-color: #0052a1; +} + +#travel:after { + background-color: #589e50; +} + +#future:after { + background-color: #002856; +} + +#culture:after { + background-color: #482878; +} + +a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} + +.material-icons.bbc_nav_container__main__sign_in_container__icon { + font-size: 32px; +} + +.bbc_nav_container { + width: 100vw; + max-height: 64px; + display: flex; + background-color: black; +} +.bbc_nav_container__main { + margin: 0 auto; + padding: 0 16px; + width: 1280px; + max-height: 64px; + display: flex; + justify-content: space-between; + align-items: center; +} +.bbc_nav_container__main__bbc_container { + display: flex; + width: 112px; + justify-content: space-between; + min-height: 64px; + align-items: center; + padding-right: 0px; + padding-left: 10px; +} +.bbc_nav_container__main__bbc_container__bbc { + width: 32px; + height: 32px; + background-color: white; + color: black; + text-align: center; + font-size: 30px; + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + -webkit-animation: bbc; + animation: bbc; + -webkit-animation-duration: 4s; + animation-duration: 4s; +} +.bbc_nav_container__main__sign_in_container { + color: white; + justify-content: flex-start; + min-height: 64px; + align-items: center; + width: 150px; + display: flex; +} +.bbc_nav_container__main__sign_in_container__icon { + color: white; + font-size: 36px; +} +.bbc_nav_container__main__sign_in_container__sign_in { + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; + font-weight: bold; +} +.bbc_nav_container__main__list::before { + content: ""; + height: 1.5rem; + width: 1px; + margin-left: 0.5rem; + margin-right: 0.5rem; + background: rgba(255, 255, 255, 0.15); +} +.bbc_nav_container__main__list { + display: flex; + width: 638px; + padding: 0; + margin: 0; + justify-content: space-between; + min-height: 64px; + align-items: center; +} +.bbc_nav_container__main__list__info { + color: white; + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; + font-weight: bold; +} +.bbc_nav_container__main__more_and_search_container { + display: flex; + justify-content: space-between; + width: 300px; + min-height: 64px; + align-items: center; + padding-right: 10px; +} +.bbc_nav_container__main__more_and_search_container__more { + min-height: 64px; + width: 48px; + display: flex; + justify-content: space-around; + align-items: center; + position: relative; +} +.bbc_nav_container__main__more_and_search_container__more__dropdown_content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; + top: 64px; + background-color: black; +} +.bbc_nav_container__main__more_and_search_container__more a { + color: white; + padding: 12px 16px; + font-size: 13px; + text-decoration: none; + display: block; + font-family: Arial, Helvetica, sans-serif; +} +.bbc_nav_container__main__more_and_search_container__more a::after { + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0rem; + left: 0; + transform-origin: bottom right; + transition: transform 0.25s ease-out; + background-color: white; +} +.bbc_nav_container__main__more_and_search_container__more a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} +.bbc_nav_container__main__more_and_search_container__more__icon { + color: white; +} +.bbc_nav_container__main__more_and_search_container__more:hover .bbc_nav_container__main__more_and_search_container__more__dropdown_content { + display: block; +} +.bbc_nav_container__main__more_and_search_container__search__sub_container { + width: 224px; + max-height: 64px; + display: flex; + justify-content: flex-start; + position: relative; +} +.bbc_nav_container__main__more_and_search_container__search__sub_container__icon { + color: white; + position: absolute; + top: 8px; + left: 5px; +} +.bbc_nav_container__main__more_and_search_container__search__sub_container__input { + height: 40px; + width: 224px; + white-space: nowrap; + padding-left: 30px; + background-color: #202224; + color: white; + border: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; + font-weight: bold; +} + +.h2_container { + display: flex; + justify-content: center; + width: 100vw; + max-height: 64px; + align-items: center; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 16px; +} +.h2_container__sub_container { + display: flex; + justify-content: space-between; + width: 1260px; + max-height: 64px; + align-items: center; + padding: 32px 16px 0 16px; +} +.h2_container__sub_container__text1 { + color: #4A4A4A; + font-size: 22px; +} +.h2_container__sub_container__text2 { + color: #8C8C8C; + font-size: 22px; + font-weight: 400; +} + +.grid_container { + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + max-height: 346.5px; + padding-bottom: 32px; +} +.grid_container__sub_container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-column-gap: 16px; + grid-row-gap: 9px; + padding-bottom: 10px; + width: 1264px; + height: 346.5px; +} +.grid_container__sub_container__item1 { + grid-area: 1/1/3/3; + display: flex; + align-items: flex-end; + background: url("https://ichef.bbc.co.uk/wwhp/999/cpsprodpb/8B73/production/_127699653_gianniinfantino.jpg"); + background-size: cover; +} +.grid_container__sub_container__item1__text_container { + display: flex; + justify-content: flex-end; + flex-direction: column; + width: 100%; + height: 100%; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8)); +} +.grid_container__sub_container__item1__text_container__h3 { + font-size: 32px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: white; + padding-left: 16px; + padding-right: 16px; +} +.grid_container__sub_container__item1__text_container__p1 { + font-size: 1rem; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #D3D3D3; + padding-left: 16px; + padding-right: 16px; +} +.grid_container__sub_container__item1__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #D3D3D3; + padding-left: 16px; + padding-bottom: 10px; +} +.grid_container__sub_container__item1__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} +.grid_container__sub_container__item2 { + grid-area: 1/3/2/4; + display: flex; + align-items: flex-end; + background-size: cover; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/1003F/production/_127699556_payment_overdue.jpg"); +} +.grid_container__sub_container__item2__text_container { + display: flex; + justify-content: flex-end; + flex-direction: column; + width: 303px; + height: 168px; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8)); +} +.grid_container__sub_container__item2__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: white; + width: 276px; + height: 48px; + padding-left: 10px; +} +.grid_container__sub_container__item2__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #D3D3D3; + padding-left: 10px; + padding-bottom: 10px; +} +.grid_container__sub_container__item2__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} +.grid_container__sub_container__item3 { + grid-area: 1/4/2/5; + display: flex; + align-items: flex-end; + background-size: cover; + background-image: url("https://ichef.bbc.co.uk/wwhp/304/cpsprodpb/14FF0/production/_127700068_5bb7cbf35689913fc78fb6e5c97d1d5478c7aecd0_0_6447_43032000x1335.jpg"); +} +.grid_container__sub_container__item3__text_container { + display: flex; + justify-content: flex-end; + flex-direction: column; + width: 303px; + height: 168px; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8)); +} +.grid_container__sub_container__item3__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: white; + width: 276px; + height: 48px; + padding-left: 10px; +} +.grid_container__sub_container__item3__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #D3D3D3; + padding-left: 10px; + padding-bottom: 10px; +} +.grid_container__sub_container__item3__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} +.grid_container__sub_container__item4 { + grid-area: 2/3/3/4; + display: flex; + align-items: flex-end; + background-size: cover; + background-image: url("https://ichef.bbc.co.uk/wwhp/304/cpsprodpb/1110C/production/_127700996_915fb256b958540f7dc367e8aeff6f223839f880.jpg"); +} +.grid_container__sub_container__item4__text_container { + display: flex; + justify-content: flex-end; + flex-direction: column; + width: 303px; + height: 168px; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8)); +} +.grid_container__sub_container__item4__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: white; + width: 276px; + height: 48px; + padding-left: 10px; +} +.grid_container__sub_container__item4__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #D3D3D3; + padding-left: 10px; + padding-bottom: 10px; +} +.grid_container__sub_container__item4__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} +.grid_container__sub_container__item5 { + grid-area: 2/4/3/5; + display: flex; + align-items: flex-end; + background-size: cover; + background-image: url("https://ichef.bbc.co.uk/wwhp/304/cpsprodpb/6B99/production/_127654572_p0dgbvhh.jpg"); +} +.grid_container__sub_container__item5__text_container { + display: flex; + justify-content: flex-end; + flex-direction: column; + width: 303px; + height: 168px; + background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8)); +} +.grid_container__sub_container__item5__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: white; + width: 276px; + height: 48px; + padding-left: 10px; +} +.grid_container__sub_container__item5__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #D3D3D3; + padding-left: 10px; + padding-bottom: 10px; +} +.grid_container__sub_container__item5__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #ffd930; +} + +.news_grid_container { + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + max-height: 438px; + padding-top: 16px; +} +.news_grid_container__sub_container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr 14fr; + grid-column-gap: 16px; + grid-row-gap: 16px; + padding: 0; + width: 1260px; + height: 438px; +} +.news_grid_container__sub_container__h2 { + grid-area: 1/1/2/4; + font-family: Arial, Helvetica, sans-serif; + font-size: 24px; + font-weight: bold; +} +.news_grid_container__sub_container__item1 { + grid-area: 2/1/3/2; + display: flex; + align-items: flex-end; +} +.news_grid_container__sub_container__item1__text_container { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 100%; + height: 100%; +} +.news_grid_container__sub_container__item1__text_container__image_container { + width: 409.344px; + height: 228px; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/C2EC/production/_127700994_orion.jpg"); + background-size: cover; +} +.news_grid_container__sub_container__item1__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: black; + padding-top: 8px; +} +.news_grid_container__sub_container__item1__text_container__p1 { + font-size: 16px; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #4A4A4A; + margin-top: 8px; +} +.news_grid_container__sub_container__item1__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #767676; + padding-bottom: 10px; +} +.news_grid_container__sub_container__item1__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} +.news_grid_container__sub_container__item2 { + grid-area: 2/2/3/3; + display: flex; + align-items: flex-end; +} +.news_grid_container__sub_container__item2__text_container { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 100%; + height: 100%; +} +.news_grid_container__sub_container__item2__text_container__image_container { + width: 409.344px; + height: 228px; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/104F0/production/_127700866_p0dhd8ly.jpg"); + background-size: cover; +} +.news_grid_container__sub_container__item2__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: black; + padding-top: 8px; +} +.news_grid_container__sub_container__item2__text_container__p1 { + font-size: 16px; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #4A4A4A; + margin-top: 8px; +} +.news_grid_container__sub_container__item2__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #767676; + padding-bottom: 10px; +} +.news_grid_container__sub_container__item2__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} +.news_grid_container__sub_container__item3 { + grid-area: 2/3/3/4; + display: flex; + align-items: flex-end; +} +.news_grid_container__sub_container__item3__text_container { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 100%; + height: 100%; +} +.news_grid_container__sub_container__item3__text_container__image_container { + width: 409.344px; + height: 228px; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/14758/production/_127700838_xanamaddiemadgreek.jpg"); + background-size: cover; +} +.news_grid_container__sub_container__item3__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: black; + padding-top: 8px; +} +.news_grid_container__sub_container__item3__text_container__p1 { + font-size: 16px; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #4A4A4A; + margin-top: 8px; +} +.news_grid_container__sub_container__item3__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #767676; + padding-bottom: 10px; +} +.news_grid_container__sub_container__item3__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #e91802; +} + +.sport_grid_container { + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + max-height: 438px; + padding-top: 16px; +} +.sport_grid_container__sub_container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr 14fr; + grid-column-gap: 16px; + grid-row-gap: 16px; + padding: 0; + width: 1260px; + height: 438px; +} +.sport_grid_container__sub_container__h2 { + grid-area: 1/1/2/4; + font-family: Arial, Helvetica, sans-serif; + font-size: 24px; + font-weight: bold; +} +.sport_grid_container__sub_container__item1 { + grid-area: 2/1/3/2; + display: flex; + align-items: flex-end; +} +.sport_grid_container__sub_container__item1__text_container { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 100%; + height: 100%; +} +.sport_grid_container__sub_container__item1__text_container__image_container { + width: 409.344px; + height: 228px; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/F3DE/production/_127703426_steward_getty.jpg"); + background-size: cover; +} +.sport_grid_container__sub_container__item1__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: black; + padding-top: 8px; +} +.sport_grid_container__sub_container__item1__text_container__p1 { + font-size: 16px; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #4A4A4A; + margin-top: 8px; +} +.sport_grid_container__sub_container__item1__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: ReithSans, Arial, Helvetica, freesans, sans-serif; + color: #767676; + padding-bottom: 10px; +} +.sport_grid_container__sub_container__item1__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #ffd930; +} +.sport_grid_container__sub_container__item2 { + grid-area: 2/2/3/3; + justify-content: space-between; + flex-direction: row; + display: flex; +} +.sport_grid_container__sub_container__item2__text_container { + display: flex; + justify-content: space-between; + flex-direction: column; + width: 100%; + height: 100%; +} +.sport_grid_container__sub_container__item2__text_container__image_container { + width: 409.344px; + height: 228px; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/13F2E/production/_127701718_gettyimages-1442790234.jpg"); + background-size: cover; +} +.sport_grid_container__sub_container__item2__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: black; + padding-top: 8px; +} +.sport_grid_container__sub_container__item2__text_container__p1 { + font-size: 16px; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #4A4A4A; + margin-top: 8px; +} +.sport_grid_container__sub_container__item2__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #767676; + padding-bottom: 10px; +} +.sport_grid_container__sub_container__item2__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #ffd930; +} +.sport_grid_container__sub_container__item3 { + grid-area: 2/3/3/4; + display: flex; + align-items: flex-end; +} +.sport_grid_container__sub_container__item3__text_container { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 100%; + height: 100%; +} +.sport_grid_container__sub_container__item3__text_container__image_container { + width: 409.344px; + height: 228px; + background-image: url("https://ichef.bbc.co.uk/wwhp/624/cpsprodpb/1476C/production/_127702838_20619543-1.jpg"); + background-size: cover; +} +.sport_grid_container__sub_container__item3__text_container__h3 { + font-size: 20px; + font-family: Arial, Helvetica, sans-serif; + text-align: left; + margin: 0; + color: black; + padding-top: 8px; +} +.sport_grid_container__sub_container__item3__text_container__p1 { + font-size: 16px; + line-height: 22px; + text-align: left; + margin-top: 8px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #4A4A4A; + margin-top: 8px; +} +.sport_grid_container__sub_container__item3__text_container__p2 { + font-size: 14px; + line-height: 22px; + text-align: left; + margin-top: 12px; + margin-bottom: 0; + font-family: Arial, Helvetica, sans-serif; + color: #767676; + padding-bottom: 10px; +} +.sport_grid_container__sub_container__item3__text_container__p2::before { + content: " "; + margin-right: 0.5rem; + border-left: 2px solid #ffd930; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Nikita-Rossenko Task4-BBC/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Nikita-Rossenko Task4-BBC/style.css.map new file mode 100644 index 000000000..a1c699b8e --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Nikita-Rossenko Task4-BBC/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Tomer-Cohen/style.css b/01-HTML-CSS/04-grid/BBC-HW/Tomer-Cohen/style.css new file mode 100644 index 000000000..30a0e4482 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Tomer-Cohen/style.css @@ -0,0 +1,275 @@ +body { + margin: 0; +} + +.page { + width: 70vw; + margin: auto; +} +.page__news { + display: grid; + grid-template-columns: auto auto auto; + gap: 3px; + padding: 40px; + width: 90%; + height: 70%; + margin: auto; +} +.page__news__weather { + color: #8c8c8c; + margin-left: 5%; +} +.page__news__weather img { + width: 500px; + height: 300px; +} +.page__news__box1 { + grid-area: 1/1/3; + position: relative; +} +.page__news__box1 h3 { + position: absolute; + bottom: 10%; + color: white; +} +.page__news__box1 p { + position: absolute; + bottom: 5%; + color: white; + font-size: 19px; +} +.page__news__box1 img { + width: 100%; + height: 100%; +} +.page__news__box2 { + position: relative; +} +.page__news__box2 h3 { + position: absolute; + bottom: 10%; + color: white; +} +.page__news__box2 p { + position: absolute; + bottom: 5%; + color: white; + font-size: 20px; +} +.page__news__box2 img { + width: 100%; + height: 100%; +} +.page__news__box3 { + position: relative; +} +.page__news__box3 h3 { + position: absolute; + bottom: 10%; + color: white; +} +.page__news__box3 p { + position: absolute; + bottom: 5%; + color: white; + font-size: 20px; +} +.page__news__box3 img { + width: 100%; + height: 100%; +} +.page__news__box4 { + position: relative; +} +.page__news__box4 h3 { + position: absolute; + bottom: 10%; + color: white; +} +.page__news__box4 p { + position: absolute; + bottom: 5%; + color: white; + font-size: 20px; +} +.page__news__box4 img { + width: 100%; + height: 100%; +} +.page__news__box5 { + position: relative; +} +.page__news__box5 h3 { + position: absolute; + bottom: 10%; + color: white; +} +.page__news__box5 p { + position: absolute; + bottom: 5%; + color: white; + font-size: 20px; +} +.page__news__box5 img { + width: 100%; + height: 100%; +} +.page__news__box6 h3 { + bottom: 10%; + color: rgb(0, 0, 0); +} +.page__news__box6 p { + bottom: 5%; + color: rgb(0, 0, 0); + font-size: 15px; +} +.page__news__box6 img { + width: 95%; + height: 60%; +} +.page__news__box6 .USA { + border-left: 3px solid rgb(0, 255, 42); + color: #8c8c8c; +} +.page__news__box7 h3 { + bottom: 10%; + color: rgb(0, 0, 0); +} +.page__news__box7 p { + bottom: 5%; + color: rgb(0, 0, 0); + font-size: 18px; +} +.page__news__box7 img { + width: 95%; + height: 60%; +} +.page__news__box7 .Qatar { + border-left: 3px solid rgb(185, 133, 245); + color: #8c8c8c; +} +.page__news__box8 h3 { + bottom: 10%; + color: rgb(0, 0, 0); +} +.page__news__box8 p { + bottom: 5%; + color: rgb(0, 0, 0); + font-size: 15px; +} +.page__news__box8 .argentina { + border-left: 3px solid red; + color: #8c8c8c; +} +.page__news__box8 img { + width: 95%; + height: 60%; +} +.page__news__box9 h3 { + font-family: "Oswald", sans-serif; + bottom: 10%; + color: rgb(0, 0, 0); + font-size: medium; +} +.page__news__box9 p { + bottom: 5%; + color: rgb(0, 0, 0); + font-size: 20px; +} +.page__news__box9 .Samantha { + border-top: 2px solid rgb(68, 66, 66); + width: 50%; + font-family: "BhuTuka Expanded One", cursive; + color: #8c8c8c; +} +.page__news__box9 img { + width: 95%; + height: 60%; +} +.page__news__box10 h3 { + font-family: "Oswald", sans-serif; + bottom: 10%; + color: rgb(0, 0, 0); + font-size: medium; +} +.page__news__box10 p { + bottom: 5%; + color: rgb(0, 0, 0); + font-size: 20px; +} +.page__news__box10 .Claire { + border-top: 2px solid rgb(68, 66, 66); + width: 50%; + font-family: "BhuTuka Expanded One", cursive; + color: #8c8c8c; +} +.page__news__box10 img { + width: 95%; + height: 60%; +} +.page__news__box11 h3 { + font-family: "Oswald", sans-serif; + bottom: 10%; + color: rgb(0, 0, 0); + font-size: medium; +} +.page__news__box11 p { + bottom: 5%; + color: rgb(0, 0, 0); + font-size: 20px; +} +.page__news__box11 .anthon { + border-top: 2px solid rgb(68, 66, 66); + width: 50%; + font-family: "BhuTuka Expanded One", cursive; + color: #8c8c8c; +} +.page__news__box11 img { + width: 95%; + height: 60%; +} +.page__news > div { + padding: 10px; + font-size: 30px; +} +.page__text { + display: flex; + padding-top: 5%; + padding-left: 5%; + padding-right: 5%; + justify-content: space-between; +} +.page__text .date { + color: #8c8c8c; +} +.page__text1 { + margin-left: 6%; + border-left: 3px solid red; +} +.page__text2 { + margin-left: 6%; + border-left: 3px solid rgb(251, 255, 0); +} + +.bar { + width: 100%; + height: 60px; + background-color: rgb(0, 0, 0); + display: flex; + justify-content: space-around; +} +.bar__icon { + width: 90px; + height: 60px; +} +.bar__login { + color: white; +} +.bar__search { + margin-left: 20px; +} +.bar__subtext { + margin-top: 20px; + margin-left: 10px; + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Tomer-Cohen/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Tomer-Cohen/style.css.map new file mode 100644 index 000000000..9de900190 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Tomer-Cohen/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/style.css b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/style.css new file mode 100644 index 000000000..398fc5b7e --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/style.css @@ -0,0 +1,357 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + padding: 2rem 0; + overflow-x: hidden; +} + +.wrapper { + width: 95%; + max-width: 1400px; + height: 200%; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +nav { + width: 100%; + background-color: black; + color: white; + height: 4rem; + display: flex; + justify-content: space-between; +} +nav .nav-item { + height: 100%; + display: flex; + align-items: center; +} +nav .left { + width: 150px; + justify-content: space-evenly; +} +nav .left img { + height: 100%; +} +nav .mid { + width: 60%; +} +nav .mid ul { + width: 100%; + display: flex; + justify-content: space-evenly; +} +nav .mid ul li { + display: block; +} +nav .mid ul li a { + text-decoration: none; + color: inherit; +} +nav .right { + width: 25%; + padding: 0 5px; + justify-content: space-evenly; +} +nav .right input { + width: 80%; + height: 70%; + background-color: black; + border: none; +} +nav .right input::-moz-placeholder { + text-align: center; +} +nav .right input:-ms-input-placeholder { + text-align: center; +} +nav .right input::placeholder { + text-align: center; +} + +#dropdown-nav { + display: inline-block; + position: relative; +} + +#hidden-nav { + display: none; + position: absolute; + right: 0; + top: 10px; +} +#hidden-nav li { + border: 1px solid white; + width: 12rem; + height: 5rem; + font-size: 2rem; + background-color: black; + display: flex; +} +#hidden-nav li a { + text-decoration: none; + color: inherit; + margin: auto; +} + +#dropdown-nav:hover #hidden-nav { + display: flex; + flex-direction: column; + justify-content: space-between; + /* height: 5rem; */ +} + +section { + width: 100%; + height: 20%; + margin: 1.5rem 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} +section h3 { + color: rgb(72, 71, 71); + font-size: 2rem; + display: flex; +} +section h3 span { + height: 1.5rem; + width: 5px; + margin-top: 0.4rem; + margin-right: 0.5rem; +} +section h3 .n { + background-color: red; +} +section h3 .s { + background-color: yellow; +} +section .grid { + display: grid; + gap: 5px; + height: 85%; +} +section .grid .box { + color: white; + text-shadow: 1px 1px 5px black; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 5px; + width: 100%; +} +section .grid .box .text { + font-family: "Times New Roman", Times, serif; +} +section .grid .box .text h5 { + font-size: 1.1rem; +} +section .grid .box .text h6 { + font-weight: 100; + margin: 5px 0; +} +section .grid .box .text em { + font-size: 0.7rem; + margin-left: 10px; +} +section .grid .box .text em span { + color: red; + font-weight: bold; +} + +.welcome { + height: 30%; +} +.welcome .grid-1 { + grid-template-areas: "box1 box1 box2 box3" "box1 box1 box2 box3" "box1 box1 box4 box5" "box1 box1 box4 box5"; +} +.welcome .grid-1 .box1 { + grid-area: box1; + background-image: url("https://ichef.bbci.co.uk/onesport/cps/976/cpsprodpb/2096/production/_126924380_gettyimages-71218828.jpg"); + background-position: center; + background-size: cover; +} +.welcome .grid-1 .box1 .text h5 { + font-size: 3rem; +} +.welcome .grid-1 .box1 .text h6 { + color: white; + font-size: 1rem; + margin: 5px 0; + text-align: justify; + padding: 2px; +} +.welcome .grid-1 .box2 { + grid-area: box2; + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/AAE9/production/_127635734_murdoch1.jpg.webp"); + background-size: cover; + background-position: center; +} +.welcome .grid-1 .box3 { + grid-area: box3; + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/A21C/production/_127700514_3e7c7d27496acf974e3e3a30157a1813a4df5f19.jpg.webp"); + background-size: cover; + background-position: center; +} +.welcome .grid-1 .box4 { + grid-area: box4; + background-image: url("https://ichef.bbci.co.uk/live-experience/cps/1680/cpsprodpb/120A7/production/_127659837_protest_wide_getty2.jpg"); + background-size: cover; + background-position: center; +} +.welcome .grid-1 .box5 { + grid-area: box5; + background-image: url("https://ychef.files.bbci.co.uk/1600x900/p0dgctzb.webp"); + background-size: cover; + background-position: center; +} + +.news .grid-2 { + grid-template-columns: repeat(3, 1fr); +} +.news .grid-2 .box1 { + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/59B7/production/_127676922_gettyimages-1181874775.jpg.webp"); + background-size: cover; + background-position: center; +} +.news .grid-2 .box2 { + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/59B7/production/_127676922_gettyimages-1181874775.jpg.webp"); + background-size: cover; + background-position: center; +} +.news .grid-2 .box3 { + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/59B7/production/_127676922_gettyimages-1181874775.jpg.webp"); + background-size: cover; + background-position: center; +} + +.sport .grid-3 { + grid-template-columns: repeat(3, 1fr); +} +.sport .grid-3 .box { + height: 100%; +} +.sport .grid-3 .box1 { + background-image: url("https://ichef.bbci.co.uk/onesport/cps/800/cpsprodpb/174DA/production/_127705459_karim_benzema_epa.jpg"); + background-size: cover; + background-position: center; +} +.sport .grid-3 .box2 { + background-image: url("https://ichef.bbci.co.uk/onesport/cps/800/cpsprodpb/174DA/production/_127705459_karim_benzema_epa.jpg"); + background-size: cover; + background-position: center; +} +.sport .grid-3 .box3 { + background-image: url("https://ichef.bbci.co.uk/onesport/cps/800/cpsprodpb/174DA/production/_127705459_karim_benzema_epa.jpg"); + background-size: cover; + background-position: center; +} + +.weather { + height: 10%; +} +.weather .weather-grid { + width: 100%; + display: flex; +} +.weather .weather-grid .box { + height: 100px; + width: 15%; + display: flex; +} +.weather .weather-grid .box .cloud { + width: 50%; + padding: 10% 0 0 5%; +} +.weather .weather-grid .box .cloud i { + font-size: 4rem; +} +.weather .weather-grid .box .deg { + padding-top: 5%; + padding-left: 10%; + width: 50%; + font-size: 1.5rem; +} +.weather .weather-grid .box .deg p:nth-child(3) { + color: gray; +} + +@media screen and (max-width: 900px) { + nav { + font-size: 0.8rem; + height: 3rem; + } +} +@media screen and (max-width: 800px) { + .welcome { + height: 80%; + } + .welcome .grid-1 { + grid-template-areas: "box1 box1 box1 box1" "box1 box1 box1 box1" "box1 box1 box1 box1" "box1 box1 box1 box1" "box2 box2 box3 box3" "box4 box4 box5 box5"; + } + .welcome .grid-1 .box { + background-position: top; + } + .welcome .grid-1 .box .text h5 { + font-size: 2rem; + } + .news { + height: 60%; + } + .news .grid-2 { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + } + .sport { + height: 60%; + } + .sport .grid-3 { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + } +} +@media screen and (max-width: 700px) { + .mid ul li:last-child { + display: none; + } +} +@media screen and (max-width: 600px) { + .grid-1 { + grid-template-areas: "box1 box1 box1 box1" "box1 box1 box1 box1" "box2 box2 box3 box3" "box2 box2 box3 box3" "box4 box4 box5 box5" "box4 box4 box5 box5"; + } + .grid-1 .box { + background-position: top; + } + .grid-1 .box .text h5 { + font-size: 1rem; + } + .mid ul li:nth-last-child(2) { + display: none; + } + .right i:last-child { + display: none; + } +} +@media screen and (max-width: 500px) { + .mid ul li:nth-last-child(3) { + display: none; + } +} +@media screen and (max-width: 450px) { + .mid ul li:nth-last-child(4) { + display: none; + } + .right input { + display: none; + } + .right i:last-child { + display: flex; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/style.css.map new file mode 100644 index 000000000..e4fef283e --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/styleNews.css b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/styleNews.css new file mode 100644 index 000000000..592a69c07 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/styleNews.css @@ -0,0 +1,139 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + padding: 2rem 0; + overflow-x: hidden; +} + +.wrapper { + width: 95%; + max-width: 1400px; + height: auto; + margin: 0 auto; + display: flex; + flex-direction: column; +} +.wrapper .grid-1 { + margin-top: 20%; + height: 300px; + display: flex; + gap: 10px; +} +.wrapper .grid-1 .box1 { + width: 50%; + display: flex; +} +.wrapper .grid-1 .box1 h2 { + width: 50%; +} +.wrapper .grid-1 .box1 .img { + width: 100%; + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/AAE9/production/_127635734_murdoch1.jpg.webp"); + background-size: cover; + background-position: center; +} +.wrapper .grid-1 .box2 { + width: 20%; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.wrapper .grid-1 .box2 .img { + width: 100%; + height: 50%; + background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/AAE9/production/_127635734_murdoch1.jpg.webp"); + background-size: cover; + background-position: center; +} +.wrapper .grid-1 .box2 .text h4 { + margin-bottom: 10px; +} + +nav { + width: 100%; + background-color: white; + color: black; + height: 4rem; + display: flex; + justify-content: space-between; +} +nav .nav-item { + height: 100%; + display: flex; + align-items: center; +} +nav .left { + width: 150px; + justify-content: space-evenly; +} +nav .left img { + height: 100%; +} +nav .mid { + width: 60%; +} +nav .mid ul { + width: 100%; + display: flex; + justify-content: space-evenly; +} +nav .mid ul li { + display: block; +} +nav .mid ul li a { + text-decoration: none; + color: inherit; +} +nav .right { + width: 25%; + padding: 0 5px; + justify-content: space-evenly; +} +nav .right input { + width: 80%; + height: 70%; + background-color: white; + border: none; +} +nav .right input::-moz-placeholder { + text-align: center; +} +nav .right input:-ms-input-placeholder { + text-align: center; +} +nav .right input::placeholder { + text-align: center; +} + +.sub-nav { + width: 100vw; + height: 5rem; + padding: 5px; + background-color: red; + color: white; + position: absolute; + top: 8rem; + display: flex; + flex-direction: column; + align-items: center; +} +.sub-nav h1 { + width: 95%; + max-width: 1400px; +} +.sub-nav ul { + margin: auto auto 0 auto; + width: 100%; + max-width: 1400px; + display: flex; + justify-content: space-between; +} +.sub-nav ul li { + display: block; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/styleNews.css.map b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/styleNews.css.map new file mode 100644 index 000000000..b3209f7d3 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/Vladi_Bykanov/styleNews.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styleNews.scss","styleNews.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,YAAA;EACA,aAAA;EACA,eAAA;EACA,kBAAA;ACCJ;;ADEA;EACI,UAAA;EACA,iBAAA;EACA,YAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;ACCJ;ADAI;EAEI,eAAA;EACA,aAAA;EACA,aAAA;EACA,SAAA;ACCR;ADAQ;EACI,UAAA;EACA,aAAA;ACEZ;ADDY;EACI,UAAA;ACGhB;ADDY;EACI,WAAA;EACA,iHAAA;EACA,sBAAA;EACA,2BAAA;ACGhB;ADCQ;EACI,UAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;ACCZ;ADAY;EACI,WAAA;EACA,WAAA;EACA,iHAAA;EACA,sBAAA;EACA,2BAAA;ACEhB;ADCgB;EACI,mBAAA;ACCpB;;ADMA;EACI,WAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;ACHJ;ADII;EACI,YAAA;EAEA,aAAA;EACA,mBAAA;ACHR;ADKI;EACI,YAAA;EACA,6BAAA;ACHR;ADIQ;EACI,YAAA;ACFZ;ADKI;EACI,UAAA;ACHR;ADIQ;EACI,WAAA;EACA,aAAA;EACA,6BAAA;ACFZ;ADGY;EAEI,cAAA;ACFhB;ADGgB;EACI,qBAAA;EACA,cAAA;ACDpB;ADMI;EACI,UAAA;EACA,cAAA;EACA,6BAAA;ACJR;ADKQ;EACI,UAAA;EACA,WAAA;EACA,uBAAA;EACA,YAAA;ACHZ;ADKQ;EACI,kBAAA;ACHZ;ADEQ;EACI,kBAAA;ACHZ;ADEQ;EACI,kBAAA;ACHZ;;ADQA;EACI,YAAA;EACA,YAAA;EACA,YAAA;EACA,qBAAA;EACA,YAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACLJ;ADMI;EACI,UAAA;EACA,iBAAA;ACJR;ADMI;EACI,wBAAA;EACA,WAAA;EACA,iBAAA;EACA,aAAA;EACA,8BAAA;ACJR;ADKQ;EACI,cAAA;ACHZ","file":"styleNews.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/amit-zaltsberger/bbc.css b/01-HTML-CSS/04-grid/BBC-HW/amit-zaltsberger/bbc.css new file mode 100644 index 000000000..50a4acb2a --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/amit-zaltsberger/bbc.css @@ -0,0 +1,259 @@ +body { + margin: 0; + position: relative; +} + +p { + font-size: 16px; + font-weight: 200; + line-height: 20px; +} + +p:hover { + text-decoration: underline; +} + +.nav_bar__topics_menu__topic:hover { + border-bottom: 8px solid rgb(216, 239, 10); +} + +.nav_bar { + width: vw; + height: 70px; + background-color: black; + position: -webkit-sticky; + position: sticky; + top: 0px; + color: white; + font-weight: 800; + font-size: 18px; + text-align: center; + line-height: 35px; + display: flex; + justify-content: space-around; + align-items: center; + z-index: 1; +} +.nav_bar__left { + width: 260px; + height: 80px; + display: flex; + justify-content: space-around; + align-items: center; +} +.nav_bar__left__bbc_logo { + width: 120px; + height: 40px; +} +.nav_bar__left__sign_in { + width: 120px; + height: 40px; + display: flex; + justify-content: space-between; + align-items: center; +} +.nav_bar__left__sign_in__logo { + width: 35px; + height: 40px; +} +.nav_bar__left__sign_in__text { + width: 100px; + height: 40px; + text-align: center; +} +.nav_bar__topics_menu { + width: 1000px; + height: 80px; + display: flex; + justify-content: space-around; + align-items: center; +} +.nav_bar__topics_menu__topic { + width: 100px; + height: 40px; + margin: 0px; + font-size: 14px; + border-bottom: 8px solid black; +} +.nav_bar__topics_menu__search_box { + width: 400px; + height: 50px; + background-color: rgb(54, 52, 52); + display: flex; + justify-content: flex-start; + align-items: center; +} +.nav_bar__topics_menu__search_box__icon { + width: 25px; + height: 25px; + margin: 8px; +} +.nav_bar__topics_menu__search_box__text { + width: 100px; + height: 40px; +} + +.container { + width: 1370px; + height: 2000px; + background-color: rgb(255, 255, 255); + margin: auto; +} +.container__first_line { + height: 60px; + width: 1360px; + background-color: rgb(255, 255, 255); + color: rgb(179, 173, 173); + font-weight: 800; + font-size: 30px; + line-height: 35px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; +} +.container__first_line__welcome { + width: 400px; + font-weight: 900; + padding: 10px; +} +.container__first_line__date { + font-weight: 400; +} +.container__top_news_grid { + height: 363px; + width: 1360px; + display: grid; + grid-template-areas: "big big little_1 little_2" "big big little_3 little_4"; + gap: 20px; +} +.container__top_news_grid__big { + grid-area: big; + height: 364px; + width: 600px; +} +.container__top_news_grid__big__image { + height: 100%; + width: 100%; +} +.container__top_news_grid__big__text_over_image { + position: relative; + bottom: 157px; + left: 15px; + color: white; + font-size: 30px; + font-weight: 700; + display: flex; + flex-direction: column; +} +.container__top_news_grid__big__text_over_image__box { + height: 100%; + width: 80%; +} +.container__top_news_grid__little_1 { + grid-area: little_1; + height: 172px; + width: 360px; +} +.container__top_news_grid__little_1__image { + height: 100%; + width: 100%; +} +.container__top_news_grid__little_1__text_box { + position: relative; + bottom: 80px; + left: 15px; + display: flex; + flex-direction: column; +} +.container__top_news_grid__little_1__text_box__text_over_image { + color: rgb(255, 255, 255); + font-size: 20px; + font-weight: 700; +} +.container__top_news_grid__little_1__text_box__tag { + border-left: 5px solid rgb(16, 224, 82); + padding-left: 10px; + color: rgb(209, 203, 203); + font-size: 16px; + font-weight: 100; + margin: 5px; +} +.container__top_news_grid__little_2 { + grid-area: little_2; + height: 172px; + width: 360px; +} +.container__top_news_grid__little_3 { + grid-area: little_3; + height: 172px; + width: 360px; +} +.container__top_news_grid__little_4 { + grid-area: little_4; + height: 172px; + width: 360px; +} +.container__bottom_news_grid { + height: 300px; + width: 1360px; + display: grid; + grid-template-areas: "news news news" "article_1 article_2 article_3" "sport sport sport" "article_4 article_5 article_6"; + gap: 20px; + position: relative; + top: 20px; + font-size: 30px; + font-weight: 900; +} +.container__bottom_news_grid__header_news { + grid-area: news; + border-left: 5px solid rgb(176, 21, 21); + padding-left: 10px; +} +.container__bottom_news_grid__article_1 { + grid-area: article_1; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_1__image { + width: 100%; + height: 250px; +} +.container__bottom_news_grid__article_1__text_under_image { + position: relative; + top: 10px; + left: 0px; + color: rgb(0, 0, 0); + font-size: 24px; + font-weight: 200; +} +.container__bottom_news_grid__article_2 { + grid-area: article_2; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_3 { + grid-area: article_3; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__header_sport { + grid-area: sport; + border-left: 5px solid rgb(16, 224, 82); + padding-left: 10px; +} +.container__bottom_news_grid__article_4 { + grid-area: article_4; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_5 { + grid-area: article_5; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_6 { + grid-area: article_6; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/amit-zaltsberger/bbc.css.map b/01-HTML-CSS/04-grid/BBC-HW/amit-zaltsberger/bbc.css.map new file mode 100644 index 000000000..404e4fd37 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/amit-zaltsberger/bbc.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["bbc.scss","bbc.css"],"names":[],"mappings":"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","file":"bbc.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/aviva elias/style.css b/01-HTML-CSS/04-grid/BBC-HW/aviva elias/style.css new file mode 100644 index 000000000..47340858e --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/aviva elias/style.css @@ -0,0 +1,212 @@ +body { + margin: 0; +} + +.wrapper { + background-color: gainsboro; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + width: 100%; +} +.wrapper .wrapper__header { + background-color: black; + height: 100px; + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; +} +.wrapper .wrapper__header .wrapper__header__bbc { + display: flex; + flex-direction: row; + width: 170px; + height: 85%; + margin-top: 0; + justify-content: space-between; +} +.wrapper .wrapper__header .wrapper__header__bbc .wrapper__header__bbc__logo { + width: 45px; + height: 45px; + background-color: white; + text-align: center; + margin-top: 30PX; +} +.wrapper .wrapper__header .wrapper__header__bbc .wrapper__header__bbc__logo h1 { + font-weight: bolder; + margin-top: 0px; +} +.wrapper .wrapper__header .wrapper__header__sign { + height: 100%; + width: 300px; + display: flex; + flex-direction: row; + justify-content: left; +} +.wrapper .wrapper__header .wrapper__header__sign img { + height: 90px; + width: 90px; + margin-top: 10px; +} +.wrapper .wrapper__header .wrapper__header__sign .wrapper__header__sign__h3 { + width: 200px; +} +.wrapper .wrapper__header .wrapper__header__sign .wrapper__header__sign__h3 h3 { + color: white; + margin-top: 42px; +} +.wrapper .wrapper__header .wrapper__header__nav { + width: 1200px; + height: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.wrapper .wrapper__header .wrapper__header__nav h3 { + color: white; + margin-top: 42px; +} +.wrapper .wrapper__header .wrapper__header__nav IMG { + width: 40px; + height: 40px; + margin-top: 40px; +} +.wrapper .wrapper__header .wrapper__header__nav .wrapper__header__nav__searchbox { + width: 200px; + height: 50px; + background-color: rgb(36, 32, 32); + margin-top: 25px; + color: white; +} +.wrapper .wrapper__header .wrapper__header__nav .wrapper__header__nav__searchbox IMG { + width: 30px; + height: 30px; + margin-top: 10px; +} +.wrapper .wrapper__h1 { + margin-left: 170px; +} +.wrapper .wrapper__grid-container1 { + display: grid; + gap: 25px; + grid-template-columns: 350px 350px 350px 350px; + grid-template-rows: 200px 200px; + margin-left: 170px; + position: relative; +} +.wrapper .wrapper__grid-container1 .grid-item1 { + grid-area: 1/1/3/3; + background: url("./Landscape-Photography-steps.jpg"); + background-size: 745px 425px; + width: 300px; + height: 200px; +} +.wrapper .wrapper__grid-container1 .grid-item2 img { + width: 350px; + height: 200px; +} +.wrapper .wrapper__grid-container1 .grid-item3 img { + width: 350px; + height: 200px; +} +.wrapper .wrapper__grid-container1 .grid-item4 img { + width: 350px; + height: 200px; +} +.wrapper .wrapper__grid-container1 .grid-item5 img { + width: 350px; + height: 200px; +} +.wrapper .wrapper__grid-container2 { + height: 875px; + width: 1475px; + display: grid; + grid-template-columns: 475px 475px 475px; + grid-template-rows: 400px 400px; + gap: 25px; + margin-left: 170px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item1 { + height: 425px; + width: 475px; + display: flex; + flex-direction: column; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item1 .wrapper__grid-container2__grid-item1__flex-item1 img { + height: 200px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item1 .wrapper__grid-container2__grid-item1__flex-item2 { + height: 225px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item2 { + height: 425px; + width: 475px; + display: flex; + flex-direction: column; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item2 .wrapper__grid-container2__grid-item2__flex-item1 img { + height: 200px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item2 .wrapper__grid-container2__grid-item2__flex-item2 { + height: 225px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item3 { + height: 425px; + width: 475px; + display: flex; + flex-direction: column; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item3 .wrapper__grid-container2__grid-item3__flex-item1 img { + height: 200px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item3 .wrapper__grid-container2__grid-item3__flex-item2 { + height: 225px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item4 { + height: 425px; + width: 475px; + display: flex; + flex-direction: column; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item4 .wrapper__grid-container2__grid-item4__flex-item1 img { + height: 200px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item4 .wrapper__grid-container2__grid-item4__flex-item2 { + height: 225px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item5 { + height: 425px; + width: 475px; + display: flex; + flex-direction: column; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item5 .wrapper__grid-container2__grid-item5__flex-item1 img { + height: 200px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item5 .wrapper__grid-container2__grid-item5__flex-item2 { + height: 225px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item6 { + height: 425px; + width: 475px; + display: flex; + flex-direction: column; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item6 .wrapper__grid-container2__grid-item6__flex-item1 img { + height: 200px; + width: 475px; +} +.wrapper .wrapper__grid-container2 .wrapper__grid-container2__grid-item6 .wrapper__grid-container2__grid-item6__flex-item2 { + height: 225px; + width: 475px; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/aviva elias/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/aviva elias/style.css.map new file mode 100644 index 000000000..c369a62b7 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/aviva elias/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EAEI,SAAA;ACAJ;;ADEA;EACI,2BAAA;EACA,2BAAA;EAAA,wBAAA;EAAA,mBAAA;EACA,WAAA;ACCJ;ADAG;EACC,uBAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,6BAAA;ACEJ;ADDA;EACI,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EAEA,8BAAA;ACEJ;ADDG;EACK,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,gBAAA;ACGR;ADFM;EACF,mBAAA;EACD,eAAA;ACIH;ADAA;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,qBAAA;ACEJ;ADAI;EACI,YAAA;EACA,WAAA;EACA,gBAAA;ACER;ADAA;EAEI,YAAA;ACCJ;ADAI;EACI,YAAA;EACJ,gBAAA;ACEJ;ADIA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;ACFJ;ADGA;EACI,YAAA;EACA,gBAAA;ACDJ;ADGA;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACDJ;ADGA;EACI,YAAA;EACA,YAAA;EACA,iCAAA;EACA,gBAAA;EACA,YAAA;ACDJ;ADGI;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACDR;ADSA;EAEI,kBAAA;ACRJ;ADWA;EACI,aAAA;EACA,SAAA;EACA,8CAAA;EACA,+BAAA;EACF,kBAAA;EACF,kBAAA;ACTA;ADWI;EACI,kBAAA;EACH,oDAAA;EACI,4BAAA;EACA,YAAA;EACA,aAAA;ACTT;ADcQ;EACI,YAAA;EACA,aAAA;ACZZ;ADiBQ;EACI,YAAA;EACA,aAAA;ACfZ;ADoBQ;EACI,YAAA;EACA,aAAA;AClBZ;ADwBI;EACI,YAAA;EACA,aAAA;ACtBR;AD6BA;EACI,aAAA;EACA,aAAA;EACA,aAAA;EACA,wCAAA;EACA,+BAAA;EACA,SAAA;EACA,kBAAA;AC3BJ;AD8BA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AC5BJ;AD8BQ;EACI,aAAA;EACA,YAAA;AC5BZ;ADiCA;EACI,aAAA;EACA,YAAA;AC/BJ;ADmCA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;ACjCJ;ADmCQ;EACI,aAAA;EACA,YAAA;ACjCZ;ADoCI;EACI,aAAA;EACA,YAAA;AClCR;ADqCA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;ACnCJ;ADqCQ;EACI,aAAA;EACA,YAAA;ACnCZ;ADuCI;EACI,aAAA;EACA,YAAA;ACrCR;ADyCA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;ACvCJ;ADyCQ;EACI,aAAA;EACA,YAAA;ACvCZ;AD2CI;EACI,aAAA;EACA,YAAA;ACzCR;AD4CA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AC1CJ;AD4CQ;EACI,aAAA;EACA,YAAA;AC1CZ;AD8CI;EACI,aAAA;EACA,YAAA;AC5CR;ADgDA;EACI,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AC9CJ;ADgDQ;EACI,aAAA;EACA,YAAA;AC9CZ;ADmDI;EACI,aAAA;EACA,YAAA;ACjDR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/jonathan-ben/style.css b/01-HTML-CSS/04-grid/BBC-HW/jonathan-ben/style.css new file mode 100644 index 000000000..8e6f51a2d --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/jonathan-ben/style.css @@ -0,0 +1,254 @@ +body { + margin: 0; +} + +p { + font-size: 18px; + font-weight: 200; + line-height: 20px; +} + +.header { + background-color: black; + width: 100vw; + height: 100px; + display: flex; + position: fixed; +} +.header__bbc { + margin-left: 13%; + display: flex; + width: 350px; + justify-content: space-around; +} +.header__bbc__logo { + display: flex; + width: 100px; + justify-content: space-around; + position: relative; + top: 17px; +} +.header__bbc__icon img { + padding-top: 40px; + height: 26px; + width: 26px; +} +.header__bbc p { + font-size: x-large; + width: 25px; + height: 25px; + color: black; + background-color: white; +} +.header__bbc__sign-in { + margin-left: 0; + width: 150px; + color: white; +} +.header__bbc__sign-in h3 { + font-size: xx-large; +} +.header__nav_bar { + display: flex; + margin-top: 17px; + width: 1000px; + justify-content: space-around; +} +.header__nav_bar__home { + font-size: x-large; + width: 25px; + height: 25px; + color: white; + margin-top: 10px; +} +.header__nav_bar__news { + font-size: x-large; + width: 25px; + height: 25px; + color: white; + margin-top: 10px; +} +.header__nav_bar__sport { + font-size: x-large; + width: 25px; + height: 25px; + color: white; + margin-top: 10px; +} +.header__nav_bar__reel { + font-size: x-large; + width: 25px; + height: 25px; + color: white; + margin-top: 10px; +} +.header__nav_bar__worklife { + font-size: x-large; + width: 25px; + height: 25px; + color: white; + margin-top: 10px; +} + +.container { + width: 1300px; + height: 1600px; + background-color: rgb(255, 255, 255); + margin: auto; +} +.container__line { + height: 250px; + width: 1300px; + background-color: rgb(255, 255, 255); + color: rgb(179, 173, 173); + font-weight: 600; + font-size: 25px; + line-height: 35px; + display: flex; + justify-content: space-around; + align-items: center; + margin: 0; +} +.container__line__welcome { + font-weight: 900; +} +.container__line__date { + font-weight: 900; +} +.container__top_news_grid { + height: 360px; + width: 1400px; + display: grid; + grid-template-areas: "big big little_1 little_2" "big big little_3 little_4"; + gap: 10px; +} +.container__top_news_grid__big { + grid-area: big; + height: 360px; + width: 600px; +} +.container__top_news_grid__big__image { + height: 100%; + width: 650px; +} +.container__top_news_grid__big__text_over_image { + position: relative; + bottom: 157px; + left: 15px; + color: white; + font-size: 30px; + font-weight: 700; + display: flex; + flex-direction: column; +} +.container__top_news_grid__big__text_over_image__box { + height: 100%; + width: 80%; +} +.container__top_news_grid__little_1 { + grid-area: little_1; + height: 175px; + width: 300px; +} +.container__top_news_grid__little_1__image { + height: 100%; + width: 100%; +} +.container__top_news_grid__little_1__text_box { + position: relative; + bottom: 80px; + left: 15px; + display: flex; + flex-direction: column; +} +.container__top_news_grid__little_1__text_box__text_over_image { + color: rgb(255, 255, 255); + font-size: 20px; + font-weight: 700; +} +.container__top_news_grid__little_1__text_box__tag { + border-left: 5px solid rgb(16, 224, 82); + padding-left: 10px; + color: rgb(209, 203, 203); + font-size: 16px; + font-weight: 100; + margin: 7px; +} +.container__top_news_grid__little_2 { + grid-area: little_2; + height: 175px; + width: 300px; +} +.container__top_news_grid__little_3 { + grid-area: little_3; + height: 175px; + width: 300px; +} +.container__top_news_grid__little_4 { + grid-area: little_4; + height: 175px; + width: 300px; +} +.container__bottom_news_grid { + height: 300px; + width: 1360px; + display: grid; + grid-template-areas: "news news news" "article_1 article_2 article_3" "sport sport sport" "article_4 article_5 article_6"; + gap: 20px; + position: relative; + top: 20px; + font-size: 30px; + font-weight: 900; +} +.container__bottom_news_grid__header_news { + grid-area: news; + border-left: 5px solid rgb(176, 21, 21); + padding-left: 10px; +} +.container__bottom_news_grid__article_1 { + grid-area: article_1; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_1__image { + width: 100%; + height: 250px; +} +.container__bottom_news_grid__article_1__text_under_image { + position: relative; + top: 10px; + left: 0px; + color: rgb(0, 0, 0); + font-size: 18px; + font-weight: 200; +} +.container__bottom_news_grid__article_2 { + grid-area: article_2; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_3 { + grid-area: article_3; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__header_sport { + grid-area: sport; + border-left: 5px solid rgb(16, 224, 82); + padding-left: 10px; +} +.container__bottom_news_grid__article_4 { + grid-area: article_4; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_5 { + grid-area: article_5; + display: flex; + flex-direction: column; +} +.container__bottom_news_grid__article_6 { + grid-area: article_6; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/jonathan-ben/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/jonathan-ben/style.css.map new file mode 100644 index 000000000..b6a155d20 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/jonathan-ben/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/noa-meillet/style.css b/01-HTML-CSS/04-grid/BBC-HW/noa-meillet/style.css new file mode 100644 index 000000000..e61df0dea --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/noa-meillet/style.css @@ -0,0 +1,178 @@ +body { + margin: 0; + overflow-x: hidden; + font-family: ReithSans, Arial, Helvetica, freesans, sans-serif; +} + +.nav_bar { + width: 100%; + background-color: black; + display: flex; + justify-content: space-evenly; +} +.nav_bar__logo { + width: 100px; + margin: auto 0; +} +.nav_bar__logo img { + width: 90%; +} +.nav_bar__sign_in { + width: 12%; + height: 5%; + margin: auto 0; + display: flex; + flex-direction: row; + justify-content: start; +} +.nav_bar__sign_in img { + width: 20px; + height: 20px; + margin: auto 0; +} +.nav_bar__sign_in h3 { + color: white; + font-weight: bold; + margin: auto 0 auto 5%; +} +.nav_bar__menu { + display: flex; + flex-direction: row; + justify-content: space-around; + margin: auto 0; + width: 45%; +} +.nav_bar__menu__item { + color: white; + font-weight: bold; + font-size: 1em; + margin: auto 1.3%; +} +.nav_bar__menu img { + width: 20px; + margin: auto 0; +} +.nav_bar__search { + width: 15%; + margin: 0.5% 1%; + display: flex; + flex-direction: row; + justify-content: start; + border: 0.5px solid gray; +} +.nav_bar__search img { + width: 14%; +} +.nav_bar__search input { + width: 80%; + padding-left: 5%; + background-color: black; + border: none; + color: white; +} +.nav_bar__search input:focus { + outline: none; +} + +.grid_container { + display: grid; + gap: 3px; + height: 30px; + grid-template-rows: repeat(3, 1fr); + margin: 0 10%; +} +.grid_container .grid_welcome_bar { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.grid_container .grid_welcome_bar #welcome { + color: rgb(82, 82, 82); +} +.grid_container .grid_welcome_bar #date { + color: rgb(147, 147, 147); + font-weight: lighter; +} +.grid_container .grid_big_news { + display: grid; + gap: 10px; + grid-template-columns: 2fr 1fr 1fr; + grid-template-rows: repeat(2, 1fr); +} +.grid_container .grid_big_news .big_news_item { + grid-area: 1/1/3/2; +} +.grid_container .grid_big_news .big_news_item img { + width: 100%; + height: 100%; + position: relative; +} +.grid_container .grid_big_news .big_news_item__text { + position: absolute; + margin: -4.8rem 0 0 1%; + line-height: 2%; + color: white; + width: 50%; +} +.grid_container .grid_big_news .big_news_item__text h5 { + border-left: 4px solid red; + margin: 0; + padding: 1%; +} +.grid_container .grid_big_news .news_item img { + width: 100%; + height: 100%; +} +.grid_container .grid_big_news .news_item__text { + position: absolute; + margin: -3.1rem 0 0 0.5%; + line-height: 0; + color: white; +} +.grid_container .grid_big_news .news_item__text h3 { + font-size: 0.9rem; +} +.grid_container .grid_big_news .news_item__text h5 { + border-left: 4px solid red; + margin: 0; + padding: 5%; +} +.grid_container .grid_news { + display: grid; + -moz-column-gap: 10px; + column-gap: 10px; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 2fr; + margin-top: 2%; +} +.grid_container .grid_news .title_item { + display: flex; + flex-flow: row; + justify-content: start; + grid-area: 1/1/3/4; +} +.grid_container .grid_news .title_item img { + width: 0.5%; + height: 30%; + margin: auto 1%; +} +.grid_container .grid_news .news_item img { + width: 100%; +} +.grid_container .grid_news .news_item h3 { + margin: 5% 0; +} +.grid_container .grid_news .news_item .bottom_item { + display: flex; + flex-flow: row; + justify-content: start; +} +.grid_container .grid_news .news_item .bottom_item img { + width: 2%; + margin: 0 1%; +} +.grid_container .grid_news .news_item .bottom_item h5 { + height: 15px; + margin: 0; + padding: auto 0; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/noa-meillet/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/noa-meillet/style.css.map new file mode 100644 index 000000000..495d784bf --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,kBAAA;EACA,8DAAA;ACCJ;;ADEA;EACG,WAAA;EACA,uBAAA;EACA,aAAA;EACA,6BAAA;ACCH;ADCG;EACC,YAAA;EACA,cAAA;ACCJ;ADCI;EACG,UAAA;ACCP;ADGG;EACC,UAAA;EACA,UAAA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;ACDJ;ADGI;EACG,WAAA;EACA,YAAA;EACA,cAAA;ACDP;ADII;EACI,YAAA;EACA,iBAAA;EACA,sBAAA;ACFR;ADMG;EACI,aAAA;EACA,mBAAA;EACA,6BAAA;EACA,cAAA;EACA,UAAA;ACJP;ADMO;EACM,YAAA;EACA,iBAAA;EACA,cAAA;EACA,iBAAA;ACJb;ADOO;EACC,WAAA;EACA,cAAA;ACLR;ADSG;EACK,UAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,wBAAA;ACPR;ADSQ;EACI,UAAA;ACPZ;ADUQ;EACI,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;ACRZ;ADWQ;EACK,aAAA;ACTb;;ADcA;EACI,aAAA;EACA,QAAA;EACA,YAAA;EACA,kCAAA;EACA,aAAA;ACXJ;ADaI;EACI,aAAA;EACA,mBAAA;EACA,8BAAA;ACXR;ADaQ;EACI,sBAAA;ACXZ;ADcQ;EACI,yBAAA;EACA,oBAAA;ACZZ;ADgBI;EACI,aAAA;EACA,SAAA;EACA,kCAAA;EACA,kCAAA;ACdR;ADgBQ;EACI,kBAAA;ACdZ;ADgBY;EACG,WAAA;EACA,YAAA;EACA,kBAAA;ACdf;ADiBY;EACI,kBAAA;EACA,sBAAA;EACA,eAAA;EACA,YAAA;EACA,UAAA;ACfhB;ADiBgB;EACI,0BAAA;EACA,SAAA;EACA,WAAA;ACfpB;ADqBY;EACI,WAAA;EACA,YAAA;ACnBhB;ADsBY;EACI,kBAAA;EACA,wBAAA;EACA,cAAA;EACA,YAAA;ACpBhB;ADsBgB;EACI,iBAAA;ACpBpB;ADuBgB;EACI,0BAAA;EACA,SAAA;EACA,WAAA;ACrBpB;AD2BI;EACI,aAAA;EACA,qBAAA;OAAA,gBAAA;EACA,kCAAA;EACA,2BAAA;EACA,cAAA;ACzBR;AD2BQ;EACI,aAAA;EACA,cAAA;EACA,sBAAA;EACA,kBAAA;ACzBZ;AD2BY;EACI,WAAA;EACA,WAAA;EACA,eAAA;ACzBhB;AD8BY;EACI,WAAA;AC5BhB;AD+BY;EACI,YAAA;AC7BhB;ADgCY;EACI,aAAA;EACA,cAAA;EACA,sBAAA;AC9BhB;ADgCgB;EACE,SAAA;EACA,YAAA;AC9BlB;ADiCgB;EACI,YAAA;EACA,SAAA;EACA,eAAA;AC/BpB","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css b/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css index 7bc298db3..80aa1a45e 100644 --- a/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css +++ b/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css @@ -359,4 +359,4 @@ i { color: black; font-size: 12px; width: 90%; -}/*# sourceMappingURL=style.css.map */ \ No newline at end of file +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css.map index 55180496b..1ee5db2d8 100644 --- a/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css.map +++ b/01-HTML-CSS/04-grid/BBC-HW/shlomi_samai/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACA,UAAA;ACCA;;ADEA;EACI,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACCJ;ADEI;EACI,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;ACAR;ADGQ;EACI,eAAA;EACA,YAAA;EACA,eAAA;ACDZ;ADIQ;EAEI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,YAAA;ACHZ;ADMY;EACI,YAAA;EACA,uBAAA;EACA,uBAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;ACJhB;ADWI;EACI,aAAA;EACA,6BAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;ACTR;ADaQ;EACI,aAAA;EACA,6BAAA;EACA,eAAA;EACA,YAAA;ACXZ;ADeI;EACI,WAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,eAAA;ACbR;;ADiBA;EACI,eAAA;EACA,kBAAA;EACA,UAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,WAAA;EACA,YAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,UAAA;ACdJ;;ADiBA;EACI,kBAAA;EACA,UAAA;EACA,YAAA;EACA,eAAA;ACdJ;;ADiBA;EACI,aAAA;EACA,YAAA;ACdJ;;ADiBA;EACI,aAAA;EACA,8BAAA;ACdJ;ADgBI;EACI,iBAAA;EACA,kBAAA;EACA,SAAA;ACdR;ADgBI;EACI,kBAAA;EACA,SAAA;EACA,WAAA;EACA,iBAAA;EACA,WAAA;ACdR;;ADkBA;EACI,aAAA;EACA,SAAA;EACA,2BAAA;EACA,6BAAA;EACA,kBAAA;EACA,SAAA;ACfJ;ADiBI;EACI,aAAA;EACA,gBAAA;EACA,aAAA;EACA,0CAAA;EACA,6BAAA;EACA,SAAA;ACfR;ADkBQ;EACI,aAAA;EACA,gBAAA;EAEA,eAAA;EACA,aAAA;EACA,YAAA;EACA,89QAAA;EACA,sBAAA;EACA,4BAAA;EACA,gBAAA;ACjBZ;ADmBY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;ACjBhB;ADoBY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;AClBhB;ADsBQ;EACI,aAAA;EACA,gBAAA;EAEA,aAAA;EACA,YAAA;EACA,sHAAA;EACA,sBAAA;EACA,4BAAA;EACA,gBAAA;ACrBZ;ADuBY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;ACrBhB;ADwBY;EACI,gBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,SAAA;ACtBhB;AD0BQ;EACI,aAAA;EACA,gBAAA;EAEA,aAAA;EACA,YAAA;EACA,sHAAA;EACA,sBAAA;EACA,4BAAA;EACA,gBAAA;ACzBZ;AD2BY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;ACzBhB;AD4BY;EACI,gBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,SAAA;AC1BhB;AD8BQ;EACI,aAAA;EACA,gBAAA;EAEA,aAAA;EACA,YAAA;EACA,sHAAA;EACA,sBAAA;EACA,4BAAA;EACA,gBAAA;AC7BZ;AD+BY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;AC7BhB;ADgCY;EACI,gBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,SAAA;AC9BhB;ADkCQ;EACI,aAAA;EACA,gBAAA;EAEA,aAAA;EACA,YAAA;EACA,sHAAA;EACA,sBAAA;EACA,4BAAA;EACA,gBAAA;ACjCZ;ADmCY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,SAAA;ACjChB;ADoCY;EACI,gBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,SAAA;AClChB;ADuCI;EACI,aAAA;EACA,gBAAA;EACA,aAAA;EACA,qCAAA;EACA,kCAAA;EACA,SAAA;ACrCR;ADwCQ;EAGI,eAAA;EACA,YAAA;EACA,WAAA;EAEA,gBAAA;ACzCZ;AD2CY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;ACzChB;AD4CY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;AC1ChB;AD+CQ;EAGI,YAAA;EACA,WAAA;EAEA,gBAAA;AChDZ;ADkDY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;AChDhB;ADmDY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;ACjDhB;ADqDQ;EAEI,YAAA;EACA,WAAA;EAEA,gBAAA;ACrDZ;ADuDY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;ACrDhB;ADwDY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;ACtDhB;AD0DQ;EAGI,YAAA;EACA,WAAA;EAEA,gBAAA;AC3DZ;AD6DY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;AC3DhB;AD8DY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;AC5DhB;ADgEQ;EACI,YAAA;EACA,WAAA;EAEA,gBAAA;AC/DZ;ADiEY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;AC/DhB;ADkEY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;AChEhB;ADqEQ;EACI,YAAA;EACA,WAAA;EAEA,gBAAA;ACpEZ;ADsEY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;ACpEhB;ADuEY;EACI,gBAAA;EACA,YAAA;EACA,eAAA;EACA,UAAA;ACrEhB","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/uriel bbc/style.css b/01-HTML-CSS/04-grid/BBC-HW/uriel bbc/style.css new file mode 100644 index 000000000..962b41e72 --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/uriel bbc/style.css @@ -0,0 +1,113 @@ +.body { + margin: 0; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 1, "wght" 2000, "GRAD" 200, "opsz" 48; +} + +.header { + position: relative; + height: 30px; + width: 100%; + background-color: black; + color: white; + font-weight: bold; + font-size: 19px; + display: flex; + justify-content: space-around; + padding-top: 20px; + padding-bottom: 20px; +} + +.size-container1 { + position: relative; + width: 60%; + height: 200px; + margin: auto; + top: 20px; + padding-bottom: 30cm; +} +.size-container1 h2 { + position: relative; + top: 45px; + color: rgba(24, 26, 26, 0.801); +} +.size-container1__grid-container { + display: grid; + grid-template-columns: auto auto auto; + grid-gap: 2px; + background-color: rgba(255, 255, 255, 0.8470588235); +} +.size-container1 .border_news { + border-left: 3px solid red; + margin-top: 45px; + font-weight: bold; +} +.size-container1 .border_sport { + border-left: 3px solid rgb(187, 255, 0); + margin-top: 80px; + font-weight: bold; +} +.size-container1__date { + position: relative; + left: 487px; + top: 3px; + color: gray; +} +.size-container1__grid-container > div { + background-color: rgba(255, 255, 255, 0.829); + padding: 1px; + font-size: 18px; + position: relative; + display: flex; + justify-content: space-around; +} +.size-container1__container-news { + display: grid; + grid-template-columns: repeat(3, 2fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 100px; + margin-top: 10px; +} +.size-container1__container-sport { + display: grid; + grid-template-columns: repeat(3, 2fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 100px; + margin-top: 10px; +} +.size-container1 .div1 { + grid-area: 1/1/2/2; +} +.size-container1 .div2 { + grid-area: 1/2/2/3; +} +.size-container1 .div3 { + grid-area: 1/3/2/4; +} +.size-container1 .border_red { + border-left: 3px solid red; +} +.size-container1 .border_green { + border-left: 3px solid rgb(0, 128, 0); +} +.size-container1 .border_blue { + border-left: 3px solid blue; +} + +.item1 { + grid-area: 1/1/3; +} + +.text_img { + position: absolute; + bottom: 5px; + color: rgb(255, 255, 255); + background-color: rgba(0, 0, 0, 0.356); + text-align: justify; + margin-left: 4%; + margin-right: 4%; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/BBC-HW/uriel bbc/style.css.map b/01-HTML-CSS/04-grid/BBC-HW/uriel bbc/style.css.map new file mode 100644 index 000000000..41ef4c84b --- /dev/null +++ b/01-HTML-CSS/04-grid/BBC-HW/uriel bbc/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACE,qEACA;ACAF;;ADMA;EACI,kBAAA;EACA,YAAA;EACA,WAAA;EACA,uBAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,6BAAA;EACA,iBAAA;EACA,oBAAA;ACHJ;;ADQA;EACI,kBAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,SAAA;EACA,oBAAA;ACLJ;ADOI;EACE,kBAAA;EACA,SAAA;EACA,8BAAA;ACLN;ADUA;EACI,aAAA;EACA,qCAAA;EACA,aAAA;EACA,mDAAA;ACRJ;ADWA;EACA,0BAAA;EACA,gBAAA;EACA,iBAAA;ACTA;ADcA;EACA,uCAAA;EACA,gBAAA;EACA,iBAAA;ACZA;ADgBA;EACE,kBAAA;EACA,WAAA;EACA,QAAA;EACA,WAAA;ACdF;ADoBE;EACE,4CAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,aAAA;EACA,6BAAA;AClBJ;ADuBE;EACE,aAAA;EACA,qCAAA;EACA,uBAAA;EACA,qBAAA;EACA,mBAAA;EACA,gBAAA;ACrBJ;ADuBE;EACE,aAAA;EACA,qCAAA;EACA,uBAAA;EACA,qBAAA;EACA,mBAAA;EACA,gBAAA;ACrBJ;ADwBI;EAAQ,kBAAA;ACrBZ;ADsBI;EAAQ,kBAAA;ACnBZ;ADoBI;EAAQ,kBAAA;ACjBZ;ADmBI;EACE,0BAAA;ACjBN;ADqBI;EACE,qCAAA;ACnBN;ADsBI;EACE,2BAAA;ACpBN;;AD6BE;EACE,gBAAA;AC1BJ;;AD+BA;EACI,kBAAA;EACA,WAAA;EACA,yBAAA;EACA,sCAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;AC5BJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/Itai-g/style.css b/01-HTML-CSS/04-grid/Exresice/Itai-g/style.css new file mode 100644 index 000000000..f3b9177ce --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/Itai-g/style.css @@ -0,0 +1,23 @@ +.grid-container { + width: 400px; + height: 400px; + background-color: aqua; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + border: 1px solid black; +} + +.grid-itmes { + width: 20px; + height: 200px; + border: 1px solid black; +} + +div { + border: 1px solid black; +} + +.item1 { + grid-area: 1/1/3; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/Itai-g/style.css.map b/01-HTML-CSS/04-grid/Exresice/Itai-g/style.css.map new file mode 100644 index 000000000..67fc0c7aa --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/Itai-g/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,aAAA;EACA,kCAAA;EACA,+BAAA;EACA,uBAAA;ACCF;;ADCA;EACI,WAAA;EACA,aAAA;EACA,uBAAA;ACEJ;;ADAA;EACI,uBAAA;ACGJ;;ADDA;EACI,gBAAA;ACIJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/Kseniya_T/style.css b/01-HTML-CSS/04-grid/Exresice/Kseniya_T/style.css new file mode 100644 index 000000000..12b99ee3c --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/Kseniya_T/style.css @@ -0,0 +1,14 @@ +.grid_container { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto auto; + padding: 10px; + width: 80vh; +} + +.grid-item { + background-color: rgb(255, 101, 101); + height: 25vh; + width: 25vh; + border: 1px solid rgba(0, 0, 0, 0.8); +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/Kseniya_T/style.css.map b/01-HTML-CSS/04-grid/Exresice/Kseniya_T/style.css.map new file mode 100644 index 000000000..613222142 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/Kseniya_T/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,qCAAA;EACA,kCAAA;EACA,aAAA;EACA,WAAA;ACCJ;;ADEA;EACI,oCAAA;EACI,YAAA;EACA,WAAA;EACA,oCAAA;ACCR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/VB/style.css b/01-HTML-CSS/04-grid/Exresice/VB/style.css new file mode 100644 index 000000000..f9d18c157 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/VB/style.css @@ -0,0 +1,29 @@ +.wrapper { + margin: auto; + width: 80vw; + height: 80vh; + display: grid; + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); + gap: 20px 20px; +} +.wrapper .box { + width: 100%; + height: 100%; + background-color: red; + border: 3px solid black; + padding: 5px; +} +.wrapper .box-1 { + display: grid; + gap: 5px; +} +.wrapper .box-1 .small_box { + background-color: blue; + border: 1px solid black; + width: auto; + height: auto; +} +.wrapper .box-1 .three { + grid-column: 1/3; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/VB/style.css.map b/01-HTML-CSS/04-grid/Exresice/VB/style.css.map new file mode 100644 index 000000000..234e5d5c1 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/VB/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;EACA,qCAAA;EACA,cAAA;ACCJ;ADAI;EACI,WAAA;EACA,YAAA;EACA,qBAAA;EACA,uBAAA;EACA,YAAA;ACER;ADAI;EACI,aAAA;EAGA,QAAA;ACAR;ADCQ;EACI,sBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;ACCZ;ADCQ;EACI,gBAAA;ACCZ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/adi/style.css b/01-HTML-CSS/04-grid/Exresice/adi/style.css new file mode 100644 index 000000000..7c3377b16 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/adi/style.css @@ -0,0 +1,14 @@ +.grid_container { + width: 100vw; + height: 500px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + background-color: aquamarine; +} +.grid_container__grid_item { + width: 100px; + height: 100px; + background-color: beige; + border: 1px solid black; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/adi/style.css.map b/01-HTML-CSS/04-grid/Exresice/adi/style.css.map new file mode 100644 index 000000000..e8013837e --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/adi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAGA;EACI,YAAA;EACA,aAAA;EACA,aAAA;EACA,8BAAA;EACA,mCAAA;EACA,4BAAA;ACFJ;ADMI;EAEI,YAAA;EACA,aAAA;EACA,uBAAA;EACA,uBAAA;ACLR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/amit/grid9.css b/01-HTML-CSS/04-grid/Exresice/amit/grid9.css new file mode 100644 index 000000000..f939ad346 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/amit/grid9.css @@ -0,0 +1,40 @@ +body { + margin: 0; +} + +.grid_container { + height: 500px; + width: 500px; + border: 1 px solid black; + background-color: aqua; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; +} +.grid_container .grid_item1 { + background-color: black; +} +.grid_container .grid_item2 { + background-color: white; +} +.grid_container .grid_item3 { + background-color: black; +} +.grid_container .grid_item4 { + background-color: white; +} +.grid_container .grid_item5 { + background-color: black; +} +.grid_container .grid_item6 { + background-color: white; +} +.grid_container .grid_item7 { + background-color: black; +} +.grid_container .grid_item8 { + background-color: white; +} +.grid_container .grid_item9 { + background-color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/amit/grid9.css.map b/01-HTML-CSS/04-grid/Exresice/amit/grid9.css.map new file mode 100644 index 000000000..9cb8e3b8a --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/amit/grid9.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["grid9.scss","grid9.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,YAAA;EACA,wBAAA;EACA,sBAAA;EACA,aAAA;EACA,kCAAA;EACA,+BAAA;ACCJ;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR;ADCI;EACI,uBAAA;ACCR","file":"grid9.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/angela/style.css b/01-HTML-CSS/04-grid/Exresice/angela/style.css new file mode 100644 index 000000000..dc75d547b --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/angela/style.css @@ -0,0 +1,31 @@ +.grid_container { + background-color: coral; + height: 10rem; + width: 10rem; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 0.5rem; + outline: 1px solid black; +} +.grid_container__grid_item { + background-color: black; + height: 100%; + width: 100%; +} + +.nine_grid { + background-color: coral; + height: 50rem; + width: 50rem; + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr); + gap: 0.5rem; + outline: 1px solid black; +} +.nine_grid .nine_grid_item { + height: 5rem; + width: 5rem; + outline: 1px solid black; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/angela/style.css.map b/01-HTML-CSS/04-grid/Exresice/angela/style.css.map new file mode 100644 index 000000000..47ff6b1b3 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/angela/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,qCAAA;EACA,kCAAA;EACA,WAAA;EACA,wBAAA;ACCJ;ADCI;EACI,uBAAA;EACA,YAAA;EACA,WAAA;ACCR;;ADEA;EACI,uBAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,qCAAA;EACA,kCAAA;EACA,WAAA;EACA,wBAAA;ACCJ;ADCI;EACI,YAAA;EACA,WAAA;EACA,wBAAA;ACCR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/asael-matari/style.css b/01-HTML-CSS/04-grid/Exresice/asael-matari/style.css new file mode 100644 index 000000000..0a8c0ebfa --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/asael-matari/style.css @@ -0,0 +1,17 @@ +body { + margin: 0; +} + +.grid-container { + background-color: aqua; + display: grid; + gap: 10px; + grid-template-rows: auto; + grid-template-columns: repeat(9, auto); + padding: 10px; +} +.grid-container__grid-items { + background-color: black; + width: 20px; + height: 20px; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/asael-matari/style.css.map b/01-HTML-CSS/04-grid/Exresice/asael-matari/style.css.map new file mode 100644 index 000000000..ed309da3b --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/asael-matari/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,aAAA;EACA,SAAA;EACA,wBAAA;EACA,sCAAA;EACA,aAAA;ACEJ;ADEI;EACA,uBAAA;EACA,WAAA;EACA,YAAA;ACAJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/noa-meillet/style.css b/01-HTML-CSS/04-grid/Exresice/noa-meillet/style.css new file mode 100644 index 000000000..860972a9f --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/noa-meillet/style.css @@ -0,0 +1,18 @@ +body { + margin: 0; +} + +.grid_container { + display: grid; + gap: 10px; + grid-template-columns: repeat(4, 2fr); + grid-template-rows: repeat(3, 2fr); + background-color: #2196F3; + padding: 10px; +} +.grid_container__grid_item { + background-color: lightblue; + width: 40px; + height: 40px; + margin: auto; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/noa-meillet/style.css.map b/01-HTML-CSS/04-grid/Exresice/noa-meillet/style.css.map new file mode 100644 index 000000000..fcfda9770 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,SAAA;EACA,qCAAA;EACA,kCAAA;EACA,yBAAA;EACA,aAAA;ACCJ;ADCI;EACI,2BAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;ACCR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/shlomi- samai/style.css b/01-HTML-CSS/04-grid/Exresice/shlomi- samai/style.css new file mode 100644 index 000000000..cd9f662cb --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/shlomi- samai/style.css @@ -0,0 +1,15 @@ +.grid-conteiner { + height: 200px; + width: 200px; + background-color: blue; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; +} + +.grid_item { + width: 100px; + height: 100px; + background-color: beige; + border: 1px solid black; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/shlomi- samai/style.css.map b/01-HTML-CSS/04-grid/Exresice/shlomi- samai/style.css.map new file mode 100644 index 000000000..915562b2c --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/shlomi- samai/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACA,aAAA;EACA,YAAA;EACA,sBAAA;EACA,aAAA;EACA,kCAAA;EACA,+BAAA;ACCA;;ADIA;EACI,YAAA;EACA,aAAA;EACA,uBAAA;EACA,uBAAA;ACDJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/uriel bargil/style.css b/01-HTML-CSS/04-grid/Exresice/uriel bargil/style.css new file mode 100644 index 000000000..0ca881106 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/uriel bargil/style.css @@ -0,0 +1,14 @@ +.grid-container { + height: 300vh; + width: 100vw; + background-color: aqua; + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr); +} +.grid-container .grid-item { + width: 100px; + height: 100px; + background-color: beige; + border: 1px solid black; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/uriel bargil/style.css.map b/01-HTML-CSS/04-grid/Exresice/uriel bargil/style.css.map new file mode 100644 index 000000000..6c902fea4 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/uriel bargil/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,YAAA;EACA,sBAAA;EACA,aAAA;EACA,qCAAA;EACA,kCAAA;ACCJ;ADCI;EACE,YAAA;EACA,aAAA;EACA,uBAAA;EACA,uBAAA;ACCN","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/yovelp/ex2/style.css b/01-HTML-CSS/04-grid/Exresice/yovelp/ex2/style.css new file mode 100644 index 000000000..de054db35 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/yovelp/ex2/style.css @@ -0,0 +1,22 @@ +body { + margin: 0; + padding: 0; +} + +.box { + display: grid; + height: 50vh; + width: 50vw; + background: rgb(0, 204, 255); + grid-template-rows: 1fr 1fr 2fr; + gap: 10px; +} +.box .boxgrid { + height: 40px; + width: 40px; + border: 1px solid black; + font-size: 5px; + text-align: center; + background: white; + font-size: 13px; +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/yovelp/ex2/style.css.map b/01-HTML-CSS/04-grid/Exresice/yovelp/ex2/style.css.map new file mode 100644 index 000000000..b8b163b14 --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/yovelp/ex2/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;ACCJ;;ADCA;EACA,aAAA;EACA,YAAA;EACA,WAAA;EACA,4BAAA;EACA,+BAAA;EACA,SAAA;ACEA;ADDC;EACG,YAAA;EACA,WAAA;EACA,uBAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;ACGJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/yovelp/style.css b/01-HTML-CSS/04-grid/Exresice/yovelp/style.css new file mode 100644 index 000000000..6042c16ff --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/yovelp/style.css @@ -0,0 +1,20 @@ +body { + margin: 0; + padding: 0; +} + +.box { + height: 90vh; + width: 90vw; + background-color: rgb(0, 145, 255); + display: grid; + grid-template-rows: repeat(9, 1fr); + grid-template-columns: repeat(9, 1fr); +} +.box .box__item-grid { + font-size: 20px; + height: 20px; + width: 20px; + background-color: white; + border: 1px solid rgb(0, 0, 0); +} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/Exresice/yovelp/style.css.map b/01-HTML-CSS/04-grid/Exresice/yovelp/style.css.map new file mode 100644 index 000000000..ff5c7445e --- /dev/null +++ b/01-HTML-CSS/04-grid/Exresice/yovelp/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;ACCJ;;ADCA;EACI,YAAA;EACA,WAAA;EACA,kCAAA;EACA,aAAA;EACA,kCAAA;EACA,qCAAA;ACEJ;ADDI;EACI,eAAA;EACA,YAAA;EACA,WAAA;EACA,uBAAA;EAEA,8BAAA;ACER","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/04-grid/example/index.html b/01-HTML-CSS/04-grid/example/index.html index be753c887..c2b3258c3 100644 --- a/01-HTML-CSS/04-grid/example/index.html +++ b/01-HTML-CSS/04-grid/example/index.html @@ -30,15 +30,9 @@

Grid Lines

3
4
5
-<<<<<<< HEAD
6
7
8
-======= - - - ->>>>>>> 62eda7de0e86057bc66d7dc846fc047e4c508867 + diff --git a/01-HTML-CSS/05-responsiveness/example/style.css b/01-HTML-CSS/05-responsiveness/example/style.css new file mode 100644 index 000000000..516aec501 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/example/style.css @@ -0,0 +1,114 @@ +* { + box-sizing: border-box; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.fa-solid { + font-size: 4rem; +} + +.red { + color: white; +} + +[class*=col-] { + float: left; + padding: 15px; +} + +html { + font-family: "Lucida Sans", sans-serif; +} + +.header { + background-color: #9933cc; + color: #ffffff; + padding: 15px; +} + +.menu ul { + list-style-type: none; + margin: 0; + padding: 0; +} +.menu li { + padding: 8px; + margin-bottom: 7px; + background-color: #33b5e5; + color: #ffffff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +.menu li:hover { + background-color: #0099cc; +} + +.aside { + background-color: #33b5e5; + padding: 15px; + color: #ffffff; + text-align: center; + font-size: 14px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} + +.footer { + background-color: #0099cc; + color: #ffffff; + text-align: center; + font-size: 12px; + padding: 15px; +} + +/* For desktop: */ +.col-1 { + width: 25%; +} + +.col-2 { + width: 50%; +} + +@media only screen and (max-width: 768px) { + /* For mobile phones: */ + [class*=col-] { + width: 100%; + } +} +body { + margin: 0%; +} + +.card { + background-color: #0099cc; + border: 10px solid black; + display: inline; + width: 100vw; + height: 70vh; + /*vw vh em rem %*/ + font-size: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.card p { + font-size: 2em; + /* google chrome 16px*/ + background-color: #9933cc; + width: 50%; +} + +.box { + background-color: red; + border: 1px solid black; + height: 50px; + width: 50px; +} + +@media only screen and (min-width: 1800px) { + .card { + background-color: red; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/example/style.css.map b/01-HTML-CSS/05-responsiveness/example/style.css.map new file mode 100644 index 000000000..54baf25eb --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/example/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;ACCJ;;ADEA;EACI,kEACI;ACAR;;ADMA;EACI,eAAA;ACHJ;;ADMA;EACI,YAAA;ACHJ;;ADOA;EACI,WAAA;EACA,aAAA;ACJJ;;ADOA;EACI,sCAAA;ACJJ;;ADOA;EACI,yBAAA;EACA,cAAA;EACA,aAAA;ACJJ;;ADQI;EACI,qBAAA;EACA,SAAA;EACA,UAAA;ACLR;ADQI;EACI,YAAA;EACA,kBAAA;EACA,yBAAA;EACA,cAAA;EACA,wEAAA;ACNR;ADQQ;EACI,yBAAA;ACNZ;;ADWA;EACI,yBAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,wEAAA;ACRJ;;ADWA;EACI,yBAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;ACRJ;;ADWA,iBAAA;AAEA;EACI,UAAA;ACTJ;;ADYA;EACI,UAAA;ACTJ;;ADcA;EAEI,uBAAA;EACA;IACI,WAAA;ECZN;AACF;ADeA;EACI,UAAA;ACbJ;;ADgBA;EACI,yBAAA;EACA,wBAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;ACbJ;ADeI;EACI,cAAA;EACA,sBAAA;EACA,yBAAA;EACA,UAAA;ACbR;;ADiBA;EACI,qBAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;ACdJ;;ADqCA;EACI;IACI,qBAAA;EClCN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/Itai-G/style.css b/01-HTML-CSS/05-responsiveness/excresice1/Itai-G/style.css new file mode 100644 index 000000000..574f833f2 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/Itai-G/style.css @@ -0,0 +1,14 @@ +body { + margin: 0%; +} + +.box { + height: 50vh; + border: 15px solid green; + padding: 50px; + background-color: blue; +} +.box img { + width: 50%; + height: 50%; +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/Itai-G/style.css.map b/01-HTML-CSS/05-responsiveness/excresice1/Itai-G/style.css.map new file mode 100644 index 000000000..9d81428ca --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/Itai-G/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ;;ADCA;EACE,YAAA;EACA,wBAAA;EACA,aAAA;EACA,sBAAA;ACEF;ADDE;EACE,UAAA;EACA,WAAA;ACGJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/Vladi_Bykanov/style.css b/01-HTML-CSS/05-responsiveness/excresice1/Vladi_Bykanov/style.css new file mode 100644 index 000000000..572b5b6f9 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/Vladi_Bykanov/style.css @@ -0,0 +1,25 @@ +body { + display: flex; + width: 100vw; + height: 100vh; +} + +.container { + border: 10px solid blue; + width: 50vw; + height: 80vh; + display: grid; + grid-template-rows: 1fr 1fr; + margin: auto; +} +.container .img img { + width: 100%; + height: 100%; +} +.container .text { + padding: 1em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/Vladi_Bykanov/style.css.map b/01-HTML-CSS/05-responsiveness/excresice1/Vladi_Bykanov/style.css.map new file mode 100644 index 000000000..a11f6f305 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/Vladi_Bykanov/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,YAAA;EACA,aAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,2BAAA;EACA,YAAA;ACCJ;ADEQ;EACA,WAAA;EACA,YAAA;ACAR;ADGI;EACI,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACDR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/angela/index.css b/01-HTML-CSS/05-responsiveness/excresice1/angela/index.css new file mode 100644 index 000000000..ed694a49e --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/angela/index.css @@ -0,0 +1,22 @@ +body { + margin: 0; +} + +.container { + margin: 1rem auto; + width: 50vw; + height: 50vh; + background-color: rgb(104, 109, 192); + display: flex; + flex-flow: column; + align-items: center; +} +.container img { + height: 60%; + width: 100%; + margin-bottom: 0; +} +.container p { + margin-top: 0; + font-size: 1em; +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/angela/index.css.map b/01-HTML-CSS/05-responsiveness/excresice1/angela/index.css.map new file mode 100644 index 000000000..e7993bc2a --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/angela/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADCA;EACI,iBAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,aAAA;EACA,iBAAA;EACA,mBAAA;ACEJ;ADCI;EACI,WAAA;EACA,WAAA;EACA,gBAAA;ACCR;ADEI;EACI,aAAA;EACA,cAAA;ACAR","file":"index.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/dist/style.css b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/dist/style.css index aed13e4b1..2dd1ce5a6 100644 --- a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/dist/style.css +++ b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/dist/style.css @@ -2,14 +2,39 @@ body { margin: 0; } -.box { - width: 50vw; - height: 50vh; - background-color: aqua; - margin: auto; - border: 5px solid black; -} -.box img { - width: 50vw; - height: 25vh; +.header { + width: 100vw; + height: 150px; + display: flex; + flex-direction: row; + justify-content: space-around; + background-color: blue; +} +.header__box1 { + background-color: crimson; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} +.header__box2 { + background-color: chartreuse; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} +.header__box3 { + background-color: darkgoldenrod; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} + +@media only screen and (max-width: 600px) { + .header { + flex-direction: column-reverse; + height: 450px; + } } \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/index.html b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/index.html index 532cda24b..4b542f0b2 100644 --- a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/index.html +++ b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/index.html @@ -8,10 +8,9 @@ -
-
-

hello

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet libero nisi dolorem harum nam, molestiae voluptas sequi minima ipsam in placeat, debitis maiores. Nesciunt accusantium deleniti saepe sint in.

+
+
+
+
- \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.css b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.css new file mode 100644 index 000000000..2dd1ce5a6 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.css @@ -0,0 +1,40 @@ +body { + margin: 0; +} + +.header { + width: 100vw; + height: 150px; + display: flex; + flex-direction: row; + justify-content: space-around; + background-color: blue; +} +.header__box1 { + background-color: crimson; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} +.header__box2 { + background-color: chartreuse; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} +.header__box3 { + background-color: darkgoldenrod; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} + +@media only screen and (max-width: 600px) { + .header { + flex-direction: column-reverse; + height: 450px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.scss b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.scss index 343d4fe3c..564902a00 100644 --- a/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.scss +++ b/01-HTML-CSS/05-responsiveness/excresice1/aviva elias/style.scss @@ -2,14 +2,40 @@ body { margin: 0; } - .box{ - width: 50vw; - height: 50vh; - background-color: aqua; - margin: auto; - border: 5px solid black; - img{ - width: 50vw; - height: 25vh; + .header{ + width: 100vw; + height: 150px; + display: flex; + flex-direction: row; + justify-content: space-around; + background-color: blue; +&__box1{ + background-color: crimson; + height: 45px; + width: 150px; + top: 15px; + position: relative; +} + &__box2{ + background-color: chartreuse; + height: 45px; + width: 150px; + top: 15px; + position: relative; } + &__box3{ + background-color: darkgoldenrod; + height:45px; + width: 150px; + top: 15px; + position: relative; +} } + @media only screen and(max-width: 600px){ + .header{ + +flex-direction:column-reverse; +height: 450px; + + } + } \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/noa-meillet/style.css b/01-HTML-CSS/05-responsiveness/excresice1/noa-meillet/style.css new file mode 100644 index 000000000..23aaaadcd --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/noa-meillet/style.css @@ -0,0 +1,15 @@ +body { + margin: 0; +} + +.box { + border: 2px solid black; + width: 50vw; + height: 50vh; + margin: auto; + background-color: coral; +} +.box img { + width: 100%; + height: 50%; +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/noa-meillet/style.css.map b/01-HTML-CSS/05-responsiveness/excresice1/noa-meillet/style.css.map new file mode 100644 index 000000000..11b3e596b --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACCJ;ADCI;EACI,WAAA;EACA,WAAA;ACCR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/tomer-cohen/style.css b/01-HTML-CSS/05-responsiveness/excresice1/tomer-cohen/style.css new file mode 100644 index 000000000..8636e57bc --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/tomer-cohen/style.css @@ -0,0 +1,42 @@ +body { + margin: 0; +} + +.bar { + background-color: red; + width: 100vw; + height: 10vh; + display: flex; + justify-content: space-around; +} +.bar__box { + background-color: aqua; + width: 10vw; + height: 10vh; + border: none; +} +.bar__box:hover { + cursor: pointer; +} + +@media only screen and (max-width: 700px) { + body { + position: relative; + } + .bar { + position: absolute; + display: flex; + justify-content: space-around; + flex-direction: column-reverse; + background-color: red; + height: 40vh; + width: 10vw; + top: 400px; + left: 100px; + } + .bar__box { + background-color: aqua; + width: 10vw; + height: 5vh; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/excresice1/tomer-cohen/style.css.map b/01-HTML-CSS/05-responsiveness/excresice1/tomer-cohen/style.css.map new file mode 100644 index 000000000..4b56974f4 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/excresice1/tomer-cohen/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;ACCF;;ADCA;EACE,qBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,6BAAA;ACEF;ADAE;EACE,sBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;ACEJ;ADDI;EACI,eAAA;ACGR;;ADCA;EACI;IACI,kBAAA;ECEN;EDCA;IACE,kBAAA;IACA,aAAA;IACA,6BAAA;IACA,8BAAA;IACA,qBAAA;IACA,YAAA;IACA,WAAA;IACA,UAAA;IACA,WAAA;ECCF;EDAE;IACE,sBAAA;IACA,WAAA;IACA,WAAA;ECEJ;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/Itai-g/style.css b/01-HTML-CSS/05-responsiveness/task2/Itai-g/style.css new file mode 100644 index 000000000..8350ed7ab --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/Itai-g/style.css @@ -0,0 +1,22 @@ +body { + margin: 0%; +} + +.bar { + width: 100%; + height: 30px; + display: flex; + justify-content: space-around; + background-color: yellow; +} + +@media only screen and (max-width: 800px) { + .bar { + display: flex; + flex-direction: column; + position: absolute; + bottom: 0px; + height: 10%; + background-color: red; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/Itai-g/style.css.map b/01-HTML-CSS/05-responsiveness/task2/Itai-g/style.css.map new file mode 100644 index 000000000..1e5832403 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/Itai-g/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ;;ADCA;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,6BAAA;EACA,wBAAA;ACEJ;;ADCA;EACI;IACG,aAAA;IACA,sBAAA;IACA,kBAAA;IACA,WAAA;IACA,WAAA;IACA,qBAAA;ECEL;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/Itay-Amosi/style.css b/01-HTML-CSS/05-responsiveness/task2/Itay-Amosi/style.css new file mode 100644 index 000000000..eedb5a4c1 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/Itay-Amosi/style.css @@ -0,0 +1,85 @@ +body { + position: relative; + height: 100vh; +} + +.card { + width: 90vw; + height: 20vh; + border: 3px solid black; + margin-left: 20px; + background-color: brown; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 5px; + padding-right: 5px; +} + +.box1 { + width: 50px; + height: 50px; + background-color: rgb(26, 0, 128); +} +.box1:hover { + cursor: pointer; +} + +.box2 { + width: 50px; + height: 50px; + background-color: green; +} +.box2:hover { + cursor: pointer; +} + +.box3 { + width: 50px; + height: 50px; + background-color: rgb(206, 251, 8); +} +.box3:hover { + cursor: pointer; +} + +@media only screen and (max-width: 600px) { + .card { + width: 50vw; + position: absolute; + bottom: 15px; + height: 30vh; + border: 3px solid black; + margin-left: 20px; + background-color: rgb(219, 48, 216); + display: flex; + flex-direction: column; + align-items: center; + padding-left: 5px; + padding-right: 5px; + } + .box1 { + width: 50px; + height: 50px; + background-color: rgb(26, 0, 128); + } + .box1:hover { + cursor: pointer; + } + .box2 { + width: 50px; + height: 50px; + background-color: green; + } + .box2:hover { + cursor: pointer; + } + .box3 { + width: 50px; + height: 50px; + background-color: rgb(206, 251, 8); + } + .box3:hover { + cursor: pointer; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/Itay-Amosi/style.css.map b/01-HTML-CSS/05-responsiveness/task2/Itay-Amosi/style.css.map new file mode 100644 index 000000000..9edbec4dd --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/Itay-Amosi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACA,kBAAA;EACA,aAAA;ACCA;;ADCA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,iBAAA;EACA,uBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACEA;;ADEA;EACI,WAAA;EACA,YAAA;EAEA,iCAAA;ACAJ;ADCI;EACI,eAAA;ACCR;;ADGA;EACI,WAAA;EACA,YAAA;EAEA,uBAAA;ACDJ;ADEI;EACI,eAAA;ACAR;;ADIA;EACI,WAAA;EACA,YAAA;EAEA,kCAAA;ACFJ;ADGI;EACI,eAAA;ACDR;;ADKA;EACI;IACI,WAAA;IACA,kBAAA;IACA,YAAA;IACA,YAAA;IACA,uBAAA;IACA,iBAAA;IACA,mCAAA;IACA,aAAA;IACA,sBAAA;IACA,mBAAA;IACA,iBAAA;IACA,kBAAA;ECFN;EDOE;IACI,WAAA;IACA,YAAA;IAEA,iCAAA;ECNN;EDOM;IACI,eAAA;ECLV;EDSE;IACI,WAAA;IACA,YAAA;IAEA,uBAAA;ECRN;EDSM;IACI,eAAA;ECPV;EDWE;IACI,WAAA;IACA,YAAA;IAEA,kCAAA;ECVN;EDWM;IACI,eAAA;ECTV;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/Vladi_Bykanov/style.css b/01-HTML-CSS/05-responsiveness/task2/Vladi_Bykanov/style.css new file mode 100644 index 000000000..6355f4ebc --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/Vladi_Bykanov/style.css @@ -0,0 +1,53 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + border: 5px solid blue; + padding: 3em; + width: 100vw; + height: 100vh; + display: flex; +} + +.nav { + background-color: black; + padding: 2em; + width: 800px; + height: 100px; + margin: 0 auto; + display: flex; + justify-content: space-around; + align-items: center; +} +.nav button { + width: 100px; + height: 50px; + background-color: darkcyan; +} +.nav button:nth-child(2) { + background-color: darkgreen; +} +.nav button:last-child { + background-color: darkmagenta; +} +.nav button:hover { + cursor: pointer; +} + +@media screen and (max-width: 800px) { + body { + justify-content: flex-start; + align-items: flex-end; + } + body .nav { + flex-direction: column; + align-items: center; + height: 600px; + width: 200px; + padding: 1em; + margin: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/Vladi_Bykanov/style.css.map b/01-HTML-CSS/05-responsiveness/task2/Vladi_Bykanov/style.css.map new file mode 100644 index 000000000..b169d146c --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/Vladi_Bykanov/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,sBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,aAAA;EACA,6BAAA;EACA,mBAAA;ACCJ;ADAI;EACI,YAAA;EACA,YAAA;EACA,0BAAA;ACER;ADAI;EACI,2BAAA;ACER;ADAI;EACI,6BAAA;ACER;ADAI;EACI,eAAA;ACER;;ADGA;EACI;IACI,2BAAA;IACA,qBAAA;ECAN;EDCM;IACI,sBAAA;IACA,mBAAA;IACA,aAAA;IACA,YAAA;IACA,YAAA;IACA,SAAA;ECCV;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/angela/media.css b/01-HTML-CSS/05-responsiveness/task2/angela/media.css new file mode 100644 index 000000000..1ea86143e --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/angela/media.css @@ -0,0 +1,56 @@ +body { + margin: 0; +} + +.container { + background-color: cadetblue; + width: 100vw; + height: 20vh; + display: flex; + align-items: center; + justify-content: center; + justify-content: space-evenly; +} +.container__item1 { + background-color: black; + height: 50%; + width: 20%; +} +.container__item2 { + background-color: rgb(49, 103, 173); + height: 50%; + width: 20%; +} +.container__item3 { + background-color: rgb(57, 194, 96); + height: 50%; + width: 20%; +} + +@media only screen and (max-width: 800px) { + .container { + background-color: cadetblue; + width: 100vw; + height: 20vh; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + justify-content: space-evenly; + } + .container__item1 { + background-color: black; + height: 20%; + width: 20%; + } + .container__item2 { + background-color: rgb(49, 103, 173); + height: 20%; + width: 20%; + } + .container__item3 { + background-color: rgb(57, 194, 96); + height: 20%; + width: 20%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/angela/media.css.map b/01-HTML-CSS/05-responsiveness/task2/angela/media.css.map new file mode 100644 index 000000000..473b5b1bf --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/angela/media.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["media.scss","media.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,2BAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,6BAAA;ACCJ;ADAI;EACI,uBAAA;EACA,WAAA;EACA,UAAA;ACER;ADAI;EACI,mCAAA;EACA,WAAA;EACA,UAAA;ACER;ADAI;EACI,kCAAA;EACA,WAAA;EACA,UAAA;ACER;;ADEA;EACI;IACI,2BAAA;IACJ,YAAA;IACA,YAAA;IACA,aAAA;IACA,iBAAA;IACA,mBAAA;IACA,uBAAA;IACA,6BAAA;ECCF;EDCE;IACI,uBAAA;IACA,WAAA;IACA,UAAA;ECCN;EDCE;IACI,mCAAA;IACA,WAAA;IACA,UAAA;ECCN;EDCE;IACI,kCAAA;IACA,WAAA;IACA,UAAA;ECCN;AACF","file":"media.css"} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/aviva elias/dist/style.css b/01-HTML-CSS/05-responsiveness/task2/aviva elias/dist/style.css new file mode 100644 index 000000000..59619d5f9 --- /dev/null +++ b/01-HTML-CSS/05-responsiveness/task2/aviva elias/dist/style.css @@ -0,0 +1,50 @@ +body { + margin: 0; +} + +.news { + height: 50vh; + width: 50vw; + margin: auto; + top: 150px; + position: relative; + background-color: antiquewhite; + display: flex; + flex-direction: column; +} +.news img { + width: 100%; + height: 50%; +} +.news__text { + width: 100%; + height: 50%; + display: flex; + flex-direction: column; + text-align: center; +} +.news__text h1 { + margin-bottom: 0px; + position: relative; +} + +@media only screen and (max-width: 600px) { + .news { + background-color: #053a28; + } + .news h1 { + color: brown; + } + .news img { + height: 100%; + width: 100%; + } + .news__text { + display: none; + } +} +@media only screen and (min-width: 800px) { + .news { + background-color: aqua; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/05-responsiveness/task2/aviva elias/index.html b/01-HTML-CSS/05-responsiveness/task2/aviva elias/index.html index e8393d4d9..41b08da2f 100644 --- a/01-HTML-CSS/05-responsiveness/task2/aviva elias/index.html +++ b/01-HTML-CSS/05-responsiveness/task2/aviva elias/index.html @@ -5,12 +5,14 @@ aviva - + -
-
-
-
+
+ +
+

hello people

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi, assumenda!

+
- \ No newline at end of file + + + + + + + + pacman + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Amit/pacman.scss b/01-HTML-CSS/06-animations/HW/Amit/pacman.scss new file mode 100644 index 000000000..e01ebafc7 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Amit/pacman.scss @@ -0,0 +1,346 @@ +body{ +margin:0; +width: vw; +height: vh; +} + + +.maze{ + background-image: url("https://www.grid-paint.com/images/png/5099824051388416.png"); + background-size: cover; + border: 1em solid #333; + width: 45em; + height: 45em; +} + +.pacman{ + background: rgb(0, 0, 0); + border-radius: 2em; + width:2em; + height: 2em; + margin: 0%; + position: relative; + top: 2.5em; + left: 2.5em; + z-index: 1; + display: block; + animation: + bite 0.4s linear infinite, + slide_right_1 1s linear 1, + turn_downwards_1 0.1s linear 0.9s 1, + slide_down_1 5s linear 0.9s 1, + slide_right_2 1s linear 5.9s 1, + turn_downwards_2 0.1s linear 6.9s 1, + slide_down_2 1s linear 6.9s, + slide_right_3 1s linear 7.9s 1, + disappear 4s linear 8.3s 1; +} + + +@keyframes bite{ + 0%{background-image: + linear-gradient(220deg, transparent 50%, yellow 50%), + linear-gradient(140deg, yellow 50%, transparent 50%);} + 50%{background-image: + linear-gradient(200deg, transparent 50%, yellow 50%), + linear-gradient(160deg, yellow 50%, transparent 50%);} + 100%{background-image: + linear-gradient(180deg, transparent 50%, yellow 50%), + linear-gradient(180deg, yellow 50%, transparent 50%);} +} + +@keyframes slide_right_1{ + 0%{ top: 2.5em; + left: 2.5em; + } + 99%{top: 2.5em; + left: 9.7em; + } + 100%{top: 2.5em; + left: 9.7em; + } +} + +@keyframes turn_downwards_1{ + 100% { + transform: rotate(90deg); + } +} + +@keyframes slide_down_1{ + 0%{ top: 2.5em; + left: 9.7em; + transform: rotate(90deg);} + 99%{top: 31em; + left: 9.7em; + transform: rotate(90deg);} + 100%{top: 31em; + left: 9.7em; + } +} + +@keyframes slide_right_2{ + 0%{ top: 31em; + left: 9.7em; + } + 99%{top: 31em; + left: 19em; + } + 100%{top: 31em; + left: 19em; + } +} + +@keyframes turn_downwards_2{ + 100% { + transform: rotate(90deg); + } +} + +@keyframes slide_down_2{ + 0%{ top: 31em; + left: 19em; + transform: rotate(90deg);} + 99%{top: 35.7em; + left: 19em; + transform: rotate(90deg);} + 100%{top: 35.7em; + left: 19em;} +} + +@keyframes slide_right_3{ + 0%{ top: 35.7em; + left: 19em; + } + 99%{top: 35.7em; + left: 32em; + } + 100%{top: 35.7em; + left: 32em; + } +} + +@keyframes disappear{ + 0%{ top: 35.7em; + left: 25em; + opacity: 1; + } + 30%{top: 35.7em; + left: 25em; + opacity: 0.5; + } + 60%{top: 35.7em; + left: 25em; + opacity: 0; + } + 100%{top: 35.7em; + left: 25em; + opacity: 0; + } +} + + +.ghost_1{ + background-image: url("http://www.clipartbest.com/cliparts/dT6/ayB/dT6ayBxpc.png"); + background-repeat: no-repeat; + background-size: contain; + width: 2em; + height: 2em; + margin: 0%; + position: relative; + z-index: 1; + display: block; + animation: ghost_1 1.5s linear infinite; +} + + @keyframes ghost_1{ + 0%{top: 33.7em; + left: 32em;} + 50%{top: 33.7em; + left: 25em;} + 100%{top: 33.7em; + left: 32em;} + } + +.ghost_2{ + background-image: url("http://www.clipartbest.com/cliparts/dT6/ayB/dT6ayBxpc.png"); + background-repeat: no-repeat; + background-size: contain; + width: 2em; + height: 2em; + margin: 0%; + position: relative; + bottom: 1.5em; + left: 19em; + z-index: 1; + display: block; + animation: ghost_2 10s linear 1; +} + + @keyframes ghost_2{ + 0%{bottom: 1.5em; + left: 19em;} + 15%{bottom: 1.5em; + left: 9.5em;} + 65%{bottom: -27em; + left: 9.5em;} + 80%{bottom: -27em; + left: 19em;} + 85%{bottom: -30em; + left: 19em;} + 100%{bottom: -30em; + left: 19em;} + } + +.food_array{ + position: relative; + bottom: 4em; + right: -2em; + height: 40em; + width: 40em; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + + .food{ + background: rgb(255, 255, 255); + border-radius: 0.5em; + width:0.5em; + height: 0.5em; + margin: 1.1em 0.8em 1em 0.6em; + z-index: 1; + } + + .no_food{ + opacity: 0; + } + + .gone_1{ + animation: eat 0s linear 0.1s 1; + animation-fill-mode: forwards; + } + .gone_2{ + animation: eat 0s linear 0.4s 1; + animation-fill-mode: forwards; + } + .gone_3{ + animation: eat 0s linear 0.6s 1; + animation-fill-mode: forwards; + } + .gone_4{ + animation: eat 0s linear 1s 1; + animation-fill-mode: forwards; + } + .gone_5{ + animation: eat 0s linear 1.4s 1; + animation-fill-mode: forwards; + } + .gone_6{ + animation: eat 0s linear 1.8s 1; + animation-fill-mode: forwards; + } + .gone_7{ + animation: eat 0s linear 2.2s 1; + animation-fill-mode: forwards; + } + .gone_8{ + animation: eat 0s linear 2.6s 1; + animation-fill-mode: forwards; + } + .gone_9{ + animation: eat 0s linear 3s 1; + animation-fill-mode: forwards; + } + .gone_10{ + animation: eat 0s linear 3.4s 1; + animation-fill-mode: forwards; + } + .gone_11{ + animation: eat 0s linear 3.8s 1; + animation-fill-mode: forwards; + } + .gone_12{ + animation: eat 0s linear 4.2s 1; + animation-fill-mode: forwards; + } + .gone_13{ + animation: eat 0s linear 4.6s 1; + animation-fill-mode: forwards; + } + .gone_14{ + animation: eat 0s linear 5s 1; + animation-fill-mode: forwards; + } + .gone_15{ + animation: eat 0s linear 5.4s 1; + animation-fill-mode: forwards; + } + .gone_16{ + animation: eat 0s linear 6s 1; + animation-fill-mode: forwards; + } + .gone_17{ + animation: eat 0s linear 6.2s 1; + animation-fill-mode: forwards; + } + .gone_18{ + animation: eat 0s linear 6.4s 1; + animation-fill-mode: forwards; + } + .gone_19{ + animation: eat 0s linear 6.6s 1; + animation-fill-mode: forwards; + } + .gone_20{ + animation: eat 0s linear 6.8s 1; + animation-fill-mode: forwards; + } + .gone_21{ + animation: eat 0s linear 7.4s 1; + animation-fill-mode: forwards; + } + .gone_22{ + animation: eat 0s linear 7.8s 1; + animation-fill-mode: forwards; + } + .gone_23{ + animation: eat 0s linear 8s 1; + animation-fill-mode: forwards; + } + .gone_24{ + animation: eat 0s linear 8.2s 1; + animation-fill-mode: forwards; + } + .gone_25{ + animation: eat 0s linear 8.4s 1; + animation-fill-mode: forwards; + } + + @keyframes eat{ + 100%{opacity: 0;} + } + +} + .game_over{ + background-image: url("https://media.istockphoto.com/id/1325433246/video/game-over-text-animation-with-alpha-channel-4k.jpg?s=640x640&k=20&c=aZM_cNmjuXVVkLm12evzXTU0qFhAu3Vh2_2W_h-eq3c="); + background-size: cover; + width: 42em; + height: 20em; + opacity: 0; + animation: game_over 20s linear 10s 1; + position: relative; + top: -45em; + left: 1.5em; + z-index: 1; + } + + @keyframes game_over{ + 0%{opacity: 0;} + 5%{opacity: 1;} + 100%{opacity: 1;} + } + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/dist/style.css b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/dist/style.css new file mode 100644 index 000000000..dde98fe9c --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/dist/style.css @@ -0,0 +1,232 @@ +@charset "UTF-8"; +body { + margin: 0; + padding: 0; + background: #00d5ff; + min-width: 100vh; +} + +.wrapper { + margin: 4000px 0 0 4000px; + display: flex; + flex-direction: row; + padding-top: 100px; + margin: 0 auto; +} +.wrapper__img1 { + margin: 10px; + /* סוג האנימציה */ + animation-name: img; + /* כמה זמן להריץ אץ האנימציה */ + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + /* סוג אפקט מעבר */ + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + border-radius: 100%; +} +.wrapper__img2 { + margin: 10px; + animation-name: img; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} +.wrapper__img3 { + margin: 10px; + animation-name: img; + animation-duration: 5s; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} +.wrapper__img4 { + margin: 10px; + animation-duration: 2s; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-name: img; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} +.wrapper__img5 { + margin: 10px; + animation-name: bimg; + animation-duration: 5s; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} + +@keyframes img { + 0% { + top: 0px; + } + 50% { + top: 180px; + } + 100% { + top: 0px; + } + 80% { + top: 100px; + } + 100% { + top: 0px; + } +} +.wrapper2 { + margin: 4000px 0 0 4000px; + display: flex; + flex-direction: row; + padding-top: 100px; + margin: 0 auto; +} +.wrapper2__round1 { + margin: 10px; + /* סוג האנימציה */ + animation-name: ball; + /* כמה זמן להריץ אץ האנימציה */ + animation-duration: 10s; + animation-duration: 3s; + /* סוג אפקט מעבר */ + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + animation-name: ball; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; +} +.wrapper2__round2 { + margin: 10px; + animation-name: ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; +} +.wrapper2__round3 { + margin: 10px; + animation-name: ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + animation-duration: 1s; + animation-duration: 5s; +} +.wrapper2__round4 { + margin: 10px; + animation-duration: 2s; + animation-name: ball; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; +} +.wrapper2__round5 { + margin: 10px; + animation-name: ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 100s; + will-change: transform; +} +.wrapper2__round6 { + margin: 10px; + animation-name: ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 100s; + will-change: transform; +} +.wrapper2__round7 { + margin: 10px; + animation-name: ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 100s; + will-change: transform; +} + +@keyframes ball { + 0% { + background-color: white; + left: 0px; + righttop: 10px; + } + 25% { + background-color: white; + bottom: 200px; + top: 0px; + } + 50% { + background-color: white; + left: 200px; + top: 200px; + } + 75% { + background-color: white; + left: 0px; + top: 200px; + } + 100% { + background-color: white; + right: 0px; + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/index.html b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/index.html new file mode 100644 index 000000000..65022668e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/index.html @@ -0,0 +1,51 @@ + + + + + + + Document + + + +
+
1 +
מכשפה
+
+
2 +
מכשפה
+
+
3 +
מכשפה
+
+ +
4 +
מכשפה
+
+
5 +
מכשפה
+
+ + +
+ +
+
+
מכשפה
+
+
מכשפה
+
+
מכשפה
+
+
מכשפה
+ '
+
מכשפה
+
+
מכשפה
+
+
+
+ + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.css b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.css new file mode 100644 index 000000000..1154c1a7c --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.css @@ -0,0 +1,322 @@ +@charset "UTF-8"; +body { + margin: 0; + padding: 0; + background: rgb(0, 213, 255); + min-width: 100vh; +} + +.wrapper { + margin: 4000px 0 0 4000px; + display: flex; + flex-direction: row; + padding-top: 100px; + margin: 0 auto; +} +.wrapper__img1 { + margin: 10px; + /* סוג האנימציה */ + -webkit-animation-name: img; + animation-name: img; + /* כמה זמן להריץ אץ האנימציה */ + -webkit-animation-iteration-count: 2; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + /* סוג אפקט מעבר */ + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + border-radius: 100%; +} +.wrapper__img2 { + margin: 10px; + -webkit-animation-name: img; + animation-name: img; + -webkit-animation-iteration-count: 2; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} +.wrapper__img3 { + margin: 10px; + -webkit-animation-name: img; + animation-name: img; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: 2; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} +.wrapper__img4 { + margin: 10px; + animation-duration: 2s; + -webkit-animation-iteration-count: 2; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + -webkit-animation-name: img; + animation-name: img; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; +} +.wrapper__img5 { + margin: 10px; + -webkit-animation-name: bimg; + animation-name: bimg; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: 2; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + -webkit-animation-name: img; + animation-name: img; +} + +@-webkit-keyframes img { + 0% { + top: 0px; + } + 50% { + top: 180px; + } + 100% { + top: 0px; + } + 80% { + top: 100px; + } + 100% { + top: 0px; + } +} + +@keyframes img { + 0% { + top: 0px; + } + 50% { + top: 180px; + } + 100% { + top: 0px; + } + 80% { + top: 100px; + } + 100% { + top: 0px; + } +} +.wrapper2 { + margin: 4000px 0 0 4000px; + display: flex; + flex-direction: row; + padding-top: 100px; + margin: 0 auto; +} +.wrapper2__round1 { + margin: 10px; + /* סוג האנימציה */ + -webkit-animation-name: ball; + animation-name: ball; + /* כמה זמן להריץ אץ האנימציה */ + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-duration: 3s; + animation-duration: 3s; + /* סוג אפקט מעבר */ + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + animation-name: ball; + width: 300px; + height: 300px; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; +} +.wrapper2__round2 { + margin: 10px; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; +} +.wrapper2__round3 { + margin: 10px; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 1s; + animation-duration: 1s; + animation-duration: 5s; +} +.wrapper2__round4 { + margin: 10px; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; +} +.wrapper2__round5 { + margin: 10px; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 100s; + will-change: transform; +} +.wrapper2__round6 { + margin: 10px; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 100s; + will-change: transform; +} +.wrapper2__round7 { + margin: 10px; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + -webkit-animation-duration: 100s; + will-change: transform; +} + +@-webkit-keyframes ball { + 0% { + background-color: white; + left: 0px; + righttop: 10px; + } + 25% { + background-color: white; + bottom: 200px; + top: 0px; + } + 50% { + background-color: white; + left: 200px; + top: 200px; + } + 75% { + background-color: white; + left: 0px; + top: 200px; + } + 100% { + background-color: white; + right: 0px; + top: 0px; + } +} + +@keyframes ball { + 0% { + background-color: white; + left: 0px; + righttop: 10px; + } + 25% { + background-color: white; + bottom: 200px; + top: 0px; + } + 50% { + background-color: white; + left: 200px; + top: 200px; + } + 75% { + background-color: white; + left: 0px; + top: 200px; + } + 100% { + background-color: white; + right: 0px; + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.css.map b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.css.map new file mode 100644 index 000000000..2f1389420 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.scss b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.scss new file mode 100644 index 000000000..25c525144 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ayala-perlovich/AP/style.scss @@ -0,0 +1,318 @@ + + +body { + margin: 0; + padding: 0; + background:rgb(0, 213, 255); + min-width: 100vh; + } + +.wrapper{ + margin: 4000px 0 0 4000px; + display: flex; + flex-direction: row; + + padding-top: 100px; + margin: 0 auto; + +&__img1{ + margin: 10px; + + /* סוג האנימציה */ + animation-name:img; + + + /* כמה זמן להריץ אץ האנימציה */ + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + + + /* סוג אפקט מעבר */ + + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + border-radius: 100%; + + + } + + + &__img2{ + margin: 10px; + + animation-name:img; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-timing-function: ease-in-out; + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + + + } + + &__img3{ + margin: 10px; + + animation-name:img; + animation-duration: 5s; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-timing-function: ease-in-out; + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + + } + &__img4{ + margin: 10px; + + animation-duration: 2s; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + + animation-name:img; + + animation-timing-function: ease-in-out; + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + + } + + &__img5{ + margin: 10px; + animation-name:bimg; + animation-duration: 5s; + animation-iteration-count: 2; + -webkit-animation-duration: 2s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: img; + + + +} +} + + + +@keyframes img { + 0% { + top:0px; + } + + 50% { + + top: 180px; + } + 100% { + top:0px; + } + + 80% { + top:100px; +} +100% { + top:0px; +} + + + + +} + + + + + +.wrapper2{ + margin: 4000px 0 0 4000px; + display: flex; + flex-direction: row; + + padding-top: 100px; + margin: 0 auto; + +&__round1{ + margin: 10px; + + /* סוג האנימציה */ + animation-name:ball; + + + /* כמה זמן להריץ אץ האנימציה */ + + animation-duration: 10s; + animation-duration: 3s; + + + /* סוג אפקט מעבר */ + + animation-timing-function: ease-in-out; + + + + border-radius: 100px; + position: relative; + + animation-name: ball; + width: 300px; + height: 300px; + animation-name:ball; + animation-duration: 5s; + + } + + + + + + + + + + + + + + + + + &__round2{ + margin: 10px; + + animation-name:ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + + } + + &__round3{ + margin: 10px; + animation-name:ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + animation-duration: 1s; + animation-duration: 5s; + } + &__round4{ + margin: 10px; + + animation-duration: 2s; + + animation-name:ball; + + animation-timing-function: ease-in-out; + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + } + + &__round5{ + margin: 10px; + animation-name:ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + + + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + + -webkit-animation-duration: 100s; + will-change: transform; + + + +} +&__round6{ + margin: 10px; + animation-name:ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + + -webkit-animation-duration: 100s; + will-change: transform; +} + + + +&__round7{ + margin: 10px; + animation-name:ball; + animation-duration: 5s; + animation-timing-function: ease-in-out; + border-radius: 100px; + position: relative; + width: 300px; + height: 300px; + animation-name: ball; + animation-duration: 5s; + + -webkit-animation-duration: 100s; + will-change: transform; + + + + + +} +} + + +@keyframes ball { + + + 0% {background-color:white; left:0px; righttop:10px;} + 25% {background-color:white; bottom:200px; top:0px;} + 50% {background-color:white; left:200px; top:200px;} + 75% {background-color:white; left:0px; top:200px;} + 100% {background-color:white; right:0px; top:0px;} + +} + + diff --git a/01-HTML-CSS/06-animations/HW/Itai-G/dist/style.css b/01-HTML-CSS/06-animations/HW/Itai-G/dist/style.css new file mode 100644 index 000000000..463a1034f --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itai-G/dist/style.css @@ -0,0 +1,140 @@ +body { + margin: 0; + overflow: hidden; +} + +.container { + width: 100vw; + height: 100vw; + display: flex; +} +.container img { + height: 620px; + width: 620px; + position: absolute; +} +.container__pacman { + width: 0px; + height: 0px; + border: 20px solid #f7ed59; + border-right-color: transparent; + border-radius: 30px; + position: relative; + animation-name: slide; + animation-timing-function: ease-in-out; + animation-fill-mode: none; + animation-duration: 6s; + animation-iteration-count: infinite; +} +.container__ghost { + position: relative; + width: 30px; + background: LightPink; + height: 30px; + border-top-right-radius: 100px; + border-top-left-radius: 100px; + transform: translate(0px, 10px); + top: 0px; + animation-name: bounce; + animation-fill-mode: forwards; + animation-timing-function: ease; + animation-fill-mode: none; + animation-duration: 12s; + animation-iteration-count: infinite; +} +.container__logo img { + bottom: -199px; +} + +@keyframes slide { + 0% { + top: 60px; + left: 30px; + } + 15% { + top: 80px; + left: 40px; + } + 25% { + top: 80px; + left: 70px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 80px; + left: 120px; + } + 55% { + top: 270px; + left: 120px; + } + 65% { + top: 270px; + left: 200px; + } + 75% { + top: 200px; + left: 200px; + } + 85% { + top: 200px; + left: 400px; + } + 95% { + top: 260px; + left: 400px; + } + 100% { + top: 260px; + left: 622px; + } +} +@keyframes bounce { + 0% { + top: 0px; + left: 20px; + } + 15% { + top: 20px; + left: 88px; + } + 25% { + top: 20px; + left: 95px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 200px; + left: 90px; + } + 55% { + top: 320px; + left: 90px; + } + 65% { + top: 70px; + left: 100px; + } + 75% { + top: 80px; + left: 520px; + } + 85% { + top: 20px; + left: 520px; + } + 95% { + top: 20px; + left: 287px; + } + 100% { + top: 80px; + left: 288px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itai-G/index.html b/01-HTML-CSS/06-animations/HW/Itai-G/index.html new file mode 100644 index 000000000..b288f483d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itai-G/index.html @@ -0,0 +1,18 @@ + + + + + + + Pacman Animation + + + +
+ +
+
+ +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itai-G/style.css b/01-HTML-CSS/06-animations/HW/Itai-G/style.css new file mode 100644 index 000000000..db6bb0558 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itai-G/style.css @@ -0,0 +1,244 @@ +body { + margin: 0; + overflow: hidden; +} + +.container { + width: 100vw; + height: 100vw; + display: flex; +} +.container img { + height: 620px; + width: 620px; + position: absolute; +} +.container__pacman { + width: 0px; + height: 0px; + border: 20px solid #f7ed59; + border-right-color: transparent; + border-radius: 30px; + position: relative; + -webkit-animation-name: slide; + animation-name: slide; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: none; + animation-fill-mode: none; + -webkit-animation-duration: 6s; + animation-duration: 6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.container__ghost { + position: relative; + width: 30px; + background: LightPink; + height: 30px; + border-top-right-radius: 100px; + border-top-left-radius: 100px; + transform: translate(0px, 10px); + top: 0px; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-fill-mode: none; + animation-fill-mode: none; + -webkit-animation-duration: 12s; + animation-duration: 12s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.container__logo img { + bottom: -199px; +} + +@-webkit-keyframes slide { + 0% { + top: 60px; + left: 30px; + } + 15% { + top: 80px; + left: 40px; + } + 25% { + top: 80px; + left: 70px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 80px; + left: 120px; + } + 55% { + top: 270px; + left: 120px; + } + 65% { + top: 270px; + left: 200px; + } + 75% { + top: 200px; + left: 200px; + } + 85% { + top: 200px; + left: 400px; + } + 95% { + top: 260px; + left: 400px; + } + 100% { + top: 260px; + left: 622px; + } +} + +@keyframes slide { + 0% { + top: 60px; + left: 30px; + } + 15% { + top: 80px; + left: 40px; + } + 25% { + top: 80px; + left: 70px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 80px; + left: 120px; + } + 55% { + top: 270px; + left: 120px; + } + 65% { + top: 270px; + left: 200px; + } + 75% { + top: 200px; + left: 200px; + } + 85% { + top: 200px; + left: 400px; + } + 95% { + top: 260px; + left: 400px; + } + 100% { + top: 260px; + left: 622px; + } +} +@-webkit-keyframes bounce { + 0% { + top: 0px; + left: 20px; + } + 15% { + top: 20px; + left: 88px; + } + 25% { + top: 20px; + left: 95px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 200px; + left: 90px; + } + 55% { + top: 320px; + left: 90px; + } + 65% { + top: 70px; + left: 100px; + } + 75% { + top: 80px; + left: 520px; + } + 85% { + top: 20px; + left: 520px; + } + 95% { + top: 20px; + left: 287px; + } + 100% { + top: 80px; + left: 288px; + } +} +@keyframes bounce { + 0% { + top: 0px; + left: 20px; + } + 15% { + top: 20px; + left: 88px; + } + 25% { + top: 20px; + left: 95px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 200px; + left: 90px; + } + 55% { + top: 320px; + left: 90px; + } + 65% { + top: 70px; + left: 100px; + } + 75% { + top: 80px; + left: 520px; + } + 85% { + top: 20px; + left: 520px; + } + 95% { + top: 20px; + left: 287px; + } + 100% { + top: 80px; + left: 288px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itai-G/style.css.map b/01-HTML-CSS/06-animations/HW/Itai-G/style.css.map new file mode 100644 index 000000000..61e218d29 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itai-G/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,gBAAA;ACCF;;ADCA;EACE,YAAA;EACA,aAAA;EACA,aAAA;ACEF;ADDE;EACE,aAAA;EACA,YAAA;EACA,kBAAA;ACGJ;ADDE;EACE,UAAA;EACA,WAAA;EACA,0BAAA;EACA,+BAAA;EACA,mBAAA;EACA,kBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8CAAA;UAAA,sCAAA;EACA,iCAAA;UAAA,yBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;ACGJ;ADDE;EACE,kBAAA;EACA,WAAA;EACA,qBAAA;EACA,YAAA;EACA,8BAAA;EACA,6BAAA;EACA,+BAAA;EACA,QAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,uCAAA;UAAA,+BAAA;EACA,iCAAA;UAAA,yBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,2CAAA;UAAA,mCAAA;ACGJ;ADDE;EACE,cAAA;ACGJ;;ADCA;EACE;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;AACF;;AD9CA;EACE;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,UAAA;ECEF;EDAA;IACE,SAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;EDAA;IACE,UAAA;IACA,WAAA;ECEF;AACF;ADCA;EACE;IACE,QAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,UAAA;ECCF;EDCA;IACE,UAAA;IACA,UAAA;ECCF;EDCA;IACE,UAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;AACF;AD7CA;EACE;IACE,QAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,UAAA;ECCF;EDCA;IACE,UAAA;IACA,UAAA;ECCF;EDCA;IACE,UAAA;IACA,UAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;EDCA;IACE,SAAA;IACA,WAAA;ECCF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itai-G/style.scss b/01-HTML-CSS/06-animations/HW/Itai-G/style.scss new file mode 100644 index 000000000..fbcb61d5e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itai-G/style.scss @@ -0,0 +1,140 @@ +body { + margin: 0; + overflow: hidden; +} +.container { + width: 100vw; + height: 100vw; + display: flex; + img { + height: 620px; + width: 620px; + position: absolute; + } + &__pacman { + width: 0px; + height: 0px; + border: 20px solid #f7ed59; + border-right-color: transparent; + border-radius: 30px; + position: relative; + animation-name: slide; + animation-timing-function: ease-in-out; + animation-fill-mode: none; + animation-duration: 6s; + animation-iteration-count: infinite; + } + &__ghost { + position: relative; + width: 30px; + background: LightPink; + height: 30px; + border-top-right-radius: 100px; + border-top-left-radius: 100px; + transform: translate(00px, 10px); + top: 0px; + animation-name: bounce; + animation-fill-mode: forwards; + animation-timing-function: ease; + animation-fill-mode: none; + animation-duration: 12s; + animation-iteration-count: infinite; + } + &__logo img { + bottom: -199px; + } +} + +@keyframes slide { + 0% { + top: 60px; + left: 30px; + } + 15% { + top: 80px; + left: 40px; + } + 25% { + top: 80px; + left: 70px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 80px; + left: 120px; + } + 55% { + top: 270px; + left: 120px; + } + 65% { + top: 270px; + left: 200px; + } + 75% { + top: 200px; + left: 200px; + } + 85% { + top: 200px; + left: 400px; + } + 95% { + top: 260px; + left: 400px; + } + 100% { + top: 260px; + left: 622px; + } +} + +@keyframes bounce { + 0% { + top: 0px; + left: 20px; + } + 15% { + top: 20px; + left: 88px; + } + 25% { + top: 20px; + left: 95px; + } + 35% { + top: 80px; + left: 90px; + } + 45% { + top: 200px; + left: 90px; + } + 55% { + top: 320px; + left: 90px; + } + 65% { + top: 70px; + left: 100px; + } + 75% { + top: 80px; + left: 520px; + } + 85%{ + top: 20px; + left: 520px; + } + 95%{ + top: 20px; + left: 287px; + } + 100%{ + top: 80px; + left: 288px; + } +} diff --git a/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/dist/style.css b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/dist/style.css new file mode 100644 index 000000000..bfb50b8c4 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/dist/style.css @@ -0,0 +1,299 @@ +body { + background: black; + padding: 0; + margin: 0%; + display: flex; + height: 100vh; + justify-content: center; + align-items: center; +} + +.container { + width: 45%; + height: 95%; + border: 1px solid white; + background-image: url(https://i.stack.imgur.com/lnC4o.png); + background-repeat: no-repeat; + background-size: cover; +} +.container__pacman { + width: 25px; + height: 25px; + border-radius: 50%; + background: yellow; + position: relative; + margin-top: 43%; + margin-left: 48%; + animation-name: movement; + animation-duration: 8s; +} +.container__pacman__eye { + position: absolute; + width: 5px; + height: 3px; + border-radius: 50%; + top: 5px; + right: 7px; + background: black; +} +.container__pacman__mouth { + animation-name: eat; + animation-duration: 0.7s; + animation-iteration-count: infinite; + background: black; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); +} +.container__pacman__food { + position: absolute; + width: 10px; + height: 10px; + background: #b3ee11; + border-radius: 50%; + top: 40%; + left: 70px; + animation-name: food; + animation-duration: 0.7s; + animation-iteration-count: infinite; +} +.container .container__colors__aqua { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: aqua_dot; + background-color: black; + animation-duration: 4s; + position: absolute; + right: 655px; + top: 265px; +} +.container .container__colors__green { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: green_dot; + background-color: black; + animation-duration: 4s; + position: absolute; + right: 580px; + top: 455px; +} +.container .container__colors__red { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: red_dot; + background-color: black; + animation-duration: 5s; + position: absolute; + right: 950px; + top: 130px; +} +.container .container__colors__yellow { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: yellow_dot; + background-color: black; + animation-duration: 11s; + position: absolute; + right: 650px; + top: 195px; +} +@keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@keyframes movement { + 0% { + background-color: yellow; + left: 0px; + top: 0px; + } + 4.5% { + background-color: yellow; + left: 0px; + top: -60px; + } + 9% { + background-color: aqua; + left: 110px; + top: -60px; + } + 13.5% { + background-color: aqua; + left: 110px; + top: 133px; + } + 27% { + left: 190px; + top: 133px; + } + 31.5% { + left: 190px; + top: 5px; + } + 36% { + left: 350px; + top: 5px; + } + 40.5% { + left: -350px; + top: 5px; + background-color: green; + } + 45% { + left: -185px; + top: 5px; + } + 49.5% { + left: -185px; + top: -275px; + } + 54% { + left: -310px; + top: -275px; + } + 58.5% { + left: -310px; + top: -275px; + } + 63% { + left: -310px; + top: -190px; + background-color: red; + } + 67.5% { + left: 110px; + top: -190px; + } + 72% { + left: 110px; + top: -125px; + } + 76.5% { + left: 35px; + top: -125px; + } + 81% { + left: 35px; + top: -60px; + } + 85.5% { + left: 0px; + top: -60px; + } + 90% { + left: 0px; + top: -60px; + } + 100% { + left: 0px; + top: 0px; + } +} +@keyframes aqua_dot { + 0% { + background-color: aqua; + } + 10% { + background-color: aqua; + } + 25% { + background-color: black; + } + 50% { + background-color: black; + } + 100% { + background-color: black; + } +} +@keyframes green_dot { + 0% { + background-color: green; + } + 10% { + background-color: green; + } + 25% { + background-color: green; + } + 50% { + background-color: green; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } +} +@keyframes red_dot { + 0% { + background-color: red; + } + 10% { + background-color: red; + } + 25% { + background-color: red; + } + 50% { + background-color: red; + } + 75% { + background-color: red; + } + 80% { + background-color: red; + } + 100% { + background-color: black; + } +} +@keyframes yellow_dot { + 0% { + background-color: yellow; + } + 10% { + background-color: yellow; + } + 25% { + background-color: yellow; + } + 50% { + background-color: yellow; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/index.html b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/index.html new file mode 100644 index 000000000..49ee2ce93 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/index.html @@ -0,0 +1,25 @@ + + + + + + + HW-Pacman + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.css b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.css new file mode 100644 index 000000000..6db94fae2 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.css @@ -0,0 +1,521 @@ +body { + background: black; + padding: 0; + margin: 0%; + display: flex; + height: 100vh; + justify-content: center; + align-items: center; +} + +.container { + width: 45%; + height: 95%; + border: 1px solid white; + background-image: url(https://i.stack.imgur.com/lnC4o.png); + background-repeat: no-repeat; + background-size: cover; +} +.container__pacman { + width: 25px; + height: 25px; + border-radius: 50%; + background: yellow; + position: relative; + margin-top: 43%; + margin-left: 48%; + -webkit-animation-name: movement; + animation-name: movement; + -webkit-animation-duration: 8s; + animation-duration: 8s; +} +.container__pacman__eye { + position: absolute; + width: 5px; + height: 3px; + border-radius: 50%; + top: 5px; + right: 7px; + background: black; +} +.container__pacman__mouth { + -webkit-animation-name: eat; + animation-name: eat; + -webkit-animation-duration: 0.7s; + animation-duration: 0.7s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + background: black; + position: absolute; + width: 100%; + height: 100%; + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); +} +.container__pacman__food { + position: absolute; + width: 10px; + height: 10px; + background: rgb(179, 238, 17); + border-radius: 50%; + top: 40%; + left: 70px; + -webkit-animation-name: food; + animation-name: food; + -webkit-animation-duration: 0.7s; + animation-duration: 0.7s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.container .container__colors__aqua { + width: 10px; + height: 10px; + border-radius: 50%; + -webkit-animation-name: aqua_dot; + animation-name: aqua_dot; + background-color: black; + -webkit-animation-duration: 4s; + animation-duration: 4s; + position: absolute; + right: 655px; + top: 265px; +} +.container .container__colors__green { + width: 10px; + height: 10px; + border-radius: 50%; + -webkit-animation-name: green_dot; + animation-name: green_dot; + background-color: black; + -webkit-animation-duration: 4s; + animation-duration: 4s; + position: absolute; + right: 580px; + top: 455px; +} +.container .container__colors__red { + width: 10px; + height: 10px; + border-radius: 50%; + -webkit-animation-name: red_dot; + animation-name: red_dot; + background-color: black; + -webkit-animation-duration: 5s; + animation-duration: 5s; + position: absolute; + right: 950px; + top: 130px; +} +.container .container__colors__yellow { + width: 10px; + height: 10px; + border-radius: 50%; + -webkit-animation-name: yellow_dot; + animation-name: yellow_dot; + background-color: black; + -webkit-animation-duration: 11s; + animation-duration: 11s; + position: absolute; + right: 650px; + top: 195px; +} +@-webkit-keyframes eat { + 0% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + -webkit-clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + -webkit-clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + -webkit-clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@keyframes eat { + 0% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + -webkit-clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + -webkit-clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + -webkit-clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@-webkit-keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@-webkit-keyframes movement { + 0% { + background-color: yellow; + left: 0px; + top: 0px; + } + 4.5% { + background-color: yellow; + left: 0px; + top: -60px; + } + 9% { + background-color: aqua; + left: 110px; + top: -60px; + } + 13.5% { + background-color: aqua; + left: 110px; + top: 133px; + } + 27% { + left: 190px; + top: 133px; + } + 31.5% { + left: 190px; + top: 5px; + } + 36% { + left: 350px; + top: 5px; + } + 40.5% { + left: -350px; + top: 5px; + background-color: green; + } + 45% { + left: -185px; + top: 5px; + } + 49.5% { + left: -185px; + top: -275px; + } + 54% { + left: -310px; + top: -275px; + } + 58.5% { + left: -310px; + top: -275px; + } + 63% { + left: -310px; + top: -190px; + background-color: red; + } + 67.5% { + left: 110px; + top: -190px; + } + 72% { + left: 110px; + top: -125px; + } + 76.5% { + left: 35px; + top: -125px; + } + 81% { + left: 35px; + top: -60px; + } + 85.5% { + left: 0px; + top: -60px; + } + 90% { + left: 0px; + top: -60px; + } + 100% { + left: 0px; + top: 0px; + } +} +@keyframes movement { + 0% { + background-color: yellow; + left: 0px; + top: 0px; + } + 4.5% { + background-color: yellow; + left: 0px; + top: -60px; + } + 9% { + background-color: aqua; + left: 110px; + top: -60px; + } + 13.5% { + background-color: aqua; + left: 110px; + top: 133px; + } + 27% { + left: 190px; + top: 133px; + } + 31.5% { + left: 190px; + top: 5px; + } + 36% { + left: 350px; + top: 5px; + } + 40.5% { + left: -350px; + top: 5px; + background-color: green; + } + 45% { + left: -185px; + top: 5px; + } + 49.5% { + left: -185px; + top: -275px; + } + 54% { + left: -310px; + top: -275px; + } + 58.5% { + left: -310px; + top: -275px; + } + 63% { + left: -310px; + top: -190px; + background-color: red; + } + 67.5% { + left: 110px; + top: -190px; + } + 72% { + left: 110px; + top: -125px; + } + 76.5% { + left: 35px; + top: -125px; + } + 81% { + left: 35px; + top: -60px; + } + 85.5% { + left: 0px; + top: -60px; + } + 90% { + left: 0px; + top: -60px; + } + 100% { + left: 0px; + top: 0px; + } +} +@-webkit-keyframes aqua_dot { + 0% { + background-color: aqua; + } + 10% { + background-color: aqua; + } + 25% { + background-color: black; + } + 50% { + background-color: black; + } + 100% { + background-color: black; + } +} +@keyframes aqua_dot { + 0% { + background-color: aqua; + } + 10% { + background-color: aqua; + } + 25% { + background-color: black; + } + 50% { + background-color: black; + } + 100% { + background-color: black; + } +} +@-webkit-keyframes green_dot { + 0% { + background-color: green; + } + 10% { + background-color: green; + } + 25% { + background-color: green; + } + 50% { + background-color: green; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } +} +@keyframes green_dot { + 0% { + background-color: green; + } + 10% { + background-color: green; + } + 25% { + background-color: green; + } + 50% { + background-color: green; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } +} +@-webkit-keyframes red_dot { + 0% { + background-color: red; + } + 10% { + background-color: red; + } + 25% { + background-color: red; + } + 50% { + background-color: red; + } + 75% { + background-color: red; + } + 80% { + background-color: red; + } + 100% { + background-color: black; + } +} +@keyframes red_dot { + 0% { + background-color: red; + } + 10% { + background-color: red; + } + 25% { + background-color: red; + } + 50% { + background-color: red; + } + 75% { + background-color: red; + } + 80% { + background-color: red; + } + 100% { + background-color: black; + } +} +@-webkit-keyframes yellow_dot { + 0% { + background-color: yellow; + } + 10% { + background-color: yellow; + } + 25% { + background-color: yellow; + } + 50% { + background-color: yellow; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } +} +@keyframes yellow_dot { + 0% { + background-color: yellow; + } + 10% { + background-color: yellow; + } + 25% { + background-color: yellow; + } + 50% { + background-color: yellow; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.css.map b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.css.map new file mode 100644 index 000000000..73ca4db39 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.scss b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.scss new file mode 100644 index 000000000..0a97e824a --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Itay-Amosi-Pacman/style.scss @@ -0,0 +1,304 @@ +body { + background: black; + padding: 0; + margin: 0%; + display: flex; + height: 100vh; + justify-content: center; + align-items: center; +} +.container { + width: 45%; + height: 95%; + border: 1px solid white; + background-image: url(https://i.stack.imgur.com/lnC4o.png); + background-repeat: no-repeat; + background-size: cover; + + &__pacman { + width: 25px; + height: 25px; + border-radius: 50%; + background: yellow; + position: relative; + margin-top: 43%; + margin-left: 48%; + animation-name: movement; + animation-duration: 8s; + + &__eye { + position: absolute; + width: 5px; + height: 3px; + border-radius: 50%; + top: 5px; + right: 7px; + background: black; + } + &__mouth { + animation-name: eat; + animation-duration: 0.7s; + animation-iteration-count: infinite; + background: black; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + &__food { + position: absolute; + width: 10px; + height: 10px; + background: rgb(179, 238, 17); + border-radius: 50%; + top: 40%; + left: 70px; + animation-name: food; + animation-duration: 0.7s; + animation-iteration-count: infinite; + } + } + .container__colors { + &__aqua { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: aqua_dot; + background-color: black; + animation-duration: 4s; + position: absolute; + right: 655px; + top: 265px; + } + + &__green { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: green_dot; + background-color: black; + animation-duration: 4s; + position: absolute; + right: 580px; + top: 455px; + } + &__red { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: red_dot; + background-color: black; + animation-duration: 5s; + position: absolute; + right: 950px; + top: 130px; + } + &__yellow { + width: 10px; + height: 10px; + border-radius: 50%; + animation-name: yellow_dot; + background-color: black; + animation-duration: 11s; + position: absolute; + right: 650px; + top: 195px; + } + } + @keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + } + @keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } + } + @keyframes movement { + 0% { + background-color: yellow; + left: 0px; + top: 0px; + } + 4.5% { + background-color: yellow; + left: 0px; + top: -60px; + } + 9% { + background-color: aqua; + left: 110px; + top: -60px; + } + 13.5% { + background-color: aqua; + left: 110px; + top: 133px; + } + 27% { + left: 190px; + top: 133px; + } + 31.5% { + left: 190px; + top: 5px; + } + 36% { + left: 350px; + top: 5px; + } + 40.5% { + left: -350px; + top: 5px; + background-color: green; + } + 45% { + left: -185px; + top: 5px; + } + 49.5% { + left: -185px; + top: -275px; + } + 54% { + left: -310px; + top: -275px; + } + 58.5% { + left: -310px; + top: -275px; + } + 63% { + left: -310px; + top: -190px; + background-color: red; + } + 67.5% { + left: 110px; + top: -190px; + } + 72% { + left: 110px; + top: -125px; + } + 76.5% { + left: 35px; + top: -125px; + } + 81% { + left: 35px; + top: -60px; + } + 85.5% { + left: 0px; + top: -60px; + } + 90% { + left: 0px; + top: -60px; + } + 100% { + left: 0px; + top: 0px; + } + } + + @keyframes aqua_dot { + 0% { + background-color: aqua; + } + 10% { + background-color: aqua; + } + 25% { + background-color: black; + } + 50% { + background-color: black; + } + 100% { + background-color: black; + } + } + @keyframes green_dot { + 0% { + background-color: green; + } + 10% { + background-color: green; + } + 25% { + background-color: green; + } + 50% { + background-color: green; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } + } + @keyframes red_dot { + 0% { + background-color: red; + } + 10% { + background-color: red; + } + 25% { + background-color: red; + } + 50% { + background-color: red; + } + 75% { + background-color: red; + } + 80% { + background-color: red; + } + 100% { + background-color: black; + } + } + @keyframes yellow_dot { + 0% { + background-color: yellow; + } + 10% { + background-color: yellow; + } + 25% { + background-color: yellow; + } + 50% { + background-color: yellow; + } + 75% { + background-color: black; + } + 100% { + background-color: black; + } + } +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/.gitignore b/01-HTML-CSS/06-animations/HW/Ksenya/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/index.html b/01-HTML-CSS/06-animations/HW/Ksenya/index.html new file mode 100644 index 000000000..0b5ea616d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + It's me, hi + + +
+ + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/package-lock.json b/01-HTML-CSS/06-animations/HW/Ksenya/package-lock.json new file mode 100644 index 000000000..998c6f194 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/package-lock.json @@ -0,0 +1,2308 @@ +{ + "name": "vite-project", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "vite-project", + "version": "0.0.0", + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.10.16", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^5.2.0", + "sass": "^1.56.1" + }, + "devDependencies": { + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^2.2.0", + "vite": "^3.2.3" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", + "dependencies": { + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", + "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "dependencies": { + "@babel/highlight": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.5.tgz", + "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.5.tgz", + "integrity": "sha512-UdOWmk4pNWTm/4DlPUl/Pt4Gz4rcEMb7CY0Y3eJl5Yz1vI8ZJGmHWaVE55LoxRjdpx0z259GE9U5STA9atUinQ==", + "dependencies": { + "@ampproject/remapping": "^2.1.0", + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.5", + "@babel/helper-compilation-targets": "^7.20.0", + "@babel/helper-module-transforms": "^7.20.2", + "@babel/helpers": "^7.20.5", + "@babel/parser": "^7.20.5", + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.5", + "@babel/types": "^7.20.5", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.1", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.5.tgz", + "integrity": "sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==", + "dependencies": { + "@babel/types": "^7.20.5", + "@jridgewell/gen-mapping": "^0.3.2", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", + "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.20.0", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz", + "integrity": "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==", + "dependencies": { + "@babel/compat-data": "^7.20.0", + "@babel/helper-validator-option": "^7.18.6", + "browserslist": "^4.21.3", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", + "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", + "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "dependencies": { + "@babel/template": "^7.18.10", + "@babel/types": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", + "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", + "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz", + "integrity": "sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==", + "dependencies": { + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-simple-access": "^7.20.2", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/helper-validator-identifier": "^7.19.1", + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.1", + "@babel/types": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", + "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz", + "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==", + "dependencies": { + "@babel/types": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", + "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz", + "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.6.tgz", + "integrity": "sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==", + "dependencies": { + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.5", + "@babel/types": "^7.20.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz", + "integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==", + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz", + "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz", + "integrity": "sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-plugin-utils": "^7.19.0", + "@babel/plugin-syntax-jsx": "^7.18.6", + "@babel/types": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-development": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz", + "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==", + "dev": true, + "dependencies": { + "@babel/plugin-transform-react-jsx": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz", + "integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.19.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz", + "integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz", + "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==", + "dependencies": { + "regenerator-runtime": "^0.13.11" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/template": { + "version": "7.18.10", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", + "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/parser": "^7.18.10", + "@babel/types": "^7.18.10" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.5.tgz", + "integrity": "sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==", + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.5", + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-function-name": "^7.19.0", + "@babel/helper-hoist-variables": "^7.18.6", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/parser": "^7.20.5", + "@babel/types": "^7.20.5", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz", + "integrity": "sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==", + "dependencies": { + "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-validator-identifier": "^7.19.1", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/babel-plugin": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", + "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/cache": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz", + "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==", + "dependencies": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.1", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/react": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz", + "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.5", + "@emotion/cache": "^11.10.5", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz", + "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==" + }, + "node_modules/@emotion/styled": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz", + "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.5", + "@emotion/is-prop-valid": "^1.2.0", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==" + }, + "node_modules/@esbuild/android-arm": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.16.tgz", + "integrity": "sha512-nyB6CH++2mSgx3GbnrJsZSxzne5K0HMyNIWafDHqYy7IwxFc4fd/CgHVZXr8Eh+Q3KbIAcAe3vGyqIPhGblvMQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.16.tgz", + "integrity": "sha512-SDLfP1uoB0HZ14CdVYgagllgrG7Mdxhkt4jDJOKl/MldKrkQ6vDJMZKl2+5XsEY/Lzz37fjgLQoJBGuAw/x8kQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", + "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", + "dependencies": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + } + }, + "node_modules/@mui/base": { + "version": "5.0.0-alpha.108", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.108.tgz", + "integrity": "sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@emotion/is-prop-valid": "^1.2.0", + "@mui/types": "^7.2.2", + "@mui/utils": "^5.10.16", + "@popperjs/core": "^2.11.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/base/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.16.tgz", + "integrity": "sha512-eK9+olw2ZbXX+vGrtKnN01/vLP1aX0Lq0xok35bqWM1aB93Dcmky/xPNf8h31oJ/C+IzJBjZaZMEDzVZg4Qc0A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + } + }, + "node_modules/@mui/material": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.16.tgz", + "integrity": "sha512-JSHcDQQ+k30NKkCM/0KX6jq4F5LOrbFKZpS+cEl7scZWOCJpUPH5ccAT5a7O8wzrgNZ8Y9PnwzNvWBrfShpJFw==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@mui/base": "5.0.0-alpha.108", + "@mui/core-downloads-tracker": "^5.10.16", + "@mui/system": "^5.10.16", + "@mui/types": "^7.2.2", + "@mui/utils": "^5.10.16", + "@types/react-transition-group": "^4.4.5", + "clsx": "^1.2.1", + "csstype": "^3.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/private-theming": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz", + "integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@mui/utils": "^5.10.16", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.16.tgz", + "integrity": "sha512-ZMSjXvtiGwGDKqrSlXhpxK2voUaF2/lpC/pSTfFmZvKH9j9a9h1/iwo3ybgjFVYGgbfNeW4h0xEchiRohu9xsw==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@emotion/cache": "^11.10.5", + "csstype": "^3.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz", + "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@mui/private-theming": "^5.10.16", + "@mui/styled-engine": "^5.10.16", + "@mui/types": "^7.2.2", + "@mui/utils": "^5.10.16", + "clsx": "^1.2.1", + "csstype": "^3.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz", + "integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz", + "integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@types/prop-types": "^15.7.5", + "@types/react-is": "^16.7.1 || ^17.0.0", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "node_modules/@types/react": { + "version": "18.0.25", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz", + "integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.0.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz", + "integrity": "sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-is": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", + "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, + "node_modules/@vitejs/plugin-react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.2.0.tgz", + "integrity": "sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.19.6", + "@babel/plugin-transform-react-jsx": "^7.19.0", + "@babel/plugin-transform-react-jsx-development": "^7.18.6", + "@babel/plugin-transform-react-jsx-self": "^7.18.6", + "@babel/plugin-transform-react-jsx-source": "^7.19.6", + "magic-string": "^0.26.7", + "react-refresh": "^0.14.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^3.0.0" + } + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.21.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", + "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001400", + "electron-to-chromium": "^1.4.251", + "node-releases": "^2.0.6", + "update-browserslist-db": "^1.0.9" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001434", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz", + "integrity": "sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.4.284", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", + "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/esbuild": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.16.tgz", + "integrity": "sha512-o6iS9zxdHrrojjlj6pNGC2NAg86ECZqIETswTM5KmJitq+R1YmahhWtMumeQp9lHqJaROGnsBi2RLawGnfo5ZQ==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.15.16", + "@esbuild/linux-loong64": "0.15.16", + "esbuild-android-64": "0.15.16", + "esbuild-android-arm64": "0.15.16", + "esbuild-darwin-64": "0.15.16", + "esbuild-darwin-arm64": "0.15.16", + "esbuild-freebsd-64": "0.15.16", + "esbuild-freebsd-arm64": "0.15.16", + "esbuild-linux-32": "0.15.16", + "esbuild-linux-64": "0.15.16", + "esbuild-linux-arm": "0.15.16", + "esbuild-linux-arm64": "0.15.16", + "esbuild-linux-mips64le": "0.15.16", + "esbuild-linux-ppc64le": "0.15.16", + "esbuild-linux-riscv64": "0.15.16", + "esbuild-linux-s390x": "0.15.16", + "esbuild-netbsd-64": "0.15.16", + "esbuild-openbsd-64": "0.15.16", + "esbuild-sunos-64": "0.15.16", + "esbuild-windows-32": "0.15.16", + "esbuild-windows-64": "0.15.16", + "esbuild-windows-arm64": "0.15.16" + } + }, + "node_modules/esbuild-android-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.16.tgz", + "integrity": "sha512-Vwkv/sT0zMSgPSVO3Jlt1pUbnZuOgtOQJkJkyyJFAlLe7BiT8e9ESzo0zQSx4c3wW4T6kGChmKDPMbWTgtliQA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-android-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.16.tgz", + "integrity": "sha512-lqfKuofMExL5niNV3gnhMUYacSXfsvzTa/58sDlBET/hCOG99Zmeh+lz6kvdgvGOsImeo6J9SW21rFCogNPLxg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-darwin-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.16.tgz", + "integrity": "sha512-wo2VWk/n/9V2TmqUZ/KpzRjCEcr00n7yahEdmtzlrfQ3lfMCf3Wa+0sqHAbjk3C6CKkR3WKK/whkMq5Gj4Da9g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-darwin-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.16.tgz", + "integrity": "sha512-fMXaUr5ou0M4WnewBKsspMtX++C1yIa3nJ5R2LSbLCfJT3uFdcRoU/NZjoM4kOMKyOD9Sa/2vlgN8G07K3SJnw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-freebsd-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.16.tgz", + "integrity": "sha512-UzIc0xlRx5x9kRuMr+E3+hlSOxa/aRqfuMfiYBXu2jJ8Mzej4lGL7+o6F5hzhLqWfWm1GWHNakIdlqg1ayaTNQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-freebsd-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.16.tgz", + "integrity": "sha512-8xyiYuGc0DLZphFQIiYaLHlfoP+hAN9RHbE+Ibh8EUcDNHAqbQgUrQg7pE7Bo00rXmQ5Ap6KFgcR0b4ALZls1g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-32": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.16.tgz", + "integrity": "sha512-iGijUTV+0kIMyUVoynK0v+32Oi8yyp0xwMzX69GX+5+AniNy/C/AL1MjFTsozRp/3xQPl7jVux/PLe2ds10/2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.16.tgz", + "integrity": "sha512-tuSOjXdLw7VzaUj89fIdAaQT7zFGbKBcz4YxbWrOiXkwscYgE7HtTxUavreBbnRkGxKwr9iT/gmeJWNm4djy/g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-arm": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.16.tgz", + "integrity": "sha512-XKcrxCEXDTOuoRj5l12tJnkvuxXBMKwEC5j0JISw3ziLf0j4zIwXbKbTmUrKFWbo6ZgvNpa7Y5dnbsjVvH39bQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.16.tgz", + "integrity": "sha512-mPYksnfHnemNrvjrDhZyixL/AfbJN0Xn9S34ZOHYdh6/jJcNd8iTsv3JwJoEvTJqjMggjMhGUPJAdjnFBHoH8A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-mips64le": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.16.tgz", + "integrity": "sha512-kSJO2PXaxfm0pWY39+YX+QtpFqyyrcp0ZeI8QPTrcFVQoWEPiPVtOfTZeS3ZKedfH+Ga38c4DSzmKMQJocQv6A==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-ppc64le": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.16.tgz", + "integrity": "sha512-NimPikwkBY0yGABw6SlhKrtT35sU4O23xkhlrTT/O6lSxv3Pm5iSc6OYaqVAHWkLdVf31bF4UDVFO+D990WpAA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-riscv64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.16.tgz", + "integrity": "sha512-ty2YUHZlwFOwp7pR+J87M4CVrXJIf5ZZtU/umpxgVJBXvWjhziSLEQxvl30SYfUPq0nzeWKBGw5i/DieiHeKfw==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-s390x": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.16.tgz", + "integrity": "sha512-VkZaGssvPDQtx4fvVdZ9czezmyWyzpQhEbSNsHZZN0BHvxRLOYAQ7sjay8nMQwYswP6O2KlZluRMNPYefFRs+w==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-netbsd-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.16.tgz", + "integrity": "sha512-ElQ9rhdY51et6MJTWrCPbqOd/YuPowD7Cxx3ee8wlmXQQVW7UvQI6nSprJ9uVFQISqSF5e5EWpwWqXZsECLvXg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-openbsd-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.16.tgz", + "integrity": "sha512-KgxMHyxMCT+NdLQE1zVJEsLSt2QQBAvJfmUGDmgEq8Fvjrf6vSKB00dVHUEDKcJwMID6CdgCpvYNt999tIYhqA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-sunos-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.16.tgz", + "integrity": "sha512-exSAx8Phj7QylXHlMfIyEfNrmqnLxFqLxdQF6MBHPdHAjT7fsKaX6XIJn+aQEFiOcE4X8e7VvdMCJ+WDZxjSRQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-32": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.16.tgz", + "integrity": "sha512-zQgWpY5pUCSTOwqKQ6/vOCJfRssTvxFuEkpB4f2VUGPBpdddZfdj8hbZuFRdZRPIVHvN7juGcpgCA/XCF37mAQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.16.tgz", + "integrity": "sha512-HjW1hHRLSncnM3MBCP7iquatHVJq9l0S2xxsHHj4yzf4nm9TU4Z7k4NkeMlD/dHQ4jPlQQhwcMvwbJiOefSuZw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.16.tgz", + "integrity": "sha512-oCcUKrJaMn04Vxy9Ekd8x23O8LoU01+4NOkQ2iBToKgnGj5eo1vU9i27NQZ9qC8NFZgnQQZg5oZWAejmbsppNA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "engines": { + "node": ">=4" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + }, + "node_modules/json5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", + "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/magic-string": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "dev": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", + "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==" + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "node_modules/path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "dependencies": { + "isarray": "0.0.1" + } + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-refresh": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router/node_modules/mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "dependencies": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "engines": { + "node": ">=4" + } + }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, + "node_modules/rollup": { + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/sass": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.1.tgz", + "integrity": "sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, + "node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "engines": { + "node": ">=4" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", + "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist-lint": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, + "node_modules/vite": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.4.tgz", + "integrity": "sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==", + "dev": true, + "dependencies": { + "esbuild": "^0.15.9", + "postcss": "^8.4.18", + "resolve": "^1.22.1", + "rollup": "^2.79.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + } + } +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/package.json b/01-HTML-CSS/06-animations/HW/Ksenya/package.json new file mode 100644 index 000000000..5a8dd80e7 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/package.json @@ -0,0 +1,26 @@ +{ + "name": "vite-project", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.10.16", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^5.2.0", + "sass": "^1.56.1" + }, + "devDependencies": { + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^2.2.0", + "vite": "^3.2.3" + } +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/App.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/App.css new file mode 100644 index 000000000..a9cf1cc66 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/App.css @@ -0,0 +1,39 @@ +.App { + text-align: center; + font-family: 'Rubik', sans-serif; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/App.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/App.jsx new file mode 100644 index 000000000..e75a26250 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/App.jsx @@ -0,0 +1,27 @@ +import "./App.css"; +import { useState, useEffect } from "react"; +import NavBar from "./Components/NavBar/NavBar"; +import RouteMaster from "./Routes/Routes"; +import { Switch, Route, Redirect } from "react-router-dom" +import {HOME_PATH} from "./consts/routes" + + +function App() { + + return ( +
+ + + {RouteMaster.map((routeElement, index) => ( + } + /> + ))} + + +
+ ); +} +export default App; diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/About.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/About.jsx new file mode 100644 index 000000000..5f3045bbf --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/About.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import Timeline from "./Timeline/Timeline"; + +function About() { + + + + return ( +
+ +
+ ); +} +export default About; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/Timeline.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/Timeline.css new file mode 100644 index 000000000..3288310de --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/Timeline.css @@ -0,0 +1,20 @@ +#mainTimelineTitle{ + font-size: 36px; + margin-bottom: 10px; + font-weight: 600; + margin-top: 20px; +} + +#dot{ + background:rgb(255, 73, 112); + width: 20px; + height: 20px; + border: 5px solid #eee; + border-radius: 50%; +} + +#dotContainer{ + display: flex; + justify-content: center; + align-items: center; +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/Timeline.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/Timeline.jsx new file mode 100644 index 000000000..300b94f5a --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/Timeline.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { timelineData } from "../../../consts/timelineCards" +import TimelineCard from './TimelineCard/TimelineCard'; +import "./Timeline.css" + +const Timeline = () => { + +return ( +
+
My Journey
+
+ {timelineData.map((element, index) => ( +
+ {index % 2 === 1 && } +
+ {index % 2 === 0 && } +
+ ))} +
+
+ ); +}; + +export default Timeline; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/TimelineCard/TimelineCard.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/TimelineCard/TimelineCard.css new file mode 100644 index 000000000..b1fdcec4b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/TimelineCard/TimelineCard.css @@ -0,0 +1,31 @@ +#timelineCardContainer{ + margin: 20px; + box-shadow: 0 10px 27px 3px rgba(116, 116, 116, 0.2); + width: 360px; + background-color: blanchedalmond; +} + +#timelineTitle{ + font-size: 30px; + margin-bottom: 20px; + padding-top: 20px; + color: rgb(255, 73, 112); +} + + +#timelineSub{ + font-size: 20px; + color: rgb(92, 92, 92); + margin-bottom: 10px; +} + +#timelinePeriod{ + font-size: 20px; + color: rgb(92, 92, 92); + padding-bottom: 20px; +} + +.cardContainer{ + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/TimelineCard/TimelineCard.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/TimelineCard/TimelineCard.jsx new file mode 100644 index 000000000..7299970bc --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/About/Timeline/TimelineCard/TimelineCard.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import "./TimelineCard.css" + + +const TimelineCard = ({ mainTitle, secondTitle, dates }) => { + return ( +
+
+
{mainTitle}
+
{secondTitle}
+
Session: {dates}
+
+
+ ); +}; + +export default TimelineCard; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/Contact.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/Contact.jsx new file mode 100644 index 000000000..ea975e282 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/Contact.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import house1 from "../../icons/house1.svg"; +import house2 from "../../icons/house2.svg"; +import house3 from "../../icons/house3.svg"; +import house4 from "../../icons/house4.svg"; +import cunstructionCar from "../../icons/trucking-truck-svgrepo-com.svg"; +import "./contact.scss"; + +const Contact = () => { + return ( +
+
+
+ house + house + house + house +
+ truckCar +
+ This part is still under construction +
+ ); +}; + +export default Contact; diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.css new file mode 100644 index 000000000..4b4dc53be --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.css @@ -0,0 +1,59 @@ +.house { + width: 3rem; + height: 3rem; +} + +.housesContainer { + width: 14rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.constructionContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.cunstructionCar { + -webkit-animation-name: cunstructionCar; + animation-name: cunstructionCar; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-animation-fill-mode: revert; + animation-fill-mode: revert; + position: absolute; + top: 116px; + left: -2px; +} + +@-webkit-keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + to { + margin-left: 10%; + width: 100%; + } +} + +@keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + to { + margin-left: 10%; + width: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.css.map b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.css.map new file mode 100644 index 000000000..82d145e48 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["contact.scss","contact.css"],"names":[],"mappings":"AAAA;EACE,WAAA;EACA,YAAA;ACCF;;ADCA;EACI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;ACEJ;;ADCA;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACF,iBAAA;EACA,oBAAA;ACEF;;ADCA;EACE,uCAAA;UAAA,+BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,yCAAA;UAAA,iCAAA;EACA,sCAAA;UAAA,8BAAA;EACA,mCAAA;UAAA,2BAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;ACEF;;ADCA;EACE;IACE,iBAAA;IACA,WAAA;ECEF;EDCA;IACE,gBAAA;IACA,WAAA;ECCF;AACF;;ADVA;EACE;IACE,iBAAA;IACA,WAAA;ECEF;EDCA;IACE,gBAAA;IACA,WAAA;ECCF;AACF","file":"contact.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.scss b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.scss new file mode 100644 index 000000000..df5f85c31 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Contact/contact.scss @@ -0,0 +1,42 @@ +.house { + width: 3rem; + height: 3rem; +} +.housesContainer{ + width: 14rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.constructionContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.cunstructionCar { + animation-name: cunstructionCar; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate; + animation-fill-mode: revert; + position: absolute; + top: 116px; + left: -2px; +} + +@keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + + to { + margin-left: 10%; + width: 100%; + } +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Generics/GenericIntro.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Generics/GenericIntro.css new file mode 100644 index 000000000..6cac80f72 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Generics/GenericIntro.css @@ -0,0 +1,22 @@ + +#smallTitle{ + font-weight: 400; + letter-spacing: 2px; +} + +#mainTitle{ + margin: 20px 0; + font-size: 60px; + font-weight: bold; +} + +#description{ + margin-bottom: 1rem; +} + +#introContainer{ + text-align: left; + width: 50%; + padding-left: 5%; + margin-top: 40px; +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Generics/GenericIntro.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Generics/GenericIntro.jsx new file mode 100644 index 000000000..2e7b40ea1 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Generics/GenericIntro.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import "./GenericIntro.css" + +const GenericIntro = ({smallTitle, mainTitle, desc}) => { + return ( +
+
{smallTitle}
+
{mainTitle}
+

{desc}

+
+ ); +}; + +export default GenericIntro; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Home/Home.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Home/Home.css new file mode 100644 index 000000000..6acbf2e3e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Home/Home.css @@ -0,0 +1,29 @@ +#mainHome { + display: flex; + margin-top: 70px; + height: 300px; +} + +.mainImg { + margin-left: 5rem; +} +.picFrame { + animation-name: picFrame; + animation-duration: 3s; + animation-iteration-count: infinite; + +} + +@keyframes picFrame { + 0% { + border: 50px solid blanchedalmond; + } + + 50% { + border: 50px solid darksalmon; + } + + 100% { + border: 50px solid blanchedalmond; + } +} diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Home/Home.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Home/Home.jsx new file mode 100644 index 000000000..f06721e70 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Home/Home.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import GenericIntro from "../Generics/GenericIntro"; +import mainImg from "../../icons/ksen.jpg"; +import "./Home.css"; + +function Home() { + return ( +
+ + girl smiling +
+ ); +} +export default Home; diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/NavBar.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/NavBar.css new file mode 100644 index 000000000..0957af6c7 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/NavBar.css @@ -0,0 +1,37 @@ + +#NavBarBody{ +background-color: blanchedalmond; +width:100%; +height: 70px; +display: flex; +align-items: center; +justify-content: space-between; +margin-right: 100px; +} + +#titlesContainer{ + margin-right: 100px; +} + +#iconTitle{ + margin-left: 30px; + font-size: 20px; + font-weight: bold; +} + +#iconContainer{ + display: flex; + align-items: center; + margin-left: 40px; + cursor: pointer; +} + +#menuButton{ +margin-right: 40px; +cursor: pointer; +} + +#drawerActive{ + width: 200px; + margin-top: 40px; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/NavBar.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/NavBar.jsx new file mode 100644 index 000000000..6555e3cbe --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/NavBar.jsx @@ -0,0 +1,60 @@ +import { useState, useEffect } from "react"; +import { NAV_BAR_ELEMENTS } from "../../consts/navbarElements" +import "./NavBar.css"; +import mainIcon from "../../icons/mainIcon.svg" +import { HOME_PATH } from "../../consts/routes"; +import Drawer from '@mui/material/Drawer'; +import SingleNavbarOption from "./SingleNavbarOption/SingleNavbarOption"; +import { useHistory, useLocation } from "react-router-dom"; + +function NavBar() { + const [activeIndex, setActiveIndex] = useState(0) + const history = useHistory() + const [drawerState, setDrawer] = useState(false) + const location = useLocation() + + useEffect(() => { + NAV_BAR_ELEMENTS.forEach((element,index) => { + if (element.path === location.pathname) { + setActiveIndex(index) + } + }) + }, []) + return ( + + + + ) +} + +export default NavBar; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/SingleNavbarOption/SingleNavbarOption.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/SingleNavbarOption/SingleNavbarOption.css new file mode 100644 index 000000000..1e571eac4 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/SingleNavbarOption/SingleNavbarOption.css @@ -0,0 +1,17 @@ +.NavBarTitles{ + font-weight: 500; + cursor: pointer; + padding-right: 50px; + padding-left: 50px; + padding-bottom: 50px; + align-items: center; +} + +.NavBarTitles:hover{ + color: rgb(255, 73, 112); + } + + .activeTitle { + color: rgb(255, 73, 112); + } + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/SingleNavbarOption/SingleNavbarOption.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/SingleNavbarOption/SingleNavbarOption.jsx new file mode 100644 index 000000000..2ac62352e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/NavBar/SingleNavbarOption/SingleNavbarOption.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import "./SingleNavbarOption.css" +import { useHistory } from "react-router-dom"; + + +const SingleNavbarOption = ({ singleTitle, singlePath, isActive, optionIndex, changeIndex, changeDrawer}) => { + + let history = useHistory(); + + const optionClicked = () => { + changeIndex(optionIndex) + history.push(singlePath) + changeDrawer(false) + } + + + return ( + { optionClicked() }} > + {singleTitle} + + ); +}; + +export default SingleNavbarOption; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/Portfolio.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/Portfolio.jsx new file mode 100644 index 000000000..6323993f9 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/Portfolio.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import house1 from "../../icons/house1.svg"; +import house2 from "../../icons/house2.svg"; +import house3 from "../../icons/house3.svg"; +import house4 from "../../icons/house4.svg"; +import cunstructionCar from "../../icons/trucking-truck-svgrepo-com.svg"; +import "./porfolio.scss"; + +const Portfolio = () => { + + + return ( +
+
+
+ house + house + house + house +
+ truckCar +
+ This part is still under construction +
+ ); +}; + +export default Portfolio; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.css new file mode 100644 index 000000000..4b4dc53be --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.css @@ -0,0 +1,59 @@ +.house { + width: 3rem; + height: 3rem; +} + +.housesContainer { + width: 14rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.constructionContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.cunstructionCar { + -webkit-animation-name: cunstructionCar; + animation-name: cunstructionCar; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-animation-fill-mode: revert; + animation-fill-mode: revert; + position: absolute; + top: 116px; + left: -2px; +} + +@-webkit-keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + to { + margin-left: 10%; + width: 100%; + } +} + +@keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + to { + margin-left: 10%; + width: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.css.map b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.css.map new file mode 100644 index 000000000..7e94bc8fe --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["porfolio.scss","porfolio.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,YAAA;ACCJ;;ADCE;EACI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;ACEN;;ADCE;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACF,iBAAA;EACA,oBAAA;ACEJ;;ADCE;EACE,uCAAA;UAAA,+BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,yCAAA;UAAA,iCAAA;EACA,sCAAA;UAAA,8BAAA;EACA,mCAAA;UAAA,2BAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;ACEJ;;ADCE;EACE;IACE,iBAAA;IACA,WAAA;ECEJ;EDCE;IACE,gBAAA;IACA,WAAA;ECCJ;AACF;;ADVE;EACE;IACE,iBAAA;IACA,WAAA;ECEJ;EDCE;IACE,gBAAA;IACA,WAAA;ECCJ;AACF","file":"porfolio.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.scss b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.scss new file mode 100644 index 000000000..79f4d62fc --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Components/Portfolio/porfolio.scss @@ -0,0 +1,43 @@ +.house { + width: 3rem; + height: 3rem; + } + .housesContainer{ + width: 14rem; + display: flex; + align-items: center; + justify-content: space-between; + } + + .constructionContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; + } + + .cunstructionCar { + animation-name: cunstructionCar; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate; + animation-fill-mode: revert; + position: absolute; + top: 116px; + left: -2px; + } + + @keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + + to { + margin-left: 10%; + width: 100%; + } + } + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/Routes/Routes.js b/01-HTML-CSS/06-animations/HW/Ksenya/src/Routes/Routes.js new file mode 100644 index 000000000..3540eb575 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/Routes/Routes.js @@ -0,0 +1,28 @@ +import About from "../Components/About/About"; +import Home from "../Components/Home/Home"; +import Portfolio from "../Components/Portfolio/Portfolio"; +import Contact from "../Components/Contact/Contact"; + +import {ABOUT_PATH, HOME_PATH, PORTFOLIO_PATH, CONTACT_PATH} from "../consts/routes" + + +const RouteMaster = [ + + { + path: ABOUT_PATH, + component: About + }, + { + path: HOME_PATH, + component: Home + }, + { + path: PORTFOLIO_PATH, + component: Portfolio + },{ + path: CONTACT_PATH, + component: Contact + }, + +] +export default RouteMaster; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/navbarElements.js b/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/navbarElements.js new file mode 100644 index 000000000..371eb290b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/navbarElements.js @@ -0,0 +1,20 @@ +import {HOME_PATH, ABOUT_PATH, PORTFOLIO_PATH, CONTACT_PATH} from "./routes"; + +export const NAV_BAR_ELEMENTS = [ + { + titleName: "Home", + path: HOME_PATH + }, + { + titleName: "About", + path: ABOUT_PATH + }, + { + titleName: "Portfolio", + path: PORTFOLIO_PATH + }, + { + titleName: "Contact", + path: CONTACT_PATH + }, +] \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/routes.js b/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/routes.js new file mode 100644 index 000000000..9167d2f05 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/routes.js @@ -0,0 +1,7 @@ +export const ABOUT_PATH = '/about'; + +export const HOME_PATH = '/home'; + +export const PORTFOLIO_PATH = '/portfolio'; + +export const CONTACT_PATH = '/contact'; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/timelineCards.js b/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/timelineCards.js new file mode 100644 index 000000000..c381c95c5 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/consts/timelineCards.js @@ -0,0 +1,27 @@ +export const timelineData = [ + { + title: "Project 1", + subTitle: "My first project", + period: "1-2", + }, + { + title: "Project 2", + subTitle:"My second project" , + period: "2-3" , + }, + { + title: "Project 3" , + subTitle: "My third project" , + period: "3-4", + }, + { + title: "Project 4", + subTitle: "My fourth project", + period: "4-5", + }, + { + title:"Project 5" , + subTitle: "My fifth project", + period: "5", + }, +] \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house1.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house1.svg new file mode 100644 index 000000000..a66240558 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house1.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house2.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house2.svg new file mode 100644 index 000000000..8d89c97df --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house2.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house3.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house3.svg new file mode 100644 index 000000000..5d1153c52 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house3.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house4.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house4.svg new file mode 100644 index 000000000..71f2d1df2 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/house4.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/ksen.jpg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/ksen.jpg new file mode 100644 index 000000000..de36f8ada Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/ksen.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/mainIcon.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/mainIcon.svg new file mode 100644 index 000000000..597487033 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/mainIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/trucking-car-com.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/trucking-car-com.svg new file mode 100644 index 000000000..cb003204b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/trucking-car-com.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/trucking-truck-svgrepo-com.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/trucking-truck-svgrepo-com.svg new file mode 100644 index 000000000..937af5561 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/icons/trucking-truck-svgrepo-com.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/index.css b/01-HTML-CSS/06-animations/HW/Ksenya/src/index.css new file mode 100644 index 000000000..ad5c070e1 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/index.css @@ -0,0 +1,14 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/logo.svg b/01-HTML-CSS/06-animations/HW/Ksenya/src/logo.svg new file mode 100644 index 000000000..9dfc1c058 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/main.jsx b/01-HTML-CSS/06-animations/HW/Ksenya/src/main.jsx new file mode 100644 index 000000000..de8cad7c1 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/main.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import { BrowserRouter as Router } from 'react-router-dom'; + + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/reportWebVitals.js b/01-HTML-CSS/06-animations/HW/Ksenya/src/reportWebVitals.js new file mode 100644 index 000000000..5253d3ad9 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/src/setupTests.js b/01-HTML-CSS/06-animations/HW/Ksenya/src/setupTests.js new file mode 100644 index 000000000..8f2609b7b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/01-HTML-CSS/06-animations/HW/Ksenya/vite.config.js b/01-HTML-CSS/06-animations/HW/Ksenya/vite.config.js new file mode 100644 index 000000000..b1b5f91e5 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Ksenya/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()] +}) diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/dist/style.css b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/dist/style.css new file mode 100644 index 000000000..093ec458a --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/dist/style.css @@ -0,0 +1,163 @@ +body { + margin: 0; + padding: 0; + background: #eeaeca; + background: radial-gradient(circle, #eeaeca 0%, #94bbe9 100%); + overflow-y: hidden; + overflow-x: hidden; +} + +.main { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + background: #eeaeca; + background: radial-gradient(circle, #eeaeca 0%, #94bbe9 100%); + position: relative; +} + +.whiteBalloon { + width: 10%; + left: 100px; + position: absolute; + animation-name: animation1; + animation-iteration-count: infinite; + animation-duration: 6s; +} + +.redBalloon { + width: 10%; + position: absolute; + animation-name: animation2; + animation-iteration-count: infinite; + animation-duration: 10s; +} + +.goldBalloon { + width: 10%; + position: absolute; + animation-name: animation2; + animation-iteration-count: infinite; + animation-duration: 8s; +} + +.faceBalloon { + width: 5%; + position: absolute; + animation-name: animation2; + animation-iteration-count: infinite; + animation-duration: 12s; +} + +.ballon1 { + left: 0%; + top: 100%; +} + +.ballon2 { + left: 25%; + top: 110%; +} + +.ballon3 { + left: 10%; + top: 120%; +} + +.ballon4 { + left: 50%; + top: 130%; +} + +.ballon5 { + left: 90%; + top: 140%; +} + +.ballon6 { + left: 5%; + top: 150%; +} + +.ballon7 { + left: 30%; + top: 150%; +} + +.ballon8 { + left: 60%; + top: 130%; +} + +.ballon9 { + left: 85%; + top: 140%; +} + +.ballon10 { + left: 10%; + top: 170%; +} + +.ballon11 { + left: 75%; + top: 180%; +} + +.ballon12 { + left: 35%; + top: 140%; +} + +.ballon13 { + left: 40%; + top: 105%; +} + +.ballon14 { + left: 25%; + top: 125%; +} + +.ballon15 { + left: 50%; + top: 150%; +} + +.ballon16 { + left: 15%; + top: 120%; +} + +.ballon17 { + left: 40%; + top: 115%; +} + +.ballon18 { + left: 65%; + top: 100%; +} + +.ballon19 { + left: 55%; + top: 130%; +} + +.ballon20 { + left: 20%; + top: 100%; +} + +@keyframes animation1 { + 100% { + top: -500px; + width: 15%; + } +} +@keyframes animation2 { + 100% { + top: -400px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/GoldBallon.png b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/GoldBallon.png new file mode 100644 index 000000000..2e754f897 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/GoldBallon.png differ diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/RedBalloon.png b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/RedBalloon.png new file mode 100644 index 000000000..fbbcdd887 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/RedBalloon.png differ diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/WhiteBalloon.png b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/WhiteBalloon.png new file mode 100644 index 000000000..741545460 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/WhiteBalloon.png differ diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/WhiteFaceBalloon.png b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/WhiteFaceBalloon.png new file mode 100644 index 000000000..977bd6e5e Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/images/WhiteFaceBalloon.png differ diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/index.html b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/index.html new file mode 100644 index 000000000..932321782 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/index.html @@ -0,0 +1,34 @@ + + + + + + + + Animations + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.css b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.css new file mode 100644 index 000000000..6672fe68f --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.css @@ -0,0 +1,187 @@ +body { + margin: 0; + padding: 0; + background: rgb(238, 174, 202); + background: radial-gradient(circle, rgb(238, 174, 202) 0%, rgb(148, 187, 233) 100%); + overflow-y: hidden; + overflow-x: hidden; +} + +.main { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + background: rgb(238, 174, 202); + background: radial-gradient(circle, rgb(238, 174, 202) 0%, rgb(148, 187, 233) 100%); + position: relative; +} + +.whiteBalloon { + width: 10%; + left: 100px; + position: absolute; + -webkit-animation-name: animation1; + animation-name: animation1; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 6s; + animation-duration: 6s; +} + +.redBalloon { + width: 10%; + position: absolute; + -webkit-animation-name: animation2; + animation-name: animation2; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 10s; + animation-duration: 10s; +} + +.goldBalloon { + width: 10%; + position: absolute; + -webkit-animation-name: animation2; + animation-name: animation2; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 8s; + animation-duration: 8s; +} + +.faceBalloon { + width: 5%; + position: absolute; + -webkit-animation-name: animation2; + animation-name: animation2; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 12s; + animation-duration: 12s; +} + +.ballon1 { + left: 0%; + top: 100%; +} + +.ballon2 { + left: 25%; + top: 110%; +} + +.ballon3 { + left: 10%; + top: 120%; +} + +.ballon4 { + left: 50%; + top: 130%; +} + +.ballon5 { + left: 90%; + top: 140%; +} + +.ballon6 { + left: 5%; + top: 150%; +} + +.ballon7 { + left: 30%; + top: 150%; +} + +.ballon8 { + left: 60%; + top: 130%; +} + +.ballon9 { + left: 85%; + top: 140%; +} + +.ballon10 { + left: 10%; + top: 170%; +} + +.ballon11 { + left: 75%; + top: 180%; +} + +.ballon12 { + left: 35%; + top: 140%; +} + +.ballon13 { + left: 40%; + top: 105%; +} + +.ballon14 { + left: 25%; + top: 125%; +} + +.ballon15 { + left: 50%; + top: 150%; +} + +.ballon16 { + left: 15%; + top: 120%; +} + +.ballon17 { + left: 40%; + top: 115%; +} + +.ballon18 { + left: 65%; + top: 100%; +} + +.ballon19 { + left: 55%; + top: 130%; +} + +.ballon20 { + left: 20%; + top: 100%; +} + +@-webkit-keyframes animation1 { + 100% { + top: -500px; + width: 15%; + } +} + +@keyframes animation1 { + 100% { + top: -500px; + width: 15%; + } +} +@-webkit-keyframes animation2 { + 100% { + top: -400px; + } +} +@keyframes animation2 { + 100% { + top: -400px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.css.map b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.css.map new file mode 100644 index 000000000..ed2114006 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,SAAA;EACA,UAAA;EACA,8BAAA;EACA,mFAAA;EACA,kBAAA;EACA,kBAAA;ACAJ;;ADGA;EACI,YAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,8BAAA;EACA,mFAAA;EACA,kBAAA;ACAJ;;ADEA;EACI,UAAA;EACA,WAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8BAAA;UAAA,sBAAA;ACCJ;;ADEA;EACI,UAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,+BAAA;UAAA,uBAAA;ACCJ;;ADEA;EACI,UAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8BAAA;UAAA,sBAAA;ACCJ;;ADEA;EACI,SAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,+BAAA;UAAA,uBAAA;ACCJ;;ADEA;EACI,QAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,QAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI,SAAA;EACA,SAAA;ACCJ;;ADEA;EACI;IACI,WAAA;IACA,UAAA;ECCN;AACF;;ADLA;EACI;IACI,WAAA;IACA,UAAA;ECCN;AACF;ADEA;EACI;IACI,WAAA;ECAN;AACF;ADHA;EACI;IACI,WAAA;ECAN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.scss b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.scss new file mode 100644 index 000000000..9534e3dd0 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Nikita Rossenko/style.scss @@ -0,0 +1,165 @@ + +body { + margin: 0; + padding: 0; + background: rgb(238,174,202); + background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); + overflow-y: hidden; + overflow-x: hidden; +} + +.main{ + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + background: rgb(238,174,202); + background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); + position: relative; +} +.whiteBalloon { + width: 10%; + left: 100px; + position: absolute; + animation-name: animation1; + animation-iteration-count: infinite; + animation-duration: 6s; +} + +.redBalloon { + width: 10%; + position: absolute; + animation-name: animation2; + animation-iteration-count: infinite; + animation-duration: 10s; +} + +.goldBalloon { + width: 10%; + position: absolute; + animation-name: animation2; + animation-iteration-count: infinite; + animation-duration: 8s; +} + +.faceBalloon { + width: 5%; + position: absolute; + animation-name: animation2; + animation-iteration-count: infinite; + animation-duration: 12s; +} + +.ballon1 { + left: 0%; + top: 100%; +} + +.ballon2 { + left: 25%; + top: 110%; +} + +.ballon3 { + left: 10%; + top: 120%; +} + +.ballon4 { + left: 50%; + top: 130%; +} + +.ballon5 { + left: 90%; + top: 140%; +} + +.ballon6 { + left: 5%; + top: 150%; +} + +.ballon7 { + left: 30%; + top: 150%; +} + +.ballon8 { + left: 60%; + top: 130%; +} + +.ballon9 { + left: 85%; + top: 140%; +} + +.ballon10 { + left: 10%; + top: 170%; +} + +.ballon11 { + left: 75%; + top: 180%; +} + +.ballon12 { + left: 35%; + top: 140%; +} + +.ballon13 { + left: 40%; + top: 105%; +} + +.ballon14 { + left: 25%; + top: 125%; +} + +.ballon15 { + left: 50%; + top: 150%; +} + +.ballon16 { + left: 15%; + top: 120%; +} + +.ballon17 { + left: 40%; + top: 115%; +} + +.ballon18 { + left: 65%; + top: 100%; +} + +.ballon19 { + left: 55%; + top: 130%; +} + +.ballon20 { + left: 20%; + top: 100%; +} + +@keyframes animation1 { + 100% { + top: -500px; + width: 15%; + } +} + +@keyframes animation2 { + 100% { + top: -400px; + } +} + diff --git a/01-HTML-CSS/06-animations/HW/Shai-li/dist/style.css b/01-HTML-CSS/06-animations/HW/Shai-li/dist/style.css new file mode 100644 index 000000000..b46854349 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shai-li/dist/style.css @@ -0,0 +1,106 @@ +body { + margin: 0%; + background-color: black; +} + +.pacman { + height: 0; + width: 0; + border-top: 50px solid yellow; + border-left: 50px solid yellow; + border-bottom: 50px solid yellow; + border-right: 50px solid black; + border-radius: 100px; + position: relative; + animation-name: trip; + animation-duration: 7s; + animation-direction: alternate; + animation-iteration-count: infinite; +} + +@keyframes trip { + 0% { + top: 20px; + left: 25px; + } + 5% { + top: 20px; + left: 45px; + } + 10% { + top: 20px; + left: 65px; + } + 15% { + top: 20px; + left: 85px; + } + 20% { + top: 20px; + left: 105px; + } + 25% { + top: 45px; + left: 105px; + } + 30% { + top: 65px; + left: 105px; + } + 35% { + top: 85px; + left: 105px; + } + 40% { + top: 105px; + left: 105px; + } + 45% { + top: 125px; + left: 105px; + } + 50% { + top: 145px; + left: 105px; + } + 55% { + top: 165px; + left: 105px; + } + 60% { + top: 185px; + left: 105px; + } + 65% { + top: 185px; + left: 125px; + } + 70% { + top: 185px; + left: 145px; + } + 75% { + top: 185px; + left: 165px; + } + 80% { + top: 185px; + left: 185px; + } + 85% { + top: 205px; + left: 185px; + } + 90% { + top: 225px; + left: 185px; + } + 95% { + top: 225px; + left: 205px; + } + 100% { + top: 225px; + left: 225px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shai-li/index.html b/01-HTML-CSS/06-animations/HW/Shai-li/index.html new file mode 100644 index 000000000..a5ebc9a8f --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shai-li/index.html @@ -0,0 +1,17 @@ + + + + + + + Pacman + + + +
+ + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shai-li/style.css b/01-HTML-CSS/06-animations/HW/Shai-li/style.css new file mode 100644 index 000000000..f0231fe83 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shai-li/style.css @@ -0,0 +1,197 @@ +body { + margin: 0%; + background-color: black; +} + +.pacman { + height: 0; + width: 0; + border-top: 50px solid yellow; + border-left: 50px solid yellow; + border-bottom: 50px solid yellow; + border-right: 50px solid rgb(0, 0, 0); + border-radius: 100px; + position: relative; + -webkit-animation-name: trip; + animation-name: trip; + -webkit-animation-duration: 7s; + animation-duration: 7s; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +@-webkit-keyframes trip { + 0% { + top: 20px; + left: 25px; + } + 5% { + top: 20px; + left: 45px; + } + 10% { + top: 20px; + left: 65px; + } + 15% { + top: 20px; + left: 85px; + } + 20% { + top: 20px; + left: 105px; + } + 25% { + top: 45px; + left: 105px; + } + 30% { + top: 65px; + left: 105px; + } + 35% { + top: 85px; + left: 105px; + } + 40% { + top: 105px; + left: 105px; + } + 45% { + top: 125px; + left: 105px; + } + 50% { + top: 145px; + left: 105px; + } + 55% { + top: 165px; + left: 105px; + } + 60% { + top: 185px; + left: 105px; + } + 65% { + top: 185px; + left: 125px; + } + 70% { + top: 185px; + left: 145px; + } + 75% { + top: 185px; + left: 165px; + } + 80% { + top: 185px; + left: 185px; + } + 85% { + top: 205px; + left: 185px; + } + 90% { + top: 225px; + left: 185px; + } + 95% { + top: 225px; + left: 205px; + } + 100% { + top: 225px; + left: 225px; + } +} + +@keyframes trip { + 0% { + top: 20px; + left: 25px; + } + 5% { + top: 20px; + left: 45px; + } + 10% { + top: 20px; + left: 65px; + } + 15% { + top: 20px; + left: 85px; + } + 20% { + top: 20px; + left: 105px; + } + 25% { + top: 45px; + left: 105px; + } + 30% { + top: 65px; + left: 105px; + } + 35% { + top: 85px; + left: 105px; + } + 40% { + top: 105px; + left: 105px; + } + 45% { + top: 125px; + left: 105px; + } + 50% { + top: 145px; + left: 105px; + } + 55% { + top: 165px; + left: 105px; + } + 60% { + top: 185px; + left: 105px; + } + 65% { + top: 185px; + left: 125px; + } + 70% { + top: 185px; + left: 145px; + } + 75% { + top: 185px; + left: 165px; + } + 80% { + top: 185px; + left: 185px; + } + 85% { + top: 205px; + left: 185px; + } + 90% { + top: 225px; + left: 185px; + } + 95% { + top: 225px; + left: 205px; + } + 100% { + top: 225px; + left: 225px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shai-li/style.css.map b/01-HTML-CSS/06-animations/HW/Shai-li/style.css.map new file mode 100644 index 000000000..9f30dbc0c --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shai-li/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,uBAAA;ACCF;;ADEA;EACE,SAAA;EACA,QAAA;EACA,6BAAA;EACA,8BAAA;EACA,gCAAA;EACA,qCAAA;EACA,oBAAA;EACA,kBAAA;EACA,4BAAA;UAAA,oBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,sCAAA;UAAA,8BAAA;EACA,2CAAA;UAAA,mCAAA;ACCF;;ADGA;EACE;IACE,SAAA;IACA,UAAA;ECAF;EDGA;IACE,SAAA;IACA,UAAA;ECDF;EDIA;IACE,SAAA;IACA,UAAA;ECFF;EDKA;IACE,SAAA;IACA,UAAA;ECHF;EDMA;IACE,SAAA;IACA,WAAA;ECJF;EDOA;IACE,SAAA;IACA,WAAA;ECLF;EDQA;IACE,SAAA;IACA,WAAA;ECNF;EDSA;IACE,SAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;AACF;;ADpFA;EACE;IACE,SAAA;IACA,UAAA;ECAF;EDGA;IACE,SAAA;IACA,UAAA;ECDF;EDIA;IACE,SAAA;IACA,UAAA;ECFF;EDKA;IACE,SAAA;IACA,UAAA;ECHF;EDMA;IACE,SAAA;IACA,WAAA;ECJF;EDOA;IACE,SAAA;IACA,WAAA;ECLF;EDQA;IACE,SAAA;IACA,WAAA;ECNF;EDSA;IACE,SAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;EDSA;IACE,UAAA;IACA,WAAA;ECPF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shai-li/style.scss b/01-HTML-CSS/06-animations/HW/Shai-li/style.scss new file mode 100644 index 000000000..cb7e56b62 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shai-li/style.scss @@ -0,0 +1,114 @@ +body{ + margin: 0%; + background-color: black; +} + +.pacman { + height: 0; + width: 0; + border-top: 50px solid yellow; + border-left: 50px solid yellow; + border-bottom: 50px solid yellow; + border-right: 50px solid rgb(0, 0, 0); + border-radius: 100px; + position: relative; + animation-name: trip; + animation-duration: 7s; + animation-direction: alternate; + animation-iteration-count: infinite; +} + + +@keyframes trip{ + 0%{ + top: 20px; + left: 25px; + } + + 5%{ + top: 20px; + left: 45px; + } + + 10%{ + top: 20px; + left: 65px; + } + + 15%{ + top: 20px; + left: 85px; + } + + 20%{ + top: 20px; + left: 105px; + } + + 25%{ + top: 45px; + left: 105px; + } + + 30%{ + top: 65px; + left: 105px; + } + + 35%{ + top: 85px; + left: 105px; + } + 40%{ + top: 105px; + left: 105px; + } + 45%{ + top: 125px; + left: 105px; + } + 50%{ + top: 145px; + left: 105px; + } + 55%{ + top: 165px; + left: 105px; + } + 60%{ + top: 185px; + left: 105px; + } + 65%{ + top: 185px; + left: 125px; + } + 70%{ + top: 185px; + left: 145px; + } + 75%{ + top: 185px; + left: 165px; + } + 80%{ + top: 185px; + left: 185px; + } + 85%{ + top: 205px; + left: 185px; + } + 90%{ + top: 225px; + left: 185px; + } + 95%{ + top: 225px; + left: 205px; + } + 100%{ + top: 225px; + left: 225px; + } +} diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/.vscode/settings.json b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/cobtrol.js b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/cobtrol.js new file mode 100644 index 000000000..596a8eb67 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/cobtrol.js @@ -0,0 +1,3 @@ +document.querySelector( "#retrobg-sun" ).onclick = () => { + document.querySelector( "#retrobg" ).classList.toggle( "retrobg-shutdown" ); +}; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/dist/cobtrol.dev.js b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/dist/cobtrol.dev.js new file mode 100644 index 000000000..100af43cf --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/dist/cobtrol.dev.js @@ -0,0 +1,5 @@ +"use strict"; + +document.querySelector("#retrobg-sun").onclick = function () { + document.querySelector("#retrobg").classList.toggle("retrobg-shutdown"); +}; \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/dist/style.css b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/dist/style.css new file mode 100644 index 000000000..bb050f4e2 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/dist/style.css @@ -0,0 +1,650 @@ +body { + position: relative; + background-color: #99233a; + overflow: hidden; + margin-top: 20%; + margin-right: 20%; + margin-left: 20%; + margin-bottom: 20%; +} + +.pak_man { + position: relative; + top: 5vh; + bottom: 5vh; + left: 2.5vw; + right: 2.5vw; + animation-name: game_over; + margin-left: 25%; + margin-top: 2%; +} +.pak_man__b { + position: absolute; + border-radius: 3%; + border: solid 1px black; +} +.pak_man__1 { + animation-name: mov_1; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 5px; + left: 5px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__2 { + animation-name: mov_2; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 280px; + left: 3px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__3 { + animation-name: mov_3; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 280px; + left: 382px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__4 { + animation-name: mov_4; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + position: absolute; + top: 22px; + left: 282px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__5 { + animation-name: mov_5; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + position: absolute; + top: 142px; + left: 183px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__6 { + animation-name: mov_6; + animation-duration: 2.5s; + animation-iteration-count: infinite; + animation-direction: alternate; + position: absolute; + top: 141px; + left: 62px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__7 { + animation-name: mov_7; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 262px; + left: 65px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__8 { + animation-name: mov_8; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 5px; + left: 381px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__9 { + animation-name: mov_9; + animation-duration: 2s; + animation-iteration-count: infinite; + position: absolute; + top: 21px; + left: 66px; + width: 18px; + height: 18px; + border-radius: 55%; +} + +.game_over { + position: relative; + animation-name: game_over_1; + animation-duration: 10s; + animation-iteration-count: infinite; + margin-left: 25%; +} +.game_over__t { + font-size: 30px; + animation-name: game_over_2; + animation-duration: 8s; + animation-iteration-count: 1; + position: absolute; + top: 45vh; + left: 15vw; + border-radius: 50px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 10px; + padding-top: 10px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + text-align: center; + background-color: #d3cdc6; + color: red; + border: solid red 5px; +} + +@keyframes game_over_2 { + 0% { + opacity: 0%; + font-size: 10px; + transform: rotateZ(0deg); + } + 100% { + opacity: 100%; + font-size: 30px; + transform: rotateZ(360deg); + } +} +@keyframes mov_1 { + 0% { + top: 5px; + left: 5px; + } + 20% { + top: 18px; + left: 5px; + } + 40% { + top: 18px; + left: 20px; + } + 80% { + top: 5px; + left: 20px; + } + 100% { + top: 5px; + left: 5px; + } +} +@keyframes mov_2 { + 0% { + top: 280px; + left: 3px; + } + 20% { + top: 280px; + left: 21px; + } + 40% { + top: 264px; + left: 21px; + } + 80% { + top: 264px; + left: 3px; + } + 100% { + top: 280px; + left: 3px; + } +} +@keyframes mov_3 { + 0% { + top: 280px; + left: 382px; + } + 20% { + top: 280px; + left: 366px; + } + 40% { + top: 264px; + left: 366px; + } + 80% { + top: 267px; + left: 382px; + } + 100% { + top: 280px; + left: 382px; + } +} +@keyframes mov_8 { + 0% { + top: 5px; + left: 381px; + } + 20% { + top: 20px; + left: 381px; + } + 40% { + top: 20px; + left: 366px; + } + 80% { + top: 5px; + left: 366px; + } + 100% { + top: 5px; + left: 381px; + } +} +@keyframes mov_9 { + 14% { + top: 21px; + left: 66px; + } + 28% { + top: 21px; + left: 82px; + } + 42% { + top: 21px; + left: 102; + } + 56% { + top: 21px; + left: 122px; + } + 70% { + top: 21px; + left: 142px; + } + 84% { + opacity: 70%; + top: 21px; + left: 162px; + } + 100% { + opacity: 0%; + top: 21px; + left: 182px; + } +} +@keyframes mov_4 { + 0% { + top: 22px; + left: 282px; + } + 20% { + top: 22px; + left: 262px; + } + 40% { + top: 22px; + left: 242px; + } + 80% { + opacity: 80%; + top: 22px; + left: 222px; + } + 100% { + opacity: 0%; + top: 22px; + left: 202px; + } +} +@keyframes mov_6 { + 0% { + top: 141px; + left: 62px; + } + 20% { + top: 121px; + left: 62px; + } + 30% { + top: 101px; + left: 62px; + } + 40% { + top: 101px; + left: 42px; + } + 50% { + top: 101px; + left: 22px; + } + 60% { + top: 81px; + left: 22px; + } + 70% { + top: 61px; + left: 22px; + } + 80% { + top: 61px; + left: 42px; + } + 90% { + top: 61px; + left: 62px; + } + 100% { + top: 41px; + left: 62px; + } +} +@keyframes mov_5 { + 0% { + top: 142px; + left: 183px; + } + 10% { + top: 142px; + left: 163px; + } + 20% { + top: 142px; + left: 143px; + } + 30% { + top: 142px; + left: 123px; + } + 40% { + top: 162px; + left: 123px; + } + 50% { + top: 182px; + left: 123px; + } + 60% { + top: 182px; + left: 103px; + } + 70% { + top: 202px; + left: 103px; + } + 85% { + top: 222px; + left: 103px; + } + 100% { + top: 242px; + left: 103px; + } +} +@keyframes mov_7 { + 0% { + top: 262px; + left: 65px; + } + 13% { + top: 262px; + left: 85px; + } + 26% { + top: 262px; + left: 105px; + } + 39% { + top: 242px; + left: 105px; + } + 52% { + top: 222px; + left: 105px; + } + 65% { + top: 202px; + left: 105px; + } + 78% { + top: 182px; + left: 105px; + } + 91% { + top: 162px; + left: 105px; + } + 100% { + top: 162px; + left: 125px; + } +} +html, body { + margin: 0; + height: 100%; +} + +/* ............................................................... */ +/* ............................................................... */ +/* ............................................................... */ +#retrobg { + position: relative; + overflow: hidden; + height: 100%; + color: #a3c; + background-color: #000; +} + +/* ............................................................... */ +#retrobg-sky { + position: absolute; + display: flex; + align-items: flex-end; + justify-content: center; + top: 0; + width: 100%; + height: 55%; + background: linear-gradient(#214 75%, #249); +} + +/* ............................................................... */ +#retrobg-sunWrap { + position: relative; + width: 40%; + margin-bottom: -15%; +} + +#retrobg-sun { + --glow-color: #d44; + padding-top: 100%; + border-radius: 50%; + background-image: linear-gradient(#fcdf11, #ff623f, #fe2085 50%); + box-shadow: 0 0 160px 80px var(--glow-color); + animation: 2s ease infinite alternate retrobg-sun-glow-anim; +} + +.retrobg-shutdown #retrobg-sun { + background-image: linear-gradient(#000, #000 40%); + --glow-color: #000; +} + +@keyframes retrobg-sun-glow-anim { + from { + box-shadow: 0 0 160px 80px var(--glow-color); + } + to { + box-shadow: 0 0 200px 95px var(--glow-color); + } +} +/* ............................................................... */ +#retrobg-stars { + position: absolute; + width: 100%; + height: 100%; +} + +.retrobg-star { + position: absolute; + border-radius: 50%; + width: 2px; + height: 2px; + background-color: #fff; +} + +/* ............................................................... */ +#retrobg-mountains { + position: absolute; + width: 100%; + height: 30%; +} + +.retrobg-mountain { + position: absolute; + width: 30%; + height: 100%; + background-image: linear-gradient(#000 70%, #111 85%, #fff1); +} + +#retrobg-mountains-left { + left: 0; + clip-path: polygon(0% 100%, 0% 55%, 5% 60%, 10% 55%, 20% 50%, 25% 42%, 30% 38%, 33% 35%, 40% 45%, 50% 50%, 60% 70%, 70% 85%, 75% 82%, 80% 91%, 85% 90%, 90% 95%, 95% 98%, 100% 100%); +} + +#retrobg-mountains-right { + right: 0; + clip-path: polygon(0% 100%, 5% 95%, 10% 85%, 15% 87%, 20% 80%, 25% 78%, 30% 65%, 40% 70%, 50% 57%, 60% 53%, 67% 68%, 70% 70%, 75% 66%, 80% 55%, 90% 50%, 95% 60%, 100% 57%, 100% 100%); +} + +/* ............................................................... */ +#retrobg-cityWrap { + position: absolute; + width: 50%; + margin-left: -1%; +} + +#retrobg-city { + padding-top: 20%; +} + +.retrobg-building { + position: absolute; + width: 5%; + height: 100%; + bottom: 0; + border-radius: 4px 4px 0 0; + background-image: linear-gradient(0deg, rgba(17, 17, 34, 0), #112 30px, #000); +} + +.retrobg-building:nth-child(odd) { + background-image: linear-gradient(0deg, rgba(24, 24, 42, 0), #223 30px, #000); +} + +.retrobg-antenna::after { + content: ""; + position: absolute; + left: 50%; + margin-left: calc( -1px - 5% ); + bottom: 100%; + width: 10%; + min-width: 2px; + height: 33%; + background-color: #000; +} + +/* ............................................................... */ +#retrobg-ground { + position: absolute; + overflow: hidden; + width: 100%; + height: 45%; + bottom: 0; + border-top: 2px solid #bf578c; + background-color: #000; +} + +.retrobg-shutdown #retrobg-ground { + border-color: #000; +} + +#retrobg-groundShadow { + position: absolute; + top: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(#000 0%, transparent); +} + +/* ............................................................... */ +#retrobg-linesWrap { + height: 100%; + perspective: 1000px; + perspective-origin: center top; +} + +#retrobg-lines { + position: absolute; + width: 100%; + height: 100%; + transform-origin: top center; + animation: 0.35s linear infinite retrobg-lines-anim; +} + +.retrobg-shutdown #retrobg-lines { + animation-duration: 5s; +} + +@keyframes retrobg-lines-anim { + from { + transform: rotateX(84deg) translateY(0); + } + to { + transform: rotateX(84deg) translateY(100px); + } +} +#retrobg-hlines, +#retrobg-vlines { + position: absolute; + left: calc( ( 900% - 100% ) / -2 ); + width: 900%; + height: 500%; +} + +#retrobg-vlines { + display: flex; + justify-content: center; +} + +.retrobg-hline, +.retrobg-vline { + width: 100%; + height: 100%; + background-color: currentColor; +} + +.retrobg-hline { + height: 3px; +} + +.retrobg-vline { + width: 3px; +} + +.retrobg-hline + .retrobg-hline { + margin-top: 98px; +} + +.retrobg-vline + .retrobg-vline { + margin-left: 48px; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/9.gif b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/9.gif new file mode 100644 index 000000000..a6a5376b6 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/9.gif differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d1.jpg b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d1.jpg new file mode 100644 index 000000000..7d2507952 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d1.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d2.jpg b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d2.jpg new file mode 100644 index 000000000..12ad3360b Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d2.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d3.jpg b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d3.jpg new file mode 100644 index 000000000..9ec768ffe Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d3.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d4.jpg b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d4.jpg new file mode 100644 index 000000000..4e5694832 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/d4.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/pakman.png b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/pakman.png new file mode 100644 index 000000000..16d3ae2f1 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/img/pakman.png differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/index.html b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/index.html new file mode 100644 index 000000000..99eed2726 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/index.html @@ -0,0 +1,180 @@ + + + + + + + + Document + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + +
+



+
+

game over !!!

> +
+ + + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/pakman.png b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/pakman.png new file mode 100644 index 000000000..16d3ae2f1 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/pakman.png differ diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.css b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.css new file mode 100644 index 000000000..f8fe6479e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.css @@ -0,0 +1,989 @@ +body { + position: relative; + background-color: rgb(153, 35, 58); + overflow: hidden; + margin-top: 20%; + margin-right: 20%; + margin-left: 20%; + margin-bottom: 20%; +} + +.pak_man { + position: relative; + top: 5vh; + bottom: 5vh; + left: 2.5vw; + right: 2.5vw; + -webkit-animation-name: game_over; + animation-name: game_over; + margin-left: 25%; + margin-top: 2%; +} +.pak_man__b { + position: absolute; + border-radius: 3%; + border: solid 1px rgb(0, 0, 0); +} +.pak_man__1 { + -webkit-animation-name: mov_1; + animation-name: mov_1; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: 5px; + left: 5px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__2 { + -webkit-animation-name: mov_2; + animation-name: mov_2; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: 280px; + left: 3px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__3 { + -webkit-animation-name: mov_3; + animation-name: mov_3; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: 280px; + left: 382px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__4 { + -webkit-animation-name: mov_4; + animation-name: mov_4; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + position: absolute; + top: 22px; + left: 282px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__5 { + -webkit-animation-name: mov_5; + animation-name: mov_5; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + position: absolute; + top: 142px; + left: 183px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__6 { + -webkit-animation-name: mov_6; + animation-name: mov_6; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + position: absolute; + top: 141px; + left: 62px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__7 { + -webkit-animation-name: mov_7; + animation-name: mov_7; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: 262px; + left: 65px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__8 { + -webkit-animation-name: mov_8; + animation-name: mov_8; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: 5px; + left: 381px; + width: 18px; + height: 18px; + border-radius: 25%; +} +.pak_man__9 { + -webkit-animation-name: mov_9; + animation-name: mov_9; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: 21px; + left: 66px; + width: 18px; + height: 18px; + border-radius: 55%; +} + +.game_over { + position: relative; + -webkit-animation-name: game_over_1; + animation-name: game_over_1; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + margin-left: 25%; +} +.game_over__t { + font-size: 30px; + -webkit-animation-name: game_over_2; + animation-name: game_over_2; + -webkit-animation-duration: 8s; + animation-duration: 8s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + position: absolute; + top: 45vh; + left: 15vw; + border-radius: 50px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 10px; + padding-top: 10px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + text-align: center; + background-color: rgb(211, 205, 198); + color: rgb(255, 0, 0); + border: solid rgb(255, 0, 0) 5px; +} + +@-webkit-keyframes game_over_2 { + 0% { + opacity: 0%; + font-size: 10px; + transform: rotateZ(0deg); + } + 100% { + opacity: 100%; + font-size: 30px; + transform: rotateZ(360deg); + } +} + +@keyframes game_over_2 { + 0% { + opacity: 0%; + font-size: 10px; + transform: rotateZ(0deg); + } + 100% { + opacity: 100%; + font-size: 30px; + transform: rotateZ(360deg); + } +} +@-webkit-keyframes mov_1 { + 0% { + top: 5px; + left: 5px; + } + 20% { + top: 18px; + left: 5px; + } + 40% { + top: 18px; + left: 20px; + } + 80% { + top: 5px; + left: 20px; + } + 100% { + top: 5px; + left: 5px; + } +} +@keyframes mov_1 { + 0% { + top: 5px; + left: 5px; + } + 20% { + top: 18px; + left: 5px; + } + 40% { + top: 18px; + left: 20px; + } + 80% { + top: 5px; + left: 20px; + } + 100% { + top: 5px; + left: 5px; + } +} +@-webkit-keyframes mov_2 { + 0% { + top: 280px; + left: 3px; + } + 20% { + top: 280px; + left: 21px; + } + 40% { + top: 264px; + left: 21px; + } + 80% { + top: 264px; + left: 3px; + } + 100% { + top: 280px; + left: 3px; + } +} +@keyframes mov_2 { + 0% { + top: 280px; + left: 3px; + } + 20% { + top: 280px; + left: 21px; + } + 40% { + top: 264px; + left: 21px; + } + 80% { + top: 264px; + left: 3px; + } + 100% { + top: 280px; + left: 3px; + } +} +@-webkit-keyframes mov_3 { + 0% { + top: 280px; + left: 382px; + } + 20% { + top: 280px; + left: 366px; + } + 40% { + top: 264px; + left: 366px; + } + 80% { + top: 267px; + left: 382px; + } + 100% { + top: 280px; + left: 382px; + } +} +@keyframes mov_3 { + 0% { + top: 280px; + left: 382px; + } + 20% { + top: 280px; + left: 366px; + } + 40% { + top: 264px; + left: 366px; + } + 80% { + top: 267px; + left: 382px; + } + 100% { + top: 280px; + left: 382px; + } +} +@-webkit-keyframes mov_8 { + 0% { + top: 5px; + left: 381px; + } + 20% { + top: 20px; + left: 381px; + } + 40% { + top: 20px; + left: 366px; + } + 80% { + top: 5px; + left: 366px; + } + 100% { + top: 5px; + left: 381px; + } +} +@keyframes mov_8 { + 0% { + top: 5px; + left: 381px; + } + 20% { + top: 20px; + left: 381px; + } + 40% { + top: 20px; + left: 366px; + } + 80% { + top: 5px; + left: 366px; + } + 100% { + top: 5px; + left: 381px; + } +} +@-webkit-keyframes mov_9 { + 14% { + top: 21px; + left: 66px; + } + 28% { + top: 21px; + left: 82px; + } + 42% { + top: 21px; + left: 102; + } + 56% { + top: 21px; + left: 122px; + } + 70% { + top: 21px; + left: 142px; + } + 84% { + opacity: 70%; + top: 21px; + left: 162px; + } + 100% { + opacity: 0%; + top: 21px; + left: 182px; + } +} +@keyframes mov_9 { + 14% { + top: 21px; + left: 66px; + } + 28% { + top: 21px; + left: 82px; + } + 42% { + top: 21px; + left: 102; + } + 56% { + top: 21px; + left: 122px; + } + 70% { + top: 21px; + left: 142px; + } + 84% { + opacity: 70%; + top: 21px; + left: 162px; + } + 100% { + opacity: 0%; + top: 21px; + left: 182px; + } +} +@-webkit-keyframes mov_4 { + 0% { + top: 22px; + left: 282px; + } + 20% { + top: 22px; + left: 262px; + } + 40% { + top: 22px; + left: 242px; + } + 80% { + opacity: 80%; + top: 22px; + left: 222px; + } + 100% { + opacity: 0%; + top: 22px; + left: 202px; + } +} +@keyframes mov_4 { + 0% { + top: 22px; + left: 282px; + } + 20% { + top: 22px; + left: 262px; + } + 40% { + top: 22px; + left: 242px; + } + 80% { + opacity: 80%; + top: 22px; + left: 222px; + } + 100% { + opacity: 0%; + top: 22px; + left: 202px; + } +} +@-webkit-keyframes mov_6 { + 0% { + top: 141px; + left: 62px; + } + 20% { + top: 121px; + left: 62px; + } + 30% { + top: 101px; + left: 62px; + } + 40% { + top: 101px; + left: 42px; + } + 50% { + top: 101px; + left: 22px; + } + 60% { + top: 81px; + left: 22px; + } + 70% { + top: 61px; + left: 22px; + } + 80% { + top: 61px; + left: 42px; + } + 90% { + top: 61px; + left: 62px; + } + 100% { + top: 41px; + left: 62px; + } +} +@keyframes mov_6 { + 0% { + top: 141px; + left: 62px; + } + 20% { + top: 121px; + left: 62px; + } + 30% { + top: 101px; + left: 62px; + } + 40% { + top: 101px; + left: 42px; + } + 50% { + top: 101px; + left: 22px; + } + 60% { + top: 81px; + left: 22px; + } + 70% { + top: 61px; + left: 22px; + } + 80% { + top: 61px; + left: 42px; + } + 90% { + top: 61px; + left: 62px; + } + 100% { + top: 41px; + left: 62px; + } +} +@-webkit-keyframes mov_5 { + 0% { + top: 142px; + left: 183px; + } + 10% { + top: 142px; + left: 163px; + } + 20% { + top: 142px; + left: 143px; + } + 30% { + top: 142px; + left: 123px; + } + 40% { + top: 162px; + left: 123px; + } + 50% { + top: 182px; + left: 123px; + } + 60% { + top: 182px; + left: 103px; + } + 70% { + top: 202px; + left: 103px; + } + 85% { + top: 222px; + left: 103px; + } + 100% { + top: 242px; + left: 103px; + } +} +@keyframes mov_5 { + 0% { + top: 142px; + left: 183px; + } + 10% { + top: 142px; + left: 163px; + } + 20% { + top: 142px; + left: 143px; + } + 30% { + top: 142px; + left: 123px; + } + 40% { + top: 162px; + left: 123px; + } + 50% { + top: 182px; + left: 123px; + } + 60% { + top: 182px; + left: 103px; + } + 70% { + top: 202px; + left: 103px; + } + 85% { + top: 222px; + left: 103px; + } + 100% { + top: 242px; + left: 103px; + } +} +@-webkit-keyframes mov_7 { + 0% { + top: 262px; + left: 65px; + } + 13% { + top: 262px; + left: 85px; + } + 26% { + top: 262px; + left: 105px; + } + 39% { + top: 242px; + left: 105px; + } + 52% { + top: 222px; + left: 105px; + } + 65% { + top: 202px; + left: 105px; + } + 78% { + top: 182px; + left: 105px; + } + 91% { + top: 162px; + left: 105px; + } + 100% { + top: 162px; + left: 125px; + } +} +@keyframes mov_7 { + 0% { + top: 262px; + left: 65px; + } + 13% { + top: 262px; + left: 85px; + } + 26% { + top: 262px; + left: 105px; + } + 39% { + top: 242px; + left: 105px; + } + 52% { + top: 222px; + left: 105px; + } + 65% { + top: 202px; + left: 105px; + } + 78% { + top: 182px; + left: 105px; + } + 91% { + top: 162px; + left: 105px; + } + 100% { + top: 162px; + left: 125px; + } +} +html, body { + margin: 0; + height: 100%; +} + +/* ............................................................... */ +/* ............................................................... */ +/* ............................................................... */ +#retrobg { + position: relative; + overflow: hidden; + height: 100%; + color: #a3c; + background-color: #000; +} + +/* ............................................................... */ +#retrobg-sky { + position: absolute; + display: flex; + align-items: flex-end; + justify-content: center; + top: 0; + width: 100%; + height: 55%; + background: linear-gradient(#214 75%, #249); +} + +/* ............................................................... */ +#retrobg-sunWrap { + position: relative; + width: 40%; + margin-bottom: -15%; +} + +#retrobg-sun { + --glow-color: #d44; + padding-top: 100%; + border-radius: 50%; + background-image: linear-gradient(#fcdf11, #ff623f, #fe2085 50%); + box-shadow: 0 0 160px 80px var(--glow-color); + -webkit-animation: 2s ease infinite alternate retrobg-sun-glow-anim; + animation: 2s ease infinite alternate retrobg-sun-glow-anim; +} + +.retrobg-shutdown #retrobg-sun { + background-image: linear-gradient(#000, #000 40%); + --glow-color: #000; +} + +@-webkit-keyframes retrobg-sun-glow-anim { + from { + box-shadow: 0 0 160px 80px var(--glow-color); + } + to { + box-shadow: 0 0 200px 95px var(--glow-color); + } +} + +@keyframes retrobg-sun-glow-anim { + from { + box-shadow: 0 0 160px 80px var(--glow-color); + } + to { + box-shadow: 0 0 200px 95px var(--glow-color); + } +} +/* ............................................................... */ +#retrobg-stars { + position: absolute; + width: 100%; + height: 100%; +} + +.retrobg-star { + position: absolute; + border-radius: 50%; + width: 2px; + height: 2px; + background-color: #fff; +} + +/* ............................................................... */ +#retrobg-mountains { + position: absolute; + width: 100%; + height: 30%; +} + +.retrobg-mountain { + position: absolute; + width: 30%; + height: 100%; + background-image: linear-gradient(#000 70%, #111 85%, rgba(255, 255, 255, 0.0666666667)); +} + +#retrobg-mountains-left { + left: 0; + -webkit-clip-path: polygon(0% 100%, 0% 55%, 5% 60%, 10% 55%, 20% 50%, 25% 42%, 30% 38%, 33% 35%, 40% 45%, 50% 50%, 60% 70%, 70% 85%, 75% 82%, 80% 91%, 85% 90%, 90% 95%, 95% 98%, 100% 100%); + clip-path: polygon(0% 100%, 0% 55%, 5% 60%, 10% 55%, 20% 50%, 25% 42%, 30% 38%, 33% 35%, 40% 45%, 50% 50%, 60% 70%, 70% 85%, 75% 82%, 80% 91%, 85% 90%, 90% 95%, 95% 98%, 100% 100%); +} + +#retrobg-mountains-right { + right: 0; + -webkit-clip-path: polygon(0% 100%, 5% 95%, 10% 85%, 15% 87%, 20% 80%, 25% 78%, 30% 65%, 40% 70%, 50% 57%, 60% 53%, 67% 68%, 70% 70%, 75% 66%, 80% 55%, 90% 50%, 95% 60%, 100% 57%, 100% 100%); + clip-path: polygon(0% 100%, 5% 95%, 10% 85%, 15% 87%, 20% 80%, 25% 78%, 30% 65%, 40% 70%, 50% 57%, 60% 53%, 67% 68%, 70% 70%, 75% 66%, 80% 55%, 90% 50%, 95% 60%, 100% 57%, 100% 100%); +} + +/* ............................................................... */ +#retrobg-cityWrap { + position: absolute; + width: 50%; + margin-left: -1%; +} + +#retrobg-city { + padding-top: 20%; +} + +.retrobg-building { + position: absolute; + width: 5%; + height: 100%; + bottom: 0; + border-radius: 4px 4px 0 0; + background-image: linear-gradient(0deg, rgba(17, 17, 34, 0), #112 30px, #000); +} + +.retrobg-building:nth-child(odd) { + background-image: linear-gradient(0deg, rgba(24, 24, 42, 0), #223 30px, #000); +} + +.retrobg-antenna::after { + content: ""; + position: absolute; + left: 50%; + margin-left: calc(-1px - 5%); + bottom: 100%; + width: 10%; + min-width: 2px; + height: 33%; + background-color: #000; +} + +/* ............................................................... */ +#retrobg-ground { + position: absolute; + overflow: hidden; + width: 100%; + height: 45%; + bottom: 0; + border-top: 2px solid #bf578c; + background-color: #000; +} + +.retrobg-shutdown #retrobg-ground { + border-color: #000; +} + +#retrobg-groundShadow { + position: absolute; + top: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(#000 0%, transparent); +} + +/* ............................................................... */ +#retrobg-linesWrap { + height: 100%; + perspective: 1000px; + perspective-origin: center top; +} + +#retrobg-lines { + position: absolute; + width: 100%; + height: 100%; + transform-origin: top center; + -webkit-animation: 0.35s linear infinite retrobg-lines-anim; + animation: 0.35s linear infinite retrobg-lines-anim; +} + +.retrobg-shutdown #retrobg-lines { + -webkit-animation-duration: 5s; + animation-duration: 5s; +} + +@-webkit-keyframes retrobg-lines-anim { + from { + transform: rotateX(84deg) translateY(0); + } + to { + transform: rotateX(84deg) translateY(100px); + } +} + +@keyframes retrobg-lines-anim { + from { + transform: rotateX(84deg) translateY(0); + } + to { + transform: rotateX(84deg) translateY(100px); + } +} +#retrobg-hlines, +#retrobg-vlines { + position: absolute; + left: -400%; + width: 900%; + height: 500%; +} + +#retrobg-vlines { + display: flex; + justify-content: center; +} + +.retrobg-hline, +.retrobg-vline { + width: 100%; + height: 100%; + background-color: currentColor; +} + +.retrobg-hline { + height: 3px; +} + +.retrobg-vline { + width: 3px; +} + +.retrobg-hline + .retrobg-hline { + margin-top: 98px; +} + +.retrobg-vline + .retrobg-vline { + margin-left: 48px; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.css.map b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.css.map new file mode 100644 index 000000000..5f2541387 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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DN;AACF;ADmDA;EACI;IACI,UAAA;IACA,SAAA;ECjDN;EDmDE;IACI,UAAA;IACA,UAAA;ECjDN;EDmDE;IACI,UAAA;IACA,UAAA;ECjDN;EDmDE;IACI,UAAA;IACA,SAAA;ECjDN;EDmDE;IACI,UAAA;IACA,SAAA;ECjDN;AACF;AD6BA;EACI;IACI,UAAA;IACA,SAAA;ECjDN;EDmDE;IACI,UAAA;IACA,UAAA;ECjDN;EDmDE;IACI,UAAA;IACA,UAAA;ECjDN;EDmDE;IACI,UAAA;IACA,SAAA;ECjDN;EDmDE;IACI,UAAA;IACA,SAAA;ECjDN;AACF;ADqDA;EACI;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;AACF;AD+BA;EACI;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;EDqDE;IACI,UAAA;IACA,WAAA;ECnDN;AACF;ADuDA;EACI;IACI,QAAA;IACA,WAAA;ECrDN;EDuDE;IACI,SAAA;IACA,WAAA;ECrDN;EDwDE;IACI,SAAA;IACA,WAAA;ECtDN;EDwDE;IACI,QAAA;IACA,WAAA;ECtDN;EDwDE;IACI,QAAA;IACA,WAAA;ECtDN;AACF;ADiCA;EACI;IACI,QAAA;IACA,WAAA;ECrDN;EDuDE;IACI,SAAA;IACA,WAAA;ECrDN;EDwDE;IACI,SAAA;IACA,WAAA;ECtDN;EDwDE;IACI,QAAA;IACA,WAAA;ECtDN;EDwDE;IACI,QAAA;IACA,WAAA;ECtDN;AACF;AD0DA;EACI;IACI,SAAA;IACA,UAAA;ECxDN;ED0DE;IACI,SAAA;IACA,UAAA;ECxDN;ED2DE;IACI,SAAA;IACA,SAAA;ECzDN;ED2DE;IACI,SAAA;IACA,WAAA;ECzDN;ED2DE;IACI,SAAA;IACA,WAAA;ECzDN;ED4DE;IACI,YAAA;IACA,SAAA;IACA,WAAA;EC1DN;ED6DE;IACI,WAAA;IACA,SAAA;IACA,WAAA;EC3DN;AACF;AD0BA;EACI;IACI,SAAA;IACA,UAAA;ECxDN;ED0DE;IACI,SAAA;IACA,UAAA;ECxDN;ED2DE;IACI,SAAA;IACA,SAAA;ECzDN;ED2DE;IACI,SAAA;IACA,WAAA;ECzDN;ED2DE;IACI,SAAA;IACA,WAAA;ECzDN;ED4DE;IACI,YAAA;IACA,SAAA;IACA,WAAA;EC1DN;ED6DE;IACI,WAAA;IACA,SAAA;IACA,WAAA;EC3DN;AACF;AD+DG;EACC;IACI,SAAA;IACA,WAAA;EC7DN;ED+DE;IAEI,SAAA;IACA,WAAA;EC9DN;EDgEE;IAEI,SAAA;IACA,WAAA;EC/DN;EDiEE;IACI,YAAA;IACA,SAAA;IACA,WAAA;EC/DN;EDiEE;IACI,WAAA;IACA,SAAA;IACA,WAAA;EC/DN;AACF;ADuCG;EACC;IACI,SAAA;IACA,WAAA;EC7DN;ED+DE;IAEI,SAAA;IACA,WAAA;EC9DN;EDgEE;IAEI,SAAA;IACA,WAAA;EC/DN;EDiEE;IACI,YAAA;IACA,SAAA;IACA,WAAA;EC/DN;EDiEE;IACI,WAAA;IACA,SAAA;IACA,WAAA;EC/DN;AACF;ADmEG;EACC;IACI,UAAA;IACA,UAAA;ECjEN;EDmEE;IACI,UAAA;IACA,UAAA;ECjEN;EDoEE;IAEI,UAAA;IACA,UAAA;ECnEN;EDqEE;IACI,UAAA;IACA,UAAA;ECnEN;EDqEE;IAEI,UAAA;IACA,UAAA;ECpEN;EDwEE;IACI,SAAA;IACA,UAAA;ECtEN;ED0EE;IACI,SAAA;IACA,UAAA;ECxEN;ED4EE;IACI,SAAA;IACA,UAAA;EC1EN;ED6EE;IACI,SAAA;IACA,UAAA;EC3EN;ED8EE;IACI,SAAA;IACA,UAAA;EC5EN;AACF;ADyBG;EACC;IACI,UAAA;IACA,UAAA;ECjEN;EDmEE;IACI,UAAA;IACA,UAAA;ECjEN;EDoEE;IAEI,UAAA;IACA,UAAA;ECnEN;EDqEE;IACI,UAAA;IACA,UAAA;ECnEN;EDqEE;IAEI,UAAA;IACA,UAAA;ECpEN;EDwEE;IACI,SAAA;IACA,UAAA;ECtEN;ED0EE;IACI,SAAA;IACA,UAAA;ECxEN;ED4EE;IACI,SAAA;IACA,UAAA;EC1EN;ED6EE;IACI,SAAA;IACA,UAAA;EC3EN;ED8EE;IACI,SAAA;IACA,UAAA;EC5EN;AACF;ADiFG;EACC;IACI,UAAA;IACA,WAAA;EC/EN;EDiFE;IACI,UAAA;IACA,WAAA;EC/EN;EDkFE;IAEI,UAAA;IACA,WAAA;ECjFN;EDmFE;IACI,UAAA;IACA,WAAA;ECjFN;EDmFE;IAEI,UAAA;IACA,WAAA;EClFN;EDsFE;IACI,UAAA;IACA,WAAA;ECpFN;EDwFE;IACI,UAAA;IACA,WAAA;ECtFN;ED0FE;IACI,UAAA;IACA,WAAA;ECxFN;ED2FE;IACI,UAAA;IACA,WAAA;ECzFN;ED4FE;IACI,UAAA;IACA,WAAA;EC1FN;AACF;ADuCG;EACC;IACI,UAAA;IACA,WAAA;EC/EN;EDiFE;IACI,UAAA;IACA,WAAA;EC/EN;EDkFE;IAEI,UAAA;IACA,WAAA;ECjFN;EDmFE;IACI,UAAA;IACA,WAAA;ECjFN;EDmFE;IAEI,UAAA;IACA,WAAA;EClFN;EDsFE;IACI,UAAA;IACA,WAAA;ECpFN;EDwFE;IACI,UAAA;IACA,WAAA;ECtFN;ED0FE;IACI,UAAA;IACA,WAAA;ECxFN;ED2FE;IACI,UAAA;IACA,WAAA;ECzFN;ED4FE;IACI,UAAA;IACA,WAAA;EC1FN;AACF;AD8FG;EACC;IACI,UAAA;IACA,UAAA;EC5FN;ED8FE;IACI,UAAA;IACA,UAAA;EC5FN;ED+FE;IAEI,UAAA;IACA,WAAA;EC9FN;EDgGE;IACI,UAAA;IACA,WAAA;EC9FN;EDgGE;IAEI,UAAA;IACA,WAAA;EC/FN;EDmGE;IACI,UAAA;IACA,WAAA;ECjGN;EDqGE;IACI,UAAA;IACA,WAAA;ECnGN;EDuGE;IACI,UAAA;IACA,WAAA;ECrGN;EDwGE;IACI,UAAA;IACA,WAAA;ECtGN;AACF;ADwDG;EACC;IACI,UAAA;IACA,UAAA;EC5FN;ED8FE;IACI,UAAA;IACA,UAAA;EC5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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.scss b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.scss new file mode 100644 index 000000000..6793fdc98 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Shlomi_Aznkot/style.scss @@ -0,0 +1,717 @@ + +body{ +position: relative; +background-color: rgb(153, 35, 58); +overflow: hidden; +margin-top: 20%; +margin-right: 20%; +margin-left: 20%; +margin-bottom: 20%; + +} +.pak_man{ +position: relative; +top:5vh; +bottom:5vh; +left: 2.5vw; +right: 2.5vw; +animation-name: game_over; +margin-left: 25%; +margin-top: 2%; + + + + + + &__b{ + position: absolute; + border-radius: 3%; + border: solid 1px rgb(0, 0, 0); + } + &__1{ + animation-name: mov_1; + animation-duration: 2.5s; + animation-iteration-count: infinite; + + position: absolute; + top: 5px; + left: 5px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__2{ + animation-name: mov_2; + animation-duration: 2.5s; + animation-iteration-count: infinite; + + position: absolute; + top: 280px; + left: 3px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__3{ + animation-name: mov_3; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 280px; + left: 382px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__4{ + animation-name: mov_4; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + position: absolute; + top: 22px; + left: 282px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__5{ + animation-name: mov_5; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + position: absolute; + top: 142px; + left: 183px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__6{ + animation-name: mov_6; + animation-duration: 2.5s; + animation-iteration-count: infinite; + animation-direction: alternate; + position: absolute; + top: 141px; + left: 62px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__7{ + + animation-name: mov_7; + animation-duration: 2.5s; + animation-iteration-count: infinite; + + position: absolute; + top: 262px; + left: 65px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__8{ + animation-name: mov_8; + animation-duration: 2.5s; + animation-iteration-count: infinite; + position: absolute; + top: 5px; + left: 381px; + width:18px ; + height: 18px; + border-radius: 25%; + + } + &__9{ + + animation-name: mov_9; + animation-duration: 2s; + animation-iteration-count: infinite; + + position: absolute; + top: 21px; + left: 66px; + width:18px ; + height: 18px; + border-radius: 55%; + } +} + + + +.game_over{ + position: relative; + animation-name:game_over_1 ; + animation-duration: 10s; + animation-iteration-count: infinite; + margin-left: 25%; + &__t{ + font-size: 30px; + animation-name:game_over_2 ; + animation-duration: 8s; + animation-iteration-count:1; + position: absolute; + top: 45vh; + left: 15vw; + border-radius:50px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 10px; + padding-top: 10px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-align: center; + background-color: rgb(211, 205, 198); + color: rgb(255, 0, 0); + border: solid rgb(255, 0, 0) 5px; + + } +} + +@keyframes game_over_2{ + 0%{ + opacity: 0%; + font-size:10px; + transform: rotateZ(0deg); + + } + + 100%{ + opacity: 100%; + font-size:30px; + transform: rotateZ(360deg); + + + } +} + + + + + + + + + + + + + + + + + + + + + +@keyframes mov_1 { + 0% { + top: 5px; + left: 5px; + } + 20% { + top: 18px; + left: 5px; + + } + 40% { + top: 18px; + left: 20px; + } + 80% { + top: 5px; + left: 20px; + } + 100% { + top: 5px; + left: 5px; + } + + } +@keyframes mov_2 { + 0% { + top: 280px; + left:3px; + } + 20% { + top: 280px; + left: 21px; + } + 40% { + top: 264px; + left: 21px + } + 80% { + top: 264px; + left: 3px; + } + 100% { + top: 280px; + left: 3px; + + } + + } +@keyframes mov_3 { + 0% { + top: 280px; + left: 382px; + } + 20% { + top: 280px; + left:366px; + } + 40% { + top: 264px; + left: 366px; + } + 80% { + top: 267px; + left: 382px; + } + 100% { + top: 280px; + left: 382px; + + } + + } +@keyframes mov_8 { + 0% { + top: 5px; + left: 381px + } + 20% { + top: 20px; + left: 381px; + + } + 40% { + top: 20px; + left: 366px; + } + 80% { + top: 5px; + left: 366px; + } + 100% { + top: 5px; + left: 381px; + + } + + } +@keyframes mov_9 { + 14% { + top: 21px; + left: 66px; + } + 28% { + top: 21px; + left: 82px; + + } + 42% { + top: 21px; + left: 102; + } + 56% { + top: 21px; + left: 122px; + } + 70% { + top: 21px; + left: 142px; + + } + 84% { + opacity:70%; + top: 21px; + left: 162px; + + } + 100% { + opacity:0%; + top: 21px; + left: 182px; + + } + + } + @keyframes mov_4 { + 0% { + top: 22px; + left: 282px; + } + 20% { + + top: 22px; + left: 262px; + } + 40% { + + top: 22px; + left: 242px + } + 80% { + opacity:80%; + top: 22px; + left: 222px; + } + 100% { + opacity:0%; + top: 22px; + left: 202px; + + } + + } + @keyframes mov_6 { + 0% { + top: 141px; + left: 62px; + } + 20% { + top: 121px; + left: 62px; + + } + 30% { + + top: 101px; + left: 62px; + } + 40% { + top: 101px; + left: 42px; + } + 50% { + + top: 101px; + left: 22px; + + } + + 60% { + top: 81px; + left: 22px; + + + } + 70% { + top: 61px; + left: 22px; + + } + + 80% { + top: 61px; + left: 42px; + + } + 90% { + top: 61px; + left: 62px; + + } + 100% { + top: 41px; + left: 62px; + + } + + } + + @keyframes mov_5 { + 0% { + top: 142px; + left: 183px; + } + 10% { + top: 142px; + left: 163px; + + } + 20% { + + top: 142px; + left: 143px; + } + 30% { + top: 142px; + left: 123px; + } + 40% { + + top: 162px; + left: 123px; + + } + + 50% { + top: 182px; + left: 123px; + + + } + 60% { + top: 182px; + left: 103px; + + } + + 70% { + top: 202px; + left: 103px; + + } + 85% { + top: 222px; + left: 103px; + + } + 100% { + top: 242px; + left: 103px; + + } + + } + @keyframes mov_7 { + 0% { + top: 262px; + left: 65px; + } + 13% { + top: 262px; + left: 85px; + + } + 26% { + + top: 262px; + left: 105px; + } + 39% { + top: 242px; + left: 105px; + } + 52% { + + top: 222px; + left: 105px; + + } + + 65% { + top: 202px; + left: 105px; + + + } + 78% { + top: 182px; + left: 105px; + + } + + 91% { + top: 162px; + left: 105px; + + } + 100% { + top: 162px; + left: 125px; + + } + + + } + html,body { + margin: 0; + height: 100%; + + + +} + +/* ............................................................... */ +/* ............................................................... */ +/* ............................................................... */ +#retrobg { + position: relative; + overflow: hidden; + height: 100%; + color: #a3c; + background-color: #000; +} + +/* ............................................................... */ +#retrobg-sky { + position: absolute; + display: flex; + align-items: flex-end; + justify-content: center; + top: 0; + width: 100%; + height: 55%; + background: linear-gradient( #214 75%, #249 ); +} + +/* ............................................................... */ +#retrobg-sunWrap { + position: relative; + width: 40%; + margin-bottom: -15%; +} +#retrobg-sun { + --glow-color: #d44; + padding-top: 100%; + border-radius: 50%; + background-image: linear-gradient( #fcdf11, #ff623f, #fe2085 50% ); + box-shadow: 0 0 160px 80px var( --glow-color ); + animation: 2s ease infinite alternate retrobg-sun-glow-anim; +} +.retrobg-shutdown #retrobg-sun { + background-image: linear-gradient( #000, #000 40% ); + --glow-color: #000; +} +@keyframes retrobg-sun-glow-anim { + from { box-shadow: 0 0 160px 80px var( --glow-color ); } + to { box-shadow: 0 0 200px 95px var( --glow-color ); } +} + +/* ............................................................... */ +#retrobg-stars { + position: absolute; + width: 100%; + height: 100%; +} +.retrobg-star { + position: absolute; + border-radius: 50%; + width: 2px; + height: 2px; + background-color: #fff; +} + +/* ............................................................... */ +#retrobg-mountains { + position: absolute; + width: 100%; + height: 30%; +} +.retrobg-mountain { + position: absolute; + width: 30%; + height: 100%; + background-image: linear-gradient( #000 70%, #111 85%, #fff1 ); +} +#retrobg-mountains-left { left: 0; clip-path: polygon( 0% 100%,0% 55%,5% 60%,10% 55%,20% 50%,25% 42%,30% 38%,33% 35%,40% 45%,50% 50%,60% 70%,70% 85%,75% 82%,80% 91%,85% 90%,90% 95%,95% 98%,100% 100% ); } +#retrobg-mountains-right { right: 0; clip-path: polygon( 0% 100%,5% 95%,10% 85%,15% 87%,20% 80%,25% 78%,30% 65%,40% 70%,50% 57%,60% 53%,67% 68%,70% 70%,75% 66%,80% 55%,90% 50%,95% 60%,100% 57%,100% 100% ); } + +/* ............................................................... */ +#retrobg-cityWrap { + position: absolute; + width: 50%; + margin-left: -1%; +} +#retrobg-city { + padding-top: 20%; +} +.retrobg-building { + position: absolute; + width: 5%; + height: 100%; + bottom: 0; + border-radius: 4px 4px 0 0; + background-image: linear-gradient( 0deg, rgba( 17, 17, 34, 0 ), #112 30px, #000 ); +} +.retrobg-building:nth-child( odd ) { + background-image: linear-gradient( 0deg, rgba( 24, 24, 42, 0 ), #223 30px, #000 ); +} +.retrobg-antenna::after { + content: ""; + position: absolute; + left: 50%; + margin-left: calc( -1px - 5% ); + bottom: 100%; + width: 10%; + min-width: 2px; + height: 33%; + background-color: #000; +} + +/* ............................................................... */ +#retrobg-ground { + position: absolute; + overflow: hidden; + width: 100%; + height: 45%; + bottom: 0; + border-top: 2px solid #bf578c; + background-color: #000; +} +.retrobg-shutdown #retrobg-ground { + border-color: #000; +} +#retrobg-groundShadow { + position: absolute; + top: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( #000 0%, transparent ); +} + +/* ............................................................... */ +#retrobg-linesWrap { + height: 100%; + perspective: 1000px; + perspective-origin: center top; +} +#retrobg-lines { + position: absolute; + width: 100%; + height: 100%; + transform-origin: top center; + animation: .35s linear infinite retrobg-lines-anim; +} +.retrobg-shutdown #retrobg-lines { + animation-duration: 5s; +} +@keyframes retrobg-lines-anim { + from { transform: rotateX( 84deg ) translateY( 0 ); } + to { transform: rotateX( 84deg ) translateY( 100px ); } +} +#retrobg-hlines, +#retrobg-vlines { + position: absolute; + left: calc( ( 900% - 100% ) / -2 ); + width: 900%; + height: 500%; +} +#retrobg-vlines { + display: flex; + justify-content: center; +} +.retrobg-hline, +.retrobg-vline { + width: 100%; + height: 100%; + background-color: currentColor; +} +.retrobg-hline { height: 3px; } +.retrobg-vline { width: 3px; } +.retrobg-hline + .retrobg-hline { margin-top: 98px; } +.retrobg-vline + .retrobg-vline { margin-left: 48px; } + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/TanyaHolczer/dist/style.css b/01-HTML-CSS/06-animations/HW/TanyaHolczer/dist/style.css new file mode 100644 index 000000000..fe5d5ac6b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/TanyaHolczer/dist/style.css @@ -0,0 +1,132 @@ +body { + background: #333; + height: 100vh; +} + +.balloon { + display: inline-block; + width: 120px; + height: 145px; + background: #799ed2; + border-radius: 80%; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); + margin: 20px 30px; + animation: animate 5s forwards 1s ease-in-out infinite; + position: relative; +} + +@keyframes animate { + from { + top: 100vh; + } + to { + top: -30vh; + } +} +.balloon:nth-child(2) { + background: #8882c9; + animation-duration: 3.5s; +} + +.balloon:nth-child(2):before { + color: #8882c9; +} + +.balloon:nth-child(3) { + background: #66cc86; + animation-duration: 3s; +} + +.balloon:nth-child(3):before { + color: #59a671; +} + +.balloon:nth-child(4) { + background: #c9c85e; + animation-duration: 4.5s; +} + +.balloon:nth-child(4):before { + color: #a9a860; +} + +.balloon:nth-child(5) { + background: #ce8355; + animation-duration: 5s; +} + +.balloon:nth-child(5):before { + color: #a96942; +} + +.balloon:nth-child(6) { + background: #c9c582; + animation-duration: 3.5s; +} + +.balloon:nth-child(6):before { + color: #bfc982; +} + +.balloon:nth-child(7) { + background: #12391e; + animation-duration: 3s; +} + +.balloon:nth-child(7):before { + color: #59a671; +} + +.balloon:nth-child(8) { + background: #c9c85e; + animation-duration: 4.5s; +} + +.balloon:nth-child(8):before { + color: #a9a860; +} + +.balloon:nth-child(9) { + background: #3a1bc1; + animation-duration: 5s; +} + +.balloon:nth-child(9):before { + color: #a96942; +} + +.balloon:nth-child(10) { + background: #82c9b8; + animation-duration: 3.5s; +} + +.balloon:nth-child(10):before { + color: #82c9b0; +} + +.balloon:nth-child(11) { + background: #cc668f; + animation-duration: 3s; +} + +.balloon:nth-child(11):before { + color: #a65963; +} + +.balloon:nth-child(12) { + background: #c9c85e; + animation-duration: 4.5s; +} + +.balloon:nth-child(12):before { + color: #a9a860; +} + +.balloon:nth-child(13) { + background: #55ce65; + animation-duration: 5s; +} + +.balloon:nth-child(13):before { + color: #55a942; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/TanyaHolczer/index.html b/01-HTML-CSS/06-animations/HW/TanyaHolczer/index.html new file mode 100644 index 000000000..e1badc0ba --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/TanyaHolczer/index.html @@ -0,0 +1,44 @@ + + + + + + + + Balloons + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + diff --git a/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.css b/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.css new file mode 100644 index 000000000..beb88f906 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.css @@ -0,0 +1,154 @@ +body { + background: #333; + height: 100vh; +} + +.balloon { + display: inline-block; + width: 120px; + height: 145px; + background: hsl(215deg, 50%, 65%); + border-radius: 80%; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); + margin: 20px 30px; + -webkit-animation: animate 5s forwards 1s ease-in-out infinite; + animation: animate 5s forwards 1s ease-in-out infinite; + position: relative; +} + +@-webkit-keyframes animate { + from { + top: 100vh; + } + to { + top: -30vh; + } +} + +@keyframes animate { + from { + top: 100vh; + } + to { + top: -30vh; + } +} +.balloon:nth-child(2) { + background: hsl(245deg, 40%, 65%); + -webkit-animation-duration: 3.5s; + animation-duration: 3.5s; +} + +.balloon:nth-child(2):before { + color: hsl(245deg, 40%, 65%); +} + +.balloon:nth-child(3) { + background: hsl(139deg, 50%, 60%); + -webkit-animation-duration: 3s; + animation-duration: 3s; +} + +.balloon:nth-child(3):before { + color: hsl(139deg, 30%, 50%); +} + +.balloon:nth-child(4) { + background: hsl(59deg, 50%, 58%); + -webkit-animation-duration: 4.5s; + animation-duration: 4.5s; +} + +.balloon:nth-child(4):before { + color: hsl(59deg, 30%, 52%); +} + +.balloon:nth-child(5) { + background: hsl(23deg, 55%, 57%); + -webkit-animation-duration: 5s; + animation-duration: 5s; +} + +.balloon:nth-child(5):before { + color: hsl(23deg, 44%, 46%); +} + +.balloon:nth-child(6) { + background: rgb(201, 197, 130); + -webkit-animation-duration: 3.5s; + animation-duration: 3.5s; +} + +.balloon:nth-child(6):before { + color: rgb(191, 201, 130); +} + +.balloon:nth-child(7) { + background: rgb(18, 57, 30); + -webkit-animation-duration: 3s; + animation-duration: 3s; +} + +.balloon:nth-child(7):before { + color: hsl(139deg, 30%, 50%); +} + +.balloon:nth-child(8) { + background: hsl(59deg, 50%, 58%); + -webkit-animation-duration: 4.5s; + animation-duration: 4.5s; +} + +.balloon:nth-child(8):before { + color: hsl(59deg, 30%, 52%); +} + +.balloon:nth-child(9) { + background: rgb(58, 27, 193); + -webkit-animation-duration: 5s; + animation-duration: 5s; +} + +.balloon:nth-child(9):before { + color: hsl(23deg, 44%, 46%); +} + +.balloon:nth-child(10) { + background: rgb(130, 201, 184); + -webkit-animation-duration: 3.5s; + animation-duration: 3.5s; +} + +.balloon:nth-child(10):before { + color: rgb(130, 201, 176); +} + +.balloon:nth-child(11) { + background: rgb(204, 102, 143); + -webkit-animation-duration: 3s; + animation-duration: 3s; +} + +.balloon:nth-child(11):before { + color: rgb(166, 89, 99); +} + +.balloon:nth-child(12) { + background: hsl(59deg, 50%, 58%); + -webkit-animation-duration: 4.5s; + animation-duration: 4.5s; +} + +.balloon:nth-child(12):before { + color: hsl(59deg, 30%, 52%); +} + +.balloon:nth-child(13) { + background: rgb(85, 206, 101); + -webkit-animation-duration: 5s; + animation-duration: 5s; +} + +.balloon:nth-child(13):before { + color: rgb(85, 169, 66); +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.css.map b/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.css.map new file mode 100644 index 000000000..e0351ab74 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACE,gBAAA;EACA,aAAA;ACAF;;ADEA;EACE,qBAAA;EACA,YAAA;EACA,aAAA;EACA,iCAAA;EACA,kBAAA;EACA,mDAAA;EACA,iBAAA;EACA,8DAAA;UAAA,sDAAA;EACA,kBAAA;ACCF;;ADGA;EAEA;IACE,UAAA;ECDA;EDGF;IACE,UAAA;ECDA;AACF;;ADNA;EAEA;IACE,UAAA;ECDA;EDGF;IACE,UAAA;ECDA;AACF;ADIA;EAAuB,iCAAA;EAA6B,gCAAA;UAAA,wBAAA;ACApD;;ADCA;EAA+B,4BAAA;ACG/B;;ADDA;EAAuB,iCAAA;EAA6B,8BAAA;UAAA,sBAAA;ACMpD;;ADLA;EAA+B,4BAAA;ACS/B;;ADPA;EAAuB,gCAAA;EAA4B,gCAAA;UAAA,wBAAA;ACYnD;;ADXA;EAA+B,2BAAA;ACe/B;;ADbA;EAAuB,gCAAA;EAA4B,8BAAA;UAAA,sBAAA;ACkBnD;;ADjBA;EAA+B,2BAAA;ACqB/B;;ADnBA;EAAuB,8BAAA;EAA+B,gCAAA;UAAA,wBAAA;ACwBtD;;ADvBA;EAA+B,yBAAA;AC2B/B;;ADzBA;EAAuB,2BAAA;EAA4B,8BAAA;UAAA,sBAAA;AC8BnD;;AD7BA;EAA+B,4BAAA;ACiC/B;;AD/BA;EAAuB,gCAAA;EAA4B,gCAAA;UAAA,wBAAA;ACoCnD;;ADnCA;EAA+B,2BAAA;ACuC/B;;ADrCA;EAAuB,4BAAA;EAA6B,8BAAA;UAAA,sBAAA;AC0CpD;;ADzCA;EAA+B,2BAAA;AC6C/B;;AD3CA;EAAwB,8BAAA;EAA+B,gCAAA;UAAA,wBAAA;ACgDvD;;AD/CA;EAAgC,yBAAA;ACmDhC;;ADjDA;EAAwB,8BAAA;EAA+B,8BAAA;UAAA,sBAAA;ACsDvD;;ADrDA;EAAgC,uBAAA;ACyDhC;;ADvDA;EAAwB,gCAAA;EAA4B,gCAAA;UAAA,wBAAA;AC4DpD;;AD3DA;EAAgC,2BAAA;AC+DhC;;AD7DA;EAAwB,6BAAA;EAA8B,8BAAA;UAAA,sBAAA;ACkEtD;;ADjEA;EAAgC,uBAAA;ACqEhC","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.scss b/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.scss new file mode 100644 index 000000000..15eaa845e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/TanyaHolczer/style.scss @@ -0,0 +1,63 @@ + +body { + background: #333; + height: 100vh; +} +.balloon { + display:inline-block; + width:120px; + height:145px; + background:hsl(215,50%,65%); + border-radius:80%; + box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); + margin:20px 30px; + animation: animate 5s forwards 1s ease-in-out infinite; + position: relative; + +} + +@keyframes animate { + +from { + top: 100vh; +} +to { + top: -30vh; +} +} + +.balloon:nth-child(2){ background:hsl(245,40%,65%); animation-duration:3.5s; } +.balloon:nth-child(2):before { color:hsl(245,40%,65%); } + +.balloon:nth-child(3){ background:hsl(139,50%,60%); animation-duration:3s; } +.balloon:nth-child(3):before { color:hsl(139,30%,50%); } + +.balloon:nth-child(4){ background:hsl(59,50%,58%); animation-duration:4.5s; } +.balloon:nth-child(4):before { color:hsl(59,30%,52%); } + +.balloon:nth-child(5){ background:hsl(23,55%,57%); animation-duration:5s; } +.balloon:nth-child(5):before { color:hsl(23,44%,46%); } + +.balloon:nth-child(6){ background:rgb(201, 197, 130); animation-duration:3.5s; } +.balloon:nth-child(6):before { color:rgb(191, 201, 130); } + +.balloon:nth-child(7){ background:rgb(18, 57, 30); animation-duration:3s; } +.balloon:nth-child(7):before { color:hsl(139,30%,50%); } + +.balloon:nth-child(8){ background:hsl(59,50%,58%); animation-duration:4.5s; } +.balloon:nth-child(8):before { color:hsl(59,30%,52%); } + +.balloon:nth-child(9){ background:rgb(58, 27, 193); animation-duration:5s; } +.balloon:nth-child(9):before { color:hsl(23,44%,46%); } + +.balloon:nth-child(10){ background:rgb(130, 201, 184); animation-duration:3.5s; } +.balloon:nth-child(10):before { color:rgb(130, 201, 176); } + +.balloon:nth-child(11){ background:rgb(204, 102, 143); animation-duration:3s; } +.balloon:nth-child(11):before { color:rgb(166, 89, 99); } + +.balloon:nth-child(12){ background:hsl(59,50%,58%); animation-duration:4.5s; } +.balloon:nth-child(12):before { color:hsl(59,30%,52%); } + +.balloon:nth-child(13){ background:rgb(85, 206, 101); animation-duration:5s; } +.balloon:nth-child(13):before { color:rgb(85, 169, 66); } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/app.js b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/app.js new file mode 100644 index 000000000..747e7802e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/app.js @@ -0,0 +1,46 @@ +const maze = document.querySelector('.maze') +let squares = [] + + +const mazeArray = [ +1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, +1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 3, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 3, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, +1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 3, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 3, 1, +1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, +1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, +1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 +] + +function createMaze(){ + for (let i = 0; i < mazeArray.length; i++) { + let square = document.createElement('div') + + if (mazeArray[i] === 0){ + square.setAttribute('class', 'way') + maze.append(square) + } else if (mazeArray[i] === 1){ + square.setAttribute('class', 'wall') + maze.append(square) + } else if (mazeArray[i] === 3){ + square.setAttribute('class', 'way') + maze.append(square) + } + } +} + + +createMaze() \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/dist/app.dev.js b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/dist/app.dev.js new file mode 100644 index 000000000..b95755e38 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/dist/app.dev.js @@ -0,0 +1,24 @@ +"use strict"; + +var maze = document.querySelector('.maze'); +var squares = []; +var mazeArray = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 3, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 3, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 3, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 3, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; + +function createMaze() { + for (var i = 0; i < mazeArray.length; i++) { + var square = document.createElement('div'); + + if (mazeArray[i] === 0) { + square.setAttribute('class', 'way'); + maze.append(square); + } else if (mazeArray[i] === 1) { + square.setAttribute('class', 'wall'); + maze.append(square); + } else if (mazeArray[i] === 3) { + square.setAttribute('class', 'way'); + maze.append(square); + } + } +} + +createMaze(); \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/dist/style.css b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/dist/style.css new file mode 100644 index 000000000..9257c8b26 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/dist/style.css @@ -0,0 +1,455 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +:root { + --road-thickness: 1.5rem; + --border-style: var(--road-thickness) solid white; +} + +.maze { + border: 5px solid black; + background-color: darkcyan; + width: 70vw; + height: 90vh; + margin: auto; + position: relative; +} +.maze .box { + position: absolute; + width: 40%; + height: 30%; +} +.maze .box1 { + top: 3%; + left: 3%; + display: flex; + flex-wrap: wrap; +} +.maze .box1 .left-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; +} +.maze .box1 .right-top { + border: var(--border-style); + width: 60%; + height: 60%; + border-left: none; + border-bottom: none; +} +.maze .box1 .left-bot { + border: var(--border-style); + width: 40%; + height: 40%; +} +.maze .box1 .right-bot { + border: var(--border-style); + width: 60%; + height: 40%; + border-right: none; + border-left: none; +} +.maze .box2 { + top: 3%; + right: 3%; + display: flex; + flex-wrap: wrap; +} +.maze .box2 .left-top { + border: var(--border-style); + width: 60%; + height: 60%; + border-bottom: none; +} +.maze .box2 .right-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-left: none; + border-bottom: none; +} +.maze .box2 .left-bot { + border: var(--border-style); + width: 60%; + height: 40%; + border-left: none; +} +.maze .box2 .right-bot { + border: var(--border-style); + width: 40%; + height: 40%; + border-left: none; +} +.maze .box3 { + border: var(--border-style); + bottom: 35%; + right: 30%; + display: flex; + flex-direction: column; +} +.maze .box3 .gate { + width: 15%; + height: 20%; + background-color: white; + margin: 0 auto; +} +.maze .box3 .mid { + width: 60%; + height: 45%; + background-color: white; + margin: 0 auto; +} +.maze .box4 { + bottom: 3%; + left: 3%; + display: flex; + flex-wrap: wrap; +} +.maze .box4 .left-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + border-right: none; +} +.maze .box4 .right-top { + border: var(--border-style); + width: 40%; + height: 50%; + border-left: none; +} +.maze .box4 .left-bot { + border: var(--border-style); + width: 60%; + height: 40%; +} +.maze .box4 .right-bot { + border: var(--border-style); + width: 40%; + height: 40%; + border-left: none; +} +.maze .box5 { + bottom: 3%; + right: 3%; + display: flex; + justify-content: flex-end; + flex-wrap: wrap; +} +.maze .box5 .left-top { + border: var(--border-style); + width: 40%; + height: 50%; + border-right: none; +} +.maze .box5 .right-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + border-left: none; +} +.maze .box5 .left-bot { + border: var(--border-style); + width: 40%; + height: 40%; +} +.maze .box5 .right-bot { + border: var(--border-style); + width: 60%; + height: 40%; + border-left: none; +} +.maze .box6 { + border: var(--border-style); + top: 21%; + left: 16.5%; + width: 65%; + height: 65%; + border-bottom: none; +} +.maze .box7 { + border: var(--border-style); + top: 33%; + left: 35%; + width: 30%; + height: 3%; + border-bottom: none; + border-top: none; +} +.maze .line { + position: absolute; + background-color: white; + height: var(--road-thickness); + width: 30%; +} +.maze .one { + top: 50%; + left: 0; +} +.maze .two { + top: 50%; + right: 0; +} +.maze .three { + width: var(--road-thickness); + height: var(--road-thickness); + top: 33%; + left: 40.3%; +} + +.pacman { + width: var(--road-thickness); + height: var(--road-thickness); + border-radius: 50%; + background: darkorange; + display: inline-block; + position: relative; + top: 45%; + left: 48.5%; + z-index: 10; + animation-name: pacmove; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} +.pacman__eye { + position: absolute; + width: 0.3vw; + height: 0.3vw; + border-radius: 50%; + top: 20%; + right: 50%; + background: #333333; +} +.pacman__mouth { + background: #fff; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + animation-name: eat; + animation-duration: 0.2s; + animation-iteration-count: infinite; +} +@keyframes pacmove { + 0% { + top: 45%; + left: 48.5%; + } + 5% { + top: 35%; + left: 48.5%; + } + 6% { + transform: rotate(0); + } + 10% { + top: 35%; + left: 67.4%; + } + 11% { + transform: rotate(90deg); + } + 15% { + top: 50%; + left: 67.4%; + } + 16% { + transform: rotate(0); + } + 20% { + top: 50%; + left: 98%; + opacity: 1; + } + 21% { + opacity: 0; + top: 50%; + left: 0%; + } + 22% { + top: 50%; + left: 1%; + opacity: 1; + } + 27% { + top: 50%; + left: 16.5%; + } + 32% { + transform: rotate(90deg); + } + 37% { + top: 84.8%; + left: 16.5%; + } + 38% { + transform: rotate(0); + } + 45% { + top: 85%; + left: 24.4%; + } + 46% { + transform: rotate(90deg); + } + 50% { + top: 93.7%; + left: 24.4%; + } + 51% { + transform: rotate(180deg); + } + 55% { + top: 93.7%; + left: 3%; + } + 56% { + transform: rotate(270deg); + } + 60% { + top: 67%; + left: 3%; + } + 61% { + transform: rotate(360deg); + } + 65% { + top: 67%; + left: 16.5%; + } + 66% { + transform: rotate(270deg); + } + 75% { + top: 3%; + left: 16%; + } + 76% { + transform: rotate(180deg); + } + 80% { + top: 3%; + left: 3%; + } + 81% { + transform: rotate(90deg); + } + 85% { + top: 30%; + left: 3%; + } + 86% { + transform: rotate(0); + } + 90% { + top: 30%; + left: 35%; + } + 91% { + transform: rotate(90deg); + } + 95% { + top: 35%; + left: 35%; + } + 96% { + transform: rotate(0); + } + 98% { + top: 35%; + left: 48%; + } + 99% { + transform: rotate(90deg); + } + 100% { + top: 45%; + left: 48.5%; + } +} +@keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} + +.apple { + font-size: calc(var(--road-thickness) - .3rem); + position: absolute; +} + +.red { + color: red; + top: 3%; + left: 10%; + animation-name: eaten-apple; + animation-duration: 11.5s; + animation-iteration-count: 1; + opacity: 0; +} + +.blue { + color: blue; + top: 93.5%; + left: 10%; + animation-name: eaten-apple; + animation-duration: 7.8s; + animation-iteration-count: 1; + opacity: 0; +} + +.green { + color: green; + top: 50%; + left: 10%; + animation-name: eaten-apple; + animation-duration: 3.5s; + animation-iteration-count: 1; + opacity: 0; +} + +.yellow { + color: darkgoldenrod; + top: 40%; + left: 67.7%; + animation-name: eaten-apple; + animation-duration: 1.7s; + animation-iteration-count: 1; + opacity: 0; +} + +@keyframes eaten-apple { + 0% { + opacity: 1; + } + 99% { + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/index.html b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/index.html new file mode 100644 index 000000000..183fb1620 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/index.html @@ -0,0 +1,61 @@ + + + + + + + PacMan + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+ + + + + + diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.css b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.css new file mode 100644 index 000000000..16c8f6d6a --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.css @@ -0,0 +1,651 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +:root { + --road-thickness: 1.5rem; + --border-style: var(--road-thickness) solid white; +} + +.maze { + border: 5px solid black; + background-color: darkcyan; + width: 70vw; + height: 90vh; + margin: auto; + position: relative; +} +.maze .box { + position: absolute; + width: 40%; + height: 30%; +} +.maze .box1 { + top: 3%; + left: 3%; + display: flex; + flex-wrap: wrap; +} +.maze .box1 .left-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; +} +.maze .box1 .right-top { + border: var(--border-style); + width: 60%; + height: 60%; + border-left: none; + border-bottom: none; +} +.maze .box1 .left-bot { + border: var(--border-style); + width: 40%; + height: 40%; +} +.maze .box1 .right-bot { + border: var(--border-style); + width: 60%; + height: 40%; + border-right: none; + border-left: none; +} +.maze .box2 { + top: 3%; + right: 3%; + display: flex; + flex-wrap: wrap; +} +.maze .box2 .left-top { + border: var(--border-style); + width: 60%; + height: 60%; + border-bottom: none; +} +.maze .box2 .right-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-left: none; + border-bottom: none; +} +.maze .box2 .left-bot { + border: var(--border-style); + width: 60%; + height: 40%; + border-left: none; +} +.maze .box2 .right-bot { + border: var(--border-style); + width: 40%; + height: 40%; + border-left: none; +} +.maze .box3 { + border: var(--border-style); + bottom: 35%; + right: 30%; + display: flex; + flex-direction: column; +} +.maze .box3 .gate { + width: 15%; + height: 20%; + background-color: white; + margin: 0 auto; +} +.maze .box3 .mid { + width: 60%; + height: 45%; + background-color: white; + margin: 0 auto; +} +.maze .box4 { + bottom: 3%; + left: 3%; + display: flex; + flex-wrap: wrap; +} +.maze .box4 .left-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + border-right: none; +} +.maze .box4 .right-top { + border: var(--border-style); + width: 40%; + height: 50%; + border-left: none; +} +.maze .box4 .left-bot { + border: var(--border-style); + width: 60%; + height: 40%; +} +.maze .box4 .right-bot { + border: var(--border-style); + width: 40%; + height: 40%; + border-left: none; +} +.maze .box5 { + bottom: 3%; + right: 3%; + display: flex; + justify-content: flex-end; + flex-wrap: wrap; +} +.maze .box5 .left-top { + border: var(--border-style); + width: 40%; + height: 50%; + border-right: none; +} +.maze .box5 .right-top { + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + border-left: none; +} +.maze .box5 .left-bot { + border: var(--border-style); + width: 40%; + height: 40%; +} +.maze .box5 .right-bot { + border: var(--border-style); + width: 60%; + height: 40%; + border-left: none; +} +.maze .box6 { + border: var(--border-style); + top: 21%; + left: 16.5%; + width: 65%; + height: 65%; + border-bottom: none; +} +.maze .box7 { + border: var(--border-style); + top: 33%; + left: 35%; + width: 30%; + height: 3%; + border-bottom: none; + border-top: none; +} +.maze .line { + position: absolute; + background-color: white; + height: var(--road-thickness); + width: 30%; +} +.maze .one { + top: 50%; + left: 0; +} +.maze .two { + top: 50%; + right: 0; +} +.maze .three { + width: var(--road-thickness); + height: var(--road-thickness); + top: 33%; + left: 40.3%; +} + +.pacman { + width: var(--road-thickness); + height: var(--road-thickness); + border-radius: 50%; + background: darkorange; + display: inline-block; + position: relative; + top: 45%; + left: 48.5%; + z-index: 10; + -webkit-animation-name: pacmove; + animation-name: pacmove; + -webkit-animation-duration: 15s; + animation-duration: 15s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.pacman__eye { + position: absolute; + width: 0.3vw; + height: 0.3vw; + border-radius: 50%; + top: 20%; + right: 50%; + background: #333333; +} +.pacman__mouth { + background: #fff; + position: absolute; + width: 100%; + height: 100%; + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + -webkit-animation-name: eat; + animation-name: eat; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +@-webkit-keyframes pacmove { + 0% { + top: 45%; + left: 48.5%; + } + 5% { + top: 35%; + left: 48.5%; + } + 6% { + transform: rotate(0); + } + 10% { + top: 35%; + left: 67.4%; + } + 11% { + transform: rotate(90deg); + } + 15% { + top: 50%; + left: 67.4%; + } + 16% { + transform: rotate(0); + } + 20% { + top: 50%; + left: 98%; + opacity: 1; + } + 21% { + opacity: 0; + top: 50%; + left: 0%; + } + 22% { + top: 50%; + left: 1%; + opacity: 1; + } + 27% { + top: 50%; + left: 16.5%; + } + 32% { + transform: rotate(90deg); + } + 37% { + top: 84.8%; + left: 16.5%; + } + 38% { + transform: rotate(0); + } + 45% { + top: 85%; + left: 24.4%; + } + 46% { + transform: rotate(90deg); + } + 50% { + top: 93.7%; + left: 24.4%; + } + 51% { + transform: rotate(180deg); + } + 55% { + top: 93.7%; + left: 3%; + } + 56% { + transform: rotate(270deg); + } + 60% { + top: 67%; + left: 3%; + } + 61% { + transform: rotate(360deg); + } + 65% { + top: 67%; + left: 16.5%; + } + 66% { + transform: rotate(270deg); + } + 75% { + top: 3%; + left: 16%; + } + 76% { + transform: rotate(180deg); + } + 80% { + top: 3%; + left: 3%; + } + 81% { + transform: rotate(90deg); + } + 85% { + top: 30%; + left: 3%; + } + 86% { + transform: rotate(0); + } + 90% { + top: 30%; + left: 35%; + } + 91% { + transform: rotate(90deg); + } + 95% { + top: 35%; + left: 35%; + } + 96% { + transform: rotate(0); + } + 98% { + top: 35%; + left: 48%; + } + 99% { + transform: rotate(90deg); + } + 100% { + top: 45%; + left: 48.5%; + } +} +@keyframes pacmove { + 0% { + top: 45%; + left: 48.5%; + } + 5% { + top: 35%; + left: 48.5%; + } + 6% { + transform: rotate(0); + } + 10% { + top: 35%; + left: 67.4%; + } + 11% { + transform: rotate(90deg); + } + 15% { + top: 50%; + left: 67.4%; + } + 16% { + transform: rotate(0); + } + 20% { + top: 50%; + left: 98%; + opacity: 1; + } + 21% { + opacity: 0; + top: 50%; + left: 0%; + } + 22% { + top: 50%; + left: 1%; + opacity: 1; + } + 27% { + top: 50%; + left: 16.5%; + } + 32% { + transform: rotate(90deg); + } + 37% { + top: 84.8%; + left: 16.5%; + } + 38% { + transform: rotate(0); + } + 45% { + top: 85%; + left: 24.4%; + } + 46% { + transform: rotate(90deg); + } + 50% { + top: 93.7%; + left: 24.4%; + } + 51% { + transform: rotate(180deg); + } + 55% { + top: 93.7%; + left: 3%; + } + 56% { + transform: rotate(270deg); + } + 60% { + top: 67%; + left: 3%; + } + 61% { + transform: rotate(360deg); + } + 65% { + top: 67%; + left: 16.5%; + } + 66% { + transform: rotate(270deg); + } + 75% { + top: 3%; + left: 16%; + } + 76% { + transform: rotate(180deg); + } + 80% { + top: 3%; + left: 3%; + } + 81% { + transform: rotate(90deg); + } + 85% { + top: 30%; + left: 3%; + } + 86% { + transform: rotate(0); + } + 90% { + top: 30%; + left: 35%; + } + 91% { + transform: rotate(90deg); + } + 95% { + top: 35%; + left: 35%; + } + 96% { + transform: rotate(0); + } + 98% { + top: 35%; + left: 48%; + } + 99% { + transform: rotate(90deg); + } + 100% { + top: 45%; + left: 48.5%; + } +} +@-webkit-keyframes eat { + 0% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + -webkit-clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + -webkit-clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + -webkit-clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@keyframes eat { + 0% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + -webkit-clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + -webkit-clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + -webkit-clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} + +.apple { + font-size: calc(var(--road-thickness) - 0.3rem); + position: absolute; +} + +.red { + color: red; + top: 3%; + left: 10%; + -webkit-animation-name: eaten-apple; + animation-name: eaten-apple; + -webkit-animation-duration: 11.5s; + animation-duration: 11.5s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + opacity: 0; +} + +.blue { + color: blue; + top: 93.5%; + left: 10%; + -webkit-animation-name: eaten-apple; + animation-name: eaten-apple; + -webkit-animation-duration: 7.8s; + animation-duration: 7.8s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + opacity: 0; +} + +.green { + color: green; + top: 50%; + left: 10%; + -webkit-animation-name: eaten-apple; + animation-name: eaten-apple; + -webkit-animation-duration: 3.5s; + animation-duration: 3.5s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + opacity: 0; +} + +.yellow { + color: darkgoldenrod; + top: 40%; + left: 67.7%; + -webkit-animation-name: eaten-apple; + animation-name: eaten-apple; + -webkit-animation-duration: 1.7s; + animation-duration: 1.7s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + opacity: 0; +} + +@-webkit-keyframes eaten-apple { + 0% { + opacity: 1; + } + 99% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes eaten-apple { + 0% { + opacity: 1; + } + 99% { + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.css.map b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.css.map new file mode 100644 index 000000000..bb08180bd --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.scss b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.scss new file mode 100644 index 000000000..a770aabf0 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/Vladi_Bykanov/style.scss @@ -0,0 +1,467 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + width:100vw; + height: 100vh; + display: flex; +} + +:root{ + --road-thickness: 1.5rem; + --border-style: var(--road-thickness) solid white; +} + +.maze{ + border: 5px solid black; + background-color: darkcyan; + width: 70vw; + height: 90vh; + margin: auto; + position: relative; + .box{ + position: absolute; + // border: 1px solid white; + width: 40%; + height: 30%; + &1{ + top: 3%; + left:3%; + display: flex; + flex-wrap: wrap; + .left-top{ + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + } + .right-top{ + border: var(--border-style); + width: 60%; + height: 60%; + border-left: none; + border-bottom: none; + } + .left-bot{ + border: var(--border-style); + width: 40%; + height: 40%; + } + .right-bot{ + border: var(--border-style); + width: 60%; + height: 40%; + border-right: none; + border-left: none; + } + } + &2{ + top: 3%; + right:3%; + display: flex; + flex-wrap: wrap; + .left-top{ + border: var(--border-style); + width: 60%; + height: 60%; + border-bottom: none; + } + .right-top{ + border: var(--border-style); + width: 40%; + height: 60%; + border-left: none; + border-bottom: none; + } + .left-bot{ + border: var(--border-style); + width: 60%; + height: 40%; + border-left: none; + } + .right-bot{ + border: var(--border-style); + width: 40%; + height: 40%; + border-left: none; + } + } + &3{ + border: var(--border-style); + bottom: 35%; + right:30%; + display: flex; + flex-direction: column; + .gate{ + // border-top: 3px solid black; + width: 15%; + height: 20%; + background-color: white; + margin: 0 auto; + } + .mid{ + width: 60%; + height: 45%; + background-color: white; + margin: 0 auto; + } + } + &4{ + bottom: 3%; + left: 3%; + display: flex; + flex-wrap: wrap; + .left-top{ + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + border-right: none; + } + .right-top{ + border: var(--border-style); + width: 40%; + height: 50%; + border-left: none; + } + .left-bot{ + border: var(--border-style); + width: 60%; + height: 40%; + } + .right-bot{ + border: var(--border-style); + width: 40%; + height: 40%; + border-left: none; + } + } + &5{ + bottom: 3%; + right: 3%; + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + .left-top{ + border: var(--border-style); + width: 40%; + height: 50%; + border-right: none; + } + .right-top{ + border: var(--border-style); + width: 40%; + height: 60%; + border-bottom: none; + border-left: none; + } + .left-bot{ + border: var(--border-style); + width: 40%; + height: 40%; + } + .right-bot{ + border: var(--border-style); + width: 60%; + height: 40%; + border-left: none; + } + } + &6{ + border: var(--border-style); + top: 21%; + left: 16.5%; + width: 65%; + height: 65%; + border-bottom: none; + } + &7{ + border: var(--border-style); + top: 33%; + left: 35%; + width: 30%; + height: 3%; + border-bottom: none; + border-top: none; + } + } + .line{ + position: absolute; + background-color: white; + height: var(--road-thickness); + width: 30%; + } + .one{ + top: 50%; + left: 0; + } + .two{ + top: 50%; + right: 0; + } + .three{ + // background-color: red; + width: var(--road-thickness); + height: var(--road-thickness); + top: 33%; + left: 40.3%; + } +} + +.pacman { + width: var(--road-thickness); + height: var(--road-thickness); + border-radius: 50%; + background: darkorange; + display: inline-block; + position: relative; + top: 45%; + left: 48.5%; + z-index: 10; + animation-name: pacmove; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode: forwards; + &__eye { + position: absolute; + width: 0.3vw; + height: 0.3vw; + border-radius: 50%; + top: 20%; + right: 50%; + background: #333333; + } + + &__mouth { + background: #fff; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + animation-name: eat; + animation-duration: 0.2s; + animation-iteration-count: infinite; + } + + @keyframes pacmove { + 0%{ + top: 45%; + left: 48.5%; + } + 5%{ + top: 35%; + left: 48.5%; + } + 6%{ + transform: rotate(0); + } + 10%{ + top: 35%; + left: 67.4%; + } + 11%{ + transform: rotate(90deg); + } + 15%{ + top: 50%; + left: 67.4%; + } + 16%{ + transform: rotate(0); + } + 20%{ + top: 50%; + left: 98%; + opacity: 1; + } + 21%{ + opacity: 0; + top: 50%; + left: 0%; + } + 22%{ + top: 50%; + left: 1%; + opacity: 1; + } + 27%{ + top: 50%; + left: 16.5%; + } + 32%{ + transform: rotate(90deg); + } + 37%{ + top: 84.8%; + left: 16.5%; + } + 38%{ + transform: rotate(0); + } + 45%{ + top: 85%; + left: 24.4%; + } + 46%{ + transform: rotate(90deg); + } + 50%{ + top: 93.7%; + left: 24.4%; + } + 51%{ + transform: rotate(180deg); + } + 55%{ + top: 93.7%; + left: 3%; + } + 56%{ + transform: rotate(270deg); + } + 60%{ + top: 67%; + left: 3%; + } + 61%{ + transform: rotate(360deg); + } + 65%{ + top: 67%; + left: 16.5%; + } + 66%{ + transform: rotate(270deg); + } + // 67%{ + // top: 29%; + // left: 16%; + // } + 75%{ + top: 3%; + left: 16%; + } + 76%{ + transform: rotate(180deg); + } + 80%{ + top: 3%; + left: 3%; + } + 81%{ + transform: rotate(90deg); + } + 85%{ + top: 30%; + left: 3%; + } + 86%{ + transform: rotate(0); + } + 90%{ + top: 30%; + left: 35%; + } + 91%{ + transform: rotate(90deg); + } + 95%{ + top: 35%; + left: 35%; + } + 96%{ + transform: rotate(0); + } + 98%{ + top: 35%; + left: 48%; + } + 99%{ + transform: rotate(90deg); + } + 100%{ + top: 45%; + left: 48.5%; + } + } + + @keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + } +} + + +.apple{ + font-size: calc(var(--road-thickness) - .3rem); + position: absolute; + +} +.red{ + color: red; + top: 3%; + left: 10%; + animation-name: eaten-apple; + animation-duration: 11.5s; + animation-iteration-count: 1; + opacity: 0; +} +.blue{ + color: blue; + top: 93.5%; + left: 10%; + animation-name: eaten-apple; + animation-duration: 7.8s; + animation-iteration-count: 1; + opacity: 0; + +} +.green{ + color: green; + top: 50%; + left: 10%; + animation-name: eaten-apple; + animation-duration: 3.5s; + animation-iteration-count: 1; + opacity: 0; +} +.yellow{ + color: darkgoldenrod; + top: 40%; + left: 67.7%; + animation-name: eaten-apple; + animation-duration: 1.7s; + animation-iteration-count: 1; + opacity: 0; +} + +@keyframes eaten-apple { + 0%{ + opacity: 1; + } + 99%{ + opacity: 1; + } + 100%{ + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/anat/dist/style.css b/01-HTML-CSS/06-animations/HW/anat/dist/style.css new file mode 100644 index 000000000..92bc9da1d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/anat/dist/style.css @@ -0,0 +1,81 @@ +body { + margin: 0%; +} + +.baloon { + background-color: white; + display: flex; + justify-content: space-evenly; + align-items: flex-end; + width: 800px; + height: 600px; + border: 3px solid black; +} + +img { + width: 40px; + position: relative; + margin-top: 550px; + animation-name: float; + animation-duration: 3s; + animation-fill-mode: both; + animation-iteration-count: infinite; +} + +/*.pink{ + margin-top: 550px; + animation-name: float; +animation-duration: 3s; +animation-fill-mode: both; +animation-iteration-count: infinite; +animation-timing-function: linear; + +}*/ +.pink { + animation-timing-function: cubic-bezier(0.41, 0.19, 0, 0.58); + animation-duration: 2; +} + +.lightblue { + animation-timing-function: ease-in; + animation-duration: 4; +} + +.green { + animation-timing-function: ease-in-out; + animation-duration: 9; +} + +.golden { + animation-timing-function: cubic-bezier(0.18, 0.34, 0.29, 0.87); + animation-duration: 7; +} + +.black { + animation-timing-function: cubic-bezier(0.13, 0.88, 0.29, 1.03); + animation-duration: 4; +} + +.rubi { + animation-timing-function: ease-in; + animation-duration: 3; +} + +.purple { + animation-timing-function: ease-in; + animation-duration: 1; +} + +.turkiz { + animation-timing-function: ease-in; + animation-duration: 6; +} + +@keyframes float { + from { + bottom: 0px; + } + to { + bottom: 600px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/black.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/black.jfif new file mode 100644 index 000000000..96d3433a0 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/black.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/blue.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/blue.jfif new file mode 100644 index 000000000..7c79b45f8 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/blue.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/burgundy.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/burgundy.jfif new file mode 100644 index 000000000..303c2e688 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/burgundy.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/golden.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/golden.jfif new file mode 100644 index 000000000..931f7b6e0 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/golden.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/green.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/green.jfif new file mode 100644 index 000000000..11758926f Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/green.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/lightblue.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/lightblue.jfif new file mode 100644 index 000000000..08c00ad10 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/lightblue.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/pink.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/pink.jfif new file mode 100644 index 000000000..acad0d62d Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/pink.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/purple.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/purple.jfif new file mode 100644 index 000000000..0e0487c6f Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/purple.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/rubi.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/rubi.jfif new file mode 100644 index 000000000..91ca6e768 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/rubi.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/imgs/turkiz.jfif b/01-HTML-CSS/06-animations/HW/anat/imgs/turkiz.jfif new file mode 100644 index 000000000..12603c23f Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/anat/imgs/turkiz.jfif differ diff --git a/01-HTML-CSS/06-animations/HW/anat/index.html b/01-HTML-CSS/06-animations/HW/anat/index.html new file mode 100644 index 000000000..89e3d9348 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/anat/index.html @@ -0,0 +1,25 @@ + + + + + + + + Baloons + + +
+
+
+
+
+
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/anat/style.css b/01-HTML-CSS/06-animations/HW/anat/style.css new file mode 100644 index 000000000..515e34d22 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/anat/style.css @@ -0,0 +1,110 @@ +body { + margin: 0%; +} + +.baloon { + background-color: white; + display: flex; + justify-content: space-evenly; + align-items: flex-end; + width: 800px; + height: 600px; + border: 3px solid black; +} + +img { + width: 40px; + position: relative; + margin-top: 550px; + -webkit-animation-name: float; + animation-name: float; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/*.pink{ + margin-top: 550px; + animation-name: float; +animation-duration: 3s; +animation-fill-mode: both; +animation-iteration-count: infinite; +animation-timing-function: linear; + +}*/ +.pink { + -webkit-animation-timing-function: cubic-bezier(0.41, 0.19, 0, 0.58); + animation-timing-function: cubic-bezier(0.41, 0.19, 0, 0.58); + -webkit-animation-duration: 3; + animation-duration: 3; +} + +.lightblue { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-duration: 9; + animation-duration: 9; +} + +.green { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-duration: 10; + animation-duration: 10; +} + +.golden { + -webkit-animation-timing-function: cubic-bezier(0.18, 0.34, 0.29, 0.87); + animation-timing-function: cubic-bezier(0.18, 0.34, 0.29, 0.87); + -webkit-animation-duration: 8; + animation-duration: 8; +} + +.black { + -webkit-animation-timing-function: cubic-bezier(0.13, 0.88, 0.29, 1.03); + animation-timing-function: cubic-bezier(0.13, 0.88, 0.29, 1.03); + -webkit-animation-duration: 6; + animation-duration: 6; +} + +.rubi { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-duration: 10; + animation-duration: 10; +} + +.purple { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-duration: 3; + animation-duration: 3; +} + +.turkiz { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-duration: 6; + animation-duration: 6; +} + +@-webkit-keyframes float { + from { + bottom: 0px; + } + to { + bottom: 600px; + } +} + +@keyframes float { + from { + bottom: 0px; + } + to { + bottom: 600px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/anat/style.css.map b/01-HTML-CSS/06-animations/HW/anat/style.css.map new file mode 100644 index 000000000..611f13d1c --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/anat/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,aAAA;EACA,6BAAA;EACA,qBAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACCJ;;ADIA;EACI,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,iCAAA;UAAA,yBAAA;EACA,2CAAA;UAAA,mCAAA;ACDJ;;ADMA;;;;;;;;EAAA;AAUA;EACI,oEAAA;UAAA,4DAAA;EACA,6BAAA;UAAA,qBAAA;ACJJ;;ADQA;EACI,0CAAA;UAAA,kCAAA;EACA,6BAAA;UAAA,qBAAA;ACLJ;;ADQA;EACI,8CAAA;UAAA,sCAAA;EACA,8BAAA;UAAA,sBAAA;ACLJ;;ADQA;EACI,uEAAA;UAAA,+DAAA;EACA,6BAAA;UAAA,qBAAA;ACLJ;;ADSA;EACI,uEAAA;UAAA,+DAAA;EACA,6BAAA;UAAA,qBAAA;ACNJ;;ADSA;EACI,0CAAA;UAAA,kCAAA;EACA,6BAAA;UAAA,qBAAA;ACNJ;;ADSA;EACI,0CAAA;UAAA,kCAAA;EACA,6BAAA;UAAA,qBAAA;ACNJ;;ADSA;EACI,0CAAA;UAAA,kCAAA;EACA,6BAAA;UAAA,qBAAA;ACNJ;;ADUA;EAEI;IACE,WAAA;ECRJ;EDUE;IACE,aAAA;ECRJ;AACF;;ADCA;EAEI;IACE,WAAA;ECRJ;EDUE;IACE,aAAA;ECRJ;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/anat/style.scss b/01-HTML-CSS/06-animations/HW/anat/style.scss new file mode 100644 index 000000000..f1cd29aa4 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/anat/style.scss @@ -0,0 +1,91 @@ +body{ + margin: 0%; +} + +.baloon{ + background-color:white; + display: flex; + justify-content: space-evenly; + align-items: flex-end; + width:800px; + height: 600px; + border: 3px solid black; +} + + + +img{ + width: 40px; + position: relative; + margin-top: 550px; + animation-name: float; + animation-duration: 3s; + animation-fill-mode: both; + animation-iteration-count: infinite; + +} + + +/*.pink{ + margin-top: 550px; + animation-name: float; +animation-duration: 3s; +animation-fill-mode: both; +animation-iteration-count: infinite; +animation-timing-function: linear; + +}*/ + +.pink{ + animation-timing-function: cubic-bezier(.41,.19,0,.58); + animation-duration: random($limit: 10s); + +} + +.lightblue{ + animation-timing-function: ease-in; + animation-duration: random($limit: 10s); +} + +.green{ + animation-timing-function: ease-in-out; + animation-duration: random($limit: 10s); +} + +.golden{ + animation-timing-function: cubic-bezier(.18,.34,.29,.87); + animation-duration: random($limit: 10s); + +} + +.black{ + animation-timing-function:cubic-bezier(.13,.88,.29,1.03); + animation-duration: random($limit: 10s); +} + +.rubi{ + animation-timing-function: ease-in; + animation-duration: random($limit: 10s); +} + +.purple{ + animation-timing-function: ease-in; + animation-duration: random($limit: 10s); +} + +.turkiz{ + animation-timing-function: ease-in; + animation-duration: random($limit: 10s); +} + + +@keyframes float { + + from { + bottom: 0px;} + + to{ + bottom: 600px; + + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/angela/dist/pacman.css b/01-HTML-CSS/06-animations/HW/angela/dist/pacman.css new file mode 100644 index 000000000..b38f68f6b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/angela/dist/pacman.css @@ -0,0 +1,375 @@ +body { + margin: 0; + overflow-x: hidden; +} + +.pacman-backgroud { + margin: 2rem auto; + height: 80vh; + width: 80vw; + background-image: url("https://i.pinimg.com/originals/52/a3/3c/52a33c10ae0c117156dd2807a4f324da.png"); + background-repeat: no-repeat; + background-size: contain; + margin-left: 20%; +} +.pacman-backgroud__pacman { + height: 2rem; + width: 2.5rem; + position: relative; + top: 54%; + left: 35%; + animation-name: pacman; + animation-duration: 20s; + animation-fill-mode: forwards; +} +@keyframes pacman { + 0% { + top: 54%; + left: 35%; + } + 5% { + top: 54%; + left: 46%; + } + 10% { + top: 62%; + left: 46%; + transform: rotate(180deg); + } + 15% { + top: 62%; + left: 38%; + } + 25% { + top: 72%; + left: 38%; + transform: rotate(90deg); + } + 30% { + top: 72%; + left: 16%; + transform: rotate(-90deg); + } + 35% { + top: 44%; + left: 16%; + transform: rotate(180deg); + opacity: 1; + } + 40% { + top: 44%; + left: 0; + opacity: 0; + } + 50% { + top: 44%; + left: 70%; + opacity: 0; + } + 55% { + top: 44%; + left: 65%; + opacity: 1; + transform: rotate(180deg); + } + 60% { + top: 44%; + left: 53%; + } + 70% { + left: 53%; + top: 25%; + transform: rotate(-90deg); + } + 80% { + top: 25%; + left: 66%; + transform: rotate(0deg); + } + 85% { + left: 65%; + top: 4%; + transform: rotate(-90deg); + } + 90% { + top: 4%; + left: 38%; + transform: rotate(180deg); + } + 95% { + left: 38%; + top: 15%; + transform: rotate(180deg); + opacity: 1; + } + 96% { + left: 38%; + top: 15%; + opacity: 0; + } + 97% { + left: 38%; + top: 15%; + opacity: 1; + } + 98% { + left: 38%; + top: 15%; + opacity: 0; + } + 100% { + left: 38%; + top: 15%; + opacity: 1; + } +} +.pacman-backgroud__pacman img { + height: 100%; +} +.pacman-backgroud__game-over { + height: 7rem; + width: 72.3%; + position: relative; + top: 0rem; + text-align: center; + animation-name: game-over; + animation-duration: 20s; + opacity: 0; + animation-fill-mode: forwards; +} +@keyframes game-over { + 0% { + opacity: 0; + } + 97% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.pacman-backgroud p { + font-family: "Audiowide", sans-serif; + font-size: 7rem; + color: #8214b9; + text-shadow: 0.7rem 0.1rem black; + margin-bottom: 0; +} +.pacman-backgroud h6 { + font-family: "Audiowide", sans-serif; + font-size: 2rem; + color: #8214b9; + text-shadow: 0.7rem 0.1rem black; + margin-top: 0; +} + +.pacman-backgroud__ghosts { + position: relative; + top: 37%; + left: 31%; + max-width: 10rem; +} +.pacman-backgroud__ghosts__ghost1 { + color: #de4ef7; + float: left; + font-size: 2rem; + margin-right: 1rem; + position: relative; + animation-name: pink-ghost; + animation-duration: 20s; + animation-fill-mode: forwards; +} +@keyframes pink-ghost { + 5% { + top: 0; + left: 1rem; + } + 10% { + top: 0rem; + left: 3rem; + } + 15% { + top: -2rem; + left: 3rem; + } + 20% { + top: -3rem; + left: 6rem; + } + 30% { + top: -3rem; + left: 12rem; + } + 40% { + top: 0; + left: 12rem; + } + 50% { + top: 0; + left: 18rem; + } + 60% { + top: 15rem; + left: 18rem; + } + 70% { + top: 15rem; + left: 28rem; + } + 80% { + top: 18rem; + left: 28rem; + } + 90% { + top: 18rem; + left: 0; + } + 100% { + top: 16rem; + left: 0; + } +} +.pacman-backgroud__ghosts__ghost2 { + color: #d87410; + float: left; + font-size: 2rem; + margin-right: 1rem; + position: relative; + animation-name: orange-ghost; + animation-duration: 20s; + animation-delay: 25ms; + animation-fill-mode: forwards; +} +@keyframes orange-ghost { + 5% { + top: -2rem; + left: 0; + } + 10% { + top: -3rem; + left: -2rem; + } + 15% { + top: -6rem; + left: -2rem; + } + 20% { + top: -6rem; + left: -8rem; + } + 25% { + top: -10rem; + left: -8rem; + } + 35% { + top: -10rem; + left: -13rem; + } + 45% { + top: -6rem; + left: -13rem; + } + 55% { + top: -6rem; + left: -23rem; + } + 65% { + left: -23rem; + top: -14rem; + } + 75% { + top: -14rem; + left: -2rem; + } + 85% { + left: -2rem; + top: -10rem; + } + 95% { + left: 0; + top: -10rem; + opacity: 1; + } + 96% { + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 97% { + top: -10rem; + left: 0.5rem; + opacity: 1; + } + 98% { + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 100% { + top: -10rem; + left: 0.5rem; + opacity: 1; + } +} +.pacman-backgroud__ghosts__ghost3 { + color: red; + font-size: 2rem; + position: relative; + animation-name: red-ghost; + animation-duration: 20s; + animation-fill-mode: forwards; +} +@keyframes red-ghost { + 5% { + top: 0; + right: 0; + } + 10% { + top: 0; + right: 0rem; + } + 15% { + top: 0; + right: 1rem; + } + 20% { + top: 0; + right: 2rem; + } + 25% { + top: -2.5rem; + right: 2rem; + } + 30% { + top: -2.5rem; + right: 10rem; + } + 40% { + top: 8rem; + right: 10rem; + } + 50% { + top: 8rem; + right: 15rem; + } + 60% { + top: 0.5rem; + right: 15rem; + } + 70% { + top: 0.5rem; + right: 10rem; + } + 80% { + top: 4.5rem; + right: 10rem; + } + 90% { + top: 4.5rem; + right: -7.5rem; + } + 100% { + top: 6rem; + right: -7.5rem; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/angela/images/pac_man.jpg b/01-HTML-CSS/06-animations/HW/angela/images/pac_man.jpg new file mode 100644 index 000000000..a4923ed34 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/angela/images/pac_man.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/angela/images/pacman-beginning_Mi3Kw4Yp.wav b/01-HTML-CSS/06-animations/HW/angela/images/pacman-beginning_Mi3Kw4Yp.wav new file mode 100644 index 000000000..ca6ac9ff4 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/angela/images/pacman-beginning_Mi3Kw4Yp.wav differ diff --git a/01-HTML-CSS/06-animations/HW/angela/pacman.css b/01-HTML-CSS/06-animations/HW/angela/pacman.css new file mode 100644 index 000000000..3320ba27e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/angela/pacman.css @@ -0,0 +1,678 @@ +body { + margin: 0; + overflow-x: hidden; +} + +.pacman-backgroud { + margin: 2rem auto; + height: 80vh; + width: 80vw; + background-image: url("https://i.pinimg.com/originals/52/a3/3c/52a33c10ae0c117156dd2807a4f324da.png"); + background-repeat: no-repeat; + background-size: contain; + margin-left: 20%; +} +.pacman-backgroud__pacman { + height: 2rem; + width: 2.5rem; + position: relative; + top: 54%; + left: 35%; + -webkit-animation-name: pacman; + animation-name: pacman; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +@-webkit-keyframes pacman { + 0% { + top: 54%; + left: 35%; + } + 5% { + top: 54%; + left: 46%; + } + 10% { + top: 62%; + left: 46%; + transform: rotate(180deg); + } + 15% { + top: 62%; + left: 38%; + } + 25% { + top: 72%; + left: 38%; + transform: rotate(90deg); + } + 30% { + top: 72%; + left: 16%; + transform: rotate(-90deg); + } + 35% { + top: 44%; + left: 16%; + transform: rotate(180deg); + opacity: 1; + } + 40% { + top: 44%; + left: 0; + opacity: 0; + } + 50% { + top: 44%; + left: 70%; + opacity: 0; + } + 55% { + top: 44%; + left: 65%; + opacity: 1; + transform: rotate(180deg); + } + 60% { + top: 44%; + left: 53%; + } + 70% { + left: 53%; + top: 25%; + transform: rotate(-90deg); + } + 80% { + top: 25%; + left: 66%; + transform: rotate(0deg); + } + 85% { + left: 65%; + top: 4%; + transform: rotate(-90deg); + } + 90% { + top: 4%; + left: 38%; + transform: rotate(180deg); + } + 95% { + left: 38%; + top: 15%; + transform: rotate(180deg); + opacity: 1; + } + 96% { + left: 38%; + top: 15%; + opacity: 0; + } + 97% { + left: 38%; + top: 15%; + opacity: 1; + } + 98% { + left: 38%; + top: 15%; + opacity: 0; + } + 100% { + left: 38%; + top: 15%; + opacity: 1; + } +} +@keyframes pacman { + 0% { + top: 54%; + left: 35%; + } + 5% { + top: 54%; + left: 46%; + } + 10% { + top: 62%; + left: 46%; + transform: rotate(180deg); + } + 15% { + top: 62%; + left: 38%; + } + 25% { + top: 72%; + left: 38%; + transform: rotate(90deg); + } + 30% { + top: 72%; + left: 16%; + transform: rotate(-90deg); + } + 35% { + top: 44%; + left: 16%; + transform: rotate(180deg); + opacity: 1; + } + 40% { + top: 44%; + left: 0; + opacity: 0; + } + 50% { + top: 44%; + left: 70%; + opacity: 0; + } + 55% { + top: 44%; + left: 65%; + opacity: 1; + transform: rotate(180deg); + } + 60% { + top: 44%; + left: 53%; + } + 70% { + left: 53%; + top: 25%; + transform: rotate(-90deg); + } + 80% { + top: 25%; + left: 66%; + transform: rotate(0deg); + } + 85% { + left: 65%; + top: 4%; + transform: rotate(-90deg); + } + 90% { + top: 4%; + left: 38%; + transform: rotate(180deg); + } + 95% { + left: 38%; + top: 15%; + transform: rotate(180deg); + opacity: 1; + } + 96% { + left: 38%; + top: 15%; + opacity: 0; + } + 97% { + left: 38%; + top: 15%; + opacity: 1; + } + 98% { + left: 38%; + top: 15%; + opacity: 0; + } + 100% { + left: 38%; + top: 15%; + opacity: 1; + } +} +.pacman-backgroud__pacman img { + height: 100%; +} +.pacman-backgroud__game-over { + height: 7rem; + width: 72.3%; + position: relative; + top: 0rem; + text-align: center; + -webkit-animation-name: game-over; + animation-name: game-over; + -webkit-animation-duration: 20s; + animation-duration: 20s; + opacity: 0; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +@-webkit-keyframes game-over { + 0% { + opacity: 0; + } + 97% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes game-over { + 0% { + opacity: 0; + } + 97% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.pacman-backgroud p { + font-family: "Audiowide", sans-serif; + font-size: 7rem; + color: rgb(130, 20, 185); + text-shadow: 0.7rem 0.1rem rgb(0, 0, 0); + margin-bottom: 0; +} +.pacman-backgroud h6 { + font-family: "Audiowide", sans-serif; + font-size: 2rem; + color: rgb(130, 20, 185); + text-shadow: 0.7rem 0.1rem rgb(0, 0, 0); + margin-top: 0; +} + +.pacman-backgroud__ghosts { + position: relative; + top: 37%; + left: 31%; + max-width: 10rem; +} +.pacman-backgroud__ghosts__ghost1 { + color: rgb(222, 78, 247); + float: left; + font-size: 2rem; + margin-right: 1rem; + position: relative; + -webkit-animation-name: pink-ghost; + animation-name: pink-ghost; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +@-webkit-keyframes pink-ghost { + 5% { + top: 0; + left: 1rem; + } + 10% { + top: 0rem; + left: 3rem; + } + 15% { + top: -2rem; + left: 3rem; + } + 20% { + top: -3rem; + left: 6rem; + } + 30% { + top: -3rem; + left: 12rem; + } + 40% { + top: 0; + left: 12rem; + } + 50% { + top: 0; + left: 18rem; + } + 60% { + top: 15rem; + left: 18rem; + } + 70% { + top: 15rem; + left: 28rem; + } + 80% { + top: 18rem; + left: 28rem; + } + 90% { + top: 18rem; + left: 0; + } + 100% { + top: 16rem; + left: 0; + } +} +@keyframes pink-ghost { + 5% { + top: 0; + left: 1rem; + } + 10% { + top: 0rem; + left: 3rem; + } + 15% { + top: -2rem; + left: 3rem; + } + 20% { + top: -3rem; + left: 6rem; + } + 30% { + top: -3rem; + left: 12rem; + } + 40% { + top: 0; + left: 12rem; + } + 50% { + top: 0; + left: 18rem; + } + 60% { + top: 15rem; + left: 18rem; + } + 70% { + top: 15rem; + left: 28rem; + } + 80% { + top: 18rem; + left: 28rem; + } + 90% { + top: 18rem; + left: 0; + } + 100% { + top: 16rem; + left: 0; + } +} +.pacman-backgroud__ghosts__ghost2 { + color: rgb(216, 116, 16); + float: left; + font-size: 2rem; + margin-right: 1rem; + position: relative; + -webkit-animation-name: orange-ghost; + animation-name: orange-ghost; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-delay: 25ms; + animation-delay: 25ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +@-webkit-keyframes orange-ghost { + 5% { + top: -2rem; + left: 0; + } + 10% { + top: -3rem; + left: -2rem; + } + 15% { + top: -6rem; + left: -2rem; + } + 20% { + top: -6rem; + left: -8rem; + } + 25% { + top: -10rem; + left: -8rem; + } + 35% { + top: -10rem; + left: -13rem; + } + 45% { + top: -6rem; + left: -13rem; + } + 55% { + top: -6rem; + left: -23rem; + } + 65% { + left: -23rem; + top: -14rem; + } + 75% { + top: -14rem; + left: -2rem; + } + 85% { + left: -2rem; + top: -10rem; + } + 95% { + left: 0; + top: -10rem; + opacity: 1; + } + 96% { + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 97% { + top: -10rem; + left: 0.5rem; + opacity: 1; + } + 98% { + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 100% { + top: -10rem; + left: 0.5rem; + opacity: 1; + } +} +@keyframes orange-ghost { + 5% { + top: -2rem; + left: 0; + } + 10% { + top: -3rem; + left: -2rem; + } + 15% { + top: -6rem; + left: -2rem; + } + 20% { + top: -6rem; + left: -8rem; + } + 25% { + top: -10rem; + left: -8rem; + } + 35% { + top: -10rem; + left: -13rem; + } + 45% { + top: -6rem; + left: -13rem; + } + 55% { + top: -6rem; + left: -23rem; + } + 65% { + left: -23rem; + top: -14rem; + } + 75% { + top: -14rem; + left: -2rem; + } + 85% { + left: -2rem; + top: -10rem; + } + 95% { + left: 0; + top: -10rem; + opacity: 1; + } + 96% { + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 97% { + top: -10rem; + left: 0.5rem; + opacity: 1; + } + 98% { + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 100% { + top: -10rem; + left: 0.5rem; + opacity: 1; + } +} +.pacman-backgroud__ghosts__ghost3 { + color: rgb(255, 0, 0); + font-size: 2rem; + position: relative; + -webkit-animation-name: red-ghost; + animation-name: red-ghost; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +@-webkit-keyframes red-ghost { + 5% { + top: 0; + right: 0; + } + 10% { + top: 0; + right: 0rem; + } + 15% { + top: 0; + right: 1rem; + } + 20% { + top: 0; + right: 2rem; + } + 25% { + top: -2.5rem; + right: 2rem; + } + 30% { + top: -2.5rem; + right: 10rem; + } + 40% { + top: 8rem; + right: 10rem; + } + 50% { + top: 8rem; + right: 15rem; + } + 60% { + top: 0.5rem; + right: 15rem; + } + 70% { + top: 0.5rem; + right: 10rem; + } + 80% { + top: 4.5rem; + right: 10rem; + } + 90% { + top: 4.5rem; + right: -7.5rem; + } + 100% { + top: 6rem; + right: -7.5rem; + } +} +@keyframes red-ghost { + 5% { + top: 0; + right: 0; + } + 10% { + top: 0; + right: 0rem; + } + 15% { + top: 0; + right: 1rem; + } + 20% { + top: 0; + right: 2rem; + } + 25% { + top: -2.5rem; + right: 2rem; + } + 30% { + top: -2.5rem; + right: 10rem; + } + 40% { + top: 8rem; + right: 10rem; + } + 50% { + top: 8rem; + right: 15rem; + } + 60% { + top: 0.5rem; + right: 15rem; + } + 70% { + top: 0.5rem; + right: 10rem; + } + 80% { + top: 4.5rem; + right: 10rem; + } + 90% { + top: 4.5rem; + right: -7.5rem; + } + 100% { + top: 6rem; + right: -7.5rem; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/angela/pacman.css.map b/01-HTML-CSS/06-animations/HW/angela/pacman.css.map new file mode 100644 index 000000000..18fd5a624 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/angela/pacman.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pacman.scss","pacman.css"],"names":[],"mappings":"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","file":"pacman.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/angela/pacman.html b/01-HTML-CSS/06-animations/HW/angela/pacman.html new file mode 100644 index 000000000..028ac4668 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/angela/pacman.html @@ -0,0 +1,35 @@ + + + + + + + pac man + + + + + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+

game over

+
insert coins to continue
+
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/angela/pacman.scss b/01-HTML-CSS/06-animations/HW/angela/pacman.scss new file mode 100644 index 000000000..9722cd6de --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/angela/pacman.scss @@ -0,0 +1,405 @@ +body{ + margin: 0; + overflow-x: hidden; +} + +.pacman-backgroud{ + margin: 2rem auto; + height: 80vh; + width: 80vw; + background-image: url("https://i.pinimg.com/originals/52/a3/3c/52a33c10ae0c117156dd2807a4f324da.png"); + background-repeat: no-repeat; + background-size: contain; + margin-left: 20%; + + &__pacman{ + height: 2rem; + width: 2.5rem; + position: relative; + top: 54%; + left: 35%; + animation-name: pacman; + animation-duration: 20s; + animation-fill-mode: forwards; + + @keyframes pacman { + 0%{ + top: 54%; + left: 35%; + + } + 5%{ + top: 54%; + left: 46%; + } + 10%{ + top: 62%; + left: 46%; + transform: rotate(180deg); + } + 15%{ + top: 62%; + left:38%; + } + 25%{ + top: 72%; + left: 38%; + transform: rotate(90deg); + } + 30%{ + top: 72%; + left: 16%; + transform: rotate(-90deg); + } + 35%{ + top: 44%; + left: 16%; + transform: rotate(180deg); + opacity: 1; + } + 40%{ + top: 44%; + left: 0; + opacity:0; + } + 50%{ + top: 44%; + left: 70%; + opacity: 0; + } + 55%{ + top: 44%; + left: 65%; + opacity: 1; + transform: rotate(180deg); + } + 60%{ + top: 44%; + left:53%; + } + 70%{ + left: 53%; + top: 25%; + transform: rotate(-90deg); + } + 80%{ + top: 25%; + left: 66%; + transform: rotate(0deg); + } + 85%{ + left: 65%; + top: 4%; + transform: rotate(-90deg); + } + 90%{ + top: 4%; + left: 38%; + transform: rotate(180deg); + } + 95%{ + left: 38%; + top: 15%; + transform: rotate(180deg); + opacity: 1; + } + 96%{ + left: 38%; + top: 15%; + opacity: 0; + } + 97%{ + left: 38%; + top: 15%; + opacity: 1; + } + 98%{ + left: 38%; + top: 15%; + opacity: 0; + } + 100%{ + left: 38%; + top: 15%; + opacity: 1; + } + } + + img{ + height: 100%; + + } + } + + &__game-over{ + height: 7rem; + width: 72.3%; + position: relative; + top:0rem; + text-align: center; + animation-name: game-over; + animation-duration: 20s; + opacity: 0; + animation-fill-mode: forwards; + + @keyframes game-over { + 0%{ + opacity: 0; + } + 97%{ + opacity: 0; + } + 100%{ + opacity: 1; + } + } + + + + } + p{ + font-family: "Audiowide", sans-serif; + font-size: 7rem; + color: rgb(130, 20, 185); + text-shadow:0.7rem 0.1rem rgb(0, 0, 0); + margin-bottom: 0; + } + h6{ + font-family: "Audiowide", sans-serif; + font-size: 2rem; + color: rgb(130, 20, 185); + text-shadow:0.7rem 0.1rem rgb(0, 0, 0); + margin-top: 0; + } +} + +.pacman-backgroud__ghosts{ + position: relative; + top: 37%; + left: 31%; + max-width: 10rem; + + &__ghost1{ + color: rgb(222, 78, 247); + float: left; + font-size: 2rem; + margin-right: 1rem; + position: relative; + animation-name: pink-ghost; + animation-duration: 20s ; + animation-fill-mode: forwards; + + @keyframes pink-ghost { + 5%{ + top: 0; + left: 1rem; + } + 10%{ + top:0rem; + left:3rem; + } + 15%{ + top:-2rem; + left:3rem; + } + 20%{ + top: -3rem; + left: 6rem; + } + 30%{ + top: -3rem; + left: 12rem; + } + 40%{ + top: 0; + left: 12rem; + } + 50%{ + top: 0; + left: 18rem; + } + 60%{ + top: 15rem; + left: 18rem; + } + 70%{ + top: 15rem; + left: 28rem; + } + 80%{ + top: 18rem; + left: 28rem; + } + 90%{ + top: 18rem; + left: 0; + } + 100%{ + top: 16rem; + left: 0; + } + + } + + + } + &__ghost2{ + color: rgb(216, 116, 16); + float: left; + font-size: 2rem; + margin-right: 1rem; + position: relative; + animation-name: orange-ghost; + animation-duration: 20s; + animation-delay: 25ms; + animation-fill-mode: forwards; + + @keyframes orange-ghost { + 5%{ + top:-2rem; + left:0; + } + 10%{ + top: -3rem; + left: -2rem; + } + 15%{ + top: -6rem; + left:-2rem ; + + } + 20%{ + top: -6rem; + left: -8rem; + } + 25%{ + top: -10rem; + left:-8rem ; + } + 35%{ + top: -10rem; + left: -13rem; + } + 45%{ + top: -6rem; + left: -13rem; + } + 55%{ + top: -6rem; + left: -23rem; + } + 65%{ + left: -23rem; + top: -14rem; + } + 75%{ + top: -14rem; + left: -2rem; + } + 85%{ + left: -2rem; + top: -10rem; + + } + 95%{ + left: 0; + top: -10rem; + opacity: 1; + } + 96%{ + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 97%{ + top: -10rem; + left: 0.5rem; + opacity: 1; + } + 98%{ + top: -10rem; + left: 0.5rem; + opacity: 0; + } + 100%{ + top: -10rem; + left: 0.5rem; + opacity: 1; + } + + + } + + } + &__ghost3{ + color: rgb(255, 0, 0); + font-size: 2rem; + position: relative; + animation-name: red-ghost; + animation-duration: 20s; + animation-fill-mode: forwards; + + @keyframes red-ghost { + 5%{ + top: 0; + right: 0; + } + 10%{ + top: 0; + right: 0rem; + } + 15%{ + top: 0; + right: 1rem; + } + 20%{ + top: 0; + right: 2rem; + } + 25%{ + top: -2.5rem; + right: 2rem; + } + 30%{ + top: -2.5rem; + right: 10rem; + } + 40%{ + top:8rem ; + right: 10rem; + } + 50%{ + top: 8rem; + right:15rem ; + } + 60%{ + top:0.5rem ; + right:15rem ; + } + 70%{ + top:0.5rem ; + right:10rem ; + } + 80%{ + top:4.5rem ; + right: 10rem; + } + 90%{ + top:4.5rem ; + right:-7.5rem ; + } + 100%{ + top:6rem ; + right:-7.5rem ; + } + + } + } +} + +// embed{ +// width: 15rem; +// position: absolute; +// top: 0; +// height: 7rem; +// } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/ballon.html b/01-HTML-CSS/06-animations/HW/aviva elias/ballon.html new file mode 100644 index 000000000..71b84df30 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva elias/ballon.html @@ -0,0 +1,82 @@ + + + + + + + Document + + + + + +




+




+




+




+




+




+




+




+




+




+ +
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + + + + +
+ +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + +
+ +
+
+
+
+
+
+ + + +
+
+ \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/dist/style.css b/01-HTML-CSS/06-animations/HW/aviva elias/dist/style.css new file mode 100644 index 000000000..aa6528820 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva elias/dist/style.css @@ -0,0 +1,251 @@ +body { + margin: 0; + background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCw6JwarS6Xgju4vShw07YYnEyP-Pqg9fPtg&usqp=CAU"); + overflow-x: hidden; +} + +.balon-container { + display: grid; + grid-template-columns: 200px 200px 200px 200px 200px 200px 200px 200px 200px; + grid-template-rows: 150px 150px 150px; + width: 1000px; + height: 600px; + justify-content: center; + position: relative; + left: 300px; + row-gap: 200px; +} +.balon-container__singel-left { + height: 150px; + width: 200px; + animation-name: leftlbalon; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 1s; +} +.balon-container__singel-left img { + height: 180px; + width: 120px; + animation-name: balonmove; + animation-iteration-count: infinite; + position: relative; + animation-duration: 1s; + animation-direction: alternate; +} +@keyframes leftlbalon { + from { + bottom: 0px; + left: 500px; + } + to { + bottom: 1200px; + left: 0px; + } +} +@keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__singel-right { + height: 150px; + width: 200px; + left: 0px; + animation-name: rightbalon; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 1s; +} +.balon-container__singel-right img { + height: 180px; + width: 120px; + animation-name: balonmove; + animation-iteration-count: infinite; + position: relative; + animation-duration: 1s; + animation-direction: alternate; +} +@keyframes rightbalon { + from { + bottom: 0px; + left: 0px; + } + to { + bottom: 1200px; + left: 1500px; + } +} +@keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__singel-rightdelay { + height: 150px; + width: 200px; + left: 0px; + animation-name: rightdelay; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 2s; +} +.balon-container__singel-rightdelay img { + height: 180px; + width: 120px; + animation-name: balonmove; + animation-iteration-count: infinite; + position: relative; + animation-duration: 1s; + animation-direction: alternate; +} +@keyframes rightdelay { + from { + bottom: 0px; + left: 0px; + } + to { + bottom: 1200px; + left: 1500px; + } +} +@keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__singel-leftdelay { + height: 150px; + width: 200px; + animation-name: leftdelay; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 2s; +} +.balon-container__singel-leftdelay img { + height: 180px; + width: 120px; + animation-name: leftmove; + animation-iteration-count: infinite; + position: relative; + animation-duration: 1s; + animation-direction: alternate; +} +@keyframes leftdelay { + from { + bottom: 0px; + left: 200px; + } + to { + bottom: 1200px; + left: 0px; + } +} +@keyframes leftmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__balon-flex { + display: flex; + width: 200px; + flex-direction: row; + justify-content: space-between; + animation-name: flexbalon; + animation-duration: 20s; + animation-timing-function: ease-out; + position: relative; + animation-fill-mode: forwards; +} +.balon-container__balon-flex img { + height: 120px; + width: 80px; + animation-name: flexmove; + animation-duration: 0.3s; + animation-direction: alternate; + animation-iteration-count: infinite; + position: relative; + animation-timing-function: ease-in; +} +@keyframes flexbalon { + 0% { + bottom: 0; + width: 200px; + } + 30% { + bottom: 200px; + width: 200px; + } + 100% { + bottom: 1200px; + width: 2000px; + } +} +@keyframes flexmove { + from { + left: 0px; + left: 3px; + } +} + +.singel-big { + height: 200px; + width: 150px; + left: 650px; + animation-name: bigbalon; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; +} + +.singel-big img { + height: 180px; + width: 120px; + animation-name: bigmove; + animation-iteration-count: infinite; + position: relative; + animation-duration: 30s; +} + +@keyframes bigbalon { + from { + bottom: 0px; + } + to { + bottom: 2000px; + } +} +@keyframes bigmove { + 0% { + width: 120px; + height: 180px; + } + 75% { + width: 120px; + height: 180px; + } + 100% { + width: 360px; + height: 480px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/3balons.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/3balons.jpg new file mode 100644 index 000000000..7c1710aff Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/3balons.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/blue balon.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/blue balon.jpg new file mode 100644 index 000000000..73623a16c Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/blue balon.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/green balon.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/green balon.jpg new file mode 100644 index 000000000..d3a906ec2 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/green balon.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/heartbalon.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/heartbalon.jpg new file mode 100644 index 000000000..2b0f6c3a5 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/heartbalon.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/manybalons.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/manybalons.jpg new file mode 100644 index 000000000..2f1716951 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/manybalons.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/red balon.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/red balon.jpg new file mode 100644 index 000000000..538c61b67 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/red balon.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/image/yellow balon.jpg b/01-HTML-CSS/06-animations/HW/aviva elias/image/yellow balon.jpg new file mode 100644 index 000000000..d08d5d8d8 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/aviva elias/image/yellow balon.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/style.css b/01-HTML-CSS/06-animations/HW/aviva elias/style.css new file mode 100644 index 000000000..02e89ff8d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva elias/style.css @@ -0,0 +1,402 @@ +body { + margin: 0; + background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCw6JwarS6Xgju4vShw07YYnEyP-Pqg9fPtg&usqp=CAU"); + overflow-x: hidden; +} + +.balon-container { + display: grid; + grid-template-columns: 200px 200px 200px 200px 200px 200px 200px 200px 200px; + grid-template-rows: 150px 150px 150px; + width: 1000px; + height: 600px; + justify-content: center; + position: relative; + left: 300px; + row-gap: 200px; +} +.balon-container__singel-left { + height: 150px; + width: 200px; + -webkit-animation-name: leftlbalon; + animation-name: leftlbalon; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.balon-container__singel-left img { + height: 180px; + width: 120px; + -webkit-animation-name: balonmove; + animation-name: balonmove; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} +@-webkit-keyframes leftlbalon { + from { + bottom: 0px; + left: 500px; + } + to { + bottom: 1200px; + left: 0px; + } +} +@keyframes leftlbalon { + from { + bottom: 0px; + left: 500px; + } + to { + bottom: 1200px; + left: 0px; + } +} +@-webkit-keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +@keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__singel-right { + height: 150px; + width: 200px; + left: 0px; + -webkit-animation-name: rightbalon; + animation-name: rightbalon; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.balon-container__singel-right img { + height: 180px; + width: 120px; + -webkit-animation-name: balonmove; + animation-name: balonmove; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} +@-webkit-keyframes rightbalon { + from { + bottom: 0px; + left: 0px; + } + to { + bottom: 1200px; + left: 1500px; + } +} +@keyframes rightbalon { + from { + bottom: 0px; + left: 0px; + } + to { + bottom: 1200px; + left: 1500px; + } +} +@keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__singel-rightdelay { + height: 150px; + width: 200px; + left: 0px; + -webkit-animation-name: rightdelay; + animation-name: rightdelay; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-delay: 2s; + animation-delay: 2s; +} +.balon-container__singel-rightdelay img { + height: 180px; + width: 120px; + -webkit-animation-name: balonmove; + animation-name: balonmove; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} +@-webkit-keyframes rightdelay { + from { + bottom: 0px; + left: 0px; + } + to { + bottom: 1200px; + left: 1500px; + } +} +@keyframes rightdelay { + from { + bottom: 0px; + left: 0px; + } + to { + bottom: 1200px; + left: 1500px; + } +} +@keyframes balonmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__singel-leftdelay { + height: 150px; + width: 200px; + -webkit-animation-name: leftdelay; + animation-name: leftdelay; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-delay: 2s; + animation-delay: 2s; +} +.balon-container__singel-leftdelay img { + height: 180px; + width: 120px; + -webkit-animation-name: leftmove; + animation-name: leftmove; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} +@-webkit-keyframes leftdelay { + from { + bottom: 0px; + left: 200px; + } + to { + bottom: 1200px; + left: 0px; + } +} +@keyframes leftdelay { + from { + bottom: 0px; + left: 200px; + } + to { + bottom: 1200px; + left: 0px; + } +} +@-webkit-keyframes leftmove { + from { + left: 0; + } + to { + left: 50px; + } +} +@keyframes leftmove { + from { + left: 0; + } + to { + left: 50px; + } +} +.balon-container__balon-flex { + display: flex; + width: 200px; + flex-direction: row; + justify-content: space-between; + -webkit-animation-name: flexbalon; + animation-name: flexbalon; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + position: relative; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.balon-container__balon-flex img { + height: 120px; + width: 80px; + -webkit-animation-name: flexmove; + animation-name: flexmove; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +@-webkit-keyframes flexbalon { + 0% { + bottom: 0; + width: 200px; + } + 30% { + bottom: 200px; + width: 200px; + } + 100% { + bottom: 1200px; + width: 2000px; + } +} +@keyframes flexbalon { + 0% { + bottom: 0; + width: 200px; + } + 30% { + bottom: 200px; + width: 200px; + } + 100% { + bottom: 1200px; + width: 2000px; + } +} +@-webkit-keyframes flexmove { + from { + left: 0px; + left: 3px; + } +} +@keyframes flexmove { + from { + left: 0px; + left: 3px; + } +} + +.singel-big { + height: 200px; + width: 150px; + left: 650px; + -webkit-animation-name: bigbalon; + animation-name: bigbalon; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; +} + +.singel-big img { + height: 180px; + width: 120px; + -webkit-animation-name: bigmove; + animation-name: bigmove; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + -webkit-animation-duration: 30s; + animation-duration: 30s; +} + +@-webkit-keyframes bigbalon { + from { + bottom: 0px; + } + to { + bottom: 2000px; + } +} + +@keyframes bigbalon { + from { + bottom: 0px; + } + to { + bottom: 2000px; + } +} +@-webkit-keyframes bigmove { + 0% { + width: 120px; + height: 180px; + } + 75% { + width: 120px; + height: 180px; + } + 100% { + width: 360px; + height: 480px; + } +} +@keyframes bigmove { + 0% { + width: 120px; + height: 180px; + } + 75% { + width: 120px; + height: 180px; + } + 100% { + width: 360px; + height: 480px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/style.css.map b/01-HTML-CSS/06-animations/HW/aviva elias/style.css.map new file mode 100644 index 000000000..ff0e7bb10 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva elias/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva elias/style.scss b/01-HTML-CSS/06-animations/HW/aviva elias/style.scss new file mode 100644 index 000000000..8e1fc2b5a --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva elias/style.scss @@ -0,0 +1,252 @@ +body{ + margin: 0; + background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCw6JwarS6Xgju4vShw07YYnEyP-Pqg9fPtg&usqp=CAU"); + overflow-x: hidden; +} + + + +.balon-container{ + + display: grid; + grid-template-columns:200px 200px 200px 200px 200px 200px 200px 200px 200px; + grid-template-rows: 150px 150px 150px ; + width: 1000px; + height: 600px; + justify-content: center; + position: relative; + left: 300px; + row-gap: 200px; + + +&__singel-left{ + height: 150px; + width: 200px; + +animation-name:leftlbalon; +animation-duration: 10s; +animation-timing-function: ease-out; +animation-iteration-count: infinite; +position: relative; +animation-delay: 1s; + + + img{ + height: 180px; + width: 120px; + animation-name: balonmove ; + animation-iteration-count: infinite; + position: relative; + animation-duration:1s; + animation-direction: alternate; + + } + + @keyframes leftlbalon{ + from{bottom:0px; left: 500px;} + to{bottom: 1200px ; left: 0px} + + } + @keyframes balonmove { + from{left: 0;} + to{left: 50px;} + } + } + + + &__singel-right { + height: 150px; + width: 200px; + left: 0px; + animation-name:rightbalon; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 1s; + + + img{ + height: 180px; + width: 120px; + animation-name: balonmove ; + animation-iteration-count: infinite; + position: relative; + animation-duration:1s; + animation-direction: alternate; + + } + + @keyframes rightbalon{ + from{bottom: 0px; left: 0px;} + to{bottom: 1200px ; left: 1500px} + } + + + @keyframes balonmove { + from{ left: 0;} + + to{ left: 50px;} + + } + } + + + &__singel-rightdelay { + height: 150px; + width: 200px; + left: 0px; + animation-name:rightdelay; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 2s; + + + img{ + height: 180px; + width: 120px; + animation-name: balonmove ; + animation-iteration-count: infinite; + position: relative; + animation-duration:1s; + animation-direction: alternate; + + } + + @keyframes rightdelay{ + from{bottom: 0px; left: 0px;} + to{bottom: 1200px ; left: 1500px} + } + + + @keyframes balonmove { + from{ left: 0;} + + to{ left: 50px;} + + } + } + + &__singel-leftdelay { + height: 150px; + width: 200px; + + animation-name:leftdelay; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + animation-delay: 2s; + + + img{ + height: 180px; + width: 120px; + animation-name: leftmove ; + animation-iteration-count: infinite; + position: relative; + animation-duration:1s; + animation-direction: alternate; + + } + + @keyframes leftdelay{ + from{bottom: 0px; left: 200px;} + to{bottom: 1200px ; left: 0px} + } + + + @keyframes leftmove { + from{ left: 0;} + + to{ left: 50px;} + + } + } + + + + &__balon-flex{ + display: flex; + width: 200px; + flex-direction: row; + justify-content: space-between; + animation-name: flexbalon; + animation-duration: 20s; + animation-timing-function: ease-out; + position: relative; + + animation-fill-mode: forwards; + + img{ +height: 120px; +width: 80px; +animation-name: flexmove; +animation-duration: 0.3s; +animation-direction: alternate; +animation-iteration-count: infinite; +position: relative; +animation-timing-function: ease-in; + } +@keyframes flexbalon { + 0%{ + bottom: 0; width: 200px; + } + 30%{ + bottom: 200px;width: 200px; + } + 100%{ + bottom: 1200px;width: 2000px; + } + +} +@keyframes flexmove { + from{ + left: 0px; + left: 3px; + } +} + + } + + } + + .singel-big{ + height: 200px; + width: 150px; + left: 650px; + animation-name:bigbalon; + animation-duration: 10s; + animation-timing-function: ease-out; + animation-iteration-count: infinite; + position: relative; + } + + .singel-big img{ + height: 180px; + width: 120px; + animation-name: bigmove; + animation-iteration-count: infinite; + position: relative; + animation-duration:30s; + + + } + + @keyframes bigbalon{ + from{bottom: 0px; } + to{bottom: 2000px ; + } + } + @keyframes bigmove { + 0%{ + width: 120px; height: 180px; + } + 75%{width: 120px; height: 180px;} + 100%{ width:360px ;height:480px; + } + + } + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva-labyrinth/dist/style.css b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/dist/style.css new file mode 100644 index 000000000..a951aab18 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/dist/style.css @@ -0,0 +1,67 @@ +.labyrinth { + height: 600px; + width: 850px; + top: 70px; + margin: auto; + position: relative; + background-image: url("https://1.bp.blogspot.com/-bkhf2V2RDmo/XVzxHA75jUI/AAAAAAAAaxg/xB1tQpxf3lQ79BB1WFqD5vAiC6bcaT6VgCLcBGAs/w314-h320/800_5c86381089bc2.jpg"); + background-repeat: no-repeat; + background-size: 850px 600px; +} +.labyrinth__icon { + height: 50px; + width: 50px; + position: relative; + left: 0px; + animation-name: icon; + animation-duration: 10s; + animation-fill-mode: forwards; +} +.labyrinth__icon img { + height: 100%; + width: 50px; + right: 500px; +} +@keyframes icon { + 0% { + left: 310px; + top: 0px; + } + 25% { + left: 310px; + top: 90px; + } + 50% { + left: 460px; + top: 90px; + } + 100% { + left: 460px; + top: 580px; + } +} +.labyrinth__kiss { + height: 50px; + width: 50px; + position: relative; + left: 670px; + top: 400px; +} +.labyrinth__kiss img { + height: 0px; + width: 0px; + animation-name: kiss; + animation-duration: 4s; + animation-delay: 10s; + animation-direction: alternate; +} +@keyframes kiss { + 0% { + height: 0px; + width: 0px; + } + 100% { + height: 300px; + width: 300px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva-labyrinth/labyrinth.html b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/labyrinth.html new file mode 100644 index 000000000..787486cef --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/labyrinth.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + + + +
+
+ +
+
+ +
+
+
+ + diff --git a/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.css b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.css new file mode 100644 index 000000000..885ea3ce0 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.css @@ -0,0 +1,102 @@ +.labyrinth { + height: 600px; + width: 850px; + top: 70px; + margin: auto; + position: relative; + background-image: url("https://1.bp.blogspot.com/-bkhf2V2RDmo/XVzxHA75jUI/AAAAAAAAaxg/xB1tQpxf3lQ79BB1WFqD5vAiC6bcaT6VgCLcBGAs/w314-h320/800_5c86381089bc2.jpg"); + background-repeat: no-repeat; + background-size: 850px 600px; +} +.labyrinth__icon { + height: 50px; + width: 50px; + position: relative; + left: 0px; + -webkit-animation-name: icon; + animation-name: icon; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.labyrinth__icon img { + height: 100%; + width: 50px; + right: 500px; +} +@-webkit-keyframes icon { + 0% { + left: 310px; + top: 0px; + } + 25% { + left: 310px; + top: 90px; + } + 50% { + left: 460px; + top: 90px; + } + 100% { + left: 460px; + top: 580px; + } +} +@keyframes icon { + 0% { + left: 310px; + top: 0px; + } + 25% { + left: 310px; + top: 90px; + } + 50% { + left: 460px; + top: 90px; + } + 100% { + left: 460px; + top: 580px; + } +} +.labyrinth__kiss { + height: 50px; + width: 50px; + position: relative; + left: 670px; + top: 400px; +} +.labyrinth__kiss img { + height: 0px; + width: 0px; + -webkit-animation-name: kiss; + animation-name: kiss; + -webkit-animation-duration: 4s; + animation-duration: 4s; + -webkit-animation-delay: 10s; + animation-delay: 10s; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} +@-webkit-keyframes kiss { + 0% { + height: 0px; + width: 0px; + } + 100% { + height: 300px; + width: 300px; + } +} +@keyframes kiss { + 0% { + height: 0px; + width: 0px; + } + 100% { + height: 300px; + width: 300px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.css.map b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.css.map new file mode 100644 index 000000000..ebd58f976 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAKG;EACK,aAAA;EACA,YAAA;EACD,SAAA;EACD,YAAA;EACE,kBAAA;EACA,gKAAA;EACR,4BAAA;EACA,4BAAA;ACJA;ADOI;EACI,YAAA;EACA,WAAA;EACA,kBAAA;EACA,SAAA;EACA,4BAAA;UAAA,oBAAA;EACA,+BAAA;UAAA,uBAAA;EACD,qCAAA;UAAA,6BAAA;ACLP;ADQW;EACC,YAAA;EACA,WAAA;EACA,YAAA;ACNZ;ADSW;EACC;IACI,WAAA;IAAY,QAAA;ECN1B;EDQU;IAAK,WAAA;IAAW,SAAA;ECJ1B;EDKU;IAAK,WAAA;IAAY,SAAA;ECD3B;EDGU;IAAK,WAAA;IAAW,UAAA;ECC1B;AACF;ADTW;EACC;IACI,WAAA;IAAY,QAAA;ECN1B;EDQU;IAAK,WAAA;IAAW,SAAA;ECJ1B;EDKU;IAAK,WAAA;IAAY,SAAA;ECD3B;EDGU;IAAK,WAAA;IAAW,UAAA;ECC1B;AACF;ADKA;EACI,YAAA;EACI,WAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;ACHR;ADOO;EACC,WAAA;EACI,UAAA;EACA,4BAAA;UAAA,oBAAA;EACJ,8BAAA;UAAA,sBAAA;EACA,4BAAA;UAAA,oBAAA;EACA,sCAAA;UAAA,8BAAA;ACLR;ADOO;EACC;IAAI,WAAA;IAAY,UAAA;ECHtB;EDIM;IAAM,aAAA;IAAe,YAAA;ECA3B;AACF;ADHO;EACC;IAAI,WAAA;IAAY,UAAA;ECHtB;EDIM;IAAM,aAAA;IAAe,YAAA;ECA3B;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.scss b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.scss new file mode 100644 index 000000000..6277514e3 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/aviva-labyrinth/style.scss @@ -0,0 +1,68 @@ +body{ + +} + + + .labyrinth{ + height: 600px; + width: 850px; + top: 70px; + margin: auto; + position: relative; + background-image: url("https://1.bp.blogspot.com/-bkhf2V2RDmo/XVzxHA75jUI/AAAAAAAAaxg/xB1tQpxf3lQ79BB1WFqD5vAiC6bcaT6VgCLcBGAs/w314-h320/800_5c86381089bc2.jpg"); +background-repeat: no-repeat; +background-size: 850px 600px; + + + &__icon{ + height: 50px; + width: 50px; + position: relative; + left: 0px; + animation-name: icon; + animation-duration: 10s; + animation-fill-mode: forwards; + + + img{ + height: 100%; + width: 50px; + right: 500px; + + } + @keyframes icon { + 0%{ + left: 310px;top: 0px; + } + 25%{ left:310px;top: 90px;} + 50%{ left:460px; top:90px} + + 100%{left:460px;top:580px + + } + } + +} + +&__kiss{ + height: 50px; + width: 50px; + position: relative; + left: 670px; + top:400px; + + + + img{ + height: 0px; + width: 0px; + animation-name: kiss; + animation-duration: 4s; + animation-delay: 10s; + animation-direction: alternate; + } + @keyframes kiss { + 0%{ height: 0px;width: 0px; } + 100%{ height: 300px; width: 300px;} + } + }} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/idan/dist/style.css b/01-HTML-CSS/06-animations/HW/idan/dist/style.css new file mode 100644 index 000000000..64b67a70f --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/idan/dist/style.css @@ -0,0 +1,561 @@ +p { + opacity: 0; + font-size: 0.1vw; +} + +.bazel { + width: 100vw; + height: 100vh; + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047636039205925015/Untitled-2.png?width=1201&height=676"); + background-size: 100vw 100vh; + background-repeat: no-repeat; + position: absolute; + top: 0px; + left: 0px; +} + +.level { + margin: auto; + background-image: url("https://cdn.discordapp.com/attachments/548623818512531457/1047685728311722004/Untitled-3.png"); + width: 35vw; + background-size: 35vw 95vh; + background-repeat: no-repeat; + height: 100vh; +} + +.player { + background-image: url("https://cdn.discordapp.com/attachments/548623818512531457/1047653715185774612/joemama.gif"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + background-repeat: no-repeat; + position: absolute; + animation-name: player_movement; + animation-duration: 10s; + animation-fill-mode: forwards; + animation-timing-function: linear; +} + +.im_going_fucking_insane1 { + position: absolute; + top: 46.2vh; + left: 40.5vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 1100ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane2 { + position: absolute; + top: 46.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2500ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane3 { + position: absolute; + top: 43.5vh; + left: 59.2vw; + height: 0.7vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2700ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane4 { + position: absolute; + top: 40.9vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2600ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane5 { + position: absolute; + top: 38vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2800ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane6 { + position: absolute; + top: 35.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3000ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane7 { + position: absolute; + top: 32.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3100ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane8 { + position: absolute; + top: 30.25vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3200ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane9 { + position: absolute; + top: 27.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3300ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane10 { + position: absolute; + top: 25.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3400ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane11 { + position: absolute; + top: 22.3vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3500ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane12 { + position: absolute; + top: 19.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3600ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane13 { + position: absolute; + top: 17vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3700ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane14 { + position: absolute; + top: 14.3vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3800ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane15 { + position: absolute; + top: 11.75vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3900ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane16 { + position: absolute; + top: 11.75vh; + left: 60.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4100ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane17 { + position: absolute; + top: 11.75vh; + left: 61.6vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4250ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane18 { + position: absolute; + top: 11.75vh; + left: 62.8vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4400ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane19 { + position: absolute; + top: 11.75vh; + left: 64.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4600ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane20 { + position: absolute; + top: 11.75vh; + left: 65.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4700ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane21 { + position: absolute; + top: 13.75vh; + left: 65.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4800ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} + +@keyframes fade { + from { + opacity: 100; + } + to { + opacity: 0; + } +} +.ghost1 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + top: 35.4vh; + left: 49vw; + animation-name: ghost; + animation-delay: 0.5s; + animation-duration: 10s; + animation-fill-mode: forwards; + animation-timing-function: linear; +} + +.ghost2 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + animation-iteration-count: infinite; + animation-name: ghost2; + animation-duration: 1s; + animation-delay: 0ms; + left: 46vw; +} + +.ghost3 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + animation-iteration-count: infinite; + animation-name: ghost2; + animation-duration: 1s; + animation-delay: 0ms; + left: 51.6vw; +} + +.ghost4 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + animation-iteration-count: infinite; + animation-name: ghost2; + animation-duration: 1s; + animation-delay: 0ms; + left: 48.8vw; +} + +@keyframes ghost2 { + 0% { + top: 43.6vh; + } + 50% { + top: 42.6vh; + } + 100% { + top: 43.6vh; + } +} +@keyframes ghost { + 0% { + top: 35.4vh; + left: 49vw; + } + 5% { + top: 35.4vh; + left: 43.4vw; + rotate: 0deg; + } + 6% { + rotate: 90deg; + } + 8% { + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9% { + rotate: 0deg; + } + 16% { + left: 33vw; + opacity: 100; + } + 17% { + opacity: 0; + left: 33vw; + } + 18% { + opacity: 0; + left: 66vw; + } + 19% { + opacity: 100; + } + 24% { + left: 58.8vw; + rotate: 0deg; + top: 43.6vh; + } + 25% { + rotate: 90deg; + top: 43.6vh; + } + 30% { + left: 58.8vw; + top: 28.6vh; + rotate: 90deg; + } + 31% { + rotate: 180deg; + left: 58.8vw; + } + 35% { + left: 64.2vw; + rotate: 180deg; + } + 38% { + left: 64.7vw; + rotate: 90deg; + top: 28.6vh; + } + 44% { + opacity: 100; + top: 11vh; + left: 64.7vw; + } + 50% { + opacity: 0; + left: 64.2vw; + } + 100% { + opacity: 0; + rotate: 90deg; + } +} +@keyframes player_movement { + 0% { + top: 51.4vh; + left: 50vw; + } + 5% { + top: 51.4vh; + left: 43.4vw; + rotate: 0deg; + } + 6% { + rotate: 90deg; + } + 8% { + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9% { + rotate: 0deg; + } + 16% { + left: 33vw; + opacity: 100; + } + 17% { + opacity: 0; + left: 33vw; + } + 18% { + opacity: 0; + left: 66vw; + } + 19% { + opacity: 100; + } + 24% { + left: 58.4vw; + rotate: 0deg; + top: 43.6vh; + } + 25% { + rotate: 90deg; + top: 43.6vh; + } + 40% { + left: 58.4vw; + top: 9.3vh; + rotate: 90deg; + } + 41% { + rotate: 180deg; + left: 58.4vw; + } + 47% { + left: 64.2vw; + top: 9.3vh; + rotate: 180deg; + } + 48% { + rotate: 270deg; + top: 10.3vh; + } + 49% { + opacity: 100; + top: 11vh; + } + 50% { + opacity: 0; + } + 100% { + opacity: 0; + } +} +body { + background-image: url("https://images-ext-2.discordapp.net/external/1XmGprcwbnBivvuP0d-1uduhQjDANZ1A_P-CAXBIztM/%3Fw%3D700%26h%3D530%26crop%3D1/https/www.whitehouse.gov/wp-content/uploads/2021/01/us-capitol.jpg?width=630&height=477"); + background-size: 100vw 100vh; + background-color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/idan/index.html b/01-HTML-CSS/06-animations/HW/idan/index.html new file mode 100644 index 000000000..d2474a1fe --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/idan/index.html @@ -0,0 +1,44 @@ + + + + + + + PLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASEPLEASE + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/idan/style.css b/01-HTML-CSS/06-animations/HW/idan/style.css new file mode 100644 index 000000000..50db24e32 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/idan/style.css @@ -0,0 +1,838 @@ +p { + opacity: 0; + font-size: 0.1vw; +} + +.bazel { + width: 100vw; + height: 100vh; + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047636039205925015/Untitled-2.png?width=1201&height=676"); + background-size: 100vw 100vh; + background-repeat: no-repeat; + position: absolute; + top: 0px; + left: 0px; +} + +.level { + margin: auto; + background-image: url("https://cdn.discordapp.com/attachments/548623818512531457/1047685728311722004/Untitled-3.png"); + width: 35vw; + background-size: 35vw 95vh; + background-repeat: no-repeat; + height: 100vh; +} + +.player { + background-image: url("https://cdn.discordapp.com/attachments/548623818512531457/1047653715185774612/joemama.gif"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + background-repeat: no-repeat; + position: absolute; + -webkit-animation-name: player_movement; + animation-name: player_movement; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +.im_going_fucking_insane1 { + position: absolute; + top: 46.2vh; + left: 40.5vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 1100ms; + animation-delay: 1100ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane2 { + position: absolute; + top: 46.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 2500ms; + animation-delay: 2500ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane3 { + position: absolute; + top: 43.5vh; + left: 59.2vw; + height: 0.7vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 2700ms; + animation-delay: 2700ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane4 { + position: absolute; + top: 40.9vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 2600ms; + animation-delay: 2600ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane5 { + position: absolute; + top: 38vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 2800ms; + animation-delay: 2800ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane6 { + position: absolute; + top: 35.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3000ms; + animation-delay: 3000ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane7 { + position: absolute; + top: 32.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3100ms; + animation-delay: 3100ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane8 { + position: absolute; + top: 30.25vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3200ms; + animation-delay: 3200ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane9 { + position: absolute; + top: 27.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3300ms; + animation-delay: 3300ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane10 { + position: absolute; + top: 25.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3400ms; + animation-delay: 3400ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane11 { + position: absolute; + top: 22.3vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3500ms; + animation-delay: 3500ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane12 { + position: absolute; + top: 19.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3600ms; + animation-delay: 3600ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane13 { + position: absolute; + top: 17vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3700ms; + animation-delay: 3700ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane14 { + position: absolute; + top: 14.3vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3800ms; + animation-delay: 3800ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane15 { + position: absolute; + top: 11.75vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 3900ms; + animation-delay: 3900ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane16 { + position: absolute; + top: 11.75vh; + left: 60.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 4100ms; + animation-delay: 4100ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane17 { + position: absolute; + top: 11.75vh; + left: 61.6vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 4250ms; + animation-delay: 4250ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane18 { + position: absolute; + top: 11.75vh; + left: 62.8vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 4400ms; + animation-delay: 4400ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane19 { + position: absolute; + top: 11.75vh; + left: 64.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 4600ms; + animation-delay: 4600ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane20 { + position: absolute; + top: 11.75vh; + left: 65.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 4700ms; + animation-delay: 4700ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +.im_going_fucking_insane21 { + position: absolute; + top: 13.75vh; + left: 65.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + -webkit-animation-delay: 4800ms; + animation-delay: 4800ms; + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0ms; + animation-duration: 0ms; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: -1; +} + +@-webkit-keyframes fade { + from { + opacity: 100; + } + to { + opacity: 0; + } +} + +@keyframes fade { + from { + opacity: 100; + } + to { + opacity: 0; + } +} +.ghost1 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + top: 35.4vh; + left: 49vw; + -webkit-animation-name: ghost; + animation-name: ghost; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-duration: 10s; + animation-duration: 10s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +.ghost2 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: ghost2; + animation-name: ghost2; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0ms; + animation-delay: 0ms; + left: 46vw; +} + +.ghost3 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: ghost2; + animation-name: ghost2; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0ms; + animation-delay: 0ms; + left: 51.6vw; +} + +.ghost4 { + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: ghost2; + animation-name: ghost2; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0ms; + animation-delay: 0ms; + left: 48.8vw; +} + +@-webkit-keyframes ghost2 { + 0% { + top: 43.6vh; + } + 50% { + top: 42.6vh; + } + 100% { + top: 43.6vh; + } +} + +@keyframes ghost2 { + 0% { + top: 43.6vh; + } + 50% { + top: 42.6vh; + } + 100% { + top: 43.6vh; + } +} +@-webkit-keyframes ghost { + 0% { + top: 35.4vh; + left: 49vw; + } + 5% { + top: 35.4vh; + left: 43.4vw; + rotate: 0deg; + } + 6% { + rotate: 90deg; + } + 8% { + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9% { + rotate: 0deg; + } + 16% { + left: 33vw; + opacity: 100; + } + 17% { + opacity: 0; + left: 33vw; + } + 18% { + opacity: 0; + left: 66vw; + } + 19% { + opacity: 100; + } + 24% { + left: 58.8vw; + rotate: 0deg; + top: 43.6vh; + } + 25% { + rotate: 90deg; + top: 43.6vh; + } + 30% { + left: 58.8vw; + top: 28.6vh; + rotate: 90deg; + } + 31% { + rotate: 180deg; + left: 58.8vw; + } + 35% { + left: 64.2vw; + rotate: 180deg; + } + 38% { + left: 64.7vw; + rotate: 90deg; + top: 28.6vh; + } + 44% { + opacity: 100; + top: 11vh; + left: 64.7vw; + } + 50% { + opacity: 0; + left: 64.2vw; + } + 100% { + opacity: 0; + rotate: 90deg; + } +} +@keyframes ghost { + 0% { + top: 35.4vh; + left: 49vw; + } + 5% { + top: 35.4vh; + left: 43.4vw; + rotate: 0deg; + } + 6% { + rotate: 90deg; + } + 8% { + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9% { + rotate: 0deg; + } + 16% { + left: 33vw; + opacity: 100; + } + 17% { + opacity: 0; + left: 33vw; + } + 18% { + opacity: 0; + left: 66vw; + } + 19% { + opacity: 100; + } + 24% { + left: 58.8vw; + rotate: 0deg; + top: 43.6vh; + } + 25% { + rotate: 90deg; + top: 43.6vh; + } + 30% { + left: 58.8vw; + top: 28.6vh; + rotate: 90deg; + } + 31% { + rotate: 180deg; + left: 58.8vw; + } + 35% { + left: 64.2vw; + rotate: 180deg; + } + 38% { + left: 64.7vw; + rotate: 90deg; + top: 28.6vh; + } + 44% { + opacity: 100; + top: 11vh; + left: 64.7vw; + } + 50% { + opacity: 0; + left: 64.2vw; + } + 100% { + opacity: 0; + rotate: 90deg; + } +} +@-webkit-keyframes player_movement { + 0% { + top: 51.4vh; + left: 50vw; + } + 5% { + top: 51.4vh; + left: 43.4vw; + rotate: 0deg; + } + 6% { + rotate: 90deg; + } + 8% { + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9% { + rotate: 0deg; + } + 16% { + left: 33vw; + opacity: 100; + } + 17% { + opacity: 0; + left: 33vw; + } + 18% { + opacity: 0; + left: 66vw; + } + 19% { + opacity: 100; + } + 24% { + left: 58.4vw; + rotate: 0deg; + top: 43.6vh; + } + 25% { + rotate: 90deg; + top: 43.6vh; + } + 40% { + left: 58.4vw; + top: 9.3vh; + rotate: 90deg; + } + 41% { + rotate: 180deg; + left: 58.4vw; + } + 47% { + left: 64.2vw; + top: 9.3vh; + rotate: 180deg; + } + 48% { + rotate: 270deg; + top: 10.3vh; + } + 49% { + opacity: 100; + top: 11vh; + } + 50% { + opacity: 0; + } + 100% { + opacity: 0; + } +} +@keyframes player_movement { + 0% { + top: 51.4vh; + left: 50vw; + } + 5% { + top: 51.4vh; + left: 43.4vw; + rotate: 0deg; + } + 6% { + rotate: 90deg; + } + 8% { + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9% { + rotate: 0deg; + } + 16% { + left: 33vw; + opacity: 100; + } + 17% { + opacity: 0; + left: 33vw; + } + 18% { + opacity: 0; + left: 66vw; + } + 19% { + opacity: 100; + } + 24% { + left: 58.4vw; + rotate: 0deg; + top: 43.6vh; + } + 25% { + rotate: 90deg; + top: 43.6vh; + } + 40% { + left: 58.4vw; + top: 9.3vh; + rotate: 90deg; + } + 41% { + rotate: 180deg; + left: 58.4vw; + } + 47% { + left: 64.2vw; + top: 9.3vh; + rotate: 180deg; + } + 48% { + rotate: 270deg; + top: 10.3vh; + } + 49% { + opacity: 100; + top: 11vh; + } + 50% { + opacity: 0; + } + 100% { + opacity: 0; + } +} +body { + background-image: url("https://images-ext-2.discordapp.net/external/1XmGprcwbnBivvuP0d-1uduhQjDANZ1A_P-CAXBIztM/%3Fw%3D700%26h%3D530%26crop%3D1/https/www.whitehouse.gov/wp-content/uploads/2021/01/us-capitol.jpg?width=630&height=477"); + background-size: 100vw 100vh; + background-color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/idan/style.css.map b/01-HTML-CSS/06-animations/HW/idan/style.css.map new file mode 100644 index 000000000..2eabd0516 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/idan/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/idan/style.scss b/01-HTML-CSS/06-animations/HW/idan/style.scss new file mode 100644 index 000000000..445365ff3 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/idan/style.scss @@ -0,0 +1,550 @@ +p{ + opacity: 0; + font-size: 0.1vw; +} +.bazel{ + width: 100vw; + height: 100vh; + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047636039205925015/Untitled-2.png?width=1201&height=676"); + background-size: 100vw 100vh; + background-repeat: no-repeat; + position: absolute; + top: 0px; + left: 0px; +} +.level{ + margin: auto; + background-image: url("https://cdn.discordapp.com/attachments/548623818512531457/1047685728311722004/Untitled-3.png"); + width: 35vw; + background-size: 35vw 95vh; + background-repeat: no-repeat; + + height: 100vh; +} +.player{ + background-image: url("https://cdn.discordapp.com/attachments/548623818512531457/1047653715185774612/joemama.gif"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + background-repeat: no-repeat; + position:absolute; + + animation-name: player_movement; + animation-duration: 10s; + animation-fill-mode: forwards; + animation-timing-function: linear; +} + +.im_going_fucking_insane1{ + position: absolute; + top:46.2vh; + left: 40.5vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 1100ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane2{ + position: absolute; + top:46.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2500ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane3{ + position: absolute; + top:43.5vh; + left: 59.2vw; + height: 0.7vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2700ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane4{ + position: absolute; + top:40.9vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2600ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane5{ + position: absolute; + top:38vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 2800ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane6{ + position: absolute; + top:35.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3000ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane7{ + position: absolute; + top:32.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3100ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane8{ + position: absolute; + top:30.25vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3200ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane9{ + position: absolute; + top: 27.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3300ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane10{ + position: absolute; + top: 25.2vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3400ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane11{ + position: absolute; + top:22.3vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3500ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +//yes i know i can use flex and column for this and have less work to do but i already did this so pleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleasepleaseplease +.im_going_fucking_insane12{ + position: absolute; + top:19.7vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3600ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +//no i dont want to know what happens if the screen ratio isnt 16:10 +.im_going_fucking_insane13{ + position: absolute; + top:17vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3700ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane14{ + position: absolute; + top:14.3vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3800ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane15{ + position: absolute; + top:11.75vh; + left: 59.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 3900ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane16{ + position: absolute; + top:11.75vh; + left: 60.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4100ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane17{ + position: absolute; + top:11.75vh; + left: 61.6vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4250ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane18{ + position: absolute; + top:11.75vh; + left: 62.8vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4400ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane19{ + position: absolute; + top:11.75vh; + left: 64.2vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4600ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane20{ + position: absolute; + top:11.75vh; + left: 65.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4700ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +.im_going_fucking_insane21{ + position: absolute; + top: 13.75vh; + left: 65.4vw; + height: 0.6vh; + width: 0.35vw; + background-color: #febeb4; + animation-delay: 4800ms; + animation-name: fade; + animation-duration: 0ms; + animation-fill-mode: forwards; + z-index: -1; +} +//oh great its only 5 am and i didnt finish the other 3 ghosts +@keyframes fade { + from{ + opacity:100; + } + to{ + opacity: 0; + } +} +.ghost1{ + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + top: 35.4vh; + left: 49vw; + animation-name: ghost; + animation-delay: 0.5s; + animation-duration: 10s; + animation-fill-mode: forwards; + animation-timing-function: linear; +} +.ghost2{ + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + animation-iteration-count: infinite; + animation-name: ghost2; + animation-duration: 1s; + animation-delay: 0ms; + left: 46vw; +} +.ghost3{ + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + animation-iteration-count: infinite; + animation-name: ghost2; + animation-duration: 1s; + animation-delay: 0ms; + left: 51.6vw; + +} +.ghost4{ + background-image: url("https://media.discordapp.net/attachments/330360973699579904/1047631336422256680/Untitled-1.png?width=533&height=676"); + width: 2vw; + height: 5vh; + background-size: 2vw, 2vh; + position: absolute; + animation-iteration-count: infinite; + animation-name: ghost2; + animation-duration: 1s; + animation-delay: 0ms; + left: 48.8vw; + +} +//i consider this done although i hate it i also love the fact i dont have to see it again +@keyframes ghost2{ + 0%{ + top: 43.6vh; + } + 50%{ + top: 42.6vh; + } + 100%{ + top: 43.6vh; + } +} + +@keyframes ghost { + + 0% { + top: 35.4vh; + left: 49vw; + } + 5%{ + top: 35.4vh; + left: 43.4vw; + rotate:0deg + } + 6%{ + rotate: 90deg; + } + 8%{ + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9%{ + rotate: 0deg; + } + 16%{ + left: 33vw; + opacity: 100; + } + 17%{ + opacity: 0; + left: 33vw; + } + 18%{ + opacity: 0; + left: 66vw; + } + 19%{ + opacity: 100; + } + 24%{ + left:58.8vw; + rotate: 0deg; + top: 43.6vh; + } + 25%{ + rotate: 90deg; + top: 43.6vh; + } + 30%{ + left:58.8vw; + top: 28.6vh; + rotate:90deg; + } + 31%{ + rotate: 180deg; + left:58.8vw; + } + 35%{ + left: 64.2vw; + rotate:180deg + } + 38%{ + left: 64.7vw; + rotate: 90deg; + top: 28.6vh; + } + 44%{ + opacity: 100; + top: 11vh; + left: 64.7vw; + } + 50%{ + opacity: 0; + left: 64.2vw; + } + 100%{ + opacity: 0; + rotate: 90deg; + } + +} + + + + +@keyframes player_movement { + + 0% { + top: 51.4vh; + left: 50vw; + } + 5%{ + top: 51.4vh; + left: 43.4vw; + rotate:0deg + } + 6%{ + rotate: 90deg; + } + 8%{ + rotate: 90deg; + top: 43.6vh; + left: 43.4vw; + } + 9%{ + rotate: 0deg; + } + 16%{ + left: 33vw; + opacity: 100; + } + 17%{ + opacity: 0; + left: 33vw; + } + 18%{ + opacity: 0; + left: 66vw; + } + 19%{ + opacity: 100; + } + 24%{ + left:58.4vw; + rotate: 0deg; + top: 43.6vh; + } + 25%{ + rotate: 90deg; + top: 43.6vh; + } + 40%{ + left:58.4vw; + top: 9.3vh; + rotate:90deg; + } + 41%{ + rotate: 180deg; + left:58.4vw; + } + 47%{ + left: 64.2vw; + top: 9.3vh; + rotate:180deg + } + 48%{ + rotate: 270deg; + top: 10.3vh; + } + 49%{ + opacity: 100; + top: 11vh; + } + 50%{ + opacity: 0; + } + 100%{ + opacity: 0; + } + +} +body{ + background-image: url("https://images-ext-2.discordapp.net/external/1XmGprcwbnBivvuP0d-1uduhQjDANZ1A_P-CAXBIztM/%3Fw%3D700%26h%3D530%26crop%3D1/https/www.whitehouse.gov/wp-content/uploads/2021/01/us-capitol.jpg?width=630&height=477"); + background-size:100vw 100vh ; + background-color: black; + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/instructions.md b/01-HTML-CSS/06-animations/HW/instructions.md new file mode 100644 index 000000000..ac03ff5d9 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/instructions.md @@ -0,0 +1,4 @@ +Levels: +1) Create a blog, and add to it the fanciest animations you can think of +2) Create an animation like the ballons in this video: https://youtu.be/Skoh7VFg-a4?t=21 +3) create a game animation (packmen): https://youtu.be/dScq4P5gn4A?t=214 diff --git a/01-HTML-CSS/06-animations/HW/john-ben/dist/style.css b/01-HTML-CSS/06-animations/HW/john-ben/dist/style.css new file mode 100644 index 000000000..c4abdb1ef --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/john-ben/dist/style.css @@ -0,0 +1,70 @@ +body { + margin: 0%; + background-image: url("https://t4.ftcdn.net/jpg/04/86/09/87/360_F_486098711_h1IIw3sF5CYunPrBa45ugVZRxwoGop3C.jpg"); +} + +.wrapper { + width: 100vw; + height: 100vh; + display: flex; + align-items: flex-end; + justify-content: space-around; +} +.wrapper__titre { + position: absolute; + display: flex; + top: 3%; + font-size: xx-large; + font-style: italic; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + color: white; +} +.wrapper__france { + position: absolute; + display: flex; + top: 20%; +} +.wrapper__brazil { + position: absolute; + display: flex; + top: 20%; + left: 10%; +} +.wrapper__argentina { + position: absolute; + display: flex; + top: 20%; + right: 10%; +} +.wrapper__ballon { + width: 200px; + height: 200px; + position: relative; + animation-name: high; + animation-duration: 5s; + animation-fill-mode: both; + animation-iteration-count: infinite; +} +.wrapper__ballon img { + height: 100%; + width: 100%; + border-radius: 100%; +} +.wrapper #ball1 { + animation-timing-function: linear; +} +.wrapper #ball2 { + animation-timing-function: ease; +} +.wrapper #ball3 { + animation-timing-function: ease-in; +} + +@keyframes high { + from { + bottom: 0px; + } + to { + bottom: 700px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/john-ben/index.html b/01-HTML-CSS/06-animations/HW/john-ben/index.html new file mode 100644 index 000000000..0095ac5c9 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/john-ben/index.html @@ -0,0 +1,36 @@ + + + + + + + world cup winner + + + +
+
+

World Cup Winner

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/john-ben/style.css b/01-HTML-CSS/06-animations/HW/john-ben/style.css new file mode 100644 index 000000000..222ffd7ae --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/john-ben/style.css @@ -0,0 +1,86 @@ +body { + margin: 0%; + background-image: url("https://t4.ftcdn.net/jpg/04/86/09/87/360_F_486098711_h1IIw3sF5CYunPrBa45ugVZRxwoGop3C.jpg"); +} + +.wrapper { + width: 100vw; + height: 100vh; + display: flex; + align-items: flex-end; + justify-content: space-around; +} +.wrapper__titre { + position: absolute; + display: flex; + top: 3%; + font-size: xx-large; + font-style: italic; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + color: white; +} +.wrapper__france { + position: absolute; + display: flex; + top: 20%; +} +.wrapper__brazil { + position: absolute; + display: flex; + top: 20%; + left: 10%; +} +.wrapper__argentina { + position: absolute; + display: flex; + top: 20%; + right: 10%; +} +.wrapper__ballon { + width: 200px; + height: 200px; + position: relative; + -webkit-animation-name: high; + animation-name: high; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.wrapper__ballon img { + height: 100%; + width: 100%; + border-radius: 100%; +} +.wrapper #ball1 { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} +.wrapper #ball2 { + -webkit-animation-timing-function: ease; + animation-timing-function: ease; +} +.wrapper #ball3 { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +@-webkit-keyframes high { + from { + bottom: 0px; + } + to { + bottom: 700px; + } +} + +@keyframes high { + from { + bottom: 0px; + } + to { + bottom: 700px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/john-ben/style.css.map b/01-HTML-CSS/06-animations/HW/john-ben/style.css.map new file mode 100644 index 000000000..af5c6f166 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/john-ben/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,kHAAA;ACCJ;;ADKA;EACE,YAAA;EACA,aAAA;EACA,aAAA;EACA,qBAAA;EACA,6BAAA;ACFF;ADKE;EACI,kBAAA;EACA,aAAA;EACA,OAAA;EACA,mBAAA;EACA,kBAAA;EACA,sEAAA;EACA,YAAA;ACHN;ADKI;EACI,kBAAA;EACA,aAAA;EACA,QAAA;ACHR;ADKM;EACI,kBAAA;EACA,aAAA;EACA,QAAA;EACA,SAAA;ACHV;ADMQ;EACI,kBAAA;EACA,aAAA;EACA,QAAA;EACA,UAAA;ACJZ;ADQU;EACE,YAAA;EACA,aAAA;EACA,kBAAA;EACA,4BAAA;UAAA,oBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,iCAAA;UAAA,yBAAA;EACA,2CAAA;UAAA,mCAAA;ACNZ;ADQc;EACE,YAAA;EACA,WAAA;EACA,mBAAA;ACNhB;ADYE;EACE,yCAAA;UAAA,iCAAA;ACVJ;ADaE;EACE,uCAAA;UAAA,+BAAA;ACXJ;ADcE;EACE,0CAAA;UAAA,kCAAA;ACZJ;;ADiBA;EAEI;IACE,WAAA;ECfJ;EDiBE;IACE,aAAA;ECfJ;AACF;;ADQA;EAEI;IACE,WAAA;ECfJ;EDiBE;IACE,aAAA;ECfJ;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/john-ben/style.scss b/01-HTML-CSS/06-animations/HW/john-ben/style.scss new file mode 100644 index 000000000..614cd3ae1 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/john-ben/style.scss @@ -0,0 +1,86 @@ +body{ + margin: 0%; + background-image: url("https://t4.ftcdn.net/jpg/04/86/09/87/360_F_486098711_h1IIw3sF5CYunPrBa45ugVZRxwoGop3C.jpg"); + +} + + + +.wrapper{ + width: 100vw; + height: 100vh; + display: flex; + align-items: flex-end; + justify-content: space-around; + + + &__titre { + position: absolute; + display: flex; + top: 3%; + font-size: xx-large; + font-style:italic ; + font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + color: white; + } + &__france{ + position: absolute; + display: flex; + top: 20%; + } + &__brazil{ + position: absolute; + display: flex; + top: 20%; + left: 10%; + } + + &__argentina{ + position: absolute; + display: flex; + top: 20%; + right: 10%; + } + + + &__ballon { + width: 200px; + height: 200px; + position:relative; + animation-name: high; + animation-duration: 5s; + animation-fill-mode: both; + animation-iteration-count: infinite; + + img{ + height: 100%; + width: 100%; + border-radius: 100%; + } + } + + + + #ball1{ + animation-timing-function: linear; + } + + #ball2{ + animation-timing-function: ease; + } + + #ball3{ + animation-timing-function: ease-in; + } + +} + +@keyframes high { + + from { + bottom: 0px; + } + to{ + bottom: 700px; + } +} diff --git a/01-HTML-CSS/06-animations/HW/karin-levi/dist/style.css b/01-HTML-CSS/06-animations/HW/karin-levi/dist/style.css new file mode 100644 index 000000000..65037244d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/karin-levi/dist/style.css @@ -0,0 +1,65 @@ +body { + margin: 0%; +} + +.wrapper { + width: 100vw; + height: 100vh; + background-color: azure; + display: flex; + justify-content: space-between; + align-items: flex-end; +} +.wrapper__balloon { + width: 100px; + height: 200px; + border-radius: 80%; + position: relative; + animation-name: flying; + animation-duration: 3s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; +} +.wrapper__balloon img { + height: 100%; + width: 100%; +} +.wrapper #baloon1 { + animation-timing-function: linear; +} +.wrapper #baloon2 { + animation-timing-function: ease; +} +.wrapper #baloon3 { + animation-timing-function: ease-in; +} +.wrapper #baloon4 { + animation-timing-function: ease-out; +} +.wrapper #baloon5 { + animation-timing-function: ease-in-out; +} +.wrapper #baloon6 { + animation-timing-function: ease-in; +} +.wrapper #baloon7 { + animation-timing-function: linear; +} +.wrapper #baloon8 { + animation-timing-function: ease-in-out; +} +.wrapper #baloon9 { + animation-timing-function: ease; +} +.wrapper #baloon10 { + animation-timing-function: ease-in-out; +} + +@keyframes flying { + from { + bottom: 0px; + } + to { + bottom: 800px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/karin-levi/index.html b/01-HTML-CSS/06-animations/HW/karin-levi/index.html new file mode 100644 index 000000000..6fa272732 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/karin-levi/index.html @@ -0,0 +1,45 @@ + + + + + + + Balloons animation + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/karin-levi/style.css b/01-HTML-CSS/06-animations/HW/karin-levi/style.css new file mode 100644 index 000000000..cee0dc861 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/karin-levi/style.css @@ -0,0 +1,88 @@ +body { + margin: 0%; +} + +.wrapper { + width: 100vw; + height: 100vh; + background-color: azure; + display: flex; + justify-content: space-between; + align-items: flex-end; +} +.wrapper__balloon { + width: 100px; + height: 200px; + border-radius: 80%; + position: relative; + -webkit-animation-name: flying; + animation-name: flying; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.wrapper__balloon img { + height: 100%; + width: 100%; +} +.wrapper #baloon1 { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} +.wrapper #baloon2 { + -webkit-animation-timing-function: ease; + animation-timing-function: ease; +} +.wrapper #baloon3 { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +.wrapper #baloon4 { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} +.wrapper #baloon5 { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.wrapper #baloon6 { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} +.wrapper #baloon7 { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} +.wrapper #baloon8 { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.wrapper #baloon9 { + -webkit-animation-timing-function: ease; + animation-timing-function: ease; +} +.wrapper #baloon10 { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes flying { + from { + bottom: 0px; + } + to { + bottom: 800px; + } +} + +@keyframes flying { + from { + bottom: 0px; + } + to { + bottom: 800px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/karin-levi/style.css.map b/01-HTML-CSS/06-animations/HW/karin-levi/style.css.map new file mode 100644 index 000000000..2d1893d7e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/karin-levi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ;;ADGA;EACE,YAAA;EACA,aAAA;EACA,uBAAA;EACA,aAAA;EACA,8BAAA;EACA,qBAAA;ACAF;ADEI;EACE,YAAA;EACA,aAAA;EAEA,kBAAA;EACA,kBAAA;EAEA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;ACFN;ADIM;EACE,YAAA;EACA,WAAA;ACFR;ADOE;EACE,yCAAA;UAAA,iCAAA;ACLJ;ADQE;EACE,uCAAA;UAAA,+BAAA;ACNJ;ADSE;EACE,0CAAA;UAAA,kCAAA;ACPJ;ADSE;EACE,2CAAA;UAAA,mCAAA;ACPJ;ADSE;EACE,8CAAA;UAAA,sCAAA;ACPJ;ADSE;EACE,0CAAA;UAAA,kCAAA;ACPJ;ADSE;EACE,yCAAA;UAAA,iCAAA;ACPJ;ADSE;EACE,8CAAA;UAAA,sCAAA;ACPJ;ADSE;EACE,uCAAA;UAAA,+BAAA;ACPJ;ADSE;EACE,8CAAA;UAAA,sCAAA;ACPJ;;ADaA;EAEI;IACE,WAAA;ECXJ;EDaE;IACE,aAAA;ECXJ;AACF;;ADIA;EAEI;IACE,WAAA;ECXJ;EDaE;IACE,aAAA;ECXJ;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/karin-levi/style.scss b/01-HTML-CSS/06-animations/HW/karin-levi/style.scss new file mode 100644 index 000000000..6640f6f7b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/karin-levi/style.scss @@ -0,0 +1,77 @@ +body{ + margin: 0%; +} + + +.wrapper{ + width: 100vw; + height: 100vh; + background-color: azure; + display: flex; + justify-content:space-between; + align-items: flex-end; + + &__balloon { + width:100px; + height: 200px; + // background:rgb(204, 12, 12); + border-radius:80%; + position:relative; + + animation-name: flying; + animation-duration: 3s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + + img{ + height: 100%; + width: 100%; + } + } + + + #baloon1{ + animation-timing-function: linear; + } + + #baloon2{ + animation-timing-function: ease; + } + + #baloon3{ + animation-timing-function: ease-in; + } + #baloon4{ + animation-timing-function: ease-out; + } + #baloon5{ + animation-timing-function: ease-in-out; + } + #baloon6{ + animation-timing-function: ease-in; + } + #baloon7{ + animation-timing-function: linear; + } + #baloon8{ + animation-timing-function: ease-in-out; + } + #baloon9{ + animation-timing-function: ease; + } + #baloon10{ + animation-timing-function: ease-in-out; + } + +} + + +@keyframes flying { + + from { + bottom: 0px; + } + to{ + bottom: 800px; + } +} diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/dist/style.css b/01-HTML-CSS/06-animations/HW/noa-meillet/dist/style.css new file mode 100644 index 000000000..5538d615f --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/noa-meillet/dist/style.css @@ -0,0 +1,226 @@ +.pacman { + position: relative; + width: 100%; + height: 100%; + width: fit-content; +} +.pacman__board { + width: 100%; +} +.pacman__board img { + height: 100%; +} +.pacman__ghost { + display: flex; + flex-direction: row; +} +.pacman__ghost__orange { + position: absolute; + top: 7%; + left: 6%; + animation-name: orange-movement; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} +.pacman__ghost__orange img { + width: 23%; +} +.pacman__ghost__red { + position: absolute; + top: 7%; + left: 23%; + animation-name: red-movement; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode: forwards; + animation-delay: 1s; +} +.pacman__ghost__red img { + width: 23%; +} +.pacman__ghost__pink { + position: absolute; + top: 7%; + left: 43%; + animation-name: pink-movement; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode: forwards; + animation-delay: 3s; +} +.pacman__ghost__pink img { + width: 23%; +} + +@keyframes orange-movement { + 0% { + top: 7%; + left: 6%; + width: 23%; + } + 10% { + top: 27%; + left: 6%; + width: 23%; + } + 20% { + top: 27%; + left: 22%; + width: 23%; + } + 30% { + top: 64%; + left: 22%; + width: 23%; + } + 40% { + top: 64%; + left: 6%; + width: 23%; + } + 50% { + top: 73%; + left: 6%; + width: 23%; + } + 60% { + top: 73%; + left: 12%; + width: 23%; + } + 70% { + top: 82.5%; + left: 12%; + width: 23%; + } + 80% { + top: 82.5%; + left: 6%; + width: 23%; + } + 90% { + top: 90%; + left: 6%; + width: 23%; + } + 100% { + top: 90%; + left: 90%; + width: 23%; + } +} +@keyframes red-movement { + 0% { + top: 7%; + left: 23%; + width: 23%; + } + 10% { + top: 18%; + left: 23%; + width: 23%; + } + 20% { + top: 18%; + left: 63%; + width: 23%; + } + 30% { + top: 28%; + left: 63%; + width: 23%; + } + 40% { + top: 28%; + left: 53%; + width: 23%; + } + 50% { + top: 36.5%; + left: 53%; + width: 23%; + } + 60% { + top: 36.5%; + left: 63%; + width: 23%; + } + 70% { + top: 45%; + left: 63%; + width: 23%; + } + 80% { + top: 45%; + left: 74%; + width: 23%; + } + 90% { + top: 82.5%; + left: 74%; + width: 23%; + } + 100% { + top: 82.5%; + left: 90%; + width: 23%; + } +} +@keyframes pink-movement { + 0% { + top: 7%; + left: 43%; + width: 23%; + } + 10% { + top: 18%; + left: 43%; + width: 23%; + } + 20% { + top: 18%; + left: 90%; + width: 23%; + } + 30% { + top: 27%; + left: 90%; + width: 23%; + } + 40% { + top: 27%; + left: 74%; + width: 23%; + } + 50% { + top: 64%; + left: 74%; + width: 23%; + } + 60% { + top: 64%; + left: 53%; + width: 23%; + } + 70% { + top: 72%; + left: 53%; + width: 23%; + } + 80% { + top: 72%; + left: 74%; + width: 23%; + } + 90% { + top: 64%; + left: 73%; + width: 23%; + } + 100% { + top: 64%; + left: 90%; + width: 23%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/index.html b/01-HTML-CSS/06-animations/HW/noa-meillet/index.html new file mode 100644 index 000000000..e1d7ca5b5 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/noa-meillet/index.html @@ -0,0 +1,28 @@ + + + + + + + Pacman + + + +
+
+ pacman-board +
+
+
+ orange-ghost +
+
+ red-ghost +
+
+ pink-ghost +
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-background.jpg b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-background.jpg new file mode 100644 index 000000000..a1a4adeec Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-background.jpg differ diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-orange.png b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-orange.png new file mode 100644 index 000000000..deaf05246 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-orange.png differ diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-pink.png b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-pink.png new file mode 100644 index 000000000..39c30e5d1 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-pink.png differ diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-red.png b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-red.png new file mode 100644 index 000000000..d6db07c84 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/noa-meillet/pacman-ghost-red.png differ diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/style.css b/01-HTML-CSS/06-animations/HW/noa-meillet/style.css new file mode 100644 index 000000000..02202839e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/noa-meillet/style.css @@ -0,0 +1,414 @@ +.pacman { + position: relative; + width: 100%; + height: 100%; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} +.pacman__board { + width: 100%; +} +.pacman__board img { + height: 100%; +} +.pacman__ghost { + display: flex; + flex-direction: row; +} +.pacman__ghost__orange { + position: absolute; + top: 7%; + left: 6%; + -webkit-animation-name: orange-movement; + animation-name: orange-movement; + -webkit-animation-duration: 15s; + animation-duration: 15s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.pacman__ghost__orange img { + width: 23%; +} +.pacman__ghost__red { + position: absolute; + top: 7%; + left: 23%; + -webkit-animation-name: red-movement; + animation-name: red-movement; + -webkit-animation-duration: 15s; + animation-duration: 15s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.pacman__ghost__red img { + width: 23%; +} +.pacman__ghost__pink { + position: absolute; + top: 7%; + left: 43%; + -webkit-animation-name: pink-movement; + animation-name: pink-movement; + -webkit-animation-duration: 15s; + animation-duration: 15s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 3s; + animation-delay: 3s; +} +.pacman__ghost__pink img { + width: 23%; +} + +@-webkit-keyframes orange-movement { + 0% { + top: 7%; + left: 6%; + width: 23%; + } + 10% { + top: 27%; + left: 6%; + width: 23%; + } + 20% { + top: 27%; + left: 22%; + width: 23%; + } + 30% { + top: 64%; + left: 22%; + width: 23%; + } + 40% { + top: 64%; + left: 6%; + width: 23%; + } + 50% { + top: 73%; + left: 6%; + width: 23%; + } + 60% { + top: 73%; + left: 12%; + width: 23%; + } + 70% { + top: 82.5%; + left: 12%; + width: 23%; + } + 80% { + top: 82.5%; + left: 6%; + width: 23%; + } + 90% { + top: 90%; + left: 6%; + width: 23%; + } + 100% { + top: 90%; + left: 90%; + width: 23%; + } +} + +@keyframes orange-movement { + 0% { + top: 7%; + left: 6%; + width: 23%; + } + 10% { + top: 27%; + left: 6%; + width: 23%; + } + 20% { + top: 27%; + left: 22%; + width: 23%; + } + 30% { + top: 64%; + left: 22%; + width: 23%; + } + 40% { + top: 64%; + left: 6%; + width: 23%; + } + 50% { + top: 73%; + left: 6%; + width: 23%; + } + 60% { + top: 73%; + left: 12%; + width: 23%; + } + 70% { + top: 82.5%; + left: 12%; + width: 23%; + } + 80% { + top: 82.5%; + left: 6%; + width: 23%; + } + 90% { + top: 90%; + left: 6%; + width: 23%; + } + 100% { + top: 90%; + left: 90%; + width: 23%; + } +} +@-webkit-keyframes red-movement { + 0% { + top: 7%; + left: 23%; + width: 23%; + } + 10% { + top: 18%; + left: 23%; + width: 23%; + } + 20% { + top: 18%; + left: 63%; + width: 23%; + } + 30% { + top: 28%; + left: 63%; + width: 23%; + } + 40% { + top: 28%; + left: 53%; + width: 23%; + } + 50% { + top: 36.5%; + left: 53%; + width: 23%; + } + 60% { + top: 36.5%; + left: 63%; + width: 23%; + } + 70% { + top: 45%; + left: 63%; + width: 23%; + } + 80% { + top: 45%; + left: 74%; + width: 23%; + } + 90% { + top: 82.5%; + left: 74%; + width: 23%; + } + 100% { + top: 82.5%; + left: 90%; + width: 23%; + } +} +@keyframes red-movement { + 0% { + top: 7%; + left: 23%; + width: 23%; + } + 10% { + top: 18%; + left: 23%; + width: 23%; + } + 20% { + top: 18%; + left: 63%; + width: 23%; + } + 30% { + top: 28%; + left: 63%; + width: 23%; + } + 40% { + top: 28%; + left: 53%; + width: 23%; + } + 50% { + top: 36.5%; + left: 53%; + width: 23%; + } + 60% { + top: 36.5%; + left: 63%; + width: 23%; + } + 70% { + top: 45%; + left: 63%; + width: 23%; + } + 80% { + top: 45%; + left: 74%; + width: 23%; + } + 90% { + top: 82.5%; + left: 74%; + width: 23%; + } + 100% { + top: 82.5%; + left: 90%; + width: 23%; + } +} +@-webkit-keyframes pink-movement { + 0% { + top: 7%; + left: 43%; + width: 23%; + } + 10% { + top: 18%; + left: 43%; + width: 23%; + } + 20% { + top: 18%; + left: 90%; + width: 23%; + } + 30% { + top: 27%; + left: 90%; + width: 23%; + } + 40% { + top: 27%; + left: 74%; + width: 23%; + } + 50% { + top: 64%; + left: 74%; + width: 23%; + } + 60% { + top: 64%; + left: 53%; + width: 23%; + } + 70% { + top: 72%; + left: 53%; + width: 23%; + } + 80% { + top: 72%; + left: 74%; + width: 23%; + } + 90% { + top: 64%; + left: 73%; + width: 23%; + } + 100% { + top: 64%; + left: 90%; + width: 23%; + } +} +@keyframes pink-movement { + 0% { + top: 7%; + left: 43%; + width: 23%; + } + 10% { + top: 18%; + left: 43%; + width: 23%; + } + 20% { + top: 18%; + left: 90%; + width: 23%; + } + 30% { + top: 27%; + left: 90%; + width: 23%; + } + 40% { + top: 27%; + left: 74%; + width: 23%; + } + 50% { + top: 64%; + left: 74%; + width: 23%; + } + 60% { + top: 64%; + left: 53%; + width: 23%; + } + 70% { + top: 72%; + left: 53%; + width: 23%; + } + 80% { + top: 72%; + left: 74%; + width: 23%; + } + 90% { + top: 64%; + left: 73%; + width: 23%; + } + 100% { + top: 64%; + left: 90%; + width: 23%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/style.css.map b/01-HTML-CSS/06-animations/HW/noa-meillet/style.css.map new file mode 100644 index 000000000..855f8bbbe --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,0BAAA;EAAA,uBAAA;EAAA,kBAAA;ACCJ;ADCI;EACI,WAAA;ACCR;ADEQ;EACI,YAAA;ACAZ;ADII;EACI,aAAA;EACA,mBAAA;ACFR;ADIQ;EACI,kBAAA;EACA,OAAA;EACA,QAAA;EACA,uCAAA;UAAA,+BAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oCAAA;UAAA,4BAAA;EACA,qCAAA;UAAA,6BAAA;ACFZ;ADIY;EACI,UAAA;ACFhB;ADMQ;EACI,kBAAA;EACA,OAAA;EACA,SAAA;EACA,oCAAA;UAAA,4BAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oCAAA;UAAA,4BAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2BAAA;UAAA,mBAAA;ACJZ;ADMY;EACI,UAAA;ACJhB;ADQQ;EACI,kBAAA;EACA,OAAA;EACA,SAAA;EACA,qCAAA;UAAA,6BAAA;EACA,+BAAA;UAAA,uBAAA;EACA,oCAAA;UAAA,4BAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2BAAA;UAAA,mBAAA;ACNZ;ADQY;EACI,UAAA;ACNhB;;ADaA;EAEI;IACI,OAAA;IACA,QAAA;IACA,UAAA;ECXN;EDcE;IACI,QAAA;IACA,QAAA;IACA,UAAA;ECZN;EDeE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECbN;EDgBE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECdN;EDiBE;IACI,QAAA;IACA,QAAA;IACA,UAAA;ECfN;EDkBE;IACI,QAAA;IACA,QAAA;IACA,UAAA;EChBN;EDmBE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECjBN;EDoBE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EClBN;EDqBE;IACI,UAAA;IACA,QAAA;IACA,UAAA;ECnBN;EDsBE;IACI,QAAA;IACA,QAAA;IACA,UAAA;ECpBN;EDuBE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECrBN;AACF;;AD7CA;EAEI;IACI,OAAA;IACA,QAAA;IACA,UAAA;ECXN;EDcE;IACI,QAAA;IACA,QAAA;IACA,UAAA;ECZN;EDeE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECbN;EDgBE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECdN;EDiBE;IACI,QAAA;IACA,QAAA;IACA,UAAA;ECfN;EDkBE;IACI,QAAA;IACA,QAAA;IACA,UAAA;EChBN;EDmBE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECjBN;EDoBE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EClBN;EDqBE;IACI,UAAA;IACA,QAAA;IACA,UAAA;ECnBN;EDsBE;IACI,QAAA;IACA,QAAA;IACA,UAAA;ECpBN;EDuBE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECrBN;AACF;ADwBA;EAEI;IACI,OAAA;IACA,SAAA;IACA,UAAA;ECvBN;ED0BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECxBN;ED2BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECzBN;ED4BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC1BN;ED6BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC3BN;ED8BE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EC5BN;ED+BE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EC7BN;EDgCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC9BN;EDiCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC/BN;EDkCE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EChCN;EDmCE;IACI,UAAA;IACA,SAAA;IACA,UAAA;ECjCN;AACF;ADjCA;EAEI;IACI,OAAA;IACA,SAAA;IACA,UAAA;ECvBN;ED0BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECxBN;ED2BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECzBN;ED4BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC1BN;ED6BE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC3BN;ED8BE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EC5BN;ED+BE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EC7BN;EDgCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC9BN;EDiCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC/BN;EDkCE;IACI,UAAA;IACA,SAAA;IACA,UAAA;EChCN;EDmCE;IACI,UAAA;IACA,SAAA;IACA,UAAA;ECjCN;AACF;ADoCA;EAEI;IACI,OAAA;IACA,SAAA;IACA,UAAA;ECnCN;EDsCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECpCN;EDuCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECrCN;EDwCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECtCN;EDyCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECvCN;ED0CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECxCN;ED2CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECzCN;ED4CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC1CN;ED6CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC3CN;ED8CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC5CN;ED+CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC7CN;AACF;ADrBA;EAEI;IACI,OAAA;IACA,SAAA;IACA,UAAA;ECnCN;EDsCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECpCN;EDuCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECrCN;EDwCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECtCN;EDyCE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECvCN;ED0CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECxCN;ED2CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;ECzCN;ED4CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC1CN;ED6CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC3CN;ED8CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC5CN;ED+CE;IACI,QAAA;IACA,SAAA;IACA,UAAA;EC7CN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/noa-meillet/style.scss b/01-HTML-CSS/06-animations/HW/noa-meillet/style.scss new file mode 100644 index 000000000..aac5159a7 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/noa-meillet/style.scss @@ -0,0 +1,272 @@ +.pacman{ + position: relative; + width: 100%; + height: 100%; + width: fit-content; + + &__board{ + width:100%; + + + img{ + height: 100%; + } + } + + &__ghost{ + display: flex; + flex-direction: row; + + &__orange{ + position: absolute; + top: 7%; + left: 6%; + animation-name: orange-movement; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode:forwards; + + img{ + width:23%; + } + } + + &__red{ + position: absolute; + top: 7%; + left: 23%; + animation-name: red-movement; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode:forwards; + animation-delay: 1s; + + img{ + width:23%; + } + } + + &__pink{ + position: absolute; + top: 7%; + left: 43%; + animation-name: pink-movement; + animation-duration: 15s; + animation-iteration-count: 1; + animation-fill-mode:forwards; + animation-delay: 3s; + + img{ + width:23%; + } + } + } + +} + +@keyframes orange-movement{ + + 0%{ + top: 7%; + left: 6%; + width: 23%; + } + + 10%{ + top: 27%; + left: 6%; + width: 23%; + } + + 20%{ + top: 27%; + left: 22%; + width: 23%; + } + + 30%{ + top: 64%; + left: 22%; + width: 23%; + } + + 40%{ + top: 64%; + left: 6%; + width: 23%; + } + + 50%{ + top: 73%; + left: 6%; + width: 23%; + } + + 60%{ + top: 73%; + left: 12%; + width: 23%; + } + + 70%{ + top: 82.5%; + left: 12%; + width: 23%; + } + + 80%{ + top: 82.5%; + left: 6%; + width: 23%; + } + + 90%{ + top: 90%; + left: 6%; + width: 23%; + } + + 100%{ + top: 90%; + left: 90%; + width: 23%; + } +} + +@keyframes red-movement{ + + 0%{ + top: 7%; + left: 23%; + width: 23%; + } + + 10%{ + top: 18%; + left: 23%; + width: 23%; + } + + 20%{ + top: 18%; + left: 63%; + width: 23%; + } + + 30%{ + top: 28%; + left: 63%; + width: 23%; + } + + 40%{ + top: 28%; + left: 53%; + width: 23%; + } + + 50%{ + top: 36.5%; + left: 53%; + width: 23%; + } + + 60%{ + top: 36.5%; + left: 63%; + width: 23%; + } + + 70%{ + top: 45%; + left: 63%; + width: 23%; + } + + 80%{ + top: 45%; + left: 74%; + width: 23%; + } + + 90%{ + top: 82.5%; + left: 74%; + width: 23%; + } + + 100%{ + top: 82.5%; + left: 90%; + width: 23%; + } +} + +@keyframes pink-movement{ + + 0%{ + top: 7%; + left: 43%; + width: 23%; + } + + 10%{ + top: 18%; + left: 43%; + width: 23%; + } + + 20%{ + top: 18%; + left: 90%; + width: 23%; + } + + 30%{ + top: 27%; + left: 90%; + width: 23%; + } + + 40%{ + top: 27%; + left: 74%; + width: 23%; + } + + 50%{ + top: 64%; + left: 74%; + width: 23%; + } + + 60%{ + top: 64%; + left: 53%; + width: 23%; + } + + 70%{ + top: 72%; + left: 53%; + width: 23%; + } + + 80%{ + top: 72%; + left: 74%; + width: 23%; + } + + 90%{ + top: 64%; + left: 73%; + width: 23%; + } + + 100%{ + top: 64%; + left: 90%; + width: 23%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/shlomi.samai/download-removebg-preview.png b/01-HTML-CSS/06-animations/HW/shlomi.samai/download-removebg-preview.png new file mode 100644 index 000000000..820efe517 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/shlomi.samai/download-removebg-preview.png differ diff --git a/01-HTML-CSS/06-animations/HW/shlomi.samai/index.html b/01-HTML-CSS/06-animations/HW/shlomi.samai/index.html new file mode 100644 index 000000000..e28eeaf86 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/shlomi.samai/index.html @@ -0,0 +1,50 @@ + + + + + + + shlomi + + + + +
+
+
+
C
+
a
+
s
+
i
+
n
+
o
+
B
+
y
+
S
+
h
+
l
+
o
+
m
+
i
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + + diff --git a/01-HTML-CSS/06-animations/HW/shlomi.samai/istockphoto-171383003-612x612-removebg-preview (1).png b/01-HTML-CSS/06-animations/HW/shlomi.samai/istockphoto-171383003-612x612-removebg-preview (1).png new file mode 100644 index 000000000..2f94e3063 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/shlomi.samai/istockphoto-171383003-612x612-removebg-preview (1).png differ diff --git a/01-HTML-CSS/06-animations/HW/shlomi.samai/style.css b/01-HTML-CSS/06-animations/HW/shlomi.samai/style.css new file mode 100644 index 000000000..169ae205d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/shlomi.samai/style.css @@ -0,0 +1,304 @@ +body { + background-color: rgb(0, 112, 0); +} + +.page { + width: 1500px; + margin: auto; +} + +@-webkit-keyframes change_color { + from { + color: red; + } + to { + color: black; + } +} + +@keyframes change_color { + from { + color: red; + } + to { + color: black; + } +} +@-webkit-keyframes rotate_head { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@keyframes rotate_head { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@-webkit-keyframes pass_chip { + 0% { + top: 0px; + } + 25% { + top: 105px; + left: 113px; + } +} +@keyframes pass_chip { + 0% { + top: 0px; + } + 25% { + top: 105px; + left: 113px; + } +} +@-webkit-keyframes rotate_card { + from { + transform: rotatey(0deg); + } + to { + transform: rotatey(360deg); + } +} +@keyframes rotate_card { + from { + transform: rotatey(0deg); + } + to { + transform: rotatey(360deg); + } +} +.frame { + border: 10px; + border-color: black; + border-style: dashed; + height: 80px; + width: 500px; + position: relative; + left: 35%; +} + +.headline { + font-size: 60px; + display: flex; + justify-content: center; +} +.headline__letter1 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0; + animation-delay: 0; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter2 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter3 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter4 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter5 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter6 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter7 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.6s; + animation-delay: 0.6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter8 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.7s; + animation-delay: 0.7s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter9 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.8s; + animation-delay: 0.8s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter10 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.9s; + animation-delay: 0.9s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter11 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 1s; + animation-delay: 1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter12 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 1.1s; + animation-delay: 1.1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter13 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 1.2s; + animation-delay: 1.2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.headline__letter14 { + color: red; + -webkit-animation-name: change_color; + animation-name: change_color; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 1.3s; + animation-delay: 1.3s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.wrapper { + display: grid; + grid-template-columns: auto auto; + position: relative; + top: 100px; +} +.wrapper__img { + height: 400px; + width: 400px; + -webkit-animation-name: rotate_head; + animation-name: rotate_head; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 5s; + animation-duration: 5s; + position: relative; + left: 30%; +} +.wrapper__table { + background: url("https://thumbs.dreamstime.com/b/casino-roulette-table-illustration-green-gambling-roulette-table-numbers-90513337.jpg"); + background-size: contain; + background-repeat: no-repeat; +} +.wrapper__table__chips__img { + width: 50px; + height: 50px; + position: relative; + -webkit-animation-name: pass_chip; + animation-name: pass_chip; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + top: 0px; + left: 20px; +} +.wrapper__table__chips__img2 { + width: 50px; + height: 50px; + position: relative; + -webkit-animation-name: pass_chip; + animation-name: pass_chip; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + top: 0px; + left: 20px; +} + +.flip_card { + -webkit-animation-name: rotate_card; + animation-name: rotate_card; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/shlomi.samai/style.css.map b/01-HTML-CSS/06-animations/HW/shlomi.samai/style.css.map new file mode 100644 index 000000000..8d91b15c8 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/shlomi.samai/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/shlomi.samai/style.scss b/01-HTML-CSS/06-animations/HW/shlomi.samai/style.scss new file mode 100644 index 000000000..4cb239adb --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/shlomi.samai/style.scss @@ -0,0 +1,207 @@ + + +body { + background-color: rgba(0, 112,0); + } + + .page { + width: 1500px; + margin: auto; + } + + @keyframes change_color { + from {color: red;} + to {color: black;} + } + @keyframes rotate_head { + from {transform:rotate(0deg);} + to {transform: rotate(360deg);} + } + @keyframes pass_chip { + 0% {top:0px} + 25% {top:105px; + left: 113px; + } + } + @keyframes rotate_card { + from {transform:rotatey(0deg);} + to {transform: rotatey(360deg);} + } + + .frame{ + border: 10px; + border-color: black; + border-style: dashed; + height: 80px; + width: 500px; + position: relative; + left: 35%; + + } + + .headline { + font-size: 60px; + display: flex; + justify-content: center; + + + + &__letter1 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0; + animation-iteration-count: infinite; + } + &__letter2 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.1s; + animation-iteration-count: infinite; + } + &__letter3 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.2s; + animation-iteration-count: infinite; + } + &__letter4 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.3s; + animation-iteration-count: infinite; + } + &__letter5 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.4s; + animation-iteration-count: infinite; + } + &__letter6 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.5s; + animation-iteration-count: infinite; + } + &__letter7 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.6s; + animation-iteration-count: infinite; + } + &__letter8 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.7s; + animation-iteration-count: infinite; + } + &__letter9 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.8s; + animation-iteration-count: infinite; + } + &__letter10 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 0.9s; + animation-iteration-count: infinite; + } + &__letter11{ + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 1s; + animation-iteration-count: infinite; + } + &__letter12 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 1.1s; + animation-iteration-count: infinite; + } + &__letter13 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 1.2s; + animation-iteration-count: infinite; + } + &__letter14 { + color: red; + animation-name:change_color ; + animation-duration: 1s; + animation-delay: 1.3s; + animation-iteration-count: infinite; + } + } + + .wrapper { + display: grid; + grid-template-columns: auto auto; + position: relative; + top:100px ; + + &__img { + height: 400px; + width: 400px; + animation-name:rotate_head; + animation-iteration-count: infinite; + animation-duration: 5s; + position: relative; + left: 30%; + + } + &__table { + background: url("https://thumbs.dreamstime.com/b/casino-roulette-table-illustration-green-gambling-roulette-table-numbers-90513337.jpg"); + background-size:contain; + background-repeat: no-repeat; + + &__chips{ + + + &__img { + width: 50px; + height: 50px; + position: relative; + animation-name: pass_chip; + animation-duration: 20s; + animation-iteration-count: infinite; + top: 0px; + left: 20px; + } + &__img2 { + width: 50px; + height: 50px; + position: relative; + animation-name: pass_chip; + animation-duration: 20s; + animation-iteration-count: infinite; + top: 0px; + left: 20px; + } + + } + } + } + + .flip_card { + animation-name: rotate_card; + animation-duration: 5s; + animation-iteration-count: infinite; + + } + + + + \ No newline at end of file diff --git a/02-position-box-model/Tanya-Holczer/connor.png b/01-HTML-CSS/06-animations/HW/start.md similarity index 100% rename from 02-position-box-model/Tanya-Holczer/connor.png rename to 01-HTML-CSS/06-animations/HW/start.md diff --git a/01-HTML-CSS/06-animations/HW/tal/.gitignore b/01-HTML-CSS/06-animations/HW/tal/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/01-HTML-CSS/06-animations/HW/tal/index.html b/01-HTML-CSS/06-animations/HW/tal/index.html new file mode 100644 index 000000000..e0d1c8408 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/01-HTML-CSS/06-animations/HW/tal/package.json b/01-HTML-CSS/06-animations/HW/tal/package.json new file mode 100644 index 000000000..b301fc4be --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/package.json @@ -0,0 +1,22 @@ +{ + "name": "tal", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^2.2.0", + "typescript": "^4.6.4", + "vite": "^3.2.3" + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tal/public/vite.svg b/01-HTML-CSS/06-animations/HW/tal/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tal/src/App.css b/01-HTML-CSS/06-animations/HW/tal/src/App.css new file mode 100644 index 000000000..2c5e2ef5c --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/src/App.css @@ -0,0 +1,41 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/01-HTML-CSS/06-animations/HW/tal/src/App.tsx b/01-HTML-CSS/06-animations/HW/tal/src/App.tsx new file mode 100644 index 000000000..cd201360b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/src/App.tsx @@ -0,0 +1,34 @@ +import { useState } from 'react' +import reactLogo from './assets/react.svg' +import './App.css' + +function App() { + const [count, setCount] = useState(0) + + return ( +
+ +

Vite + React

+
+ +

+ Edit src/App.tsx and save to test HMR +

+
+

+ Click on the Vite and React logos to learn more +

+
+ ) +} + +export default App diff --git a/01-HTML-CSS/06-animations/HW/tal/src/assets/react.svg b/01-HTML-CSS/06-animations/HW/tal/src/assets/react.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tal/src/index.css b/01-HTML-CSS/06-animations/HW/tal/src/index.css new file mode 100644 index 000000000..917888c1d --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/src/index.css @@ -0,0 +1,70 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/01-HTML-CSS/06-animations/HW/tal/src/main.tsx b/01-HTML-CSS/06-animations/HW/tal/src/main.tsx new file mode 100644 index 000000000..611e848f1 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + + +) diff --git a/01-HTML-CSS/06-animations/HW/tal/src/vite-env.d.ts b/01-HTML-CSS/06-animations/HW/tal/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/01-HTML-CSS/06-animations/HW/tal/tsconfig.json b/01-HTML-CSS/06-animations/HW/tal/tsconfig.json new file mode 100644 index 000000000..3d0a51a86 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/01-HTML-CSS/06-animations/HW/tal/tsconfig.node.json b/01-HTML-CSS/06-animations/HW/tal/tsconfig.node.json new file mode 100644 index 000000000..9d31e2aed --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/01-HTML-CSS/06-animations/HW/tal/vite.config.ts b/01-HTML-CSS/06-animations/HW/tal/vite.config.ts new file mode 100644 index 000000000..b1b5f91e5 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tal/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()] +}) diff --git a/01-HTML-CSS/06-animations/HW/tomer-cohen/WhatsApp Image 2022-11-29 at 14.35.22.jpeg b/01-HTML-CSS/06-animations/HW/tomer-cohen/WhatsApp Image 2022-11-29 at 14.35.22.jpeg new file mode 100644 index 000000000..bd10ccd51 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/tomer-cohen/WhatsApp Image 2022-11-29 at 14.35.22.jpeg differ diff --git a/01-HTML-CSS/06-animations/HW/tomer-cohen/dist/style.css b/01-HTML-CSS/06-animations/HW/tomer-cohen/dist/style.css new file mode 100644 index 000000000..b9a790be6 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-cohen/dist/style.css @@ -0,0 +1,130 @@ +body { + margin: 0; +} + +.bar { + background-color: blue; + width: 100%; + height: 50px; + display: flex; + justify-content: space-around; + font-weight: bold; +} +.bar__subtext { + color: white; + margin-top: 10px; +} + +.page__tomer { + transform: rotate(270deg); + width: 300px; + height: 500px; + position: absolute; + margin-top: 1750px; +} +.page__tomer img { + width: 2100px; + height: 100%; +} +.page__life { + margin-left: 25%; + margin-top: 70px; + background-image: url(https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 800px; + height: 200px; +} +.page__life p { + width: 100%; + color: red; +} +.page__life h1 { + color: red; +} +.page__hobbis { + margin-left: 25%; + margin-top: 200px; + width: 800px; + height: 600px; + background-image: url(https://wallpaperaccess.com/full/2019794.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; +} +.page__hobbis p { + font-size: 20px; +} +.page__hobbis__video { + width: 210px; + height: 500px; + position: absolute; + bottom: 10px; +} +.page__history { + margin-left: 25%; + margin-top: 200px; + width: 800px; + height: 600px; + background-image: url(https://cdn.britannica.com/53/1753-004-03582EDA/Flag-Israel.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; +} +.page__history p { + color: red; +} +.page__history h1 { + color: red; +} +.page__heart { + background-color: red; + display: inline-block; + height: 90px; + position: relative; + top: 0; + transform: rotate(-45deg); + width: 90px; + margin-left: 40%; + margin-top: 40px; + transform: rotate(-45deg) scale(1); + animation: heart 2s linear infinite; +} +.page__heart::before, .page__heart::after { + content: ""; + background-color: red; + border-radius: 50%; + height: 90px; + position: absolute; + width: 90px; +} +.page__heart::before { + top: -45px; + left: 0; +} +.page__heart::after { + left: 45px; + top: 0; +} +.page__ty { + margin-left: 30%; + margin-top: 10px; +} + +@keyframes heart { + 0% { + transform: rotate(-45deg) scale(1); + opacity: 0; + } + 50% { + transform: rotate(-45deg) scale(1.3); + opacity: 1; + } + 100% { + transform: rotate(-45deg) scale(1); + opacity: 1; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tomer-cohen/index.html b/01-HTML-CSS/06-animations/HW/tomer-cohen/index.html new file mode 100644 index 000000000..1f130fbbb --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-cohen/index.html @@ -0,0 +1,44 @@ + + + + + + + page about me + + + + + + +
+
+
+ life + hobbis + history + future +
+
+

life

+

As of today, I work for iDigital, which is the only Israeli company that works in collaboration with Apple.

+

In addition to that I am in a full stack course in which I am learning how to program something that I always wanted to know, currently I am really enjoying developing my head a little in all kinds of fields

+
+
+

hobbis

+

One of my several hobbies is cable skiing. I have been doing this hobby for 10 years as of today. At the beginning of the hobby I would go to the Kinneret every time but over the years I found a place in Tel Aviv where you can do the same hobby and in addition with several jump ramps as you can see my video from it Lake

+
+
+

history

+

A little history of me and my family, my grandparents immigrated from Libya and Iraq and in 1948 to Israel after several years they got married

+
+

Thank you very much for viewing my page

+
+
+ + diff --git a/01-HTML-CSS/06-animations/HW/tomer-cohen/my jump in the lake.mp4 b/01-HTML-CSS/06-animations/HW/tomer-cohen/my jump in the lake.mp4 new file mode 100644 index 000000000..316418766 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/tomer-cohen/my jump in the lake.mp4 differ diff --git a/01-HTML-CSS/06-animations/HW/tomer-cohen/style.scss b/01-HTML-CSS/06-animations/HW/tomer-cohen/style.scss new file mode 100644 index 000000000..82858039f --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-cohen/style.scss @@ -0,0 +1,123 @@ +body { + margin: 0; +} +.bar { + background-color: blue; + width: 100%; + height: 50px; + display: flex; + justify-content: space-around; + font-weight: bold; + + &__subtext { + color: white; + margin-top: 10px; + } +} +.page { + } + &__life { + margin-left: 25%; + margin-top: 70px; + background-image: url(https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 800px; + height: 200px; + p { + width: 100%; + color: red; + } + h1 { + color: red; + } + } + &__hobbis { + margin-left: 25%; + margin-top: 200px; + width: 800px; + height: 600px; + background-image: url(https://wallpaperaccess.com/full/2019794.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + p { + font-size: 20px; + } + &__video { + width: 210px; + height: 500px; + position: absolute; + bottom: 10px; + } + } + &__history { + margin-left: 25%; + margin-top: 200px; + width: 800px; + height: 600px; + background-image: url(https://cdn.britannica.com/53/1753-004-03582EDA/Flag-Israel.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + p { + color: red; + } + h1 { + color: red; + } + } + &__heart { + background-color: red; + display: inline-block; + height: 90px; + position: relative; + top: 0; + transform: rotate(-45deg); + width: 90px; + margin-left: 40%; + margin-top: 40px; + transform: rotate(-45deg) scale(1); + animation: heart 2s linear infinite; + &::before, + &::after { + content: ""; + background-color: red; + border-radius: 50%; + height: 90px; + position: absolute; + width: 90px; + } + &::before { + top: -45px; + left: 0; + } + &::after { + left: 45px; + top: 0; + } + } + &__ty { + margin-left: 30%; + margin-top: 10px; + } + +@keyframes heart { + 0% { + transform: rotate(-45deg) scale(1); + opacity: 0; + } + + 50% { + transform: rotate(-45deg) scale(1.3); + opacity: 1; + } + + 100% { + transform: rotate(-45deg) scale(1); + opacity: 1; + } +} diff --git "a/01-HTML-CSS/06-animations/HW/tomer-cohen/\327\244\327\250\327\225\327\231\327\231\327\247\327\230-\327\221\327\220\327\240\327\250.png" "b/01-HTML-CSS/06-animations/HW/tomer-cohen/\327\244\327\250\327\225\327\231\327\231\327\247\327\230-\327\221\327\220\327\240\327\250.png" new file mode 100644 index 000000000..4adc50aea Binary files /dev/null and "b/01-HTML-CSS/06-animations/HW/tomer-cohen/\327\244\327\250\327\225\327\231\327\231\327\247\327\230-\327\221\327\220\327\240\327\250.png" differ diff --git a/01-HTML-CSS/06-animations/HW/tomer-pacman/dist/style.css b/01-HTML-CSS/06-animations/HW/tomer-pacman/dist/style.css new file mode 100644 index 000000000..d2ca34b4e --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-pacman/dist/style.css @@ -0,0 +1,153 @@ +body { + background-color: black; +} + +.page { + width: 90vw; + height: 95vh; + display: flex; + justify-content: center; + align-items: center; + margin-right: 0; +} +.page__background { + background-image: url(https://i.pinimg.com/originals/52/a3/3c/52a33c10ae0c117156dd2807a4f324da.png); + width: 80%; + height: 100%; + background-repeat: no-repeat; + background-size: cover; + position: fixed; +} +.page__pacman { + width: 25px; + height: 25px; + border-radius: 50%; + background: yellow; + position: relative; + right: 700px; + top: 425px; + animation-name: movement; + animation-duration: 20s; + animation-iteration-count: infinite; +} +.page__pacman__eye { + position: absolute; + width: 3px; + height: 3px; + border-radius: 50%; + top: 3px; + right: 7px; + background: black; +} +.page__pacman__mouth { + background: #000; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + animation-name: eat; + animation-duration: 0.7s; + animation-iteration-count: infinite; +} +.page__pacman__food { + position: absolute; + width: 15px; + height: 15px; + background: #fff; + border-radius: 50%; + top: 30%; + left: 70px; + animation-name: food; + animation-duration: 0.7s; + animation-iteration-count: infinite; +} + +@keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@keyframes movement { + 0% { + top: 0px; + left: 0px; + } + 5% { + top: -100px; + left: 0px; + } + 10% { + left: 250px; + top: 0px; + } + 15% { + top: 200px; + left: 0px; + } + 20% { + left: 60px; + top: 0px; + } + 25% { + top: 300px; + left: 0px; + } + 30% { + left: -400px; + top: 0px; + } + 35% { + top: -310px; + left: 0px; + } + 40% { + left: -230px; + top: 0px; + } + 45% { + left: -210px; + top: 0px; + } + 50% { + top: -190px; + left: 0px; + } + 60% { + left: -90px; + top: 0px; + } + 70% { + top: -65px; + left: 0px; + } + 80% { + left: -20px; + top: 0px; + } + 100% { + top: 0px; + left: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tomer-pacman/index.html b/01-HTML-CSS/06-animations/HW/tomer-pacman/index.html new file mode 100644 index 000000000..5aa396883 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-pacman/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+
+ + diff --git a/01-HTML-CSS/06-animations/HW/tomer-pacman/style.css b/01-HTML-CSS/06-animations/HW/tomer-pacman/style.css new file mode 100644 index 000000000..fa63f105c --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-pacman/style.css @@ -0,0 +1,263 @@ +body { + background-color: black; +} + +.page { + width: 90vw; + height: 95vh; + display: flex; + justify-content: center; + align-items: center; + margin-right: 0; +} +.page__background { + background-image: url(https://i.pinimg.com/originals/52/a3/3c/52a33c10ae0c117156dd2807a4f324da.png); + width: 80%; + height: 100%; + background-repeat: no-repeat; + background-size: cover; + position: fixed; +} +.page__pacman { + width: 25px; + height: 25px; + border-radius: 50%; + background: yellow; + position: relative; + right: 700px; + top: 425px; + -webkit-animation-name: movement; + animation-name: movement; + -webkit-animation-duration: 20s; + animation-duration: 20s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.page__pacman__eye { + position: absolute; + width: 3px; + height: 3px; + border-radius: 50%; + top: 3px; + right: 7px; + background: black; +} +.page__pacman__mouth { + background: #000; + position: absolute; + width: 100%; + height: 100%; + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + -webkit-animation-name: eat; + animation-name: eat; + -webkit-animation-duration: 0.7s; + animation-duration: 0.7s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.page__pacman__food { + position: absolute; + width: 15px; + height: 15px; + background: #fff; + border-radius: 50%; + top: 30%; + left: 70px; + -webkit-animation-name: food; + animation-name: food; + -webkit-animation-duration: 0.7s; + animation-duration: 0.7s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +@-webkit-keyframes eat { + 0% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + -webkit-clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + -webkit-clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + -webkit-clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} + +@keyframes eat { + 0% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + -webkit-clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + -webkit-clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + -webkit-clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + -webkit-clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@-webkit-keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@-webkit-keyframes movement { + 0% { + top: 0px; + left: 0px; + } + 5% { + top: -100px; + left: 0px; + } + 10% { + left: 250px; + top: 0px; + } + 15% { + top: 200px; + left: 0px; + } + 20% { + left: 60px; + top: 0px; + } + 25% { + top: 300px; + left: 0px; + } + 30% { + left: -400px; + top: 0px; + } + 35% { + top: -310px; + left: 0px; + } + 40% { + left: -230px; + top: 0px; + } + 45% { + left: -210px; + top: 0px; + } + 50% { + top: -190px; + left: 0px; + } + 60% { + left: -90px; + top: 0px; + } + 70% { + top: -65px; + left: 0px; + } + 80% { + left: -20px; + top: 0px; + } + 100% { + top: 0px; + left: 0px; + } +} +@keyframes movement { + 0% { + top: 0px; + left: 0px; + } + 5% { + top: -100px; + left: 0px; + } + 10% { + left: 250px; + top: 0px; + } + 15% { + top: 200px; + left: 0px; + } + 20% { + left: 60px; + top: 0px; + } + 25% { + top: 300px; + left: 0px; + } + 30% { + left: -400px; + top: 0px; + } + 35% { + top: -310px; + left: 0px; + } + 40% { + left: -230px; + top: 0px; + } + 45% { + left: -210px; + top: 0px; + } + 50% { + top: -190px; + left: 0px; + } + 60% { + left: -90px; + top: 0px; + } + 70% { + top: -65px; + left: 0px; + } + 80% { + left: -20px; + top: 0px; + } + 100% { + top: 0px; + left: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tomer-pacman/style.css.map b/01-HTML-CSS/06-animations/HW/tomer-pacman/style.css.map new file mode 100644 index 000000000..614540615 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-pacman/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,uBAAA;ACCF;;ADCA;EACE,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;ACEF;ADAE;EACE,mGAAA;EACA,UAAA;EACA,YAAA;EACA,4BAAA;EACA,sBAAA;EACA,eAAA;ACEJ;ADAE;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,UAAA;EAEA,gCAAA;UAAA,wBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,2CAAA;UAAA,mCAAA;ACCJ;ADCI;EACE,kBAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,iBAAA;ACCN;ADCI;EACE,gBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uDAAA;UAAA,+CAAA;EACA,2BAAA;UAAA,mBAAA;EACA,gCAAA;UAAA,wBAAA;EACA,2CAAA;UAAA,mCAAA;ACCN;ADCI;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,4BAAA;UAAA,oBAAA;EACA,gCAAA;UAAA,wBAAA;EACA,2CAAA;UAAA,mCAAA;ACCN;;ADIA;EACE;IACE,uDAAA;YAAA,+CAAA;ECDF;EDGA;IACE,uDAAA;YAAA,+CAAA;ECDF;EDIA;IACE,uDAAA;YAAA,+CAAA;ECFF;EDKA;IACE,uDAAA;YAAA,+CAAA;ECHF;EDMA;IACE,uDAAA;YAAA,+CAAA;ECJF;AACF;;ADdA;EACE;IACE,uDAAA;YAAA,+CAAA;ECDF;EDGA;IACE,uDAAA;YAAA,+CAAA;ECDF;EDIA;IACE,uDAAA;YAAA,+CAAA;ECFF;EDKA;IACE,uDAAA;YAAA,+CAAA;ECHF;EDMA;IACE,uDAAA;YAAA,+CAAA;ECJF;AACF;ADMA;EACE;IACE,wBAAA;IACA,UAAA;ECJF;EDMA;IACE,4BAAA;IACA,UAAA;ECJF;AACF;ADJA;EACE;IACE,wBAAA;IACA,UAAA;ECJF;EDMA;IACE,4BAAA;IACA,UAAA;ECJF;AACF;ADMA;EACE;IACE,QAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,QAAA;ECJF;EDMA;IACE,UAAA;IACA,SAAA;ECJF;EDMA;IACE,UAAA;IACA,QAAA;ECJF;EDMA;IACE,UAAA;IACA,SAAA;ECJF;EDMA;IACE,YAAA;IACA,QAAA;ECJF;EDMA;IACE,WAAA;IACA,SAAA;ECJF;EDMA;IACE,YAAA;IACA,QAAA;ECJF;EDMA;IACE,YAAA;IACA,QAAA;ECJF;EDMA;IACE,WAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,QAAA;ECJF;EDMA;IACE,UAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,QAAA;ECJF;EDOA;IACE,QAAA;IACA,SAAA;ECLF;AACF;ADxDA;EACE;IACE,QAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,QAAA;ECJF;EDMA;IACE,UAAA;IACA,SAAA;ECJF;EDMA;IACE,UAAA;IACA,QAAA;ECJF;EDMA;IACE,UAAA;IACA,SAAA;ECJF;EDMA;IACE,YAAA;IACA,QAAA;ECJF;EDMA;IACE,WAAA;IACA,SAAA;ECJF;EDMA;IACE,YAAA;IACA,QAAA;ECJF;EDMA;IACE,YAAA;IACA,QAAA;ECJF;EDMA;IACE,WAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,QAAA;ECJF;EDMA;IACE,UAAA;IACA,SAAA;ECJF;EDMA;IACE,WAAA;IACA,QAAA;ECJF;EDOA;IACE,QAAA;IACA,SAAA;ECLF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/tomer-pacman/style.scss b/01-HTML-CSS/06-animations/HW/tomer-pacman/style.scss new file mode 100644 index 000000000..b3bf6b65b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/tomer-pacman/style.scss @@ -0,0 +1,159 @@ +body { + background-color: black; +} +.page { + width: 90vw; + height: 95vh; + display: flex; + justify-content: center; + align-items: center; + margin-right: 0; + + &__background { + background-image: url(https://i.pinimg.com/originals/52/a3/3c/52a33c10ae0c117156dd2807a4f324da.png); + width: 80%; + height: 100%; + background-repeat: no-repeat; + background-size: cover; + position: fixed; + } + &__pacman { + width: 25px; + height: 25px; + border-radius: 50%; + background: yellow; + position: relative; + right: 700px; + top: 425px; + + animation-name: movement; + animation-duration: 20s; + animation-iteration-count: infinite; + + &__eye { + position: absolute; + width: 3px; + height: 3px; + border-radius: 50%; + top: 3px; + right: 7px; + background: black; + } + &__mouth { + background: #000; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + animation-name: eat; + animation-duration: 0.7s; + animation-iteration-count: infinite; + } + &__food { + position: absolute; + width: 15px; + height: 15px; + background: #fff; + border-radius: 50%; + top: 30%; + left: 70px; + animation-name: food; + animation-duration: 0.7s; + animation-iteration-count: infinite; + } + } +} + +@keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +@keyframes food { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-50px); + opacity: 0; + } +} +@keyframes movement { + 0% { + top: 0px; + left: 0px; + } + 5% { + top: -100px; + left: 0px; + } + 10% { + left: 250px; + top: 0px; + } + 15% { + top: 200px; + left: 0px; + } + 20% { + left: 60px; + top: 0px; + } + 25% { + top: 300px; + left: 0px; + } + 30% { + left: -400px; + top: 0px; + } + 35% { + top: -310px; + left: 0px; + } + 40% { + left: -230px; + top: 0px; + } + 45%{ + left: -210px; + top: 0px; + } + 50% { + top: -190px; + left: 0px; + } + 60% { + left: -90px; + top: 0px; + } + 70% { + top: -65px; + left: 0px; + } + 80% { + left: -20px; + top:0px; + } + + 100% { + top: 0px; + left: 0px; + } +} diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/dist/style.css b/01-HTML-CSS/06-animations/HW/uriel bargil/dist/style.css new file mode 100644 index 000000000..8ac652acb --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/uriel bargil/dist/style.css @@ -0,0 +1,336 @@ +body { + overflow-y: hidden; + overflow-x: hidden; + position: relative; + left: 0; +} + +.screen { + background-color: white; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + align-items: center; + height: 100vh; + width: 100vw; +} +.screen .baloon1 { + width: 130px; + height: 130px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAktkON4IsLvraoBsnniQafCsiVWKNb2hZ9g&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon1; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon2 { + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + animation-name: baloon2; + animation-duration: 5s; + animation-iteration-count: infinite; + position: relative; +} +.screen .baloon3 { + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon3; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon4 { + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon4; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon5 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon5; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon6 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTaA4gOU3ZT4utVBZ5BjPpTAf3wUcDeXOf0gw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon6; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon7 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon7; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon8 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon8; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon9 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon9; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.screen .baloon10 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + animation-name: baloon10; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} + +@keyframes baloon1 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon2 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon3 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 200px; + left: 350px; + } + 50% { + top: 100px; + left: 300px; + } + 100% { + top: 50px; + left: 350px; + } +} +@keyframes baloon4 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon5 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon6 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon7 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon8 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon9 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon10 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/index.html b/01-HTML-CSS/06-animations/HW/uriel bargil/index.html new file mode 100644 index 000000000..473e1b685 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/uriel bargil/index.html @@ -0,0 +1,39 @@ + + + + + + + + ballons + + +
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon1.png b/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon1.png new file mode 100644 index 000000000..5bbc0d8b5 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon1.png differ diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon2.png b/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon2.png new file mode 100644 index 000000000..0cfcfa1fc Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon2.png differ diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon3.png b/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon3.png new file mode 100644 index 000000000..74ee47a41 Binary files /dev/null and b/01-HTML-CSS/06-animations/HW/uriel bargil/pics/baloon3.png differ diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/style.css b/01-HTML-CSS/06-animations/HW/uriel bargil/style.css new file mode 100644 index 000000000..017d6285b --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/uriel bargil/style.css @@ -0,0 +1,565 @@ +body { + overflow-y: hidden; + overflow-x: hidden; + position: relative; + left: 0; +} + +.screen { + background-color: white; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + align-items: center; + height: 100vh; + width: 100vw; +} +.screen .baloon1 { + width: 130px; + height: 130px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAktkON4IsLvraoBsnniQafCsiVWKNb2hZ9g&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon1; + animation-name: baloon1; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon2 { + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBISFBQSEREOEBIREREODg4RERESDg4OFxMYGBcTFxccIiwkGx4qHhcXJkQmKi4wMzMzGiI5PjkySiwyMzABCwsLEA4QHRISGzIqISoyNDAyMzAyMjAwMDIwMjIyMjIyMjIyMjI0MjIyMjAyMjIyMjIyMjQyMDIwMjAyMjQyMv/AABEIAVwAkQMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAAAwQCBQYHAQj/xAA/EAACAgEBBAYHBQYFBQAAAAAAAQIDBBEGEiExBQcTQVGBMkJhcYKRoRQiI1LBYnKSorGyJDNzwtElQ0R0g//EABkBAQADAQEAAAAAAAAAAAAAAAACAwUEAf/EADMRAAIBAgMECQMDBQAAAAAAAAABAgMRBCExUcHR8BITIkFhcYGRsRSh4SMzUgUyQkPx/9oADAMBAAIRAxEAPwD2YAAAAAAxb04vglxb7kjQbRbUY+EtJPtLWtY0xf3vfJ+qvr7DzHpranKy21KbhXrwqr1jFe9et56nVQwk6uei28ObeJyV8ZCllq9nF8vwPTek9r8OjVO3tJL1a/vfzcvqcxmdZb4qmiHsc5OWvktDgVU3zM1i6mlDA0o65+f4M2X9QqS0dvL83Olt6xsx8lCPugv11FfWNmLn2cvfBfpoc59j9geJ7Cf01L+KK/q6n8n7s7fD6y3/AN3Hi/bCTj9HqdT0Zthh36Lteyk/Vs+6v4uX1PG5Y2hHuNcuBXPA0paZc+JZDH1Y6u/n+LH6IT14rinxTXJoyPD+hdqcrEaUJOdevGqesov3Lu960PTtnNqsfNWkX2d2msqZNav2xfrL6+wzq+EnSz1W3n/niaVDGQq5aPZwfL8DogAcp1gAAAAAAAAA4rbHa9Y+9RjtO7ip2cHGr9leL/p/SfbbaT7JX2dctLrF6S51R8f3n3eb8DyG2xybberZpYLCKa6yenctvj5fPzm4zFuL6uGve9nh57dnxnZZKcnKUpSlJuUpSbcpN822+ZLVWYUwL1UdDXRhznbJGVdRYjFGCZkmQZWjPRBpHzePjkRJmFkEVrKy02RSLERbNfZWbPonoiUmpuU4STTrcW4yi1ylqu8+49K11fl7DpOjtFoVV5WWR2YZJvM6DZ/aCalHGzGlZLhj5HKGR+w+5T/r7+fXHGXYVd9bhNaprg++L7mn4mx2e6RnvPFyJb1sI71Nz/8AJqXe/wBpcNfHn4mLVpp3lFea3ret2m5Sm12Zej3Pc9+vRAA5jpAAABT6RzI0VTtn6MFrp3ylyUV73oi4eddZfSvoY0Hy0nPT87X3V5Lj8SLaFLrJqJTXq9XBy9vPnM4fpTLnk2ztm9XKTb8PL2d3uRXhjomqr4FmFZvp2yRgyRHVRoTKBIonyRYmcko5mA1PkpEcpnhJRJd8+b5A5nzfPLErE7mfN4h3j7vEkVyRbqmbrAt5HORmbPBuI1YXRZRnZnY4tpLlQc1GUHuWVyVlVnfCxf1T5Nd6bNXh3am1plqZc10Xc14SUlY6Po7LV1cbEt1taTh+Sa4SXz+a0ZdOf6Jt3LXD1blqvBWxX6pfRHQHBOPReWho05dJZ6gAECZHbYoxcpPSMYuUn4JLVs8O6Wy5ZF9lkvWnKWngteC8lw8j1bbLL7LEtaejnpVH4ua/hUjyGpcW/FmlgY2i5ehmY6d5KOzP3LNUCwoGNMSdxNBGbNkEiKTJrCrYy1FFrswnIglMTkV5TBaokjmfN8glMx3ge9EtKZJGRTUySMiSISiW0yfHnoyrBk0CbWRz6M6HByDoMS44/FnobzFvM+vA0MPVOiyG9zej6UHGyP70Xrp9DpqLYzjGceMZxjOL8Ytar+px1OUtNG+fA3eyuRvUbuurpsnU/cnvR/lkl5GZWj2b7N5r0p9q21fBvAAcx1HC9Zd+kKa/zSnJ+SSX90jz6lHZdZc/xal3KrXzcpf8I46g2MMrUomPiX+pLnuRsaUSyRhSZyZ1Iz3qVrSnay3cyjcy5aHiWZWskVpsksZXmzwuSMZSPmphJjUErEikTwkVUyWDJIrki/WyzAqVMtQZYzlazLVTL0MjRczXRZ8t5FEo3JQk0zZPpiMec0vM63YDNVksiKeqfZzXv4xl/tPJsnmd71V2fjTXjVL5qcX/AMnDiaaVOXPeamGqN1I89zPUgAY5snmnWUvx4f6K/ukchSdr1l1aWUy/NXKHynr/ALjiajZw/wC1HyMbEfuSNlSzObIqWSTZ0I4XqVrWUbmXbWUbmXx0CKVrK0mWLSrNkWXowkz5qYyZ81FyViRMnrZWTJ4MkiuSLtbLVbKdbLNbLGcklmWosWPgYRkfLZcCpniRqsp8Ttuq1/4j/wCc/wBDhsiXE9A6qqm7py7o1S4+1yil+pyYl/py8jRwy/Uj5nqYAMM3TjusfG3seFiWrqs0b8ITWj+qieaQZ7Z0xgrIotp4a2Qai3yVi4xflJJniLTi2mmmm00+DTXNM1MFO9NrZv5ZlYyPRqp7V91+LF+mRJJlSqZO5HYjgksyK1lK1lq1lSxl0dDxIp2lSZatKszxl0SKR81EmYnhOxnEnrZXiTwJRZXItwZPCRViyWEixs5mi3GRhfPgYKRBkzKmeqOZVm9ZHrfVfh7tNtrX+ZKMI/CtX/cvkeT4cHOa4a8T9AbP4P2fHqq00cYpy/fl95/VteRwY2dqdtpo4OHSq3/ivnJbzaAAyTXB5P1gdFdjkdtFaV5GtnDlGxekvPg/ifgesGp2i6Kjl0Tplom/vVTfqWr0X7u5+xsvw9Xq53eneUYml1sLLXVc/Y8ZhMmUyrdXOucoTi4yhJwnB84y14o+xsNmxivNElkirYyScytZMsieWIbGVZk9sirOQZZEwkYoSZimRuWEkSasgiTRJRK5FiLJIyIEzJSJNlNixvlS+eplOZlgYsrrIQhFylKShCK5yk3wRWyUVbM7Dq16E7a9XSX4dGk5a8pWP0Y/Na/D7T2M1OzvRMcOiFMdG196ya9ex837u5exI2xiYir1k7rTuNrDUuqhZ66vnwWQABQdAAABw23+zTui8qla21x/GhFcba0vSXjKK+a9yR5a7ND9Fnl232yG45ZWND8NtyyKor/Kl3zivyPvXdz5ejpYPEL9uXpw4exnYvD/AOyPqt/E4OVxBObEloYSNK1jNTMJMikSSIpBlsTBnxHyQKywkiTRZCiSJNEJEmo3jBsxbDZGxk3qev8AVzsv9nrWTdHS6yP4UJLjVW16T8JSXyXvaND1dbIdq45eTD8KL1oqkv8ANmvWa/In837Fx9bM3GV9aa9eHH2O/C4f/OXpx4e4ABnGgAAAAAAAAAeZbbbEtb2Thx1jxlbjRXGHjKC74/s93dw4LzVn6XOJ2q2Fqyt63H3aMh6yktNKL337yXoy/aXPjqnrqaOHxtl0anvxM/EYO/ap+3A8akRM2HSPR9tE5V3QlXOPpRkuOninya9q4M18jRehwoikBIRIlpJEkRHEmqrlNqMYylKTUYwinKcpPkklxb9hJFbMPcd7sLsQ8hxyMmLjjp70K3qpZD/SHt7+7xNrsh1eqO7dnJN8JQxNdUvB2vv/AHVw8W+KPSopLglolwSXJI4K+Mt2aeu3Z5cTtoYV/wB0/bjwMa4KKUYpRUUoqKSSSXBJLuRIAZhoAAAAAAAAAAAAAAAGo6d6Bx82G5fHVrXs7Y8Lam++Mv0fB6cjxnarZW/Al99b9MnpXkwi9xvujJepL2Pn3N6M99IciiFkJV2RjOE04zhOKlCcXzTT5nRQxEqWWq2cCirh41M+/afmKcT5GJ3m3+w/2OEsvFmuw34QnjTk9+uU5KK7OT9KOrXB8Uk3q+77sd1c2ZUKsnMs7OiyELqqKpa3W1ySlFznygmmuC1ej9Vmh9TDo9I4/p536JzPQPQWRmz7PHr3tNO0slrGmpPvnLu9y1b7kez7K7I4+At5LtchrSeRJcV4xhH1I/V97fA3XR+DTjwjVRXCquPowgtF7W/FvxfFlw4K2JlUyWS51Oylh4089WAAcxeAAAAAAAAAAAAAAAAAAAAAeKdafSaycl4+9LssWFi7OSajLI3Nd7R8+MopP9l6cJcew6qekFZhRpdinZj7q3NdZRqlFOPlvb69mmhsdtao2/Z8fcjKVt8FJuKk1WpJPnyX3tfhZ0OLh1VJqquupN6tVwjBN+LSR11KkeojHo58OOZzQhLrpS6WWlvuWQAch0gAAAAAAAAAAAAAAAAAAAAAAAGgph2udZJ8sWFcI/6koOWvynL6G/Nf0dVuzyH3zv3vJU1xS/lfzNgTqSu14Jc+9yEI2v5vn2AAIEwAAAAAAAAAAAAAAAAAAAAAAADmOhekf+odI4sn6M8fJr174yxqozS9iah/EzpzgNqZPD6RxsxcK7Yqu992kXuTb+GyL+A78uqwsoyXevusn8FVKd3KL7n85r5AAKS0AAAAAAAAAAAAAAAAAAAAAAAA5TrFwO2wbGlrKjS+P7seE/Ldcn5I6PBsc6q5vnKuEn73FMo7TZEa8TIlJJrsZwUZLWLlJbqTXhq0XOjobtNUfy1Vx+UEixtumk9r3EEl02++y3loAFZMAAAAAAAAAAAAAAAAAAAAAAAA5nbCDuVOJHX8exb+ndWmk2/4m/hOmNJVXv51k3yooqhDw35ubbXt01XmbstqPsxj4X9/xYrgu1KXp6L83AAKiwAAAAAAAAAAAAAAAAAAAAAAAA1+G49rkJenv1Sku/cdUVF/NS+RsDjrM50dMbkuEMvEqin3dpCVm6/7l8aOxJzi1Z7UuHyRjJO62MAAgSAAAAAAAAAAAAAAAAAAAAAAAAOG6ysaUYUZlfCzGnpr4bzUoSfulBL4zscPJjbXXbD0bIQsj+7KKkvoyr09gfaMe6nhrZXJQ15KxLWD8pKLIdlH/gcP/wBXHXyrii2U+lTiu9N+zz4lUYdGpJ7UvdZcDcAAqLQAAAAAAAAAAAAAAAAAAAAAAADWdP5nY411iekowag/CcvuxfzaZ92fqcMXGg1o441EZLwkq46/U121UO2dGKtfxpuU2uahHRN/KUn8J0KSS0XBJaaeCLZJKmtru/TRbyuLbm/Cy38DIAFRYAAAAAAAAAAAAAAAAAAAAAAAAaeNW9myk+VWJVu+yVltur+UPqbg1EMtLOnQ9NZYdF0PGSjdbGfy3ofNm3Jz19F8EY94ABAkAAAAAAAAAAAAAAAAAAAAAAAAcLthc8XOwszj2ahZRe+OirUk3r48Jyfvidyc3t10f2+HbotZU/jx90U1P+Rz+hc2TyXbhY029ZOmEZN83KC3W35xZfOzpRferret5TC6qSXc7Pc9xuQAUFwAAAAAAAAAAAAAAAAAAAAAAABhOCknGSTUk4yT5NNaNGn2Sw3Ri10y1bqnkVavm1G+xJ+a0ZuzHTT6vzPb5W55zPLZ3MgAeHoAAAAAAAAAAAB//9k=); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + -webkit-animation-name: baloon2; + animation-name: baloon2; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; +} +.screen .baloon3 { + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon3; + animation-name: baloon3; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon4 { + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon4; + animation-name: baloon4; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon5 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon5; + animation-name: baloon5; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon6 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTaA4gOU3ZT4utVBZ5BjPpTAf3wUcDeXOf0gw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon6; + animation-name: baloon6; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon7 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon7; + animation-name: baloon7; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon8 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon8; + animation-name: baloon8; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon9 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon9; + animation-name: baloon9; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.screen .baloon10 { + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + position: relative; + -webkit-animation-name: baloon10; + animation-name: baloon10; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@-webkit-keyframes baloon1 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} + +@keyframes baloon1 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon2 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon2 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon3 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 200px; + left: 350px; + } + 50% { + top: 100px; + left: 300px; + } + 100% { + top: 50px; + left: 350px; + } +} +@keyframes baloon3 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 200px; + left: 350px; + } + 50% { + top: 100px; + left: 300px; + } + 100% { + top: 50px; + left: 350px; + } +} +@-webkit-keyframes baloon4 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon4 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon5 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon5 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon6 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon6 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon7 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon7 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon8 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon8 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon9 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon9 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@-webkit-keyframes baloon10 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} +@keyframes baloon10 { + 0% { + top: 300px; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100% { + top: 150px; + left: 350px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/style.css.map b/01-HTML-CSS/06-animations/HW/uriel bargil/style.css.map new file mode 100644 index 000000000..ca670bab6 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/uriel bargil/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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AA;IACA,WAAA;ECzCN;ED2CE;IACI,UAAA;IACA,WAAA;ECzCN;ED2CE;IACI,UAAA;IACA,WAAA;ECzCN;AACF;ADwBA;EACI;IAEI,UAAA;IACA,WAAA;ECzCN;ED2CE;IACI,UAAA;IACA,WAAA;ECzCN;ED2CE;IACI,UAAA;IACA,WAAA;ECzCN;ED2CE;IACI,UAAA;IACA,WAAA;ECzCN;AACF;AD+CA;EACI;IAEI,UAAA;IACA,WAAA;EC9CN;EDgDE;IACI,UAAA;IACA,WAAA;EC9CN;EDgDE;IACI,UAAA;IACA,WAAA;EC9CN;EDgDE;IACI,SAAA;IACA,WAAA;EC9CN;AACF;AD6BA;EACI;IAEI,UAAA;IACA,WAAA;EC9CN;EDgDE;IACI,UAAA;IACA,WAAA;EC9CN;EDgDE;IACI,UAAA;IACA,WAAA;EC9CN;EDgDE;IACI,SAAA;IACA,WAAA;EC9CN;AACF;ADiDA;EACI;IAEI,UAAA;IACA,WAAA;EChDN;EDkDE;IACI,UAAA;IACA,WAAA;EChDN;EDkDE;IACI,UAAA;IACA,WAAA;EChDN;EDkDE;IACI,UAAA;IACA,WAAA;EChDN;AACF;AD+BA;EACI;IAEI,UAAA;IACA,WAAA;EChDN;EDkDE;IACI,UAAA;IACA,WAAA;EChDN;EDkDE;IACI,UAAA;IACA,WAAA;EChDN;EDkDE;IACI,UAAA;IACA,WAAA;EChDN;AACF;ADmDA;EACI;IAEI,UAAA;IACA,WAAA;EClDN;EDoDE;IACI,UAAA;IACA,WAAA;EClDN;EDoDE;IACI,UAAA;IACA,WAAA;EClDN;EDoDE;IACI,UAAA;IACA,WAAA;EClDN;AACF;ADiCA;EACI;IAEI,UAAA;IACA,WAAA;EClDN;EDoDE;IACI,UAAA;IACA,WAAA;EClDN;EDoDE;IACI,UAAA;IACA,WAAA;EClDN;EDoDE;IACI,UAAA;IACA,WAAA;EClDN;AACF;ADqDA;EACI;IAEI,UAAA;IACA,WAAA;ECpDN;EDsDE;IACI,UAAA;IACA,WAAA;ECpDN;EDsDE;IACI,UAAA;IACA,WAAA;ECpDN;EDsDE;IACI,UAAA;IACA,WAAA;ECpDN;AACF;ADmCA;EACI;IAEI,UAAA;IACA,WAAA;ECpDN;EDsDE;IACI,UAAA;IACA,WAAA;ECpDN;EDsDE;IACI,UAAA;IACA,WAAA;ECpDN;EDsDE;IACI,UAAA;IACA,WAAA;ECpDN;AACF;ADuDA;EACI;IAEI,UAAA;IACA,WAAA;ECtDN;EDwDE;IACI,UAAA;IACA,WAAA;ECtDN;EDwDE;IACI,UAAA;IACA,WAAA;ECtDN;EDwDE;IACI,UAAA;IACA,WAAA;ECtDN;AACF;ADqCA;EACI;IAEI,UAAA;IACA,WAAA;ECtDN;EDwDE;IACI,UAAA;IACA,WAAA;ECtDN;EDwDE;IACI,UAAA;IACA,WAAA;ECtDN;EDwDE;IACI,UAAA;IACA,WAAA;ECtDN;AACF;ADyDA;EACI;IAEI,UAAA;IACA,WAAA;ECxDN;ED0DE;IACI,UAAA;IACA,WAAA;ECxDN;ED0DE;IACI,UAAA;IACA,WAAA;ECxDN;ED0DE;IACI,UAAA;IACA,WAAA;ECxDN;AACF;ADuCA;EACI;IAEI,UAAA;IACA,WAAA;ECxDN;ED0DE;IACI,UAAA;IACA,WAAA;ECxDN;ED0DE;IACI,UAAA;IACA,WAAA;ECxDN;ED0DE;IACI,UAAA;IACA,WAAA;ECxDN;AACF;AD2DA;EACI;IAEI,UAAA;IACA,WAAA;EC1DN;ED4DE;IACI,UAAA;IACA,WAAA;EC1DN;ED4DE;IACI,UAAA;IACA,WAAA;EC1DN;ED4DE;IACI,UAAA;IACA,WAAA;EC1DN;AACF;ADyCA;EACI;IAEI,UAAA;IACA,WAAA;EC1DN;ED4DE;IACI,UAAA;IACA,WAAA;EC1DN;ED4DE;IACI,UAAA;IACA,WAAA;EC1DN;ED4DE;IACI,UAAA;IACA,WAAA;EC1DN;AACF;AD6DA;EACI;IAEI,UAAA;IACA,WAAA;EC5DN;ED8DE;IACI,UAAA;IACA,WAAA;EC5DN;ED8DE;IACI,UAAA;IACA,WAAA;EC5DN;ED8DE;IACI,UAAA;IACA,WAAA;EC5DN;AACF;AD2CA;EACI;IAEI,UAAA;IACA,WAAA;EC5DN;ED8DE;IACI,UAAA;IACA,WAAA;EC5DN;ED8DE;IACI,UAAA;IACA,WAAA;EC5DN;ED8DE;IACI,UAAA;IACA,WAAA;EC5DN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/uriel bargil/style.scss b/01-HTML-CSS/06-animations/HW/uriel bargil/style.scss new file mode 100644 index 000000000..84e076341 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/uriel bargil/style.scss @@ -0,0 +1,399 @@ + +body { + overflow-y: hidden; + overflow-x: hidden; + position: relative; + left: 0; + + + +} +.screen{ + background-color: white; + background-repeat: no-repeat; + background-position: center; + background-size:cover; + display: flex; + align-items: center; + height: 100vh; + width: 100vw; + + + .baloon1{ + width: 130px; + height: 130px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAktkON4IsLvraoBsnniQafCsiVWKNb2hZ9g&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon1; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + + .baloon2{ + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + + animation-name: baloon2; + animation-duration: 5s; + animation-iteration-count: infinite; + position: relative; + + } + + .baloon3{ + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon3; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon4{ + width: 130px; + height: 130px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon4; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon5{ + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon5; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon6{ + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTaA4gOU3ZT4utVBZ5BjPpTAf3wUcDeXOf0gw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + + position: relative; + + animation-name: baloon6; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon7{ + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon7; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon8{ + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon8; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon9{ + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon9; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + .baloon10{ + width: 190px; + height: 160px; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrCHnGlkkjbZ_rhCoMq8nM7ALaYQrBpWe0mw&usqp=CAU); + background-repeat: no-repeat; + background-position: center; + background-size: 30%; + + position: relative; + + animation-name: baloon10; + animation-duration: 5s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + + +} + +@keyframes baloon1 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon2 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } + + + +} + +@keyframes baloon3 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 200px; + left: 350px; + } + 50% { + top: 100px; + left: 300px; + } + 100%{ + top: 50px; + left: 350px; + } +} + +@keyframes baloon4 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon5 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon6 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon7 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon8 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon9 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + +@keyframes baloon10 { + 0%{ + + top: 300px ; + left: 300px; + } + 25% { + top: 250px; + left: 350px; + } + 50% { + top: 200px; + left: 300px; + } + 100%{ + top: 150px; + left: 350px; + } +} + + diff --git a/01-HTML-CSS/06-animations/HW/vite-project/src/Components/Contact/dist/contact.css b/01-HTML-CSS/06-animations/HW/vite-project/src/Components/Contact/dist/contact.css new file mode 100644 index 000000000..87b1b0dda --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/vite-project/src/Components/Contact/dist/contact.css @@ -0,0 +1,42 @@ +.house { + width: 3rem; + height: 3rem; +} + +.housesContainer { + width: 14rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.constructionContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.cunstructionCar { + animation-name: cunstructionCar; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate; + animation-fill-mode: revert; + position: absolute; + top: 116px; + left: -2px; +} + +@keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + to { + margin-left: 10%; + width: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/vite-project/src/Components/Portfolio/dist/porfolio.css b/01-HTML-CSS/06-animations/HW/vite-project/src/Components/Portfolio/dist/porfolio.css new file mode 100644 index 000000000..87b1b0dda --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/vite-project/src/Components/Portfolio/dist/porfolio.css @@ -0,0 +1,42 @@ +.house { + width: 3rem; + height: 3rem; +} + +.housesContainer { + width: 14rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.constructionContainer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.cunstructionCar { + animation-name: cunstructionCar; + animation-duration: 3s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: alternate; + animation-fill-mode: revert; + position: absolute; + top: 116px; + left: -2px; +} + +@keyframes cunstructionCar { + from { + margin-left: -10%; + width: 100%; + } + to { + margin-left: 10%; + width: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/yovel.p/dist/style.css b/01-HTML-CSS/06-animations/HW/yovel.p/dist/style.css new file mode 100644 index 000000000..cd01d3ecc --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/yovel.p/dist/style.css @@ -0,0 +1,176 @@ +body { + margin: 0; +} + +.pacman { + width: 100vw; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; +} + +.pacman__map { + width: 70%; + height: 95%; + background: #354f7e; + border: 3px solid black; + position: relative; +} +.pacman__map .top { + width: 80%; + height: 4%; + background: white; + position: absolute; + left: 9%; + top: 10px; + border: none; +} +.pacman__map .bottom { + width: 80%; + height: 4%; + background: white; + position: absolute; + bottom: 10px; + left: 9%; + border: none; +} +.pacman__map .right { + width: 3%; + height: 93%; + background-color: white; + position: absolute; + top: 14px; + left: 9%; +} +.pacman__map .left { + width: 3%; + height: 93%; + background: white; + position: absolute; + top: 14px; + right: 11%; +} +.pacman__map .center { + height: 30%; + width: 30%; + border: 30px solid white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation-name: pacmanout; + animation-duration: 8s; +} +.pacman__map .centerleft { + width: 25%; + height: 4%; + background-color: white; + position: absolute; + top: 50%; + left: 10%; +} +.pacman__map .centerright { + width: 23%; + height: 4%; + background: white; + position: absolute; + top: 50%; + right: 12%; +} + +.dots { + display: flex; + flex-direction: row; + gap: 7px; +} +.dots .dots__left { + position: relative; + width: 15px; + height: 15px; + background: black; + border-radius: 50%; + z-index: 1; + top: 380px; + left: 15%; + animation-name: dotsfade; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-direction: reverse; +} +.dots .dots__right { + position: relative; + width: 15px; + height: 15px; + background: black; + border-radius: 50%; + z-index: 1; + top: 380px; + left: 700px; + animation-name: dotsfade; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-direction: reverse; +} + +@keyframes dotsfade { + from { + background: black; + } + to { + background: white; + } +} +.pacmanface { + width: 40px; + height: 40px; + background: yellow; + border-top-left-radius: 50%; + border-top-right-radius: 50%; + position: relative; + top: 47%; + left: 36%; + z-index: 2; + display: flex; + justify-content: center; + animation-name: pacmanfacemove; + animation-duration: 7s; + animation-iteration-count: 1; +} +.pacmanface .pacmanfaceeye { + top: 5px; + width: 15px; + height: 15px; + position: absolute; + background: white; + z-index: 2; + border-radius: 50%; + box-shadow: 1px 4px 8px 2px black; +} + +@keyframes pacmanfacemove { + 0% { + top: 47%; + left: 36%; + } + 20% { + top: 47%; + left: 9%; + } + 40% { + top: 4%; + left: 9%; + } + 60% { + top: 2%; + left: 60%; + } + 80% { + top: 47%; + left: 64%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/yovel.p/index.html b/01-HTML-CSS/06-animations/HW/yovel.p/index.html new file mode 100644 index 000000000..6b0a7ffc3 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/yovel.p/index.html @@ -0,0 +1,42 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/yovel.p/style.css b/01-HTML-CSS/06-animations/HW/yovel.p/style.css new file mode 100644 index 000000000..e16ed55c2 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/yovel.p/style.css @@ -0,0 +1,223 @@ +body { + margin: 0; +} + +.pacman { + width: 100vw; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; +} + +.pacman__map { + width: 70%; + height: 95%; + background: rgb(53, 79, 126); + border: 3px solid black; + position: relative; +} +.pacman__map .top { + width: 80%; + height: 4%; + background: white; + position: absolute; + left: 9%; + top: 10px; + border: none; +} +.pacman__map .bottom { + width: 80%; + height: 4%; + background: white; + position: absolute; + bottom: 10px; + left: 9%; + border: none; +} +.pacman__map .right { + width: 3%; + height: 93%; + background-color: white; + position: absolute; + top: 14px; + left: 9%; +} +.pacman__map .left { + width: 3%; + height: 93%; + background: white; + position: absolute; + top: 14px; + right: 11%; +} +.pacman__map .center { + height: 30%; + width: 30%; + border: 30px solid white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-animation-name: pacmanout; + animation-name: pacmanout; + -webkit-animation-duration: 8s; + animation-duration: 8s; +} +.pacman__map .centerleft { + width: 25%; + height: 4%; + background-color: white; + position: absolute; + top: 50%; + left: 10%; +} +.pacman__map .centerright { + width: 23%; + height: 4%; + background: white; + position: absolute; + top: 50%; + right: 12%; +} + +.dots { + display: flex; + flex-direction: row; + gap: 7px; +} +.dots .dots__left { + position: relative; + width: 15px; + height: 15px; + background: black; + border-radius: 50%; + z-index: 1; + top: 380px; + left: 15%; + -webkit-animation-name: dotsfade; + animation-name: dotsfade; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-direction: reverse; +} +.dots .dots__right { + position: relative; + width: 15px; + height: 15px; + background: black; + border-radius: 50%; + z-index: 1; + top: 380px; + left: 700px; + -webkit-animation-name: dotsfade; + animation-name: dotsfade; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-direction: reverse; +} + +@-webkit-keyframes dotsfade { + from { + background: black; + } + to { + background: white; + } +} + +@keyframes dotsfade { + from { + background: black; + } + to { + background: white; + } +} +.pacmanface { + width: 40px; + height: 40px; + background: rgb(255, 255, 0); + border-top-left-radius: 50%; + border-top-right-radius: 50%; + position: relative; + top: 47%; + left: 36%; + z-index: 2; + display: flex; + justify-content: center; + -webkit-animation-name: pacmanfacemove; + animation-name: pacmanfacemove; + -webkit-animation-duration: 7s; + animation-duration: 7s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} +.pacmanface .pacmanfaceeye { + top: 5px; + width: 15px; + height: 15px; + position: absolute; + background: rgb(255, 255, 255); + z-index: 2; + border-radius: 50%; + box-shadow: 1px 4px 8px 2px black; +} + +@-webkit-keyframes pacmanfacemove { + 0% { + top: 47%; + left: 36%; + } + 20% { + top: 47%; + left: 9%; + } + 40% { + top: 4%; + left: 9%; + } + 60% { + top: 2%; + left: 60%; + } + 80% { + top: 47%; + left: 64%; + } +} + +@keyframes pacmanfacemove { + 0% { + top: 47%; + left: 36%; + } + 20% { + top: 47%; + left: 9%; + } + 40% { + top: 4%; + left: 9%; + } + 60% { + top: 2%; + left: 60%; + } + 80% { + top: 47%; + left: 64%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/yovel.p/style.css.map b/01-HTML-CSS/06-animations/HW/yovel.p/style.css.map new file mode 100644 index 000000000..cad7896d1 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/yovel.p/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EAEI,SAAA;ACAJ;;ADEA;EACI,YAAA;EACA,aAAA;EACA,gBAAA;EACA,aAAA;EACA,uBAAA;ACCJ;;ADCA;EACI,UAAA;EACA,WAAA;EACA,4BAAA;EACA,uBAAA;EACA,kBAAA;ACEJ;ADDI;EACI,UAAA;EACA,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;ACGR;ADDI;EACI,UAAA;EACA,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;EACA,QAAA;EACA,YAAA;ACGR;ADDI;EACI,SAAA;EACA,WAAA;EACA,uBAAA;EACA,kBAAA;EACA,SAAA;EACA,QAAA;ACGR;ADDI;EACI,SAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;ACGR;ADDI;EACI,WAAA;EACA,UAAA;EACA,wBAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,iCAAA;UAAA,yBAAA;EACA,8BAAA;UAAA,sBAAA;ACGR;ADDI;EACI,UAAA;EACA,UAAA;EACA,uBAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;ACGR;ADAI;EACI,UAAA;EACA,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;ACER;;ADMA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;ACHA;ADKA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;EACA,SAAA;EACA,gCAAA;UAAA,wBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,qCAAA;UAAA,6BAAA;EACA,iEAAA;UAAA,yDAAA;EACA,4BAAA;ACHJ;ADKA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;EACA,WAAA;EACA,gCAAA;UAAA,wBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,qCAAA;UAAA,6BAAA;EACA,iEAAA;UAAA,yDAAA;EACA,4BAAA;ACHJ;;ADMA;EACI;IAAK,iBAAA;ECFP;EDGE;IAAG,iBAAA;ECAL;AACF;;ADHA;EACI;IAAK,iBAAA;ECFP;EDGE;IAAG,iBAAA;ECAL;AACF;ADEA;EACI,WAAA;EACA,YAAA;EACA,4BAAA;EACA,2BAAA;EACA,4BAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,aAAA;EACA,uBAAA;EACA,sCAAA;UAAA,8BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,oCAAA;UAAA,4BAAA;ACAJ;ADEI;EACI,QAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,8BAAA;EACA,UAAA;EACA,kBAAA;EACA,iCAAA;ACAR;;ADGA;EACI;IAAG,QAAA;IAAS,SAAA;ECEd;EDDE;IAAI,QAAA;IAAS,QAAA;ECKf;EDJE;IAAI,OAAA;IAAS,QAAA;ECQf;EDPE;IAAI,OAAA;IAAQ,SAAA;ECWd;EDVE;IAAI,QAAA;IAAS,SAAA;ECcf;AACF;;ADpBA;EACI;IAAG,QAAA;IAAS,SAAA;ECEd;EDDE;IAAI,QAAA;IAAS,QAAA;ECKf;EDJE;IAAI,OAAA;IAAS,QAAA;ECQf;EDPE;IAAI,OAAA;IAAQ,SAAA;ECWd;EDVE;IAAI,QAAA;IAAS,SAAA;ECcf;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/HW/yovel.p/style.scss b/01-HTML-CSS/06-animations/HW/yovel.p/style.scss new file mode 100644 index 000000000..640237e48 --- /dev/null +++ b/01-HTML-CSS/06-animations/HW/yovel.p/style.scss @@ -0,0 +1,163 @@ +body{ + + margin: 0; +} +.pacman{ + width: 100vw; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; +} +.pacman__map{ + width: 70%; + height: 95%; + background: rgb(53, 79, 126); + border: 3px solid black; + position: relative; + .top{ + width: 80%; + height: 4%; + background: white; + position: absolute; + left: 9%; + top: 10px; + border: none; + } + .bottom{ + width: 80%; + height: 4%; + background: white; + position: absolute; + bottom: 10px; + left: 9%; + border: none; + } + .right{ + width: 3%; + height: 93%; + background-color: white; + position: absolute; + top: 14px; + left: 9%; + } + .left{ + width: 3%; + height: 93%; + background: white; + position: absolute; + top: 14px; + right: 11%; + } + .center{ + height: 30%; + width: 30%; + border: 30px solid white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + animation-name: pacmanout; + animation-duration: 8s; + } + .centerleft{ + width: 25%; + height: 4%; + background-color: white; + position: absolute; + top: 50%; + left: 10%; + // transform: translate(-50%,-50%); + } + .centerright{ + width: 23%; + height: 4%; + background: white; + position: absolute; + top: 50%; + right: 12%; + } +} +// @keyframes pacmanout{ +// 0% {border-top: 10px solid white;} +// 50% {border-top: none;} +// 100%{border-top:10px solid white ;} +// } +.dots{ +display: flex; +flex-direction: row; +gap: 7px; + +.dots__left{ + position: relative; + width: 15px; + height: 15px; + background: black; + border-radius: 50%; + z-index: 1; + top: 380px; + left: 15%; + animation-name: dotsfade; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-direction: reverse; +} +.dots__right{ + position: relative; + width: 15px; + height: 15px; + background: black; + border-radius: 50%; + z-index: 1; + top: 380px; + left: 700px; + animation-name: dotsfade; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + animation-direction: reverse; +} +} +@keyframes dotsfade { + from{background: black;} + to{background: white;} + +} +.pacmanface{ + width: 40px; + height: 40px; + background: rgb(255, 255, 0); + border-top-left-radius: 50%; + border-top-right-radius: 50%; + position: relative; + top: 47%; + left: 36%; + z-index: 2; + display: flex; + justify-content: center; + animation-name: pacmanfacemove; + animation-duration: 7s; + animation-iteration-count: 1; + // animation-direction: reverse; + .pacmanfaceeye{ + top: 5px; + width: 15px; + height: 15px; + position: absolute; + background: rgb(255, 255, 255); + z-index: 2; + border-radius: 50%; + box-shadow: 1px 4px 8px 2px black; + } +} +@keyframes pacmanfacemove { + 0%{top: 47%;left: 36%;} + 20%{top: 47%;left: 9%;} + 40%{top: 4%; left: 9%;} + 60%{top: 2%;left: 60%;} + 80%{top: 47%;left: 64%;} + 100%{} +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/example/dist/style.css b/01-HTML-CSS/06-animations/example/dist/style.css new file mode 100644 index 000000000..32a66701d --- /dev/null +++ b/01-HTML-CSS/06-animations/example/dist/style.css @@ -0,0 +1,30 @@ +.circle { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: #2200ff; + top: 100px; + right: -10px; + } + 100% { + background-color: #5116da; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/example/index.html b/01-HTML-CSS/06-animations/example/index.html new file mode 100644 index 000000000..f60f71120 --- /dev/null +++ b/01-HTML-CSS/06-animations/example/index.html @@ -0,0 +1,17 @@ + + + + + + + Animation + + + +
+ + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/example/style.css b/01-HTML-CSS/06-animations/example/style.css new file mode 100644 index 000000000..1e8114747 --- /dev/null +++ b/01-HTML-CSS/06-animations/example/style.css @@ -0,0 +1,53 @@ +.circle { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounce { + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: rgb(34, 0, 255); + top: 100px; + right: -10px; + } + 100% { + background-color: rgb(81, 22, 218); + top: 0px; + right: 0px; + } +} + +@keyframes bounce { + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: rgb(34, 0, 255); + top: 100px; + right: -10px; + } + 100% { + background-color: rgb(81, 22, 218); + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/example/style.css.map b/01-HTML-CSS/06-animations/example/style.css.map new file mode 100644 index 000000000..0f471ef1d --- /dev/null +++ b/01-HTML-CSS/06-animations/example/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,oBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EAGA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EAEA,8CAAA;UAAA,sCAAA;ACFF;;ADMA;EAEE;IACE,sBAAA;IACA,QAAA;IACA,UAAA;ECJF;EDMA;IACE,iCAAA;IACA,UAAA;IACA,YAAA;ECJF;EDMA;IACE,kCAAA;IACA,QAAA;IACA,UAAA;ECJF;AACF;;ADZA;EAEE;IACE,sBAAA;IACA,QAAA;IACA,UAAA;ECJF;EDMA;IACE,iCAAA;IACA,UAAA;IACA,YAAA;ECJF;EDMA;IACE,kCAAA;IACA,QAAA;IACA,UAAA;ECJF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/example/style.scss b/01-HTML-CSS/06-animations/example/style.scss new file mode 100644 index 000000000..06840b1ce --- /dev/null +++ b/01-HTML-CSS/06-animations/example/style.scss @@ -0,0 +1,37 @@ +.circle { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + + // preferd keyframe + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + // animation-delay: 1s; + animation-timing-function: ease-in-out; +} + +//PROPERTIES OF SOME ANIMATION +@keyframes bounce { + //from position a + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: rgb(34, 0, 255); + top: 100px; + right: -10px; + } + 100% { + background-color: rgb(81, 22, 218); + top: 0px; + right: 0px; + } + + //to position b +} diff --git a/01-HTML-CSS/06-animations/exercises/Amit/animation.html b/01-HTML-CSS/06-animations/exercises/Amit/animation.html new file mode 100644 index 000000000..2fb88831c --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Amit/animation.html @@ -0,0 +1,20 @@ + + + + + + + + animation + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Amit/animation.scss b/01-HTML-CSS/06-animations/exercises/Amit/animation.scss new file mode 100644 index 000000000..8e299da29 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Amit/animation.scss @@ -0,0 +1,74 @@ +// .ball{ +// border-radius: 300px; +// width: 300px; +// height: 300px; +// position: relative; +// border: 10px solid black; +// animation-name: bounce; +// animation-duration: 1s; +// animation-direction: alternate; +// animation-iteration-count: infinite; + + +// } + +// @keyframes bounce{ +// 0%{background-color: rgb(255, 255, 255); +// top: 0px; +// left:0px; +// border-radius: 300px; +// width: 300px; +// height: 300px;} + +// 100%{background-color: rgb(238, 114, 12); +// top: 300px; +// left:300px; +// border-radius: 400px; +// width: 400px; +// height: 400px;} + +// } + + + + +.trash{ + + .img1{ + height: 500px; + width: 500px; + display: block; + } + + .img2{ + height: 500px; + width: 500px; + display: block; + } + + animation-name: open; + animation-duration: 1s; + // animation-direction: alternate; + animation-iteration-count: infinite; +} + + + @keyframes open{ + 0%{ + .img1{ + height: 500px; + width: 500px; + display: block; + } + + } + + 100%{ + .img2{ + height: 500px; + width: 500px; + display: none; + } + } + + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Amit/dist/animation.css b/01-HTML-CSS/06-animations/exercises/Amit/dist/animation.css new file mode 100644 index 000000000..d2bb83d25 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Amit/dist/animation.css @@ -0,0 +1,20 @@ +.img1 { + height: 500px; + width: 500px; + display: none; +} + +.img2 { + height: 500px; + width: 500px; + display: none; +} + +.trash:hover { + animation-name: open; + animation-duration: 1s; + animation-direction: alternate; + animation-iteration-count: infinite; +} + +@keyframes open {} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/GoalKick/dist/style.css b/01-HTML-CSS/06-animations/exercises/GoalKick/dist/style.css new file mode 100644 index 000000000..fdd2efc63 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/GoalKick/dist/style.css @@ -0,0 +1,71 @@ +.court { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsOp8IBsoWsEvpKQkv5oRi_okBfk5rBujKgW6KskZqew&s); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + align-items: center; + height: 80vh; + width: 90vw; +} +.court .goal { + width: 200px; + height: 500px; + border: 10px solid black; + border-right: none; +} +.court .ball { + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(https://cdn.britannica.com/68/195168-050-BBAE019A/football.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + top: 20%; + left: 50%; + animation-name: bounce; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; +} +.court .keeper { + width: 100px; + height: 100px; + background-image: url(https://e7.pngegg.com/pngimages/941/133/png-clipart-goalkeeper-football-goalkeeper-game-happy-birthday-vector-images-thumbnail.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + animation-name: example; + animation-duration: 1s; + animation-iteration-count: infinite; + position: relative; + left: -10%; + top: 0; +} + +@keyframes bounce { + 0% { + top: 20%; + left: 50%; + } + 50% { + top: -20%; + } + 100% { + top: -20%; + left: -25%; + } +} +@keyframes example { + 0% { + left: -10%; + top: 0; + } + 100% { + left: -10%; + top: -10%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/GoalKick/index2.html b/01-HTML-CSS/06-animations/exercises/GoalKick/index2.html new file mode 100644 index 000000000..8652e2ce3 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/GoalKick/index2.html @@ -0,0 +1,19 @@ + + + + + + + Animation + + + +
+
+
+
+
+ +
+ + diff --git a/01-HTML-CSS/06-animations/exercises/GoalKick/style.css b/01-HTML-CSS/06-animations/exercises/GoalKick/style.css new file mode 100644 index 000000000..ddfc42001 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/GoalKick/style.css @@ -0,0 +1,103 @@ +.court { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsOp8IBsoWsEvpKQkv5oRi_okBfk5rBujKgW6KskZqew&s); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + align-items: center; + height: 80vh; + width: 90vw; +} +.court .goal { + width: 200px; + height: 500px; + border: 10px solid black; + border-right: none; +} +.court .ball { + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(https://cdn.britannica.com/68/195168-050-BBAE019A/football.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + top: 20%; + left: 50%; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.court .keeper { + width: 100px; + height: 100px; + background-image: url(https://e7.pngegg.com/pngimages/941/133/png-clipart-goalkeeper-football-goalkeeper-game-happy-birthday-vector-images-thumbnail.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; + left: -10%; + top: 0; +} + +@-webkit-keyframes bounce { + 0% { + top: 20%; + left: 50%; + } + 50% { + top: -20%; + } + 100% { + top: -20%; + left: -25%; + } +} + +@keyframes bounce { + 0% { + top: 20%; + left: 50%; + } + 50% { + top: -20%; + } + 100% { + top: -20%; + left: -25%; + } +} +@-webkit-keyframes example { + 0% { + left: -10%; + top: 0; + } + 100% { + left: -10%; + top: -10%; + } +} +@keyframes example { + 0% { + left: -10%; + top: 0; + } + 100% { + left: -10%; + top: -10%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/GoalKick/style.css.map b/01-HTML-CSS/06-animations/exercises/GoalKick/style.css.map new file mode 100644 index 000000000..26882e3e8 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/GoalKick/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,2HAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;ACAJ;ADCI;EACI,YAAA;EACA,aAAA;EACA,wBAAA;EACA,kBAAA;ACCR;ADEI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,qFAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EAEA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8CAAA;UAAA,sCAAA;EACA,2CAAA;UAAA,mCAAA;EACA,qCAAA;UAAA,6BAAA;ACDR;ADGI;EACI,YAAA;EACA,aAAA;EACA,yJAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EAGA,+BAAA;UAAA,uBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,kBAAA;EACA,UAAA;EACA,MAAA;ACHR;;ADQA;EACI;IACI,QAAA;IACA,SAAA;ECLN;EDOE;IACI,SAAA;ECLN;EDQE;IACI,SAAA;IACA,UAAA;ECNN;AACF;;ADNA;EACI;IACI,QAAA;IACA,SAAA;ECLN;EDOE;IACI,SAAA;ECLN;EDQE;IACI,SAAA;IACA,UAAA;ECNN;AACF;ADSA;EACI;IACI,UAAA;IACA,MAAA;ECPN;EDUE;IACI,UAAA;IACA,SAAA;ECRN;AACF;ADDA;EACI;IACI,UAAA;IACA,MAAA;ECPN;EDUE;IACI,UAAA;IACA,SAAA;ECRN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/GoalKick/style.scss b/01-HTML-CSS/06-animations/exercises/GoalKick/style.scss new file mode 100644 index 000000000..2ae5c27aa --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/GoalKick/style.scss @@ -0,0 +1,82 @@ + +.court{ + background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsOp8IBsoWsEvpKQkv5oRi_okBfk5rBujKgW6KskZqew&s); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + display: flex; + align-items: center; + height: 80vh; + width: 90vw; + .goal{ + width: 200px; + height: 500px; + border: 10px solid black; + border-right: none; + } + + .ball{ + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(https://cdn.britannica.com/68/195168-050-BBAE019A/football.jpg); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + position: relative; + top: 20%; + left: 50%; + + animation-name: bounce; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + .keeper{ + width: 100px; + height: 100px; + background-image: url(https://e7.pngegg.com/pngimages/941/133/png-clipart-goalkeeper-football-goalkeeper-game-happy-birthday-vector-images-thumbnail.png); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + + + animation-name: example; + animation-duration: 1s; + animation-iteration-count: infinite; + position: relative; + left: -10%; + top: 0; + } +} + + +@keyframes bounce { + 0%{ + top: 20%; + left: 50%; + } + 50%{ + top:-20%; + + } + 100%{ + top:-20%; + left: -25%; + } +} + +@keyframes example { + 0%{ + left: -10%; + top: 0; + } + + 100% { + left: -10%; + top: -10%; + } + + + } diff --git a/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/dist/style.css b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/dist/style.css new file mode 100644 index 000000000..3c5251d6a --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/dist/style.css @@ -0,0 +1,89 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); +body { + margin: 0; + background: #000000; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: black; + z-index: 3; +} + +header h1 { + font-family: "Poppins", sans-serif; + color: #4b3c3c; + color: white; + font-size: 5rem; +} + +.loader { + width: 40px; + height: 150px; + margin-left: 0.875rem; + background: #920808; + animation: bar-loading 1s infinite alternate; +} + +.loader:nth-child(2) { + animation-delay: -0.2s; +} + +.loader:nth-child(3) { + animation-delay: -0.4s; +} + +@keyframes bar-loading { + 0% { + transform: scaleY(0.5); + } + 100% { + transform: scaleY(1); + } +} +footer { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: black; + z-index: 3; +} + +.mtneffect { + position: relative; +} + +.mtneffect span { + position: relative; + display: inline-block; + font-size: 20px; + color: #fff; + text-transform: uppercase; + animation: flip 2s infinite; + animation-delay: calc(.2s * var(--i)); +} + +@keyframes flip { + 0%, 80% { + transform: rotateY(360deg); + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.css b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.css new file mode 100644 index 000000000..d87141e0e --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.css @@ -0,0 +1,109 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); +body { + margin: 0; + background: #000000; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +header { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: rgb(0, 0, 0); + z-index: 3; +} + +header h1 { + font-family: "Poppins", sans-serif; + color: rgb(75, 60, 60); + color: white; + font-size: 5rem; +} + +.loader { + width: 40px; + height: 150px; + margin-left: 0.875rem; + background: rgb(146, 8, 8); + -webkit-animation: bar-loading 1s infinite alternate; + animation: bar-loading 1s infinite alternate; +} + +.loader:nth-child(2) { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} + +.loader:nth-child(3) { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} + +@-webkit-keyframes bar-loading { + 0% { + transform: scaleY(0.5); + } + 100% { + transform: scaleY(1); + } +} + +@keyframes bar-loading { + 0% { + transform: scaleY(0.5); + } + 100% { + transform: scaleY(1); + } +} +footer { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: rgb(0, 0, 0); + z-index: 3; +} + +.mtneffect { + position: relative; +} + +.mtneffect span { + position: relative; + display: inline-block; + font-size: 20px; + color: #fff; + text-transform: uppercase; + -webkit-animation: flip 2s infinite; + animation: flip 2s infinite; + -webkit-animation-delay: calc(0.2s * var(--i)); + animation-delay: calc(0.2s * var(--i)); +} + +@-webkit-keyframes flip { + 0%, 80% { + transform: rotateY(360deg); + } +} + +@keyframes flip { + 0%, 80% { + transform: rotateY(360deg); + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.css.map b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.css.map new file mode 100644 index 000000000..46618ae04 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAQ,2EAAA;AACA,qFAAA;AAGR;EACI,SAAA;EACA,mBAAA;EACA,iBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACDJ;;ADIE;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,6BAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;EACA,MAAA;EACA,8BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,kCAAA;EACA,sBAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADKA;EACI,WAAA;EACA,aAAA;EACA,qBAAA;EACA,0BAAA;EACA,oDAAA;UAAA,4CAAA;ACFJ;;ADKE;EACE,8BAAA;UAAA,sBAAA;ACFJ;;ADKE;EACE,8BAAA;UAAA,sBAAA;ACFJ;;ADKE;EACE;IACE,sBAAA;ECFJ;EDIE;IACE,oBAAA;ECFJ;AACF;;ADJE;EACE;IACE,sBAAA;ECFJ;EDIE;IACE,oBAAA;ECFJ;AACF;ADOE;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,6BAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;EACA,MAAA;EACA,8BAAA;EACA,UAAA;ACLJ;;ADQA;EACI,kBAAA;ACLJ;;ADOE;EACE,kBAAA;EACA,qBAAA;EACA,eAAA;EACA,WAAA;EACA,yBAAA;EACA,mCAAA;UAAA,2BAAA;EACA,8CAAA;UAAA,sCAAA;ACJJ;;ADME;EACE;IACE,0BAAA;ECHJ;AACF;;ADAE;EACE;IACE,0BAAA;ECHJ;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.scss b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.scss new file mode 100644 index 000000000..172125129 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Matanel Harush/css/style.scss @@ -0,0 +1,93 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); + + +body { + margin: 0; + background: #000000; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + + header{ + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: rgb(0, 0, 0); + z-index: 3; +} + +header h1{ + font-family: 'Poppins', sans-serif; + color: rgb(75, 60, 60); + color: white; + font-size: 5rem; +} + + +.loader { + width: 40px; + height: 150px; + margin-left: 0.875rem; + background: rgb(146, 8, 8); + animation: bar-loading 1s infinite alternate; + } + + .loader:nth-child(2) { + animation-delay: -0.2s; + } + + .loader:nth-child(3) { + animation-delay: -0.4s; + } + + @keyframes bar-loading { + 0% { + transform: scaleY(0.5); + } + 100% { + transform: scaleY(1); + } + } + + + + footer{ + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-evenly; + width: 100%; + margin: 0 auto; + padding: 10px; + position: fixed; + top: 0; + background-color: rgb(0, 0, 0); + z-index: 3; +} + +.mtneffect { + position: relative; + } + .mtneffect span { + position: relative; + display: inline-block; + font-size: 20px; + color: #fff; + text-transform: uppercase; + animation: flip 2s infinite; + animation-delay: calc(.2s * var(--i)) + } + @keyframes flip { + 0%,80% { + transform: rotateY(360deg) + } + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Matanel Harush/index.html b/01-HTML-CSS/06-animations/exercises/Matanel Harush/index.html new file mode 100644 index 000000000..e25a4451f --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Matanel Harush/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Animation Example - INT + + + +
+

INT LOADING

+ + +
+ +
+
+
+ + +
+
+ I + N + T + - + P + R + O + J + E + c + T +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/dist/style.css b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/dist/style.css new file mode 100644 index 000000000..bb20a5384 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/dist/style.css @@ -0,0 +1,65 @@ +body { + margin: 0; + padding: 0; + background-image: url("data:image/png;base64,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"); +} + +.container { + width: 1000px; + height: 1000px; +} +.container__circle img { + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation1; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; +} +.container__circle2 img { + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation2; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; + opacity: 0%; + animation-delay: 1s; +} + +@keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } +} +@keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/index.html b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/index.html new file mode 100644 index 000000000..6a15c75fd --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/index.html @@ -0,0 +1,20 @@ + + + + + + + Animation-Followup + + + +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.css b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.css new file mode 100644 index 000000000..06410c988 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.css @@ -0,0 +1,107 @@ +body { + margin: 0; + padding: 0; + background-image: url("data:image/png;base64,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"); +} + +.container { + width: 1000px; + height: 1000px; +} +.container__circle img { + width: 50px; + height: 50px; + border-radius: 50%; + -webkit-animation-name: animation1; + animation-name: animation1; + -webkit-animation-duration: 3s; + animation-duration: 3s; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.container__circle2 img { + width: 50px; + height: 50px; + border-radius: 50%; + -webkit-animation-name: animation2; + animation-name: animation2; + -webkit-animation-duration: 3s; + animation-duration: 3s; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + opacity: 0%; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} + +@-webkit-keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } +} + +@keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } +} +@-webkit-keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } +} +@keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.css.map b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.css.map new file mode 100644 index 000000000..6d0ac4320 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,2tQAAA;ACCJ;;ADGA;EACI,aAAA;EACA,cAAA;ACAJ;ADMI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,2CAAA;UAAA,mCAAA;ACJR;ADOI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,WAAA;EACA,2BAAA;UAAA,mBAAA;ACLR;;ADWA;EACI;IACI,UAAA;IACA,SAAA;IACA,aAAA;ECRN;EDWE;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECTN;EDYE;IACI,UAAA;IACA,SAAA;IACA,WAAA;ECVN;AACF;;ADPA;EACI;IACI,UAAA;IACA,SAAA;IACA,aAAA;ECRN;EDWE;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECTN;EDYE;IACI,UAAA;IACA,SAAA;IACA,WAAA;ECVN;AACF;ADcA;EACI;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECZN;EDeE;IACI,UAAA;IACA,WAAA;IACA,aAAA;ECbN;EDgBE;IACI,UAAA;IACA,WAAA;IACA,WAAA;ECdN;AACF;ADHA;EACI;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECZN;EDeE;IACI,UAAA;IACA,WAAA;IACA,aAAA;ECbN;EDgBE;IACI,UAAA;IACA,WAAA;IACA,WAAA;ECdN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.scss b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.scss new file mode 100644 index 000000000..5ee301724 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/Nikita Rossenko/style.scss @@ -0,0 +1,81 @@ +body { + margin: 0; + padding: 0; + background-image: url("data:image/png;base64,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") + +} + +.container { + width: 1000px; + height: 1000px; + // display: flex; + // justify-content: center; + // align-items: center; + + + &__circle img{ + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation1; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; + } + + &__circle2 img { + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation2; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; + opacity: 0%; + animation-delay: 1s; + + } +} + + +@keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } + +} + +@keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } + +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group-2/dist/style.css b/01-HTML-CSS/06-animations/exercises/group-2/dist/style.css new file mode 100644 index 000000000..7ab19d93b --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group-2/dist/style.css @@ -0,0 +1,46 @@ +.wrapper { + display: flex; + flex-direction: row; +} +.wrapper__circle { + margin: 10px; + width: 100px; + height: 100px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + animation-name: bounce; + position: relative; + animation-duration: 2s; + animation-iteration-count: 5; +} + +.wrapper2 { + display: flex; + flex-direction: row; + margin: 400px 0 0 400px; +} +.wrapper2__circle { + margin: 10px; + width: 100px; + height: 100px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + animation-name: bounce; + position: relative; + animation-duration: 2s; + animation-iteration-count: 5; +} + +@keyframes bounce { + 0% { + top: 0; + } + 50% { + top: 50px; + } + 100% { + top: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group-2/index.html b/01-HTML-CSS/06-animations/exercises/group-2/index.html new file mode 100644 index 000000000..8b6651ee3 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group-2/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group-2/style.css b/01-HTML-CSS/06-animations/exercises/group-2/style.css new file mode 100644 index 000000000..524954714 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group-2/style.css @@ -0,0 +1,64 @@ +.wrapper { + display: flex; + flex-direction: row; +} +.wrapper__circle { + margin: 10px; + width: 100px; + height: 100px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + -webkit-animation-name: bounce; + animation-name: bounce; + position: relative; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: 5; + animation-iteration-count: 5; +} + +.wrapper2 { + display: flex; + flex-direction: row; + margin: 400px 0 0 400px; +} +.wrapper2__circle { + margin: 10px; + width: 100px; + height: 100px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + -webkit-animation-name: bounce; + animation-name: bounce; + position: relative; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: 5; + animation-iteration-count: 5; +} + +@-webkit-keyframes bounce { + 0% { + top: 0; + } + 50% { + top: 50px; + } + 100% { + top: 0; + } +} + +@keyframes bounce { + 0% { + top: 0; + } + 50% { + top: 50px; + } + 100% { + top: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group-2/style.css.map b/01-HTML-CSS/06-animations/exercises/group-2/style.css.map new file mode 100644 index 000000000..147b17612 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group-2/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,mBAAA;ACCJ;ADCI;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,uBAAA;EACA,mBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,oCAAA;UAAA,4BAAA;ACCJ;;ADGA;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;ACAJ;ADEI;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,uBAAA;EACA,mBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,oCAAA;UAAA,4BAAA;ACAJ;;ADIA;EACI;IACI,MAAA;ECDN;EDIE;IACI,SAAA;ECFN;EDKE;IACI,MAAA;ECHN;AACF;;ADRA;EACI;IACI,MAAA;ECDN;EDIE;IACI,SAAA;ECFN;EDKE;IACI,MAAA;ECHN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group-2/style.scss b/01-HTML-CSS/06-animations/exercises/group-2/style.scss new file mode 100644 index 000000000..f0d31d26f --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group-2/style.scss @@ -0,0 +1,50 @@ +.wrapper{ + display: flex; + flex-direction: row; + + &__circle{ + margin: 10px; + width: 100px; + height: 100px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + animation-name: bounce; + position: relative; + animation-duration: 2s; + animation-iteration-count: 5; +} +} + +.wrapper2{ + display: flex; + flex-direction: row; + margin: 400px 0 0 400px; + + &__circle{ + margin: 10px; + width: 100px; + height: 100px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + animation-name: bounce; + position: relative; + animation-duration: 2s; + animation-iteration-count: 5; +} +} + +@keyframes bounce{ + 0%{ + top: 0; + } + + 50%{ + top: 50px; + } + + 100%{ + top:0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group6/dist/index.css b/01-HTML-CSS/06-animations/exercises/group6/dist/index.css new file mode 100644 index 000000000..cc8bc6196 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group6/dist/index.css @@ -0,0 +1,80 @@ +body { + margin: 0; +} + +.circle1 { + background-color: #4b123c; + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + left: 2rem; + animation-name: circle; + animation-duration: 2s; + animation-delay: 20ms; + animation-timing-function: ease-in-out; +} +@keyframes circle { + 0% { + top: 0rem; + left: 3rem; + } + 25% { + top: 0; + left: 10rem; + background-color: blue; + } + 50% { + top: 10rem; + left: 10rem; + background-color: pink; + } + 75% { + top: 10rem; + left: 3rem; + background-color: black; + } + 100% { + top: 0; + left: 3rem; + } +} + +.circle2 { + background-color: #59ddce; + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + top: -2rem; + animation-name: two; + animation-duration: 2s; + animation-delay: 20ms; + animation-timing-function: ease-in-out; + animation-delay: 200ms; +} +@keyframes two { + 0% { + top: -2rem; + left: 0rem; + } + 25% { + top: -2rem; + left: 10rem; + background-color: #9dff24; + } + 50% { + top: 10rem; + left: 10rem; + background-color: #130f30; + } + 75% { + top: 10rem; + left: 0rem; + background-color: #ae1414; + } + 100% { + top: -2rem; + left: 0rem; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group6/index.css b/01-HTML-CSS/06-animations/exercises/group6/index.css new file mode 100644 index 000000000..f2f0a080a --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group6/index.css @@ -0,0 +1,139 @@ +body { + margin: 0; +} + +.circle1 { + background-color: rgb(75, 18, 60); + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + left: 2rem; + -webkit-animation-name: circle; + animation-name: circle; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-delay: 20ms; + animation-delay: 20ms; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +@-webkit-keyframes circle { + 0% { + top: 0rem; + left: 3rem; + } + 25% { + top: 0; + left: 10rem; + background-color: blue; + } + 50% { + top: 10rem; + left: 10rem; + background-color: pink; + } + 75% { + top: 10rem; + left: 3rem; + background-color: black; + } + 100% { + top: 0; + left: 3rem; + } +} +@keyframes circle { + 0% { + top: 0rem; + left: 3rem; + } + 25% { + top: 0; + left: 10rem; + background-color: blue; + } + 50% { + top: 10rem; + left: 10rem; + background-color: pink; + } + 75% { + top: 10rem; + left: 3rem; + background-color: black; + } + 100% { + top: 0; + left: 3rem; + } +} + +.circle2 { + background-color: rgb(89, 221, 206); + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + top: -2rem; + -webkit-animation-name: two; + animation-name: two; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-delay: 20ms; + animation-delay: 20ms; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-delay: 200ms; + animation-delay: 200ms; +} +@-webkit-keyframes two { + 0% { + top: -2rem; + left: 0rem; + } + 25% { + top: -2rem; + left: 10rem; + background-color: rgb(157, 255, 36); + } + 50% { + top: 10rem; + left: 10rem; + background-color: rgb(19, 15, 48); + } + 75% { + top: 10rem; + left: 0rem; + background-color: rgb(174, 20, 20); + } + 100% { + top: -2rem; + left: 0rem; + } +} +@keyframes two { + 0% { + top: -2rem; + left: 0rem; + } + 25% { + top: -2rem; + left: 10rem; + background-color: rgb(157, 255, 36); + } + 50% { + top: 10rem; + left: 10rem; + background-color: rgb(19, 15, 48); + } + 75% { + top: 10rem; + left: 0rem; + background-color: rgb(174, 20, 20); + } + 100% { + top: -2rem; + left: 0rem; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group6/index.css.map b/01-HTML-CSS/06-animations/exercises/group6/index.css.map new file mode 100644 index 000000000..223645393 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group6/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADCA;EACI,iCAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8CAAA;UAAA,sCAAA;ACEJ;ADCI;EACI;IACI,SAAA;IACA,UAAA;ECCV;EDCM;IACI,MAAA;IACA,WAAA;IACA,sBAAA;ECCV;EDCM;IACI,UAAA;IACA,WAAA;IACA,sBAAA;ECCV;EDCM;IACI,UAAA;IACA,UAAA;IACA,uBAAA;ECCV;EDCM;IACI,MAAA;IACA,UAAA;ECCV;AACF;ADxBI;EACI;IACI,SAAA;IACA,UAAA;ECCV;EDCM;IACI,MAAA;IACA,WAAA;IACA,sBAAA;ECCV;EDCM;IACI,UAAA;IACA,WAAA;IACA,sBAAA;ECCV;EDCM;IACI,UAAA;IACA,UAAA;IACA,uBAAA;ECCV;EDCM;IACI,MAAA;IACA,UAAA;ECCV;AACF;;ADEA;EACI,mCAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA;EACA,2BAAA;UAAA,mBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8CAAA;UAAA,sCAAA;EACA,8BAAA;UAAA,sBAAA;ACCJ;ADCI;EACI;IACI,UAAA;IACA,UAAA;ECCV;EDCM;IACI,UAAA;IACA,WAAA;IACA,mCAAA;ECCV;EDCM;IACI,UAAA;IACA,WAAA;IACA,iCAAA;ECCV;EDCM;IACI,UAAA;IACA,UAAA;IACA,kCAAA;ECCV;EDCM;IACI,UAAA;IACA,UAAA;ECCV;AACF;ADxBI;EACI;IACI,UAAA;IACA,UAAA;ECCV;EDCM;IACI,UAAA;IACA,WAAA;IACA,mCAAA;ECCV;EDCM;IACI,UAAA;IACA,WAAA;IACA,iCAAA;ECCV;EDCM;IACI,UAAA;IACA,UAAA;IACA,kCAAA;ECCV;EDCM;IACI,UAAA;IACA,UAAA;ECCV;AACF","file":"index.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group6/index.html b/01-HTML-CSS/06-animations/exercises/group6/index.html new file mode 100644 index 000000000..245767069 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group6/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + +
+
+ + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/group6/index.scss b/01-HTML-CSS/06-animations/exercises/group6/index.scss new file mode 100644 index 000000000..a95a61938 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/group6/index.scss @@ -0,0 +1,82 @@ +body{ + margin: 0; +} +.circle1{ + background-color: rgb(75, 18, 60); + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + left: 2rem; + animation-name: circle; + animation-duration: 2s; + animation-delay: 20ms; + animation-timing-function: ease-in-out; + + + @keyframes circle { + 0%{ + top: 0rem; + left: 3rem; + } + 25%{ + top: 0; + left: 10rem; + background-color: blue; + } + 50%{ + top: 10rem; + left: 10rem; + background-color: pink; + } + 75%{ + top: 10rem; + left: 3rem; + background-color: black; + } + 100%{ + top: 0; + left: 3rem; + } + } +} +.circle2{ + background-color: rgb(89, 221, 206); + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + top: -2rem; + animation-name: two; + animation-duration: 2s; + animation-delay: 20ms; + animation-timing-function: ease-in-out; + animation-delay: 200ms; + + @keyframes two { + 0%{ + top: -2rem; + left: 0rem; + } + 25%{ + top: -2rem; + left: 10rem; + background-color: rgb(157, 255, 36); + } + 50%{ + top: 10rem; + left: 10rem; + background-color: rgb(19, 15, 48); + } + 75%{ + top: 10rem; + left: 0rem; + background-color: rgb(174, 20, 20); + } + 100%{ + top: -2rem; + left: 0rem; + } + } +} + diff --git a/01-HTML-CSS/06-animations/exercises/iss/dist/style.css b/01-HTML-CSS/06-animations/exercises/iss/dist/style.css new file mode 100644 index 000000000..5cc0d7ddd --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/iss/dist/style.css @@ -0,0 +1,41 @@ +.circle { + background-color: #860707; + width: 200px; + height: 200px; + display: grid; + position: relative; + animation-name: iss; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + grid-template-columns: 1fr 1fr; +} + +.in-circle { + background-color: yellow; + border-radius: 100%; + width: 90%; + height: 90%; + margin: auto; +} + +@keyframes iss { + 0% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } + 50% { + top: 20px; + grid-gap: 100px; + border-radius: 100%; + } + 100% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } +} +.test { + font-weight: 400; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/iss/index.html b/01-HTML-CSS/06-animations/exercises/iss/index.html new file mode 100644 index 000000000..3b6c20b42 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/iss/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + +
+
+
+
+
+
+

test

+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/iss/style.css b/01-HTML-CSS/06-animations/exercises/iss/style.css new file mode 100644 index 000000000..ee06dd7a4 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/iss/style.css @@ -0,0 +1,63 @@ +.circle { + background-color: rgb(134, 7, 7); + width: 200px; + height: 200px; + display: grid; + position: relative; + -webkit-animation-name: iss; + animation-name: iss; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + grid-template-columns: 1fr 1fr; +} + +.in-circle { + background-color: yellow; + border-radius: 100%; + width: 90%; + height: 90%; + margin: auto; +} + +@-webkit-keyframes iss { + 0% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } + 50% { + top: 20px; + grid-gap: 100px; + border-radius: 100%; + } + 100% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } +} + +@keyframes iss { + 0% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } + 50% { + top: 20px; + grid-gap: 100px; + border-radius: 100%; + } + 100% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } +} +.test { + font-weight: 400; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/iss/style.css.map b/01-HTML-CSS/06-animations/exercises/iss/style.css.map new file mode 100644 index 000000000..bfde02aa3 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/iss/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,gCAAA;EAEA,YAAA;EACA,aAAA;EACA,aAAA;EACA,kBAAA;EACA,2BAAA;UAAA,mBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;EACA,8BAAA;ACAJ;;ADGA;EACI,wBAAA;EACA,mBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;ACAJ;;ADGA;EACI;IACI,QAAA;IACA,aAAA;IACA,kBAAA;ECAN;EDEE;IACI,SAAA;IACA,eAAA;IACA,mBAAA;ECAN;EDEE;IACI,QAAA;IACA,aAAA;IACA,kBAAA;ECAN;AACF;;ADfA;EACI;IACI,QAAA;IACA,aAAA;IACA,kBAAA;ECAN;EDEE;IACI,SAAA;IACA,eAAA;IACA,mBAAA;ECAN;EDEE;IACI,QAAA;IACA,aAAA;IACA,kBAAA;ECAN;AACF;ADGI;EACI,gBAAA;ACDR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/iss/style.scss b/01-HTML-CSS/06-animations/exercises/iss/style.scss new file mode 100644 index 000000000..2481f5da5 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/iss/style.scss @@ -0,0 +1,45 @@ +.circle { + background-color: rgb(134, 7, 7); + // border-radius: 100%; + width: 200px; + height: 200px; + display: grid; + position: relative; + animation-name: iss; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + grid-template-columns: 1fr 1fr; +} + +.in-circle { + background-color: yellow; + border-radius: 100%; + width: 90%; + height: 90%; + margin: auto; +} + +@keyframes iss { + 0% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } + 50% { + top: 20px; + grid-gap: 100px; + border-radius: 100%; + } + 100% { + top: 0px; + grid-gap: 0px; + border-radius: 20%; + } + } + + .test { + font-weight: 400; + } + + \ No newline at end of file diff --git a/02-position-box-model/TomerCohen-instagram/index.html b/01-HTML-CSS/06-animations/exercises/start.md similarity index 100% rename from 02-position-box-model/TomerCohen-instagram/index.html rename to 01-HTML-CSS/06-animations/exercises/start.md diff --git a/01-HTML-CSS/06-animations/exercises/the_best_group/dist/style.css b/01-HTML-CSS/06-animations/exercises/the_best_group/dist/style.css new file mode 100644 index 000000000..c37d9a285 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/the_best_group/dist/style.css @@ -0,0 +1,51 @@ +body { + margin: 0; +} + +.battery_box { + height: 40vh; + width: 30vh; + background-color: #969696; + display: flex; + align-items: flex-end; + margin-left: 90vh; + margin-top: 30vh; + position: absolute; +} + +.battery_filler { + animation-name: filling; + animation-duration: 4s; + z-index: 1; + position: relative; + background-color: aquamarine; + animation-iteration-count: infinite; +} + +@keyframes filling { + 0% { + background-color: red; + width: 30vh; + height: 10vh; + } + 25% { + background-color: yellow; + width: 30vh; + height: 20vh; + } + 50% { + background-color: green; + width: 30vh; + height: 30vh; + } + 75% { + background-color: #003800; + width: 30vh; + height: 40vh; + } + 100% { + background-color: black; + width: 30vh; + height: 40vh; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/the_best_group/index.html b/01-HTML-CSS/06-animations/exercises/the_best_group/index.html new file mode 100644 index 000000000..83b19e4c0 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/the_best_group/index.html @@ -0,0 +1,17 @@ + + + + + + + + Animation + + +
+
+
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/the_best_group/style.css b/01-HTML-CSS/06-animations/exercises/the_best_group/style.css new file mode 100644 index 000000000..a37ed867d --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/the_best_group/style.css @@ -0,0 +1,82 @@ +body { + margin: 0; +} + +.battery_box { + height: 40vh; + width: 30vh; + background-color: rgb(150, 150, 150); + display: flex; + align-items: flex-end; + margin-left: 90vh; + margin-top: 30vh; + position: absolute; +} + +.battery_filler { + -webkit-animation-name: filling; + animation-name: filling; + -webkit-animation-duration: 4s; + animation-duration: 4s; + z-index: 1; + position: relative; + background-color: aquamarine; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +@-webkit-keyframes filling { + 0% { + background-color: red; + width: 30vh; + height: 10vh; + } + 25% { + background-color: yellow; + width: 30vh; + height: 20vh; + } + 50% { + background-color: green; + width: 30vh; + height: 30vh; + } + 75% { + background-color: rgb(0, 56, 0); + width: 30vh; + height: 40vh; + } + 100% { + background-color: black; + width: 30vh; + height: 40vh; + } +} + +@keyframes filling { + 0% { + background-color: red; + width: 30vh; + height: 10vh; + } + 25% { + background-color: yellow; + width: 30vh; + height: 20vh; + } + 50% { + background-color: green; + width: 30vh; + height: 30vh; + } + 75% { + background-color: rgb(0, 56, 0); + width: 30vh; + height: 40vh; + } + 100% { + background-color: black; + width: 30vh; + height: 40vh; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/the_best_group/style.css.map b/01-HTML-CSS/06-animations/exercises/the_best_group/style.css.map new file mode 100644 index 000000000..b12f16f33 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/the_best_group/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;ACCF;;ADEA;EACE,YAAA;EACA,WAAA;EACA,oCAAA;EACA,aAAA;EACA,qBAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;ACCF;;ADEA;EACE,+BAAA;UAAA,uBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,UAAA;EACA,kBAAA;EACA,4BAAA;EACA,2CAAA;UAAA,mCAAA;ACCF;;ADEA;EACE;IACE,qBAAA;IACA,WAAA;IACA,YAAA;ECCF;EDEA;IACE,wBAAA;IACA,WAAA;IACA,YAAA;ECAF;EDGA;IACE,uBAAA;IACA,WAAA;IACA,YAAA;ECDF;EDIA;IACE,+BAAA;IACA,WAAA;IACA,YAAA;ECFF;EDKA;IACE,uBAAA;IACA,WAAA;IACA,YAAA;ECHF;AACF;;AD1BA;EACE;IACE,qBAAA;IACA,WAAA;IACA,YAAA;ECCF;EDEA;IACE,wBAAA;IACA,WAAA;IACA,YAAA;ECAF;EDGA;IACE,uBAAA;IACA,WAAA;IACA,YAAA;ECDF;EDIA;IACE,+BAAA;IACA,WAAA;IACA,YAAA;ECFF;EDKA;IACE,uBAAA;IACA,WAAA;IACA,YAAA;ECHF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/the_best_group/style.scss b/01-HTML-CSS/06-animations/exercises/the_best_group/style.scss new file mode 100644 index 000000000..d2274a8ab --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/the_best_group/style.scss @@ -0,0 +1,55 @@ +body { + margin: 0; +} + +.battery_box { + height: 40vh; + width: 30vh; + background-color: rgb(150, 150, 150); + display: flex; + align-items: flex-end; + margin-left: 90vh; + margin-top: 30vh; + position: absolute; +} + +.battery_filler { + animation-name: filling; + animation-duration: 4s; + z-index: 1; + position: relative; + background-color: aquamarine; + animation-iteration-count: infinite; +} + +@keyframes filling { + 0% { + background-color: red; + width: 30vh; + height: 10vh; + } + + 25% { + background-color: yellow; + width: 30vh; + height: 20vh; + } + + 50% { + background-color: green; + width: 30vh; + height: 30vh; + } + + 75%{ + background-color: rgb(0, 56, 0); + width: 30vh; + height: 40vh; + } + + 100%{ + background-color: black; + width: 30vh; + height: 40vh; + } +} diff --git a/01-HTML-CSS/06-animations/exercises/tomer group/dist/stalye.css b/01-HTML-CSS/06-animations/exercises/tomer group/dist/stalye.css new file mode 100644 index 000000000..19ef69a67 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/tomer group/dist/stalye.css @@ -0,0 +1,37 @@ +.ballons { + display: flex; + justify-content: space-around; + width: 120px; + height: 700px; + background: #799ed2; + border-radius: 80%; + position: relative; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); + margin: 20px 30px; + transition: transform 0.5s ease; + animation: ballons 4s ease-in-out infinite; + transform-origin: bottom center; +} + +.ballon1 { + display: flex; + position: absolute; + width: 120px; + height: 145px; + background: #799ed2; + border-radius: 80%; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); + margin: 20px 30px; + transition: transform 0.5s ease; + animation: ballons 4s ease-in-out infinite; + transform-origin: bottom center; +} + +@keyframes ballons { + 0% { + top: 0%; + } + 100% { + top: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/tomer group/index.html b/01-HTML-CSS/06-animations/exercises/tomer group/index.html new file mode 100644 index 000000000..a3f47a0bd --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/tomer group/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/tomer group/stalye.css b/01-HTML-CSS/06-animations/exercises/tomer group/stalye.css new file mode 100644 index 000000000..4b2d7d976 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/tomer group/stalye.css @@ -0,0 +1,48 @@ +.ballons { + display: flex; + justify-content: space-around; + width: 120px; + height: 700px; + background: hsl(215deg, 50%, 65%); + border-radius: 80%; + position: relative; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); + margin: 20px 30px; + transition: transform 0.5s ease; + -webkit-animation: ballons 4s ease-in-out infinite; + animation: ballons 4s ease-in-out infinite; + transform-origin: bottom center; +} + +.ballon1 { + display: flex; + position: absolute; + width: 120px; + height: 145px; + background: hsl(215deg, 50%, 65%); + border-radius: 80%; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); + margin: 20px 30px; + transition: transform 0.5s ease; + -webkit-animation: ballons 4s ease-in-out infinite; + animation: ballons 4s ease-in-out infinite; + transform-origin: bottom center; +} + +@-webkit-keyframes ballons { + 0% { + top: 0%; + } + 100% { + top: 100%; + } +} + +@keyframes ballons { + 0% { + top: 0%; + } + 100% { + top: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/tomer group/stalye.css.map b/01-HTML-CSS/06-animations/exercises/tomer group/stalye.css.map new file mode 100644 index 000000000..de4068fc6 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/tomer group/stalye.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["stalye.scss","stalye.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,6BAAA;EACA,YAAA;EACD,aAAA;EACA,iCAAA;EACA,kBAAA;EACA,kBAAA;EACA,mDAAA;EACA,iBAAA;EACA,+BAAA;EACA,kDAAA;UAAA,0CAAA;EACA,+BAAA;ACCH;;ADCA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACD,aAAA;EACA,iCAAA;EACA,kBAAA;EACA,mDAAA;EACA,iBAAA;EACA,+BAAA;EACA,kDAAA;UAAA,0CAAA;EACA,+BAAA;ACEH;;ADoDA;EACI;IACG,OAAA;ECjDL;EDmDE;IACG,SAAA;ECjDL;AACF;;AD2CA;EACI;IACG,OAAA;ECjDL;EDmDE;IACG,SAAA;ECjDL;AACF","file":"stalye.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/exercises/tomer group/stalye.scss b/01-HTML-CSS/06-animations/exercises/tomer group/stalye.scss new file mode 100644 index 000000000..9a43585d4 --- /dev/null +++ b/01-HTML-CSS/06-animations/exercises/tomer group/stalye.scss @@ -0,0 +1,87 @@ +.ballons{ + display: flex; + justify-content: space-around; + width:120px; + height: 700px; + background:hsl(215,50%,65%); + border-radius:80%; + position:relative; + box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); + margin:20px 30px; + transition:transform 0.5s ease; + animation:ballons 4s ease-in-out infinite; + transform-origin:bottom center; +} +.ballon1{ + display:flex; + position: absolute; + width:120px; + height:145px; + background:hsl(215,50%,65%); + border-radius:80%; + box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); + margin:20px 30px; + transition:transform 0.5s ease; + animation:ballons 4s ease-in-out infinite; + transform-origin:bottom center; +} +// .ballon2{ +// display:inline-block; +// width:120px; +// height:145px; +// background:rgb(210, 121, 206); +// border-radius:80%; +// position:relative; +// box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); +// margin:20px 30px; +// transition:transform 0.5s ease; +// animation:ballons 4s ease-in-out infinite; +// transform-origin:bottom center; +// } +// .ballon3{ +// display:inline-block; +// width:120px; +// height:145px; +// background:rgb(201, 210, 121); +// border-radius:80%; +// position:relative; +// box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); +// margin:20px 30px; +// transition:transform 0.5s ease; +// animation:ballons 4s ease-in-out infinite; +// transform-origin:bottom center; +// } +// .ballon4{ +// display:inline-block; +// width:120px; +// height:145px; +// background:rgb(210, 121, 121); +// border-radius:80%; +// position:relative; +// box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); +// margin:20px 30px; +// transition:transform 0.5s ease; +// animation:ballons 4s ease-in-out infinite; +// transform-origin:bottom center; +// } +// .ballon5{ +// display:inline-block; +// width:120px; +// height:145px; +// background:rgb(121, 210, 133); +// border-radius:80%; +// position:relative; +// box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07); +// margin:20px 30px; +// transition:transform 0.5s ease; +// animation:ballons 4s ease-in-out infinite; +// transform-origin:bottom center; +// } +@keyframes ballons{ + 0%{ + top: 0%; + } + 100%{ + top:100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Amit/animation.html b/01-HTML-CSS/06-animations/followup/Amit/animation.html new file mode 100644 index 000000000..2fb88831c --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Amit/animation.html @@ -0,0 +1,20 @@ + + + + + + + + animation + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Amit/animation.scss b/01-HTML-CSS/06-animations/followup/Amit/animation.scss new file mode 100644 index 000000000..8e299da29 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Amit/animation.scss @@ -0,0 +1,74 @@ +// .ball{ +// border-radius: 300px; +// width: 300px; +// height: 300px; +// position: relative; +// border: 10px solid black; +// animation-name: bounce; +// animation-duration: 1s; +// animation-direction: alternate; +// animation-iteration-count: infinite; + + +// } + +// @keyframes bounce{ +// 0%{background-color: rgb(255, 255, 255); +// top: 0px; +// left:0px; +// border-radius: 300px; +// width: 300px; +// height: 300px;} + +// 100%{background-color: rgb(238, 114, 12); +// top: 300px; +// left:300px; +// border-radius: 400px; +// width: 400px; +// height: 400px;} + +// } + + + + +.trash{ + + .img1{ + height: 500px; + width: 500px; + display: block; + } + + .img2{ + height: 500px; + width: 500px; + display: block; + } + + animation-name: open; + animation-duration: 1s; + // animation-direction: alternate; + animation-iteration-count: infinite; +} + + + @keyframes open{ + 0%{ + .img1{ + height: 500px; + width: 500px; + display: block; + } + + } + + 100%{ + .img2{ + height: 500px; + width: 500px; + display: none; + } + } + + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Amit/dist/animation.css b/01-HTML-CSS/06-animations/followup/Amit/dist/animation.css new file mode 100644 index 000000000..d2bb83d25 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Amit/dist/animation.css @@ -0,0 +1,20 @@ +.img1 { + height: 500px; + width: 500px; + display: none; +} + +.img2 { + height: 500px; + width: 500px; + display: none; +} + +.trash:hover { + animation-name: open; + animation-duration: 1s; + animation-direction: alternate; + animation-iteration-count: infinite; +} + +@keyframes open {} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Ayala p/dist/style.css b/01-HTML-CSS/06-animations/followup/Ayala p/dist/style.css new file mode 100644 index 000000000..541e157d9 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Ayala p/dist/style.css @@ -0,0 +1,39 @@ +.circle { + background-color: blueviolet; + border-radius: 500px; + width: 100px; + height: 100px; + background-color: red; + position: relative; + animation-name: example; + animation-duration: 3s; + animation-iteration-count: 3; +} + +@keyframes example { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: black; + left: 0px; + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Ayala p/index.html b/01-HTML-CSS/06-animations/followup/Ayala p/index.html new file mode 100644 index 000000000..ec39f45c6 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Ayala p/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Ayala p/style.css b/01-HTML-CSS/06-animations/followup/Ayala p/style.css new file mode 100644 index 000000000..7c5fae1e7 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Ayala p/style.css @@ -0,0 +1,70 @@ +.circle { + background-color: blueviolet; + border-radius: 500px; + width: 100px; + height: 100px; + background-color: red; + position: relative; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-iteration-count: 3; + animation-iteration-count: 3; +} + +@-webkit-keyframes example { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: black; + left: 0px; + top: 0px; + } +} + +@keyframes example { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: black; + left: 0px; + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Ayala p/style.css.map b/01-HTML-CSS/06-animations/followup/Ayala p/style.css.map new file mode 100644 index 000000000..efdb4e5f5 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Ayala p/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAIA;EACI,4BAAA;EACA,oBAAA;EACA,YAAA;EACA,aAAA;EACA,qBAAA;EACA,kBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,oCAAA;UAAA,4BAAA;ACHJ;;ADSE;EACE;IAAM,qBAAA;IAAsB,SAAA;IAAU,QAAA;ECHxC;EDIE;IAAM,wBAAA;IAAyB,WAAA;IAAY,QAAA;ECC7C;EDAE;IAAM,sBAAA;IAAuB,WAAA;IAAY,UAAA;ECK3C;EDJE;IAAM,uBAAA;IAAwB,SAAA;IAAU,UAAA;ECS1C;EDRE;IAAM,uBAAA;IAAwB,SAAA;IAAU,QAAA;ECa1C;AACF;;ADnBE;EACE;IAAM,qBAAA;IAAsB,SAAA;IAAU,QAAA;ECHxC;EDIE;IAAM,wBAAA;IAAyB,WAAA;IAAY,QAAA;ECC7C;EDAE;IAAM,sBAAA;IAAuB,WAAA;IAAY,UAAA;ECK3C;EDJE;IAAM,uBAAA;IAAwB,SAAA;IAAU,UAAA;ECS1C;EDRE;IAAM,uBAAA;IAAwB,SAAA;IAAU,QAAA;ECa1C;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Ayala p/style.scss b/01-HTML-CSS/06-animations/followup/Ayala p/style.scss new file mode 100644 index 000000000..574c6a9ae --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Ayala p/style.scss @@ -0,0 +1,26 @@ + +body{ + +} +.circle{ + background-color: blueviolet; + border-radius: 500px; + width: 100px; + height: 100px; + background-color: red; + position: relative; + animation-name: example; + animation-duration: 3s; + animation-iteration-count: 3; + +} + + + + @keyframes example { + 0% {background-color:red; left:0px; top:0px;} + 25% {background-color:yellow; left:200px; top:0px;} + 50% {background-color:blue; left:200px; top:200px;} + 75% {background-color:green; left:0px; top:200px;} + 100% {background-color:black; left:0px; top:0px;} + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itai-G/dist/style.css b/01-HTML-CSS/06-animations/followup/Itai-G/dist/style.css new file mode 100644 index 000000000..4906687e8 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itai-G/dist/style.css @@ -0,0 +1,39 @@ +.circle { + background-color: red; + border-radius: 100px; + height: 200px; + width: 200px; + position: relative; + animation-name: slide; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: steps(5, end); +} + +@keyframes slide { + 0% { + top: 0px; + left: 0px; + background-color: red; + } + 25% { + top: 100px; + left: 20px; + background-color: blue; + } + 45% { + top: 150px; + left: 100px; + background-color: yellow; + } + 60% { + top: 250px; + left: 200x; + background-color: green; + } + 90% { + top: 300px; + left: 350px; + background-color: black; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itai-G/index.html b/01-HTML-CSS/06-animations/followup/Itai-G/index.html new file mode 100644 index 000000000..c153a0263 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itai-G/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itai-G/style.css b/01-HTML-CSS/06-animations/followup/Itai-G/style.css new file mode 100644 index 000000000..38e928f40 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itai-G/style.css @@ -0,0 +1,71 @@ +.circle { + background-color: red; + border-radius: 100px; + height: 200px; + width: 200px; + position: relative; + -webkit-animation-name: slide; + animation-name: slide; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: steps(5, end); + animation-timing-function: steps(5, end); +} + +@-webkit-keyframes slide { + 0% { + top: 0px; + left: 0px; + background-color: red; + } + 25% { + top: 100px; + left: 20px; + background-color: blue; + } + 45% { + top: 150px; + left: 100px; + background-color: yellow; + } + 60% { + top: 250px; + left: 200x; + background-color: green; + } + 90% { + top: 300px; + left: 350px; + background-color: black; + } +} + +@keyframes slide { + 0% { + top: 0px; + left: 0px; + background-color: red; + } + 25% { + top: 100px; + left: 20px; + background-color: blue; + } + 45% { + top: 150px; + left: 100px; + background-color: yellow; + } + 60% { + top: 250px; + left: 200x; + background-color: green; + } + 90% { + top: 300px; + left: 350px; + background-color: black; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itai-G/style.css.map b/01-HTML-CSS/06-animations/followup/Itai-G/style.css.map new file mode 100644 index 000000000..b2d91b48b --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itai-G/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,oBAAA;EACA,aAAA;EACA,YAAA;EACA,kBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,gDAAA;UAAA,wCAAA;ACCJ;;ADCA;EACI;IACI,QAAA;IACA,SAAA;IACA,qBAAA;ECEN;EDAE;IACI,UAAA;IACA,UAAA;IACA,sBAAA;ECEN;EDAE;IACI,UAAA;IACA,WAAA;IACA,wBAAA;ECEN;EDAE;IACI,UAAA;IACA,UAAA;IACA,uBAAA;ECEN;EDAE;IACI,UAAA;IACA,WAAA;IACA,uBAAA;ECEN;AACF;;AD3BA;EACI;IACI,QAAA;IACA,SAAA;IACA,qBAAA;ECEN;EDAE;IACI,UAAA;IACA,UAAA;IACA,sBAAA;ECEN;EDAE;IACI,UAAA;IACA,WAAA;IACA,wBAAA;ECEN;EDAE;IACI,UAAA;IACA,UAAA;IACA,uBAAA;ECEN;EDAE;IACI,UAAA;IACA,WAAA;IACA,uBAAA;ECEN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itai-G/style.scss b/01-HTML-CSS/06-animations/followup/Itai-G/style.scss new file mode 100644 index 000000000..68c852709 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itai-G/style.scss @@ -0,0 +1,38 @@ +.circle{ + background-color: red; + border-radius: 100px; + height: 200px; + width: 200px; + position: relative; + animation-name: slide; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: steps(5, end); +} +@keyframes slide { + 0%{ + top: 0px; + left: 0px; + background-color: red; + } + 25%{ + top: 100px; + left: 20px; + background-color: blue; + } + 45%{ + top: 150px; + left: 100px; + background-color: yellow; + } + 60%{ + top: 250px; + left: 200x; + background-color: green; + } + 90%{ + top: 300px; + left: 350px; + background-color: black; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itay-Amosi/dist/style.css b/01-HTML-CSS/06-animations/followup/Itay-Amosi/dist/style.css new file mode 100644 index 000000000..95bfb2d03 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itay-Amosi/dist/style.css @@ -0,0 +1,41 @@ +.circle { + background-color: black; + border-radius: 50%; + width: 500px; + height: 500px; + position: relative; + top: 100px; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: red; + left: 0px; + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itay-Amosi/index.html b/01-HTML-CSS/06-animations/followup/Itay-Amosi/index.html new file mode 100644 index 000000000..d772e43bc --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itay-Amosi/index.html @@ -0,0 +1,13 @@ + + + + + + + animations + + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.css b/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.css new file mode 100644 index 000000000..58305265f --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.css @@ -0,0 +1,74 @@ +.circle { + background-color: black; + border-radius: 50%; + width: 500px; + height: 500px; + position: relative; + top: 100px; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounce { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: red; + left: 0px; + top: 0px; + } +} + +@keyframes bounce { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: red; + left: 0px; + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.css.map b/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.css.map new file mode 100644 index 000000000..51770f03a --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAEA;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,UAAA;EAEA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EAEA,8CAAA;UAAA,sCAAA;ACHF;;ADKA;EACE;IACE,qBAAA;IACA,SAAA;IACA,QAAA;ECFF;EDIA;IACE,wBAAA;IACA,WAAA;IACA,QAAA;ECFF;EDIA;IACE,sBAAA;IACA,WAAA;IACA,UAAA;ECFF;EDIA;IACE,uBAAA;IACA,SAAA;IACA,UAAA;ECFF;EDIA;IACE,qBAAA;IACA,SAAA;IACA,QAAA;ECFF;AACF;;ADvBA;EACE;IACE,qBAAA;IACA,SAAA;IACA,QAAA;ECFF;EDIA;IACE,wBAAA;IACA,WAAA;IACA,QAAA;ECFF;EDIA;IACE,sBAAA;IACA,WAAA;IACA,UAAA;ECFF;EDIA;IACE,uBAAA;IACA,SAAA;IACA,UAAA;ECFF;EDIA;IACE,qBAAA;IACA,SAAA;IACA,QAAA;ECFF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.scss b/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.scss new file mode 100644 index 000000000..499b776aa --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Itay-Amosi/style.scss @@ -0,0 +1,44 @@ +body { +} +.circle { + background-color: black; + border-radius: 50%; + width: 500px; + height: 500px; + position: relative; + top: 100px; + // preferd keyframe + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + // animation-delay: 1s; + animation-timing-function: ease-in-out; +} +@keyframes bounce { + 0% { + background-color: red; + left: 0px; + top: 0px; + } + 25% { + background-color: yellow; + left: 200px; + top: 0px; + } + 50% { + background-color: blue; + left: 200px; + top: 200px; + } + 75% { + background-color: green; + left: 0px; + top: 200px; + } + 100% { + background-color: red; + left: 0px; + top: 0px; + } +} diff --git a/01-HTML-CSS/06-animations/followup/Kseniya/dist/style.css b/01-HTML-CSS/06-animations/followup/Kseniya/dist/style.css new file mode 100644 index 000000000..8e09f486c --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Kseniya/dist/style.css @@ -0,0 +1,47 @@ +body { + font-family: "Pacifico", cursive; + margin: 0; +} + +.main_animation_wrapper { + display: flex; +} + +.main_animation { + position: relative; + width: 40vh; + height: 10vh; + font-size: 4vh; + animation-name: slide; + animation-duration: 4s; + animation-iteration-count: infinite; + display: flex; + align-items: center; + justify-content: center; +} + +@keyframes slide { + 0% { + background-color: red; + top: 0px; + right: 0px; + } + 20% { + background-color: orange; + } + 40% { + background-color: yellow; + right: -80vw; + } + 60% { + background-color: green; + } + 80% { + background-color: blue; + } + 100% { + background-color: purple; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Kseniya/index.html b/01-HTML-CSS/06-animations/followup/Kseniya/index.html new file mode 100644 index 000000000..72c5d41bc --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Kseniya/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + Animation + + + +
+
Animation Exercise
+
+ + diff --git a/01-HTML-CSS/06-animations/followup/Kseniya/style.css b/01-HTML-CSS/06-animations/followup/Kseniya/style.css new file mode 100644 index 000000000..c36496fb5 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Kseniya/style.css @@ -0,0 +1,76 @@ +body { + font-family: "Pacifico", cursive; + margin: 0; +} + +.main_animation_wrapper { + display: flex; +} + +.main_animation { + position: relative; + width: 40vh; + height: 10vh; + font-size: 4vh; + -webkit-animation-name: slide; + animation-name: slide; + -webkit-animation-duration: 4s; + animation-duration: 4s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + display: flex; + align-items: center; + justify-content: center; +} + +@-webkit-keyframes slide { + 0% { + background-color: red; + top: 0px; + right: 0px; + } + 20% { + background-color: orange; + } + 40% { + background-color: yellow; + right: -80vw; + } + 60% { + background-color: green; + } + 80% { + background-color: blue; + } + 100% { + background-color: purple; + top: 0px; + right: 0px; + } +} + +@keyframes slide { + 0% { + background-color: red; + top: 0px; + right: 0px; + } + 20% { + background-color: orange; + } + 40% { + background-color: yellow; + right: -80vw; + } + 60% { + background-color: green; + } + 80% { + background-color: blue; + } + 100% { + background-color: purple; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Kseniya/style.css.map b/01-HTML-CSS/06-animations/followup/Kseniya/style.css.map new file mode 100644 index 000000000..f80e46006 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Kseniya/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,gCAAA;EACA,SAAA;ACCF;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,aAAA;EACE,mBAAA;EACA,uBAAA;ACCJ;;ADEA;EACE;IACE,qBAAA;IACA,QAAA;IACA,UAAA;ECCF;EDCA;IACE,wBAAA;ECCF;EDEA;IACE,wBAAA;IACA,YAAA;ECAF;EDGA;IACE,uBAAA;ECDF;EDIA;IACE,sBAAA;ECFF;EDKA;IACE,wBAAA;IACA,QAAA;IACA,UAAA;ECHF;AACF;;ADxBA;EACE;IACE,qBAAA;IACA,QAAA;IACA,UAAA;ECCF;EDCA;IACE,wBAAA;ECCF;EDEA;IACE,wBAAA;IACA,YAAA;ECAF;EDGA;IACE,uBAAA;ECDF;EDIA;IACE,sBAAA;ECFF;EDKA;IACE,wBAAA;IACA,QAAA;IACA,UAAA;ECHF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Kseniya/style.scss b/01-HTML-CSS/06-animations/followup/Kseniya/style.scss new file mode 100644 index 000000000..265763123 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Kseniya/style.scss @@ -0,0 +1,51 @@ +body { + font-family: "Pacifico", cursive; + margin: 0; +} + +.main_animation_wrapper{ + display: flex; +} + +.main_animation { + position: relative; + width: 40vh; + height: 10vh; + font-size: 4vh; + animation-name: slide; + animation-duration: 4s; + animation-iteration-count: infinite; + display: flex; + align-items: center; + justify-content: center; +} + +@keyframes slide { + 0% { + background-color: red; + top: 0px; + right: 0px; + } + 20% { + background-color: orange; + } + + 40% { + background-color: yellow; + right: -80vw; + } + + 60% { + background-color: green; + } + + 80% { + background-color: blue; + } + + 100% { + background-color: purple; + top: 0px; + right: 0px; + } +} diff --git a/01-HTML-CSS/06-animations/followup/Matanel Harush/css/dist/style.css b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/dist/style.css new file mode 100644 index 000000000..0ebed48cd --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/dist/style.css @@ -0,0 +1,27 @@ +div { + width: 100px; + height: 100px; + margin-top: 180px; + transform-origin: 200% center; + position: relative; + animation: rotate 3s linear infinite; +} + +div:before { + content: ""; + position: absolute; + height: 100%; + width: 100%; + border-radius: 50px; + background: #7c1010; + animation: rotate 3s linear reverse infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(-360deg); + } +} +body { + background: #141414; +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.css b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.css new file mode 100644 index 000000000..66563253e --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.css @@ -0,0 +1,34 @@ +div { + width: 100px; + height: 100px; + margin-top: 180px; + transform-origin: 200% center; + position: relative; + -webkit-animation: rotate 3s linear infinite; + animation: rotate 3s linear infinite; +} + +div:before { + content: ""; + position: absolute; + height: 100%; + width: 100%; + border-radius: 50px; + background: rgb(124, 16, 16); + animation: rotate 3s linear reverse infinite; +} + +@-webkit-keyframes rotate { + 100% { + transform: rotate(-360deg); + } +} + +@keyframes rotate { + 100% { + transform: rotate(-360deg); + } +} +body { + background: rgb(20, 20, 20); +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.css.map b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.css.map new file mode 100644 index 000000000..987d6ecba --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EAAM,YAAA;EAAa,aAAA;EAAc,iBAAA;EAAkB,6BAAA;EAA8B,kBAAA;EAAmB,4CAAA;UAAA,oCAAA;ACOpG;;ADNA;EAAa,WAAA;EAAY,kBAAA;EAAmB,YAAA;EAAa,WAAA;EAAY,mBAAA;EAAqB,4BAAA;EAA6B,4CAAA;ACgBvH;;ADfA;EAAoB;IAAO,0BAAA;ECoBzB;AACF;;ADrBA;EAAoB;IAAO,0BAAA;ECoBzB;AACF;ADnBA;EAAO,2BAAA;ACsBP","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.scss b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.scss new file mode 100644 index 000000000..f8c607cdc --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Matanel Harush/css/style.scss @@ -0,0 +1,5 @@ +div { width:100px; height:100px; margin-top:180px; transform-origin:200% center; position:relative; animation:rotate 3s linear infinite; } +div:before { content:''; position:absolute; height:100%; width:100%; border-radius: 50px; background:rgb(124, 16, 16); animation:rotate 3s linear reverse infinite; } +@keyframes rotate { 100% { transform:rotate(-360deg); } } + +body { background:rgb(20,20,20); } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Matanel Harush/index.html b/01-HTML-CSS/06-animations/followup/Matanel Harush/index.html new file mode 100644 index 000000000..5506dcca7 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Matanel Harush/index.html @@ -0,0 +1,16 @@ + + + + + + + + + Document + + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Nikita Rossenko/dist/style.css b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/dist/style.css new file mode 100644 index 000000000..bb20a5384 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/dist/style.css @@ -0,0 +1,65 @@ +body { + margin: 0; + padding: 0; + background-image: url("data:image/png;base64,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"); +} + +.container { + width: 1000px; + height: 1000px; +} +.container__circle img { + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation1; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; +} +.container__circle2 img { + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation2; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; + opacity: 0%; + animation-delay: 1s; +} + +@keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } +} +@keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Nikita Rossenko/index.html b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/index.html new file mode 100644 index 000000000..6a15c75fd --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/index.html @@ -0,0 +1,20 @@ + + + + + + + Animation-Followup + + + +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.css b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.css new file mode 100644 index 000000000..06410c988 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.css @@ -0,0 +1,107 @@ +body { + margin: 0; + padding: 0; + background-image: url("data:image/png;base64,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"); +} + +.container { + width: 1000px; + height: 1000px; +} +.container__circle img { + width: 50px; + height: 50px; + border-radius: 50%; + -webkit-animation-name: animation1; + animation-name: animation1; + -webkit-animation-duration: 3s; + animation-duration: 3s; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +.container__circle2 img { + width: 50px; + height: 50px; + border-radius: 50%; + -webkit-animation-name: animation2; + animation-name: animation2; + -webkit-animation-duration: 3s; + animation-duration: 3s; + position: absolute; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + opacity: 0%; + -webkit-animation-delay: 1s; + animation-delay: 1s; +} + +@-webkit-keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } +} + +@keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } +} +@-webkit-keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } +} +@keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.css.map b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.css.map new file mode 100644 index 000000000..6d0ac4320 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,2tQAAA;ACCJ;;ADGA;EACI,aAAA;EACA,cAAA;ACAJ;ADMI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,2CAAA;UAAA,mCAAA;ACJR;ADOI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,WAAA;EACA,2BAAA;UAAA,mBAAA;ACLR;;ADWA;EACI;IACI,UAAA;IACA,SAAA;IACA,aAAA;ECRN;EDWE;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECTN;EDYE;IACI,UAAA;IACA,SAAA;IACA,WAAA;ECVN;AACF;;ADPA;EACI;IACI,UAAA;IACA,SAAA;IACA,aAAA;ECRN;EDWE;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECTN;EDYE;IACI,UAAA;IACA,SAAA;IACA,WAAA;ECVN;AACF;ADcA;EACI;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECZN;EDeE;IACI,UAAA;IACA,WAAA;IACA,aAAA;ECbN;EDgBE;IACI,UAAA;IACA,WAAA;IACA,WAAA;ECdN;AACF;ADHA;EACI;IACI,SAAA;IACA,UAAA;IACA,WAAA;ECZN;EDeE;IACI,UAAA;IACA,WAAA;IACA,aAAA;ECbN;EDgBE;IACI,UAAA;IACA,WAAA;IACA,WAAA;ECdN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.scss b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.scss new file mode 100644 index 000000000..5ee301724 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Nikita Rossenko/style.scss @@ -0,0 +1,81 @@ +body { + margin: 0; + padding: 0; + background-image: url("data:image/png;base64,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") + +} + +.container { + width: 1000px; + height: 1000px; + // display: flex; + // justify-content: center; + // align-items: center; + + + &__circle img{ + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation1; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; + } + + &__circle2 img { + width: 50px; + height: 50px; + border-radius: 50%; + animation-name: animation2; + animation-duration: 3s; + position: absolute; + animation-iteration-count: infinite; + opacity: 0%; + animation-delay: 1s; + + } +} + + +@keyframes animation1 { + 0% { + top: 100px; + left: 0px; + opacity: 100%; + } + + 50% { + top: 25px; + left: 50px; + opacity: 0%; + } + + 100% { + top: 100px; + left: 0px; + opacity: 0%; + } + +} + +@keyframes animation2 { + 0% { + top: 25px; + left: 50px; + opacity: 0%; + } + + 50% { + top: 100px; + left: 100px; + opacity: 100%; + } + + 100% { + top: 100px; + left: 100px; + opacity: 0%; + } + +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Shai-li/dist/style.css b/01-HTML-CSS/06-animations/followup/Shai-li/dist/style.css new file mode 100644 index 000000000..e451af033 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Shai-li/dist/style.css @@ -0,0 +1,30 @@ +.circle { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: blue; + top: 100px; + right: -10px; + } + 100% { + background-color: palevioletred; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Shai-li/index.html b/01-HTML-CSS/06-animations/followup/Shai-li/index.html new file mode 100644 index 000000000..7d299b395 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Shai-li/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Shai-li/style.css b/01-HTML-CSS/06-animations/followup/Shai-li/style.css new file mode 100644 index 000000000..638bbfdab --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Shai-li/style.css @@ -0,0 +1,53 @@ +.circle { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounce { + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: blue; + top: 100px; + right: -10px; + } + 100% { + background-color: palevioletred; + top: 0px; + right: 0px; + } +} + +@keyframes bounce { + 0% { + background-color: pink; + top: 0px; + right: 0px; + } + 50% { + background-color: blue; + top: 100px; + right: -10px; + } + 100% { + background-color: palevioletred; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Shai-li/style.css.map b/01-HTML-CSS/06-animations/followup/Shai-li/style.css.map new file mode 100644 index 000000000..487111612 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Shai-li/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,oBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;ACCF;;ADEA;EACE;IACE,sBAAA;IACA,QAAA;IACA,UAAA;ECCF;EDEA;IACE,sBAAA;IACA,UAAA;IACA,YAAA;ECAF;EDEA;IACE,+BAAA;IACA,QAAA;IACA,UAAA;ECAF;AACF;;ADhBA;EACE;IACE,sBAAA;IACA,QAAA;IACA,UAAA;ECCF;EDEA;IACE,sBAAA;IACA,UAAA;IACA,YAAA;ECAF;EDEA;IACE,+BAAA;IACA,QAAA;IACA,UAAA;ECAF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Shai-li/style.scss b/01-HTML-CSS/06-animations/followup/Shai-li/style.scss new file mode 100644 index 000000000..53b4a7add --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Shai-li/style.scss @@ -0,0 +1,31 @@ +.circle{ + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce{ + 0%{ + background-color: pink; + top: 0px; + right: 0px; + } + + 50%{ + background-color: blue; + top: 100px; + right: -10px; + } + 100%{ + background-color: palevioletred; + top: 0px; + right: 0px; + } +} diff --git a/01-HTML-CSS/06-animations/followup/Tamar/dist/style.css b/01-HTML-CSS/06-animations/followup/Tamar/dist/style.css new file mode 100644 index 000000000..22dcaa67d --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Tamar/dist/style.css @@ -0,0 +1,30 @@ +.circle { + background-color: purple; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0% { + background-color: aquamarine; + top: 0px; + right: 0px; + } + 50% { + background-color: #f1d63e; + top: 200px; + right: -10px; + } + 100% { + background-color: #dfa5d5; + top: 0px; + right: -30px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Tamar/index.html b/01-HTML-CSS/06-animations/followup/Tamar/index.html new file mode 100644 index 000000000..c153a0263 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Tamar/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Tamar/style.css b/01-HTML-CSS/06-animations/followup/Tamar/style.css new file mode 100644 index 000000000..fecb9c0eb --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Tamar/style.css @@ -0,0 +1,53 @@ +.circle { + background-color: purple; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounce { + 0% { + background-color: aquamarine; + top: 0px; + right: 0px; + } + 50% { + background-color: rgb(241, 214, 62); + top: 200px; + right: -10px; + } + 100% { + background-color: rgb(223, 165, 213); + top: 0px; + right: -30px; + } +} + +@keyframes bounce { + 0% { + background-color: aquamarine; + top: 0px; + right: 0px; + } + 50% { + background-color: rgb(241, 214, 62); + top: 200px; + right: -10px; + } + 100% { + background-color: rgb(223, 165, 213); + top: 0px; + right: -30px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Tamar/style.css.map b/01-HTML-CSS/06-animations/followup/Tamar/style.css.map new file mode 100644 index 000000000..c9c196485 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Tamar/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACG,wBAAA;EACA,oBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EAEA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;ACAH;;ADGA;EACI;IACI,4BAAA;IACA,QAAA;IACA,UAAA;ECAN;EDEE;IACI,mCAAA;IACA,UAAA;IACA,YAAA;ECAN;EDEE;IACI,oCAAA;IACA,QAAA;IACA,YAAA;ECAN;AACF;;ADfA;EACI;IACI,4BAAA;IACA,QAAA;IACA,UAAA;ECAN;EDEE;IACI,mCAAA;IACA,UAAA;IACA,YAAA;ECAN;EDEE;IACI,oCAAA;IACA,QAAA;IACA,YAAA;ECAN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Tamar/style.scss b/01-HTML-CSS/06-animations/followup/Tamar/style.scss new file mode 100644 index 000000000..02c15dd16 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Tamar/style.scss @@ -0,0 +1,31 @@ +.circle { + background-color: purple; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0%{ + background-color: aquamarine; + top: 0px; + right: 0px; + } + 50%{ + background-color: rgb(241, 214, 62); + top: 200px; + right: -10px; + } + 100% { + background-color: rgb(223, 165, 213); + top: 0px; + right: -30px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Vladi/dist/style.css b/01-HTML-CSS/06-animations/followup/Vladi/dist/style.css new file mode 100644 index 000000000..4c2bbb822 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Vladi/dist/style.css @@ -0,0 +1,66 @@ +.court { + background-color: green; + display: flex; + align-items: center; + height: 80vh; + width: 90vw; +} +.court .goal { + width: 200px; + height: 500px; + border: 10px solid black; + border-right: none; +} +.court .ball { + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(https://cdn.britannica.com/68/195168-050-BBAE019A/football.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + top: 20%; + left: 50%; + animation-name: bounce; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; +} +.court .keeper { + width: 100px; + height: 100px; + background-image: url(https://e7.pngegg.com/pngimages/941/133/png-clipart-goalkeeper-football-goalkeeper-game-happy-birthday-vector-images-thumbnail.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + animation-name: example; + animation-duration: 2s; + position: relative; + left: -10%; + top: 0; +} + +@keyframes bounce { + 0% { + top: 20%; + left: 50%; + } + 50% { + top: -20%; + } + 100% { + top: -20%; + left: -25%; + } +} +@keyframes example { + 0% { + left: -10%; + top: 0; + } + 100% { + left: -10%; + top: -10%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Vladi/index.html b/01-HTML-CSS/06-animations/followup/Vladi/index.html new file mode 100644 index 000000000..8652e2ce3 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Vladi/index.html @@ -0,0 +1,19 @@ + + + + + + + Animation + + + +
+
+
+
+
+ +
+ + diff --git a/01-HTML-CSS/06-animations/followup/Vladi/style.css b/01-HTML-CSS/06-animations/followup/Vladi/style.css new file mode 100644 index 000000000..e6e79c02c --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Vladi/style.css @@ -0,0 +1,96 @@ +.court { + background-color: green; + display: flex; + align-items: center; + height: 80vh; + width: 90vw; +} +.court .goal { + width: 200px; + height: 500px; + border: 10px solid black; + border-right: none; +} +.court .ball { + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(https://cdn.britannica.com/68/195168-050-BBAE019A/football.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + top: 20%; + left: 50%; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.court .keeper { + width: 100px; + height: 100px; + background-image: url(https://e7.pngegg.com/pngimages/941/133/png-clipart-goalkeeper-football-goalkeeper-game-happy-birthday-vector-images-thumbnail.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 2s; + animation-duration: 2s; + position: relative; + left: -10%; + top: 0; +} + +@-webkit-keyframes bounce { + 0% { + top: 20%; + left: 50%; + } + 50% { + top: -20%; + } + 100% { + top: -20%; + left: -25%; + } +} + +@keyframes bounce { + 0% { + top: 20%; + left: 50%; + } + 50% { + top: -20%; + } + 100% { + top: -20%; + left: -25%; + } +} +@-webkit-keyframes example { + 0% { + left: -10%; + top: 0; + } + 100% { + left: -10%; + top: -10%; + } +} +@keyframes example { + 0% { + left: -10%; + top: 0; + } + 100% { + left: -10%; + top: -10%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Vladi/style.css.map b/01-HTML-CSS/06-animations/followup/Vladi/style.css.map new file mode 100644 index 000000000..d831fd3a2 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Vladi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;ACAJ;ADCI;EACI,YAAA;EACA,aAAA;EACA,wBAAA;EACA,kBAAA;ACCR;ADEI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,qFAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EAEA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8CAAA;UAAA,sCAAA;EAEA,qCAAA;UAAA,6BAAA;ACFR;ADII;EACI,YAAA;EACA,aAAA;EACA,yJAAA;EACA,4BAAA;EACA,2BAAA;EACA,sBAAA;EAGA,+BAAA;UAAA,uBAAA;EACA,8BAAA;UAAA,sBAAA;EAEA,kBAAA;EACA,UAAA;EACA,MAAA;ACLR;;ADUA;EACI;IACI,QAAA;IACA,SAAA;ECPN;EDSE;IACI,SAAA;ECPN;EDUE;IACI,SAAA;IACA,UAAA;ECRN;AACF;;ADJA;EACI;IACI,QAAA;IACA,SAAA;ECPN;EDSE;IACI,SAAA;ECPN;EDUE;IACI,SAAA;IACA,UAAA;ECRN;AACF;ADWA;EACI;IACI,UAAA;IACA,MAAA;ECTN;EDYE;IACI,UAAA;IACA,SAAA;ECVN;AACF;ADCA;EACI;IACI,UAAA;IACA,MAAA;ECTN;EDYE;IACI,UAAA;IACA,SAAA;ECVN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/Vladi/style.scss b/01-HTML-CSS/06-animations/followup/Vladi/style.scss new file mode 100644 index 000000000..bcac34fc1 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/Vladi/style.scss @@ -0,0 +1,79 @@ + +.court{ + background-color:green; + display: flex; + align-items: center; + height: 80vh; + width: 90vw; + .goal{ + width: 200px; + height: 500px; + border: 10px solid black; + border-right: none; + } + + .ball{ + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(https://cdn.britannica.com/68/195168-050-BBAE019A/football.jpg); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + position: relative; + top: 20%; + left: 50%; + + animation-name: bounce; + animation-duration: 1s; + animation-timing-function: ease-in-out; + // animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + .keeper{ + width: 100px; + height: 100px; + background-image: url(https://e7.pngegg.com/pngimages/941/133/png-clipart-goalkeeper-football-goalkeeper-game-happy-birthday-vector-images-thumbnail.png); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + + + animation-name: example; + animation-duration: 2s; + // animation-iteration-count: infinite; + position: relative; + left: -10%; + top: 0; + } +} + + +@keyframes bounce { + 0%{ + top: 20%; + left: 50%; + } + 50%{ + top:-20%; + + } + 100%{ + top:-20%; + left: -25%; + } +} + +@keyframes example { + 0%{ + left: -10%; + top: 0; + } + + 100% { + left: -10%; + top: -10%; + } + + + } diff --git a/01-HTML-CSS/06-animations/followup/adi/dist/style.css b/01-HTML-CSS/06-animations/followup/adi/dist/style.css new file mode 100644 index 000000000..414b5ef1d --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/adi/dist/style.css @@ -0,0 +1,34 @@ +* { + margin: 0px; + padding: 0px; +} + +.main { + background-color: aqua; + width: 40px; + height: 40px; + border-radius: 100%; + animation-name: ball; + margin: auto; + margin-top: 40px; + animation-duration: 2s; + position: relative; +} + +@keyframes ball { + 0% { + background-color: red; + top: 0; + left: 20px; + } + 50% { + background-color: green; + top: 100px; + left: 0px; + } + 100% { + background-color: purple; + top: 200px; + left: -100px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/adi/index.html b/01-HTML-CSS/06-animations/followup/adi/index.html new file mode 100644 index 000000000..6b5861eae --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/adi/index.html @@ -0,0 +1,17 @@ + + + + + + + Document + + + + + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/adi/style.css b/01-HTML-CSS/06-animations/followup/adi/style.css new file mode 100644 index 000000000..94db6a458 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/adi/style.css @@ -0,0 +1,54 @@ +* { + margin: 0px; + padding: 0px; +} + +.main { + background-color: aqua; + width: 40px; + height: 40px; + border-radius: 100%; + -webkit-animation-name: ball; + animation-name: ball; + margin: auto; + margin-top: 40px; + -webkit-animation-duration: 2s; + animation-duration: 2s; + position: relative; +} + +@-webkit-keyframes ball { + 0% { + background-color: red; + top: 0; + left: 20px; + } + 50% { + background-color: green; + top: 100px; + left: 0px; + } + 100% { + background-color: purple; + top: 200px; + left: -100px; + } +} + +@keyframes ball { + 0% { + background-color: red; + top: 0; + left: 20px; + } + 50% { + background-color: green; + top: 100px; + left: 0px; + } + 100% { + background-color: purple; + top: 200px; + left: -100px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/adi/style.css.map b/01-HTML-CSS/06-animations/followup/adi/style.css.map new file mode 100644 index 000000000..e996a94df --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/adi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,YAAA;ACCJ;;ADGA;EACI,sBAAA;EACA,WAAA;EACA,YAAA;EACA,mBAAA;EACA,4BAAA;UAAA,oBAAA;EACA,YAAA;EACA,gBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;ACAJ;;ADIA;EAEI;IACI,qBAAA;IACA,MAAA;IACA,UAAA;ECFN;EDKE;IACI,uBAAA;IACA,UAAA;IACA,SAAA;ECHN;EDME;IACI,wBAAA;IACA,UAAA;IACA,YAAA;ECJN;AACF;;ADdA;EAEI;IACI,qBAAA;IACA,MAAA;IACA,UAAA;ECFN;EDKE;IACI,uBAAA;IACA,UAAA;IACA,SAAA;ECHN;EDME;IACI,wBAAA;IACA,UAAA;IACA,YAAA;ECJN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/adi/style.scss b/01-HTML-CSS/06-animations/followup/adi/style.scss new file mode 100644 index 000000000..7fd78c313 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/adi/style.scss @@ -0,0 +1,48 @@ +*{ + margin: 0px; + padding: 0px; + +} + +.main{ + background-color: aqua; + width: 40px; + height: 40px; + border-radius: 100%; + animation-name: ball; + margin: auto; + margin-top: 40px; + animation-duration: 2s; + position: relative; +} + + +@keyframes ball { + + 0%{ + background-color: red; + top:0; + left: 20px; + } + + 50%{ + background-color: green; + top:100px; + left: 0px; + } + + 100%{ + background-color: purple; + top:200px; + left: -100px; + } + + + + + + + + + +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/anati/dist/style.css b/01-HTML-CSS/06-animations/followup/anati/dist/style.css new file mode 100644 index 000000000..4cbed0c32 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/anati/dist/style.css @@ -0,0 +1,14 @@ +.circle { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bonce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce {} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/anati/index.html b/01-HTML-CSS/06-animations/followup/anati/index.html new file mode 100644 index 000000000..b7f9ec8d0 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/anati/index.html @@ -0,0 +1,13 @@ + + + + + + + + Document + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/anati/style.scss b/01-HTML-CSS/06-animations/followup/anati/style.scss new file mode 100644 index 000000000..543a653eb --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/anati/style.scss @@ -0,0 +1,26 @@ +.circle{ + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + + + //prefered keyframe + animation-name: bonce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + // animation-delay: 1s; + animation-timing-function: ease-in-out; +} + +//PROPERTIES OF SOME ANIMATION +@keyframes bounce { + //from postion a + 0%{ + background-color: pink; + top: 0px;right: 0px; + } + + 50%{} diff --git a/01-HTML-CSS/06-animations/followup/angela/dist/follow.css b/01-HTML-CSS/06-animations/followup/angela/dist/follow.css new file mode 100644 index 000000000..23c55af14 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/angela/dist/follow.css @@ -0,0 +1,94 @@ +.followup { + height: 2rem; + width: 2rem; + background-color: #de5d5d; + border-radius: 50%; + position: relative; + animation: follow 1s ease-in-out forwards; +} +@keyframes follow { + 0% { + top: 0; + left: 0; + } + 50% { + top: 0; + left: 10rem; + background-color: blueviolet; + } + 100% { + top: 0; + left: 0rem; + background-color: coral; + } +} + +.circle-try-two { + margin-top: 2rem; + background-color: #4b123c; + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + animation-name: circle; + animation-duration: 2s; + animation-delay: 20ms; + animation-timing-function: ease-in-out; +} +@keyframes circle { + 0% { + top: 0rem; + left: 0rem; + } + 25% { + top: 0; + left: 10rem; + } + 50% { + top: 10rem; + left: 10rem; + } + 75% { + top: 10rem; + left: 0rem; + } + 100% { + top: 0; + left: 0rem; + } +} + +.header { + position: relative; + top: 5rem; + left: 5rem; + font-size: x-large; +} +.header::after { + content: ""; + height: 0.5rem; + width: 0.5rem; + background-color: crimson; + position: relative; + top: -2rem; +} +.header:hover::after { + animation-name: border; + animation-duration: 2s; + animation-timing-function: ease-in-out; + display: block; +} +@keyframes border { + 0% { + height: 0.5rem; + width: 0.5rem; + } + 50% { + height: 0.5rem; + width: 5rem; + } + 100% { + height: 0.5rem; + width: 0.5rem; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/angela/follow.css b/01-HTML-CSS/06-animations/followup/angela/follow.css new file mode 100644 index 000000000..9067a6456 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/angela/follow.css @@ -0,0 +1,154 @@ +.followup { + height: 2rem; + width: 2rem; + background-color: rgb(222, 93, 93); + border-radius: 50%; + position: relative; + -webkit-animation: follow 1s ease-in-out forwards; + animation: follow 1s ease-in-out forwards; +} +@-webkit-keyframes follow { + 0% { + top: 0; + left: 0; + } + 50% { + top: 0; + left: 10rem; + background-color: blueviolet; + } + 100% { + top: 0; + left: 0rem; + background-color: coral; + } +} +@keyframes follow { + 0% { + top: 0; + left: 0; + } + 50% { + top: 0; + left: 10rem; + background-color: blueviolet; + } + 100% { + top: 0; + left: 0rem; + background-color: coral; + } +} + +.circle-try-two { + margin-top: 2rem; + background-color: rgb(75, 18, 60); + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + -webkit-animation-name: circle; + animation-name: circle; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-delay: 20ms; + animation-delay: 20ms; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +@-webkit-keyframes circle { + 0% { + top: 0rem; + left: 0rem; + } + 25% { + top: 0; + left: 10rem; + } + 50% { + top: 10rem; + left: 10rem; + } + 75% { + top: 10rem; + left: 0rem; + } + 100% { + top: 0; + left: 0rem; + } +} +@keyframes circle { + 0% { + top: 0rem; + left: 0rem; + } + 25% { + top: 0; + left: 10rem; + } + 50% { + top: 10rem; + left: 10rem; + } + 75% { + top: 10rem; + left: 0rem; + } + 100% { + top: 0; + left: 0rem; + } +} + +.header { + position: relative; + top: 5rem; + left: 5rem; + font-size: x-large; +} +.header::after { + content: ""; + height: 0.5rem; + width: 0.5rem; + background-color: crimson; + position: relative; + top: -2rem; +} +.header:hover::after { + -webkit-animation-name: border; + animation-name: border; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + display: block; +} +@-webkit-keyframes border { + 0% { + height: 0.5rem; + width: 0.5rem; + } + 50% { + height: 0.5rem; + width: 5rem; + } + 100% { + height: 0.5rem; + width: 0.5rem; + } +} +@keyframes border { + 0% { + height: 0.5rem; + width: 0.5rem; + } + 50% { + height: 0.5rem; + width: 5rem; + } + 100% { + height: 0.5rem; + width: 0.5rem; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/angela/follow.css.map b/01-HTML-CSS/06-animations/followup/angela/follow.css.map new file mode 100644 index 000000000..9b511a962 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/angela/follow.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["follow.scss","follow.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,WAAA;EACA,kCAAA;EACA,kBAAA;EACA,kBAAA;EACA,iDAAA;UAAA,yCAAA;ACCJ;ADAI;EACI;IACI,MAAA;IACA,OAAA;ECEV;EDCM;IACI,MAAA;IACA,WAAA;IACA,4BAAA;ECCV;EDCM;IACI,MAAA;IACA,UAAA;IACA,uBAAA;ECCV;AACF;ADhBI;EACI;IACI,MAAA;IACA,OAAA;ECEV;EDCM;IACI,MAAA;IACA,WAAA;IACA,4BAAA;ECCV;EDCM;IACI,MAAA;IACA,UAAA;IACA,uBAAA;ECCV;AACF;;ADIA;EACI,gBAAA;EACA,iCAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8CAAA;UAAA,sCAAA;ACDJ;ADGI;EACI;IACI,SAAA;IACA,UAAA;ECDV;EDGM;IACI,MAAA;IACA,WAAA;ECDV;EDGM;IACI,UAAA;IACA,WAAA;ECDV;EDGM;IACI,UAAA;IACA,UAAA;ECDV;EDGM;IACI,MAAA;IACA,UAAA;ECDV;AACF;ADnBI;EACI;IACI,SAAA;IACA,UAAA;ECDV;EDGM;IACI,MAAA;IACA,WAAA;ECDV;EDGM;IACI,UAAA;IACA,WAAA;ECDV;EDGM;IACI,UAAA;IACA,UAAA;ECDV;EDGM;IACI,MAAA;IACA,UAAA;ECDV;AACF;;ADKA;EACI,kBAAA;EACA,SAAA;EACA,UAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;EACA,cAAA;EACA,aAAA;EACA,yBAAA;EAEA,kBAAA;EACA,UAAA;ACHR;ADMQ;EACI,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8CAAA;UAAA,sCAAA;EACA,cAAA;ACJZ;ADMY;EACI;IACI,cAAA;IACA,aAAA;ECJlB;EDOc;IACI,cAAA;IACA,WAAA;ECLlB;EDOc;IACI,cAAA;IACA,aAAA;ECLlB;AACF;ADRY;EACI;IACI,cAAA;IACA,aAAA;ECJlB;EDOc;IACI,cAAA;IACA,WAAA;ECLlB;EDOc;IACI,cAAA;IACA,aAAA;ECLlB;AACF","file":"follow.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/angela/follow.scss b/01-HTML-CSS/06-animations/followup/angela/follow.scss new file mode 100644 index 000000000..3ee769c96 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/angela/follow.scss @@ -0,0 +1,104 @@ +.followup{ + height: 2rem; + width: 2rem; + background-color: rgb(222, 93, 93); + border-radius: 50%; + position: relative; + animation: follow 1s ease-in-out forwards; + @keyframes follow { + 0%{ + top: 0; + left: 0; + + } + 50%{ + top: 0; + left: 10rem; + background-color: blueviolet; + } + 100%{ + top: 0; + left: 0rem; + background-color: coral; + } +} +} + + +.circle-try-two{ + margin-top: 2rem; + background-color: rgb(75, 18, 60); + height: 2rem; + width: 2rem; + border-radius: 50%; + position: relative; + animation-name: circle; + animation-duration: 2s; + animation-delay: 20ms; + animation-timing-function: ease-in-out; + + @keyframes circle { + 0%{ + top: 0rem; + left: 0rem; + } + 25%{ + top: 0; + left: 10rem; + } + 50%{ + top: 10rem; + left: 10rem; + } + 75%{ + top: 10rem; + left: 0rem; + } + 100%{ + top: 0; + left: 0rem; + } + } +} + +.header{ + position: relative; + top: 5rem; + left: 5rem; + font-size: x-large; + + &::after{ + content: ''; + height: 0.5rem; + width: 0.5rem; + background-color: crimson; + + position: relative; + top: -2rem; + + } + &:hover::after{ + animation-name: border; + animation-duration: 2s; + animation-timing-function: ease-in-out; + display: block; + + @keyframes border { + 0%{ + height: 0.5rem; + width: 0.5rem; + + } + 50%{ + height: 0.5rem; + width: 5rem; + } + 100%{ + height: 0.5rem; + width: 0.5rem; + + } + } + } + +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/angela/followup.html b/01-HTML-CSS/06-animations/followup/angela/followup.html new file mode 100644 index 000000000..37c7adbe6 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/angela/followup.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + +
+
+
+

header

+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/asael-matari/dist/style.css b/01-HTML-CSS/06-animations/followup/asael-matari/dist/style.css new file mode 100644 index 000000000..0d39b1aa5 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/asael-matari/dist/style.css @@ -0,0 +1,35 @@ +.ball { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 6s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes bounce { + 25% { + background-color: pink; + top: 50px; + right: -20px; + } + 50% { + background-color: #2200ff; + top: 0px; + right: -60px; + } + 75% { + background-color: #5116da; + top: 50px; + right: -100px; + } + 100% { + background-color: #010000; + top: 0px; + right: -140px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/asael-matari/index.html b/01-HTML-CSS/06-animations/followup/asael-matari/index.html new file mode 100644 index 000000000..99c81cb29 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/asael-matari/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/asael-matari/style.css b/01-HTML-CSS/06-animations/followup/asael-matari/style.css new file mode 100644 index 000000000..ab59d2792 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/asael-matari/style.css @@ -0,0 +1,63 @@ +.ball { + background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 6s; + animation-duration: 6s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + +@-webkit-keyframes bounce { + 25% { + background-color: pink; + top: 50px; + right: -20px; + } + 50% { + background-color: rgb(34, 0, 255); + top: 0px; + right: -60px; + } + 75% { + background-color: rgb(81, 22, 218); + top: 50px; + right: -100px; + } + 100% { + background-color: rgb(1, 0, 0); + top: 0px; + right: -140px; + } +} + +@keyframes bounce { + 25% { + background-color: pink; + top: 50px; + right: -20px; + } + 50% { + background-color: rgb(34, 0, 255); + top: 0px; + right: -60px; + } + 75% { + background-color: rgb(81, 22, 218); + top: 50px; + right: -100px; + } + 100% { + background-color: rgb(1, 0, 0); + top: 0px; + right: -140px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/asael-matari/style.css.map b/01-HTML-CSS/06-animations/followup/asael-matari/style.css.map new file mode 100644 index 000000000..c29ed78d2 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/asael-matari/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACA,sBAAA;EACE,oBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,yCAAA;UAAA,iCAAA;ACAF;;ADIA;EAEA;IACI,sBAAA;IACA,SAAA;IACA,YAAA;ECFF;EDKA;IACE,iCAAA;IACA,QAAA;IACA,YAAA;ECHF;EDKA;IACE,kCAAA;IACA,SAAA;IACA,aAAA;ECHF;EDKA;IACE,8BAAA;IACA,QAAA;IACA,aAAA;ECHF;AACF;;ADnBA;EAEA;IACI,sBAAA;IACA,SAAA;IACA,YAAA;ECFF;EDKA;IACE,iCAAA;IACA,QAAA;IACA,YAAA;ECHF;EDKA;IACE,kCAAA;IACA,SAAA;IACA,aAAA;ECHF;EDKA;IACE,8BAAA;IACA,QAAA;IACA,aAAA;ECHF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/asael-matari/style.scss b/01-HTML-CSS/06-animations/followup/asael-matari/style.scss new file mode 100644 index 000000000..cb25f9b5c --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/asael-matari/style.scss @@ -0,0 +1,42 @@ + +.ball{ +background-color: navy; + border-radius: 100px; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 6s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function:linear; +} + +//PROPERTIES OF SOME ANIMATION +@keyframes bounce { + //from position a +25% { + background-color: pink; + top: 50px; + right: -20px; + } + + 50% { + background-color: rgb(34, 0, 255); + top: 0px; + right: -60px; + } + 75% { + background-color: rgb(81, 22, 218); + top: 50px; + right: -100px; + } + 100%{ + background-color: rgb(1, 0, 0); + top: 0px; + right: -140px; + } + + //to position b +} + diff --git a/01-HTML-CSS/06-animations/followup/aviva elias/animation.html b/01-HTML-CSS/06-animations/followup/aviva elias/animation.html new file mode 100644 index 000000000..82eefbab8 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/aviva elias/animation.html @@ -0,0 +1,13 @@ + + + + + + + Document + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/aviva elias/dist/style.css b/01-HTML-CSS/06-animations/followup/aviva elias/dist/style.css new file mode 100644 index 000000000..94f8d760b --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/aviva elias/dist/style.css @@ -0,0 +1,25 @@ +body { + margin: 0; +} + +.box { + background-color: red; + width: 200px; + height: 200px; + position: relative; + animation-name: example; + animation-duration: 3s; + animation-fill-mode: both; + animation-delay: 2s; +} + +@keyframes example { + from { + top: 0; + background-color: yellow; + } + to { + top: 200px; + background-color: blue; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/aviva elias/style.css b/01-HTML-CSS/06-animations/followup/aviva elias/style.css new file mode 100644 index 000000000..e110938cc --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/aviva elias/style.css @@ -0,0 +1,40 @@ +body { + margin: 0; +} + +.box { + background-color: red; + width: 200px; + height: 200px; + position: relative; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 2s; + animation-delay: 2s; +} + +@-webkit-keyframes example { + from { + top: 0; + background-color: yellow; + } + to { + top: 200px; + background-color: blue; + } +} + +@keyframes example { + from { + top: 0; + background-color: yellow; + } + to { + top: 200px; + background-color: blue; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/aviva elias/style.css.map b/01-HTML-CSS/06-animations/followup/aviva elias/style.css.map new file mode 100644 index 000000000..2b0e968a9 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/aviva elias/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACF,+BAAA;UAAA,uBAAA;EACA,8BAAA;UAAA,sBAAA;EACE,iCAAA;UAAA,yBAAA;EAEA,2BAAA;UAAA,mBAAA;ACAJ;;ADGE;EACE;IACE,MAAA;IAAO,wBAAA;ECCX;EDCE;IACE,UAAA;IAAa,sBAAA;ECEjB;AACF;;ADRE;EACE;IACE,MAAA;IAAO,wBAAA;ECCX;EDCE;IACE,UAAA;IAAa,sBAAA;ECEjB;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/aviva elias/style.scss b/01-HTML-CSS/06-animations/followup/aviva elias/style.scss new file mode 100644 index 000000000..f6e4e2220 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/aviva elias/style.scss @@ -0,0 +1,25 @@ +body{ + margin: 0; +} + +.box { + background-color: red; + width: 200px; + height: 200px; + position: relative; + animation-name: example; + animation-duration: 3s; + animation-fill-mode:both; + + animation-delay: 2s; + } + + @keyframes example { + from { + top: 0;background-color: yellow; + } + to { + top: 200px; background-color: blue; + } + + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/grop100/dist/style.css b/01-HTML-CSS/06-animations/followup/grop100/dist/style.css new file mode 100644 index 000000000..cea9aff1e --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/grop100/dist/style.css @@ -0,0 +1,35 @@ +* { + margin: 0px; + padding: 0px; +} + +.main { + border: 1px solid red; + width: 1000px; + height: 1000px; + margin: auto; + margin-top: 100px; + display: flex; + gap: 20px; + justify-content: space-evenly; + align-items: center; +} +.main__ball { + width: 100px; + height: 100px; + border-radius: 100%; + background-color: aqua; + animation-name: ball; + animation-duration: 2s; +} +@keyframes ball { + 0% { + background-color: green; + } + 50% { + background-color: yellow; + } + 100% { + background-color: grey; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/grop100/index.html b/01-HTML-CSS/06-animations/followup/grop100/index.html new file mode 100644 index 000000000..2374a6ebb --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/grop100/index.html @@ -0,0 +1,33 @@ + + + + + + + Document + + + + +
+ + +
+
+
+
+
+ + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/grop100/style.css b/01-HTML-CSS/06-animations/followup/grop100/style.css new file mode 100644 index 000000000..b78da5d3e --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/grop100/style.css @@ -0,0 +1,48 @@ +* { + margin: 0px; + padding: 0px; +} + +.main { + border: 1px solid red; + width: 1000px; + height: 1000px; + margin: auto; + margin-top: 100px; + display: flex; + gap: 20px; + justify-content: space-evenly; + align-items: center; +} +.main__ball { + width: 100px; + height: 100px; + border-radius: 100%; + background-color: aqua; + -webkit-animation-name: ball; + animation-name: ball; + -webkit-animation-duration: 2s; + animation-duration: 2s; +} +@-webkit-keyframes ball { + 0% { + background-color: green; + } + 50% { + background-color: yellow; + } + 100% { + background-color: grey; + } +} +@keyframes ball { + 0% { + background-color: green; + } + 50% { + background-color: yellow; + } + 100% { + background-color: grey; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/grop100/style.css.map b/01-HTML-CSS/06-animations/followup/grop100/style.css.map new file mode 100644 index 000000000..1ed1eea39 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/grop100/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAGA;EACI,WAAA;EACA,YAAA;ACFJ;;ADOA;EACA,qBAAA;EACA,aAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,aAAA;EACA,SAAA;EACA,6BAAA;EACA,mBAAA;ACJA;ADSA;EAEI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,4BAAA;UAAA,oBAAA;EACA,8BAAA;UAAA,sBAAA;ACRJ;ADWQ;EAEI;IACI,uBAAA;ECVd;EDaU;IAEI,wBAAA;ECZd;EDgBU;IAEI,sBAAA;ECfd;AACF;ADAQ;EAEI;IACI,uBAAA;ECVd;EDaU;IAEI,wBAAA;ECZd;EDgBU;IAEI,sBAAA;ECfd;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/grop100/style.scss b/01-HTML-CSS/06-animations/followup/grop100/style.scss new file mode 100644 index 000000000..170af695b --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/grop100/style.scss @@ -0,0 +1,67 @@ + + + +*{ + margin: 0px; + padding: 0px; +} + + + +.main{ +border: 1px solid red; +width: 1000px; +height: 1000px; +margin: auto; +margin-top: 100px; +display: flex; +gap: 20px; +justify-content: space-evenly; +align-items: center; + + + + +&__ball{ + + width: 100px; + height: 100px; + border-radius: 100%; + background-color: aqua; + animation-name: ball; + animation-duration: 2s; + + .ball1{ + @keyframes ball{ + + 0%{ + background-color: green; + } + + 50%{ + + background-color: yellow; + } + + + 100%{ + + background-color: grey; + } + + } + + } + +} + + + + + + + + + + +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/karin-levi/dist/style.css b/01-HTML-CSS/06-animations/followup/karin-levi/dist/style.css new file mode 100644 index 000000000..b6908aff2 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/karin-levi/dist/style.css @@ -0,0 +1,30 @@ +.circle { + background-color: pink; + border-radius: 300px; + width: 300px; + height: 300px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0% { + background-color: green; + top: 0px; + right: 0px; + } + 50% { + background-color: crimson; + top: 100px; + right: -50px; + } + 100% { + background-color: aqua; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/karin-levi/index.html b/01-HTML-CSS/06-animations/followup/karin-levi/index.html new file mode 100644 index 000000000..648872463 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/karin-levi/index.html @@ -0,0 +1,15 @@ + + + + + + + Animation + + + +
+ +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/karin-levi/style.css b/01-HTML-CSS/06-animations/followup/karin-levi/style.css new file mode 100644 index 000000000..33dc0709a --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/karin-levi/style.css @@ -0,0 +1,53 @@ +.circle { + background-color: pink; + border-radius: 300px; + width: 300px; + height: 300px; + position: relative; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounce { + 0% { + background-color: green; + top: 0px; + right: 0px; + } + 50% { + background-color: crimson; + top: 100px; + right: -50px; + } + 100% { + background-color: aqua; + top: 0px; + right: 0px; + } +} + +@keyframes bounce { + 0% { + background-color: green; + top: 0px; + right: 0px; + } + 50% { + background-color: crimson; + top: 100px; + right: -50px; + } + 100% { + background-color: aqua; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/karin-levi/style.css.map b/01-HTML-CSS/06-animations/followup/karin-levi/style.css.map new file mode 100644 index 000000000..28ff30093 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/karin-levi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,oBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;ACCJ;;ADEA;EAEI;IACI,uBAAA;IACA,QAAA;IACA,UAAA;ECAN;EDGE;IACI,yBAAA;IACA,UAAA;IACA,YAAA;ECDN;EDIE;IACI,sBAAA;IACA,QAAA;IACA,UAAA;ECFN;AACF;;ADhBA;EAEI;IACI,uBAAA;IACA,QAAA;IACA,UAAA;ECAN;EDGE;IACI,yBAAA;IACA,UAAA;IACA,YAAA;ECDN;EDIE;IACI,sBAAA;IACA,QAAA;IACA,UAAA;ECFN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/karin-levi/style.scss b/01-HTML-CSS/06-animations/followup/karin-levi/style.scss new file mode 100644 index 000000000..13491ac3e --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/karin-levi/style.scss @@ -0,0 +1,34 @@ +.circle{ + background-color: pink; + border-radius: 300px; + width: 300px; + height: 300px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce{ + + 0% { + background-color: green; + top: 0px; + right: 0px; + } + + 50% { + background-color: crimson; + top: 100px; + right: -50px; + } + + 100% { + background-color: aqua; + top: 0px; + right: 0px; + + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/noa-meillet/dist/style.css b/01-HTML-CSS/06-animations/followup/noa-meillet/dist/style.css new file mode 100644 index 000000000..ee2e93947 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/noa-meillet/dist/style.css @@ -0,0 +1,34 @@ +.circle { + margin: 10px; + width: 200px; + height: 200px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + animation-name: bounce; + position: relative; + animation-duration: 2s; + animation-iteration-count: 5; + animation-delay: 1.5s; +} + +@keyframes bounce { + 0% { + top: 0; + } + 20% { + top: 50px; + } + 40% { + top: 20px; + } + 60% { + top: 50px; + } + 80% { + top: 0; + } + 100% { + top: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/noa-meillet/index.html b/01-HTML-CSS/06-animations/followup/noa-meillet/index.html new file mode 100644 index 000000000..95ea72b7e --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/noa-meillet/index.html @@ -0,0 +1,15 @@ + + + + + + + Exercise-Animation + + + +
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/noa-meillet/style.css b/01-HTML-CSS/06-animations/followup/noa-meillet/style.css new file mode 100644 index 000000000..e05422da8 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/noa-meillet/style.css @@ -0,0 +1,59 @@ +.circle { + margin: 10px; + width: 200px; + height: 200px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + -webkit-animation-name: bounce; + animation-name: bounce; + position: relative; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: 5; + animation-iteration-count: 5; + -webkit-animation-delay: 1.5s; + animation-delay: 1.5s; +} + +@-webkit-keyframes bounce { + 0% { + top: 0; + } + 20% { + top: 50px; + } + 40% { + top: 20px; + } + 60% { + top: 50px; + } + 80% { + top: 0; + } + 100% { + top: 0; + } +} + +@keyframes bounce { + 0% { + top: 0; + } + 20% { + top: 50px; + } + 40% { + top: 20px; + } + 60% { + top: 50px; + } + 80% { + top: 0; + } + 100% { + top: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/noa-meillet/style.css.map b/01-HTML-CSS/06-animations/followup/noa-meillet/style.css.map new file mode 100644 index 000000000..bab41fd4a --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,wBAAA;EACA,uBAAA;EACA,mBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,oCAAA;UAAA,4BAAA;EACA,6BAAA;UAAA,qBAAA;ACCJ;;ADEA;EACI;IACI,MAAA;ECCN;EDEE;IACI,SAAA;ECAN;EDGE;IACI,SAAA;ECDN;EDIE;IACI,SAAA;ECFN;EDKE;IACI,MAAA;ECHN;EDME;IACI,MAAA;ECJN;AACF;;ADnBA;EACI;IACI,MAAA;ECCN;EDEE;IACI,SAAA;ECAN;EDGE;IACI,SAAA;ECDN;EDIE;IACI,SAAA;ECFN;EDKE;IACI,MAAA;ECHN;EDME;IACI,MAAA;ECJN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/noa-meillet/style.scss b/01-HTML-CSS/06-animations/followup/noa-meillet/style.scss new file mode 100644 index 000000000..0770cb453 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/noa-meillet/style.scss @@ -0,0 +1,39 @@ +.circle{ + margin: 10px; + width: 200px; + height: 200px; + background-color: orange; + border: 3px solid black; + border-radius: 100%; + animation-name: bounce; + position: relative; + animation-duration: 2s; + animation-iteration-count: 5; + animation-delay: 1.5s; +} + +@keyframes bounce{ + 0%{ + top: 0; + } + + 20%{ + top: 50px; + } + + 40%{ + top: 20px; + } + + 60%{ + top: 50px; + } + + 80%{ + top: 0; + } + + 100%{ + top: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shalom copperman/dist/style.css b/01-HTML-CSS/06-animations/followup/shalom copperman/dist/style.css new file mode 100644 index 000000000..201e2fe3f --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shalom copperman/dist/style.css @@ -0,0 +1,24 @@ +.circle { + background-color: green; + border-radius: 100%; + width: 200px; + height: 200px; + position: relative; + animation-name: go-right; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes go-right { + 0% { + top: 0px; + left: 200px; + } + 50% { + top: 100px; + } + 100% { + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shalom copperman/index.html b/01-HTML-CSS/06-animations/followup/shalom copperman/index.html new file mode 100644 index 000000000..c153a0263 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shalom copperman/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shalom copperman/style.css b/01-HTML-CSS/06-animations/followup/shalom copperman/style.css new file mode 100644 index 000000000..75768800d --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shalom copperman/style.css @@ -0,0 +1,41 @@ +.circle { + background-color: green; + border-radius: 100%; + width: 200px; + height: 200px; + position: relative; + -webkit-animation-name: go-right; + animation-name: go-right; + -webkit-animation-duration: 5s; + animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes go-right { + 0% { + top: 0px; + left: 200px; + } + 50% { + top: 100px; + } + 100% { + top: 0px; + } +} + +@keyframes go-right { + 0% { + top: 0px; + left: 200px; + } + 50% { + top: 100px; + } + 100% { + top: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shalom copperman/style.css.map b/01-HTML-CSS/06-animations/followup/shalom copperman/style.css.map new file mode 100644 index 000000000..2e57ce04a --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shalom copperman/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EAEA,gCAAA;UAAA,wBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;ACAJ;;ADIA;EACI;IACI,QAAA;IACA,WAAA;ECDN;EDGE;IACI,UAAA;ECDN;EDGE;IACI,QAAA;ECDN;AACF;;ADTA;EACI;IACI,QAAA;IACA,WAAA;ECDN;EDGE;IACI,UAAA;ECDN;EDGE;IACI,QAAA;ECDN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shalom copperman/style.scss b/01-HTML-CSS/06-animations/followup/shalom copperman/style.scss new file mode 100644 index 000000000..b40da114d --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shalom copperman/style.scss @@ -0,0 +1,27 @@ +.circle { + background-color: green; + border-radius:100%; + width: 200px; + height: 200px; + position:relative; + + animation-name: go-right; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + +} + +@keyframes go-right { + 0% { + top: 0px; + left: 200px; + } + 50% { + top: 100px; + } + 100% { + top: 0px; + } + +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shlomi.samai/dist/style.css b/01-HTML-CSS/06-animations/followup/shlomi.samai/dist/style.css new file mode 100644 index 000000000..cb3ace8ac --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shlomi.samai/dist/style.css @@ -0,0 +1,31 @@ +.body { + margin: 0%; +} + +@keyframes first_animation { + from { + background-color: blue; + } + to { + background-color: red; + } +} +.circle { + background-color: blue; + border-radius: 100px; + width: 100px; + height: 100px; + animation-name: bounce; + animation-duration: 2s; + animation-iteration-count: infinite; + position: relative; +} + +@keyframes bounce { + 0% { + left: 100px; + } + 50% { + left: 100px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shlomi.samai/index.html b/01-HTML-CSS/06-animations/followup/shlomi.samai/index.html new file mode 100644 index 000000000..0567a76ec --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shlomi.samai/index.html @@ -0,0 +1,17 @@ + + + + + + + + Document + + + +
+ +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shlomi.samai/style.css b/01-HTML-CSS/06-animations/followup/shlomi.samai/style.css new file mode 100644 index 000000000..8abdb6d10 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shlomi.samai/style.css @@ -0,0 +1,52 @@ +.body { + margin: 0%; +} + +@-webkit-keyframes first_animation { + from { + background-color: blue; + } + to { + background-color: red; + } +} + +@keyframes first_animation { + from { + background-color: blue; + } + to { + background-color: red; + } +} +.circle { + background-color: blue; + border-radius: 100px; + width: 100px; + height: 100px; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; +} + +@-webkit-keyframes bounce { + 0% { + left: 100px; + } + 50% { + left: 100px; + } +} + +@keyframes bounce { + 0% { + left: 100px; + } + 50% { + left: 100px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shlomi.samai/style.css.map b/01-HTML-CSS/06-animations/followup/shlomi.samai/style.css.map new file mode 100644 index 000000000..c648edc08 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shlomi.samai/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ;;ADEA;EACI;IAAM,sBAAA;ECER;EDDE;IAAI,qBAAA;ECIN;AACF;;ADPA;EACI;IAAM,sBAAA;ECER;EDDE;IAAI,qBAAA;ECIN;AACF;ADDA;EACG,sBAAA;EACA,oBAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,kBAAA;ACGH;;ADAA;EAGQ;IACI,WAAA;ECCV;EDGM;IACI,WAAA;ECDV;AACF;;ADTA;EAGQ;IACI,WAAA;ECCV;EDGM;IACI,WAAA;ECDV;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/shlomi.samai/style.scss b/01-HTML-CSS/06-animations/followup/shlomi.samai/style.scss new file mode 100644 index 000000000..46f7f2435 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/shlomi.samai/style.scss @@ -0,0 +1,35 @@ +.body { + margin: 0%; +} + +@keyframes first_animation { + from {background-color: blue;} + to {background-color: red;} + +} + +.circle { + background-color: blue; + border-radius: 100px; + width: 100px; + height: 100px; + animation-name:bounce; + animation-duration: 2s; + animation-iteration-count: infinite; + position: relative; +} + +@keyframes bounce { + + + 0% { + left: 100px; + + } + + 50% { + left: 100px; + } + +} + diff --git a/Ayala Perlovich/dist/style.css b/01-HTML-CSS/06-animations/followup/start.md similarity index 100% rename from Ayala Perlovich/dist/style.css rename to 01-HTML-CSS/06-animations/followup/start.md diff --git a/01-HTML-CSS/06-animations/followup/tomer-cohen/dist/style.css b/01-HTML-CSS/06-animations/followup/tomer-cohen/dist/style.css new file mode 100644 index 000000000..63dccef68 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/tomer-cohen/dist/style.css @@ -0,0 +1,35 @@ +.circle { + background-color: aqua; + border-radius: 100%; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} + +@keyframes bounce { + 0% { + background-color: black; + top: 0px; + right: 0px; + } + 25% { + background-color: yellow; + top: 50px; + right: 0px; + } + 50% { + background-color: blue; + top: 100px; + right: 0px; + } + 100% { + background-color: red; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/tomer-cohen/index.html b/01-HTML-CSS/06-animations/followup/tomer-cohen/index.html new file mode 100644 index 000000000..dd4564127 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/tomer-cohen/index.html @@ -0,0 +1,14 @@ + + + + + + + tomer cohne + + + +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/tomer-cohen/style.css b/01-HTML-CSS/06-animations/followup/tomer-cohen/style.css new file mode 100644 index 000000000..7ed72a8eb --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/tomer-cohen/style.css @@ -0,0 +1,63 @@ +.circle { + background-color: aqua; + border-radius: 100%; + width: 100px; + height: 100px; + position: relative; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@-webkit-keyframes bounce { + 0% { + background-color: black; + top: 0px; + right: 0px; + } + 25% { + background-color: yellow; + top: 50px; + right: 0px; + } + 50% { + background-color: blue; + top: 100px; + right: 0px; + } + 100% { + background-color: red; + top: 0px; + right: 0px; + } +} + +@keyframes bounce { + 0% { + background-color: black; + top: 0px; + right: 0px; + } + 25% { + background-color: yellow; + top: 50px; + right: 0px; + } + 50% { + background-color: blue; + top: 100px; + right: 0px; + } + 100% { + background-color: red; + top: 0px; + right: 0px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/tomer-cohen/style.css.map b/01-HTML-CSS/06-animations/followup/tomer-cohen/style.css.map new file mode 100644 index 000000000..03d1e439c --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/tomer-cohen/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,qCAAA;UAAA,6BAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;ACCJ;;ADCA;EACI;IACI,uBAAA;IACA,QAAA;IACA,UAAA;ECEN;EDAE;IACI,wBAAA;IACA,SAAA;IACA,UAAA;ECEN;EDAE;IACI,sBAAA;IACA,UAAA;IACA,UAAA;ECEN;EDAE;IACI,qBAAA;IACA,QAAA;IACA,UAAA;ECEN;AACF;;ADtBA;EACI;IACI,uBAAA;IACA,QAAA;IACA,UAAA;ECEN;EDAE;IACI,wBAAA;IACA,SAAA;IACA,UAAA;ECEN;EDAE;IACI,sBAAA;IACA,UAAA;IACA,UAAA;ECEN;EDAE;IACI,qBAAA;IACA,QAAA;IACA,UAAA;ECEN;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/tomer-cohen/style.scss b/01-HTML-CSS/06-animations/followup/tomer-cohen/style.scss new file mode 100644 index 000000000..74589822c --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/tomer-cohen/style.scss @@ -0,0 +1,35 @@ +.circle { + background-color: aqua; + border-radius: 100%; + width: 100px; + height: 100px; + position: relative; + animation-name: bounce; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out ; +} +@keyframes bounce{ + 0%{ + background-color: black; + top: 0px; + right: 0px; + } + 25%{ + background-color: yellow; + top: 50px; + right: 0px; + } + 50%{ + background-color: blue; + top: 100px; + right: 0px; + } + 100%{ + background-color: red; + top: 0px; + right: 0px; + } + +} diff --git a/01-HTML-CSS/06-animations/followup/uriel-bargil/dist/style.css b/01-HTML-CSS/06-animations/followup/uriel-bargil/dist/style.css new file mode 100644 index 000000000..31f8ad15f --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/uriel-bargil/dist/style.css @@ -0,0 +1,26 @@ +body { + margin: 0; +} + +/* The element to apply the animation to */ +div { + width: 100px; + height: 100px; + background-color: red; + animation-name: example; + animation-duration: 7s; + animation-iteration-count: infinite; + position: relative; +} +@keyframes example { + 0% { + background-color: red; + left: 400px; + top: 200px; + } + 100% { + background-color: red; + left: 400px; + top: 300px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/uriel-bargil/index.html b/01-HTML-CSS/06-animations/followup/uriel-bargil/index.html new file mode 100644 index 000000000..1168badc4 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/uriel-bargil/index.html @@ -0,0 +1,21 @@ + + + + + + + + Animation + + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/uriel-bargil/style.css b/01-HTML-CSS/06-animations/followup/uriel-bargil/style.css new file mode 100644 index 000000000..656ecd16b --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/uriel-bargil/style.css @@ -0,0 +1,41 @@ +body { + margin: 0; +} + +/* The element to apply the animation to */ +div { + width: 100px; + height: 100px; + background-color: red; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 7s; + animation-duration: 7s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: relative; +} +@-webkit-keyframes example { + 0% { + background-color: red; + left: 400px; + top: 200px; + } + 100% { + background-color: red; + left: 400px; + top: 300px; + } +} +@keyframes example { + 0% { + background-color: red; + left: 400px; + top: 200px; + } + 100% { + background-color: red; + left: 400px; + top: 300px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/uriel-bargil/style.css.map b/01-HTML-CSS/06-animations/followup/uriel-bargil/style.css.map new file mode 100644 index 000000000..424eddd93 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/uriel-bargil/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADIE,0CAAA;AACA;EACE,YAAA;EACA,aAAA;EACA,qBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,kBAAA;ACDJ;ADGI;EACI;IAAM,qBAAA;IAAsB,WAAA;IAAc,UAAA;ECEhD;EDAM;IAAM,qBAAA;IAAsB,WAAA;IAAa,UAAA;ECK/C;AACF;ADTI;EACI;IAAM,qBAAA;IAAsB,WAAA;IAAc,UAAA;ECEhD;EDAM;IAAM,qBAAA;IAAsB,WAAA;IAAa,UAAA;ECK/C;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/uriel-bargil/style.scss b/01-HTML-CSS/06-animations/followup/uriel-bargil/style.scss new file mode 100644 index 000000000..6e54a6d3f --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/uriel-bargil/style.scss @@ -0,0 +1,24 @@ +body { + margin: 0; +} + + + + /* The element to apply the animation to */ + div { + width: 100px; + height: 100px; + background-color: red; + animation-name: example; + animation-duration: 7s; + animation-iteration-count: infinite; + position: relative; + + @keyframes example { + 0% {background-color:red; left: 400px ; top: 200px;} + + 100% {background-color:red; left: 400px; top: 300px;} + + + } + } \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/yovel.p/dist/style.css b/01-HTML-CSS/06-animations/followup/yovel.p/dist/style.css new file mode 100644 index 000000000..f7e1cb3a1 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/yovel.p/dist/style.css @@ -0,0 +1,31 @@ +body { + margin: 0; +} + +.circle { + position: relative; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background-color: red; + border-radius: 50%; + animation-name: bounce; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} +@keyframes bounce { + 0% { + top: 650px; + } + 50% { + left: 200px; + background-color: green; + border: 1px solid black; + border-radius: 0; + } + 100% { + top: 650px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/yovel.p/index.html b/01-HTML-CSS/06-animations/followup/yovel.p/index.html new file mode 100644 index 000000000..c26c91e23 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/yovel.p/index.html @@ -0,0 +1,13 @@ + + + + + + + Animation + + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/yovel.p/style.css b/01-HTML-CSS/06-animations/followup/yovel.p/style.css new file mode 100644 index 000000000..8fbd6f134 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/yovel.p/style.css @@ -0,0 +1,49 @@ +body { + margin: 0; +} + +.circle { + position: relative; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background-color: red; + border-radius: 50%; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-duration: 4s; + animation-duration: 4s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +@-webkit-keyframes bounce { + 0% { + top: 650px; + } + 50% { + left: 200px; + background-color: green; + border: 1px solid black; + border-radius: 0; + } + 100% { + top: 650px; + } +} +@keyframes bounce { + 0% { + top: 650px; + } + 50% { + left: 200px; + background-color: green; + border: 1px solid black; + border-radius: 0; + } + 100% { + top: 650px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/yovel.p/style.css.map b/01-HTML-CSS/06-animations/followup/yovel.p/style.css.map new file mode 100644 index 000000000..9450c56ae --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/yovel.p/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,qBAAA;EACA,kBAAA;EAEA,8BAAA;UAAA,sBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,2CAAA;UAAA,mCAAA;EACA,8CAAA;UAAA,sCAAA;ACAJ;ADEI;EACI;IACI,UAAA;ECAV;EDEM;IACI,WAAA;IACA,uBAAA;IACA,uBAAA;IACA,gBAAA;ECAV;EDEM;IACI,UAAA;ECAV;AACF;ADZI;EACI;IACI,UAAA;ECAV;EDEM;IACI,WAAA;IACA,uBAAA;IACA,uBAAA;IACA,gBAAA;ECAV;EDEM;IACI,UAAA;ECAV;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/06-animations/followup/yovel.p/style.scss b/01-HTML-CSS/06-animations/followup/yovel.p/style.scss new file mode 100644 index 000000000..ddc149360 --- /dev/null +++ b/01-HTML-CSS/06-animations/followup/yovel.p/style.scss @@ -0,0 +1,35 @@ +body{ + margin: 0; + +} +.circle{ + position: relative; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background-color: red; + border-radius: 50%; + // border: 10px solid black; + animation-name: bounce; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + // animation-fill-mode: backwards; + @keyframes bounce { + 0%{ + top: 650px; + } + 50%{ + left: 200px; + background-color: green; + border: 1px solid black; + border-radius: 0; + } + 100%{ + top: 650px; + } + + } + +} diff --git a/01-HTML-CSS/06-animations/info/info.md b/01-HTML-CSS/06-animations/info/info.md new file mode 100644 index 000000000..22b9edeb5 --- /dev/null +++ b/01-HTML-CSS/06-animations/info/info.md @@ -0,0 +1,8 @@ +## W# school ## +https://www.w3schools.com/css/css3_animations.asp + +### w3 school ### + +https://www.w3schools.com/css/css3_animations.asp + + diff --git a/01-HTML-CSS/07-BEM/HW/1-whatsapp.png b/01-HTML-CSS/07-BEM/HW/1-whatsapp.png new file mode 100644 index 000000000..4064e2de3 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/1-whatsapp.png differ diff --git a/01-HTML-CSS/07-BEM/HW/2-instegram.png b/01-HTML-CSS/07-BEM/HW/2-instegram.png new file mode 100644 index 000000000..de19b42ab Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/2-instegram.png differ diff --git a/01-HTML-CSS/07-BEM/HW/3-discord.png b/01-HTML-CSS/07-BEM/HW/3-discord.png new file mode 100644 index 000000000..aee46b415 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/3-discord.png differ diff --git a/01-HTML-CSS/07-BEM/HW/AYALAP/style.css b/01-HTML-CSS/07-BEM/HW/AYALAP/style.css new file mode 100644 index 000000000..320fc2203 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/AYALAP/style.css @@ -0,0 +1,79 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + +.WhatsApp { + background-color: whitesmoke; + color: black; + width: 40%; + height: 839px; + /*align-content: center;*/ + border-radius: 10px; + border: solid 3px black; + margin: 30%; + margin-top: 0; +} +.WhatsApp__img { + width: 40px; + padding-top: 15px; +} +.WhatsApp .header { + display: grid; + grid-template-columns: 80% 10% 10%; + padding-left: 20px; + padding-top: 20px; + padding-bottom: 20px; + color: whitesmoke; + background-color: rgba(4, 175, 143, 0.9882352941); + font-size: large; + font-weight: 500; +} +.WhatsApp .header__logo { + display: grid; + grid-template-columns: 60% 40%; + color: white; +} +.WhatsApp .header__icon { + display: grid; + grid-template-columns: 80% 10% 10%; +} +.WhatsApp .header__icon--search { + color: white; +} +.WhatsApp__nav { + display: grid; + grid-template-columns: 25% 25% 25% 25%; + color: white; + padding-left: 20px; + padding-bottom: 10px; + padding-top: 10px; + background-color: rgba(4, 175, 143, 0.9882352941); + font-size: small; + height: 50px; +} +.WhatsApp .line { + border-bottom: 3px solid whitesmoke; + height: 80px; + display: grid; + grid-template-columns: 18% 72% 10%; + padding-top: 10px; +} +.WhatsApp .line .profil { + height: 50px; + width: 45px; + background-color: rgb(37, 210, 37); + border-radius: 50%; + padding-left: 10%; +} +.WhatsApp .line__Username { + justify-content: center; + height: 90px; + justify-content: space-between; + border: 1px solid wheat; +} +.WhatsApp .line__Username__video { + padding-top: 15px; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/AYALAP/style.css.map b/01-HTML-CSS/07-BEM/HW/AYALAP/style.css.map new file mode 100644 index 000000000..a495feb5a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/AYALAP/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;EACA,mJAAA;ACCJ;;ADKA;EAEI,4BAAA;EACA,YAAA;EACA,UAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,aAAA;ACHJ;ADKI;EACI,WAAA;EACA,iBAAA;ACHR;ADSI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,iBAAA;EACA,oBAAA;EACA,iBAAA;EACA,iDAAA;EACA,gBAAA;EACA,gBAAA;ACPR;ADWQ;EAEI,aAAA;EACA,8BAAA;EAEA,YAAA;ACXZ;ADiBQ;EACI,aAAA;EACA,kCAAA;ACfZ;ADmBY;EACI,YAAA;ACjBhB;AD2BI;EACI,aAAA;EACA,sCAAA;EACA,YAAA;EACA,kBAAA;EACA,oBAAA;EACA,iBAAA;EACA,iDAAA;EACA,gBAAA;EACA,YAAA;ACzBR;AD6BI;EACI,mCAAA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;EACA,iBAAA;AC3BR;AD8BQ;EACI,YAAA;EACA,WAAA;EACA,kCAAA;EACA,kBAAA;EACJ,iBAAA;AC5BR;ADiCQ;EACI,uBAAA;EACA,YAAA;EACA,8BAAA;EACA,uBAAA;AC/BZ;ADkCY;EACI,iBAAA;AChChB","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/discord.css b/01-HTML-CSS/07-BEM/HW/Angela/discord.css new file mode 100644 index 000000000..2f758b60e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/discord.css @@ -0,0 +1,427 @@ +.discord { + width: 80vw; + height: 90vh; + background-color: rgb(39, 39, 39); + margin: auto; + display: grid; + grid-template-columns: repeat(15, 1fr); + grid-template-rows: repeat(10, 1fr); + gap: 0; + padding-top: 2rem; + font-family: cursive; + color: rgb(201, 199, 199); +} +.discord__groups { + background-color: rgb(39, 39, 39); + height: 100%; + grid-row: 1/11; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + justify-content: flex-start; +} +.discord__groups__imgs--pfp { + border-radius: 20%; + margin-top: 0.5rem; + width: 50%; + margin-bottom: 0.5rem; + transition: 250ms ease; +} +.discord__groups__imgs--pfp:hover { + border-radius: 10%; +} +.discord__groups--line { + background-color: rgba(128, 128, 128, 0.645); + height: 0.1rem; + width: 50%; + opacity: 0.5; +} +.discord__groups__imgs { + border-radius: 50%; + margin-top: 1rem; + height: 6%; + width: 50%; + transition: 250ms ease; +} +.discord__groups__imgs:hover { + border-radius: 10%; +} +.discord__groups__imgs--forth { + height: 6%; + width: 50%; + border-radius: 50%; + margin-top: 1rem; + transition: 250ms ease; +} +.discord__groups__imgs--forth:hover { + border-radius: 10%; +} +.discord__groups--icons { + background-color: rgb(84, 84, 84); + border-radius: 50%; + height: 6%; + width: 50%; + margin-top: 1rem; + color: rgb(63, 215, 63); + display: flex; + align-items: center; + justify-content: center; + font-size: x-large; + transition: 250ms ease; +} +.discord__groups--icons:hover { + border-radius: 10%; +} +.discord__navBar { + background-color: rgb(53, 53, 53); + height: 100%; + grid-row: 1/11; + grid-column: 2/5; + display: flex; + flex-flow: column nowrap; + padding-top: 1rem; + box-sizing: border-box; + border-top-left-radius: 3%; +} +.discord__navBar__inputBox { + height: 2rem; + text-align: center; +} +.discord__navBar__inputBox input { + background-color: rgb(39, 39, 39); + border: none; + margin-left: 0.5rem; + width: 80%; + padding-left: 1rem; + color: white; + border-radius: 5%; +} +.discord__navBar__home { + height: 100%; + box-sizing: border-box; + padding-left: 1rem; + margin-top: 1.5rem; +} +.discord__navBar__home--homeIcons { + height: 2.5rem; + font-size: large; +} +.discord__navBar__home--homeIcons m i { + font-size: x-large; + margin-right: 0.5rem; +} +.discord__navBar__home--homeIcons:hover { + background-color: rgb(81, 79, 79); +} +.discord__navBar__dms { + height: 68%; + display: flex; + flex-flow: column nowrap; +} +.discord__navBar__dms--friends { + height: 3rem; + display: flex; + align-items: center; +} +.discord__navBar__dms--friends img { + height: 70%; + border-radius: 50%; + width: 17%; + margin-right: 0.5rem; +} +.discord__navBar__dms--friends .bottom { + background-color: chartreuse; + height: 0.5rem; + width: 0.5rem; + border-radius: 50%; + border: 2px solid black; + position: relative; + right: 6.5rem; + top: 0.5rem; +} +.discord__navBar--bottom { + background-color: rgb(60, 60, 60); + height: 4rem; + box-sizing: border-box; + padding-left: 0.5rem; + display: flex; + align-items: center; +} +.discord__navBar--bottom img { + width: 20%; + border-radius: 50%; +} +.discord__navBar--bottom .online { + background-color: chartreuse; + height: 0.8rem; + width: 0.8rem; + border-radius: 50%; + border: 2px solid black; + position: relative; + top: 1rem; + right: 1rem; +} +.discord__navBar--bottom .fa-microphone { + margin-left: 2.5rem; +} +.discord__navBar--bottom i { + margin-left: 0.5rem; +} +.discord__homeBar { + height: 100%; + grid-row: 1/2; + grid-column: 5/16; + background-color: rgb(53, 53, 53); + display: flex; + align-items: center; + width: 100%; +} +.discord__homeBar--left { + font-size: larger; +} +.discord__homeBar--left i { + font-size: x-large; +} +.discord__homeBar--right { + display: flex; + width: 89%; + justify-content: flex-end; + font-size: x-large; +} +.discord__homeBar--right i { + margin-left: 1.5rem; +} +.discord__liveStage { + height: 100%; + grid-row: 2/11; + grid-column: 5/12; + background-color: rgb(81, 79, 79); + font-size: x-large; + overflow-y: scroll; +} +.discord__liveStage__post { + background-color: rgb(39, 39, 39); + width: 90%; + height: 15rem; + margin: auto; + margin-top: 1rem; + position: relative; +} +.discord__liveStage__post--comPoster { + display: flex; + flex-flow: column wrap; + height: 25%; + width: 30%; + margin-left: 0.5rem; + font-size: small; +} +.discord__liveStage__post--comPoster img { + height: 100%; + width: 30%; + border-radius: 30%; + height: 80%; +} +.discord__liveStage__post--comPoster p { + font-size: xx-small; +} +.discord__liveStage__post--postPic { + height: 8rem; + width: 15rem; + position: absolute; + right: 1rem; + background-image: url("https://preview.redd.it/2v4tp08w9p3a1.jpg?width=640&crop=smart&auto=webp&s=d39e6a9e086e2b13ae727ac964a89dcbc94f51c1"); + background-size: cover; + background-repeat: no-repeat; + background-position: 50%; +} +.discord__liveStage__post__listeners { + height: 8rem; + width: 15rem; + display: flex; + margin-top: 1rem; + flex-flow: row wrap; + font-size: xx-small; +} +.discord__liveStage__post__listeners--pfpName { + height: 3rem; + width: 7rem; + display: flex; + align-items: center; +} +.discord__liveStage__post__listeners--pfpName img { + border-radius: 50%; + height: 50%; + width: 20%; + margin-right: 0.5rem; +} +.discord__liveStage__post__listen { + height: 8rem; + width: 25rem; + display: flex; + margin-top: 1rem; + flex-flow: row wrap; + font-size: xx-small; +} +.discord__liveStage__post__listen--pfpName { + height: 3rem; + width: 7rem; + display: flex; + align-items: center; +} +.discord__liveStage__post__listen--pfpName img { + border-radius: 50%; + height: 50%; + width: 20%; + margin-right: 0.5rem; +} +.discord__liveStage__post--friendInServer { + border-bottom: 1px solid rgba(128, 128, 128, 0.645); + height: 2rem; + width: 100%; + font-size: x-small; + display: flex; + align-items: center; +} +.discord__liveStage__post--friendInServer img { + height: 70%; + width: 5%; + border-radius: 50%; + margin-right: 0.5rem; +} +.discord__activities { + grid-column: 12/16; + grid-row: 2/11; + background-color: rgb(81, 79, 79); + overflow: hidden; +} +.discord__activities--head { + font-size: x-large; + margin-left: 1rem; + margin-top: 1rem; +} +.discord__activities__post { + height: auto; + width: 90%; + background-color: rgb(39, 39, 39); + box-sizing: border-box; + margin: auto; + margin-top: 1rem; + padding: 1rem; + border-radius: 5%; +} +.discord__activities__post__head { + height: 2.5rem; + width: 100%; + display: flex; + align-items: center; + flex-flow: column wrap; +} +.discord__activities__post__head--pfp { + height: 2.5rem; + width: 3rem; +} +.discord__activities__post__head--pfp img { + height: 100%; + border-radius: 50%; +} +.discord__activities__post__head--names { + font-size: smaller; +} +.discord__activities__post__head--names p { + font-size: smaller; + margin-top: 0; +} +.discord__activities__post__headTwo { + height: 2.5rem; + width: 100%; + display: flex; + align-items: center; + flex-flow: column wrap; +} +.discord__activities__post__headTwo--pfp { + height: 2.5rem; + width: 3rem; +} +.discord__activities__post__headTwo--pfp img { + height: 100%; + width: 90%; + border-radius: 50%; +} +.discord__activities__post__headTwo--names { + font-size: smaller; +} +.discord__activities__post__headTwo--names p { + font-size: smaller; + margin-top: 0; +} +.discord__activities__post__content { + height: 15rem; + width: 90%; + border-radius: 10%; + margin-top: 0.3rem; + background-color: rgb(81, 79, 79); + margin: auto; +} +.discord__activities__post__content__head { + height: 2.5rem; + width: 100%; + display: flex; +} +.discord__activities__post__content__head--pfp { + width: 2.5rem; + height: 100%; + margin-left: 0.7rem; +} +.discord__activities__post__content__head--pfp img { + height: 100%; + width: 100%; + border-radius: 50%; +} +.discord__activities__post__content__head--names { + font-size: smaller; + margin-left: 0.5rem; +} +.discord__activities__post__content__head--names p { + font-size: smaller; + margin-top: 0; +} +.discord__activities__post__content--img { + height: 70%; + margin-top: 0.5rem; + background-image: url("https://img.poki.com/cdn-cgi/image/quality=78,width=600,height=600,fit=cover,f=auto/26c6e4e18eeaa62590fccd44ea7812f8.png"); + background-size: cover; + background-position: 1rem; + border-radius: 20%; +} +.discord__activities__post__contentTwo { + height: auto; + width: 90%; + border-radius: 10%; + margin-top: 0.3rem; + background-color: rgb(81, 79, 79); + margin: auto; +} +.discord__activities__post__contentTwo__head { + height: 2.5rem; + width: 100%; + display: flex; +} +.discord__activities__post__contentTwo__head--pfp { + width: 2.5rem; + height: 90%; + margin-left: 0.7rem; +} +.discord__activities__post__contentTwo__head--pfp img { + height: 100%; + width: 100%; + border-radius: 50%; +} +.discord__activities__post__contentTwo__head--names { + font-size: smaller; + margin-left: 0.5rem; +} +.discord__activities__post__contentTwo__head--names p { + font-size: smaller; + margin-top: 0; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/discord.css.map b/01-HTML-CSS/07-BEM/HW/Angela/discord.css.map new file mode 100644 index 000000000..eae63b04c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/discord.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["discord.scss","discord.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,YAAA;EACA,iCAAA;EACA,YAAA;EACA,aAAA;EACA,sCAAA;EACA,mCAAA;EACA,MAAA;EACA,iBAAA;EACA,oBAAA;EACA,yBAAA;ACCJ;ADCI;EACI,iCAAA;EACA,YAAA;EACA,cAAA;EACD,aAAA;EACA,wBAAA;EACA,uBAAA;EACA,mBAAA;EACA,2BAAA;ACCP;ADGO;EACC,kBAAA;EACA,kBAAA;EACA,UAAA;EACA,qBAAA;EACA,sBAAA;ACDR;ADIO;EACC,kBAAA;ACFR;ADKO;EACC,4CAAA;EACA,cAAA;EACA,UAAA;EACA,YAAA;ACHR;ADKO;EACC,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,UAAA;EACA,sBAAA;ACHR;ADKO;EACC,kBAAA;ACHR;ADMQ;EACI,UAAA;EACA,UAAA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;ACJZ;ADMQ;EACI,kBAAA;ACJZ;ADMO;EACC,iCAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,sBAAA;ACJR;ADMO;EACC,kBAAA;ACJR;ADQI;EACI,iCAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,aAAA;EACA,wBAAA;EACA,iBAAA;EACA,sBAAA;EACA,0BAAA;ACNR;ADQQ;EACI,YAAA;EACA,kBAAA;ACNZ;ADSY;EACI,iCAAA;EACA,YAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;ACPhB;ADcO;EACC,YAAA;EACA,sBAAA;EACA,kBAAA;EACA,kBAAA;ACZR;ADcQ;EACI,cAAA;EACA,gBAAA;ACZZ;ADaY;EAGI,kBAAA;EACA,oBAAA;ACbhB;ADgBQ;EACI,iCAAA;ACdZ;ADmBO;EACC,WAAA;EACA,aAAA;EACA,wBAAA;ACjBR;ADmBQ;EACI,YAAA;EACA,aAAA;EACA,mBAAA;ACjBZ;ADmBY;EACI,WAAA;EACA,kBAAA;EACA,UAAA;EACA,oBAAA;ACjBhB;ADoBY;EACI,4BAAA;EACA,cAAA;EACA,aAAA;EACA,kBAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;AClBhB;ADwBO;EACC,iCAAA;EACA,YAAA;EACA,sBAAA;EACA,oBAAA;EACA,aAAA;EACA,mBAAA;ACtBR;ADwBQ;EACI,UAAA;EACA,kBAAA;ACtBZ;ADyBQ;EACI,4BAAA;EACA,cAAA;EACA,aAAA;EACA,kBAAA;EACA,uBAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;ACvBZ;AD0BQ;EACI,mBAAA;ACxBZ;AD0BQ;EACI,mBAAA;ACxBZ;AD6BI;EACI,YAAA;EACA,aAAA;EACA,iBAAA;EACA,iCAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC3BR;AD4BQ;EACI,iBAAA;AC1BZ;AD2BY;EACI,kBAAA;ACzBhB;AD4BS;EACG,aAAA;EACA,UAAA;EACA,yBAAA;EACA,kBAAA;AC1BZ;AD4BY;EACI,mBAAA;AC1BhB;AD+BI;EACI,YAAA;EACA,cAAA;EACA,iBAAA;EACA,iCAAA;EACA,kBAAA;EACA,kBAAA;AC7BR;ADgCQ;EACI,iCAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;AC9BZ;ADgCY;EACI,aAAA;EACA,sBAAA;EACA,WAAA;EACA,UAAA;EAEA,mBAAA;EACA,gBAAA;AC/BhB;ADiCgB;EACI,YAAA;EACA,UAAA;EACA,kBAAA;EACA,WAAA;AC/BpB;ADkCgB;EACI,mBAAA;AChCpB;ADmCY;EACI,YAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,4IAAA;EACA,sBAAA;EACA,4BAAA;EACA,wBAAA;ACjChB;ADmCY;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;EACA,mBAAA;EACA,mBAAA;ACjChB;ADmCgB;EACI,YAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;ACjCpB;ADmCoB;EACI,kBAAA;EACA,WAAA;EACA,UAAA;EACA,oBAAA;ACjCxB;ADqCY;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;EACA,mBAAA;EACA,mBAAA;ACnChB;ADqCgB;EACI,YAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;ACnCpB;ADqCoB;EACI,kBAAA;EACA,WAAA;EACA,UAAA;EACA,oBAAA;ACnCxB;ADuCY;EACI,mDAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;ACrChB;ADuCgB;EACI,WAAA;EACA,SAAA;EACA,kBAAA;EACA,oBAAA;ACrCpB;AD4CI;EACI,kBAAA;EACA,cAAA;EACA,iCAAA;EACA,gBAAA;AC1CR;AD4CQ;EACI,kBAAA;EACA,iBAAA;EACA,gBAAA;AC1CZ;AD6CQ;EACI,YAAA;EACA,UAAA;EACA,iCAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,iBAAA;AC3CZ;AD8CY;EAEI,cAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;AC7ChB;ADgDY;EACI,cAAA;EACA,WAAA;AC9ChB;ADgDgB;EACI,YAAA;EACA,kBAAA;AC9CpB;ADkDY;EACI,kBAAA;AChDhB;ADkDgB;EACI,kBAAA;EACA,aAAA;AChDpB;ADsDQ;EACI,cAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;ACpDZ;ADsDY;EACI,cAAA;EACA,WAAA;ACpDhB;ADsDgB;EACI,YAAA;EACA,UAAA;EACA,kBAAA;ACpDpB;ADuDY;EACI,kBAAA;ACrDhB;ADuDgB;EACI,kBAAA;EACA,aAAA;ACrDpB;ADyDY;EACI,aAAA;EACA,UAAA;EACA,kBAAA;EACA,kBAAA;EACA,iCAAA;EACA,YAAA;ACvDhB;AD0De;EACC,cAAA;EACA,WAAA;EACA,aAAA;ACxDhB;AD2DgB;EACI,aAAA;EACA,YAAA;EACA,mBAAA;ACzDpB;AD2DoB;EACI,YAAA;EACA,WAAA;EACA,kBAAA;ACzDxB;AD4DgB;EACI,kBAAA;EACA,mBAAA;AC1DpB;AD4DoB;EACI,kBAAA;EACA,aAAA;AC1DxB;AD8De;EAEC,WAAA;EACA,kBAAA;EACA,iJAAA;EACA,sBAAA;EACA,yBAAA;EACA,kBAAA;AC7DhB;ADiEY;EACI,YAAA;EACA,UAAA;EACA,kBAAA;EACA,kBAAA;EACA,iCAAA;EACA,YAAA;AC/DhB;ADiEgB;EACI,cAAA;EACA,WAAA;EACA,aAAA;AC/DpB;ADkEoB;EACI,aAAA;EACA,WAAA;EACA,mBAAA;AChExB;ADkEwB;EACI,YAAA;EACA,WAAA;EACA,kBAAA;AChE5B;ADmEoB;EACI,kBAAA;EACA,mBAAA;ACjExB;ADmEwB;EACI,kBAAA;EACA,aAAA;ACjE5B","file":"discord.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/discord.html b/01-HTML-CSS/07-BEM/HW/Angela/discord.html new file mode 100644 index 000000000..04ae2707a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/discord.html @@ -0,0 +1,257 @@ + + + + + + + Discord + + + + + + +
+
+ +
+ + + + + +
+ +
+
+ +
+
+
+
+ +
+
+
+ + Home +
+
+ + Friends +
+
+ + Nitro +
+
+ direct messages +
+ + spicysumrai +
+
+ + eggburger +
+
+ + vikingfinite +
+
+
+ + gothfirethorn +
+ +
+ +
+
+ +
+ teatime + + + + +
+
+
+
+ + Home +
+
+ + + + +
+
+
+

live stages

+
+
+ + Devil may cry +

sever you are in

+
+ Is this the real life? is this just fantasy? +
+
+
+ + DarthPriapismus +
+
+ + alicone +
+
+ + orangepointyhat +
+
+
+
+
+ + you on lifetime +

sever you are in

+
+ Season 4 of you on Netflix ? +
+
+ + Molly +
+
+ + JamesTurner +
+
+ + JiNks +
+
+ + candycane +
+
+ + zombieToTem +
+
+
+
+
+ + vikingfinite +
+
+ + anime soul discord +

sever you are in

+
+ mob psycho 100 season 3 release date +
+
+ + vikingfinite +
+
+ + weakboi +
+
+ + power +
+
+ + kyle +
+ +
+
+
+
+
activities
+
+
+
+ +
+
+ billyboy,hoodieMaster and 2 others +

are in this chat

+
+
+
+
+
+ +
+
+ Friends server +

hangout room

+
+
+
+
+
+ +
+
+
+ +
+
+ delusionalmimik,loremy and 3 other +

are in this chat

+
+
+
+
+
+ +
+
+ Reddit AITA +

video in Session

+
+ +
+
+
+
+
+
+ +
+
+ momo and alberthelaperd and 1 other +

are in this chat

+
+
+
+
+
+ +
+
+ red dead redemption 2 +

play in Session

+
+ +
+
+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/discord.js b/01-HTML-CSS/07-BEM/HW/Angela/discord.js new file mode 100644 index 000000000..df3e66253 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/discord.js @@ -0,0 +1,5 @@ +// function changeColor(){ +// var ddd = document.querySelector("body > div > div.discord__groups") ; +// if (ddd.style.backgroundColor == 'blue'){ddd.style = "background-color:red"} else {ddd.style = "background-color:blue"} + +// } \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/discord.scss b/01-HTML-CSS/07-BEM/HW/Angela/discord.scss new file mode 100644 index 000000000..746fde6ca --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/discord.scss @@ -0,0 +1,504 @@ +.discord{ + width: 80vw; + height: 90vh; + background-color: rgb(39, 39, 39); + margin: auto; + display: grid; + grid-template-columns: repeat(15,1fr); + grid-template-rows: repeat(10,1fr); + gap: 0; + padding-top: 2rem; + font-family:cursive ; + color: rgb(201, 199, 199); + + &__groups{ + background-color: rgb(39, 39, 39); + height: 100%; + grid-row: 1 / 11 ; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + justify-content: flex-start; + + + + &__imgs--pfp{ + border-radius: 20%; + margin-top: 0.5rem; + width: 50%; + margin-bottom: 0.5rem; + transition: 250ms ease ; + } + + &__imgs--pfp:hover{ + border-radius: 10%; + } + + &--line{ + background-color: rgba(128, 128, 128, 0.645); + height: 0.1rem; + width: 50%; + opacity: 0.5; + } + &__imgs{ + border-radius: 50%; + margin-top: 1rem; + height: 6%; + width: 50%; + transition: 250ms ease ; + } + &__imgs:hover{ + border-radius: 10%; + } + + &__imgs--forth{ + height: 6%; + width: 50%; + border-radius: 50%; + margin-top: 1rem; + transition: 250ms ease ; + } + &__imgs--forth:hover{ + border-radius: 10%; + } + &--icons{ + background-color: rgb(84, 84, 84); + border-radius: 50%; + height: 6%; + width: 50%; + margin-top: 1rem; + color:rgb(63, 215, 63); + display: flex; + align-items: center; + justify-content: center; + font-size: x-large; + transition: 250ms ease ; + } + &--icons:hover{ + border-radius: 10%; + } + + } + &__navBar{ + background-color: rgb(53, 53, 53); + height: 100%; + grid-row: 1 / 11 ; + grid-column: 2 /5; + display: flex; + flex-flow: column nowrap; + padding-top: 1rem; + box-sizing: border-box; + border-top-left-radius: 3%; + + &__inputBox{ + height: 2rem; + text-align: center; + + + input{ + background-color: rgb(39, 39, 39); + border: none; + margin-left: 0.5rem; + width: 80%; + padding-left: 1rem; + color: white; + border-radius: 5%; + + } + + } + + + &__home{ + height: 100%; + box-sizing: border-box; + padding-left: 1rem; + margin-top: 1.5rem; + + &--homeIcons{ + height: 2.5rem; + font-size: large; + m + + i{ + font-size: x-large; + margin-right: 0.5rem; + } + } + &--homeIcons:hover{ + background-color: rgb(81, 79, 79); + + } + } + + &__dms{ + height: 68%; + display: flex; + flex-flow: column nowrap; + + &--friends{ + height: 3rem; + display: flex; + align-items: center; + + img{ + height: 70%; + border-radius: 50%; + width: 17%; + margin-right: 0.5rem; + } + + .bottom{ + background-color: chartreuse; + height: 0.5rem; + width: 0.5rem; + border-radius: 50%; + border: 2px solid black; + position: relative; + right: 6.5rem; + top: 0.5rem; + } + } + + } + + &--bottom{ + background-color: rgb(60, 60, 60); + height: 4rem; + box-sizing: border-box; + padding-left: 0.5rem; + display: flex; + align-items: center; + + img{ + width: 20%; + border-radius: 50% + + } + .online{ + background-color: chartreuse; + height: 0.8rem; + width: 0.8rem; + border-radius: 50%; + border: 2px solid black; + position: relative; + top: 1rem; + right: 1rem; + + } + .fa-microphone{ + margin-left: 2.5rem; + } + i{ + margin-left: 0.5rem; + } + + } + } + &__homeBar{ + height: 100%; + grid-row: 1 / 2 ; + grid-column: 5 / 16; + background-color: rgb(53, 53, 53); + display: flex; + align-items: center; + width: 100%; + &--left{ + font-size: larger; + i{ + font-size: x-large; + } + } + &--right{ + display: flex; + width: 89%; + justify-content: flex-end; + font-size: x-large; + + i{ + margin-left: 1.5rem; + } + + } + } + &__liveStage{ + height: 100%; + grid-row: 2 / 11 ; + grid-column: 5 / 12; + background-color: rgb(81, 79, 79); + font-size: x-large; + overflow-y: scroll; + + + &__post{ + background-color: rgb(39, 39, 39); + width: 90%; + height: 15rem; + margin: auto; + margin-top: 1rem; + position: relative; + + &--comPoster{ + display: flex; + flex-flow: column wrap; + height: 25%; + width: 30%; + // background-color: aqua; + margin-left: 0.5rem; + font-size: small; + + img{ + height: 100%; + width: 30%; + border-radius: 30%; + height: 80%; + + } + p{ + font-size: xx-small; + } + } + &--postPic{ + height: 8rem; + width: 15rem; + position: absolute; + right: 1rem; + background-image: url("https://preview.redd.it/2v4tp08w9p3a1.jpg?width=640&crop=smart&auto=webp&s=d39e6a9e086e2b13ae727ac964a89dcbc94f51c1"); + background-size:cover; + background-repeat: no-repeat; + background-position: 50%; + } + &__listeners{ + height:8rem; + width:15rem ; + display: flex; + margin-top: 1rem; + flex-flow: row wrap; + font-size: xx-small; + + &--pfpName{ + height: 3rem; + width: 7rem; + display: flex; + align-items: center; + + img{ + border-radius: 50%; + height: 50%; + width: 20%; + margin-right: 0.5rem; + } + } + } + &__listen{ + height:8rem; + width:25rem ; + display: flex; + margin-top: 1rem; + flex-flow: row wrap; + font-size: xx-small; + + &--pfpName{ + height: 3rem; + width: 7rem; + display: flex; + align-items: center; + + img{ + border-radius: 50%; + height: 50%; + width: 20%; + margin-right: 0.5rem; + } + } + } + &--friendInServer{ + border-bottom: 1px solid rgba(128, 128, 128, 0.645); + height: 2rem; + width: 100%; + font-size: x-small; + display: flex; + align-items: center; + + img{ + height: 70%; + width: 5%; + border-radius: 50%; + margin-right: 0.5rem; + } + } + } + + + } + &__activities{ + grid-column: 12 / 16; + grid-row: 2 / 11; + background-color: rgb(81, 79, 79); + overflow:hidden; + + &--head{ + font-size: x-large; + margin-left: 1rem; + margin-top: 1rem; + } + + &__post{ + height: auto; + width: 90%; + background-color: rgb(39, 39, 39); + box-sizing: border-box; + margin: auto; + margin-top: 1rem; + padding: 1rem; + border-radius: 5%; + + + &__head{ + // background-color: rgb(43, 155, 118); + height: 2.5rem; + width: 100%; + display: flex; + align-items: center; + flex-flow: column wrap; + + + &--pfp{ + height: 2.5rem; + width: 3rem; + + img{ + height: 100%; + border-radius: 50%; + } + } + + &--names{ + font-size: smaller; + + p{ + font-size: smaller; + margin-top: 0; + } + } + + } + + &__headTwo{ + height: 2.5rem; + width: 100%; + display: flex; + align-items: center; + flex-flow: column wrap; + + &--pfp{ + height: 2.5rem; + width: 3rem; + + img{ + height: 100%; + width: 90%; + border-radius: 50%; + } + } + &--names{ + font-size: smaller; + + p{ + font-size: smaller; + margin-top: 0; + } + } + } + &__content{ + height:15rem; + width: 90%; + border-radius: 10%; + margin-top: 0.3rem; + background-color: rgb(81, 79, 79); + margin: auto; + + + &__head{ + height: 2.5rem; + width: 100%; + display: flex; + + + &--pfp{ + width: 2.5rem; + height: 100%; + margin-left: 0.7rem; + + img{ + height: 100%; + width: 100%; + border-radius: 50%; + } + } + &--names{ + font-size: smaller; + margin-left: 0.5rem; + + p{ + font-size: smaller; + margin-top: 0; + } + } + } + &--img{ + // outline: 1px solid white; + height: 70%; + margin-top: 0.5rem; + background-image: url("https://img.poki.com/cdn-cgi/image/quality=78,width=600,height=600,fit=cover,f=auto/26c6e4e18eeaa62590fccd44ea7812f8.png"); + background-size:cover; + background-position: 1rem; + border-radius: 20%; + + } + } + &__contentTwo{ + height:auto; + width: 90%; + border-radius: 10%; + margin-top: 0.3rem; + background-color: rgb(81, 79, 79); + margin: auto; + + &__head{ + height: 2.5rem; + width: 100%; + display: flex; + + + &--pfp{ + width: 2.5rem; + height: 90%; + margin-left: 0.7rem; + + img{ + height: 100%; + width: 100%; + border-radius: 50%; + } + } + &--names{ + font-size: smaller; + margin-left: 0.5rem; + + p{ + font-size: smaller; + margin-top: 0; + } + } + + // + } + } + } + + + } + +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/dist/discord.css b/01-HTML-CSS/07-BEM/HW/Angela/dist/discord.css new file mode 100644 index 000000000..3438faac7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/dist/discord.css @@ -0,0 +1,427 @@ +.discord { + width: 80vw; + height: 90vh; + background-color: #272727; + margin: auto; + display: grid; + grid-template-columns: repeat(15, 1fr); + grid-template-rows: repeat(10, 1fr); + gap: 0; + padding-top: 2rem; + font-family: cursive; + color: #c9c7c7; +} +.discord__groups { + background-color: #272727; + height: 100%; + grid-row: 1/11; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + justify-content: flex-start; +} +.discord__groups__imgs--pfp { + border-radius: 20%; + margin-top: 0.5rem; + width: 50%; + margin-bottom: 0.5rem; + transition: 250ms ease; +} +.discord__groups__imgs--pfp:hover { + border-radius: 10%; +} +.discord__groups--line { + background-color: rgba(128, 128, 128, 0.645); + height: 0.1rem; + width: 50%; + opacity: 0.5; +} +.discord__groups__imgs { + border-radius: 50%; + margin-top: 1rem; + height: 6%; + width: 50%; + transition: 250ms ease; +} +.discord__groups__imgs:hover { + border-radius: 10%; +} +.discord__groups__imgs--forth { + height: 6%; + width: 50%; + border-radius: 50%; + margin-top: 1rem; + transition: 250ms ease; +} +.discord__groups__imgs--forth:hover { + border-radius: 10%; +} +.discord__groups--icons { + background-color: #545454; + border-radius: 50%; + height: 6%; + width: 50%; + margin-top: 1rem; + color: #3fd73f; + display: flex; + align-items: center; + justify-content: center; + font-size: x-large; + transition: 250ms ease; +} +.discord__groups--icons:hover { + border-radius: 10%; +} +.discord__navBar { + background-color: #353535; + height: 100%; + grid-row: 1/11; + grid-column: 2/5; + display: flex; + flex-flow: column nowrap; + padding-top: 1rem; + box-sizing: border-box; + border-top-left-radius: 3%; +} +.discord__navBar__inputBox { + height: 2rem; + text-align: center; +} +.discord__navBar__inputBox input { + background-color: #272727; + border: none; + margin-left: 0.5rem; + width: 80%; + padding-left: 1rem; + color: white; + border-radius: 5%; +} +.discord__navBar__home { + height: 100%; + box-sizing: border-box; + padding-left: 1rem; + margin-top: 1.5rem; +} +.discord__navBar__home--homeIcons { + height: 2.5rem; + font-size: large; +} +.discord__navBar__home--homeIcons m i { + font-size: x-large; + margin-right: 0.5rem; +} +.discord__navBar__home--homeIcons:hover { + background-color: #514f4f; +} +.discord__navBar__dms { + height: 68%; + display: flex; + flex-flow: column nowrap; +} +.discord__navBar__dms--friends { + height: 3rem; + display: flex; + align-items: center; +} +.discord__navBar__dms--friends img { + height: 70%; + border-radius: 50%; + width: 17%; + margin-right: 0.5rem; +} +.discord__navBar__dms--friends .bottom { + background-color: chartreuse; + height: 0.5rem; + width: 0.5rem; + border-radius: 50%; + border: 2px solid black; + position: relative; + right: 6.5rem; + top: 0.5rem; +} +.discord__navBar--bottom { + background-color: #3c3c3c; + height: 4rem; + box-sizing: border-box; + padding-left: 0.5rem; + display: flex; + align-items: center; +} +.discord__navBar--bottom img { + width: 20%; + border-radius: 50%; +} +.discord__navBar--bottom .online { + background-color: chartreuse; + height: 0.8rem; + width: 0.8rem; + border-radius: 50%; + border: 2px solid black; + position: relative; + top: 1rem; + right: 1rem; +} +.discord__navBar--bottom .fa-microphone { + margin-left: 2.5rem; +} +.discord__navBar--bottom i { + margin-left: 0.5rem; +} +.discord__homeBar { + height: 100%; + grid-row: 1/2; + grid-column: 5/16; + background-color: #353535; + display: flex; + align-items: center; + width: 100%; +} +.discord__homeBar--left { + font-size: larger; +} +.discord__homeBar--left i { + font-size: x-large; +} +.discord__homeBar--right { + display: flex; + width: 89%; + justify-content: flex-end; + font-size: x-large; +} +.discord__homeBar--right i { + margin-left: 1.5rem; +} +.discord__liveStage { + height: 100%; + grid-row: 2/11; + grid-column: 5/12; + background-color: #514f4f; + font-size: x-large; + overflow-y: scroll; +} +.discord__liveStage__post { + background-color: #272727; + width: 90%; + height: 15rem; + margin: auto; + margin-top: 1rem; + position: relative; +} +.discord__liveStage__post--comPoster { + display: flex; + flex-flow: column wrap; + height: 25%; + width: 30%; + margin-left: 0.5rem; + font-size: small; +} +.discord__liveStage__post--comPoster img { + height: 100%; + width: 30%; + border-radius: 30%; + height: 80%; +} +.discord__liveStage__post--comPoster p { + font-size: xx-small; +} +.discord__liveStage__post--postPic { + height: 8rem; + width: 15rem; + position: absolute; + right: 1rem; + background-image: url("https://preview.redd.it/2v4tp08w9p3a1.jpg?width=640&crop=smart&auto=webp&s=d39e6a9e086e2b13ae727ac964a89dcbc94f51c1"); + background-size: cover; + background-repeat: no-repeat; + background-position: 50%; +} +.discord__liveStage__post__listeners { + height: 8rem; + width: 15rem; + display: flex; + margin-top: 1rem; + flex-flow: row wrap; + font-size: xx-small; +} +.discord__liveStage__post__listeners--pfpName { + height: 3rem; + width: 7rem; + display: flex; + align-items: center; +} +.discord__liveStage__post__listeners--pfpName img { + border-radius: 50%; + height: 50%; + width: 20%; + margin-right: 0.5rem; +} +.discord__liveStage__post__listen { + height: 8rem; + width: 25rem; + display: flex; + margin-top: 1rem; + flex-flow: row wrap; + font-size: xx-small; +} +.discord__liveStage__post__listen--pfpName { + height: 3rem; + width: 7rem; + display: flex; + align-items: center; +} +.discord__liveStage__post__listen--pfpName img { + border-radius: 50%; + height: 50%; + width: 20%; + margin-right: 0.5rem; +} +.discord__liveStage__post--friendInServer { + border-bottom: 1px solid rgba(128, 128, 128, 0.645); + height: 2rem; + width: 100%; + font-size: x-small; + display: flex; + align-items: center; +} +.discord__liveStage__post--friendInServer img { + height: 70%; + width: 5%; + border-radius: 50%; + margin-right: 0.5rem; +} +.discord__activities { + grid-column: 12/16; + grid-row: 2/11; + background-color: #514f4f; + overflow: hidden; +} +.discord__activities--head { + font-size: x-large; + margin-left: 1rem; + margin-top: 1rem; +} +.discord__activities__post { + height: auto; + width: 90%; + background-color: #272727; + box-sizing: border-box; + margin: auto; + margin-top: 1rem; + padding: 1rem; + border-radius: 5%; +} +.discord__activities__post__head { + height: 2.5rem; + width: 100%; + display: flex; + align-items: center; + flex-flow: column wrap; +} +.discord__activities__post__head--pfp { + height: 2.5rem; + width: 3rem; +} +.discord__activities__post__head--pfp img { + height: 100%; + border-radius: 50%; +} +.discord__activities__post__head--names { + font-size: smaller; +} +.discord__activities__post__head--names p { + font-size: smaller; + margin-top: 0; +} +.discord__activities__post__headTwo { + height: 2.5rem; + width: 100%; + display: flex; + align-items: center; + flex-flow: column wrap; +} +.discord__activities__post__headTwo--pfp { + height: 2.5rem; + width: 3rem; +} +.discord__activities__post__headTwo--pfp img { + height: 100%; + width: 90%; + border-radius: 50%; +} +.discord__activities__post__headTwo--names { + font-size: smaller; +} +.discord__activities__post__headTwo--names p { + font-size: smaller; + margin-top: 0; +} +.discord__activities__post__content { + height: 15rem; + width: 90%; + border-radius: 10%; + margin-top: 0.3rem; + background-color: #514f4f; + margin: auto; +} +.discord__activities__post__content__head { + height: 2.5rem; + width: 100%; + display: flex; +} +.discord__activities__post__content__head--pfp { + width: 2.5rem; + height: 100%; + margin-left: 0.7rem; +} +.discord__activities__post__content__head--pfp img { + height: 100%; + width: 100%; + border-radius: 50%; +} +.discord__activities__post__content__head--names { + font-size: smaller; + margin-left: 0.5rem; +} +.discord__activities__post__content__head--names p { + font-size: smaller; + margin-top: 0; +} +.discord__activities__post__content--img { + height: 70%; + margin-top: 0.5rem; + background-image: url("https://img.poki.com/cdn-cgi/image/quality=78,width=600,height=600,fit=cover,f=auto/26c6e4e18eeaa62590fccd44ea7812f8.png"); + background-size: cover; + background-position: 1rem; + border-radius: 20%; +} +.discord__activities__post__contentTwo { + height: auto; + width: 90%; + border-radius: 10%; + margin-top: 0.3rem; + background-color: #514f4f; + margin: auto; +} +.discord__activities__post__contentTwo__head { + height: 2.5rem; + width: 100%; + display: flex; +} +.discord__activities__post__contentTwo__head--pfp { + width: 2.5rem; + height: 90%; + margin-left: 0.7rem; +} +.discord__activities__post__contentTwo__head--pfp img { + height: 100%; + width: 100%; + border-radius: 50%; +} +.discord__activities__post__contentTwo__head--names { + font-size: smaller; + margin-left: 0.5rem; +} +.discord__activities__post__contentTwo__head--names p { + font-size: smaller; + margin-top: 0; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Angela/dist/discord.dev.js b/01-HTML-CSS/07-BEM/HW/Angela/dist/discord.dev.js new file mode 100644 index 000000000..c7b37be53 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Angela/dist/discord.dev.js @@ -0,0 +1,5 @@ +// function changeColor(){ +// var ddd = document.querySelector("body > div > div.discord__groups") ; +// if (ddd.style.backgroundColor == 'blue'){ddd.style = "background-color:red"} else {ddd.style = "background-color:blue"} +// } +"use strict"; \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/dist/style.css b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/dist/style.css new file mode 100644 index 000000000..09e7e98a3 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/dist/style.css @@ -0,0 +1,235 @@ +@charset "UTF-8"; +body { + margin: 0; +} + +.whatsapp { + width: 99vw; + height: 99vh; + display: flex; + justify-content: space-around; + align-items: center; + background: rgba(255, 255, 255, 0.949); + background: -moz-linear-gradient(180deg, white 70%, #2aa400 70%); + background: -webkit-linear-gradient(180deg, white 70%, #2aa400 70%); + background: linear-gradient(180deg, white 70%, #2aa400 70%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#2aa400", GradientType=1); + /* חלק שני */ +} +.whatsapp__pannel { + width: 40vw; + height: 100%; + background: white; + border-radius: 30px; + border: 5px solid rgba(245, 222, 179, 0.162); + position: relative; +} +.whatsapp__pannel-time { + display: flex; + justify-content: space-between; + background-color: rgba(40, 102, 40, 0.99); + color: white; + font-size: 12px; + padding: 4px 10px; + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.whatsapp__pannel-time-icons { + display: flex; + gap: 10px; +} +.whatsapp__pannel-search { + display: flex; + justify-content: space-between; + background-color: rgba(52, 134, 52, 0.99); + color: white; + padding: 10px; +} +.whatsapp__pannel-search-icons { + display: flex; + gap: 15px; +} +.whatsapp__pannel-tabs { + display: flex; + justify-content: space-between; + background-color: rgba(52, 134, 52, 0.99); + color: white; +} +.whatsapp__pannel-tab { + opacity: 0.7; + text-align: center; + color: white; + text-decoration: none; + text-transform: uppercase; + font-size: 12px; + padding: 10px 35px; +} +.whatsapp__pannel-tab--active { + opacity: 1; + border-bottom: 3px solid white; +} +.whatsapp__pannel-tab:hover { + opacity: 1; +} +.whatsapp__pannel-calls { + position: relative; +} +.whatsapp__pannel-call { + display: flex; + gap: 7px; + padding: 15px 20px; + align-items: center; + border-bottom: 1px solid #c0c0c045; +} +.whatsapp__pannel-call:last-of-type { + border-bottom: none; +} +.whatsapp__pannel-profil { + display: block; + width: 40px; + height: 40px; + background: green; + border-radius: 50%; + background-color: #217424; +} +.whatsapp__pannel-username { + display: flex; + flex-direction: column; + gap: 2px; +} +.whatsapp__pannel-username-name { + margin: 0; + font-weight: bold; +} +.whatsapp__pannel-username-time { + margin: 0; + font-size: 12px; + color: #828181; +} +.whatsapp__pannel-facetime { + margin-left: auto; + color: #010f2f; +} +.whatsapp__pannel-search-call { + position: absolute; + bottom: 10px; + right: 10px; + padding: 10px 10px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; + background: green; + color: white; + border-radius: 50%; + font-size: 20px; + padding: 15px; + box-shadow: 0px 2px 10px #919191; +} +.whatsapp__pannel-search-call-icon { + display: flex; + gap: 4px; + padding: 1px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; +} +.whatsapp__pannel-logo { + display: flex; + justify-content: flex-start; + align-items: center; + background-color: #217424; + color: white; + padding: 10px; +} +.whatsapp__pannel-logo-icons { + display: flex; + gap: 30px; + justify-content: right; + margin-left: auto; +} +.whatsapp__pannel-profile { + background-color: rgba(2, 255, 2, 0.707); + display: flex; + flex-direction: column; + display: block; + background-color: silver; + width: 40px; + height: 40px; + border-radius: 50%; + margin-left: 5px; + margin-right: 10px; +} +.whatsapp__pannel-chat { + display: flex; + flex-direction: column; + gap: 10px; + padding: 15px; + height: 80%; + overflow: auto; +} +.whatsapp__pannel-msg { + display: flex; + font-size: 12px; + margin: 0; +} +.whatsapp__pannel-msg-empty { + width: 100%; +} +.whatsapp__pannel-msg-sent { + min-width: 100px; + background: #cef67ea3; + border-radius: 5px; + padding: 7px; +} +.whatsapp__pannel-msg-recieved { + min-width: 100px; + background: #c0c0c02b; + border-radius: 5px; + padding: 7px; +} +.whatsapp__pannel-search-container { + display: flex; + gap: 15px; +} +.whatsapp__pannel-search-input { + position: relative; + width: 85%; + height: 40px; + display: flex; +} +.whatsapp__pannel-search-input input { + background-color: white; + border-radius: 20px; + border: none; + box-shadow: 0 1px 2px silver; + width: 100%; + line-height: 40px; + outline: none; + padding: 0 70px 0 30px; +} +.whatsapp__pannel-search-input .smile { + position: absolute; + left: 7px; + top: 12px; + color: #848484; +} +.whatsapp__pannel-search-input .paperclip { + position: absolute; + right: 40px; + top: 12px; + color: #848484; +} +.whatsapp__pannel-search-input .camera { + position: absolute; + right: 10px; + top: 12px; + color: #848484; +} +.whatsapp__pannel-mic-icon { + width: 30px; + height: 30px; + background: #072008; + color: white; + line-height: 30px; + border-radius: 50%; + text-align: center; + padding: 7px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/index.html b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/index.html new file mode 100644 index 000000000..18ac65960 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/index.html @@ -0,0 +1,257 @@ + + + + + + + + whatsapp + + + + + + +
+ +
+ +
+ 12:33 + + + + +
+ +
+ WhatsApp + + + + +
+ +
+ + + + chats + status + calls +
+ +
+
+
+
+

Username 01

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 02

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 03

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 04

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 05

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 06

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 07

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 08

+

Yesterday, 3:20 pm

+
+
+ +
+
+ +
+
+
+

Username 09

+

Yesterday, 3:20 pm

+
+
+ +
+
+
+ +
+ +
+ +
+ + +
+ +
+ 12:33 + + + + +
+ + + +
+
+ + Lorem, ipsum. +
+
+ + Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Voluptatibus, dolore! +
+
+ Lorem ipsum dolor sit amet, consectetur + adipisicing. + +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Facere quidem, fugit error maxime minus vitae dicta ullam placeat veritatis eos. + +
+
+ + Lorem ipsum dolor sit amet. +
+
+ + Lorem, ipsum dolor.isicing elit. Voluptatibus, + dolore! +
+
+ Lorem, ipsum. + +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Facere quidem, fugit error maxime minus vitae dicta ullam placeat veritatis eos. + +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Facere quidem, fugit error maxime minus vitae dicta ullam placeat veritatis eos. + +
+
+ + Lorem, ipsum. +
+
+ + Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Voluptatibus, dolore! +
+
+ Lorem, ipsum. + +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Facere quidem, fugit error maxime minus vitae dicta ullam placeat veritatis eos. + +
+
+ +
+
+ + + + +
+
+ +
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/style.css b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/style.css new file mode 100644 index 000000000..52f6f1de9 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/style.css @@ -0,0 +1,233 @@ +@charset "UTF-8"; +body { + margin: 0; +} + +.whatsapp { + width: 99vw; + height: 99vh; + display: flex; + justify-content: space-around; + align-items: center; + background: rgba(255, 255, 255, 0.949); + background: linear-gradient(180deg, rgb(255, 255, 255) 70%, rgb(42, 164, 0) 70%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#2aa400", GradientType=1); + /* חלק שני */ +} +.whatsapp__pannel { + width: 40vw; + height: 100%; + background: white; + border-radius: 30px; + border: 5px solid rgba(245, 222, 179, 0.162); + position: relative; +} +.whatsapp__pannel-time { + display: flex; + justify-content: space-between; + background-color: rgba(40, 102, 40, 0.99); + color: white; + font-size: 12px; + padding: 4px 10px; + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.whatsapp__pannel-time-icons { + display: flex; + gap: 10px; +} +.whatsapp__pannel-search { + display: flex; + justify-content: space-between; + background-color: rgba(52, 134, 52, 0.99); + color: white; + padding: 10px; +} +.whatsapp__pannel-search-icons { + display: flex; + gap: 15px; +} +.whatsapp__pannel-tabs { + display: flex; + justify-content: space-between; + background-color: rgba(52, 134, 52, 0.99); + color: white; +} +.whatsapp__pannel-tab { + opacity: 0.7; + text-align: center; + color: white; + text-decoration: none; + text-transform: uppercase; + font-size: 12px; + padding: 10px 35px; +} +.whatsapp__pannel-tab--active { + opacity: 1; + border-bottom: 3px solid white; +} +.whatsapp__pannel-tab:hover { + opacity: 1; +} +.whatsapp__pannel-calls { + position: relative; +} +.whatsapp__pannel-call { + display: flex; + gap: 7px; + padding: 15px 20px; + align-items: center; + border-bottom: 1px solid rgba(192, 192, 192, 0.2705882353); +} +.whatsapp__pannel-call:last-of-type { + border-bottom: none; +} +.whatsapp__pannel-profil { + display: block; + width: 40px; + height: 40px; + background: green; + border-radius: 50%; + background-color: #217424; +} +.whatsapp__pannel-username { + display: flex; + flex-direction: column; + gap: 2px; +} +.whatsapp__pannel-username-name { + margin: 0; + font-weight: bold; +} +.whatsapp__pannel-username-time { + margin: 0; + font-size: 12px; + color: #828181; +} +.whatsapp__pannel-facetime { + margin-left: auto; + color: #010f2f; +} +.whatsapp__pannel-search-call { + position: absolute; + bottom: 10px; + right: 10px; + padding: 10px 10px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; + background: green; + color: white; + border-radius: 50%; + font-size: 20px; + padding: 15px; + box-shadow: 0px 2px 10px #919191; +} +.whatsapp__pannel-search-call-icon { + display: flex; + gap: 4px; + padding: 1px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; +} +.whatsapp__pannel-logo { + display: flex; + justify-content: flex-start; + align-items: center; + background-color: #217424; + color: white; + padding: 10px; +} +.whatsapp__pannel-logo-icons { + display: flex; + gap: 30px; + justify-content: right; + margin-left: auto; +} +.whatsapp__pannel-profile { + background-color: rgba(2, 255, 2, 0.707); + display: flex; + flex-direction: column; + display: block; + background-color: silver; + width: 40px; + height: 40px; + border-radius: 50%; + margin-left: 5px; + margin-right: 10px; +} +.whatsapp__pannel-chat { + display: flex; + flex-direction: column; + gap: 10px; + padding: 15px; + height: 80%; + overflow: auto; +} +.whatsapp__pannel-msg { + display: flex; + font-size: 12px; + margin: 0; +} +.whatsapp__pannel-msg-empty { + width: 100%; +} +.whatsapp__pannel-msg-sent { + min-width: 100px; + background: rgba(206, 246, 126, 0.6392156863); + border-radius: 5px; + padding: 7px; +} +.whatsapp__pannel-msg-recieved { + min-width: 100px; + background: rgba(192, 192, 192, 0.168627451); + border-radius: 5px; + padding: 7px; +} +.whatsapp__pannel-search-container { + display: flex; + gap: 15px; +} +.whatsapp__pannel-search-input { + position: relative; + width: 85%; + height: 40px; + display: flex; +} +.whatsapp__pannel-search-input input { + background-color: white; + border-radius: 20px; + border: none; + box-shadow: 0 1px 2px silver; + width: 100%; + line-height: 40px; + outline: none; + padding: 0 70px 0 30px; +} +.whatsapp__pannel-search-input .smile { + position: absolute; + left: 7px; + top: 12px; + color: #848484; +} +.whatsapp__pannel-search-input .paperclip { + position: absolute; + right: 40px; + top: 12px; + color: #848484; +} +.whatsapp__pannel-search-input .camera { + position: absolute; + right: 10px; + top: 12px; + color: #848484; +} +.whatsapp__pannel-mic-icon { + width: 30px; + height: 30px; + background: #072008; + color: white; + line-height: 30px; + border-radius: 50%; + text-align: center; + padding: 7px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/style.scss b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/style.scss new file mode 100644 index 000000000..f64e8dc09 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Ayala Perlovich/style.scss @@ -0,0 +1,276 @@ +* {} + +body { + margin: 0; +} + +.whatsapp { + width: 99vw; + height: 99vh; + display: flex; + justify-content: space-around; + align-items: center; + + background: rgba(255, 255, 255, 0.949); + background: -moz-linear-gradient(180deg, rgb(255, 255, 255) 70%, rgba(42, 164, 0, 1) 70%); + background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 70%, rgba(42, 164, 0, 1) 70%); + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 70%, rgba(42, 164, 0, 1) 70%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#2aa400", GradientType=1); + + &__pannel { + width: 40vw; + height: 100%; + background: white; + border-radius: 30px; + border: 5px solid rgba(245, 222, 179, 0.162); + position: relative; + } + + &__pannel-time { + display: flex; + justify-content: space-between; + background-color: rgba(40, 102, 40, 0.99); + color: white; + font-size: 12px; + padding: 4px 10px; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + } + + &__pannel-time-icons { + display: flex; + gap: 10px; + } + + &__pannel-search { + display: flex; + justify-content: space-between; + background-color: rgba(52, 134, 52, 0.99); + color: white; + padding: 10px; + + + } + + &__pannel-search-icons { + display: flex; + gap: 15px; + } + + &__pannel-tabs { + display: flex; + justify-content: space-between; + background-color: rgba(52, 134, 52, 0.99); + color: white; + } + + &__pannel-tab { + opacity: 0.7; + text-align: center; + color: white; + text-decoration: none; + text-transform: uppercase; + font-size: 12px; + padding: 10px 35px; + + &--active { + opacity: 1; + border-bottom: 3px solid white; + } + + &:hover { + opacity: 1; + } + } + + &__pannel-calls { + position: relative; + } + + &__pannel-call { + display: flex; + gap: 7px; + padding: 15px 20px; + align-items: center; + border-bottom: 1px solid #c0c0c045; + + &:last-of-type { + border-bottom: none; + } + } + + &__pannel-profil { + display: block; + width: 40px; + height: 40px; + background: green; + border-radius: 50%; + background-color: #217424; + } + + &__pannel-username { + + display: flex; + flex-direction: column; + gap: 2px; + } + + &__pannel-username-name { + margin: 0; + font-weight: bold; + } + + &__pannel-username-time { + margin: 0; + font-size: 12px; + color: #828181; + } + + &__pannel-facetime { + margin-left: auto; + color: #010f2f; + } + + &__pannel-search-call { + position: absolute; + bottom: 10px; + right: 10px; + padding: 10px 10px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; + background: green; + color: white; + border-radius: 50%; + font-size: 20px; + padding: 15px; + box-shadow: 0px 2px 10px #919191; + } + + &__pannel-search-call-icon { + display: flex; + gap: 4px; + padding: 1px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; + + } + + /* חלק שני */ + + &__pannel-logo { + display: flex; + justify-content: flex-start; + align-items: center; + background-color: #217424; + color: white; + padding: 10px; + } + + &__pannel-logo-icons { + display: flex; + gap: 30px; + justify-content: right; + margin-left: auto; + } + + &__pannel-profile { + background-color: rgba(2, 255, 2, 0.707); + display: flex; + flex-direction: column; + display: block; + background-color: silver; + width: 40px; + height: 40px; + border-radius: 50%; + margin-left: 5px; + margin-right: 10px; + } + + &__pannel-chat { + display: flex; + flex-direction: column; + gap: 10px; + padding: 15px; + height: 80%; + overflow: auto; + } + + &__pannel-msg { + display: flex; + font-size: 12px; + margin: 0; + } + + &__pannel-msg-empty { + width: 100%; + } + + &__pannel-msg-sent { + min-width: 100px; + background: #cef67ea3; + border-radius: 5px; + padding: 7px; + } + + &__pannel-msg-recieved { + min-width: 100px; + background: #c0c0c02b; + border-radius: 5px; + padding: 7px; + } + + &__pannel-search-container { + display: flex; + gap: 15px; + } + + &__pannel-search-input { + position: relative; + width: 85%; + height: 40px; + display: flex; + + & input { + background-color: white; + border-radius: 20px; + border: none; + box-shadow: 0 1px 2px silver; + width: 100%; + line-height: 40px; + outline: none; + padding: 0 70px 0 30px; + } + + & .smile { + position: absolute; + left: 7px; + top: 12px; + color: #848484; + } + + & .paperclip { + position: absolute; + right: 40px; + top: 12px; + color: #848484; + } + + & .camera { + position: absolute; + right: 10px; + top: 12px; + color: #848484; + } + } + + &__pannel-mic-icon { + width: 30px; + height: 30px; + background: #072008; + color: white; + line-height: 30px; + border-radius: 50%; + text-align: center; + padding: 7px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/dist/style.css b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/dist/style.css new file mode 100644 index 000000000..e2e996b3f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/dist/style.css @@ -0,0 +1,139 @@ +body { + margin: 0; + background: #2c2f33; + box-sizing: border-box; +} + +.serverBoxWrapper { + background: #23272a; + position: fixed; + top: 0; + bottom: 0; + min-height: 100vh; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +li { + list-style-type: none; +} + +.icons { + background: #45494e; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} + +.icons:hover { + border-radius: 36%; +} + +.purple-bo:hover { + background: #5539cc; +} + +.green-bo:hover { + background: #00ae7a; +} + +.divider { + width: 100%; + background: white; + height: 2px; + border: 1px; + opacity: 0.06; + transform: scale(0.075); +} + +.friendsMenuContainer { + background: #23272a; + top: 0; + bottom: 0; + margin-left: 70px; + min-height: 100vh; + width: 20%; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} +.friendsMenuContainer .searchBox { + text-align: center; + background-color: #23272a; + color: white; +} +.friendsMenuContainer p { + display: inline; + cursor: pointer; + font-size: 16px; + font-family: Verdana; + color: white; +} +.friendsMenuContainer .homeIcon { + display: flex; + flex-direction: row; + display: inline; + cursor: pointer; + color: white; +} +.friendsMenuContainer .friendsIcon { + color: white; + cursor: pointer; +} +.friendsMenuContainer .nitroIcon { + color: white; + cursor: pointer; +} +.friendsMenuContainer .friendsMessages { + color: white; + cursor: pointer; + text-align: center; +} + +.mainPageWrapper { + height: 100vh; + width: 20%; + top: 1%; + left: 30%; + margin-left: 12%; + display: flex; + flex-direction: column; + position: absolute; + gap: 10%; +} +.mainPageWrapper .headerTopFeed { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 20px; + top: 0; + left: 0; + color: white; +} +.mainPageWrapper .post { + width: 40vw; + height: 20%; + cursor: pointer; +} +.mainPageWrapper img { + width: 40px; + height: 40px; + border-radius: 50%; +} +.mainPageWrapper p { + display: inline; + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: white; +} +.mainPageWrapper .postInside { + color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +.mainPageWrapper a { + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/index.html b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/index.html new file mode 100644 index 000000000..957416696 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/index.html @@ -0,0 +1,526 @@ + + + + + + + Discord-clone + + + +
+
+ +
+
+ +
+ + + + +

Home

+
+
+ +

Friends

+
+
+ +

nitro

+
+ + Direct Messgess +
+
+

Live stages

+
+ +

pepeChannel

+

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. S +

+
+
+ Loritta + Memu + LunaBot +
+
+ +

Dragon Ball OV

+

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. S +

+
+
+ Koya + Virtual Fisher + Cricket Guru + TacoShack +
+
+ +

Roblox

+

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Saep +

+
+
+ Groot + Reaction Roles + Lofi Radio + Soul Music + Miner +
+
+ + diff --git a/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.css b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.css new file mode 100644 index 000000000..e2e996b3f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.css @@ -0,0 +1,139 @@ +body { + margin: 0; + background: #2c2f33; + box-sizing: border-box; +} + +.serverBoxWrapper { + background: #23272a; + position: fixed; + top: 0; + bottom: 0; + min-height: 100vh; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +li { + list-style-type: none; +} + +.icons { + background: #45494e; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} + +.icons:hover { + border-radius: 36%; +} + +.purple-bo:hover { + background: #5539cc; +} + +.green-bo:hover { + background: #00ae7a; +} + +.divider { + width: 100%; + background: white; + height: 2px; + border: 1px; + opacity: 0.06; + transform: scale(0.075); +} + +.friendsMenuContainer { + background: #23272a; + top: 0; + bottom: 0; + margin-left: 70px; + min-height: 100vh; + width: 20%; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} +.friendsMenuContainer .searchBox { + text-align: center; + background-color: #23272a; + color: white; +} +.friendsMenuContainer p { + display: inline; + cursor: pointer; + font-size: 16px; + font-family: Verdana; + color: white; +} +.friendsMenuContainer .homeIcon { + display: flex; + flex-direction: row; + display: inline; + cursor: pointer; + color: white; +} +.friendsMenuContainer .friendsIcon { + color: white; + cursor: pointer; +} +.friendsMenuContainer .nitroIcon { + color: white; + cursor: pointer; +} +.friendsMenuContainer .friendsMessages { + color: white; + cursor: pointer; + text-align: center; +} + +.mainPageWrapper { + height: 100vh; + width: 20%; + top: 1%; + left: 30%; + margin-left: 12%; + display: flex; + flex-direction: column; + position: absolute; + gap: 10%; +} +.mainPageWrapper .headerTopFeed { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 20px; + top: 0; + left: 0; + color: white; +} +.mainPageWrapper .post { + width: 40vw; + height: 20%; + cursor: pointer; +} +.mainPageWrapper img { + width: 40px; + height: 40px; + border-radius: 50%; +} +.mainPageWrapper p { + display: inline; + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: white; +} +.mainPageWrapper .postInside { + color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +.mainPageWrapper a { + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.css.map b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.css.map new file mode 100644 index 000000000..5dc532db8 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,mBAAA;EACA,sBAAA;ACCF;;ADCA;EACE,mBAAA;EACA,eAAA;EACA,MAAA;EACA,SAAA;EACA,iBAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;ACEF;;ADAA;EACE,qBAAA;ACGF;;ADDA;EACE,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACIF;;ADFA;EACE,kBAAA;ACKF;;ADHA;EACE,mBAAA;ACMF;;ADJA;EACE,mBAAA;ACOF;;ADLA;EACE,WAAA;EACA,iBAAA;EACA,WAAA;EACA,WAAA;EACA,aAAA;EACA,uBAAA;ACQF;;ADNA;EACI,mBAAA;EACA,MAAA;EACA,SAAA;EACA,iBAAA;EACA,iBAAA;EACA,UAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;ACSJ;ADRI;EACI,kBAAA;EACA,yBAAA;EACA,YAAA;ACUR;ADRI;EACI,eAAA;EACA,eAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACUR;ADRI;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,eAAA;EACA,YAAA;ACUR;ADRI;EACI,YAAA;EACA,eAAA;ACUR;ADRI;EACI,YAAA;EACA,eAAA;ACUR;ADRI;EACI,YAAA;EACA,eAAA;EACA,kBAAA;ACUR;;ADPA;EACI,aAAA;EACA,UAAA;EACA,OAAA;EACA,SAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,QAAA;ACUJ;ADTI;EACI,gDAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;ACWR;ADTI;EACI,WAAA;EACA,WAAA;EACA,eAAA;ACWR;ADTI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;ACWR;ADTI;EACI,eAAA;EACA,gDAAA;EACA,YAAA;ACWR;ADTI;EACI,YAAA;EACA,gDAAA;ACWR;ADTI;EACI,YAAA;ACWR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.scss b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.scss new file mode 100644 index 000000000..efca44149 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itai-G-Discord/style.scss @@ -0,0 +1,131 @@ +body { + margin: 0; + background: #2c2f33; + box-sizing: border-box; +} +.serverBoxWrapper { + background: #23272a; + position: fixed; + top: 0; + bottom: 0; + min-height: 100vh; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} +li { + list-style-type: none; +} +.icons { + background: #45494e; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} +.icons:hover { + border-radius: 36%; +} +.purple-bo:hover { + background: #5539cc; +} +.green-bo:hover { + background: #00ae7a; +} +.divider { + width: 100%; + background: white; + height: 2px; + border: 1px; + opacity: 0.06; + transform: scale(0.075); +} +.friendsMenuContainer{ + background: #23272a; + top: 0; + bottom: 0; + margin-left: 70px; + min-height: 100vh; + width: 20%; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; + .searchBox{ + text-align: center; + background-color: #23272a; + color: white; + } + p{ + display: inline; + cursor: pointer; + font-size: 16px; + font-family: Verdana; + color: white; + } + .homeIcon{ + display: flex; + flex-direction: row; + display: inline; + cursor: pointer; + color: white; + } + .friendsIcon{ + color: white; + cursor: pointer; + } + .nitroIcon{ + color: white; + cursor: pointer; + } + .friendsMessages{ + color: white; + cursor: pointer; + text-align: center; + } +} +.mainPageWrapper{ + height: 100vh; + width: 20%; + top: 1%; + left: 30%; + margin-left: 12%; + display: flex; + flex-direction: column; + position: absolute; + gap: 10%; + .headerTopFeed{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 20px; + top: 0; + left: 0; + color: white; + } + .post{ + width: 40vw; + height: 20%; + cursor: pointer; + } + img{ + width: 40px; + height: 40px; + border-radius: 50%; + } + p{ + display: inline; + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: white; + } + .postInside{ + color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; + } + a{ + color: white; + } +} + diff --git a/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/dist/style.css b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/dist/style.css new file mode 100644 index 000000000..ccd8b8bf1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/dist/style.css @@ -0,0 +1,363 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; +} +.container__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; +} +.container__scroller__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; +} +.container__scroller .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); +} +.container__scroller .green--color:hover { + background-color: green; +} +.container__scroller .purple--color:hover { + background-color: purple; +} +.container__scroller .orange--color:hover { + background-color: orange; +} +.container__scroller .blue--me:hover { + background-color: blue; +} +.container__scroller__apps:hover .popup--me { + opacity: 1; +} +.container__scroller__apps:hover .popup--green { + opacity: 1; +} +.container__scroller__apps:hover .popup--purple { + opacity: 1; +} +.container__scroller__apps:hover .popup--orange { + opacity: 1; +} +.container .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); +} +.container .container__scroller__apps:hover { + border-radius: 25%; +} +.container .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; +} +.container .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .web { + width: inherit; + border-radius: 50%; +} +.container__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; +} +.container__sidebar__friends { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__friends .friends-icon { + width: 20px; + height: 115px; +} +.container__sidebar__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__nitro .nitro-icon { + width: 20px; + height: 115px; +} +.container__sidebar .direct { + font-size: 14px; +} +.container .searchbar { + background-color: #1a1a1a; + color: aliceblue; +} +.container .divider2 { + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; +} +.container__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; +} +.container .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; +} +.container .container__main_items__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + justify-content: center; + font-size: 7px; +} +.container .container__main_items__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; +} +.container .container__main_items .divider3 { + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; +} +.container .container__main_items .container__main_items__post { + display: flex; + flex-direction: columns; + justify-content: center; +} +.container .container__main_items .container__main_items__post .container__main_items__post1 { + position: absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; + background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQREhUSExMWFRUWFRkYFxgWFxgYFhgXGx0ZFhgYGBgYHiggGRslHRcXIjEjJSorLy4uFx8zODMtNyguLisBCgoKDg0OGhAQGi0lHyYuLS0tLi4tLS0yKzAtKy0rLTAtLy0tLSsrMi4tLy0tLS0tLS0tMDUtKysrLS0tKy0tLf/AABEIAJsBRAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQMEBgcBAv/EAEUQAAIAAwQFCAcFBQkBAQAAAAECAAMRBBIhMQUGMlFhExQiQVJxgZEVcpKhscHRByMzU7IXQqLT8DRUYnOCk9Lh8RZj/8QAGwEBAQADAQEBAAAAAAAAAAAAAAECAwQFBgf/xAAxEQACAQIFAQcEAQQDAAAAAAAAAQIDEQQSITFBUQUTImGBofBxkbHBMhVSctEGM0L/2gAMAwEAAhEDEQA/AOYdKYxJJZjiSTiTvJMeLJJrhlnHiORlEqo9Dx7ozMSIyjS91RNZ5AYVMROzAXT5Rash6PiYAOarx84Oarx84mrBWAIearx84Oarx84mrBWAIearx84Oarx84mrBWAE2lJhlMAuRFce8x7ze0ckJ3JMZZDEOFJWiFVdsMlBdRXKppEWsG2vq/MxoNI/aBNnyVR5a8oJU2UXGRSYEWt3tBVYZ0xB6qHFlM28+YApKij1u4Z0N00x3iPXmzVKgoQWAZQVIvKcmFcwd8ONHa5zbPJlyZUtKIF6TlixZZrzwRdK3RVgCMcBnjHk3Xi0sSSJdDLMu6AyihJOBVgy0rQAECgoQamq4sVJVhtTFwsliUZkfo7LICWBxwoAfKF8y2OpIIAINDh1jAxoj9olrLXiJRN52xVji4II2sgDQbqCFGn9YZtt5Plbv3SXFugjo4YYk7veYXFilz9uHlB6Qbh5RTghcWLnpBuHlB6Qbh5RTghcWLnpBuHlB6Qbh5RTghcWLnpBuHlB6Qbh5RTghcWLnpBuHlB6Qbh5RTghcWLnpBuHlB6Qbh5RTghcWLnP24eUM9F/eqxbqNMIQQ+0BsN63yggN30MwW8UN2la1GW+K3NV4+cNpul2ZOTotLt0nGvx3UhfWMiEPNV4+cHNV4+cTVgrAEPNV4+cHNV4+cTVgrAEPNV4+cHNV4+cTVgrAEPNV4+cevYQOphQ0x6jmAfDGJaxPPtV4KppRdnE4ClCM8cgf+sIATTCQSPrBEk/aPh8BBAEtgkljgLzEhVAzLHAAV6ySB4x1xfsqkKPvbeFaWoaeAEol7KhZugMDQsDWnVlHJ9DWvkpstxQmXNlzFByLIyuAeBKiOg6R+0VZpmk2Cznl0RZ18li1ytASALyjqqAfdBlM1rvq21gtDSGa+LomS3pS8jVGIyBqrCnAHrhHZNnxMaLX3Ws2+YszkxKCJyaKDeJFSasaAdeQGG8xnbJs+JgC1zdqXrppStadVaV84sSNGTHUMqihyxA+cfEy11W7dAwUZt1VJzO8/wDsMbFplURUKtVRTClPeYEKnoad2R7S/WD0NO7I9pfrDL08nYf+H6wenk7D/wAP1igVzdFTVBYqKAVPSXLzikIeWnTasjKEapUjGlMRTfCMRAIdYNtfV+ZhVDXWDbX1fmYXJLJyBPcIxZURwRLyDdlvIwcg3ZbyMQpFBEvIN2W8jByDdlvIwBFBEvIN2W8jByDdlvIwBFBEvIN2W8jHy6EZgjvgD4gieVId9lGbuBPwiTmE38t/Yb6RVFvZAqQQ90Hq7OtU0SgpQUJZnUgKBTHicQAOPVnG1H2ayLtOWmXqZ3VpXfd+V6KoM6qGCrV45oLT7HLYI0p1PtJtfNES81cHxEu5nfZjsqAcfLEw2sOoC2qdzeyW+zTpoBLqRMRRTMoxUiYBw4RoqVoU5ZZPX6N+XCe/HU0d3JNprYwkEO9NauWiyTmkTJbXk60BZWBxBVgMQRFBNHzSQOTcVOZVqDvwjdFOSTS0Zg9CnD/V7Yb1vlHxrFq7OsMwS5wFCKo6EmW43o1BWlcjQ5bxDbVbV61TZbFLPMIJqCRdBFOouQD4RpWIpd2qudZXy2kvexcsr5bansWJdjJzw+Me2OX0jXq+MdO1J1IkW2zctNeaGLstEZQKLh1qY6DA5pL0ZMdgktTMY4BV2ieAg0vouZZZrSZq0ZT1VusMgykgVU0wMdF171MkWGQk2U80sZoQ32UihVmqLqgg1URznSsxnmtMc3mc3mJzJOZjDxZrprLbzvfTm9rb/NqVIIIIzIEEEEAEEEEAUJ+0fD4CCC0bR8PgI9gCJEJNBFkS5naH9eEe2IYHvizAovnSmGJx45xasmz4mPudsnuMfFk2fEwIMnsVEvG9W6DsmlSSKV7h7x3QxsOiJby1YlqkVwIA+EIy5yru9woPIRYlW+aoCq5AGQoD8RADv0FK3v7Q/wCMHoKVvf2h/wAYT+k535h8l+kHpSd+YfJfpFA49BSt7+0P+MLdMWBZV0qWxrWpBypuA3xB6UnfmHyX6RFaLU8yl9i1MsvkIgM3rBtr6vzMO5CBVAGAAEJNYNtfV+Zh4mQ7hERT6rBWCCKQIKw90Bq41oHKMwlyq0vE0LUwNy90aVwqesZHGjK06rSVoqzJhIGJLS2x/wBKjCKk2MNfE1nRpK7W74VrKze19dvre1jIVgrDHTOh3srBWoynZcZGmYp1EbvjC6IYUqsKsFODunqmFYpabQGUScwRTzA+cXYp6Y/Bbw+IiS2NhuNDyxLkSlUUHJocN5UEnvJJMW73fFbR/wCDK/ypf6RFiPso6JJGbGtnukhkqMKEGvu4xqdG6LVpHKck80m9W4ygoBTJSemxqcOHdXO2Z7yim7HhGi0LPmyVYlrqEVoRU9/CPje1cVGjHNUk1Z2tfxPfRbNte299r/SVYSWGvSkk3Z6Kyf0Wv16dd2Yv7TbYbDZmkoTy9qbkhTMSVJvEDOrEgeI3Qt+zX7PZ8malstRWWoDDkGW87qylSswZICDlieogRsrDoTlLUbfaRVwLtnlnKSg/eI/NapP+GoGYwdvMJMfHYntioou38pfyb12VlFeUV73a3u/PdF16jnL55+v4sK9cpUtl5YVVxdQAYIVFTSnAV8oyCkxf0xbGnTCK9FSQN24t3mnwiuEuipj9G7KeIwmChDESzVXrl/tzaqL+m7820tEjXSwnfzc1pTW8n0W9vr7cmlSfLWXLW+pVZanpla4YEkHZoeOEc11k1le1T5ypPZ7OrKqBTRDRReJpS+L17OvVSJ9bzWxzu5f1pGK1e2G9b5R4M+xKeDxXeylnlJOWqWjlJttaf6562WjE4nPHJBWXu1xf03HljmUbgcI3mq2u8yxSWkiWjrRmStQRMYrtGuKjpGgFchUZxzwKTWgJoKngMqnhiPOJZdpYddRxjqOI22smuc+3S1lTElKquH6AYGoBXrY4dIxiLVMvNhllBMtDNhXDcI+OTO45Xsjs0re7qCtd0AfMESTLO67SMvVipGNSOsbwR4HdEcAEEEEAEEEEAULRtHw+Aj2PLRtHw+Aj2AJLE2Y8YtQqj6vnefMwBftDUU8RSPmybPiYok1hlo2VeFO+AL8ycly6CCbqjYA6yxxr3eIhxoy2y1lIC6ggYgkA1qeqE3Mf8XuiRdFuRUVI9UxQP/SEv81PaEVdKW2W0pwHUkgUAIJzEKvRL7j7Jg9EvuPsmAF8EXX0eRgTTvEeGwnf7oAyusG2vq/Mw8TIdwhJrEKTANy/Mw7TIdwjFFPqPI9jykULc6naLJdVETYloEugVoFqK06sM+6KtmnS7s+rjlUUEKEaY5Na0VRMQVIyvGmNeowu0drI0xFAuh1UB61JJGF4CowOffGgn2VJfLTFmSmSjTZYLCZfMyZ0OgTUZkEUF0jdHYsNUcItbS2trzza9vyZdkYzEUsJLD4iyyJ5WpWk9W7W2vfXNdaPZu7FOsK8tY5jGvQuupcAOCKdE4tU0LLmdrOOfRqdZNPF5RkAIKkXrguqADeC3cq1APhxjLRz1YOE3F7ro7nLRu5VJ5FBSldRWtlZK+iS8TTlZLRthFPTH4LeHxEXIp6Y/Bbw+IjVLY6EbrR/4Mr/ACpf6RFuWlYqaP8AwZX+VL/SIto9I+vnmyPJvwdFHu+8j3n8b626fNPwQPppLI6PMlgC90QTeYgEBplBgFUVIxqTTAYxuZ2kOTBdiaLif+o5XL1atukq2mVKrLYkIXdE6AwFAxBIzxyrWE2lrVaUvSJ82YTKN1kMxmUMmGVaNQjA8I+G7U7MePrU6kp7aO93dXT04XPTS19kdX9RpRlJQgrcJWX3ty/9LzO9WRuXQugqoNGwxBzoRFfTVo5rJae4KqKgYdYBYm7mQAD8IoWOy2tJTJLIVJpDkh1DUpkDXAEUr3d8ZvXXRlu5qy3ayJYaY55RDdUAFgq3q/u1OHUaZmOGP/GsOquZybjf+Ltr6q2nFrXfU7KuJw9PNJVYNJ6JSTb08n10229DH6V1neZ0ZVZa5V/fPiNnwx4xS0Fa3WcgViQzBWFSQQTQmm8Z14RGlhIlmc+C5IMi7HKn+EZ16wMIa6pWDOcRl0U+DH5ecfWUKc3Vjw9/Tr68HkVsRUryzVHd+y+i4L2tv9jndy/rSMZq9sN63yjaa3f2Od3L+tIxer2w3rfKJ2t/3R/x/bNLNbqvMlI81590yxKWqkirnl5BKqtQXJRZuGVM6YQwmWywqjhFUsEBRuQF5pgaaQPvAwVDelgnotRczsxmpMosaRPNsdBUGtI82xB3O0nZHtU+Y0taO05kmmWzJedryF7MRTogkE41bpUMfVq0xZmlqt0X0kiUGWVcJHNLRJKkg1u8s0igrQAHjWbUbVFNILNZ5rpybKBcANbwY417o0x+yuT1WidXqqqUiAS23WSxzWJcM633ajIxUgzLVMWorj+LKPnujIaWmy3ms0pQqFZfRVboDcnLEyijADlBMOGGMfcrRE1lDAChAO0OvGPi16OeWLzAUrTA1xxPyMUFSCCCBAggggChaNo+HwEex5aNo+HwEewBBBBBEAQ40Lkf664Txfsmz4mKDTzLRVaXaYUwy74s2a1qFANagbjGVrBWKDX89TefIwc9TefIxkKwVgDQ2uaGe8MgBwyxjQ6z62i1yeSEt16atVmByBqKAbznw8I57WCIBJrKfvfA/qMOUyHcIR6wba+r8zFuxaSJUfduxGBKio/6MRblGcEVOen8mb7EHPT+TN9iM8suhC2DTEZxO1rmEULtT1jC3np/Jm+xBzw/lTvYjKLqRvluvuC3BFTnh/KnexBzw/lTvYjHI+gLcU9Mfgt4fER7zw/lTvYihpW3ErcuMlcTeFDTgO/4RjJNLUqOkaP/AAZX+VL/AEiHeiNC85rfryWTdRfegPUCMzuOGOXO9Ea3hZSpMlOzIAtUoQQBQVByNKRp9CfaVJkIyNInmpJFFTCop1ngDH0FTHUnS8MtenPmYVnPJaG/z8bnV7EoHRAAAAAAFAAMAABkAOqOGfaNZrukbUOpnDDudFY+9j5RrpH2vSAatZrRWpyVcj1YtGG151lS3Woz5cmaimWikMBW8tQTgcqXfKPJnVg3oznw9GdOTT+/ub6xa3aQElJy2UNZwqgNyU2hCgAkNeqRhthSucbTQGmJWkZDFRQ0uTEahu3hnXJkIrRuvHIggce1n1tk2zmLqtqkTLGiIbqqykC7Vk6YutVfEU3Rc1d19kWS0zpq2ecJMwzLqKFqoZw6DOnR6QoMgaRujiKdWMlKKi1qmr67aPf0ZlUoaeHcZaT1UacVebNKqgNZapV71caEmlTQDLCIra8qxoiOwU0CpKXpzW6gAo6zvJGJhDrL9otonTH5tLMmWxJBK1mY4neBjWF+i9MSJJMwyp8yc21NYAsd9MeiPfGdHGOVSTckm929dOiXzjpr61SeGssibdtdba/l/RWW+/D7Ws1sU4kEdFMDSo6aYGmFe6MZq9sN63yhhrJrSJ0oyUlsoal4vgaAhqADiBjwhfq9sN63yjT2hWhVqpwd7K3u3+zjY6sk0KccjFubaVAwNT1UilZ5V406uuLM2xilRWvGOMxJ9CWgS733hQmmTslRj2SKwzbSQIoZ7EHMGc9COPSi59n2rNntqzjPZ6oyBQjhcCGJJqDXIRrH+ziw0PSnDDPlVw47MS5Tn6zJIwDKBuDGnxgdpBzZT3tX4mKUjQzMqtfTEA9fWK7oit2jWlKGLKammFa9Z6xwgQv3bP8A/n5xU0kJV0cndrX93dQ/9QuggAggggChaNo+HwEex5aNo+HwEewBBBBBEARfsmz4mKEX7Js+JigmggggAggggAgEEAgBDrBtr6vzMdCsaBEVVFFVRQDu+Mc91h219X5mOiSdkdw+Ee12J/Oo/wDH9mqtsjZTdUGFnExZhacQGuYXTX91euuOZwNOqtRlqnjGt1T1jvBLLNDHELLdRUjshhwptbhjgCYh13sSLPllNuYCXA4EBXp1E9Lvu99ebs/tDG0MdLBY7XNmlCStayu+OLLT+1+F7q2c6UJwUqW+ia83t86amZD8Y+w0aOz6FwGCkkVALUqKDpAUrmev6QvtmjSGC3bjGg3g9Vf/ACPboY1VXazXqvxv+vM1YuNDDPL3qlLlJPT1tZ252fkLKwVj5tziVaOasQZyqXcKahBgFBPaa8DTqFK4mg0+gtWBOlrOdzdNeilAcCQas2Ayyp4xqr9r4WhR7+c/BfKmk3d2bsrb7PXbztqSNKcpZUtTNFuPvhFrnKDWV2IqVKlT1glgp9xjsElLLZASTKTCm1fc51zqxrXIYYRyrX2YjSbQZYuoWBUbhyi07u7qjz8P2x/UaNbLSnGCi7Sla0t9OVdb6N+dnYzlR7px8Sb8jM2RAstAMOiPeKmJaxHZ9hfVX4CJI8g3BWCsEPtW9V5ls6d7k5QNL5FSx6wi4V4k4DjiBJSUVdlhCU3aK1ENYKx0dvs9s9MJs4NvJQjyuD4xjtYNX5ljYB6MjbMxRQHeCP3W4VOGRONNcK0JuyNtXDVKavJaCmsFYII2mgp6YUGS1eqhHDED5xX1e2G9b5Ra0t+C/cP1CKur2w3rfKJyUc2addPAxam2sUwxMUIIpCra5ZdkRcSxugbySFA8zFuw6szptrl2MGWJkwFlYs1y6FaYTULeyRurPhjFe0MyvLdRijBhhXpKQwqO8RZ0fp20SbUlsRVMyWCFDK7SwpRpV2l69S6zfvVqa1ziopq/2SW3+8Wf2p38uD9klt/vNn9qd/LiP9q+kPybN/tTv50H7V9Ifk2b/anfzoniBL+yW2/3mz+1O/lwfsltv95s/tTv5cRftX0h+TZv9qd/Og/avpD8mzf7U7+dDxAzulNDTbFaHs05lZlVWqhYqQ2IIvAH3RBE+k9LzbbaHtE9VV2VVoilVouAADEn3nOIIoKFo2j4fAR7Hlo2j4fAR7EIQQQQRAEX7Js+JihF+ybPiYoJoIIIAIIIIAIBBAIAQ6w7a+r8zHQpOQ7h8I57rDtr6vzMdJ0TaBLmSphFQpUnuFMRxGY4iPZ7F3qfRfs019kbbVrRYsqmdMoJhU1rkiZkd+GJ8N9Ucu3G025ZjYBpigDcowVfrxJjWTgsxCp6SsMcSAQccwa0jLaQ0C0oPNlvglXVcbwA6WB6yKe6OihClKtKtNLPJZb24fH3t8bOCliJWacmunk+q6fOdTTWnRNWe0SJUtrWFQK0w5y1b7xAT+HVGbEUxzrHmnnnLJZrLJE60A/dAlFCk1+8N8gGg6uskdUS6KtonyUmhla8uJWtL2TDHEEGoIOUWJkwDea5AAkn+uMeZiMK6kZ072vo/wB+j2eq05NdOr3cou2sfi+xxjQ+rFustoedarPM+8Vrz3kfpMwYs1GJNaHecY6VqXpGgmSDQg9Na5UwVxT2T5wv07JnTrTcKityqCooE6ySeuufhnhFzQWiDKYvMwcHo0bChFCTTPOlDHWsFB4LuMTKM07NJLLZ3uv/AE/yuVZp2OupirLPF2dut/0U9YND8mTMlj7snED9w/8AHduy3RjNb/7HN/0frWOn6YtQSS5PWpUDeWBAHz8DHL9cP7HN/wBH61jtdSU8JUzcRav18JjhpuVr9RFZ9hfVX4CJIjs+wvqr8BEkfMnoHjmgJ3COt6F5xK5GzNZ0MpRdM+XMuC6FqGMpgTeJwNGOJrHJSI6xqHpcWyWkio5dFAYE7Srhyg3ilK7j3ivPiU2lZXOihFSclncXbRpv3V1frZ9DQBhfuUelwsW/cqCAErSpY1JwGAU1phVDrVZy2j5omXWZL80MECjbLIFH+FKJvIBJzjcFJEjBhyj9eFaeBwX4xg/tN1tl8g1jkqOUcjlKHYQEMVNBgzUApurvFdNOl4rJpNW8/nock8NWVSNStN1I8XTWvDWrS68X5OUwQQR3GZV0t+C/cP1CKur2w3rfKLWlvwX7h+oRV1e2G9b5Q5KOJEq8aecWJtjoKgnxiGyzbpxyMWptqFMDUxSGh1B1SlaQWc015q8myACUUFbwYkm+jbuqnXGpf7K7LQ/e2oYZlpNB3/c5RznQslWDVVTlmAd++GRssv8ALT2F+kQoqkaFmMqsCtGAOZ6xXdEdt0Y8pQzFaE0wJ4nrHCHHNJfYT2V+kHNZfYT2V+kCGagjS80TsL7I+kHNE7C+yPpAGagjS81TsL7I+kZ+1LR2AwAY/GAFdo2j4fAR7Hlo2j4fAR7AEEEEEQBF+ybPiYoRfsmz4mKCaCCCACCCCACAQQCAEOsO2vq/Mxv5RwHcPhGA1g219X5mHNi1qUIomIxYAAlaUNMK40oY9TsrEU6Mp947Xt7X/wBmurFtKx0rV7TYQCVMNFGwxyH+E7huPV3ZPNK29ZMlpjUpSgByZmwVRvqfdXdHIRrfK7Ez+H6xUtesiTJiMRMuS1N1cKB2realaZUEd9athZSzRmt1f9+33ZxSwblK+xvNDaztKnFmVeSegmIgoBTATFWu0BQHtAAdQjotmnrMUOjBlYVDA1B/r3RwH/6WV2X/AIfrFix66GQSZLTpdc7pFD1VK1oTgMSIVnhJ2yVIp+3z7mdehOrJze738zpuudtWVPs7lLzBHIoxVl6SXSCO5xTIioMMpOk0aUs4m6rCuOfEcSCCKDdHGrVrYJjF35R3ObNQnDIVrgOAwiay63y0wKTCP9OHvhnwmVLvVdeb6t6J7fVW8ySw05QjB8X4XPnv97243N9pXSJnNuUbI+Z4/DzjMa3/ANjm/wCj9axQ/wDtpP5cz+H6wr1h1oFol8lLQqCQWLUrgagADjQ14QxGMw3cShCS1TSS81Y3U6Li0ktCWz7C+qvwESQmsmmAqhWU1ApUUxAyzib04nZb3fWPnLnUM49RiCGBIYGoIJBB3gjEHiIV+nE7Le76wenE7Le76wuLGifTlpIum0ziP816nvNamKELPTidlvd9YPTidlvd9Yistitt7jOCFnpxOy3u+sHpxOy3u+sW5Czpb8F+4fqEVdXthvW+UV9IaUExbqqRXMnzwpFjV7Yb1vlEvqBpBBBFIN9BZP3j5w0hXoLJ+8fOGkABMfWiNFNa+UusAyXSoOyb17Coy2Rvj5iFOUQOstiFel6hoSBWgJ3dI9/XAHsoMjNLbNcDiDQjqqCQYliGzSLvf8ImgAjNWz8R/WPxjSxmrZ+I/rH4wAqtG0fD4CPY8tG0fD4CPYAggggiAIv2TZ8TFCL9k2fExQTQQQQAQQQQAQCCAQAh1g219X5mFUNdYNtfV+ZhVGLKggggiFCJ7NIMxro/8EQQ00I2LDrIw+fygCb0QKbZr3CnlCyfZ2RrpGPVTr3UjtWmNatFzNH8hLsn3/JKobkkl3ZgUC/fU1N040/epTIxym3TFE6XXqz4VyjJohFL0WAOm9DuFPnnFW22Iy6GtVORjruousMiTZXs7zTIfljN5QJIN5bqAS1acwxJRhSnWMRjGI150jLtE60TpalUmzbyKwAYDDMAkDI9fXBgz1j0cXF5jdHVvPHgI+7Xou6CVNaZg58Ye6BnSw0p3JCIA2AqxZRVVAyJvADEgZ1IhnrZpUWi0PMDVRSwDGgDdJmLgdQatccTn0a3VWBktA6Ge1OQpuqu0xxpXIAdZO6NHP1GW70JrXqfvKLpy3YjMb8xE/2dT1EphgWWaGK71oKV4dFh4x0TS9tS5N5CYhSfMB5EIysi0DCteitCoWgqDWu67rb1PpMFgKEqEHKGZy5101tbTa2u+9t+nArVZmlO0txRlNCIrxoNc5itanu9QVW9YAV8svCM/FPCxFNU6soJ3SbX2YQQQRTSEP8AV7Yb1vlCCH+r2w3rfKKiMaQQy0Vo4z5iylugtXFsgACzE+AMT6W0OZDILyusxbyMuAIyIIOyQf6zAyIU9HW0Sr1QTWmXCsXPTK9hvMRT5sezu6t9PrBzc53fdFBc9Mr2G8xB6ZXsN5iKZsxw6OcAs57P9UrAFz0yvYbzEHplew3mIptZyOqI7o3QAw9Mr2G8xCmc95mbeSfONJonVZrRK5QTEUsSJalSbxDXMWGyC1Rkcicoz01eEQCq0bR8PgI9jy0bR8PgI9gCCCBs4IAIvWPZ8TFGPoORkaQAzgihyzb4OWbfAF+CKHLNvg5Zt8AX4Iocs2+Dlm3wBQ1g219X5mFUPpiBzVhU064+Oap2RGNiiSCHfNU7Ig5qnZELFEkfaOVIINCIcc1TsiDmqdkQsCn6UmUph30x+kU3Yk1JqTDjmqdkQc1TsiBClJ0k6ilQe+ILRaGc1Y13bhDTmqdkQc1TsiBRbZrY0vZOG45R9Wi3O4oTQbhh5ww5qnZEHNU7IgBfYbY8lw8tirDrG7cQcCOBhxP1wtDLdBROKqL3vrTwivzVOyIOap2REsbqeJq04uMJNJ9GJo+Yd81TsiDmqdkRbGkSQQ75qnZEHNU7IhYCSH+r2w3rfKI+ap2REkroA3cO6CIP7LbGlsroxV1NQRmDEtu0o89r81yzAUGAAAHUAoAA7hCDlm3wcs2+MyDjnPEx6bUaUqYTcs2+Dlm3wA55zxMec44mE/LNvg5Zt8AODaOJj55UQp5Zt8HLNvgDRWXTU2UlxHIXMYKSDn0SRUY44ZHEUOML5j1wELeWbfHw85t5iA+rSekYIiggD//Z); + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post2 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-image: url(https://support.discord.com/hc/article_attachments/115002139771/Sync_Permissions.png); + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post3 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-image: url(https://d1lss44hh2trtw.cloudfront.net/resize?type=webp&url=https%3A%2F%2Fshacknews-www.s3.amazonaws.com%2Fassets%2Farticle%2F2022%2F09%2F14%2Fdiscord-introduces-forum-channels-feature_feature.jpg&width=1032&sign=3BRNU6T2CyNtPchkHIr1ja-Cz5iayCMp8DrJ9tkuJ_g); + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/index.html b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/index.html new file mode 100644 index 000000000..8a3facd8e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/index.html @@ -0,0 +1,202 @@ + + + + + + + Document + + + +
+
+
+ +
+

Direct messages

+
+
+
+
+ +
+

Add a Server

+
+
+
+ +
+

Explore Public Servers

+
+
+
+ +
+

Add a Friends

+
+
+
+ +
+

Web

+
+
+
+ +
+

Download Apps

+
+
+
+
+ +
+
+ +

Friends

+
+
+ +

Nitro

+
+ Direct Messages + +
+ + Grizz0 +
+
+ + Andy +
+
+ + Aaron +
+
+
+

Friends

+

Onlin

+

All

+

pending

+
+

suggestions

+
+

blocked

+
+

Add Friends

+
+
+
+
+
+
+
+
+
+ + + + diff --git a/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.css b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.css new file mode 100644 index 000000000..3a53742b1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.css @@ -0,0 +1,371 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; +} +.container__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; +} +.container__scroller__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; +} +.container__scroller .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); +} +.container__scroller .green--color:hover { + background-color: green; +} +.container__scroller .purple--color:hover { + background-color: purple; +} +.container__scroller .orange--color:hover { + background-color: orange; +} +.container__scroller .blue--me:hover { + background-color: blue; +} +.container__scroller__apps:hover .popup--me { + opacity: 1; +} +.container__scroller__apps:hover .popup--green { + opacity: 1; +} +.container__scroller__apps:hover .popup--purple { + opacity: 1; +} +.container__scroller__apps:hover .popup--orange { + opacity: 1; +} +.container .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); +} +.container .container__scroller__apps:hover { + border-radius: 25%; +} +.container .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; +} +.container .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .web { + width: inherit; + border-radius: 50%; +} +.container__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; +} +.container__sidebar__friends { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__friends .friends-icon { + width: 20px; + height: 115px; +} +.container__sidebar__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__nitro .nitro-icon { + width: 20px; + height: 115px; +} +.container__sidebar .direct { + font-size: 14px; +} +.container .searchbar { + background-color: #1a1a1a; + color: aliceblue; +} +.container .divider2 { + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; +} +.container__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; +} +.container .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; +} +.container .container__main_items__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + justify-content: center; + font-size: 7px; +} +.container .container__main_items__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; +} +.container .container__main_items .divider3 { + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; +} +.container .container__main_items .container__main_items__post { + display: flex; + flex-direction: columns; + justify-content: center; +} +.container .container__main_items .container__main_items__post .container__main_items__post1 { + position: absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post2 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-image: url(https://support.discord.com/hc/article_attachments/115002139771/Sync_Permissions.png); + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post3 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-image: url(https://d1lss44hh2trtw.cloudfront.net/resize?type=webp&url=https%3A%2F%2Fshacknews-www.s3.amazonaws.com%2Fassets%2Farticle%2F2022%2F09%2F14%2Fdiscord-introduces-forum-channels-feature_feature.jpg&width=1032&sign=3BRNU6T2CyNtPchkHIr1ja-Cz5iayCMp8DrJ9tkuJ_g); + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.css.map b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.css.map new file mode 100644 index 000000000..7af2acaa4 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.scss b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.scss new file mode 100644 index 000000000..2ea0b5854 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Itay-Amosi-Discord/style.scss @@ -0,0 +1,382 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; + + &__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; + + &__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; + } + .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); + } + .green--color:hover { + background-color: green; + } + .purple--color:hover { + background-color: purple; + } + .orange--color:hover { + background-color: orange; + } + .blue--me:hover { + background-color: blue; + } + &__apps:hover .popup--me { + opacity: 1; + } + &__apps:hover .popup--green { + opacity: 1; + } + &__apps:hover .popup--purple { + opacity: 1; + } + &__apps:hover .popup--orange { + opacity: 1; + } + } + .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); + } + .container__scroller__apps:hover { + border-radius: 25%; + } + .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; + } + .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .web { + width: inherit; + border-radius: 50%; + } + &__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; + + &__friends { + // border: 2px solid red; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; + + .friends-icon { + width: 20px; + height: 115px; + } + } + // &__friends:hover{ + // // transform: scale(1.2); + // // transition: transform ease-in .2s ; + // cursor: pointer; + // text-align: center; + // } + &__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; + .nitro-icon { + width: 20px; + height: 115px; + } + } + .direct { + font-size: 14px; + } + } + .searchbar { + background-color: #1a1a1a; + color: aliceblue; + } + .divider2 { + // position: absolute; + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; + } + + &__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; + } + .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; + } + &__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; + } + .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; + } + &__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; + } + .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; + } + .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; + &__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + // border: 2px solid red; + justify-content: center; + font-size: 7px; + } + &__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; + } + .divider3 { + + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; + } + .container__main_items__post{ + display: flex; + flex-direction: columns; + justify-content: center; + + .container__main_items__post1 { + position:absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; + background-image: url(data:image/jpeg;base64,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); + background-repeat: no-repeat; + background-size: 100% 100%; + } + .container__main_items__post2 { + position:absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-image: url(https://support.discord.com/hc/article_attachments/115002139771/Sync_Permissions.png); + background-repeat: no-repeat; + background-size: 100% 100%; + + + } + .container__main_items__post3 { + position:absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-image: url(https://d1lss44hh2trtw.cloudfront.net/resize?type=webp&url=https%3A%2F%2Fshacknews-www.s3.amazonaws.com%2Fassets%2Farticle%2F2022%2F09%2F14%2Fdiscord-introduces-forum-channels-feature_feature.jpg&width=1032&sign=3BRNU6T2CyNtPchkHIr1ja-Cz5iayCMp8DrJ9tkuJ_g); + background-size: cover; + background-position: center; + } + } + + } +} diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.css b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.css new file mode 100644 index 000000000..f5e971ff4 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.css @@ -0,0 +1,177 @@ +.wrapper { + width: 400px; + height: 800px; + border-radius: 30px; + border: solid 2px rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + margin: auto; +} +.wrapper__topMenu { + width: 100%; + height: 30px; + background-color: rgb(33, 71, 63); + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.wrapper__topMenu__phoneStatus { + width: 100%; + height: 20px; + background-color: rgb(22, 64, 48); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; +} +.wrapper__topMenu__phoneStatus__clock { + width: 25px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__clock p { + color: white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus { + height: 25px; + width: 80px; + display: flex; + justify-content: space-between; + margin-right: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon i { + color: white; +} +.wrapper__centerMenu { + width: 100%; + height: 25px; + display: flex; + background-color: rgb(33, 71, 63); + justify-content: space-between; + padding-top: 10px; + color: white; + margin: 0; + font-size: large; +} +.wrapper__centerMenu__leftIcons { + display: flex; + justify-content: space-between; + width: 100px; + height: 100%; +} +.wrapper__centerMenu__rigthIcons { + width: 90px; + height: 25px; + display: flex; + justify-content: space-between; +} +.wrapper__centerMenu__rigthIcons__videoIcon { + width: 25px; + height: 25px; +} +.wrapper__centerMenu__rigthIcons__videoIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__phoneIcon { + width: 20px; + height: 25px; +} +.wrapper__centerMenu__rigthIcons__phoneIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__menuIcon { + width: 20px; + height: 25px; +} +.wrapper__centerMenu__rigthIcons__menuIcon i { + color: white; +} +.wrapper__chatPage { + margin: auto; + margin-top: 2px; + width: 398px; + height: 710px; + background-color: rgba(193, 193, 193, 0.516); + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + -moz-column-gap: 10px; + column-gap: 10px; +} +.wrapper__chatPage__line1 { + height: 25px; + width: 250px; + background-color: rgb(37, 186, 21); + border-radius: 5px; + font-size: small; + margin-right: 10px; +} +.wrapper__chatPage__line2 { + align-self: flex-start; + height: 40px; + width: 250px; + font-size: small; + background-color: white; + border-radius: 5px; + margin-left: 10px; +} +.wrapper__chatPage__barMsg { + display: flex; + justify-content: space-between; +} +.wrapper__chatPage__barMsg__message { + margin-right: 20px; + margin-bottom: 7px; + width: 350px; + height: 30px; + border-radius: 30px; + display: flex; + justify-content: space-between; + background-color: white; +} +.wrapper__chatPage__barMsg__message__right { + width: 160px; + display: flex; + justify-content: space-between; + padding-top: 5px; +} +.wrapper__chatPage__barMsg__message__right__input input { + border: none; +} +.wrapper__chatPage__barMsg__message__right__emoji { + padding-left: 3px; +} +.wrapper__chatPage__barMsg__message__left { + width: 35px; + display: flex; + justify-content: space-between; + padding-right: 5px; + padding-top: 5px; +} +.wrapper__chatPage__barMsg__microphone { + padding-right: 10px; + padding-top: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.css.map b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.css.map new file mode 100644 index 000000000..b795bd906 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["chat-style.scss","chat-style.css"],"names":[],"mappings":"AAEA;EACI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,oCAAA;EACA,YAAA;ACDJ;ADGI;EACI,WAAA;EACA,YAAA;EACA,iCAAA;EACA,4BAAA;EACA,6BAAA;ACDR;ADGY;EACI,WAAA;EACA,YAAA;EACA,iCAAA;EACA,4BAAA;EACA,6BAAA;EACA,gBAAA;EACA,aAAA;EACA,8BAAA;ACDhB;ADGgB;EACI,WAAA;EACA,YAAA;ACDpB;ADGoB;EACI,YAAA;EACA,YAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACDxB;ADKgB;EACI,YAAA;EACA,WAAA;EACC,aAAA;EACA,8BAAA;EACA,kBAAA;ACHrB;ADKoB;EACI,WAAA;EACA,YAAA;ACHxB;ADKwB;EACI,YAAA;ACH5B;ADOoB;EACI,WAAA;EACA,YAAA;ACLxB;ADOwB;EACI,YAAA;ACL5B;ADSoB;EACI,WAAA;EACA,YAAA;ACPxB;ADSwB;EACI,YAAA;ACP5B;ADeI;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,iCAAA;EACA,8BAAA;EACA,iBAAA;EACA,YAAA;EACA,SAAA;EACA,gBAAA;ACbR;ADeO;EACC,aAAA;EACA,8BAAA;EACA,YAAA;EACA,YAAA;ACbR;ADgBQ;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;ACdZ;ADgBY;EACI,WAAA;EACA,YAAA;ACdhB;ADiBgB;EACI,YAAA;ACfpB;ADmBY;EACI,WAAA;EACA,YAAA;ACjBhB;ADmBgB;EACC,YAAA;ACjBjB;ADqBY;EACI,WAAA;EACA,YAAA;ACnBhB;ADqBgB;EACC,YAAA;ACnBjB;ADyBI;EACI,YAAA;EACA,eAAA;EACA,YAAA;EACA,aAAA;EACA,4CAAA;EACA,+BAAA;EACA,gCAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,qBAAA;EACA,qBAAA;OAAA,gBAAA;ACvBR;ADyBQ;EACI,YAAA;EACA,YAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;ACvBZ;AD0BQ;EACI,sBAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,iBAAA;ACxBZ;AD2BQ;EACI,aAAA;EACA,8BAAA;ACzBZ;AD2BY;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,aAAA;EACA,8BAAA;EAEA,uBAAA;AC1BhB;AD4BoB;EACI,YAAA;EACA,aAAA;EACA,8BAAA;EACA,gBAAA;AC1BxB;AD4B4B;EACI,YAAA;AC1BhC;AD6BwB;EAEI,iBAAA;AC5B5B;ADgCoB;EACI,WAAA;EACA,aAAA;EACA,8BAAA;EACA,kBAAA;EACA,gBAAA;AC9BxB;ADyCY;EACI,mBAAA;EACA,gBAAA;ACvChB","file":"chat-style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.scss b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.scss new file mode 100644 index 000000000..3eaebd432 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat-style.scss @@ -0,0 +1,221 @@ + + +.wrapper{ + width: 400px; + height: 800px; + border-radius: 30px; + border: solid 2px rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + margin: auto; + + &__topMenu{ + width: 100%; + height: 30px; + background-color: rgb(33, 71, 63); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + + &__phoneStatus{ + width: 100%; + height: 20px; + background-color: rgb(22, 64, 48); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; + + &__clock{ + width: 25px; + height: 25px; + + p{ + color:white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left:10px; + } + } + + &__rightStatus{ + height: 25px; + width:80px; + display: flex; + justify-content: space-between; + margin-right: 10px; + + &__wifiIcon{ + width: 20px; + height: 25px; + + i{ + color: white; + } + } + + &__dataIcon{ + width: 20px; + height: 25px; + + i{ + color: white; + } + } + + &__batteryIcon{ + width: 20px; + height: 25px; + + i{ + color: white; + } + } + } + } + } + + + &__centerMenu{ + width: 100%; + height: 25px; + display: flex; + background-color: rgb(33, 71, 63); + justify-content: space-between; + padding-top: 10px; + color: white; + margin:0; + font-size: large; + + &__leftIcons{ + display: flex; + justify-content: space-between; + width:100px; + height: 100%; + } + + &__rigthIcons{ + width:90px; + height: 25px; + display: flex; + justify-content: space-between; + + &__videoIcon{ + width: 25px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + } + + &__phoneIcon{ + width: 20px; + height: 25px; + + i{ + color: white; + } + } + + &__menuIcon{ + width: 20px; + height: 25px; + + i{ + color: white; + } + } + } + } + + &__chatPage{ + margin: auto; + margin-top: 2px; + width: 398px; + height: 710px; + background-color: rgba(193, 193, 193, 0.516); + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + column-gap: 10px; + + &__line1{ + height: 25px; + width: 250px; + background-color: rgb(37, 186, 21); + border-radius: 5px; + font-size: small; + margin-right: 10px; + + } + &__line2{ + align-self:flex-start; + height: 40px; + width: 250px; + font-size: small; + background-color: white; + border-radius: 5px; + margin-left: 10px; + } + + &__barMsg{ + display: flex; + justify-content: space-between; + + &__message{ + margin-right: 20px; + margin-bottom: 7px; + width: 350px; + height: 30px; + border-radius: 30px; + display: flex; + justify-content: space-between; + + background-color: white; + + &__right{ + width: 160px; + display: flex; + justify-content: space-between; + padding-top: 5px; + &__input{ + input{ + border: none; + } + } + &__emoji{ + + padding-left: 3px; + } + } + + &__left{ + width: 35px; + display: flex; + justify-content: space-between; + padding-right: 5px; + padding-top: 5px; + + // &__addFile{ + + // } + + // &__addPicture{ + + // } + } + } + &__microphone{ + padding-right: 10px; + padding-top: 5px; + } + } + + + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/chat.html b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat.html new file mode 100644 index 000000000..805f5ff05 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/chat.html @@ -0,0 +1,101 @@ + + + + + + + Document + + + + +
+
+
+
+

12:45

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+ User 01 +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
Lorem 10 blajdn l bl bla
+
sdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfn
+
Lorem 10 blajdn l bl bla
+
sdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn
+
Lorem 10 blajdn l bl bla
+
sdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn
+
Lorem 10 blajdn l bl bla
+
sdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn
+
Lorem 10 blajdn l bl bla
+
sdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn sdlkfnsdlkf n sdlfkn
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+ +
+
+ + +
+ +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/dist/chat-style.css b/01-HTML-CSS/07-BEM/HW/Karin-levi/dist/chat-style.css new file mode 100644 index 000000000..e43d04c2b --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/dist/chat-style.css @@ -0,0 +1,176 @@ +.wrapper { + width: 400px; + height: 800px; + border-radius: 30px; + border: solid 2px black; + background-color: white; + margin: auto; +} +.wrapper__topMenu { + width: 100%; + height: 30px; + background-color: #21473f; + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.wrapper__topMenu__phoneStatus { + width: 100%; + height: 20px; + background-color: #164030; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; +} +.wrapper__topMenu__phoneStatus__clock { + width: 25px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__clock p { + color: white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus { + height: 25px; + width: 80px; + display: flex; + justify-content: space-between; + margin-right: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon i { + color: white; +} +.wrapper__centerMenu { + width: 100%; + height: 25px; + display: flex; + background-color: #21473f; + justify-content: space-between; + padding-top: 10px; + color: white; + margin: 0; + font-size: large; +} +.wrapper__centerMenu__leftIcons { + display: flex; + justify-content: space-between; + width: 100px; + height: 100%; +} +.wrapper__centerMenu__rigthIcons { + width: 90px; + height: 25px; + display: flex; + justify-content: space-between; +} +.wrapper__centerMenu__rigthIcons__videoIcon { + width: 25px; + height: 25px; +} +.wrapper__centerMenu__rigthIcons__videoIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__phoneIcon { + width: 20px; + height: 25px; +} +.wrapper__centerMenu__rigthIcons__phoneIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__menuIcon { + width: 20px; + height: 25px; +} +.wrapper__centerMenu__rigthIcons__menuIcon i { + color: white; +} +.wrapper__chatPage { + margin: auto; + margin-top: 2px; + width: 398px; + height: 710px; + background-color: rgba(193, 193, 193, 0.516); + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + column-gap: 10px; +} +.wrapper__chatPage__line1 { + height: 25px; + width: 250px; + background-color: #25ba15; + border-radius: 5px; + font-size: small; + margin-right: 10px; +} +.wrapper__chatPage__line2 { + align-self: flex-start; + height: 40px; + width: 250px; + font-size: small; + background-color: white; + border-radius: 5px; + margin-left: 10px; +} +.wrapper__chatPage__barMsg { + display: flex; + justify-content: space-between; +} +.wrapper__chatPage__barMsg__message { + margin-right: 20px; + margin-bottom: 7px; + width: 350px; + height: 30px; + border-radius: 30px; + display: flex; + justify-content: space-between; + background-color: white; +} +.wrapper__chatPage__barMsg__message__right { + width: 160px; + display: flex; + justify-content: space-between; + padding-top: 5px; +} +.wrapper__chatPage__barMsg__message__right__input input { + border: none; +} +.wrapper__chatPage__barMsg__message__right__emoji { + padding-left: 3px; +} +.wrapper__chatPage__barMsg__message__left { + width: 35px; + display: flex; + justify-content: space-between; + padding-right: 5px; + padding-top: 5px; +} +.wrapper__chatPage__barMsg__microphone { + padding-right: 10px; + padding-top: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/dist/style.css b/01-HTML-CSS/07-BEM/HW/Karin-levi/dist/style.css new file mode 100644 index 000000000..dc33dd617 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/dist/style.css @@ -0,0 +1,196 @@ +.wrapper { + width: 400px; + height: 750px; + border-radius: 30px; + background-color: #0b0909; + margin: auto; +} +.wrapper__topMenu { + width: 100%; + height: 30px; + background-color: #21473f; + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.wrapper__topMenu__phoneStatus { + width: 100%; + height: 20px; + background-color: #164030; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; +} +.wrapper__topMenu__phoneStatus__clock { + width: 25px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__clock p { + color: white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus { + height: 25px; + width: 80px; + display: flex; + justify-content: space-between; + margin-right: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon i { + color: white; +} +.wrapper__centerMenu { + width: 100%; + height: 25px; + display: flex; + justify-content: space-between; + background-color: #21473f; + padding-top: 10px; + color: white; + margin: 0; + font-size: large; +} +.wrapper__centerMenu__whatsappLogo { + padding-left: 10px; +} +.wrapper__centerMenu__rigthIcons { + width: 50px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__centerMenu__rigthIcons__searchIcon { + width: 25px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__searchIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__menuIcon { + width: 20px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__menuIcon i { + color: white; +} +.wrapper__bottomMenu { + width: 100%; + height: 30px; + display: flex; + justify-content: space-between; + background-color: #21473f; + font-size: small; + padding-top: 10px; +} +.wrapper__bottomMenu__cameraIcon { + width: 70px; + height: 30px; + color: white; + padding-left: 20px; +} +.wrapper__bottomMenu__chatMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__statusMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__callsMenu { + width: 70px; + height: 30px; + color: white; + text-decoration: underline 2px; + text-decoration-color: white; +} +.wrapper__callsList { + width: 100%; + height: 640px; + background-color: white; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; +} +.wrapper__callsList__call1 { + width: 100%; + height: 70px; + border: 1px solid rgba(89, 86, 86, 0.181); + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__leftItem { + width: 70px; + height: 70px; +} +.wrapper__callsList__call1__leftItem i { + color: #4bc64b; + font-size: 3em; + padding-left: 10px; + padding-top: 10px; +} +.wrapper__callsList__call1__leftItem--red { + color: #bb2f2f; +} +.wrapper__callsList__call1__centerItems { + width: 200px; + height: 70px; + margin-right: 90px; +} +.wrapper__callsList__call1__centerItems__userName { + width: 90px; + height: 30px; + padding-top: 10px; + font-weight: bold; +} +.wrapper__callsList__call1__centerItems__bottom { + width: 150px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon { + width: 30px; + height: 30px; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon i { + color: green; +} +.wrapper__callsList__call1__centerItems__bottom__callTime { + width: 170px; + height: 30px; + color: gray; +} +.wrapper__callsList__call1__rigthItems__videoIcon { + border: none; + width: 30px; + height: 30px; + margin-top: 25px; + margin-right: 5px; +} +.wrapper__callsList__call1__rigthItems__videoIcon i { + color: #4bc64b; + font-size: 20px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/index.html b/01-HTML-CSS/07-BEM/HW/Karin-levi/index.html new file mode 100644 index 000000000..dbb98e8d6 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/index.html @@ -0,0 +1,309 @@ + + + + + + + calls history + + + + +
+
+
+
+

12:45

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+ CHATS +
+
+ STATUS +
+
+ CALLS +
+
+ +
+
+
+ +
+
+
+ Username 01 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 02 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 03 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 04 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 05 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 06 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 07 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 08 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+ Username 09 +
+
+
+ +
+
+ yesterday, 3.20 pm +
+
+ +
+
+
+ +
+ +
+ +
+ + +
+ + + + +
+ + + + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/style.css b/01-HTML-CSS/07-BEM/HW/Karin-levi/style.css new file mode 100644 index 000000000..017a5c4a5 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/style.css @@ -0,0 +1,198 @@ +.wrapper { + width: 400px; + height: 750px; + border-radius: 30px; + background-color: rgb(11, 9, 9); + margin: auto; +} +.wrapper__topMenu { + width: 100%; + height: 30px; + background-color: rgb(33, 71, 63); + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.wrapper__topMenu__phoneStatus { + width: 100%; + height: 20px; + background-color: rgb(22, 64, 48); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; +} +.wrapper__topMenu__phoneStatus__clock { + width: 25px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__clock p { + color: white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus { + height: 25px; + width: 80px; + display: flex; + justify-content: space-between; + margin-right: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon i { + color: white; +} +.wrapper__centerMenu { + width: 100%; + height: 25px; + display: flex; + justify-content: space-between; + background-color: rgb(33, 71, 63); + padding-top: 10px; + color: white; + margin: 0; + font-size: large; +} +.wrapper__centerMenu__whatsappLogo { + padding-left: 10px; +} +.wrapper__centerMenu__rigthIcons { + width: 50px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__centerMenu__rigthIcons__searchIcon { + width: 25px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__searchIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__menuIcon { + width: 20px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__menuIcon i { + color: white; +} +.wrapper__bottomMenu { + width: 100%; + height: 30px; + display: flex; + justify-content: space-between; + background-color: rgb(33, 71, 63); + font-size: small; + padding-top: 10px; +} +.wrapper__bottomMenu__cameraIcon { + width: 70px; + height: 30px; + color: white; + padding-left: 20px; +} +.wrapper__bottomMenu__chatMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__statusMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__callsMenu { + width: 70px; + height: 30px; + color: white; + -webkit-text-decoration: underline 2px; + text-decoration: underline 2px; + -webkit-text-decoration-color: white; + text-decoration-color: white; +} +.wrapper__callsList { + width: 100%; + height: 640px; + background-color: white; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; +} +.wrapper__callsList__call1 { + width: 100%; + height: 70px; + border: 1px solid rgba(89, 86, 86, 0.181); + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__leftItem { + width: 70px; + height: 70px; +} +.wrapper__callsList__call1__leftItem i { + color: rgb(75, 198, 75); + font-size: 3em; + padding-left: 10px; + padding-top: 10px; +} +.wrapper__callsList__call1__leftItem--red { + color: rgb(187, 47, 47); +} +.wrapper__callsList__call1__centerItems { + width: 200px; + height: 70px; + margin-right: 90px; +} +.wrapper__callsList__call1__centerItems__userName { + width: 90px; + height: 30px; + padding-top: 10px; + font-weight: bold; +} +.wrapper__callsList__call1__centerItems__bottom { + width: 150px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon { + width: 30px; + height: 30px; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon i { + color: green; +} +.wrapper__callsList__call1__centerItems__bottom__callTime { + width: 170px; + height: 30px; + color: gray; +} +.wrapper__callsList__call1__rigthItems__videoIcon { + border: none; + width: 30px; + height: 30px; + margin-top: 25px; + margin-right: 5px; +} +.wrapper__callsList__call1__rigthItems__videoIcon i { + color: rgb(75, 198, 75); + font-size: 20px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/style.css.map b/01-HTML-CSS/07-BEM/HW/Karin-levi/style.css.map new file mode 100644 index 000000000..272ea485a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAEA;EACI,YAAA;EACA,aAAA;EACA,mBAAA;EACA,+BAAA;EACA,YAAA;ACDJ;ADGI;EACI,WAAA;EACA,YAAA;EACA,iCAAA;EACA,4BAAA;EACA,6BAAA;ACDR;ADIY;EACI,WAAA;EACA,YAAA;EACA,iCAAA;EACA,4BAAA;EACA,6BAAA;EACA,gBAAA;EACA,aAAA;EACA,8BAAA;ACFhB;ADIgB;EACI,WAAA;EACA,YAAA;ACFpB;ADKoB;EACI,YAAA;EACA,YAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACHxB;ADOgB;EACI,YAAA;EACA,WAAA;EAEC,aAAA;EACA,8BAAA;EACA,kBAAA;ACNrB;ADQoB;EACI,WAAA;EACA,YAAA;ACNxB;ADSwB;EACI,YAAA;ACP5B;ADYoB;EACI,WAAA;EACA,YAAA;ACVxB;ADawB;EACI,YAAA;ACX5B;ADgBoB;EACI,WAAA;EACA,YAAA;ACdxB;ADiBwB;EACI,YAAA;ACf5B;ADyBI;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;EACA,iCAAA;EACA,iBAAA;EACA,YAAA;EACA,SAAA;EACA,gBAAA;ACvBR;AD0BQ;EACI,kBAAA;ACxBZ;AD4BQ;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;AC1BZ;AD6BY;EACI,WAAA;EACA,YAAA;AC3BhB;AD8BgB;EACI,YAAA;AC5BpB;ADgCY;EACI,WAAA;EACA,YAAA;AC9BhB;ADiCgB;EACC,YAAA;AC/BjB;ADsCI;EACI,WAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;EACA,iCAAA;EACA,gBAAA;EACA,iBAAA;ACpCR;ADuCY;EACA,WAAA;EACA,YAAA;EAEA,YAAA;EACA,kBAAA;ACtCZ;AD0CY;EACI,WAAA;EACA,YAAA;EAEA,YAAA;ACzChB;AD4CY;EACI,WAAA;EACA,YAAA;EAEA,YAAA;AC3ChB;AD8CY;EACI,WAAA;EACA,YAAA;EAEA,YAAA;EACA,sCAAA;UAAA,8BAAA;EACA,oCAAA;UAAA,4BAAA;AC7ChB;ADwDI;EACI,WAAA;EACA,aAAA;EACA,uBAAA;EAEA,+BAAA;EACA,gCAAA;ACvDR;ADyDY;EACI,WAAA;EACA,YAAA;EACA,yCAAA;EACA,aAAA;EACA,8BAAA;ACvDhB;ADyDgB;EACI,WAAA;EACA,YAAA;ACvDpB;AD0DoB;EACG,uBAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;ACxDvB;AD2DoB;EACI,uBAAA;ACzDxB;AD6DgB;EACI,YAAA;EACA,YAAA;EAEA,kBAAA;AC5DpB;AD8DoB;EACI,WAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;AC5DxB;ADgEoB;EACI,YAAA;EACA,YAAA;EACA,aAAA;EACA,8BAAA;AC9DxB;ADgEwB;EACI,WAAA;EACA,YAAA;AC9D5B;ADkE4B;EACI,YAAA;AChEhC;ADoEwB;EACI,YAAA;EACA,YAAA;EAEA,WAAA;ACnE5B;AD4EoB;EAEI,YAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;AC3ExB;AD6EwB;EACI,uBAAA;EACA,eAAA;AC3E5B","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Karin-levi/style.scss b/01-HTML-CSS/07-BEM/HW/Karin-levi/style.scss new file mode 100644 index 000000000..269ecdbb7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Karin-levi/style.scss @@ -0,0 +1,282 @@ + + +.wrapper{ + width: 400px; + height: 750px; + border-radius: 30px; + background-color: rgb(11, 9, 9); + margin: auto; + + &__topMenu{ + width: 100%; + height: 30px; + background-color: rgb(33, 71, 63); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + // padding-top: 50px + + &__phoneStatus{ + width: 100%; + height: 20px; + background-color: rgb(22, 64, 48); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; + + &__clock{ + width: 25px; + height: 25px; + // border: 2px solid yellow; + + p{ + color:white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left:10px; + } + } + + &__rightStatus{ + height: 25px; + width:80px; + // border: 2px solid yellow; + display: flex; + justify-content: space-between; + margin-right: 10px; + + &__wifiIcon{ + width: 20px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + + } + + &__dataIcon{ + width: 20px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + + } + + &__batteryIcon{ + width: 20px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + + } + } + + } + } + + + &__centerMenu{ + width: 100%; + height: 25px; + display: flex; + justify-content: space-between; + background-color: rgb(33, 71, 63); + padding-top: 10px; + color: white; + margin:0; + font-size: large; + + + &__whatsappLogo{ + padding-left: 10px; + } + + + &__rigthIcons{ + width:50px; + height: 30px; + display: flex; + justify-content: space-between; + // border: 2px solid rgb(32, 7, 130); + + &__searchIcon{ + width: 25px; + height: 30px; + // border: 2px solid yellow; + + i{ + color: white; + } + } + + &__menuIcon{ + width: 20px; + height: 30px; + // border: 2px solid rgb(130, 7, 85); + + i{ + color: white; + } + } + } + } + + + &__bottomMenu{ + width:100%; + height: 30px; + display: flex; + justify-content:space-between; + background-color: rgb(33, 71, 63); + font-size: small; + padding-top: 10px; + + + &__cameraIcon{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + padding-left: 20px; + // padding-top: 15px; + } + + &__chatMenu{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + } + + &__statusMenu{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + } + + &__callsMenu{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + text-decoration: underline 2px; + text-decoration-color: white; + + // &--CALLS{ + // text-decoration: underline; + // text-decoration-color: white; + // } + } + + } + + + &__callsList{ + width: 100%; + height: 640px; + background-color: white; + // border: 1px solid rgb(130, 7, 120); + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + + &__call1{ + width: 100%; + height: 70px; + border: 1px solid rgba(89, 86, 86, 0.181); + display: flex; + justify-content: space-between; + + &__leftItem{ + width: 70px; + height: 70px; + // border: 1px solid rgb(130, 7, 120); + + i{ + color: rgb(75, 198, 75); + font-size: 3em; + padding-left: 10px; + padding-top: 10px; + } + + &--red{ + color: rgb(187, 47, 47); + } + } + + &__centerItems{ + width: 200px; + height:70px; + // border: 3px solid rgb(17, 7, 130); + margin-right: 90px; + + &__userName{ + width: 90px; + height: 30px; + padding-top: 10px; + font-weight: bold; + // border: 3px solid rgb(217, 14, 14); + } + + &__bottom{ + width: 150px; + height: 30px; + display: flex; + justify-content: space-between; + + &__arrowIcon{ + width: 30px; + height: 30px; + // border: 3px solid rgb(217, 45, 14); + + + i{ + color: green; + } + } + + &__callTime{ + width: 170px; + height: 30px; + // border: 3px solid rgb(214, 217, 14); + color: gray; + // border: 3px solid rgb(96, 17, 14); + } + } + + + } + + &__rigthItems{ + &__videoIcon{ + // border: 3px solid rgb(147, 18, 176); + border:none; + width: 30px; + height: 30px; + margin-top: 25px; + margin-right: 5px; + + i{ + color: rgb(75, 198, 75); + font-size: 20px; + } + + + } + + } + + } + + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/BEM Diagram - Nikita Rossenko.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/BEM Diagram - Nikita Rossenko.jpg new file mode 100644 index 000000000..dd82be98d Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/BEM Diagram - Nikita Rossenko.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/dist/style.css b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/dist/style.css new file mode 100644 index 000000000..c4781e9b8 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/dist/style.css @@ -0,0 +1,387 @@ +.material-symbols-rounded { + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; +} + +body { + padding: 0; + margin: 0; + display: flex; + background-color: #42464D; + overflow: hidden; + font-family: Arial, Helvetica, sans-serif; +} + +.channels { + width: 72px; + background-color: #202225; + display: flex; + align-items: center; + flex-direction: column; + height: 100vh; +} +.channels__channel { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #36393F; + color: #3BA55D; + display: flex; + justify-content: center; + align-items: center; + margin: 10px; +} +.channels__channel img { + height: 50px; + width: 50px; + border-radius: 50%; + transition: 0.3s; +} +.channels__channel--main { + border-radius: 20%; +} +.channels__channel--main img { + border-radius: 30%; + height: 50px; + width: 50px; +} +.channels__channel img:hover { + border-radius: 20%; +} +.channels hr { + width: 30px; + background-color: red; +} + +.home { + display: flex; + align-items: center; + background-color: #2F3136; + height: 100vh; + width: 300px; + flex-direction: column; + justify-content: space-between; +} +.home__topMenu { + width: 100%; +} +.home__search { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 48px; + border-bottom: 1px solid #282828; +} +.home__search input { + border: none; + background-color: #202225; + width: 90%; + height: 60%; + border-radius: 5px; +} +.home__menus { + display: flex; + justify-content: flex-start; + width: 100%; + flex-direction: column; +} +.home__menus__menu { + display: flex; + justify-content: flex-start; + align-items: center; + color: white; + gap: 10px; + font-size: 15px; + margin: 10px; + height: 30px; + font-weight: 550; + color: #bdbdbd; +} +.home__menus__menu:hover { + background-color: #5c5c64; + color: white; + opacity: 1; + border-radius: 5px; +} +.home__users p { + font-size: 12px; + padding: 18px 8px 4px 10px; + margin: 0; + font-weight: 550; +} +.home__users { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 100%; + color: #bdbdbd; +} +.home__users__user { + font-size: 15px; + display: flex; + align-items: center; + margin: 10px; +} +.home__users__user img { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; +} +.home__users__user p { + font-size: 15px; + padding: 0; +} +.home__users__user:hover { + background-color: #5c5c64; + color: white; + opacity: 1; + border-radius: 5px; +} +.home__bottomMenu { + width: 100%; + height: 60px; + background-color: #292B2F; + display: flex; +} +.home__myuser { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + flex-direction: row; + padding: 0; + margin-bottom: 10px; + margin-top: 10px; + margin-left: 10px; +} +.home__myuser__username { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 5px; + height: 40px; + color: #bdbdbd; + padding: 0; +} +.home__myuser__username p { + margin: 0; + font-size: 15px; + font-weight: 650; +} +.home__myuser__icons { + display: flex; + height: 100%; + width: 150px; + color: #bdbdbd; + justify-content: space-around; + align-items: center; +} +.home__myuser img { + width: 40px; + height: 40px; + border-radius: 50px; +} + +.main { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; +} +.main__navBar { + background-color: #36393F; + width: 100%; + height: 48px; + border-bottom: 1px solid #282828; + display: flex; + justify-content: space-between; + font-size: 12px; + padding-right: 10px; +} +.main__navBar__menu { + display: flex; + width: 100px; + justify-content: space-around; + color: #bdbdbd; + font-size: 20px; + align-items: center; + font-weight: 650; + padding-left: 10px; +} +.main__navBar__icons { + display: flex; + justify-content: space-around; + align-items: center; + width: 150px; + height: auto; + color: #bdbdbd; + padding-right: 10px; +} +.main__body { + display: flex; + width: 100%; + height: 100%; +} +.main__body__stages h1 { + padding: 0; + margin-top: 60px; + margin: 0; + margin-left: 20px; + padding: 0; +} +.main__body__stages { + display: flex; + flex-direction: column; + justify-content: space-around; + background-color: #36393F; + color: #bdbdbd; + width: 100%; + min-width: 700px; + overflow-y: auto; + align-items: center; + gap: 30px; + padding: 220px 0px 130px 0px; +} +.main__body__stages__stage h1 { + height: 50px; + font-size: 20px; + width: 100%; +} +.main__body__stages__stage { + height: 215px; + width: 50vw; + min-width: 550px; + background-color: #2F3136; + border-radius: 10px; +} +.main__body__stages__stage--maxUsers { + height: 270px; + width: 50vw; + background-color: #2F3136; + border-radius: 10px; + margin: 10px auto; +} +.main__body__stages__stage--image { + height: 270px; + width: 50vw; + background-color: #2F3136; + border-radius: 10px; + margin: 10px auto; +} +.main__body__stages__stage__server { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 100px; +} +.main__body__stages__stage__server__name img { + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 10px; + margin-left: 20px; +} +.main__body__stages__stage__server__name { + display: flex; + align-items: center; + width: 300px; + height: 50px; +} +.main__body__stages__stage__server__name h2 { + font-size: 15px; + padding: 0; + margin: 0; +} +.main__body__stages__stage__server__name p { + font-size: 12px; + padding: 0; + margin: 0; +} +.main__body__stages__stage__server__listeners { + display: flex; + justify-content: space-around; + font-weight: 650; + align-items: center; + background-color: #202225; + width: 60px; + height: 30px; + border-radius: 20px; + margin-right: 20px; +} +.main__body__stages__stage__users { + display: flex; + width: 100%; + margin-left: 20px; + margin-right: 20px; +} +.main__body__stages__stage__users--maxUsers { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +.main__body__stages__stage__users--image { + display: flex; + justify-content: space-around; + width: 100%; +} +.main__body__stages__stage__users--image .div1 { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + height: 100px; +} +.main__body__stages__stage__users--image .div2 img { + position: relative; + top: -60px; + left: -40px; + width: 250px; + height: 160px; + border-radius: 10%; + margin-bottom: 20px; +} +.main__body__stages__stage__users--minUsers { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +.main__body__stages__stage__users__user { + display: flex; + align-items: center; + height: 50px; +} +.main__body__stages__stage__users__user--speakers span { + background-color: #202225; + width: 25px; + height: 25px; + border-radius: 50%; +} +.main__body__stages__stage__users__user img { + width: 30px; + height: 30px; + border-radius: 50%; +} +.main__body__stages__stage__users__user p { + padding-left: 10px; + font-weight: 650; + font-size: 13px; +} +.main__body__activities { + background-color: #36393F; + min-width: 20%; + height: 100%; + border-left: 1px solid #4f545c; + color: #bdbdbd; +} +.main__body__activities h1 { + margin-left: 20px; +} + +@media screen and (max-width: 1400px) { + .main__body { + display: block; + } + .main__body__activities { + display: none; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/amethyst.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/amethyst.jpg new file mode 100644 index 000000000..5ac64ff85 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/amethyst.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/astrology.png b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/astrology.png new file mode 100644 index 000000000..808857579 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/astrology.png differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/avocado.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/avocado.jpg new file mode 100644 index 000000000..f5c6822a7 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/avocado.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/black-forest.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/black-forest.jpg new file mode 100644 index 000000000..9701e39be Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/black-forest.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cat.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cat.jpg new file mode 100644 index 000000000..e39f1dab2 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cat.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cat2.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cat2.jpg new file mode 100644 index 000000000..d563c77a8 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cat2.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cliffs.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cliffs.jpg new file mode 100644 index 000000000..4290f8b0f Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/cliffs.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/clouds.png b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/clouds.png new file mode 100644 index 000000000..b000d23e0 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/clouds.png differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/discord-image.png b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/discord-image.png new file mode 100644 index 000000000..5dd8c1a0b Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/discord-image.png differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/girl.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/girl.jpg new file mode 100644 index 000000000..ba45ca3e5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/girl.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/grey-wolf.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/grey-wolf.jpg new file mode 100644 index 000000000..20d4183c5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/grey-wolf.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mirabelle.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mirabelle.jpg new file mode 100644 index 000000000..4368b6e3d Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mirabelle.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mountain.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mountain.jpg new file mode 100644 index 000000000..a332d25a5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mountain.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mountain2.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mountain2.jpg new file mode 100644 index 000000000..24a37eb3f Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mountain2.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mushrooms.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mushrooms.jpg new file mode 100644 index 000000000..768e610e4 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/mushrooms.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/nature.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/nature.jpg new file mode 100644 index 000000000..e719d3bea Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/nature.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/spring.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/spring.jpg new file mode 100644 index 000000000..5eda1caa6 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/spring.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/storm-clouds.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/storm-clouds.jpg new file mode 100644 index 000000000..5f51742ed Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/storm-clouds.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/sushi.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/sushi.jpg new file mode 100644 index 000000000..84dc0ee39 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/sushi.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/trail.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/trail.jpg new file mode 100644 index 000000000..29112a7c6 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/trail.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/trees.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/trees.jpg new file mode 100644 index 000000000..368768ad5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/trees.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/woman.jpg b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/woman.jpg new file mode 100644 index 000000000..3a84dbb36 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/images/woman.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/index.html b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/index.html new file mode 100644 index 000000000..4e6467a06 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/index.html @@ -0,0 +1,352 @@ + + + + + + + + Document + + + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + add + +
+
+ + explore + +
+
+ +
+
+
+ +
+
+
+ + home + +

Home

+
+
+ + group + +

Friends

+
+
+ + rocket_launch + +

Nitro

+
+
+
+

DIRRECT MESSAGES

+
+ +

sonicman

+
+
+ +

MrLocke

+
+
+ +

Secret Squad

+
+
+ +

therealcap

+
+
+
+ +
+
+ +
+

Nikita Rossenko

+

#7374

+
+
+ + mic + + + headphones + + + settings + +
+
+
+ +
+ +
+
+
+ + home + +

Home

+
+
+ + refresh + + + filter_frames + + + help + +
+
+
+
+

Live Stages

+
+
+
+ +
+

Biocord

+

Server you are in

+
+
+
+ + headphones + +

48

+
+
+ +

Dr.Smith on COVID-19 Vaccine in the Bay Area

+
+
+ +

Mountain

+
+
+ +

Spring

+
+
+ +

Cliffs

+
+
+ +

Trail

+
+
+ + mic + +

+2 Speakers

+
+
+
+ +
+
+
+ +
+

The House Of Cap

+

Server you are in

+
+
+
+ + headphones + +

33

+
+
+ +

Story time with Legendary Cap: how he got started at Discord

+
+
+ +

Black Forest

+
+
+ +

Trees

+
+
+ +

Storm Clouds

+
+
+
+ +
+
+
+ +
+

Grimmes' Community

+

Just started

+
+
+
+ + headphones + +

76

+
+
+ +

AMA with Grimes

+
+
+
+ +

Woman

+
+
+ +

Cat

+
+
+ +

Clouds

+
+
+ +

Nature

+
+
+
+ +
+
+
+ +
+
+
+ +
+

The House Of Cap

+

Server you are in

+
+
+
+ + headphones + +

33

+
+
+ +

Story time with Legendary Cap: how he got started at Discord

+
+
+ +

Black Forest

+
+
+ +

Trees

+
+
+ +

Storm Clouds

+
+
+
+ +
+ +
+

Activities

+
+
+ +

+

+
+
+ +

+

+ + + +
+
+ + + + +
+
+
+
+ +

+

+
+
+ +

+

+ + + +
+
+
+
+ +

+

+
+
+
+
+ +

+

+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.css b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.css new file mode 100644 index 000000000..1e29d199f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.css @@ -0,0 +1,387 @@ +.material-symbols-rounded { + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; +} + +body { + padding: 0; + margin: 0; + display: flex; + background-color: #42464D; + overflow: hidden; + font-family: Arial, Helvetica, sans-serif; +} + +.channels { + width: 72px; + background-color: #202225; + display: flex; + align-items: center; + flex-direction: column; + height: 100vh; +} +.channels__channel { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #36393F; + color: #3BA55D; + display: flex; + justify-content: center; + align-items: center; + margin: 10px; +} +.channels__channel img { + height: 50px; + width: 50px; + border-radius: 50%; + transition: 0.3s; +} +.channels__channel--main { + border-radius: 20%; +} +.channels__channel--main img { + border-radius: 30%; + height: 50px; + width: 50px; +} +.channels__channel img:hover { + border-radius: 20%; +} +.channels hr { + width: 30px; + background-color: rgb(255, 0, 0); +} + +.home { + display: flex; + align-items: center; + background-color: #2F3136; + height: 100vh; + width: 300px; + flex-direction: column; + justify-content: space-between; +} +.home__topMenu { + width: 100%; +} +.home__search { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 48px; + border-bottom: 1px solid rgb(40, 40, 40); +} +.home__search input { + border: none; + background-color: #202225; + width: 90%; + height: 60%; + border-radius: 5px; +} +.home__menus { + display: flex; + justify-content: flex-start; + width: 100%; + flex-direction: column; +} +.home__menus__menu { + display: flex; + justify-content: flex-start; + align-items: center; + color: white; + gap: 10px; + font-size: 15px; + margin: 10px; + height: 30px; + font-weight: 550; + color: rgb(189, 189, 189); +} +.home__menus__menu:hover { + background-color: rgb(92, 92, 100); + color: white; + opacity: 1; + border-radius: 5px; +} +.home__users p { + font-size: 12px; + padding: 18px 8px 4px 10px; + margin: 0; + font-weight: 550; +} +.home__users { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 100%; + color: rgb(189, 189, 189); +} +.home__users__user { + font-size: 15px; + display: flex; + align-items: center; + margin: 10px; +} +.home__users__user img { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; +} +.home__users__user p { + font-size: 15px; + padding: 0; +} +.home__users__user:hover { + background-color: rgb(92, 92, 100); + color: white; + opacity: 1; + border-radius: 5px; +} +.home__bottomMenu { + width: 100%; + height: 60px; + background-color: #292B2F; + display: flex; +} +.home__myuser { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + flex-direction: row; + padding: 0; + margin-bottom: 10px; + margin-top: 10px; + margin-left: 10px; +} +.home__myuser__username { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 5px; + height: 40px; + color: rgb(189, 189, 189); + padding: 0; +} +.home__myuser__username p { + margin: 0; + font-size: 15px; + font-weight: 650; +} +.home__myuser__icons { + display: flex; + height: 100%; + width: 150px; + color: rgb(189, 189, 189); + justify-content: space-around; + align-items: center; +} +.home__myuser img { + width: 40px; + height: 40px; + border-radius: 50px; +} + +.main { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; +} +.main__navBar { + background-color: #36393F; + width: 100%; + height: 48px; + border-bottom: 1px solid rgb(40, 40, 40); + display: flex; + justify-content: space-between; + font-size: 12px; + padding-right: 10px; +} +.main__navBar__menu { + display: flex; + width: 100px; + justify-content: space-around; + color: rgb(189, 189, 189); + font-size: 20px; + align-items: center; + font-weight: 650; + padding-left: 10px; +} +.main__navBar__icons { + display: flex; + justify-content: space-around; + align-items: center; + width: 150px; + height: auto; + color: rgb(189, 189, 189); + padding-right: 10px; +} +.main__body { + display: flex; + width: 100%; + height: 100%; +} +.main__body__stages h1 { + padding: 0; + margin-top: 60px; + margin: 0; + margin-left: 20px; + padding: 0; +} +.main__body__stages { + display: flex; + flex-direction: column; + justify-content: space-around; + background-color: #36393F; + color: rgb(189, 189, 189); + width: 100%; + min-width: 700px; + overflow-y: auto; + align-items: center; + gap: 30px; + padding: 220px 0px 130px 0px; +} +.main__body__stages__stage h1 { + height: 50px; + font-size: 20px; + width: 100%; +} +.main__body__stages__stage { + height: 215px; + width: 50vw; + min-width: 550px; + background-color: #2F3136; + border-radius: 10px; +} +.main__body__stages__stage--maxUsers { + height: 270px; + width: 50vw; + background-color: #2F3136; + border-radius: 10px; + margin: 10px auto; +} +.main__body__stages__stage--image { + height: 270px; + width: 50vw; + background-color: #2F3136; + border-radius: 10px; + margin: 10px auto; +} +.main__body__stages__stage__server { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 100px; +} +.main__body__stages__stage__server__name img { + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 10px; + margin-left: 20px; +} +.main__body__stages__stage__server__name { + display: flex; + align-items: center; + width: 300px; + height: 50px; +} +.main__body__stages__stage__server__name h2 { + font-size: 15px; + padding: 0; + margin: 0; +} +.main__body__stages__stage__server__name p { + font-size: 12px; + padding: 0; + margin: 0; +} +.main__body__stages__stage__server__listeners { + display: flex; + justify-content: space-around; + font-weight: 650; + align-items: center; + background-color: #202225; + width: 60px; + height: 30px; + border-radius: 20px; + margin-right: 20px; +} +.main__body__stages__stage__users { + display: flex; + width: 100%; + margin-left: 20px; + margin-right: 20px; +} +.main__body__stages__stage__users--maxUsers { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +.main__body__stages__stage__users--image { + display: flex; + justify-content: space-around; + width: 100%; +} +.main__body__stages__stage__users--image .div1 { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + height: 100px; +} +.main__body__stages__stage__users--image .div2 img { + position: relative; + top: -60px; + left: -40px; + width: 250px; + height: 160px; + border-radius: 10%; + margin-bottom: 20px; +} +.main__body__stages__stage__users--minUsers { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +.main__body__stages__stage__users__user { + display: flex; + align-items: center; + height: 50px; +} +.main__body__stages__stage__users__user--speakers span { + background-color: #202225; + width: 25px; + height: 25px; + border-radius: 50%; +} +.main__body__stages__stage__users__user img { + width: 30px; + height: 30px; + border-radius: 50%; +} +.main__body__stages__stage__users__user p { + padding-left: 10px; + font-weight: 650; + font-size: 13px; +} +.main__body__activities { + background-color: #36393F; + min-width: 20%; + height: 100%; + border-left: 1px solid rgb(79, 84, 92); + color: rgb(189, 189, 189); +} +.main__body__activities h1 { + margin-left: 20px; +} + +@media screen and (max-width: 1400px) { + .main__body { + display: block; + } + .main__body__activities { + display: none; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.css.map b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.css.map new file mode 100644 index 000000000..60b4dcf1f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.scss b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.scss new file mode 100644 index 000000000..9b8b3953e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Nikita Rossenko/style.scss @@ -0,0 +1,454 @@ +.material-symbols-rounded { + font-variation-settings: + 'FILL' 1, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} + +body{ + padding: 0; + margin: 0; + display: flex; + background-color: #42464D; + overflow: hidden; + font-family: Arial, Helvetica, sans-serif; +} +.channels { + width: 72px; + background-color: #202225; + display: flex; + // justify-content:c; + align-items:center; + flex-direction: column; + height: 100vh; + + // .channels__channel + &__channel { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #36393F; + color: #3BA55D; + display: flex; + justify-content: center; + align-items: center; + margin: 10px; + + & img{ + height: 50px; + width: 50px; + border-radius: 50%; + transition: 0.3s; + // .channels__channel--main + } + + &--main { + border-radius: 20%; + + } + + &--main img{ + border-radius: 30%; + height: 50px; + width: 50px; + } + } + + &__channel img:hover{ + border-radius: 20%; + } +hr { + width: 30px; + background-color: rgb(255, 0, 0); +} +} +.home { + display: flex; + // justify-content: center; + align-items: center; + background-color: #2F3136; + height: 100vh; + width: 300px; + flex-direction: column; + justify-content: space-between; + // .home__search + + &__topMenu{ + width: 100%; + } + &__search { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 48px; + border-bottom: 1px solid rgb(40, 40, 40); + } + &__search input{ + border: none; + background-color: #202225; + width: 90%; + height: 60%; + border-radius: 5px; + } + // .home__menus + &__menus { + display: flex; + justify-content: flex-start; + width: 100%; + flex-direction: column; + // margin-left: 10px; + + &__menu { + display: flex; + justify-content: flex-start; + align-items: center; + color: white; + gap: 10px; + font-size: 15px; + margin: 10px; + height: 30px; + font-weight: 550; + color: rgb(189, 189, 189); + } + + &__menu:hover { + background-color: rgb(92, 92, 100); + color: white; + opacity: 1; + border-radius: 5px; + } + } + // .home__users + &__users p { + font-size: 12px; + padding: 18px 8px 4px 10px; + margin: 0; + font-weight: 550; + } + &__users { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 100%; + color: rgb(189, 189, 189); + + &__user{ + font-size: 15px; + display: flex; + align-items: center; + margin: 10px; + + + } + &__user img{ + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; + } + &__user p{ + font-size: 15px; + padding: 0; + } + &__user:hover { + background-color: rgb(92, 92, 100); + color: white; + opacity: 1; + border-radius: 5px; + } + } + + &__bottomMenu { + width: 100%; + height: 60px; + background-color: #292B2F; + display: flex; + } + // .home__myuser + &__myuser { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + flex-direction: row; + padding: 0; + margin-bottom: 10px; + margin-top: 10px; + margin-left: 10px; + + &__username{ + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 5px; + height: 40px; + color:rgb(189, 189, 189); + padding: 0; + } + + &__username p{ + margin: 0; + font-size: 15px; + font-weight: 650; + } + + &__icons { + display: flex; + height: 100%; + width: 150px; + color:rgb(189, 189, 189); + justify-content: space-around; + align-items: center; + } + } + + &__myuser img{ + width: 40px; + height: 40px; + border-radius: 50px; + } +} +.main { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; + &__navBar { + background-color: #36393F; + width: 100%; + height: 48px; + border-bottom: 1px solid rgb(40, 40, 40); + display: flex; + justify-content: space-between; + font-size: 12px; + padding-right: 10px; + + &__menu { + display: flex; + width: 100px; + justify-content: space-around; + color: rgb(189, 189, 189); + font-size: 20px; + align-items: center; + font-weight: 650; + padding-left:10px; + + } + + &__icons { + display: flex; + justify-content: space-around; + align-items: center; + width: 150px; + height: auto; + color: rgb(189, 189, 189); + padding-right: 10px; + } + + } + &__body{ + display: flex; + width: 100%; + height: 100%; + // overflow-y: auto; + + &__stages h1{ + padding: 0; + margin-top: 60px; + margin: 0; + margin-left: 20px; + padding: 0; + } + // .main__body__stages + &__stages { + display:flex; + flex-direction: column; + justify-content: space-around; + background-color: #36393F; + color: rgb(189, 189, 189); + width: 100%; + min-width: 700px; + + // resize: both; + overflow-y: auto; + align-items: center; + gap:30px; + padding: 220px 0px 130px 0px; + + + &__stage h1{ + height: 50px; + font-size: 20px; + width: 100%; + } + &__stage{ + height: 215px; + width: 50vw; + min-width: 550px; + background-color: #2F3136; + border-radius: 10px; + + // margin: 10px auto; + + &--maxUsers { + height: 270px; + width: 50vw; + background-color: #2F3136; + border-radius: 10px; + margin: 10px auto; + } + + &--image { + height: 270px; + width: 50vw; + background-color: #2F3136; + border-radius: 10px; + margin: 10px auto; + } + + + + &__server { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 100px; + + &__name img{ + width: 40px; + height: 40px; + border-radius: 10px; + margin-right: 10px; + margin-left: 20px; + + } + &__name { + display: flex; + align-items: center; + width: 300px; + height: 50px; + } + + &__name h2{ + font-size: 15px; + padding: 0; + margin: 0; + } + + &__name p{ + font-size: 12px; + padding: 0; + margin: 0; + } + + &__listeners { + display: flex; + justify-content: space-around; + font-weight: 650; + align-items: center; + background-color: #202225; + width: 60px; + height: 30px; + border-radius: 20px; + margin-right: 20px; + } + } + + &__users { + display: flex; + width: 100%; + margin-left: 20px; + margin-right: 20px; + + &--maxUsers { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + &--image { + display: flex; + justify-content: space-around; + width: 100%; + } + &--image .div1{ + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + height: 100px; + } + + &--image .div2 img{ + position: relative; + top: -60px; + left: -40px; + width: 250px; + height: 160px; + border-radius: 10%; + margin-bottom: 20px; + } + + + &--minUsers { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + + + &__user { + display: flex; + align-items: center; + height: 50px; + + &--speakers span { + background-color: #202225; + width: 25px; + height: 25px; + border-radius: 50%; + } + } + &__user img{ + width: 30px; + height: 30px; + border-radius: 50%; + } + &__user p{ + padding-left: 10px; + font-weight: 650; + font-size: 13px; + } + } + } + } + // .main__body__activities + &__activities { + background-color: #36393F; + min-width: 20%; + height: 100%; + border-left: 1px solid rgb(79,84,92); + color:rgb(189, 189, 189); + + h1{ + margin-left: 20px; + } + } +} + + +} + +@media screen and (max-width: 1400px){ + .main{ + &__body{ + display: block; + &__stages { + } + &__activities{ + display: none; + } + } + + } +} diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/dist/style.css b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/dist/style.css new file mode 100644 index 000000000..6895ef5ba --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/dist/style.css @@ -0,0 +1,298 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; +} + +a { + text-decoration: none; + color: black; +} + +.wraper { + position: relative; + width: 400px; + border: 1px solid black; + min-height: 100vh; +} +.wraper__about { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + height: 80px; + padding: 5px 10px; +} +.wraper__about__pic { + grid-column: 1/2; +} +.wraper__about__pic img { + width: 65%; + border-radius: 50%; + aspect-ratio: 1/1; +} +.wraper__about__info { + grid-column: 2/4; + display: flex; + flex-direction: column; + justify-content: center; +} +.wraper__about__info__stats > * { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 10px; +} +.wraper__about__info__stats { + display: flex; + align-items: center; + justify-content: space-around; +} +.wraper__about__info__stats span { + font-weight: bold; +} +.wraper__about__info__edit { + width: 100%; + text-align: center; + background-color: #c4c2c2; +} +.wraper__bio > * { + margin: 3px 0px; +} +.wraper__bio { + padding: 10px 5px; +} +.wraper__bio__text--site { + color: #4c8bf1; +} +.wraper__menu { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 0px; + border-top: 1px #bebebe solid; + border-bottom: 1px #bebebe solid; +} +.wraper__main { + display: grid; + grid-column: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 2px; +} +.wraper__main__pic:nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(3) { + grid-column: 3/4; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(5) { + grid-column: 2/3; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(6) { + grid-column: 3/4; + grid-row: 2/3; +} +.wraper__main__pic img { + width: 100%; + aspect-ratio: 16/13; + display: grid; + place-items: center; +} +.wraper__starter { + background-color: rgba(245, 241, 241, 0.68); + border-bottom: 1px #bebebe solid; + position: relative; +} +.wraper__starter__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5px; +} +.wraper__starter__top__company { + display: flex; + align-items: center; +} +.wraper__starter__top__company p { + margin: 0px 5px; +} +.wraper__starter__top__company h4 { + font-weight: bold; + transform: translateY(-15%); +} +.wraper__starter__top__time { + position: absolute; + left: 50%; + transform: translate(-50%); +} +.wraper__starter__bottom { + height: 40px; + position: relative; + display: flex; + align-items: center; + flex-direction: row-reverse; + padding: 0px 5px; +} +.wraper__starter__bottom__logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.wraper__starter__bottom__logo img { + width: 100px; + height: 50px; +} +.wraper__post__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; +} +.wraper__post__top__userName { + display: flex; + align-items: center; +} +.wraper__post__top__userName__pic { + width: 30px; + height: 30px; + border: none; + margin-right: 10px; +} +.wraper__post__top__userName__pic img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.wraper__post__pic { + height: 350px; +} +.wraper__post__pic img { + width: 100%; + height: 100%; +} +.wraper__post__iconsUnderPic__icons { + padding: 10px 15px; + width: 100px; + display: flex; + align-items: center; + justify-content: space-between; +} +.wraper__post__comments { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; +} +.wraper__post__comments__likes { + display: flex; + align-items: center; +} +.wraper__post__comments__likes i { + margin-right: 5px; +} +.wraper__post__comments__comment { + display: flex; +} +.wraper__post__comments__comment span { + font-weight: 900; +} +.wraper__post__comments__comment .hash { + color: #1b61bc; +} +.wraper__footer { + background-color: rgba(245, 241, 241, 0.68); + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + position: absolute; + bottom: 0px; + border-top: 1px #bebebe solid; +} +.wraper__footer__like { + position: absolute; + display: flex; + align-items: center; + justify-content: space-around; + width: 80px; + height: 30px; + background-color: #f15757; + border-radius: 10px; + right: 70px; + top: -35px; + animation: like 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; +} +.wraper__footer__like i { + z-index: 10; + display: flex; +} +.wraper__footer__like i p { + font-size: 0.7em; + margin-left: 2px; +} +.wraper__footer__like__triangle { + position: absolute; + bottom: -9px; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid #f15757; + left: 50%; + transform: translateX(-50%); + animation: triangle 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; +} + +@keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid #f15757; + } + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid #f15757; + } + 100% { + opacity: 0; + } +} +@keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/main.html b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/main.html new file mode 100644 index 000000000..7de422586 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/main.html @@ -0,0 +1,69 @@ + + + + + + + + Instagram + + + + + + +
+
+
+

.....

company

+

17:38

+
+
+
+ +
+
+
+
+
+
+
+
userName
 +
+

...

+
+
+
+
+ + + +
+
+
+ +
+

userName Hi!! #user

+
+
+
+
+ + + + + + +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/Instagram_logo.svg-removebg-preview (1).png b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/Instagram_logo.svg-removebg-preview (1).png new file mode 100644 index 000000000..b554506a4 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/Instagram_logo.svg-removebg-preview (1).png differ diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/dog.jpg b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/dog.jpg new file mode 100644 index 000000000..6ab430715 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/dog.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/instagram.svg b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/instagram.svg new file mode 100644 index 000000000..0d643595f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/mountain.jpg b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/mountain.jpg new file mode 100644 index 000000000..09c6944f8 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/photos/mountain.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/profile.html b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/profile.html new file mode 100644 index 000000000..0feba6812 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/profile.html @@ -0,0 +1,78 @@ + + + + + + + Instagram + + + + + +
+
+
+

.....

company

+

17:38

+
+
+
+ +
+
+
+
+
+
+
+
+

345

+

posts

+
+
+

7689

+

followers

+
+
+

456

+

following

+
+
+

Edit profile

+
+
+
+

Your name

+
Your bio goes here...
+
And here too
+
yoursite.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ + + + + +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/style.css b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/style.css new file mode 100644 index 000000000..7f1cbc3db --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/style.css @@ -0,0 +1,334 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; +} + +a { + text-decoration: none; + color: black; +} + +.wraper { + position: relative; + width: 400px; + border: 1px solid black; + min-height: 100vh; +} +.wraper__about { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + height: 80px; + padding: 5px 10px; +} +.wraper__about__pic { + grid-column: 1/2; +} +.wraper__about__pic img { + width: 65%; + border-radius: 50%; + aspect-ratio: 1/1; +} +.wraper__about__info { + grid-column: 2/4; + display: flex; + flex-direction: column; + justify-content: center; +} +.wraper__about__info__stats > * { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 10px; +} +.wraper__about__info__stats { + display: flex; + align-items: center; + justify-content: space-around; +} +.wraper__about__info__stats span { + font-weight: bold; +} +.wraper__about__info__edit { + width: 100%; + text-align: center; + background-color: rgb(196, 194, 194); +} +.wraper__bio > * { + margin: 3px 0px; +} +.wraper__bio { + padding: 10px 5px; +} +.wraper__bio__text--site { + color: rgb(76, 139, 241); +} +.wraper__menu { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 0px; + border-top: 1px rgb(190, 190, 190) solid; + border-bottom: 1px rgb(190, 190, 190) solid; +} +.wraper__main { + display: grid; + grid-column: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 2px; +} +.wraper__main__pic:nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(3) { + grid-column: 3/4; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(5) { + grid-column: 2/3; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(6) { + grid-column: 3/4; + grid-row: 2/3; +} +.wraper__main__pic img { + width: 100%; + aspect-ratio: 16/13; + display: grid; + place-items: center; +} +.wraper__starter { + background-color: rgba(245, 241, 241, 0.68); + border-bottom: 1px rgb(190, 190, 190) solid; + position: relative; +} +.wraper__starter__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5px; +} +.wraper__starter__top__company { + display: flex; + align-items: center; +} +.wraper__starter__top__company p { + margin: 0px 5px; +} +.wraper__starter__top__company h4 { + font-weight: bold; + transform: translateY(-15%); +} +.wraper__starter__top__time { + position: absolute; + left: 50%; + transform: translate(-50%); +} +.wraper__starter__bottom { + height: 40px; + position: relative; + display: flex; + align-items: center; + flex-direction: row-reverse; + padding: 0px 5px; +} +.wraper__starter__bottom__logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.wraper__starter__bottom__logo img { + width: 100px; + height: 50px; +} +.wraper__post__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; +} +.wraper__post__top__userName { + display: flex; + align-items: center; +} +.wraper__post__top__userName__pic { + width: 30px; + height: 30px; + border: none; + margin-right: 10px; +} +.wraper__post__top__userName__pic img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.wraper__post__pic { + height: 350px; +} +.wraper__post__pic img { + width: 100%; + height: 100%; +} +.wraper__post__iconsUnderPic__icons { + padding: 10px 15px; + width: 100px; + display: flex; + align-items: center; + justify-content: space-between; +} +.wraper__post__comments { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; +} +.wraper__post__comments__likes { + display: flex; + align-items: center; +} +.wraper__post__comments__likes i { + margin-right: 5px; +} +.wraper__post__comments__comment { + display: flex; +} +.wraper__post__comments__comment span { + font-weight: 900; +} +.wraper__post__comments__comment .hash { + color: rgb(27, 97, 188); +} +.wraper__footer { + background-color: rgba(245, 241, 241, 0.68); + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + position: absolute; + bottom: 0px; + border-top: 1px rgb(190, 190, 190) solid; +} +.wraper__footer__like { + position: absolute; + display: flex; + align-items: center; + justify-content: space-around; + width: 80px; + height: 30px; + background-color: rgb(241, 87, 87); + border-radius: 10px; + right: 70px; + top: -35px; + -webkit-animation: like 4s ease-in; + animation: like 4s ease-in; + -webkit-animation-delay: 1s; + animation-delay: 1s; + opacity: 0; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.wraper__footer__like i { + z-index: 10; + display: flex; +} +.wraper__footer__like i p { + font-size: 0.7em; + margin-left: 2px; +} +.wraper__footer__like__triangle { + position: absolute; + bottom: -9px; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid rgb(241, 87, 87); + left: 50%; + transform: translateX(-50%); + -webkit-animation: triangle 4s ease-in; + animation: triangle 4s ease-in; + -webkit-animation-delay: 1s; + animation-delay: 1s; + opacity: 0; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@-webkit-keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid rgb(241, 87, 87); + } + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid rgb(241, 87, 87); + } + 100% { + opacity: 0; + } +} + +@keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid rgb(241, 87, 87); + } + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid rgb(241, 87, 87); + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/style.scss b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/style.scss new file mode 100644 index 000000000..1c23a98a9 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Omer.Virshuvski_Instagram/style.scss @@ -0,0 +1,360 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; +} + +a { + text-decoration: none; + color: black; +} + +.wraper { + position: relative; + width: 400px; + border: 1px solid black; + min-height: 100vh; + + &__about { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + height: 80px; + padding: 5px 10px; + &__pic { + grid-column: 1/2; + img { + width: 65%; + border-radius: 50%; + aspect-ratio: 1/1; + } + } + &__info { + grid-column: 2/4; + display: flex; + flex-direction: column; + justify-content: center; + &__stats > * { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 10px; + } + &__stats { + span { + font-weight: bold; + } + display: flex; + align-items: center; + justify-content: space-around; + } + &__edit { + width: 100%; + text-align: center; + background-color: rgb(196, 194, 194); + } + } + } + + &__bio > * { + margin: 3px 0px; + } + &__bio { + padding: 10px + 5px; + &__text { + &--site { + color: rgb(76, 139, 241); + } + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 0px; + border-top: 1px rgb(190, 190, 190) solid; + border-bottom: 1px rgb(190, 190, 190) solid; + } + + &__main { + display: grid; + grid-column: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 2px; + &__pic:nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; + } + &__pic:nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; + } + &__pic:nth-child(3) { + grid-column: 3/4; + grid-row: 1/2; + } + &__pic:nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; + } + &__pic:nth-child(5) { + grid-column: 2/3; + grid-row: 2/3; + } + &__pic:nth-child(6) { + grid-column: 3/4; + grid-row: 2/3; + } + &__pic { + img { + width: 100%; + aspect-ratio: 16/13; + display: grid; + place-items: center; + } + } + } + + + + + + + + + + + + + + + + &__starter { + background-color: rgba(245, 241, 241, 0.68); + border-bottom: 1px rgb(190, 190, 190) solid; + position: relative; + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5px; + + &__company { + display: flex; + align-items: center; + + p { + margin: 0px 5px; + } + + h4 { + font-weight: bold; + transform: translateY(-15%); + } + } + + &__time { + position: absolute; + left: 50%; + transform: translate(-50%); + } + } + + &__bottom { + height: 40px; + position: relative; + display: flex; + align-items: center; + flex-direction: row-reverse; + padding: 0px 5px; + + &__logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + img { + width: 100px; + height: 50px; + } + } + } + } + + + &__post { + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; + + &__userName { + display: flex; + align-items: center; + + &__pic { + width: 30px; + height: 30px; + border: none; + margin-right: 10px; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + } + } + } + } + + &__pic { + height: 350px; + + img { + width: 100%; + height: 100%; + } + } + + &__iconsUnderPic { + &__icons { + padding: 10px 15px; + width: 100px; + display: flex; + align-items: center; + justify-content: space-between; + } + } + + &__comments { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; + + &__likes { + i { + margin-right: 5px; + } + + display: flex; + align-items: center; + } + + &__comment { + span { + font-weight: 900; + } + + .hash { + color: rgb(27, 97, 188); + } + + display: flex; + } + } + } + + + &__footer { + background-color: rgba(245, 241, 241, 0.68); + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + position: absolute; + bottom: 0px; + border-top: 1px rgb(190, 190, 190) solid; + + &__like { + position: absolute; + display: flex; + align-items: center; + justify-content: space-around; + width: 80px; + height: 30px; + background-color: rgb(241, 87, 87); + border-radius: 10px; + right: 70px; + top: -35px; + animation: like 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; + + i { + z-index: 10; + display: flex; + + p { + font-size: .7em; + margin-left: 2px; + } + } + + &__triangle { + position: absolute; + bottom: -9px; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid rgb(241, 87, 87); + left: 50%; + transform: translateX(-50%); + animation: triangle 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; + } + } + } +} + +@keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid rgb(241, 87, 87); + } + + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid rgb(241, 87, 87); + } + + 100% { + opacity: 0; + } +} + + +@keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shai-li-discord/dist/style.css b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/dist/style.css new file mode 100644 index 000000000..83badd66e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/dist/style.css @@ -0,0 +1,168 @@ +body { + margin: 0; +} + +.container { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; + background-color: #343232; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} +.container .groups { + height: 100%; + width: 5vw; + background-color: #343232; + display: flex; + flex-direction: column; +} +.container .groups__appName { + font-size: 0.9rem; + color: #9b9797; + text-align: center; + padding-top: 10px; +} +.container .groups hr { + width: 60px; + height: 0.3px; + border-width: 0; + background-color: #9b9797; +} +.container .groups__group { + height: 3.5rem; + width: 3.5rem; + border-radius: 50%; + background-color: #555657; + color: #2cb12c; + font-size: 2rem; + margin: 0.4rem; + display: flex; + align-items: center; + justify-content: center; +} +.container .groups__group img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.container .groups__group--discord { + border-radius: 30%; +} + +.home { + width: 20vw; + height: 100vh; + background-color: #565252; + margin-top: 20px; + border-top-left-radius: 10px; +} +.home input { + background-color: #343232; + border: none; + margin-left: 40px; + margin-top: 7px; + border-radius: 7px; + padding: 5px; +} +.home__categories { + display: flex; + flex-direction: column; + padding: 0.5rem 3rem; + margin: 2rem 3rem; + color: #a3a29f; + opacity: 80%; +} +.home__categories:hover { + background-color: #696b6c; +} +.home h5 { + text-align: left; + margin-left: 20px; + color: #c7c7c7; +} +.home__members { + display: flex; + flex-direction: column; + padding: 0.7rem; + gap: 1rem; +} +.home__members__member { + color: #e9eeee; + display: flex; + align-items: center; + margin-left: 10px; + padding: 5px; +} +.home__members__member img { + width: 50px; + height: 50px; + border-radius: 100px; + align-items: center; +} +.home__members__member .name { + padding: 10px; +} + +.rightBlock { + height: 100vh; + width: 100vw; + background-color: #5e6262; + margin-top: 20px; + color: #dedddd; +} +.rightBlock__topNav { + font-size: 1rem; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 20px; +} +.rightBlock__stages { + display: flex; + flex-direction: row; +} +.rightBlock__stages__stage { + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rightBlock__stages__stage__title { + font-size: large; + margin-right: 15rem; + margin-left: 4rem; +} +.rightBlock .userContainer { + width: 30vw; + height: 20vh; + background-color: #3b3a3a; + margin-top: 1.5rem; + display: flex; + flex-direction: row; +} +.rightBlock .userContainer img { + height: 40px; + width: 40px; + border-radius: 30%; + margin: 0.5rem; +} +.rightBlock .userContainer__name { + margin-top: 1rem; + font-size: medium; +} +.rightBlock .userContainer__headphones { + width: 70px; + position: relative; + left: 700px; + bottom: 110px; + border: 2px #18191b solid; + border-radius: 20%; + display: flex; +} +.rightBlock .userContainer__headphones i { + margin-left: 5px; +} +.rightBlock .userContainer__caption { + margin-top: 4.5rem; + font-variant-position: initial; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shai-li-discord/index.html b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/index.html new file mode 100644 index 000000000..b9264765a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/index.html @@ -0,0 +1,122 @@ + + + + + + + DISCORD + + + +
+
+
DISCORD
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
*
+
+ +
+ +
Home
+
Friends
+
Nitro
+
DIRECT MESSAGES
+
+
+ +
sonicman
+
+
+ +
MrLocke
+
+
+ +
Secret Squad
+
+
+
+ +
+
+
Home
+
icon icon icon
+
+
+
+ Live Stages +
+ +
Biocord
+
+ +
+ +
Hello World!
+
+
+ +
The house of cap
+
( --- )
+
+
+ +
Anime Soul Discord
+
( --- )
+
+
+
Activities
+
+
+
+ + diff --git a/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.css b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.css new file mode 100644 index 000000000..52c373b01 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.css @@ -0,0 +1,168 @@ +body { + margin: 0; +} + +.container { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; + background-color: rgb(52, 50, 50); + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} +.container .groups { + height: 100%; + width: 5vw; + background-color: rgb(52, 50, 50); + display: flex; + flex-direction: column; +} +.container .groups__appName { + font-size: 0.9rem; + color: rgb(155, 151, 151); + text-align: center; + padding-top: 10px; +} +.container .groups hr { + width: 60px; + height: 0.3px; + border-width: 0; + background-color: rgb(155, 151, 151); +} +.container .groups__group { + height: 3.5rem; + width: 3.5rem; + border-radius: 50%; + background-color: #555657; + color: rgb(44, 177, 44); + font-size: 2rem; + margin: 0.4rem; + display: flex; + align-items: center; + justify-content: center; +} +.container .groups__group img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.container .groups__group--discord { + border-radius: 30%; +} + +.home { + width: 20vw; + height: 100vh; + background-color: rgb(86, 82, 82); + margin-top: 20px; + border-top-left-radius: 10px; +} +.home input { + background-color: rgb(52, 50, 50); + border: none; + margin-left: 40px; + margin-top: 7px; + border-radius: 7px; + padding: 5px; +} +.home__categories { + display: flex; + flex-direction: column; + padding: 0.5rem 3rem; + margin: 2rem 3rem; + color: rgb(163, 162, 159); + opacity: 80%; +} +.home__categories:hover { + background-color: rgb(105, 107, 108); +} +.home h5 { + text-align: left; + margin-left: 20px; + color: rgb(199, 199, 199); +} +.home__members { + display: flex; + flex-direction: column; + padding: 0.7rem; + gap: 1rem; +} +.home__members__member { + color: rgb(233, 238, 238); + display: flex; + align-items: center; + margin-left: 10px; + padding: 5px; +} +.home__members__member img { + width: 50px; + height: 50px; + border-radius: 100px; + align-items: center; +} +.home__members__member .name { + padding: 10px; +} + +.rightBlock { + height: 100vh; + width: 100vw; + background-color: rgb(94, 98, 98); + margin-top: 20px; + color: rgb(222, 221, 221); +} +.rightBlock__topNav { + font-size: 1rem; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 20px; +} +.rightBlock__stages { + display: flex; + flex-direction: row; +} +.rightBlock__stages__stage { + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rightBlock__stages__stage__title { + font-size: large; + margin-right: 15rem; + margin-left: 4rem; +} +.rightBlock .userContainer { + width: 30vw; + height: 20vh; + background-color: #3b3a3a; + margin-top: 1.5rem; + display: flex; + flex-direction: row; +} +.rightBlock .userContainer img { + height: 40px; + width: 40px; + border-radius: 30%; + margin: 0.5rem; +} +.rightBlock .userContainer__name { + margin-top: 1rem; + font-size: medium; +} +.rightBlock .userContainer__headphones { + width: 70px; + position: relative; + left: 700px; + bottom: 110px; + border: 2px #18191b solid; + border-radius: 20%; + display: flex; +} +.rightBlock .userContainer__headphones i { + margin-left: 5px; +} +.rightBlock .userContainer__caption { + margin-top: 4.5rem; + font-variant-position: initial; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.css.map b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.css.map new file mode 100644 index 000000000..6db2b07c1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;ACCF;;ADEA;EACE,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,iCAAA;EACA,wEAAA;ACCF;ADCE;EACE,YAAA;EACA,UAAA;EACA,iCAAA;EACA,aAAA;EACA,sBAAA;ACCJ;ADCI;EACE,iBAAA;EACA,yBAAA;EACA,kBAAA;EACA,iBAAA;ACCN;ADEI;EACE,WAAA;EACA,aAAA;EACA,eAAA;EACA,oCAAA;ACAN;ADGI;EACE,cAAA;EACA,aAAA;EACA,kBAAA;EACA,yBAAA;EACA,uBAAA;EACA,eAAA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACDN;ADEM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ACAR;ADEM;EACE,kBAAA;ACAR;ADKE;EACE,WAAA;EACA,aAAA;EACA,iCAAA;EACA,gBAAA;EACA,4BAAA;ACHJ;ADKI;EACE,iCAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;ACHN;ADMI;EACE,aAAA;EACA,sBAAA;EAEA,oBAAA;EACA,iBAAA;EACA,yBAAA;EACA,YAAA;ACLN;ADOI;EACE,oCAAA;ACLN;ADQI;EACE,gBAAA;EACA,iBAAA;EACA,yBAAA;ACNN;ADSI;EACE,aAAA;EACA,sBAAA;EACA,eAAA;EACA,SAAA;ACPN;ADQM;EACE,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,YAAA;ACNR;ADQQ;EACE,WAAA;EACA,YAAA;EACA,oBAAA;EACA,mBAAA;ACNV;ADSQ;EACE,aAAA;ACPV;ADaE;EACE,aAAA;EACA,YAAA;EACA,iCAAA;EACA,gBAAA;EACA,yBAAA;ACXJ;ADYI;EACE,eAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,YAAA;ACVN;ADYI;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;ACVN;ADWM;EACE,gBAAA;EACA,mBAAA;EACA,iBAAA;ACTR;ADYI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;ACVN;ADaM;EACE,YAAA;EACA,WAAA;EACA,kBAAA;EACA,cAAA;ACXR;ADaM;EACE,gBAAA;EACA,iBAAA;ACXR;ADaM;EACE,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;ACXR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.scss b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.scss new file mode 100644 index 000000000..eabb842d4 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shai-li-discord/style.scss @@ -0,0 +1,198 @@ +body { + margin: 0; +} + +.container { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; + background-color: rgb(52, 50, 50); + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + + .groups { + height: 100%; + width: 5vw; + background-color: rgb(52, 50, 50); + display: flex; + flex-direction: column; + + &__appName { + font-size: 0.9rem; + color: rgb(155, 151, 151); + text-align: center; + padding-top: 10px; + } + + hr { + width: 60px; + height: 0.3px; + border-width: 0; + background-color: rgb(155, 151, 151); + } + + &__group { + height: 3.5rem; + width: 3.5rem; + border-radius: 50%; + background-color: #555657; + color: rgb(44, 177, 44); + font-size: 2rem; + margin: 0.4rem; + display: flex; + align-items: center; + justify-content: center; + img { + width: 100%; + height: 100%; + border-radius: 50%; + } + &--discord { + border-radius: 30%; + } + } + } +} + +.home { + width: 20vw; + height: 100vh; + background-color: rgb(86, 82, 82); + margin-top: 20px; + border-top-left-radius: 10px; + + input { + background-color: rgb(52, 50, 50); + border: none; + margin-left: 40px; + margin-top: 7px; + border-radius: 7px; + padding: 5px; + } + + &__categories { + display: flex; + flex-direction: column; + // align-items: center; + padding: 0.5rem 3rem; + margin: 2rem 3rem; + color: rgb(163, 162, 159); + opacity: 80%; + } + &__categories:hover { + background-color: rgb(105, 107, 108); + } + + h5 { + text-align: left; + margin-left: 20px; + color: rgb(199, 199, 199); + } + + &__members { + display: flex; + flex-direction: column; + padding: 0.7rem; + gap: 1rem; + &__member { + color: rgb(233, 238, 238); + display: flex; + align-items: center; + margin-left: 10px; + padding: 5px; + + img { + width: 50px; + height: 50px; + border-radius: 100px; + align-items: center; + } + + .name { + padding: 10px; + } + } + } +} + +.rightBlock { + height: 100vh; + width: 100vw; + background-color: rgb(94, 98, 98); + margin-top: 20px; + color: rgb(222, 221, 221); + + &__topNav { + font-size: 1rem; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 20px; + } + + &__stages { + display: flex; + flex-direction: row; + &__stage { + display: flex; + flex-direction: column; + justify-content: space-between; + + &__title { + font-size: large; + margin-right: 15rem; + margin-left: 4rem; + } + } + } + + .userContainer { + width: 30vw; + height: 20vh; + background-color: #3b3a3a; + margin-top: 1.5rem; + display: flex; + flex-direction: row; + + img { + height: 40px; + width: 40px; + border-radius: 30%; + margin: 0.5rem; + } + &__name { + margin-top: 1rem; + font-size: medium; + } + + &__headphones { + width: 70px; + position: relative; + left: 700px; + bottom: 110px; + border: 2px #18191b solid; + border-radius: 20%; + display: flex; + i { + margin-left: 5px; + } + } + + &__caption { + margin-top: 4.5rem; + font-variant-position: initial; + } + } +} + +// background-color: #555657; +// height: 20px; +// width: 40px; +// border-radius: 30%; +// font-size: small; +// text-align: center; +// margin-top: 0.8rem; +// margin-right: 0.5rem; +// align-items: center; + +// } diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/diagram.txt b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/diagram.txt new file mode 100644 index 000000000..0bc33892f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/diagram.txt @@ -0,0 +1 @@ +https://drive.google.com/file/d/16EQLw4zi6sPX2SsBCmF92fbbbrf0WAgn/view?usp=sharing diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/dist/style.css b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/dist/style.css new file mode 100644 index 000000000..51431ca3a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/dist/style.css @@ -0,0 +1,96 @@ +body { + margin-top: 10px; + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; + width: 400px; +} + +.wtsp { + border: solid black 1px; + border-radius: 25px; + overflow: hidden; +} +.wtsp__header { + background-color: lightgray; + width: auto; + height: 100px; +} +.wtsp__body { + width: 350px; + height: min(640px); + display: grid; + align-items: center; + margin: auto; +} +.wtsp__body__profile { + height: 70px; + width: auto; + display: flex; + flex-direction: row; + align-items: center; + border-bottom: 1px solid black; +} +.wtsp__body__profile--picture { + margin-left: 10px; + width: 20%; + height: 80%; + border-radius: 100px; + overflow: hidden; +} +.wtsp__body__profile--picture img { + max-width: 100%; + height: auto; +} +.wtsp__body__profile--filler { + width: 5%; +} +.wtsp__body__profile--details { + background-color: white; + margin-left: 20px; + width: 60%; + height: 50px; + display: flex; + flex-direction: column; +} +.wtsp__body__profile--details--user_name { + height: 10px; + font-size: 12px; + font-weight: bold; + padding: 4px; +} +.wtsp__body__profile--details--status_details { + max-width: 100%; + display: flex; + flex-direction: row; +} +.wtsp__body__profile--details--status_details--call_status { + max-width: 10%; + height: 10px; + font-size: 10px; + padding: 5px; +} +.wtsp__body__profile--details--status_details--call_status img { + color: black; + max-width: 100%; + height: auto; +} +.wtsp__body__profile--details--status_details--date_time { + font-size: 10px; + padding: 5px; + padding-left: 0px; +} +.wtsp__body__profile--video_icon { + width: 25%; + height: 30px; + display: flex; +} +.wtsp__body__profile--video_icon img { + max-width: 100%; + height: auto; +} +.wtsp__footer { + background-color: #be7fac; + width: auto; + height: 100px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/icons/R.png b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/icons/R.png new file mode 100644 index 000000000..17bb98c08 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/icons/R.png differ diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/icons/icon-movie.jpg b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/icons/icon-movie.jpg new file mode 100644 index 000000000..d5309488d Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/icons/icon-movie.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/index.html b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/index.html new file mode 100644 index 000000000..d5426992e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/index.html @@ -0,0 +1,167 @@ + + + + + + + Document + + + +
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+
+
+ +
+
+
Username 01
+
+
+ +
+
Yesterday, 3.20 pm
+
+
+
+
+ +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/media/Shalom.jpg b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/media/Shalom.jpg new file mode 100644 index 000000000..78a669285 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/media/Shalom.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.css b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.css new file mode 100644 index 000000000..efaffe520 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.css @@ -0,0 +1,96 @@ +body { + margin-top: 10px; + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; + width: 400px; +} + +.wtsp { + border: solid black 1px; + border-radius: 25px; + overflow: hidden; +} +.wtsp__header { + background-color: lightgray; + width: auto; + height: 100px; +} +.wtsp__body { + width: 350px; + height: 640px; + display: grid; + align-items: center; + margin: auto; +} +.wtsp__body__profile { + height: 70px; + width: auto; + display: flex; + flex-direction: row; + align-items: center; + border-bottom: 1px solid black; +} +.wtsp__body__profile--picture { + margin-left: 10px; + width: 20%; + height: 80%; + border-radius: 100px; + overflow: hidden; +} +.wtsp__body__profile--picture img { + max-width: 100%; + height: auto; +} +.wtsp__body__profile--filler { + width: 5%; +} +.wtsp__body__profile--details { + background-color: white; + margin-left: 20px; + width: 60%; + height: 50px; + display: flex; + flex-direction: column; +} +.wtsp__body__profile--details--user_name { + height: 10px; + font-size: 12px; + font-weight: bold; + padding: 4px; +} +.wtsp__body__profile--details--status_details { + max-width: 100%; + display: flex; + flex-direction: row; +} +.wtsp__body__profile--details--status_details--call_status { + max-width: 10%; + height: 10px; + font-size: 10px; + padding: 5px; +} +.wtsp__body__profile--details--status_details--call_status img { + color: black; + max-width: 100%; + height: auto; +} +.wtsp__body__profile--details--status_details--date_time { + font-size: 10px; + padding: 5px; + padding-left: 0px; +} +.wtsp__body__profile--video_icon { + width: 25%; + height: 30px; + display: flex; +} +.wtsp__body__profile--video_icon img { + max-width: 100%; + height: auto; +} +.wtsp__footer { + background-color: rgb(190, 127, 172); + width: auto; + height: 100px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.css.map b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.css.map new file mode 100644 index 000000000..47d2dfb8d --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACG,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;ACCH;;ADCA;EACI,uBAAA;EACA,mBAAA;EACA,gBAAA;ACEJ;ADAI;EACI,2BAAA;EACA,WAAA;EACA,aAAA;ACER;ADCI;EAEI,WAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACAR;ADEQ;EACI,uBAAA;EACA,YAAA;EACA,WAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,6BAAA;ACAZ;ADGY;EACI,mCAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;EACA,oBAAA;ACDhB;ADKY;EACI,kCAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;ACHhB;ADMY;EACI,iCAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;ACJhB;ADOY;EACI,mCAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;ACLhB;ADQY;EACI,kCAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;ACNhB;ADYI;EACI,oCAAA;EACA,WAAA;EACA,aAAA;ACVR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.scss b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.scss new file mode 100644 index 000000000..82e155152 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shalom Copperman/style.scss @@ -0,0 +1,123 @@ +body { + margin-top:10px; + margin-bottom: 10px; + margin-left:auto; + margin-right: auto; + width: 400px; +} +.wtsp { + border: solid black 1px; + border-radius: 25px; + overflow:hidden; + + &__header { + background-color: lightgray; + width:auto; + height: 100px; + } + + &__body { + width:350px; + height: min(640px); + display: grid; + align-items: center; + margin: auto; + + &__profile { + // background-color: green; + height: 70px; + width: auto; + // border-radius: 25px; + display: flex; + flex-direction: row; + align-items: center; + border-bottom: 1px solid black; + + + &--picture { + margin-left: 10px; + width: 20%; + height:80%; + border-radius: 100px; + overflow: hidden; + img { + max-width: 100%; + height: auto; + } + + } + + &--filler { + width: 5%; + } + + &--details { + background-color: white; + margin-left: 20px; + width: 60%; + height: 50px; + display: flex; + flex-direction: column; + + &--user_name { + // background-color: rgb(68, 83, 11); + height: 10px; + font-size: 12px; + font-weight: bold; + padding: 4px; + + } + + &--status_details { + max-width: 100%; + display: flex; + flex-direction: row; + + &--call_status { + // background-color: rgb(33, 35, 168); + max-width: 10%; + height: 10px; + font-size: 10px; + padding: 5px; + + img { + color:black; + max-width: 100%; + height: auto; + } + } + + &--date_time { + // background-color: rgb(12, 147, 156); + // height: 10px; + // width: 40%; + font-size: 10px; + padding: 5px; + padding-left: 0px; + } + + } + + } + + &--video_icon { + // background-color: yellow; + width: 25%; + height: 30px; + display: flex; + + img { + max-width: 100%; + height: auto; + // border-radius: 100px; + } + } + } + } + + &__footer { + background-color: rgb(190, 127, 172); + width:auto; + height: 100px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/.vscode/settings.json b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/discord.html b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/discord.html new file mode 100644 index 000000000..32e36833c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/discord.html @@ -0,0 +1,247 @@ + + + + + + + + + + BEM discord + + + +
+ | + + +
+ +
+ + game_img + _____ + + game_img + + game_img + + game_img + + + game_img + +
+ +
+
+ +
+ + + + + + + + + +
+ +
+ +
+
+ +
+

Home

+
+
+

Frinds

+
+
+

Nitro

+
+

DIRECT MESSAGES

+
+ Sonicman +
+
+
+ + MrLocke + +
+
+
+ + Secret Squad +
+ + + +
+ + + + + + + + +
+
+

Home

+
+

Live Stages

+
+ + 44 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+

acetaminophen

+

pekchpbro

+ + + + + +
+ + + +
+ + 89 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+ + + + + + +
+ + + +
+ + 82 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+

acetaminophen

+

pekchpbro

+ + + + + +
+ +
+ + 44 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+

acetaminophen

+

pekchpbro

+ + + + + +
+
+ + 44 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+

acetaminophen

+

pekchpbro

+ + + + + +
+
+ + 44 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+

acetaminophen

+

pekchpbro

+ + + + + +
+
+ + 65 +

Biocord

+

Sever you are in

+ +

Dr.smith on COVID-19 Vaccine the Bay area

+ +

sonicman

+

ibuprofan

+

acetaminophen

+

pekchpbro

+ + + + + +
+ + +
+
+ +
+ + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/dist/style.css b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/dist/style.css new file mode 100644 index 000000000..6576e60e4 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/dist/style.css @@ -0,0 +1,300 @@ +body { + margin: 0; + background-color: #2f2f2f; + overflow: hidden; +} +body ::-webkit-scrollbar { + width: 20px; +} +body ::-webkit-scrollbar-track { + background: #262726; +} +body ::-webkit-scrollbar-thumb { + background: #724848; + border-radius: 10px; +} + +.icon_top { + display: flex; + justify-content: flex-end; + justify-content: space-between; + margin-left: 80vw; + margin-right: 2.5vw; + position: relative; + top: 20px; + color: #807f7f; + font-size: x-large; +} +.icon_top .icon_top_right:hover { + color: aliceblue; +} + +.discord_games_wraps { + position: relative; + top: 20px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 8px; + height: 500px; +} +.discord_games_wraps i { + color: #6f6767; +} +.discord_games_wraps img:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; +} +.discord_games_wraps__all_the_games_discord { + position: relative; + border-radius: 10px; + width: 45px; + height: 35px; +} +.discord_games_wraps__all_the_games { + position: relative; + top: 10px; + border-radius: 50%; + width: 40px; + height: 40px; +} +.discord_games_wraps__circle { + position: relative; + background-color: #515150; + border-radius: 50%; + width: 45px; + height: 45px; +} +.discord_games_wraps__circle .icon_1 { + position: absolute; + top: 25%; + left: 25%; + font-size: 22px; + color: #28b00a; +} +.discord_games_wraps__circle .icon_2 { + position: absolute; + top: 25%; + left: 25%; + font-size: 22px; + color: #fb95f9; +} +.discord_games_wraps__circle:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; +} +.discord_games_wraps__discord_child { + position: absolute; + top: 14px; + left: 70px; + background-color: #7b7878; + width: 100vw; + height: 100vh; + display: grid; + grid-template-areas: " search liveStages liveStages liveStages activites activites "; +} +.discord_games_wraps__discord_child input { + position: relative; + height: 25px; + width: 210px; + background-color: #202020; + border-radius: 2px; + top: 15px; + left: 10%; + border: none; + color: whitesmoke; +} +.discord_games_wraps__discord_child .i { + position: absolute; + font-size: medium; + color: #565454; + top: 20px; + left: 217px; +} +.discord_games_wraps__discord_child .p1 { + margin-top: 5px; + margin-left: 10px; + margin-top: 20px; + font-size: larger; +} +.discord_games_wraps__discord_child .icon { + color: #abacac; +} +.discord_games_wraps__discord_child .p1:hover { + background-color: #2f2f2f; + color: azure; +} +.discord_games_wraps__discord_child .p1:hover .icon { + color: azure; +} +.discord_games_wraps__discord_child .p2 { + margin-left: 15%; + font-size: large; + color: azure; +} +.discord_games_wraps__discord_child .img_s { + margin-left: 10px; + width: 35px; + height: 35px; + border: solid 2px; + border-color: crimson crimson yellowgreen yellowgreen; + border-radius: 50%; +} +.discord_games_wraps__discord_child .text_img { + position: relative; + bottom: 13px; + left: 12px; + color: black; + font-size: large; +} +.discord_games_wraps__discord_child .titel_live_stages { + position: absolute; + margin-left: 25%; + color: white; +} +.discord_games_wraps__discord_child--search { + grid-area: search; + background-color: #424343; +} +.discord_games_wraps__discord_child--liveStages { + grid-area: liveStages; + overflow-y: auto; + background-color: #4b4949; +} +.discord_games_wraps__discord_child--liveStages .titel_live_stages { + position: relative; + margin-left: 25px; + color: white; +} +.discord_games_wraps__discord_child--liveStages .div_ls { + position: relative; + width: 80%; + height: 150px; + margin-left: 10%; + margin-right: 10%; + background-color: #40403f; + margin-top: 20px; + border-radius: 10px; +} +.discord_games_wraps__discord_child--liveStages .aoz { + position: absolute; + top: 9px; + background-color: black; + color: azure; + padding: 2px; + padding-left: 6px; + padding-right: 25px; + border-radius: 20%; + right: 10px; +} +.discord_games_wraps__discord_child--liveStages .aoz_number { + color: azure; + position: absolute; + top: 10px; + right: 13px; + font-size: medium; +} +.discord_games_wraps__discord_child--liveStages .a { + position: absolute; + top: 6px; + left: 8px; + border-radius: 10px; + position: absolute; + width: 35px; + height: 35px; +} +.discord_games_wraps__discord_child--liveStages .pl { + color: azure; + position: relative; + font-size: medium; + display: inline; + top: 10px; + left: 50px; +} +.discord_games_wraps__discord_child--liveStages .ps { + color: azure; + position: absolute; + font-size: 10px; + display: inline; + top: 21px; + left: 50px; +} +.discord_games_wraps__discord_child--liveStages .pt { + color: azure; + position: absolute; + font-size: 15px; + display: inline; + top: 41px; + left: 10px; +} +.discord_games_wraps__discord_child--liveStages .pimg_1 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 76px; + left: 37px; +} +.discord_games_wraps__discord_child--liveStages .pimg_2 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 105px; + left: 38px; +} +.discord_games_wraps__discord_child--liveStages .gif { + position: absolute; + top: 88px; + left: 116px; + width: 140px; + height: 50px; + border-radius: 10px; +} +.discord_games_wraps__discord_child--liveStages .pimg_3 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 76px; + left: 177px; +} +.discord_games_wraps__discord_child--liveStages .pimg_4 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 105px; + left: 177px; +} +.discord_games_wraps__discord_child--liveStages .b, .discord_games_wraps__discord_child--liveStages .c, .discord_games_wraps__discord_child--liveStages .d, .discord_games_wraps__discord_child--liveStages .g { + border-radius: 50%; + position: relative; + top: 60px; + width: 20px; + height: 20px; +} +.discord_games_wraps__discord_child--liveStages .b { + position: absolute; + top: 114px; + left: 14px; +} +.discord_games_wraps__discord_child--liveStages .c { + position: absolute; + top: 86px; + left: 11px; +} +.discord_games_wraps__discord_child--liveStages .d { + position: absolute; + top: 86px; + left: 151px; +} +.discord_games_wraps__discord_child--liveStages .g { + position: absolute; + top: 114px; + left: 151px; +} +.discord_games_wraps__discord_child--activites { + grid-area: activites; + background-color: #767575; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/a.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/a.jpg new file mode 100644 index 000000000..a4155eeb8 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/a.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/b.png b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/b.png new file mode 100644 index 000000000..c29101864 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/b.png differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/c.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/c.jpg new file mode 100644 index 000000000..b5d521527 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/c.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/d.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/d.jpg new file mode 100644 index 000000000..32fa0f83e Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/d.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/e.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/e.jpg new file mode 100644 index 000000000..86c749478 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/e.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/f.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/f.jpg new file mode 100644 index 000000000..cc250116f Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/f.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/g.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/g.jpg new file mode 100644 index 000000000..d613a049c Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/g.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/h.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/h.jpg new file mode 100644 index 000000000..5d8ee73ad Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/h.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/l.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/l.jpg new file mode 100644 index 000000000..5098d7059 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/l.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/m (2).jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/m (2).jpg new file mode 100644 index 000000000..64f4e75af Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/m (2).jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/m.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/m.jpg new file mode 100644 index 000000000..36849c06d Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/m.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/r.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/r.jpg new file mode 100644 index 000000000..684b27952 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/r.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/s.png b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/s.png new file mode 100644 index 000000000..c96e8737a Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/s.png differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/t.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/t.jpg new file mode 100644 index 000000000..305c4b11b Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/t.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/x.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/x.jpg new file mode 100644 index 000000000..c336bc6f8 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/x.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/y.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/y.jpg new file mode 100644 index 000000000..882c63fa3 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/y.jpg differ diff --git "a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/\327\225.jpg" "b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/\327\225.jpg" new file mode 100644 index 000000000..305c4b11b Binary files /dev/null and "b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img/\327\225.jpg" differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/cc.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/cc.jpg new file mode 100644 index 000000000..c13755305 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/cc.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/gif.gif b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/gif.gif new file mode 100644 index 000000000..6968ea2e5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/gif.gif differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hh.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hh.jpg new file mode 100644 index 000000000..184efd726 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hh.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hhh.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hhh.jpg new file mode 100644 index 000000000..c3d15f44d Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hhh.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hkj.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hkj.jpg new file mode 100644 index 000000000..9da90ad55 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/hkj.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ii.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ii.jpg new file mode 100644 index 000000000..8adb5b6ea Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ii.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/kk.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/kk.jpg new file mode 100644 index 000000000..1785502ea Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/kk.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ll.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ll.jpg new file mode 100644 index 000000000..1a838cac0 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ll.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/nn.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/nn.jpg new file mode 100644 index 000000000..894ace099 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/nn.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/qq.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/qq.jpg new file mode 100644 index 000000000..570ae8c2a Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/qq.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/roles-users2.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/roles-users2.jpg new file mode 100644 index 000000000..691d0074c Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/roles-users2.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/rr.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/rr.jpg new file mode 100644 index 000000000..8f7b27ba6 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/rr.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ss.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ss.jpg new file mode 100644 index 000000000..3f951df97 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/ss.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/yy.jpg b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/yy.jpg new file mode 100644 index 000000000..692064f0e Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/img2/yy.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.css b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.css new file mode 100644 index 000000000..e5a34c873 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.css @@ -0,0 +1,300 @@ +body { + margin: 0; + background-color: rgb(47, 47, 47); + overflow: hidden; +} +body ::-webkit-scrollbar { + width: 20px; +} +body ::-webkit-scrollbar-track { + background: rgb(38, 39, 38); +} +body ::-webkit-scrollbar-thumb { + background: rgb(114, 72, 72); + border-radius: 10px; +} + +.icon_top { + display: flex; + justify-content: flex-end; + justify-content: space-between; + margin-left: 80vw; + margin-right: 2.5vw; + position: relative; + top: 20px; + color: rgb(128, 127, 127); + font-size: x-large; +} +.icon_top .icon_top_right:hover { + color: aliceblue; +} + +.discord_games_wraps { + position: relative; + top: 20px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 8px; + height: 500px; +} +.discord_games_wraps i { + color: rgb(111, 103, 103); +} +.discord_games_wraps img:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; +} +.discord_games_wraps__all_the_games_discord { + position: relative; + border-radius: 10px; + width: 45px; + height: 35px; +} +.discord_games_wraps__all_the_games { + position: relative; + top: 10px; + border-radius: 50%; + width: 40px; + height: 40px; +} +.discord_games_wraps__circle { + position: relative; + background-color: rgb(81, 81, 80); + border-radius: 50%; + width: 45px; + height: 45px; +} +.discord_games_wraps__circle .icon_1 { + position: absolute; + top: 25%; + left: 25%; + font-size: 22px; + color: rgb(40, 176, 10); +} +.discord_games_wraps__circle .icon_2 { + position: absolute; + top: 25%; + left: 25%; + font-size: 22px; + color: rgb(251, 149, 249); +} +.discord_games_wraps__circle:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; +} +.discord_games_wraps__discord_child { + position: absolute; + top: 14px; + left: 70px; + background-color: rgb(123, 120, 120); + width: 100vw; + height: 100vh; + display: grid; + grid-template-areas: " search liveStages liveStages liveStages activites activites "; +} +.discord_games_wraps__discord_child input { + position: relative; + height: 25px; + width: 210px; + background-color: rgb(32, 32, 32); + border-radius: 2px; + top: 15px; + left: 10%; + border: none; + color: whitesmoke; +} +.discord_games_wraps__discord_child .i { + position: absolute; + font-size: medium; + color: rgb(86, 84, 84); + top: 20px; + left: 217px; +} +.discord_games_wraps__discord_child .p1 { + margin-top: 5px; + margin-left: 10px; + margin-top: 20px; + font-size: larger; +} +.discord_games_wraps__discord_child .icon { + color: rgb(171, 172, 172); +} +.discord_games_wraps__discord_child .p1:hover { + background-color: rgb(47, 47, 47); + color: azure; +} +.discord_games_wraps__discord_child .p1:hover .icon { + color: azure; +} +.discord_games_wraps__discord_child .p2 { + margin-left: 15%; + font-size: large; + color: azure; +} +.discord_games_wraps__discord_child .img_s { + margin-left: 10px; + width: 35px; + height: 35px; + border: solid 2px; + border-color: crimson crimson yellowgreen yellowgreen; + border-radius: 50%; +} +.discord_games_wraps__discord_child .text_img { + position: relative; + bottom: 13px; + left: 12px; + color: rgb(0, 0, 0); + font-size: large; +} +.discord_games_wraps__discord_child .titel_live_stages { + position: absolute; + margin-left: 25%; + color: white; +} +.discord_games_wraps__discord_child--search { + grid-area: search; + background-color: rgb(66, 67, 67); +} +.discord_games_wraps__discord_child--liveStages { + grid-area: liveStages; + overflow-y: auto; + background-color: rgb(75, 73, 73); +} +.discord_games_wraps__discord_child--liveStages .titel_live_stages { + position: relative; + margin-left: 25px; + color: white; +} +.discord_games_wraps__discord_child--liveStages .div_ls { + position: relative; + width: 80%; + height: 150px; + margin-left: 10%; + margin-right: 10%; + background-color: rgb(64, 64, 63); + margin-top: 20px; + border-radius: 10px; +} +.discord_games_wraps__discord_child--liveStages .aoz { + position: absolute; + top: 9px; + background-color: black; + color: azure; + padding: 2px; + padding-left: 6px; + padding-right: 25px; + border-radius: 20%; + right: 10px; +} +.discord_games_wraps__discord_child--liveStages .aoz_number { + color: azure; + position: absolute; + top: 10px; + right: 13px; + font-size: medium; +} +.discord_games_wraps__discord_child--liveStages .a { + position: absolute; + top: 6px; + left: 8px; + border-radius: 10px; + position: absolute; + width: 35px; + height: 35px; +} +.discord_games_wraps__discord_child--liveStages .pl { + color: azure; + position: relative; + font-size: medium; + display: inline; + top: 10px; + left: 50px; +} +.discord_games_wraps__discord_child--liveStages .ps { + color: azure; + position: absolute; + font-size: 10px; + display: inline; + top: 21px; + left: 50px; +} +.discord_games_wraps__discord_child--liveStages .pt { + color: azure; + position: absolute; + font-size: 15px; + display: inline; + top: 41px; + left: 10px; +} +.discord_games_wraps__discord_child--liveStages .pimg_1 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 76px; + left: 37px; +} +.discord_games_wraps__discord_child--liveStages .pimg_2 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 105px; + left: 38px; +} +.discord_games_wraps__discord_child--liveStages .gif { + position: absolute; + top: 88px; + left: 116px; + width: 140px; + height: 50px; + border-radius: 10px; +} +.discord_games_wraps__discord_child--liveStages .pimg_3 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 76px; + left: 177px; +} +.discord_games_wraps__discord_child--liveStages .pimg_4 { + color: azure; + position: absolute; + font-size: 12px; + display: inline; + top: 105px; + left: 177px; +} +.discord_games_wraps__discord_child--liveStages .b, .discord_games_wraps__discord_child--liveStages .c, .discord_games_wraps__discord_child--liveStages .d, .discord_games_wraps__discord_child--liveStages .g { + border-radius: 50%; + position: relative; + top: 60px; + width: 20px; + height: 20px; +} +.discord_games_wraps__discord_child--liveStages .b { + position: absolute; + top: 114px; + left: 14px; +} +.discord_games_wraps__discord_child--liveStages .c { + position: absolute; + top: 86px; + left: 11px; +} +.discord_games_wraps__discord_child--liveStages .d { + position: absolute; + top: 86px; + left: 151px; +} +.discord_games_wraps__discord_child--liveStages .g { + position: absolute; + top: 114px; + left: 151px; +} +.discord_games_wraps__discord_child--activites { + grid-area: activites; + background-color: rgb(118, 117, 117); +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.css.map b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.css.map new file mode 100644 index 000000000..f7929fe93 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.scss b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.scss new file mode 100644 index 000000000..ee9753939 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Shlomi_Azenkot/style.scss @@ -0,0 +1,380 @@ + + + + body{ + margin: 0; + background-color: rgb(47, 47, 47); + overflow: hidden; + ::-webkit-scrollbar{ + width: 20px; + + } + ::-webkit-scrollbar-track{ + background:rgb(38, 39, 38); + + } + ::-webkit-scrollbar-thumb{ + background: rgb(114, 72, 72); + border-radius: 10px; + + + + } + + +} +.icon_top{ +display: flex; +justify-content: flex-end; +justify-content: space-between; +margin-left:80vw; +margin-right:2.5vw; +position: relative; +top: 20px; +color: rgb(128, 127, 127); +font-size:x-large ; + + +.icon_top_right:hover{ + color:aliceblue; + +} + +} + + + + + .discord_games_wraps{ + position: relative; + top: 20px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 8px; + height: 500px; + i{ + color:rgb(111, 103, 103); + } + img:hover{ + transform: scale(1.2); + transition: transform ease-in .2s ; + } + + + &__all_the_games_discord{ + position: relative; + border-radius: 10px; + width: 45px; + height: 35px; + + + } + &__all_the_games{ + position: relative; + top: 10px; + border-radius: 50%; + width: 40px; + height: 40px; + + + } + + + + &__circle{ + position: relative; + background-color: rgb(81, 81, 80); + border-radius: 50%; + width: 45px; + height: 45px; + .icon_1{ + position: absolute; + top: 25%; + left: 25%; + font-size: 22px; + color: rgb(40, 176, 10); + + } + .icon_2{ + position: absolute; + top:25%; + left:25%; + font-size: 22px; + color: rgb(251, 149, 249); + + } + } + &__circle:hover{ + transform: scale(1.2); + transition: transform ease-in .2s ; + } + + + + &__discord_child{ + position: absolute; + top: 14px; + left: 70px; + background-color: rgb(123, 120, 120); + width: 100vw; + height: 100vh; + display: grid; + + grid-template-areas: + " search liveStages liveStages liveStages activites activites "; + input{ + position: relative; + height:25px; + width: 210px; + background-color: rgb(32, 32, 32) ; + border-radius: 2px; + top: 15px; + left: 10%; + border: none; + color: whitesmoke; + } + + .i{ + position: absolute; + font-size:medium; + color: rgb(86, 84, 84); + top: 20px; + left: 217px; + } + + .p1{ + margin-top: 5px; + margin-left: 10px; + margin-top: 20px; + font-size:larger; + } + .icon{ + color:rgb(171, 172, 172); + } + .p1:hover{ + background-color: rgb(47, 47, 47); + color: azure; + .icon{ + color: azure; + } + } + .p2{ + margin-left: 15%; + font-size: large; + color: azure; + } + .img_s{ + margin-left: 10px; + width: 35px; + height: 35px; + border: solid 2px; + border-color:crimson crimson yellowgreen yellowgreen; + border-radius: 50%; + } + .text_img{ + position: relative; + bottom: 13px; + left: 12px; + color: rgb(0, 0, 0); + font-size: large; + + } + .titel_live_stages{ + position: absolute; + margin-left: 25%; + color: white; + } + + + + + &--search { + grid-area:search ; + background-color:rgb(66, 67, 67); + + } + &--liveStages{ + grid-area: liveStages ; + + overflow-y: auto; + + background-color: rgb(75, 73, 73); + .titel_live_stages{ + position: relative; + margin-left: 25px; + color: white; + + } + + .div_ls{ + position: relative; + width: 80%; + height:150px; + margin-left: 10%; + margin-right: 10%; + background-color: rgb(64, 64, 63); + margin-top: 20px; + border-radius: 10px; + + } + + + + .aoz{ + position: absolute; + top:9px; + background-color: black; + color: azure; + padding:2px; + padding-left: 6px; + padding-right: 25px; + border-radius: 20%; + right: 10px; + } + .aoz_number{ + color: azure; + position: absolute; + top:10px; + right: 13px; + font-size: medium; + } + .a{ + position: absolute; + top: 6px; + left: 8px; + border-radius: 10px; + position: absolute; + width: 35px; + height: 35px; + } + .pl{ + color:azure; + position: relative; + font-size: medium; + display: inline; + top: 10px; + left: 50px; + } + .ps{ + color:azure; + position: absolute; + font-size: 10px; + display: inline; + top: 21px; + left: 50px; + } + .pt{ + color:azure; + position: absolute; + font-size: 15px; + display: inline; + top: 41px; + left: 10px; + } + .pimg_1{ + color:azure; + position: absolute; + font-size: 12px; + display: inline; + top: 76px; + left: 37px; + } + .pimg_2{ + color:azure; + position: absolute; + font-size: 12px; + display: inline; + top: 105px; + left: 38px; + } + + .gif{ + position: absolute; + top: 88px; + left: 116px; + width: 140px; + height: 50px; + border-radius: 10px; + } + .pimg_3{ + color:azure; + position: absolute; + font-size: 12px; + display: inline; + top: 76px; + left: 177px; + } + .pimg_4{ + color:azure; + position: absolute; + font-size: 12px; + display: inline; + top: 105px; + left: 177px; + } + + + + + + + +.b,.c,.d,.g{ + border-radius: 50%; + position: relative; + top: 60px; + width: 20px; + height: 20px; +} +.b{ + position: absolute; + top: 114px; + left: 14px; +} +.c{ + position: absolute; + top: 86px; + left: 11px; +} +.d{ + position: absolute; + top: 86px; + left: 151px; +} +.g{ + position: absolute; + top: 114px; + left: 151px; +} + + } + + + + + + + + + + + + + + &--activites{ + grid-area: activites; + background-color: rgb(118, 117, 117); + } + } + +} + + + + + + + + + diff --git a/02-position-box-model/Tanya-Holczer/Alice.png b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/Alice.png similarity index 100% rename from 02-position-box-model/Tanya-Holczer/Alice.png rename to 01-HTML-CSS/07-BEM/HW/TanyaHolczer/Alice.png diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/TanyaHolczer.drawio b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/TanyaHolczer.drawio new file mode 100644 index 000000000..df0477368 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/TanyaHolczer.drawio @@ -0,0 +1 @@ +7V3ZcqM4FP2aVM08xMWO/RhnmempnqmuysM8dsmgYHUAeUCOk/76EZuNFhvctgA70FUd54ZF3HPuKoFvzPvo/Y8ErJZ/Yx+GN4bmv9+YDzeGoTvajP7IJB+lxNW0QhIkyC9lO8Ez+glLYbXbGvkwZXYkGIcErVihh+MYeoSRgSTBG3a3FxyyV12BAAqCZw+EovRf5JNlIZ0a7k7+J0TBsrqy7pR3HIFq5/JO0iXw8aYmMh9vzPsEY1J8it7vYZhpr9JLcdzTnr9uB5bAmLQ54Dbwvqz8R3D7Zfns3Hl/uZskubXtcnDko7pj6FMFlL/ihCxxgGMQPu6k8wSvYx9mp9Xob7t9vmK8okKdCn9AQj5KNMGaYCpakigs//qCY3KPQ5zkVzSf8o3Ki7FkA9h7j6UoxevEgwduTN9qmHIT4giS5IMel8AQEPTGnh+UHAm2+20P/YYRvbKhlYS2ZiWYJZ1vpxp7CgKSAJLyqB0Y9ENtGDtRDtERcJUDfgPhurwFAb50g6IQxBlOKR0NKUHIkHpBYVhT+zz/t1X7G0wIfD+seFGh5QGGVRyx2dmI6zqFbFmzD4tXWF3njLaOVY1tNutms0QEPq9AzpwN9VgsLUG6KlzIC3rP6D3fmmymvRAsYDgH3muQ87+mSCffcoUn+BXKmL2P8fsgCRLgI8gcs71KK7iOMYoKw5nOkLuCqoapOZNguhWeHdMWkLK+qAFgTtv6XfZPoUZtRp+6qE/X1UR9GqpMxJKo0wlJpiM6UicguSoKSUZYRtPOf+ssUs0XWwu49QpV3mV+NVj8pmv0fHRkWv3D78U5y4PzQF3pfyc0X/KtLipG84BSDyd+NSh618W42LFScf0GOIZQTAlLgwSm6CdYhJVfzAJUWrjJ3A2EKIjpZ49CD+lQ5xkxEE0J7so/RMj380C4yvx8jpI9v7EfOIbFuPTCdadQClnadsO/WwkBHQn/HGUu+qTo1cL/tvSyHdu9KardkqjdslXp3WnWOz0LzahhswsVYuT5YDlDgLPlsJRAyDywFAlVQLgjEIyH6QuH6YhDWa32DMRsBKI4S98WYRnNSKAo75XMy58PKArotUK0oP8DEoI0RSCmn+eILNbeKyTfv+IAT9K3oI9SansmNaXUHjylCYAhKaQk4JqqwNVPaxucz45m+aYw8bIaMy992mnqpbewq6NK2EE5NX0PGvsLXl1WcKgjvthAeEIxLSc1qoQMA0r07Lp5WRpTDaSAIBwLCF1ACXkCLzrFX9bwUIe/rOPxWazP7l37LerOq9X+rHfttyg2r1b7uizyd9pr1cUa8wElWYFiaBFMU5pCp2OcORHt8jQm12ev0u86+HqXtlex6lPanqX17foMsd55SmgJ6I8Wdy6LY2cKJalGp3m+Ieb5/yCq2RFuJQ5WktvYncLdIq0fQttQPTAOi4sY96pQyOQ8tipcLmSiSX3la2nGpGcwzBa99XQJVtlH4JFMN02QXFsPt8nrTVi3J4lynbZxnTaIvkLiLatYxptQHqNg8vgGi1AlgOqDdLmNRHXkZXErZ8A3Gi3znpkkRn7ldlhgQnAkCaIkWzcoxlqODZqmT6cPxZBz2kbvQbbqdBKlHoCT/KhVglI4AbGfYOR/Xy1rI5Vy1TRns4OMVMYuncuhLE1StRgSh6FscrpF0TLSK6NXCglBcZAOlVncLIiMWUaXvRDXGJklZRb4uU7gZJ3mBw2SSrox0Wf1rdlnTSfTDrllXECbc38edAJwB3FrsQTNlpVsytYXmEd1xPRPmIsextN1mvCUddjUwdliRcEI54F+CmeeohvttGFqtgjQI5z7V51wfZje4TzquYkRTh7O2cDgPGoVwwgnvxbPGRicLR6DGOHc3/I2BwbnUatcRjg5OF1tYKlQi2cDPnvb/CCgRrN9dto1t9osfub6MikK4nQCYhSBMJ0Q6Psf3xcQJCyusqaU0PnJtn19qHO1m5je2bFsU9BTOpxdOfaEXx5vSybLqtmOOkmq9tP5SSJmzO8CSy5g8cDQwXct1jn07RvEzPoi14wMHnZzWLCLGfjL5a4PGzr4xpSd6JQkBJ0uFrPEhP0uO2pE/uxtzipz34+87CFHdciLc0XfqNWjOBjRv/6uqCVWds/rIIBplnWPnl8FA6aNDJh1ygBxAdU8xN7riL2Cris/Yyli3+ma4epih9oAv1iPs60eppGwACnyJtlzpn30gbbyXvq0fNvdla2I1UUKKFsRa7foBI0UUFj29U8BQ2CAR/UIUEyd9mCCQA7bPd3aRYJW6DX15LjXWspeDNNpsmY7Ah7X8V7SYr2aiMSJLyZ1TA5B/iVuil9MaoulVQzeFmBAZnX23Oo8yzIboqjG4TrtuXtiTy/RMM9ub9vXyOzerdjO4MQz2fyaWvY8hUdRZ7hiTRTBeC1mRqPdHmO3us3zQ9L07tRwHV2A9AIMt0VE3fMmrhMNfPsMfzVJaXM5qeKA6oipamaXo1meZJa33MLb3tsSjnmlVmmqsUouzeUfK1FtlOJ88RICf0jF42WaJZdN9R0qB/WlGPlb6u6yrzLZIXlGQy3adOdPkG2LhZRHS7WpirO8+XN2o6GelNYaMzmqvcXPNq/U7s92Yeyrs9wq+BWWdDkm3ngii29eKa6B3UElYYr9vWspIYNdvWu1J3/viqnZZh2t1tc8sd+Fx7fcaaPH73RmwG3x+My1evzqO64aPf7AjLzxRJbLfYXUL3t8+uvuK/WK3XffTGg+/g8= \ No newline at end of file diff --git a/02-position-box-model/Tanya-Holczer/connor1.png b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/connor1.png similarity index 100% rename from 02-position-box-model/Tanya-Holczer/connor1.png rename to 01-HTML-CSS/07-BEM/HW/TanyaHolczer/connor1.png diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/discord.html b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/discord.html new file mode 100644 index 000000000..968ec2929 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/discord.html @@ -0,0 +1,82 @@ + + + + + + + Discord + + + + + + + +
+
+
+
Discord
+
+
+ + + +
+
+
+ +
+ + + + +
+
+
+ +
+ +

Friends

+
+ +

Nitro

+

Direct Messages         +

+
+
+
+
+ +
+
+
Leilany
+
#7662
+
+
+
+
+ + + +
+ +
+ + +
+ +

No one is around to play with Wumpus

+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/discord.png b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/discord.png new file mode 100644 index 000000000..c71fe213c Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/discord.png differ diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/dist/style.css b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/dist/style.css new file mode 100644 index 000000000..6b4ddafcf --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/dist/style.css @@ -0,0 +1,243 @@ +body { + height: 100vh; + width: 100vw; + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; + color: #f4f4f4; + overflow-x: none; +} + +.container { + background: #36393e; + height: 100vh; + width: 100vw; + position: relative; +} + +.header { + height: 5vh; + text-align: justify; + background-color: #1e2124; + justify-content: space-between; + display: flex; +} + +.left { + display: flex; + position: relative; + justify-content: center; + height: 5vh; + align-items: center; +} + +.right { + display: flex; + position: relative; + justify-content: center; + height: 5vh; + align-items: center; +} + +h5 { + padding: 0; + margin: 0; +} + +.fa-minus { + padding-left: 1vw; +} + +.fa-square { + padding-left: 1vw; +} + +.fa-x { + padding-left: 1vw; +} + +.fa-minus:hover { + color: #7289da; +} + +.fa-square:hover { + color: #7289da; +} + +.fa-x:hover { + color: #7289da; +} + +.menu { + width: 7vw; + height: 95vh; + background-color: #1e2124; + display: inline-block; +} + +.images { + align-items: center; + justify-content: space-around; +} + +.images img { + margin-top: 5px; + border-radius: 50%; +} + +.menu2 { + position: absolute; + display: inline-block; + overflow: auto; + height: 95vh; + width: 27vw; + background-color: #282b30; + left: 7vw; + top: 5vh; +} + +.search { + padding: 0; +} + +.fa-user { + font-size: 30px; + display: inline-block; + padding-right: 2vw; +} + +.fa-bolt { + font-size: 30px; + display: inline-block; + padding-right: 2vw; +} + +h3 { + display: inline-block; +} + +#grey { + color: #a3a3a3; +} + +.user { + position: absolute; + display: flex; + height: 15vh; + width: 27vw; + background-color: #282b30; + left: 7vw; + top: 85vh; + justify-content: space-between; + padding: 0; + margin: 0; +} + +.profile { + margin-top: 20px; + border-radius: 50%; + margin-left: 1vw; +} + +h6 { + padding: 0; + margin: 0; +} + +.username { + padding: 0; + text-align: center; + justify-content: space-between; + justify-content: center; + display: flex; +} + +.fa-microphone { + padding-left: 1vw; +} + +.fa-headphones { + padding-left: 1vw; +} + +.fa-gear { + padding-left: 1vw; + padding-right: 3vw; +} + +.fa-microphone:hover { + color: #7289da; +} + +.fa-headphones:hover { + color: #7289da; +} + +.fa-gear:hover { + color: #7289da; +} + +.name { + margin-top: 15px; + margin-left: 2vw; +} + +#right_options { + padding-top: 10px; +} + +#small { + font-size: 15px; +} + +.navbar { + list-style: none; + margin: 0; + padding: 0; + background-color: #424549; + border-radius: 5px; + overflow: auto; + display: inline-block; + position: absolute; + left: 34vw; + width: 66vw; +} + +.navbar li { + float: left; +} + +.navbar li a { + color: #fff; + text-decoration: none; + display: block; + padding: 15px 20px; +} + +.navbar li a:hover { + background-color: #446190; + color: #f4f4f4; +} + +.wumpus { + position: absolute; + display: inline-block; + height: 85vh; + width: 66vw; + left: 34vw; + top: 15vh; + align-content: center; +} + +#wumpus { + position: relative; + box-sizing: border-box; + left: 40%; + top: 25%; +} + +h2 { + margin: 0; + padding-left: 20vw; + padding-top: 20vh; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/profile.png b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/profile.png new file mode 100644 index 000000000..92ed902f1 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/profile.png differ diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.css b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.css new file mode 100644 index 000000000..6b4ddafcf --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.css @@ -0,0 +1,243 @@ +body { + height: 100vh; + width: 100vw; + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; + color: #f4f4f4; + overflow-x: none; +} + +.container { + background: #36393e; + height: 100vh; + width: 100vw; + position: relative; +} + +.header { + height: 5vh; + text-align: justify; + background-color: #1e2124; + justify-content: space-between; + display: flex; +} + +.left { + display: flex; + position: relative; + justify-content: center; + height: 5vh; + align-items: center; +} + +.right { + display: flex; + position: relative; + justify-content: center; + height: 5vh; + align-items: center; +} + +h5 { + padding: 0; + margin: 0; +} + +.fa-minus { + padding-left: 1vw; +} + +.fa-square { + padding-left: 1vw; +} + +.fa-x { + padding-left: 1vw; +} + +.fa-minus:hover { + color: #7289da; +} + +.fa-square:hover { + color: #7289da; +} + +.fa-x:hover { + color: #7289da; +} + +.menu { + width: 7vw; + height: 95vh; + background-color: #1e2124; + display: inline-block; +} + +.images { + align-items: center; + justify-content: space-around; +} + +.images img { + margin-top: 5px; + border-radius: 50%; +} + +.menu2 { + position: absolute; + display: inline-block; + overflow: auto; + height: 95vh; + width: 27vw; + background-color: #282b30; + left: 7vw; + top: 5vh; +} + +.search { + padding: 0; +} + +.fa-user { + font-size: 30px; + display: inline-block; + padding-right: 2vw; +} + +.fa-bolt { + font-size: 30px; + display: inline-block; + padding-right: 2vw; +} + +h3 { + display: inline-block; +} + +#grey { + color: #a3a3a3; +} + +.user { + position: absolute; + display: flex; + height: 15vh; + width: 27vw; + background-color: #282b30; + left: 7vw; + top: 85vh; + justify-content: space-between; + padding: 0; + margin: 0; +} + +.profile { + margin-top: 20px; + border-radius: 50%; + margin-left: 1vw; +} + +h6 { + padding: 0; + margin: 0; +} + +.username { + padding: 0; + text-align: center; + justify-content: space-between; + justify-content: center; + display: flex; +} + +.fa-microphone { + padding-left: 1vw; +} + +.fa-headphones { + padding-left: 1vw; +} + +.fa-gear { + padding-left: 1vw; + padding-right: 3vw; +} + +.fa-microphone:hover { + color: #7289da; +} + +.fa-headphones:hover { + color: #7289da; +} + +.fa-gear:hover { + color: #7289da; +} + +.name { + margin-top: 15px; + margin-left: 2vw; +} + +#right_options { + padding-top: 10px; +} + +#small { + font-size: 15px; +} + +.navbar { + list-style: none; + margin: 0; + padding: 0; + background-color: #424549; + border-radius: 5px; + overflow: auto; + display: inline-block; + position: absolute; + left: 34vw; + width: 66vw; +} + +.navbar li { + float: left; +} + +.navbar li a { + color: #fff; + text-decoration: none; + display: block; + padding: 15px 20px; +} + +.navbar li a:hover { + background-color: #446190; + color: #f4f4f4; +} + +.wumpus { + position: absolute; + display: inline-block; + height: 85vh; + width: 66vw; + left: 34vw; + top: 15vh; + align-content: center; +} + +#wumpus { + position: relative; + box-sizing: border-box; + left: 40%; + top: 25%; +} + +h2 { + margin: 0; + padding-left: 20vw; + padding-top: 20vh; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.css.map b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.css.map new file mode 100644 index 000000000..499137b39 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,YAAA;EACA,SAAA;EACA,UAAA;EACA,iCAAA;EACA,cAAA;EACA,gBAAA;ACCJ;;ADGA;EACI,mBAAA;EACA,aAAA;EACA,YAAA;EACA,kBAAA;ACAJ;;ADGA;EACG,WAAA;EACA,mBAAA;EACA,yBAAA;EACA,8BAAA;EACA,aAAA;ACAH;;ADEA;EACI,aAAA;EACA,kBAAA;EACA,uBAAA;EACA,WAAA;EACA,mBAAA;ACCJ;;ADCA;EACI,aAAA;EACA,kBAAA;EACA,uBAAA;EACA,WAAA;EACA,mBAAA;ACEJ;;ADAA;EAAI,UAAA;EAAY,SAAA;ACKhB;;ADHA;EAAW,iBAAA;ACOX;;ADNA;EAAY,iBAAA;ACUZ;;ADTA;EAAQ,iBAAA;ACaR;;ADZA;EAAiB,cAAA;ACgBjB;;ADfA;EAAkB,cAAA;ACmBlB;;ADlBA;EAAc,cAAA;ACsBd;;ADnBA;EACI,UAAA;EACA,YAAA;EACA,yBAAA;EACA,qBAAA;ACsBJ;;ADpBA;EACI,mBAAA;EACA,6BAAA;ACuBJ;;ADrBA;EACI,eAAA;EACA,kBAAA;ACwBJ;;ADrBA;EACI,kBAAA;EACA,qBAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EACA,yBAAA;EACA,SAAA;EACA,QAAA;ACwBJ;;ADtBA;EACI,UAAA;ACyBJ;;ADvBA;EAAW,eAAA;EAAiB,qBAAA;EAAuB,kBAAA;AC6BnD;;AD5BA;EAAW,eAAA;EAAiB,qBAAA;EAAuB,kBAAA;ACkCnD;;ADjCA;EAAK,qBAAA;ACqCL;;ADpCA;EAAW,cAAA;ACwCX;;ADvCA;EACI,kBAAA;EACA,aAAA;EAEA,YAAA;EACA,WAAA;EACA,yBAAA;EACA,SAAA;EACA,SAAA;EACA,8BAAA;EACA,UAAA;EACA,SAAA;ACyCJ;;ADvCA;EACA,gBAAA;EACA,kBAAA;EACA,gBAAA;AC0CA;;ADxCA;EAAK,UAAA;EAAW,SAAA;AC6ChB;;AD5CA;EACI,UAAA;EACA,kBAAA;EACA,8BAAA;EACA,uBAAA;EACA,aAAA;AC+CJ;;AD7CA;EAAe,iBAAA;ACiDf;;ADhDA;EAAgB,iBAAA;ACoDhB;;ADnDA;EAAW,iBAAA;EAAmB,kBAAA;ACwD9B;;ADvDA;EAAsB,cAAA;AC2DtB;;AD1DA;EAAsB,cAAA;AC8DtB;;AD7DA;EAAiB,cAAA;ACiEjB;;AD/DA;EAAQ,gBAAA;EAAkB,gBAAA;ACoE1B;;ADnEA;EAAgB,iBAAA;ACuEhB;;ADtEA;EAAS,eAAA;AC0ET;;ADvEA;EACI,gBAAA;EACA,SAAA;EACA,UAAA;EACA,yBAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;AC0EJ;;ADxEA;EACI,WAAA;AC2EJ;;ADzEA;EACI,WAAA;EACA,qBAAA;EACA,cAAA;EACA,kBAAA;AC4EJ;;AD1EA;EACI,yBAAA;EACA,cAAA;AC6EJ;;AD3EA;EACI,kBAAA;EACA,qBAAA;EACA,YAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA,qBAAA;AC8EJ;;AD5EA;EACI,kBAAA;EACA,sBAAA;EACA,SAAA;EACA,QAAA;AC+EJ;;AD5EA;EAAI,SAAA;EAAW,kBAAA;EAAoB,iBAAA;ACkFnC","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.scss b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.scss new file mode 100644 index 000000000..18986314c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/style.scss @@ -0,0 +1,161 @@ +body { + height: 100vh; + width: 100vw; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + color: #f4f4f4; + overflow-x: none; + +} + +.container { + background: #36393e; + height: 100vh; + width: 100vw; + position: relative; +} +// upper header +.header { + height: 5vh; + text-align: justify; + background-color: #1e2124; + justify-content: space-between; + display: flex; +} +.left { + display: flex; + position: relative; + justify-content: center; + height: 5vh; + align-items: center; +} +.right { + display: flex; + position: relative; + justify-content: center; + height: 5vh; + align-items: center; +} +h5 {padding: 0; margin: 0;} + +.fa-minus {padding-left: 1vw;} +.fa-square {padding-left: 1vw;} +.fa-x { padding-left: 1vw;} +.fa-minus:hover {color: #7289da;} +.fa-square:hover {color: #7289da;} +.fa-x:hover { color:#7289da;} + +// left menu +.menu { + width: 7vw; + height: 95vh; + background-color: #1e2124; + display: inline-block; +} +.images { + align-items: center; + justify-content: space-around; +} +.images img { + margin-top: 5px; + border-radius: 50%; + } +// menu2 +.menu2 { + position: absolute; + display: inline-block; + overflow: auto; + height: 95vh; + width: 27vw; + background-color: #282b30; + left: 7vw; + top: 5vh; +} +.search { + padding: 0; +} +.fa-user { font-size: 30px; display: inline-block; padding-right: 2vw;} +.fa-bolt { font-size: 30px; display: inline-block; padding-right: 2vw;} +h3 { display: inline-block;} +#grey { color: #a3a3a3;} +.user { + position: absolute; + display: flex; + + height: 15vh; + width: 27vw; + background-color: #282b30; + left: 7vw; + top: 85vh; + justify-content: space-between; + padding:0; + margin: 0; +} +.profile { +margin-top: 20px; +border-radius: 50%; +margin-left: 1vw; +} +h6 { padding:0; margin:0; } +.username { + padding: 0; + text-align: center; + justify-content: space-between; + justify-content: center; + display: flex; +} +.fa-microphone{padding-left: 1vw;} +.fa-headphones {padding-left: 1vw;} +.fa-gear { padding-left: 1vw; padding-right: 3vw;} +.fa-microphone:hover {color: #7289da;} +.fa-headphones:hover {color: #7289da;} +.fa-gear:hover { color:#7289da;} + +.name { margin-top: 15px; margin-left: 2vw;} +#right_options {padding-top: 10px;} +#small { font-size: 15px;} + +// navbar +.navbar { + list-style: none; + margin: 0; + padding: 0; + background-color: #424549; + border-radius: 5px; + overflow: auto; + display: inline-block; + position: absolute; + left: 34vw; + width: 66vw; +} +.navbar li { + float: left; +} +.navbar li a { + color: #fff; + text-decoration: none; + display: block; + padding: 15px 20px; +} +.navbar li a:hover { + background-color: #446190; + color: #f4f4f4; +} +.wumpus { + position: absolute; + display: inline-block; + height: 85vh; + width: 66vw; + left: 34vw; + top: 15vh; + align-content: center; +} +#wumpus { + position: relative; + box-sizing: border-box; + left: 40%; + top: 25%; +} + +h2 {margin: 0; padding-left: 20vw; padding-top: 20vh;} diff --git a/01-HTML-CSS/07-BEM/HW/TanyaHolczer/wumpus.png b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/wumpus.png new file mode 100644 index 000000000..d8363a727 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/TanyaHolczer/wumpus.png differ diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/discord chat.PNG b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/discord chat.PNG new file mode 100644 index 000000000..1c21bebcf Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/discord chat.PNG differ diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/discord pic.png b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/discord pic.png new file mode 100644 index 000000000..0348eddc6 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/discord pic.png differ diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/dist/style.css b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/dist/style.css new file mode 100644 index 000000000..f123bd972 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/dist/style.css @@ -0,0 +1,429 @@ +body { + margin: 0%; + box-sizing: border-box; + border: 3px solid black; + width: 1800px; + height: 1000px; +} + +.server { + border: 2px solid black; + display: flex; + flex-direction: column; + width: 60px; + height: 990px; + background-color: #3a3737; + position: absolute; +} +.server img { + width: 50px; + height: 50px; +} +.server__servers { + justify-content: space-between; + display: flex; + flex-direction: column; + height: 500px; + margin-top: 20px; + margin-left: 4px; +} +.server__servers__serAdd { + margin-left: 7px; + width: 50px; + height: 50px; +} +.server__servers__serverSearch { + margin-left: 7px; +} +.server__servers__serverSearch img { + width: 40px; + height: 40px; + border-radius: 50%; +} +.server__home { + border-bottom: 3px solid black; +} + +.mineMenu { + background-color: #64656a; + position: absolute; + width: 320px; + height: 995px; + left: 65px; +} +.mineMenu__search { + width: 95%; + height: 28px; + border-radius: 4px; + font-size: 14px; + line-height: 24px; + margin-left: 5px; +} +.mineMenu__home { + margin-top: 90px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; +} +.mineMenu__home p { + margin-left: 20px; +} +.mineMenu__home i { + margin-top: 15px; + margin-left: 10px; +} +.mineMenu__friend { + margin-top: 10px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; +} +.mineMenu__friend p { + margin-left: 20px; +} +.mineMenu__friend i { + margin-top: 15px; + margin-left: 10px; +} +.mineMenu__nitro { + margin-top: 10px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; +} +.mineMenu__nitro p { + margin-left: 18px; +} +.mineMenu__nitro i { + margin-top: 15px; + margin-left: 10px; +} +.mineMenu__nitro img { + margin-top: 7px; + width: 40px; + height: 40px; +} +.mineMenu__title { + display: flex; + margin-top: 10px; + margin-left: 25px; + color: black; + text-decoration: none; +} +.mineMenu__title i { + margin-left: 100px; + margin-top: 15px; +} +.mineMenu__title h1 { + font-size: 25px; + margin: 0; +} +.mineMenu__subMenu__usrename { + border: 2px solid black; + display: flex; + margin-left: 15px; + padding: 5x; + margin: 15px; + color: black; + text-decoration: none; +} +.mineMenu__subMenu__usrename img { + width: 40px; + height: 40px; +} +.mineMenu__subMenu__usrename p { + margin-left: 15px; +} + +.me { + margin-top: 290px; + position: sticky; + display: flex; + color: black; + text-decoration: none; + border: 2px solid black; + background-color: #31363a; + justify-content: space-between; +} +.me__icon-name img { + width: 50px; + width: 50px; +} +.me__icon-name p { + margin-left: 15px; + float: right; +} +.me__icon { + margin-top: 15px; + display: flex; + justify-content: space-evenly; + width: 120px; +} + +.navBar { + margin-left: 380px; + display: flex; + position: sticky; + width: 1415px; + background-color: #36393f; +} +.navBar__home { + display: flex; + margin-left: 10px; + color: black; + text-decoration: none; +} +.navBar__home img { + margin-right: 10px; + margin-top: 10px; + width: 30px; + height: 30px; +} +.navBar__home p { + margin-left: 10px; + font-size: 20px; +} +.navBar__icon { + display: flex; + justify-content: flex-end; + width: 200px; + margin-left: 1100px; + justify-content: space-around; +} +.navBar__icon img { + width: 40px; + height: 40px; +} + +.liveStage { + background-color: #31363a; + margin-left: 382px; + margin-top: 0; + width: 1000px; + height: 94%; +} +.liveStage__title { + padding-top: 30px; +} +.liveStage__title span { + font-size: 30px; + font-weight: bold; +} +.liveStage__stage { + width: 800px; + height: 200px; + border: #18191b solid 3px; + margin: 40px; + margin-left: 50px; + position: relative; +} +.liveStage__stage__profile { + position: relative; + left: 20px; + top: 20px; +} +.liveStage__stage__profile img { + width: 40px; + height: 40px; +} +.liveStage__stage__name { + display: flex; + flex-direction: column; + margin-left: 65px; + margin-top: -20px; +} +.liveStage__stage__name span { + font-weight: bold; + font-size: 20px; +} +.liveStage__stage__bio { + margin-left: 20px; +} +.liveStage__stage__bio h1 { + font-size: 30px; + color: white; +} +.liveStage__stage__amount { + width: 70px; + position: relative; + left: 700px; + bottom: 110px; + border: 2px #18191b solid; + border-radius: 20%; + display: flex; +} +.liveStage__stage__amount i { + margin-left: 5px; +} +.liveStage__stage__amount span { + margin-left: 20px; + font-size: large; + font-weight: bold; +} +.liveStage__stage__member { + margin-left: 15px; + display: flex; + align-items: center; + margin-top: -15px; + justify-content: space-around; +} +.liveStage__stage__member span { + font-weight: bold; + position: relative; + bottom: 10px; +} +.liveStage__stage__member img { + width: 40px; + height: 40px; +} + +.activities { + background-color: #31363a; + margin-left: 1380px; + width: 417px; + margin-top: -935px; + border: 2px solid black; + height: 94%; +} +.activities__title { + margin-left: 60px; + font-size: 30px; + margin-top: 20px; + font-weight: bold; + color: white; +} +.activities__activity { + width: 350px; + height: 200px; + border: 2px solid black; + margin: 20px; +} +.activities__activity__name { + position: relative; + display: flex; + align-items: center; + left: 20px; + top: 5px; + font-weight: bold; +} +.activities__activity__name img { + width: 40px; + height: 40px; + margin-right: 10px; +} +.activities__activity__friend { + width: 270px; + height: 130px; + border: solid 2px black; + margin-left: 20px; + margin-top: 10px; +} +.activities__activity__friend__server { + margin-top: 5px; + margin-left: 65px; +} +.activities__activity__friend__server span { + font-weight: bold; + position: relative; + bottom: 10px; +} +.activities__activity__friend__server img { + width: 30px; + height: 30px; + margin-left: 10px; +} +.activities__activity__friend__grid { + margin-bottom: 5px; + display: grid; + justify-items: center; + justify-content: center; +} +.activities__activity__friend__grid__box1 { + border: 2px solid black; + grid-area: 1/2/1/2; +} +.activities__activity__friend__grid__box1 img { + width: 90px; + height: 40px; +} +.activities__activity__friend__grid__box2 { + border: 2px solid black; +} +.activities__activity__friend__grid__box2 img { + width: 90px; + height: 40px; +} +.activities__activity__friend__grid__box3 { + border: 2px solid black; +} +.activities__activity__friend__grid__box3 img { + width: 90px; + height: 40px; +} +.activities__activity__friend__grid__box4 { + border: 2px solid black; +} +.activities__activity__friend__grid__box4 img { + width: 90px; + height: 40px; +} +.activities__activity__friends { + margin-top: 60px; + margin-left: 65px; + border: 3px solid black; + border-radius: 10%; + margin-right: 20px; + padding-top: 3px; + display: flex; +} +.activities__activity__friends span { + font-weight: bold; + position: relative; + bottom: 10px; +} +.activities__activity__friends img { + width: 30px; + height: 30px; + margin-left: 10px; +} +.activities__activity__friends__icons { + display: flex; + width: 150px; + justify-content: flex-end; +} +.activities__name { + display: flex; + margin-left: 15px; + margin: 15px; + color: black; + text-decoration: none; + font-weight: bold; + border: 2px solid black; +} +.activities__name img { + width: 30px; + height: 30px; + margin-top: 10px; + margin-left: 5px; +} +.activities__name p { + margin-left: 15px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/index.html b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/index.html new file mode 100644 index 000000000..4e2a2e8a7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/index.html @@ -0,0 +1,328 @@ + + + + + + + Document + + + + +
+ + + + + +
+
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + + + + + +
+
+
+
+
+
+ +
+
+ + + + + + + +
+ + + + +
+ +
+
+
+ + +

Home

+ +
+ +
+
+
+ Live Stage +
+
+
+ +
+
+ Clipper + server are you in +
+
+

Clipper on COVID-19 Vaccine in the zone

+
+
+
+ 40 +
+
+
+ Clipper
+
+ Clipper
+
+ Clipper
+
+ Clipper
+
+
+
+
+ +
+
+ Clipper + server are you in +
+
+

Clipper on Live Stream

+
+
+
+ 729 +
+
+
+ Clipper
+
+ Clipper
+
+ Clipper
+
+ Clipper
+
+
+
+
+ +
+
+ Clipper + server are you in +
+
+

Clipper is playing Call of Duty

+
+
+
+ 23 +
+
+
+ Clipper
+
+ Clipper
+
+ Clipper
+
+ Clipper
+
+
+ +
+
+
activities
+
+
+ + Clipper,ninja,PewDiePie and 4 other +
+
+
+
+ Clipper
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ Clipper
+
+
+
+ Clipper
+
+ + +
+
+
+ +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/plus.png b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/plus.png new file mode 100644 index 000000000..78623db93 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/plus.png differ diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.css b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.css new file mode 100644 index 000000000..49f3d2025 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.css @@ -0,0 +1,431 @@ +body { + margin: 0%; + box-sizing: border-box; + border: 3px solid black; + width: 1800px; + height: 1000px; +} + +.server { + border: 2px solid black; + display: flex; + flex-direction: column; + width: 60px; + height: 990px; + background-color: rgb(58, 55, 55); + position: absolute; +} +.server img { + width: 50px; + height: 50px; +} +.server__servers { + justify-content: space-between; + display: flex; + flex-direction: column; + height: 500px; + margin-top: 20px; + margin-left: 4px; +} +.server__servers__serAdd { + margin-left: 7px; + width: 50px; + height: 50px; +} +.server__servers__serverSearch { + margin-left: 7px; +} +.server__servers__serverSearch img { + width: 40px; + height: 40px; + border-radius: 50%; +} +.server__home { + border-bottom: 3px solid black; +} + +.mineMenu { + background-color: rgb(100, 101, 106); + position: absolute; + width: 320px; + height: 995px; + left: 65px; +} +.mineMenu__search { + width: 95%; + height: 28px; + border-radius: 4px; + font-size: 14px; + line-height: 24px; + margin-left: 5px; +} +.mineMenu__home { + margin-top: 90px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; +} +.mineMenu__home p { + margin-left: 20px; +} +.mineMenu__home i { + margin-top: 15px; + margin-left: 10px; +} +.mineMenu__friend { + margin-top: 10px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; +} +.mineMenu__friend p { + margin-left: 20px; +} +.mineMenu__friend i { + margin-top: 15px; + margin-left: 10px; +} +.mineMenu__nitro { + margin-top: 10px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; +} +.mineMenu__nitro p { + margin-left: 18px; +} +.mineMenu__nitro i { + margin-top: 15px; + margin-left: 10px; +} +.mineMenu__nitro img { + margin-top: 7px; + width: 40px; + height: 40px; +} +.mineMenu__title { + display: flex; + margin-top: 10px; + margin-left: 25px; + color: black; + text-decoration: none; +} +.mineMenu__title i { + margin-left: 100px; + margin-top: 15px; +} +.mineMenu__title h1 { + font-size: 25px; + margin: 0; +} +.mineMenu__subMenu__usrename { + border: 2px solid black; + display: flex; + margin-left: 15px; + padding: 5x; + margin: 15px; + color: black; + text-decoration: none; +} +.mineMenu__subMenu__usrename img { + width: 40px; + height: 40px; +} +.mineMenu__subMenu__usrename p { + margin-left: 15px; +} + +.me { + margin-top: 290px; + position: -webkit-sticky; + position: sticky; + display: flex; + color: black; + text-decoration: none; + border: 2px solid black; + background-color: #31363a; + justify-content: space-between; +} +.me__icon-name img { + width: 50px; + width: 50px; +} +.me__icon-name p { + margin-left: 15px; + float: right; +} +.me__icon { + margin-top: 15px; + display: flex; + justify-content: space-evenly; + width: 120px; +} + +.navBar { + margin-left: 380px; + display: flex; + position: -webkit-sticky; + position: sticky; + width: 1415px; + background-color: #36393f; +} +.navBar__home { + display: flex; + margin-left: 10px; + color: black; + text-decoration: none; +} +.navBar__home img { + margin-right: 10px; + margin-top: 10px; + width: 30px; + height: 30px; +} +.navBar__home p { + margin-left: 10px; + font-size: 20px; +} +.navBar__icon { + display: flex; + justify-content: flex-end; + width: 200px; + margin-left: 1100px; + justify-content: space-around; +} +.navBar__icon img { + width: 40px; + height: 40px; +} + +.liveStage { + background-color: #31363a; + margin-left: 382px; + margin-top: 0; + width: 1000px; + height: 94%; +} +.liveStage__title { + padding-top: 30px; +} +.liveStage__title span { + font-size: 30px; + font-weight: bold; +} +.liveStage__stage { + width: 800px; + height: 200px; + border: #18191b solid 3px; + margin: 40px; + margin-left: 50px; + position: relative; +} +.liveStage__stage__profile { + position: relative; + left: 20px; + top: 20px; +} +.liveStage__stage__profile img { + width: 40px; + height: 40px; +} +.liveStage__stage__name { + display: flex; + flex-direction: column; + margin-left: 65px; + margin-top: -20px; +} +.liveStage__stage__name span { + font-weight: bold; + font-size: 20px; +} +.liveStage__stage__bio { + margin-left: 20px; +} +.liveStage__stage__bio h1 { + font-size: 30px; + color: white; +} +.liveStage__stage__amount { + width: 70px; + position: relative; + left: 700px; + bottom: 110px; + border: 2px #18191b solid; + border-radius: 20%; + display: flex; +} +.liveStage__stage__amount i { + margin-left: 5px; +} +.liveStage__stage__amount span { + margin-left: 20px; + font-size: large; + font-weight: bold; +} +.liveStage__stage__member { + margin-left: 15px; + display: flex; + align-items: center; + margin-top: -15px; + justify-content: space-around; +} +.liveStage__stage__member span { + font-weight: bold; + position: relative; + bottom: 10px; +} +.liveStage__stage__member img { + width: 40px; + height: 40px; +} + +.activities { + background-color: #31363a; + margin-left: 1380px; + width: 417px; + margin-top: -935px; + border: 2px solid black; + height: 94%; +} +.activities__title { + margin-left: 60px; + font-size: 30px; + margin-top: 20px; + font-weight: bold; + color: white; +} +.activities__activity { + width: 350px; + height: 200px; + border: 2px solid black; + margin: 20px; +} +.activities__activity__name { + position: relative; + display: flex; + align-items: center; + left: 20px; + top: 5px; + font-weight: bold; +} +.activities__activity__name img { + width: 40px; + height: 40px; + margin-right: 10px; +} +.activities__activity__friend { + width: 270px; + height: 130px; + border: solid 2px black; + margin-left: 20px; + margin-top: 10px; +} +.activities__activity__friend__server { + margin-top: 5px; + margin-left: 65px; +} +.activities__activity__friend__server span { + font-weight: bold; + position: relative; + bottom: 10px; +} +.activities__activity__friend__server img { + width: 30px; + height: 30px; + margin-left: 10px; +} +.activities__activity__friend__grid { + margin-bottom: 5px; + display: grid; + justify-items: center; + justify-content: center; +} +.activities__activity__friend__grid__box1 { + border: 2px solid black; + grid-area: 1/2/1/2; +} +.activities__activity__friend__grid__box1 img { + width: 90px; + height: 40px; +} +.activities__activity__friend__grid__box2 { + border: 2px solid black; +} +.activities__activity__friend__grid__box2 img { + width: 90px; + height: 40px; +} +.activities__activity__friend__grid__box3 { + border: 2px solid black; +} +.activities__activity__friend__grid__box3 img { + width: 90px; + height: 40px; +} +.activities__activity__friend__grid__box4 { + border: 2px solid black; +} +.activities__activity__friend__grid__box4 img { + width: 90px; + height: 40px; +} +.activities__activity__friends { + margin-top: 60px; + margin-left: 65px; + border: 3px solid black; + border-radius: 10%; + margin-right: 20px; + padding-top: 3px; + display: flex; +} +.activities__activity__friends span { + font-weight: bold; + position: relative; + bottom: 10px; +} +.activities__activity__friends img { + width: 30px; + height: 30px; + margin-left: 10px; +} +.activities__activity__friends__icons { + display: flex; + width: 150px; + justify-content: flex-end; +} +.activities__name { + display: flex; + margin-left: 15px; + margin: 15px; + color: black; + text-decoration: none; + font-weight: bold; + border: 2px solid black; +} +.activities__name img { + width: 30px; + height: 30px; + margin-top: 10px; + margin-left: 5px; +} +.activities__name p { + margin-left: 15px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.css.map b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.css.map new file mode 100644 index 000000000..ca41d09ee --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,UAAA;EAGA,sBAAA;EACA,uBAAA;EACA,aAAA;EACA,cAAA;ACDF;;ADGA;EACE,uBAAA;EACA,aAAA;EACA,sBAAA;EACA,WAAA;EACA,aAAA;EACA,iCAAA;EACA,kBAAA;ACAF;ADCE;EACE,WAAA;EACA,YAAA;ACCJ;ADCE;EAEE,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,aAAA;EACA,gBAAA;EACA,gBAAA;ACAJ;ADCI;EACE,gBAAA;EAEA,WAAA;EACA,YAAA;ACAN;ADEI;EACE,gBAAA;ACAN;ADCM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ACCR;ADGE;EACE,8BAAA;ACDJ;;ADIA;EAGE,oCAAA;EACA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA;ACHF;ADIE;EACE,UAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;ACFJ;ADIE;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,qBAAA;ACFJ;ADGI;EACE,iBAAA;ACDN;ADGI;EACE,gBAAA;EACA,iBAAA;ACDN;ADIE;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,qBAAA;ACFJ;ADGI;EACE,iBAAA;ACDN;ADGI;EACE,gBAAA;EACA,iBAAA;ACDN;ADIE;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,qBAAA;ACFJ;ADGI;EACE,iBAAA;ACDN;ADGI;EACE,gBAAA;EACA,iBAAA;ACDN;ADGI;EACE,eAAA;EACA,WAAA;EACA,YAAA;ACDN;ADIE;EACE,aAAA;EACA,gBAAA;EACA,iBAAA;EACA,YAAA;EACA,qBAAA;ACFJ;ADGI;EACE,kBAAA;EACA,gBAAA;ACDN;ADGI;EACE,eAAA;EACA,SAAA;ACDN;ADKI;EACE,uBAAA;EACA,aAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,qBAAA;ACHN;ADIM;EACE,WAAA;EACA,YAAA;ACFR;ADIM;EACE,iBAAA;ACFR;;ADOA;EACE,iBAAA;EACA,wBAAA;EAAA,gBAAA;EACA,aAAA;EACA,YAAA;EACA,qBAAA;EACA,uBAAA;EACA,yBAAA;EACA,8BAAA;ACJF;ADMI;EACE,WAAA;EACA,WAAA;ACJN;ADMI;EACE,iBAAA;EACA,YAAA;ACJN;ADOE;EACE,gBAAA;EACA,aAAA;EACA,6BAAA;EACA,YAAA;ACLJ;;ADQA;EACE,kBAAA;EACA,aAAA;EACA,wBAAA;EAAA,gBAAA;EACA,aAAA;EACA,yBAAA;ACLF;ADOE;EACE,aAAA;EACA,iBAAA;EACA,YAAA;EACA,qBAAA;ACLJ;ADOI;EACE,kBAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;ACLN;ADOI;EACE,iBAAA;EACA,eAAA;ACLN;ADQE;EACE,aAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;EACA,6BAAA;ACNJ;ADOI;EACE,WAAA;EACA,YAAA;ACLN;;ADSA;EACE,yBAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,WAAA;ACNF;ADOE;EACE,iBAAA;ACLJ;ADMI;EACE,eAAA;EACA,iBAAA;ACJN;ADOE;EACE,YAAA;EACA,aAAA;EACA,yBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACLJ;ADMI;EACE,kBAAA;EACA,UAAA;EACA,SAAA;ACJN;ADKM;EACE,WAAA;EACA,YAAA;ACHR;ADMI;EACE,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,iBAAA;ACJN;ADKM;EACE,iBAAA;EACA,eAAA;ACHR;ADMI;EACE,iBAAA;ACJN;ADKM;EACE,eAAA;EACA,YAAA;ACHR;ADMI;EACE,WAAA;EACA,kBAAA;EACA,WAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,aAAA;ACJN;ADKM;EACE,gBAAA;ACHR;ADKM;EACE,iBAAA;EACA,gBAAA;EACA,iBAAA;ACHR;ADMI;EACE,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,6BAAA;ACJN;ADKM;EACE,iBAAA;EACA,kBAAA;EACA,YAAA;ACHR;ADKM;EACE,WAAA;EACA,YAAA;ACHR;;ADQA;EACE,yBAAA;EACA,mBAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;EACA,WAAA;ACLF;ADME;EACE,iBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,YAAA;ACJJ;ADME;EACE,YAAA;EACA,aAAA;EACA,uBAAA;EACA,YAAA;ACJJ;ADKI;EACE,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,UAAA;EACA,QAAA;EACA,iBAAA;ACHN;ADIM;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ACFR;ADKI;EACE,YAAA;EACA,aAAA;EACA,uBAAA;EACA,iBAAA;EACA,gBAAA;ACHN;ADIM;EACE,eAAA;EACA,iBAAA;ACFR;ADGQ;EACE,iBAAA;EACA,kBAAA;EACA,YAAA;ACDV;ADGQ;EACE,WAAA;EACA,YAAA;EACA,iBAAA;ACDV;ADIM;EACE,kBAAA;EACA,aAAA;EACA,qBAAA;EACA,uBAAA;ACFR;ADGQ;EACE,uBAAA;EACA,kBAAA;ACDV;ADEU;EACE,WAAA;EACA,YAAA;ACAZ;ADGQ;EACE,uBAAA;ACDV;ADEU;EACE,WAAA;EACA,YAAA;ACAZ;ADGQ;EACE,uBAAA;ACDV;ADEU;EACE,WAAA;EACA,YAAA;ACAZ;ADGQ;EACE,uBAAA;ACDV;ADEU;EACE,WAAA;EACA,YAAA;ACAZ;ADKI;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,aAAA;ACHN;ADIM;EACE,iBAAA;EACA,kBAAA;EACA,YAAA;ACFR;ADIM;EACE,WAAA;EACA,YAAA;EACA,iBAAA;ACFR;ADIM;EACE,aAAA;EACA,YAAA;EACA,yBAAA;ACFR;ADME;EACE,aAAA;EACA,iBAAA;EACA,YAAA;EACA,YAAA;EACA,qBAAA;EACA,iBAAA;EACA,uBAAA;ACJJ;ADKI;EACE,WAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;ACHN;ADKI;EACE,iBAAA;ACHN","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.scss b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.scss new file mode 100644 index 000000000..60bf7da7d --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/TomerCohen-discord/style.scss @@ -0,0 +1,435 @@ +body { + margin: 0%; + // width: auto; + // min-height: 99vh; + box-sizing: border-box; + border: 3px solid black; + width: 1800px; + height: 1000px; +} +.server { + border: 2px solid black; + display: flex; + flex-direction: column; + width: 60px; + height: 990px; + background-color: rgb(58, 55, 55); + position: absolute; + img { + width: 50px; + height: 50px; + } + &__servers { + // background-color: aqua; + justify-content: space-between; + display: flex; + flex-direction: column; + height: 500px; + margin-top: 20px; + margin-left: 4px; + &__serAdd { + margin-left: 7px; + // background-color: gray; + width: 50px; + height: 50px; + } + &__serverSearch { + margin-left: 7px; + img { + width: 40px; + height: 40px; + border-radius: 50%; + } + } + } + &__home { + border-bottom: 3px solid black; + } +} +.mineMenu { + // margin-top: -800px; + // margin-left: 100px; + background-color: rgba(100, 101, 106, 255); + position: absolute; + width: 320px; + height: 995px; + left: 65px; + &__search { + width: 95%; + height: 28px; + border-radius: 4px; + font-size: 14px; + line-height: 24px; + margin-left: 5px; + } + &__home { + margin-top: 90px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; + p { + margin-left: 20px; + } + i { + margin-top: 15px; + margin-left: 10px; + } + } + &__friend { + margin-top: 10px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; + p { + margin-left: 20px; + } + i { + margin-top: 15px; + margin-left: 10px; + } + } + &__nitro { + margin-top: 10px; + margin-left: 20px; + border: 2px solid black; + width: 260px; + height: 50px; + border-radius: 10px; + display: flex; + flex-direction: row; + color: black; + text-decoration: none; + p { + margin-left: 18px; + } + i { + margin-top: 15px; + margin-left: 10px; + } + img { + margin-top: 7px; + width: 40px; + height: 40px; + } + } + &__title { + display: flex; + margin-top: 10px; + margin-left: 25px; + color: black; + text-decoration: none; + i { + margin-left: 100px; + margin-top: 15px; + } + h1 { + font-size: 25px; + margin: 0; + } + } + &__subMenu { + &__usrename { + border: 2px solid black; + display: flex; + margin-left: 15px; + padding: 5x; + margin: 15px; + color: black; + text-decoration: none; + img { + width: 40px; + height: 40px; + } + p { + margin-left: 15px; + } + } + } +} +.me { + margin-top: 290px; + position: sticky; + display: flex; + color: black; + text-decoration: none; + border: 2px solid black; + background-color: #31363a; + justify-content: space-between; + &__icon-name { + img { + width: 50px; + width: 50px; + } + p { + margin-left: 15px; + float: right; + } + } + &__icon { + margin-top: 15px; + display: flex; + justify-content: space-evenly; + width: 120px; + } +} +.navBar { + margin-left: 380px; + display: flex; + position: sticky; + width: 1415px; + background-color: #36393f; + + &__home { + display: flex; + margin-left: 10px; + color: black; + text-decoration: none; + + img { + margin-right: 10px; + margin-top: 10px; + width: 30px; + height: 30px; + } + p { + margin-left: 10px; + font-size: 20px; + } + } + &__icon { + display: flex; + justify-content: flex-end; + width: 200px; + margin-left: 1100px; + justify-content: space-around; + img { + width: 40px; + height: 40px; + } + } +} +.liveStage { + background-color: #31363a; + margin-left: 382px; + margin-top: 0; + width: 1000px; + height: 94%; + &__title { + padding-top: 30px; + span { + font-size: 30px; + font-weight: bold; + } + } + &__stage { + width: 800px; + height: 200px; + border: #18191b solid 3px; + margin: 40px; + margin-left: 50px; + position: relative; + &__profile { + position: relative; + left: 20px; + top: 20px; + img { + width: 40px; + height: 40px; + } + } + &__name { + display: flex; + flex-direction: column; + margin-left: 65px; + margin-top: -20px; + span { + font-weight: bold; + font-size: 20px; + } + } + &__bio { + margin-left: 20px; + h1 { + font-size: 30px; + color: white; + } + } + &__amount { + width: 70px; + position: relative; + left: 700px; + bottom: 110px; + border: 2px #18191b solid; + border-radius: 20%; + display: flex; + i { + margin-left: 5px; + } + span { + margin-left: 20px; + font-size: large; + font-weight: bold; + } + } + &__member { + margin-left: 15px; + display: flex; + align-items: center; + margin-top: -15px; + justify-content: space-around; + span { + font-weight: bold; + position: relative; + bottom: 10px; + } + img { + width: 40px; + height: 40px; + } + } + } +} +.activities { + background-color: #31363a; + margin-left: 1380px; + width: 417px; + margin-top: -935px; + border: 2px solid black; + height: 94%; + &__title { + margin-left: 60px; + font-size: 30px; + margin-top: 20px; + font-weight: bold; + color: white; + } + &__activity { + width: 350px; + height: 200px; + border: 2px solid black; + margin: 20px; + &__name { + position: relative; + display: flex; + align-items: center; + left: 20px; + top: 5px; + font-weight: bold; + img { + width: 40px; + height: 40px; + margin-right: 10px; + } + } + &__friend { + width: 270px; + height: 130px; + border: solid 2px black; + margin-left: 20px; + margin-top: 10px; + &__server { + margin-top: 5px; + margin-left: 65px; + span { + font-weight: bold; + position: relative; + bottom: 10px; + } + img { + width: 30px; + height: 30px; + margin-left: 10px; + } + } + &__grid { + margin-bottom: 5px; + display: grid; + justify-items: center; + justify-content: center; + &__box1 { + border: 2px solid black; + grid-area: 1/2/1/2; + img { + width: 90px; + height: 40px; + } + } + &__box2 { + border: 2px solid black; + img { + width: 90px; + height: 40px; + } + } + &__box3 { + border: 2px solid black; + img { + width: 90px; + height: 40px; + } + } + &__box4 { + border: 2px solid black; + img { + width: 90px; + height: 40px; + } + } + } + } + &__friends { + margin-top: 60px; + margin-left: 65px; + border: 3px solid black; + border-radius: 10%; + margin-right: 20px; + padding-top: 3px; + display: flex; + span { + font-weight: bold; + position: relative; + bottom: 10px; + } + img { + width: 30px; + height: 30px; + margin-left: 10px; + } + &__icons { + display: flex; + width: 150px; + justify-content: flex-end; + } + } + } + &__name{ + display: flex; + margin-left: 15px; + margin: 15px; + color: black; + text-decoration: none; + font-weight: bold; + border: 2px solid black; + img { + width: 30px; + height: 30px; + margin-top: 10px; + margin-left: 5px; + } + p { + margin-left: 15px; + } + } +} diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-arthouse-studio-4641265.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-arthouse-studio-4641265.jpg new file mode 100644 index 000000000..f6e2d395e Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-arthouse-studio-4641265.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-asad-photo-maldives-1591373.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-asad-photo-maldives-1591373.jpg new file mode 100644 index 000000000..6f029c221 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-asad-photo-maldives-1591373.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-frans-van-heerden-624015.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-frans-van-heerden-624015.jpg new file mode 100644 index 000000000..0039b0611 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-frans-van-heerden-624015.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-freestocksorg-839462.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-freestocksorg-839462.jpg new file mode 100644 index 000000000..c08cf9215 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-freestocksorg-839462.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-jaime-reimer-2662116.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-jaime-reimer-2662116.jpg new file mode 100644 index 000000000..b8791bb95 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-jaime-reimer-2662116.jpg differ diff --git "a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-luis-del-r\303\255o-15286.jpg" "b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-luis-del-r\303\255o-15286.jpg" new file mode 100644 index 000000000..1ba468c8d Binary files /dev/null and "b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-luis-del-r\303\255o-15286.jpg" differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-lumn-167699.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-lumn-167699.jpg new file mode 100644 index 000000000..536aff21d Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-lumn-167699.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-mike-sember-6043246.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-mike-sember-6043246.jpg new file mode 100644 index 000000000..cc07d40e1 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-mike-sember-6043246.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-147411.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-147411.jpg new file mode 100644 index 000000000..c5838737f Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-147411.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-235621.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-235621.jpg new file mode 100644 index 000000000..688ce3126 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-235621.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-247431.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-247431.jpg new file mode 100644 index 000000000..bb047b610 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-247431.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-258109.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-258109.jpg new file mode 100644 index 000000000..2edad233b Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-258109.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-36717.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-36717.jpg new file mode 100644 index 000000000..4a3192626 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-36717.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-371589.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-371589.jpg new file mode 100644 index 000000000..b023e2839 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-371589.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-462024.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-462024.jpg new file mode 100644 index 000000000..f6c4113a8 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-pixabay-462024.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-roberto-nickson-2775196.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-roberto-nickson-2775196.jpg new file mode 100644 index 000000000..1e8bb37d5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-roberto-nickson-2775196.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-sami-anas-5137664.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-sami-anas-5137664.jpg new file mode 100644 index 000000000..c9bdbf134 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-sami-anas-5137664.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-stein-egil-liland-3408744.jpg b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-stein-egil-liland-3408744.jpg new file mode 100644 index 000000000..9b0c7ce38 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/Landscape/pexels-stein-egil-liland-3408744.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/LinkTo__Drawio.txt b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/LinkTo__Drawio.txt new file mode 100644 index 000000000..7297a5bc2 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/LinkTo__Drawio.txt @@ -0,0 +1 @@ +https://drive.google.com/file/d/1worE_IMBRV1veN_Zc0bK-vOKkIX0gyxC/view?usp=share_link \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/dist/style.css b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/dist/style.css new file mode 100644 index 000000000..258c7500f --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/dist/style.css @@ -0,0 +1,516 @@ +* { + margin: 0; + padding: 0; +} + +:root { + --stageSpeaker-size: 20px; + --friendImg-size: 30px; +} + +body { + height: 100vh; + width: 100vw; + display: grid; + grid-template: "a b c c" "a b d e" "a b d e" "a b d e" "a b d e"; + grid-template-columns: 5rem 15rem auto 20rem; + grid-template-rows: 3rem auto; + background-color: #36393f; +} + +.apps { + grid-area: a; + height: 100%; + background-color: #202225; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +} +.apps hr { + width: 60%; + border: 0.5px solid #96989d; + opacity: 0.5; +} +.apps__app { + width: 3rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #36393f; + color: #3ba55d; + margin: 0.5em 0; + display: flex; + align-items: center; + justify-content: center; +} +.apps__app img { + width: 100%; + aspect-ratio: 1/1; + border-radius: 50%; +} +.apps__app--discord { + border-radius: 10px; + background-color: #5865f2; + color: whitesmoke; + font-size: 2rem; +} +.apps__app:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; + cursor: pointer; +} + +.home { + grid-area: b; + color: #96989d; + background-color: #2f3136; + display: flex; + flex-direction: column; +} +.home__search { + border-bottom: 2px solid #20222564; + height: 2.9rem; + display: flex; + justify-content: center; + align-items: center; +} +.home__search input { + background-color: #202225; + border: none; + height: 60%; + border-radius: 5px; + color: white; +} +.home__search input::placeholder { + text-align: center; +} +.home__option { + padding: 0 0.5em; + height: 3rem; + display: flex; + align-items: center; +} +.home__option i { + width: 2rem; +} +.home__option b { + margin-left: 0.5em; +} +.home__option:hover { + background-color: #42464d; + cursor: pointer; +} +.home__friends { + display: flex; + flex-direction: column; + padding: 0.5em; + overflow-y: auto; +} +.home__friends__friend { + display: flex; + align-items: center; + padding: 0.5em; + border-radius: 10px; + position: relative; +} +.home__friends__friend img, +.home__friends__friend .img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; +} +.home__friends__friend .img { + background-color: #3ba55d; + display: flex; + align-items: center; + justify-content: center; + color: whitesmoke; +} +.home__friends__friend .green-dot { + position: absolute; + width: calc(var(--friendImg-size) / 4); + height: calc(var(--friendImg-size) / 4); + border-radius: 50%; + background-color: #3ba55d; + bottom: 15%; + left: 12%; + z-index: 10; + border: 3px solid #2f3136; +} +.home__friends__friend .name { + margin-left: 1em; + display: flex; + flex-direction: column; +} +.home__friends__friend .name .explication { + font-size: 0.7em; +} +.home__friends__friend:hover { + background-color: #42464d; + cursor: pointer; +} +.home__user { + background-color: #292b2f; + height: 2rem; + margin-top: auto; + padding: 0.3em; + display: flex; + align-items: center; + justify-content: space-between; +} +.home__user__img { + width: 2rem; + height: 2rem; + border-radius: 50%; +} +.home__user__name { + font-size: 0.8em; + color: whitesmoke; + margin-left: 0.5em; +} +.home__user__icons { + width: 40%; + display: flex; + justify-content: space-around; +} + +.topNav { + grid-area: c; + border-bottom: 2px solid #20222564; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1em; + font-size: 0.9rem; + color: #96989d; +} +.topNav__title b { + margin-left: 0.5em; + color: whitesmoke; +} +.topNav__settings { + display: flex; +} +.topNav__settings .fa-solid { + margin: 0 0.5em; +} +.topNav__settings .fa-solid:hover { + color: whitesmoke; + cursor: pointer; +} +.topNav__settings .fa-rotate-right { + border-right: 1px solid #96989d; + padding-right: 1em; +} + +.stages { + grid-area: d; + overflow-y: auto; + border-right: 2px solid #20222564; + display: flex; + flex-direction: column; + padding: 1rem; + color: whitesmoke; +} +.stages__title { + font-size: 1.5rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; +} +.stages__stage { + padding: 1em; + background-color: #2f3136; + border-radius: 5px; + margin-top: 1em; +} +.stages__stage__server { + display: flex; + align-items: center; +} +.stages__stage__server img { + width: 2rem; + aspect-ratio: 1/1; + border-radius: 5px; +} +.stages__stage__server__text { + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: smaller; + margin-left: 0.5em; +} +.stages__stage__server__text .name { + display: flex; +} +.stages__stage__server__text .name .status-icon { + margin-left: 0.5em; + width: 1rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #182fb5; + display: flex; +} +.stages__stage__server__text .name .status-icon .fa-eye { + margin: auto; + font-size: 0.7em; +} +.stages__stage__server__text .status { + color: #96989d; +} +.stages__stage__server__online { + margin-left: auto; + background-color: #202225; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 10px; + font-size: 0.8rem; + padding: 5px; +} +.stages__stage__server__online i { + margin-right: 5px; +} +.stages__stage__name { + margin: 0.5em 0; + font-size: 1.1rem; +} +.stages__stage__speakers { + color: #96989d; + display: grid; + grid-template-columns: repeat(3, 1fr); + width: 80%; +} +.stages__stage__speakers__speaker { + display: flex; + align-items: center; + margin: 0.5em; +} +.stages__stage__speakers__speaker img, +.stages__stage__speakers__speaker i { + width: var(--stageSpeaker-size); + height: var(--stageSpeaker-size); + border-radius: 50%; + margin-right: 0.5em; +} +.stages__stage__speakers__speaker i { + background-color: #202225; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.5em; +} +.stages__stage__speakers--withPhoto { + display: grid; + grid-template-columns: 5fr 2fr; +} +.stages__stage__speakers--withPhoto div { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.stages__stage__speakers--withPhoto div .stages__stage__speakers__speaker { + display: flex; + align-items: center; + justify-content: flex-start; +} +.stages__stage__speakers--withPhoto div .stages__stage__speakers__speaker img { + width: var(--stageSpeaker-size); + height: var(--stageSpeaker-size); + border-radius: 50%; + margin-left: 0.5em; +} +.stages__stage__speakers--withPhoto img { + height: 6rem; + aspect-ratio: 4/2; + border-radius: 10px; + margin-left: auto; +} + +.stages::-webkit-scrollbar { + width: 1em; +} + +.stages::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} + +.stages::-webkit-scrollbar-thumb { + background-color: #292b2f; + border-radius: 20px; +} + +.activities { + grid-area: e; + display: flex; + flex-direction: column; + color: whitesmoke; + padding: 1rem; +} +.activities__title { + font-size: 1.5rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; +} +.activities__activity { + padding: 0.5em; + background-color: #2f3136; + border-radius: 5px; + margin-top: 1em; +} +.activities__activity__users { + display: flex; + position: relative; +} +.activities__activity__users img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; + margin-right: 0.5em; +} +.activities__activity__users span { + color: #96989d; + font-size: 0.6rem; +} +.activities__activity__users .green-dot { + position: absolute; + width: calc(var(--friendImg-size) / 3); + height: calc(var(--friendImg-size) / 3); + border-radius: 50%; + background-color: #3ba55d; + top: 1rem; + left: 1rem; + border: 3px solid #36393f; +} +.activities__activity__server { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + position: relative; + background-color: #36393f; +} +.activities__activity__server__head { + width: 90%; + display: flex; + height: 2rem; + padding: 0.5em; +} +.activities__activity__server__head__img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; +} +.activities__activity__server__head .green-dot--icon { + position: absolute; + width: calc(var(--friendImg-size) / 3); + height: calc(var(--friendImg-size) / 3); + font-size: 10px; + border-radius: 50%; + background-color: #36393f; + top: 1.5rem; + left: 2rem; + border: 3px solid #36393f; +} +.activities__activity__server__head__name { + margin-left: 1em; + display: flex; + flex-direction: column; +} +.activities__activity__server__head__name .explication { + font-size: 0.7em; + color: #96989d; +} +.activities__activity__server__head .icons { + width: 5rem; + height: 1.5rem; + margin-left: auto; + display: flex; + position: relative; +} +.activities__activity__server__head .icons__online { + position: absolute; + right: 50%; + width: 1.5rem; + font-size: 0.8rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #5865f2; + color: whitesmoke; + display: flex; + align-items: center; + justify-content: center; +} +.activities__activity__server__head .icons__online--extra { + position: absolute; + right: 0; + outline: 2px solid #36393f; + width: 1.5rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #202225; + color: whitesmoke; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8em; +} +.activities__activity__server__head .icons .fa-brands:nth-child(2) { + position: absolute; + right: 25%; + outline: 2px solid #36393f; +} +.activities__activity__server .images { + width: 100%; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 8rem 8rem; +} +.activities__activity__server .images i { + font-size: 1.5rem; +} +.activities__activity__server .images .img { + display: flex; + align-items: center; + justify-content: center; +} +.activities__activity__server .images .img .icon-circle { + background-color: #36393f; + width: 4rem; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} +.activities__activity__server .images .img:first-child { + background-color: #5865f2; +} +.activities__activity__server .images .img:nth-child(2) { + background-color: #3ba55d; +} +.activities__activity__server .images .img:nth-child(3) { + background-color: #96989d; + border-radius: 0 0 0 10px; +} +.activities__activity__server .images .img:last-child { + background-color: orange; + border-radius: 0 0 10px 0; +} + +@media screen and (max-width: 1400px) { + body { + grid-template: "a b c" "a b d"; + grid-template-rows: 3rem auto; + grid-template-columns: 5rem 15rem auto; + } + body .activities { + display: none; + } +} +@media screen and (max-width: 900px) { + html { + font-size: 12px; + } +} +@media screen and (max-width: 650px) { + html { + font-size: 10px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/index.html b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/index.html new file mode 100644 index 000000000..1911cca65 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/index.html @@ -0,0 +1,369 @@ + + + + + + + Discord BEM Home Work + + + + + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + Home +
+
+ + Friends +
+
+ + Nitro +
+
+
DIRECT MESSAGES
+
+ John's Profile img +
+
+ sonicman +
+
+
+ +
+
+ MrLocke + Playing Game Name +
+
+
+
+ +
+
+ Secret Squad + & Members +
+
+
+ +
+
+ therealcap +
+
+
+
+ +
+ Vladislav Byk... + #5279 +
+
+ + + +
+
+
+ +
+
+ + Home +
+
+ + + +
+
+ +
+

Live Stages

+
+
+ +
+ Biocord + Server you are in +
+
+ + 40 +
+
+
+ Dr. Smith on COVID-19 Vaccine in the Bay Area +
+
+
+ + sonicman +
+
+ + sonicman +
+
+ + sonicman +
+
+ + sonicman +
+
+ + +2 Speakers +
+
+
+
+
+ +
+ The house of Cap + Server you are in +
+
+ + 731 +
+
+
+ Story time with Legendary Cap: how he got started at Discord +
+
+
+ + therealcap +
+
+ + jwoff +
+
+ + tpcstld +
+
+
+
+
+ +
+ Grimes' Community +
+
+ Just started +
+
+ + 183 +
+
+
AMA with Grimes
+
+
+
+ + Grimes +
+
+ + bigbrainisme +
+
+ + MrLocke +
+
+ +
+
+
+
+ +
+ Anime Soul Discord +
+
+ + 85 +
+
+
+ What are you favourite anime of the year? +
+
+
+ + therealcap +
+
+ + jwoff +
+
+ + tpcstld +
+
+
+
+ +
+

Activities

+
+
+ +
+

RokaK, Sylvie, and 4 others

+ In a voice channel +
+
+
+
+ +
+ +
+
+ Friends Server + Hangout Room +
+
+ + + +3 +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+

yuugu, iDiscarded, and 2 others

+ League of Legends - 3h +
+
+
+
+ +
+ +
+
+ Scrubs + Bronze to Gold Scr... +
+
+ + + +3 +
+
+
+
+
+
+ +
+

abfuscate

+ Hearthstone - 3h +
+
+
+
+
+
+ +
+

Kovath

+ Destiny 2 - 4h +
+
+
+
+
+ + diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.css b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.css new file mode 100644 index 000000000..fc4a4b902 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.css @@ -0,0 +1,522 @@ +* { + margin: 0; + padding: 0; +} + +:root { + --stageSpeaker-size: 20px; + --friendImg-size: 30px; +} + +body { + height: 100vh; + width: 100vw; + display: grid; + grid-template: "a b c c" "a b d e" "a b d e" "a b d e" "a b d e"; + grid-template-columns: 5rem 15rem auto 20rem; + grid-template-rows: 3rem auto; + background-color: #36393f; +} + +.apps { + grid-area: a; + height: 100%; + background-color: #202225; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +} +.apps hr { + width: 60%; + border: 0.5px solid #96989d; + opacity: 0.5; +} +.apps__app { + width: 3rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #36393f; + color: #3ba55d; + margin: 0.5em 0; + display: flex; + align-items: center; + justify-content: center; +} +.apps__app img { + width: 100%; + aspect-ratio: 1/1; + border-radius: 50%; +} +.apps__app--discord { + border-radius: 10px; + background-color: #5865f2; + color: whitesmoke; + font-size: 2rem; +} +.apps__app:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; + cursor: pointer; +} + +.home { + grid-area: b; + color: #96989d; + background-color: #2f3136; + display: flex; + flex-direction: column; +} +.home__search { + border-bottom: 2px solid rgba(32, 34, 37, 0.3921568627); + height: 2.9rem; + display: flex; + justify-content: center; + align-items: center; +} +.home__search input { + background-color: #202225; + border: none; + height: 60%; + border-radius: 5px; + color: white; +} +.home__search input::-moz-placeholder { + text-align: center; +} +.home__search input:-ms-input-placeholder { + text-align: center; +} +.home__search input::placeholder { + text-align: center; +} +.home__option { + padding: 0 0.5em; + height: 3rem; + display: flex; + align-items: center; +} +.home__option i { + width: 2rem; +} +.home__option b { + margin-left: 0.5em; +} +.home__option:hover { + background-color: #42464d; + cursor: pointer; +} +.home__friends { + display: flex; + flex-direction: column; + padding: 0.5em; + overflow-y: auto; +} +.home__friends__friend { + display: flex; + align-items: center; + padding: 0.5em; + border-radius: 10px; + position: relative; +} +.home__friends__friend img, +.home__friends__friend .img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; +} +.home__friends__friend .img { + background-color: #3ba55d; + display: flex; + align-items: center; + justify-content: center; + color: whitesmoke; +} +.home__friends__friend .green-dot { + position: absolute; + width: calc(var(--friendImg-size) / 4); + height: calc(var(--friendImg-size) / 4); + border-radius: 50%; + background-color: #3ba55d; + bottom: 15%; + left: 12%; + z-index: 10; + border: 3px solid #2f3136; +} +.home__friends__friend .name { + margin-left: 1em; + display: flex; + flex-direction: column; +} +.home__friends__friend .name .explication { + font-size: 0.7em; +} +.home__friends__friend:hover { + background-color: #42464d; + cursor: pointer; +} +.home__user { + background-color: #292b2f; + height: 2rem; + margin-top: auto; + padding: 0.3em; + display: flex; + align-items: center; + justify-content: space-between; +} +.home__user__img { + width: 2rem; + height: 2rem; + border-radius: 50%; +} +.home__user__name { + font-size: 0.8em; + color: whitesmoke; + margin-left: 0.5em; +} +.home__user__icons { + width: 40%; + display: flex; + justify-content: space-around; +} + +.topNav { + grid-area: c; + border-bottom: 2px solid rgba(32, 34, 37, 0.3921568627); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1em; + font-size: 0.9rem; + color: #96989d; +} +.topNav__title b { + margin-left: 0.5em; + color: whitesmoke; +} +.topNav__settings { + display: flex; +} +.topNav__settings .fa-solid { + margin: 0 0.5em; +} +.topNav__settings .fa-solid:hover { + color: whitesmoke; + cursor: pointer; +} +.topNav__settings .fa-rotate-right { + border-right: 1px solid #96989d; + padding-right: 1em; +} + +.stages { + grid-area: d; + overflow-y: auto; + border-right: 2px solid rgba(32, 34, 37, 0.3921568627); + display: flex; + flex-direction: column; + padding: 1rem; + color: whitesmoke; +} +.stages__title { + font-size: 1.5rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; +} +.stages__stage { + padding: 1em; + background-color: #2f3136; + border-radius: 5px; + margin-top: 1em; +} +.stages__stage__server { + display: flex; + align-items: center; +} +.stages__stage__server img { + width: 2rem; + aspect-ratio: 1/1; + border-radius: 5px; +} +.stages__stage__server__text { + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: smaller; + margin-left: 0.5em; +} +.stages__stage__server__text .name { + display: flex; +} +.stages__stage__server__text .name .status-icon { + margin-left: 0.5em; + width: 1rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: rgb(24, 47, 181); + display: flex; +} +.stages__stage__server__text .name .status-icon .fa-eye { + margin: auto; + font-size: 0.7em; +} +.stages__stage__server__text .status { + color: #96989d; +} +.stages__stage__server__online { + margin-left: auto; + background-color: #202225; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 10px; + font-size: 0.8rem; + padding: 5px; +} +.stages__stage__server__online i { + margin-right: 5px; +} +.stages__stage__name { + margin: 0.5em 0; + font-size: 1.1rem; +} +.stages__stage__speakers { + color: #96989d; + display: grid; + grid-template-columns: repeat(3, 1fr); + width: 80%; +} +.stages__stage__speakers__speaker { + display: flex; + align-items: center; + margin: 0.5em; +} +.stages__stage__speakers__speaker img, +.stages__stage__speakers__speaker i { + width: var(--stageSpeaker-size); + height: var(--stageSpeaker-size); + border-radius: 50%; + margin-right: 0.5em; +} +.stages__stage__speakers__speaker i { + background-color: #202225; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.5em; +} +.stages__stage__speakers--withPhoto { + display: grid; + grid-template-columns: 5fr 2fr; +} +.stages__stage__speakers--withPhoto div { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.stages__stage__speakers--withPhoto div .stages__stage__speakers__speaker { + display: flex; + align-items: center; + justify-content: flex-start; +} +.stages__stage__speakers--withPhoto div .stages__stage__speakers__speaker img { + width: var(--stageSpeaker-size); + height: var(--stageSpeaker-size); + border-radius: 50%; + margin-left: 0.5em; +} +.stages__stage__speakers--withPhoto img { + height: 6rem; + aspect-ratio: 4/2; + border-radius: 10px; + margin-left: auto; +} + +.stages::-webkit-scrollbar { + width: 1em; +} + +.stages::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} + +.stages::-webkit-scrollbar-thumb { + background-color: #292b2f; + border-radius: 20px; +} + +.activities { + grid-area: e; + display: flex; + flex-direction: column; + color: whitesmoke; + padding: 1rem; +} +.activities__title { + font-size: 1.5rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; +} +.activities__activity { + padding: 0.5em; + background-color: #2f3136; + border-radius: 5px; + margin-top: 1em; +} +.activities__activity__users { + display: flex; + position: relative; +} +.activities__activity__users img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; + margin-right: 0.5em; +} +.activities__activity__users span { + color: #96989d; + font-size: 0.6rem; +} +.activities__activity__users .green-dot { + position: absolute; + width: calc(var(--friendImg-size) / 3); + height: calc(var(--friendImg-size) / 3); + border-radius: 50%; + background-color: #3ba55d; + top: 1rem; + left: 1rem; + border: 3px solid #36393f; +} +.activities__activity__server { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + position: relative; + background-color: #36393f; +} +.activities__activity__server__head { + width: 90%; + display: flex; + height: 2rem; + padding: 0.5em; +} +.activities__activity__server__head__img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; +} +.activities__activity__server__head .green-dot--icon { + position: absolute; + width: calc(var(--friendImg-size) / 3); + height: calc(var(--friendImg-size) / 3); + font-size: 10px; + border-radius: 50%; + background-color: #36393f; + top: 1.5rem; + left: 2rem; + border: 3px solid #36393f; +} +.activities__activity__server__head__name { + margin-left: 1em; + display: flex; + flex-direction: column; +} +.activities__activity__server__head__name .explication { + font-size: 0.7em; + color: #96989d; +} +.activities__activity__server__head .icons { + width: 5rem; + height: 1.5rem; + margin-left: auto; + display: flex; + position: relative; +} +.activities__activity__server__head .icons__online { + position: absolute; + right: 50%; + width: 1.5rem; + font-size: 0.8rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #5865f2; + color: whitesmoke; + display: flex; + align-items: center; + justify-content: center; +} +.activities__activity__server__head .icons__online--extra { + position: absolute; + right: 0; + outline: 2px solid #36393f; + width: 1.5rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #202225; + color: whitesmoke; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8em; +} +.activities__activity__server__head .icons .fa-brands:nth-child(2) { + position: absolute; + right: 25%; + outline: 2px solid #36393f; +} +.activities__activity__server .images { + width: 100%; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 8rem 8rem; +} +.activities__activity__server .images i { + font-size: 1.5rem; +} +.activities__activity__server .images .img { + display: flex; + align-items: center; + justify-content: center; +} +.activities__activity__server .images .img .icon-circle { + background-color: #36393f; + width: 4rem; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} +.activities__activity__server .images .img:first-child { + background-color: #5865f2; +} +.activities__activity__server .images .img:nth-child(2) { + background-color: #3ba55d; +} +.activities__activity__server .images .img:nth-child(3) { + background-color: #96989d; + border-radius: 0 0 0 10px; +} +.activities__activity__server .images .img:last-child { + background-color: orange; + border-radius: 0 0 10px 0; +} + +@media screen and (max-width: 1400px) { + body { + grid-template: "a b c" "a b d"; + grid-template-rows: 3rem auto; + grid-template-columns: 5rem 15rem auto; + } + body .activities { + display: none; + } +} +@media screen and (max-width: 900px) { + html { + font-size: 12px; + } +} +@media screen and (max-width: 650px) { + html { + font-size: 10px; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.css.map b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.css.map new file mode 100644 index 000000000..2550fe531 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;ACCF;;ADEA;EACE,yBAAA;EACA,sBAAA;ACCF;;ADEA;EACE,aAAA;EACA,YAAA;EACA,aAAA;EACA,gEACE;EAKF,4CAAA;EACA,6BAAA;EACA,yBAAA;ACJF;;ADOA;EACE,YAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;ACJF;ADKE;EACE,UAAA;EACA,2BAAA;EACA,YAAA;ACHJ;ADKE;EACE,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,yBAAA;EACA,cAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACHJ;ADII;EACE,WAAA;EACA,iBAAA;EACA,kBAAA;ACFN;ADII;EACE,mBAAA;EACA,yBAAA;EACA,iBAAA;EACA,eAAA;ACFN;ADKE;EACE,qBAAA;EACA,kCAAA;EACA,eAAA;ACHJ;;ADOA;EACE,YAAA;EACA,cAAA;EACA,yBAAA;EACA,aAAA;EACA,sBAAA;ACJF;ADKE;EACE,uDAAA;EACA,cAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACHJ;ADII;EACE,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;ACFN;ADII;EACE,kBAAA;ACFN;ADCI;EACE,kBAAA;ACFN;ADCI;EACE,kBAAA;ACFN;ADME;EACE,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACJJ;ADKI;EACE,WAAA;ACHN;ADKI;EACE,kBAAA;ACHN;ADME;EACE,yBAAA;EACA,eAAA;ACJJ;ADME;EAEE,aAAA;EACA,sBAAA;EACA,cAAA;EACA,gBAAA;ACLJ;ADMI;EACE,aAAA;EACA,mBAAA;EACA,cAAA;EACA,mBAAA;EACA,kBAAA;ACJN;ADKM;;EAEE,4BAAA;EACA,6BAAA;EACA,kBAAA;ACHR;ADKM;EACE,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,iBAAA;ACHR;ADKM;EACE,kBAAA;EACA,sCAAA;EACA,uCAAA;EACA,kBAAA;EACA,yBAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,yBAAA;ACHR;ADKM;EACE,gBAAA;EACA,aAAA;EACA,sBAAA;ACHR;ADIQ;EACE,gBAAA;ACFV;ADMI;EACE,yBAAA;EACA,eAAA;ACJN;ADOE;EACE,yBAAA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;ACLJ;ADMI;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ACJN;ADMI;EACE,gBAAA;EACA,iBAAA;EACA,kBAAA;ACJN;ADMI;EACE,UAAA;EACA,aAAA;EACA,6BAAA;ACJN;;ADSA;EACE,YAAA;EACA,uDAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,iBAAA;EACA,cAAA;ACNF;ADQI;EACE,kBAAA;EACA,iBAAA;ACNN;ADSE;EACE,aAAA;ACPJ;ADQI;EACE,eAAA;ACNN;ADQI;EACE,iBAAA;EACA,eAAA;ACNN;ADQI;EACE,+BAAA;EACA,kBAAA;ACNN;;ADaA;EACE,YAAA;EACA,gBAAA;EACA,sDAAA;EACA,aAAA;EACA,sBAAA;EACA,aAAA;EACA,iBAAA;ACVF;ADWE;EACE,iBAAA;EACA,qGAAA;ACTJ;ADYE;EACE,YAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;ACVJ;ADWI;EACE,aAAA;EACA,mBAAA;ACTN;ADUM;EACE,WAAA;EACA,iBAAA;EACA,kBAAA;ACRR;ADUM;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,kBAAA;EACA,kBAAA;ACRR;ADSQ;EACE,aAAA;ACPV;ADQU;EACE,kBAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,kCAAA;EACA,aAAA;ACNZ;ADOY;EACE,YAAA;EACA,gBAAA;ACLd;ADSQ;EACE,cAAA;ACPV;ADUM;EACE,iBAAA;EACA,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,iBAAA;EACA,YAAA;ACRR;ADSQ;EACE,iBAAA;ACPV;ADWI;EACE,eAAA;EACA,iBAAA;ACTN;ADWI;EAEE,cAAA;EACA,aAAA;EACA,qCAAA;EACA,UAAA;ACVN;ADWM;EACE,aAAA;EACA,mBAAA;EACA,aAAA;ACTR;ADUQ;;EAEE,+BAAA;EACA,gCAAA;EACA,kBAAA;EACA,mBAAA;ACRV;ADUQ;EACE,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;ACRV;ADYI;EAEE,aAAA;EACA,8BAAA;ACXN;ADYM;EAEE,aAAA;EACA,qCAAA;ACXR;ADYQ;EACE,aAAA;EACA,mBAAA;EACA,2BAAA;ACVV;ADWU;EACE,+BAAA;EACA,gCAAA;EACA,kBAAA;EACA,kBAAA;ACTZ;ADaM;EACE,YAAA;EACA,iBAAA;EACA,mBAAA;EACA,iBAAA;ACXR;;ADgBA;EACE,UAAA;ACbF;;ADeA;EACE,4CAAA;ACZF;;ADcA;EACE,yBAAA;EACA,mBAAA;ACXF;;ADcA;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,aAAA;ACXF;ADYE;EACE,iBAAA;EACA,qGAAA;ACVJ;ADaE;EACE,cAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;ACXJ;ADYI;EACE,aAAA;EACA,kBAAA;ACVN;ADWM;EACE,4BAAA;EACA,6BAAA;EACA,kBAAA;EACA,mBAAA;ACTR;ADWM;EACE,cAAA;EACA,iBAAA;ACTR;ADWM;EACE,kBAAA;EACA,sCAAA;EACA,uCAAA;EACA,kBAAA;EACA,yBAAA;EACA,SAAA;EACA,UAAA;EACA,yBAAA;ACTR;ADYI;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;ACVN;ADWM;EAEE,UAAA;EACA,aAAA;EACA,YAAA;EACA,cAAA;ACVR;ADWQ;EACE,4BAAA;EACA,6BAAA;EACA,kBAAA;ACTV;ADWQ;EACE,kBAAA;EACA,sCAAA;EACA,uCAAA;EACA,eAAA;EACA,kBAAA;EACA,yBAAA;EACA,WAAA;EACA,UAAA;EACA,yBAAA;ACTV;ADWQ;EACE,gBAAA;EACA,aAAA;EACA,sBAAA;ACTV;ADUU;EACE,gBAAA;EACA,cAAA;ACRZ;ADWQ;EACE,WAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,kBAAA;ACTV;ADUU;EACE,kBAAA;EACA,UAAA;EACA,aAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,yBAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACRZ;ADSY;EACE,kBAAA;EACA,QAAA;EACA,0BAAA;EACA,aAAA;EACA,iBAAA;EACA,kBAAA;EACA,yBAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;ACPd;ADUU;EACE,kBAAA;EACA,UAAA;EACA,0BAAA;ACRZ;ADYM;EACE,WAAA;EACA,aAAA;EACA,8BAAA;EACA,6BAAA;ACVR;ADWQ;EACE,iBAAA;ACTV;ADWQ;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;ACTV;ADUU;EACE,yBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACRZ;ADWQ;EACE,yBAAA;ACTV;ADWQ;EACE,yBAAA;ACTV;ADWQ;EACE,yBAAA;EACA,yBAAA;ACTV;ADWQ;EACE,wBAAA;EACA,yBAAA;ACTV;;ADgBA;EACE;IACE,8BACE;IAEF,6BAAA;IACA,sCAAA;ECfF;EDgBE;IACE,aAAA;ECdJ;AACF;ADkBA;EACE;IACE,eAAA;EChBF;AACF;ADmBA;EACE;IACE,eAAA;ECjBF;AACF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.scss b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.scss new file mode 100644 index 000000000..0a0fef404 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/Vladi_Bykanov/style.scss @@ -0,0 +1,534 @@ +* { + margin: 0; + padding: 0; +} + +:root { + --stageSpeaker-size: 20px; + --friendImg-size: 30px; +} + +body { + height: 100vh; + width: 100vw; + display: grid; + grid-template: + "a b c c" + "a b d e" + "a b d e" + "a b d e" + "a b d e"; + grid-template-columns: 5rem 15rem auto 20rem; + grid-template-rows: 3rem auto; + background-color: #36393f; +} + +.apps { + grid-area: a; + height: 100%; + background-color: #202225; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; + hr { + width: 60%; + border: 0.5px solid #96989d; + opacity: 0.5; + } + &__app { + width: 3rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #36393f; + color: #3ba55d; + margin: 0.5em 0; + display: flex; + align-items: center; + justify-content: center; + img { + width: 100%; + aspect-ratio: 1/1; + border-radius: 50%; + } + &--discord { + border-radius: 10px; + background-color: #5865f2; + color: whitesmoke; + font-size: 2rem; + } + } + &__app:hover { + transform: scale(1.2); + transition: transform ease-in 0.2s; + cursor: pointer; + } +} + +.home { + grid-area: b; + color: #96989d; + background-color: #2f3136; + display: flex; + flex-direction: column; + &__search { + border-bottom: 2px solid #20222564; + height: 2.9rem; + display: flex; + justify-content: center; + align-items: center; + input { + background-color: #202225; + border: none; + height: 60%; + border-radius: 5px; + color: white; + } + input::placeholder { + text-align: center; + } + } + + &__option { + padding: 0 0.5em; + height: 3rem; + display: flex; + align-items: center; + i { + width: 2rem; + } + b { + margin-left: 0.5em; + } + } + &__option:hover { + background-color: #42464d; + cursor: pointer; + } + &__friends { + // border: 1px solid white; + display: flex; + flex-direction: column; + padding: 0.5em; + overflow-y: auto; + &__friend { + display: flex; + align-items: center; + padding: 0.5em; + border-radius: 10px; + position: relative; + img, + .img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; + } + .img { + background-color: #3ba55d; + display: flex; + align-items: center; + justify-content: center; + color: whitesmoke; + } + .green-dot { + position: absolute; + width: calc(var(--friendImg-size) / 4); + height: calc(var(--friendImg-size) / 4); + border-radius: 50%; + background-color: #3ba55d; + bottom: 15%; + left: 12%; + z-index: 10; + border: 3px solid #2f3136; + } + .name { + margin-left: 1em; + display: flex; + flex-direction: column; + .explication { + font-size: 0.7em; + } + } + } + &__friend:hover { + background-color: #42464d; + cursor: pointer; + } + } + &__user { + background-color: #292b2f; + height: 2rem; + margin-top: auto; + padding: 0.3em; + display: flex; + align-items: center; + justify-content: space-between; + &__img { + width: 2rem; + height: 2rem; + border-radius: 50%; + } + &__name { + font-size: 0.8em; + color: whitesmoke; + margin-left: 0.5em; + } + &__icons { + width: 40%; + display: flex; + justify-content: space-around; + } + } +} + +.topNav { + grid-area: c; + border-bottom: 2px solid #20222564; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1em; + font-size: 0.9rem; + color: #96989d; + &__title { + b { + margin-left: 0.5em; + color: whitesmoke; + } + } + &__settings { + display: flex; + .fa-solid { + margin: 0 0.5em; + } + .fa-solid:hover { + color: whitesmoke; + cursor: pointer; + } + .fa-rotate-right { + border-right: 1px solid #96989d; + padding-right: 1em; + } + } +} + +// stages section + +.stages { + grid-area: d; + overflow-y: auto; + border-right: 2px solid #20222564; + display: flex; + flex-direction: column; + padding: 1rem; + color: whitesmoke; + &__title { + font-size: 1.5rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", + "Lucida Sans", Arial, sans-serif; + } + &__stage { + padding: 1em; + background-color: #2f3136; + border-radius: 5px; + margin-top: 1em; + &__server { + display: flex; + align-items: center; + img { + width: 2rem; + aspect-ratio: 1/1; + border-radius: 5px; + } + &__text { + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: smaller; + margin-left: 0.5em; + .name { + display: flex; + .status-icon { + margin-left: 0.5em; + width: 1rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: rgb(24, 47, 181); + display: flex; + .fa-eye { + margin: auto; + font-size: 0.7em; + } + } + } + .status { + color: #96989d; + } + } + &__online { + margin-left: auto; + background-color: #202225; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 10px; + font-size: 0.8rem; + padding: 5px; + i { + margin-right: 5px; + } + } + } + &__name { + margin: 0.5em 0; + font-size: 1.1rem; + } + &__speakers { + // border: 1px solid white; + color: #96989d; + display: grid; + grid-template-columns: repeat(3, 1fr); + width: 80%; + &__speaker { + display: flex; + align-items: center; + margin: 0.5em; + img, + i { + width: var(--stageSpeaker-size); + height: var(--stageSpeaker-size); + border-radius: 50%; + margin-right: 0.5em; + } + i { + background-color: #202225; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.5em; + } + } + } + &__speakers--withPhoto { + // border: 1px solid white; + display: grid; + grid-template-columns: 5fr 2fr; + div { + // border: 1px solid white; + display: grid; + grid-template-columns: repeat(2, 1fr); + .stages__stage__speakers__speaker { + display: flex; + align-items: center; + justify-content: flex-start; + img { + width: var(--stageSpeaker-size); + height: var(--stageSpeaker-size); + border-radius: 50%; + margin-left: 0.5em; + } + } + } + img { + height: 6rem; + aspect-ratio: 4/2; + border-radius: 10px; + margin-left: auto; + } + } + } +} +.stages::-webkit-scrollbar { + width: 1em; +} +.stages::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} +.stages::-webkit-scrollbar-thumb { + background-color: #292b2f; + border-radius: 20px; +} + +.activities { + grid-area: e; + display: flex; + flex-direction: column; + color: whitesmoke; + padding: 1rem; + &__title { + font-size: 1.5rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", + "Lucida Sans", Arial, sans-serif; + } + &__activity { + padding: 0.5em; + background-color: #2f3136; + border-radius: 5px; + margin-top: 1em; + &__users { + display: flex; + position: relative; + img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; + margin-right: 0.5em; + } + span { + color: #96989d; + font-size: 0.6rem; + } + .green-dot { + position: absolute; + width: calc(var(--friendImg-size) / 3); + height: calc(var(--friendImg-size) / 3); + border-radius: 50%; + background-color: #3ba55d; + top: 1rem; + left: 1rem; + border: 3px solid #36393f; + } + } + &__server { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + position: relative; + background-color: #36393f; + &__head { + // border: 2px solid white; + width: 90%; + display: flex; + height: 2rem; + padding: 0.5em; + &__img { + width: var(--friendImg-size); + height: var(--friendImg-size); + border-radius: 50%; + } + .green-dot--icon { + position: absolute; + width: calc(var(--friendImg-size) / 3); + height: calc(var(--friendImg-size) / 3); + font-size: 10px; + border-radius: 50%; + background-color: #36393f; + top: 1.5rem; + left: 2rem; + border: 3px solid #36393f; + } + &__name { + margin-left: 1em; + display: flex; + flex-direction: column; + .explication { + font-size: 0.7em; + color: #96989d; + } + } + .icons { + width: 5rem; + height: 1.5rem; + margin-left: auto; + display: flex; + position: relative; + &__online { + position: absolute; + right: 50%; + width: 1.5rem; + font-size: 0.8rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #5865f2; + color: whitesmoke; + display: flex; + align-items: center; + justify-content: center; + &--extra { + position: absolute; + right: 0; + outline: 2px solid #36393f; + width: 1.5rem; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #202225; + color: whitesmoke; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8em; + } + } + .fa-brands:nth-child(2) { + position: absolute; + right: 25%; + outline: 2px solid #36393f; + } + } + } + .images { + width: 100%; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 8rem 8rem; + i { + font-size: 1.5rem; + } + .img { + display: flex; + align-items: center; + justify-content: center; + .icon-circle { + background-color: #36393f; + width: 4rem; + height: 4rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + } + } + .img:first-child { + background-color: #5865f2; + } + .img:nth-child(2) { + background-color: #3ba55d; + } + .img:nth-child(3) { + background-color: #96989d; + border-radius: 0 0 0 10px; + } + .img:last-child { + background-color: orange; + border-radius: 0 0 10px 0; + } + } + } + } +} + +@media screen and (max-width: 1400px) { + body { + grid-template: + "a b c" + "a b d"; + grid-template-rows: 3rem auto; + grid-template-columns: 5rem 15rem auto; + .activities { + display: none; + } + } +} + +@media screen and (max-width: 900px) { + html { + font-size: 12px; + } +} + +@media screen and (max-width: 650px) { + html { + font-size: 10px; + } +} diff --git a/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/dist/nba.css b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/dist/nba.css new file mode 100644 index 000000000..d417985aa --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/dist/nba.css @@ -0,0 +1,236 @@ +:root { + font-size: 16px; +} +@media only screen and (min-width: 1400px) { + :root { + font-size: 18px; + } +} +@media only screen and (min-width: 1300px) { + :root { + font-size: 24px; + } +} + +body { + margin: 0; +} + +.container { + height: 100vh; + width: 100vw; + margin: 0; + color: white; + position: relative; +} +.container .navBar { + width: 100vw; + height: 5vh; + background-color: black; + font-weight: 900; + padding-left: 14vw; + padding-right: 14vw; + position: sticky; + top: 0rem; + z-index: 10; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; +} +.container .navBar__topics { + width: 40vw; + display: flex; + justify-content: space-between; + align-items: center; +} +.container .navBar__topics__logo { + height: 0.8rem; + background-image: url(https://cdn.nba.com/logos/leagues/logo-nba.svg); + background-size: contain; + background-repeat: no-repeat; + width: 1.5rem; +} +.container .navBar__topics__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .navBar__sales { + width: 20vw; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.container .navBar__sales__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .main { + height: 18rem; + width: 36rem; + border: 0.2rem solid black; + border-radius: 0.5rem; + position: relative; + top: 5rem; + left: 10rem; + display: block; + line-height: 1.5rem; +} +.container .main__article { + height: 18rem; + width: 36rem; + position: relative; + top: 0rem; + background-size: 100%; + background-repeat: no-repeat; + display: block; +} +.container .main__article__data { + height: 11.5rem; + width: 11rem; + position: relative; + top: 1rem; + left: 2rem; + padding: 1rem; + animation: slide 10s linear 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.container .main__article__data__headline { + width: 32rem; + font-weight: 900; + font-size: 2rem; + line-height: 2.5rem; +} +.container .main__article__data__personal { + font-weight: 300; + font-size: 0.7rem; + line-height: 1.5rem; +} +.container .main__article__data__link { + width: 10rem; + height: 2rem; + background-color: #ffe600; + border-radius: 0.5rem; + font-weight: 900; + font-size: 0.6rem; + padding: 0.5rem; + margin-top: 0.5rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #616161; +} +.container .main__article__data__link:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.container .main__article__data__link:active { + background-color: #4a0afb; +} +.container .main__article--luka { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 70%), url(https://images2.minutemediacdn.com/image/upload/c_crop,w_4450,h_2503,x_0,y_0/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/images/ImagnImages/mmsport/83/01g36jr6g8a7eg799nfd.jpg); + animation: zoom 10s linear 1; +} +.container .main__article--ja { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 77%), url(https://phantom-marca.unidadeditorial.es/efd58352dab3d164ff6026e8db04f427/resize/1320/f/jpg/assets/multimedia/imagenes/2022/04/27/16510298219309.jpg); + position: relative; + top: -18rem; + animation: zoom 10.1s linear 10s 1, appear 10.1s linear 10s 1; + visibility: hidden; +} +.container .main__article--ja__data { + animation: slide 10.1s linear 10s 1; +} +.container .main__article--giannis { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 77%), url(https://s.yimg.com/ny/api/res/1.2/IOgkshHrdNg6IXEOF0VnEQ--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/os/creatr-uploaded-images/2022-11/35f8b8b0-6474-11ed-bf49-1f9adc2c172d); + position: relative; + top: -36rem; + animation: zoom 10.1s linear 20s 1, appear 10.1s linear 20s 1; + visibility: hidden; +} +.container .main__article--giannis__data { + animation: slide 10.1s linear 20s 1; +} +.container .main__article--deni { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 77%), url(https://www.nbcsports.com/sites/rsnunited/files/article/hero/Avdija_Deni_USATSI_18057589.jpg); + position: relative; + top: -54rem; + animation: zoom 10.1s linear 30s 1, appear 10.1s linear 30s 1; + visibility: hidden; +} +.container .main__article--deni__data { + animation: slide 10.1s linear 30s infinite; +} +.container .main__playersBar { + width: 34rem; + height: 3rem; + display: flex; + justify-content: space-around; + align-items: center; + position: relative; + bottom: 57.5rem; + left: 2rem; +} +.container .main__playersBar__player { + width: auto; + height: auto; + padding: 0.5rem; + display: flex; + flex-direction: column; +} +.container .main__playersBar__player__lapseBar { + width: 5rem; + height: 0.1rem; + background-color: gray; + border-radius: 0.1rem; +} +.container .main__playersBar__player__lapseBar__progress { + height: 0.1rem; + width: 0%; + background-color: white; + border-radius: 0.1rem; +} +.container .main__playersBar__player__lapseBar__progress--luka { + animation: lapse 10.1s linear 0s 1; +} +.container .main__playersBar__player__lapseBar__progress--ja { + animation: lapse 10.1s linear 10s 1; +} +.container .main__playersBar__player__lapseBar__progress--giannis { + animation: lapse 10.1s linear 20s 1; +} +.container .main__playersBar__player__lapseBar__progress--deni { + animation: lapse 10.1s linear 30s 1; +} + +@keyframes appear { + 100% { + visibility: visible; + } +} +@keyframes zoom { + 90% { + background-size: 110%; + } + 100% { + background-size: 111%; + } +} +@keyframes slide { + 0% { + left: 12rem; + } + 3% { + left: 2rem; + } + 100% { + left: 2rem; + } +} +@keyframes lapse { + 100% { + width: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.css b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.css new file mode 100644 index 000000000..ec26f4e44 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.css @@ -0,0 +1,279 @@ +:root { + font-size: 16px; +} +@media only screen and (min-width: 1400px) { + :root { + font-size: 18px; + } +} +@media only screen and (min-width: 1300px) { + :root { + font-size: 24px; + } +} + +body { + margin: 0; +} + +.container { + height: 100vh; + width: 100vw; + margin: 0; + color: white; + position: relative; +} +.container .navBar { + width: 100vw; + height: 5vh; + background-color: black; + font-weight: 900; + padding-left: 14vw; + padding-right: 14vw; + position: -webkit-sticky; + position: sticky; + top: 0rem; + z-index: 10; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; +} +.container .navBar__topics { + width: 40vw; + display: flex; + justify-content: space-between; + align-items: center; +} +.container .navBar__topics__logo { + height: 0.8rem; + background-image: url(https://cdn.nba.com/logos/leagues/logo-nba.svg); + background-size: contain; + background-repeat: no-repeat; + width: 1.5rem; +} +.container .navBar__topics__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .navBar__sales { + width: 20vw; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.container .navBar__sales__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .main { + height: 18rem; + width: 36rem; + border: 0.2rem solid rgb(0, 0, 0); + border-radius: 0.5rem; + position: relative; + top: 5rem; + left: 10rem; + display: block; + line-height: 1.5rem; +} +.container .main__article { + height: 18rem; + width: 36rem; + position: relative; + top: 0rem; + background-size: 100%; + background-repeat: no-repeat; + display: block; +} +.container .main__article__data { + height: 11.5rem; + width: 11rem; + position: relative; + top: 1rem; + left: 2rem; + padding: 1rem; + -webkit-animation: slide 10s linear 1; + animation: slide 10s linear 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.container .main__article__data__headline { + width: 32rem; + font-weight: 900; + font-size: 2rem; + line-height: 2.5rem; +} +.container .main__article__data__personal { + font-weight: 300; + font-size: 0.7rem; + line-height: 1.5rem; +} +.container .main__article__data__link { + width: 10rem; + height: 2rem; + background-color: rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + font-size: 0.6rem; + padding: 0.5rem; + margin-top: 0.5rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(97, 97, 97); +} +.container .main__article__data__link:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.container .main__article__data__link:active { + background-color: rgb(74, 10, 251); +} +.container .main__article--luka { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%), url(https://images2.minutemediacdn.com/image/upload/c_crop,w_4450,h_2503,x_0,y_0/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/images/ImagnImages/mmsport/83/01g36jr6g8a7eg799nfd.jpg); + -webkit-animation: zoom 10s linear 1; + animation: zoom 10s linear 1; +} +.container .main__article--ja { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 77%), url(https://phantom-marca.unidadeditorial.es/efd58352dab3d164ff6026e8db04f427/resize/1320/f/jpg/assets/multimedia/imagenes/2022/04/27/16510298219309.jpg); + position: relative; + top: -18rem; + -webkit-animation: zoom 10.1s linear 10s 1, appear 10.1s linear 10s 1; + animation: zoom 10.1s linear 10s 1, appear 10.1s linear 10s 1; + visibility: hidden; +} +.container .main__article--ja__data { + -webkit-animation: slide 10.1s linear 10s 1; + animation: slide 10.1s linear 10s 1; +} +.container .main__article--giannis { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 77%), url(https://s.yimg.com/ny/api/res/1.2/IOgkshHrdNg6IXEOF0VnEQ--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/os/creatr-uploaded-images/2022-11/35f8b8b0-6474-11ed-bf49-1f9adc2c172d); + position: relative; + top: -36rem; + -webkit-animation: zoom 10.1s linear 20s 1, appear 10.1s linear 20s 1; + animation: zoom 10.1s linear 20s 1, appear 10.1s linear 20s 1; + visibility: hidden; +} +.container .main__article--giannis__data { + -webkit-animation: slide 10.1s linear 20s 1; + animation: slide 10.1s linear 20s 1; +} +.container .main__article--deni { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 77%), url(https://www.nbcsports.com/sites/rsnunited/files/article/hero/Avdija_Deni_USATSI_18057589.jpg); + position: relative; + top: -54rem; + -webkit-animation: zoom 10.1s linear 30s 1, appear 10.1s linear 30s 1; + animation: zoom 10.1s linear 30s 1, appear 10.1s linear 30s 1; + visibility: hidden; +} +.container .main__article--deni__data { + -webkit-animation: slide 10.1s linear 30s infinite; + animation: slide 10.1s linear 30s infinite; +} +.container .main__playersBar { + width: 34rem; + height: 3rem; + display: flex; + justify-content: space-around; + align-items: center; + position: relative; + bottom: 57.5rem; + left: 2rem; +} +.container .main__playersBar__player { + width: auto; + height: auto; + padding: 0.5rem; + display: flex; + flex-direction: column; +} +.container .main__playersBar__player__lapseBar { + width: 5rem; + height: 0.1rem; + background-color: gray; + border-radius: 0.1rem; +} +.container .main__playersBar__player__lapseBar__progress { + height: 0.1rem; + width: 0%; + background-color: white; + border-radius: 0.1rem; +} +.container .main__playersBar__player__lapseBar__progress--luka { + -webkit-animation: lapse 10.1s linear 0s 1; + animation: lapse 10.1s linear 0s 1; +} +.container .main__playersBar__player__lapseBar__progress--ja { + -webkit-animation: lapse 10.1s linear 10s 1; + animation: lapse 10.1s linear 10s 1; +} +.container .main__playersBar__player__lapseBar__progress--giannis { + -webkit-animation: lapse 10.1s linear 20s 1; + animation: lapse 10.1s linear 20s 1; +} +.container .main__playersBar__player__lapseBar__progress--deni { + -webkit-animation: lapse 10.1s linear 30s 1; + animation: lapse 10.1s linear 30s 1; +} + +@-webkit-keyframes appear { + 100% { + visibility: visible; + } +} + +@keyframes appear { + 100% { + visibility: visible; + } +} +@-webkit-keyframes zoom { + 90% { + background-size: 110%; + } + 100% { + background-size: 111%; + } +} +@keyframes zoom { + 90% { + background-size: 110%; + } + 100% { + background-size: 111%; + } +} +@-webkit-keyframes slide { + 0% { + left: 12rem; + } + 3% { + left: 2rem; + } + 100% { + left: 2rem; + } +} +@keyframes slide { + 0% { + left: 12rem; + } + 3% { + left: 2rem; + } + 100% { + left: 2rem; + } +} +@-webkit-keyframes lapse { + 100% { + width: 100%; + } +} +@keyframes lapse { + 100% { + width: 100%; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.html b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.html new file mode 100644 index 000000000..87e08d657 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.html @@ -0,0 +1,145 @@ + + + + + + + + + NBA.com + + + +
+
+
+ +
Games
+
Schedule
+
Watch
+
News
+
Stats
+
Standings
+
Teams
+
Players
+
Fantasy
+
NBABet
+
+
+
League Pass
+
Store
+
Tickets
+
+
Sign In
+
+
+ +
+
+
+
Luka Doncic
+
+
Date of birth: February 28, 1999
+
Nationality: Slovenian
+
Club: Dallas Mavericks
+
Height: 2.01 meters
+
Jersey number: 77
+
+ +
+
+
+
+
Ja Morant
+
+
Date of birth: August 10, 1999
+
Nationality: American
+
Club: Memphis Grizzlies
+
Height: 1.88 meters
+
Jersey number: 12
+
+ +
+
+
+
+
Giannis Antetokounmpo
+
+
Date of birth: December 6, 1994
+
Nationality: Greek-Nigerian
+
Club: Milwaukee Bucks
+
Height: 2.13 meters
+
Jersey number: 34
+
+ +
+
+
+
+
Deni Avdija
+
+
Date of birth: January 3, 2001
+
Nationality: Israeli-Serbian
+
Club: Washingtion Wizards
+
Height: 2.06 meters
+
Jersey number: 9
+
+ +
+
+
+
+ Luka Dončić +
+
+
+
+
+ Ja Morant +
+
+
+
+
+ Giannis Antetokounmpo +
+
+
+
+
+ Deni Avdija +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.scss b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.scss new file mode 100644 index 000000000..8004a1254 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit-exam-exercises/grid/nba.scss @@ -0,0 +1,211 @@ +:root{ + font-size: 16px; + + @media only screen and (min-width:1400px){ + font-size: 18px; + } + @media only screen and (min-width:1300px){ + font-size: 24px; + } +} + +body{ + margin: 0; +} + +.container{ + height: 100vh; + width: 100vw; + margin: 0; + color: white; + position: relative; + + .navBar{ + width: 100vw; + height: 5vh; + background-color: black; + font-weight: 900; + padding-left: 14vw; + padding-right: 14vw; + position: sticky; + top: 0rem; + z-index: 10; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + &__topics{ + width: 40vw; + display: flex; + justify-content: space-between; + align-items: center; + &__logo{ + height: 0.8rem; + background-image: url(https://cdn.nba.com/logos/leagues/logo-nba.svg); + background-size: contain; + background-repeat: no-repeat; + width: 1.5rem; + } + &__topic{ + width: auto; + font-size: 0.5rem; + text-align: center; + } + } + &__sales{ + width: 20vw; + display: flex; + justify-content: space-evenly; + align-items: center; + &__topic{ + width: auto; + font-size: 0.5rem; + text-align: center; + } + } + } + + .main{ + height: 18rem; + width: 36rem; + border: 0.2rem solid rgb(0, 0, 0); + border-radius: 0.5rem; + position: relative; + top: 5rem; + left: 10rem; + display: block; + line-height: 1.5rem; + &__article{ + height: 18rem; + width: 36rem; + position: relative; + top: 0rem; + background-size: 100%; + background-repeat: no-repeat; + display: block; + &__data{ + height: 11.5rem; + width: 11rem; + position: relative; + top: 1rem; + left: 2rem; + padding: 1rem; + animation: slide 10s linear 1; + display: flex; + flex-direction: column; + justify-content: space-between; + &__headline{ + width: 32rem; + font-weight: 900; + font-size: 2rem; + line-height: 2.5rem; + } + &__personal{ + font-weight: 300; + font-size: 0.7rem; + line-height: 1.5rem; + } + &__link{ + width: 10rem; + height: 2rem; + background-color: rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + font-size: 0.6rem; + padding: 0.5rem; + margin-top: 0.5rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(97, 97, 97); + &:hover{ + background-color: white; + box-shadow: none; + transition: 0.5s; + } + &:active{background-color: rgb(74, 10, 251);} + } + } + &--luka{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)70%), url(https://images2.minutemediacdn.com/image/upload/c_crop,w_4450,h_2503,x_0,y_0/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/images/ImagnImages/mmsport/83/01g36jr6g8a7eg799nfd.jpg); + animation: zoom 10s linear 1; + } + &--ja{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)77%), url(https://phantom-marca.unidadeditorial.es/efd58352dab3d164ff6026e8db04f427/resize/1320/f/jpg/assets/multimedia/imagenes/2022/04/27/16510298219309.jpg); + position: relative; + top: -18rem; + animation: + zoom 10.1s linear 10s 1, + appear 10.1s linear 10s 1; + visibility: hidden; + &__data{animation: slide 10.1s linear 10s 1;} + } + &--giannis{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)77%), url(https://s.yimg.com/ny/api/res/1.2/IOgkshHrdNg6IXEOF0VnEQ--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/os/creatr-uploaded-images/2022-11/35f8b8b0-6474-11ed-bf49-1f9adc2c172d); + position: relative; + top: -36rem; + animation: + zoom 10.1s linear 20s 1, + appear 10.1s linear 20s 1; + visibility: hidden; + &__data{animation: slide 10.1s linear 20s 1;} + } + &--deni{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)77%), url(https://www.nbcsports.com/sites/rsnunited/files/article/hero/Avdija_Deni_USATSI_18057589.jpg); + position: relative; + top: -54rem; + animation: + zoom 10.1s linear 30s 1, + appear 10.1s linear 30s 1; + visibility: hidden; + &__data{animation: slide 10.1s linear 30s infinite;} + } + } + &__playersBar{ + width: 34rem; + height: 3rem; + display: flex; + justify-content: space-around; + align-items: center; + position: relative; + bottom: 57.5rem; + left: 2rem; + &__player{ + width: auto; + height: auto; + padding: 0.5rem; + display: flex; + flex-direction: column; + &__lapseBar{ + width: 5rem; + height: 0.1rem; + background-color: gray; + border-radius: 0.1rem; + &__progress{ + height: 0.1rem; + width: 0%; + background-color: white; + border-radius: 0.1rem; + &--luka{animation: lapse 10.1s linear 0s 1;} + &--ja{animation: lapse 10.1s linear 10s 1;} + &--giannis{animation: lapse 10.1s linear 20s 1;} + &--deni{animation: lapse 10.1s linear 30s 1;} + } + } + } + } + } +} + + +@keyframes appear{100%{visibility: visible;}} + +@keyframes zoom{ + 90%{background-size: 110%;} + 100%{background-size: 111%;} +} + +@keyframes slide{ + 0%{left: 12rem;} + 3%{left: 2rem;} + 100%{left: 2rem;} +} + +@keyframes lapse{100%{width:100%}} diff --git a/01-HTML-CSS/07-BEM/HW/amit/discord.css b/01-HTML-CSS/07-BEM/HW/amit/discord.css new file mode 100644 index 000000000..b725c9fe7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit/discord.css @@ -0,0 +1,431 @@ +body { + margin: 0; + display: flex; + position: relative; + background-color: rgb(55, 53, 53); +} + +.serversColumn { + width: 7vw; + height: 100vh; + background-color: rgb(55, 53, 53); + border-radius: 0.5em; + font-size: 0.5em; + display: flex; + flex-direction: column; + justify-content: flex-start; + flex-wrap: wrap; + align-items: center; +} +.serversColumn__server { + border-radius: 8em; + width: 8em; + height: 8em; + margin-top: 1em; + background-size: cover; +} +.serversColumn__server:hover { + border-radius: 0.7em; +} +.serversColumn__server--server1 { + background-image: url("https://media.decovry.com/media/catalog/product/cache/l/i/9df78eab33525d08d6e5fb8d27136e95/lib03-001_3_medium_.png"); +} +.serversColumn__server--server2 { + background-image: url("https://s3.amazonaws.com/prod-media.gameinformer.com/styles/thumbnail/s3/legacy-images/Top%20Of%20The%20Table%20%E2%80%93%20Dixit/dixit610.jpg"); +} +.serversColumn__server--server3 { + background-image: url("https://2.bp.blogspot.com/-v3cMCOfIHz8/UDvwokuInAI/AAAAAAAAA8Y/AxE5VjGNbJc/s1600/dixit+cards.jpeg"); +} +.serversColumn__server--server4 { + background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdTeJIAkTfNQYZlCBidk3cd0V7EexQ_5G6jc2liA2_TCW5dSED0OlWMDr4wj8fLWgeeIM&usqp=CAU"); +} +.serversColumn__server--server5 { + background-image: url("https://i.pinimg.com/originals/f9/d0/90/f9d090447f94fe3c85635d0e87400077.jpg"); +} + +.mainMenu { + width: 20vw; + height: 100vh; + background-color: rgb(71, 71, 71); + color: rgb(184, 184, 184); + border-radius: 0.5em; + display: flex; + justify-content: space-between; + flex-direction: column; +} +.mainMenu__topMenu { + width: 14em; + height: 44em; + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; +} +.mainMenu__topMenu__findConversation { + width: 14em; + height: 2.5em; + border: none; + color: white; + background-color: rgb(57, 57, 57); + margin: 1em; +} +.mainMenu__topMenu__tabsMenu { + width: 13.3em; + height: 40em; + display: flex; + flex-direction: column; + align-items: center; +} +.mainMenu__topMenu__tabsMenu__tab { + background-color: rgb(71, 71, 71); + width: 14em; + height: 4em; + margin-top: 0.5em; + text-align: center; + color: white; + font-size: 0.8em; + font-weight: 700; + border: 0em solid rgb(0, 0, 0); + border-radius: 0.5em; + display: flex; + justify-content: space-around; + align-items: center; +} +.mainMenu__topMenu__tabsMenu__tab:hover { + background-color: rgb(84, 84, 84); +} +.mainMenu__topMenu__tabsMenu__tab--active { + background-color: rgb(80, 80, 80); + color: rgb(223, 223, 223); +} +.mainMenu__topMenu__directMessages { + width: 13.3em; + height: 20em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__header { + width: 13.3em; + height: 2em; + font-weight: 900; + color: rgb(184, 184, 184); + margin: 0.5em; + text-align: center; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__friends { + width: 13em; + height: 20em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__friends__friend { + background-color: rgb(71, 71, 71); + width: 8em; + height: 2em; + margin: 0.5em; + text-align: left; + line-height: 2em; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__friends__friend:hover { + background-color: rgb(109, 109, 109); + color: rgb(223, 223, 223); +} +.mainMenu__bottomMenu { + width: 14.3em; + height: 3em; + display: flex; + background-color: rgb(55, 54, 54); + flex-direction: row; + align-items: center; + justify-content: space-between; + border-radius: 0.5em; + margin: 0; +} +.mainMenu__bottomMenu__profile { + width: 7em; + height: 2em; + display: flex; + background-color: rgb(55, 54, 54); + flex-direction: row; + justify-content: center; + border-radius: 0.5em; + margin: 0; +} +.mainMenu__bottomMenu__profile__image { + width: 2em; + height: 2em; + background-image: url(https://www.moderncoinmart.com/media/catalog/product/cache/411235e682edf2440a722aacea7b69c1/2/0/2020-s2d-chibi-weasley-raw-obv.jpg); + background-size: cover; + border-radius: 2em; + margin: 0; +} +.mainMenu__bottomMenu__profile__data { + width: 4em; + height: 2em; + background-color: rgb(55, 54, 54); + border-radius: 0.5em; + margin: 0; + color: gray; +} +.mainMenu__bottomMenu__iconsWrapper { + width: 5.5em; + height: 2em; + display: flex; + background-color: rgb(55, 54, 54); + flex-direction: row; + justify-content: flex-start; +} +.mainMenu__bottomMenu__iconsWrapper__icon { + color: gray; + margin: 0.5em; +} + +.rightContainer { + width: 79vw; + height: 100vh; + background-color: rgb(80, 80, 80); + border-radius: 0.5em; + display: flex; + flex-direction: column; +} +.rightContainer__navBar { + width: 79vw; + height: 2.5em; + border-radius: 0.5em; + display: flex; + justify-content: space-between; +} +.rightContainer__navBar__activeTab { + width: 5em; + height: 1.5em; + border-radius: 0.5em; + color: white; + font-weight: 700; + font-size: 1.5em; + margin-left: 1em; + margin-top: 0.2em; +} +.rightContainer__navBar__iconsWrapper { + width: 6em; + height: 2.5em; + border-radius: 0.5em; + display: flex; + justify-content: flex-end; + align-items: center; +} +.rightContainer__navBar__iconsWrapper__icon { + color: rgb(174, 172, 172); + margin: 0.5em; +} +.rightContainer__main { + width: 76em; + height: 44em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.rightContainer__main__liveStages { + width: 60em; + height: 44em; + border-radius: 0.5em; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +.rightContainer__main__liveStages__header { + width: 15em; + height: 1.5em; + border-radius: 0.5em; + font-size: 1.5em; + font-weight: 900; + color: white; + margin-right: 13em; +} +.rightContainer__main__liveStages__liveStage { + width: 42em; + height: 11em; + background-color: rgb(71, 71, 71); + border-radius: 0.5em; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rightContainer__main__liveStages__liveStage__top { + width: 42em; + height: 3em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.rightContainer__main__liveStages__liveStage__top__server { + width: 12em; + height: 1.5em; + border-radius: 0.5em; + color: white; + font-weight: 700; + font-size: 1em; +} +.rightContainer__main__liveStages__liveStage__top__listenersCounter { + width: 3em; + height: 1em; + background-color: rgb(42, 41, 41); + border-radius: 0.5em; + margin: 0.5em; + color: white; + font-size: 0.7em; + padding: 0.7em; + text-align: center; + vertical-align: middle; +} +.rightContainer__main__liveStages__liveStage__title { + width: 21em; + height: 3em; + font-weight: 700; + font-size: 2em; + color: white; + border-radius: 0.5em; +} +.rightContainer__main__liveStages__liveStage__speakers { + width: 30em; + height: 8em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: 1em; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker { + width: 8em; + height: 2em; + font-weight: 700; + font-size: 1em; + color: white; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + margin: 0.3em; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image { + width: 2em; + height: 2em; + border-radius: 2em; + margin-right: 0.4em; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image1 { + background-image: url(https://iheartcraftythings.com/wp-content/uploads/2021/04/Harry-Potter-DRAWING-%E2%80%93-STEP-10.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image2 { + background-image: url(https://media.entertainmentearth.com/assets/images/1cf08c72d8e342a8b3ff4ff5a7d0e6bcxl.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image3 { + background-image: url(https://media.entertainmentearth.com/assets/images/7d25142cd2e54e5d812db1c4e10f6ec5xl.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image4 { + background-image: url(https://i.pinimg.com/originals/3b/51/d4/3b51d4a14122f723ef857b4a195c8b03.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image5 { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnVXnP0G7tOvgN3Iw7RZT_tdoh63gpnnYQiw&usqp=CAU); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image6 { + background-image: url(https://pop-figures.com/media/img/figurine/46-funko-pop-figure-the-hobbit-legolas-greenleaf.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image7 { + background-image: url(https://cashcow-cdn.azureedge.net/images/d5c3a970-9bab-42ec-b63f-f01a1938d2c8.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image8 { + background-image: url(data:image/jpeg;base64,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); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image9 { + background-image: url(https://assets.teenvogue.com/photos/5cc7017bd1b87b6cfcd4d405/1:1/pass/00-tout-maisie-williams.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image10 { + background-image: url(https://hips.hearstapps.com/hmg-prod/images/theory-1553634761.jpg?crop=0.501xw:1.00xh;0,0&resize=640:*); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image11 { + background-image: url(https://media.allure.com/photos/5ba532e30ac6c654eca1f789/4:3/w_1525,h_1143,c_limit/e31a1dd95b519c8063075bf3ebfc231d685e7cd34fb0985dfabe35ab063bdeb84011b71e4ae81ada3b2eb21920dc167c.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image12 { + background-image: url(https://www.telegraph.co.uk/content/dam/tv/2016/05/13/97849975-GOTEmilia_Clarke_as_Daenerys_Targaryen-TV_trans_NvBQzQNjv4BqajCpFXsei0OXjDFGPZkcdMJTIQHYfRIrbi-iMJIzu0Y.jpg?imwidth=480); + background-size: cover; +} +.rightContainer__main__activitiesLog { + width: 14em; + height: 44em; + border-left: 0.5em solid rgb(154, 152, 152); + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + color: white; + font-weight: 700; + gap: 1em; +} +.rightContainer__main__activitiesLog__header { + width: 9em; + height: 2em; + border-radius: 0.5em; + text-align: left; + font-size: 1.5em; + font-weight: 700; + margin-left: 1.5em; +} +.rightContainer__main__activitiesLog__activity { + width: 10em; + height: 10em; + background-color: rgb(71, 71, 71); + border-radius: 0.5em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + margin: 1.5em; +} +.rightContainer__main__activitiesLog__activity__participants { + width: 7em; + height: 2.5em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-around; + line-height: 2em; +} +.rightContainer__main__activitiesLog__activity__participants--image1 { + background-image: url(https://deadline.com/wp-content/uploads/2022/01/Peacemaker-John-Cena.jpg?w=1000); + background-size: cover; + width: 2em; + height: 2em; + border-radius: 2em; +} +.rightContainer__main__activitiesLog__activity__title { + width: 9em; + height: 2em; + border-radius: 0.5em; + text-align: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit/discord.css.map b/01-HTML-CSS/07-BEM/HW/amit/discord.css.map new file mode 100644 index 000000000..1e61291ee --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit/discord.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["discord.scss","discord.css"],"names":[],"mappings":"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","file":"discord.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit/discord.html b/01-HTML-CSS/07-BEM/HW/amit/discord.html new file mode 100644 index 000000000..093379f34 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit/discord.html @@ -0,0 +1,182 @@ + + + + + + + + + Discord + + +
+
+
+
+
+
+ +
+
+
+ +
+ + + +
+
+
Direct Messages
+
+
arados
+
zalts
+
urihan
+
+
+
+
+
+
+
amythz #2925
+
+
+ + + +
+
+
+ +
+
+
Home
+
+ + + +
+
+
+
+
Live Stages
+
+
+
Hogwarts
+
17
+
+
The prisoner of Azakaban
+
+
+
+ Harry Potter +
+
+
+ Hagrid +
+
+
+ Dumbledore +
+
+
+ Snape +
+
+
+
+
+
Lord of the Rings
+
500
+
+
The Two Towers
+
+
+
+ Gimli +
+
+
+ Legolas +
+
+
+ Gandalf +
+
+
+ Aragorn +
+
+
+
+
+
A Song of Ice and Fire
+
40
+
+
A Storm of Swords
+
+
+
+ Arya +
+
+
+ Tyrion +
+
+
+ Jon +
+
+
+ Dhaenarys +
+
+
+
+
+
Activities
+
+
+
+ Jon Cena +
+
You
+
+
+
+
+ Jon Cena +
+
Can't
+
+
+
+
+ Jon Cena +
+
See
+
+
+
+
+ Jon Cena +
+
Me
+
+
+
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit/discord.scss b/01-HTML-CSS/07-BEM/HW/amit/discord.scss new file mode 100644 index 000000000..68920bac6 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit/discord.scss @@ -0,0 +1,433 @@ +body{ +margin:0; +display: flex; +position: relative; +background-color: rgb(55, 53, 53); +} + + +.serversColumn{ + width: 7vw; + height: 100vh; + background-color: rgb(55, 53, 53); + border-radius: 0.5em; + font-size: 0.5em; + display: flex; + flex-direction: column; + justify-content: flex-start; + flex-wrap: wrap; + align-items: center; + + &__server{ + border-radius: 8em; + width: 8em; + height: 8em; + margin-top: 1em; + background-size: cover; + &:hover{ + border-radius: 0.7em; + } + &--server1{ + background-image: url('https://media.decovry.com/media/catalog/product/cache/l/i/9df78eab33525d08d6e5fb8d27136e95/lib03-001_3_medium_.png'); ; + } + &--server2{ + background-image: url('https://s3.amazonaws.com/prod-media.gameinformer.com/styles/thumbnail/s3/legacy-images/Top%20Of%20The%20Table%20%E2%80%93%20Dixit/dixit610.jpg'); ; + } + &--server3{ + background-image: url('https://2.bp.blogspot.com/-v3cMCOfIHz8/UDvwokuInAI/AAAAAAAAA8Y/AxE5VjGNbJc/s1600/dixit+cards.jpeg'); ; + } + &--server4{ + background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdTeJIAkTfNQYZlCBidk3cd0V7EexQ_5G6jc2liA2_TCW5dSED0OlWMDr4wj8fLWgeeIM&usqp=CAU');; + } + &--server5{ + background-image: url('https://i.pinimg.com/originals/f9/d0/90/f9d090447f94fe3c85635d0e87400077.jpg'); ; + } + } +} + +.mainMenu{ + width: 20vw; + height: 100vh; + background-color: rgb(71, 71, 71); + color: rgb(184, 184, 184); + border-radius: 0.5em; + display: flex; + justify-content: space-between; + flex-direction: column; + &__topMenu{ + width: 14em; + height: 44em; + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + &__findConversation{ + width: 14em; + height: 2.5em; + border: none; + color: white; + background-color: rgb(57, 57, 57); + margin: 1em; + } + &__tabsMenu{ + width: 13.3em; + height: 40em; + display: flex; + flex-direction: column; + align-items: center; + &__tab{ + background-color: rgb(71, 71, 71); + width: 14em; + height: 4em; + margin-top: 0.5em; + text-align: center; + color: white; + font-size: 0.8em; + font-weight: 700; + border: 0em solid rgb(0, 0, 0); + border-radius: 0.5em; + display: flex; + justify-content: space-around; + align-items: center; + &:hover{ + background-color: rgb(84, 84, 84); + } + &--active{ + background-color: rgb(80, 80, 80); + color: rgb(223, 223, 223); + } + } + } + &__directMessages{ + width: 13.3em; + height: 20em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + border-radius: 0.5em; + &__header{ + width: 13.3em; + height: 2em; + font-weight: 900; + color: rgb(184, 184, 184); + margin: 0.5em; + text-align: center; + border-radius: 0.5em; + } + &__friends{ + width: 13em; + height: 20em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + border-radius: 0.5em; + &__friend{ + background-color: rgb(71, 71, 71); + width: 8em; + height: 2em; + margin: 0.5em; + text-align: left; + line-height: 2em; + border-radius: 0.5em; + &:hover{ + background-color: rgb(109, 109, 109); + color: rgb(223, 223, 223); + } + } + } + } + } + &__bottomMenu{ + width: 14.3em; + height: 3em; + display: flex; + background-color: rgb(55, 54, 54); + flex-direction: row; + align-items: center; + justify-content: space-between; + border-radius: 0.5em; + margin: 0; + &__profile{ + width: 7em; + height: 2em; + display: flex; + background-color: rgb(55, 54, 54); + flex-direction: row; + justify-content: center; + border-radius: 0.5em; + margin: 0; + &__image{ + width: 2em; + height: 2em; + background-image: url(https://www.moderncoinmart.com/media/catalog/product/cache/411235e682edf2440a722aacea7b69c1/2/0/2020-s2d-chibi-weasley-raw-obv.jpg); + background-size: cover; + border-radius: 2em; + margin: 0; + } + &__data{ + width: 4em; + height: 2em; + background-color: rgb(55, 54, 54); + border-radius: 0.5em; + margin: 0; + color: gray; + } + } + &__iconsWrapper{ + width: 5.5em; + height: 2em; + display: flex; + background-color: rgb(55, 54, 54); + flex-direction: row; + justify-content: flex-start; + &__icon{ + color: gray; + margin:0.5em; + } + } + } +} + +.rightContainer{ + width: 79vw; + height: 100vh; + background-color: rgb(80, 80, 80); + border-radius: 0.5em; + display: flex; + flex-direction: column; + &__navBar{ + width: 79vw; + height: 2.5em; + border-radius: 0.5em; + display: flex; + justify-content: space-between; + &__activeTab{ + width: 5em; + height: 1.5em; + border-radius: 0.5em; + color: white; + font-weight: 700; + font-size: 1.5em; + margin-left: 1em; + margin-top: 0.2em; + } + &__iconsWrapper{ + width: 6em; + height: 2.5em; + border-radius: 0.5em; + display: flex; + justify-content: flex-end; + align-items: center; + &__icon{ + color: rgb(174, 172, 172); + margin: 0.5em; + } + } + } + &__main{ + width: 76em; + height: 44em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + &__liveStages{ + width: 60em; + height: 44em; + border-radius: 0.5em; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + &__header{ + width: 15em; + height: 1.5em; + border-radius: 0.5em; + font-size: 1.5em; + font-weight: 900; + color: white; + margin-right: 13em; + } + &__liveStage{ + width: 42em; + height: 11em; + background-color: rgb(71, 71, 71); + border-radius: 0.5em; + display: flex; + flex-direction: column; + justify-content: space-between; + &__top{ + width: 42em; + height: 3em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + &__server{ + width: 12em; + height: 1.5em; + border-radius: 0.5em; + color: white; + font-weight: 700; + font-size: 1em; + } + &__listenersCounter{ + width: 3em; + height: 1em; + background-color: rgb(42, 41, 41); + border-radius: 0.5em; + margin: 0.5em; + color: white; + font-size: 0.7em; + padding: 0.7em; + text-align: center; + vertical-align: middle; + } + } + &__title{ + width:21em; + height:3em; + font-weight: 700; + font-size: 2em; + color: white; + border-radius: 0.5em; + } + &__speakers{ + width: 30em; + height: 8em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin:1em; + &__speaker{ + width: 8em; + height: 2em; + font-weight: 700; + font-size: 1em; + color: white; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + margin:0.3em; + &__image{ + width: 2em; + height: 2em; + border-radius: 2em; + margin-right:0.4em; + &--image1{ + background-image: url(https://iheartcraftythings.com/wp-content/uploads/2021/04/Harry-Potter-DRAWING-%E2%80%93-STEP-10.jpg); + background-size: cover; + } + &--image2{ + background-image: url(https://media.entertainmentearth.com/assets/images/1cf08c72d8e342a8b3ff4ff5a7d0e6bcxl.jpg); + background-size: cover; + } + &--image3{ + background-image: url(https://media.entertainmentearth.com/assets/images/7d25142cd2e54e5d812db1c4e10f6ec5xl.jpg); + background-size: cover; + } + &--image4{ + background-image: url(https://i.pinimg.com/originals/3b/51/d4/3b51d4a14122f723ef857b4a195c8b03.jpg); + background-size: cover; + } + &--image5{ + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnVXnP0G7tOvgN3Iw7RZT_tdoh63gpnnYQiw&usqp=CAU); + background-size: cover; + } + &--image6{ + background-image: url(https://pop-figures.com/media/img/figurine/46-funko-pop-figure-the-hobbit-legolas-greenleaf.jpg); + background-size: cover; + } + &--image7{ + background-image: url(https://cashcow-cdn.azureedge.net/images/d5c3a970-9bab-42ec-b63f-f01a1938d2c8.jpg); + background-size: cover; + } + &--image8{ + background-image: url(data:image/jpeg;base64,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); + background-size: cover; + } + &--image9{ + background-image: url(https://assets.teenvogue.com/photos/5cc7017bd1b87b6cfcd4d405/1:1/pass/00-tout-maisie-williams.jpg); + background-size: cover; + } + &--image10{ + background-image: url(https://hips.hearstapps.com/hmg-prod/images/theory-1553634761.jpg?crop=0.501xw:1.00xh;0,0&resize=640:*); + background-size: cover; + } + &--image11{ + background-image: url(https://media.allure.com/photos/5ba532e30ac6c654eca1f789/4:3/w_1525,h_1143,c_limit/e31a1dd95b519c8063075bf3ebfc231d685e7cd34fb0985dfabe35ab063bdeb84011b71e4ae81ada3b2eb21920dc167c.jpg); + background-size: cover; + } + &--image12{ + background-image: url(https://www.telegraph.co.uk/content/dam/tv/2016/05/13/97849975-GOTEmilia_Clarke_as_Daenerys_Targaryen-TV_trans_NvBQzQNjv4BqajCpFXsei0OXjDFGPZkcdMJTIQHYfRIrbi-iMJIzu0Y.jpg?imwidth=480); + background-size: cover; + } + } + } + } + } + } + &__activitiesLog{ + width: 14em; + height: 44em; + border-left: 0.5em solid rgb(154, 152, 152); + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + color:white; + font-weight: 700; + gap: 1em; + &__header{ + width: 9em; + height: 2em; + border-radius: 0.5em; + text-align: left; + font-size: 1.5em; + font-weight: 700; + margin-left: 1.5em; + } + &__activity{ + width: 10em; + height: 10em; + background-color: rgb(71, 71, 71); + border-radius: 0.5em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + margin: 1.5em; + &__participants{ + width: 7em; + height: 2.5em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-around; + line-height: 2em; + &--image1{ + background-image: url(https://deadline.com/wp-content/uploads/2022/01/Peacemaker-John-Cena.jpg?w=1000); + background-size: cover; + width: 2em; + height: 2em; + border-radius: 2em; + } + } + &__title{ + width: 9em; + height: 2em; + border-radius: 0.5em; + text-align: center; + } + } + } + } +} diff --git a/01-HTML-CSS/07-BEM/HW/amit/dist/discord.css b/01-HTML-CSS/07-BEM/HW/amit/dist/discord.css new file mode 100644 index 000000000..ecacd748e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit/dist/discord.css @@ -0,0 +1,431 @@ +body { + margin: 0; + display: flex; + position: relative; + background-color: #373535; +} + +.serversColumn { + width: 7vw; + height: 100vh; + background-color: #373535; + border-radius: 0.5em; + font-size: 0.5em; + display: flex; + flex-direction: column; + justify-content: flex-start; + flex-wrap: wrap; + align-items: center; +} +.serversColumn__server { + border-radius: 8em; + width: 8em; + height: 8em; + margin-top: 1em; + background-size: cover; +} +.serversColumn__server:hover { + border-radius: 0.7em; +} +.serversColumn__server--server1 { + background-image: url("https://media.decovry.com/media/catalog/product/cache/l/i/9df78eab33525d08d6e5fb8d27136e95/lib03-001_3_medium_.png"); +} +.serversColumn__server--server2 { + background-image: url("https://s3.amazonaws.com/prod-media.gameinformer.com/styles/thumbnail/s3/legacy-images/Top%20Of%20The%20Table%20%E2%80%93%20Dixit/dixit610.jpg"); +} +.serversColumn__server--server3 { + background-image: url("https://2.bp.blogspot.com/-v3cMCOfIHz8/UDvwokuInAI/AAAAAAAAA8Y/AxE5VjGNbJc/s1600/dixit+cards.jpeg"); +} +.serversColumn__server--server4 { + background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdTeJIAkTfNQYZlCBidk3cd0V7EexQ_5G6jc2liA2_TCW5dSED0OlWMDr4wj8fLWgeeIM&usqp=CAU"); +} +.serversColumn__server--server5 { + background-image: url("https://i.pinimg.com/originals/f9/d0/90/f9d090447f94fe3c85635d0e87400077.jpg"); +} + +.mainMenu { + width: 20vw; + height: 100vh; + background-color: #474747; + color: #b8b8b8; + border-radius: 0.5em; + display: flex; + justify-content: space-between; + flex-direction: column; +} +.mainMenu__topMenu { + width: 14em; + height: 44em; + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; +} +.mainMenu__topMenu__findConversation { + width: 14em; + height: 2.5em; + border: none; + color: white; + background-color: #393939; + margin: 1em; +} +.mainMenu__topMenu__tabsMenu { + width: 13.3em; + height: 40em; + display: flex; + flex-direction: column; + align-items: center; +} +.mainMenu__topMenu__tabsMenu__tab { + background-color: #474747; + width: 14em; + height: 4em; + margin-top: 0.5em; + text-align: center; + color: white; + font-size: 0.8em; + font-weight: 700; + border: 0em solid black; + border-radius: 0.5em; + display: flex; + justify-content: space-around; + align-items: center; +} +.mainMenu__topMenu__tabsMenu__tab:hover { + background-color: #545454; +} +.mainMenu__topMenu__tabsMenu__tab--active { + background-color: #505050; + color: #dfdfdf; +} +.mainMenu__topMenu__directMessages { + width: 13.3em; + height: 20em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__header { + width: 13.3em; + height: 2em; + font-weight: 900; + color: #b8b8b8; + margin: 0.5em; + text-align: center; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__friends { + width: 13em; + height: 20em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__friends__friend { + background-color: #474747; + width: 8em; + height: 2em; + margin: 0.5em; + text-align: left; + line-height: 2em; + border-radius: 0.5em; +} +.mainMenu__topMenu__directMessages__friends__friend:hover { + background-color: #6d6d6d; + color: #dfdfdf; +} +.mainMenu__bottomMenu { + width: 14.3em; + height: 3em; + display: flex; + background-color: #373636; + flex-direction: row; + align-items: center; + justify-content: space-between; + border-radius: 0.5em; + margin: 0; +} +.mainMenu__bottomMenu__profile { + width: 7em; + height: 2em; + display: flex; + background-color: #373636; + flex-direction: row; + justify-content: center; + border-radius: 0.5em; + margin: 0; +} +.mainMenu__bottomMenu__profile__image { + width: 2em; + height: 2em; + background-image: url(https://www.moderncoinmart.com/media/catalog/product/cache/411235e682edf2440a722aacea7b69c1/2/0/2020-s2d-chibi-weasley-raw-obv.jpg); + background-size: cover; + border-radius: 2em; + margin: 0; +} +.mainMenu__bottomMenu__profile__data { + width: 4em; + height: 2em; + background-color: #373636; + border-radius: 0.5em; + margin: 0; + color: gray; +} +.mainMenu__bottomMenu__iconsWrapper { + width: 5.5em; + height: 2em; + display: flex; + background-color: #373636; + flex-direction: row; + justify-content: flex-start; +} +.mainMenu__bottomMenu__iconsWrapper__icon { + color: gray; + margin: 0.5em; +} + +.rightContainer { + width: 79vw; + height: 100vh; + background-color: #505050; + border-radius: 0.5em; + display: flex; + flex-direction: column; +} +.rightContainer__navBar { + width: 79vw; + height: 2.5em; + border-radius: 0.5em; + display: flex; + justify-content: space-between; +} +.rightContainer__navBar__activeTab { + width: 5em; + height: 1.5em; + border-radius: 0.5em; + color: white; + font-weight: 700; + font-size: 1.5em; + margin-left: 1em; + margin-top: 0.2em; +} +.rightContainer__navBar__iconsWrapper { + width: 6em; + height: 2.5em; + border-radius: 0.5em; + display: flex; + justify-content: flex-end; + align-items: center; +} +.rightContainer__navBar__iconsWrapper__icon { + color: #aeacac; + margin: 0.5em; +} +.rightContainer__main { + width: 76em; + height: 44em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.rightContainer__main__liveStages { + width: 60em; + height: 44em; + border-radius: 0.5em; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +.rightContainer__main__liveStages__header { + width: 15em; + height: 1.5em; + border-radius: 0.5em; + font-size: 1.5em; + font-weight: 900; + color: white; + margin-right: 13em; +} +.rightContainer__main__liveStages__liveStage { + width: 42em; + height: 11em; + background-color: #474747; + border-radius: 0.5em; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.rightContainer__main__liveStages__liveStage__top { + width: 42em; + height: 3em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.rightContainer__main__liveStages__liveStage__top__server { + width: 12em; + height: 1.5em; + border-radius: 0.5em; + color: white; + font-weight: 700; + font-size: 1em; +} +.rightContainer__main__liveStages__liveStage__top__listenersCounter { + width: 3em; + height: 1em; + background-color: #2a2929; + border-radius: 0.5em; + margin: 0.5em; + color: white; + font-size: 0.7em; + padding: 0.7em; + text-align: center; + vertical-align: middle; +} +.rightContainer__main__liveStages__liveStage__title { + width: 21em; + height: 3em; + font-weight: 700; + font-size: 2em; + color: white; + border-radius: 0.5em; +} +.rightContainer__main__liveStages__liveStage__speakers { + width: 30em; + height: 8em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: 1em; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker { + width: 8em; + height: 2em; + font-weight: 700; + font-size: 1em; + color: white; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + margin: 0.3em; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image { + width: 2em; + height: 2em; + border-radius: 2em; + margin-right: 0.4em; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image1 { + background-image: url(https://iheartcraftythings.com/wp-content/uploads/2021/04/Harry-Potter-DRAWING-%E2%80%93-STEP-10.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image2 { + background-image: url(https://media.entertainmentearth.com/assets/images/1cf08c72d8e342a8b3ff4ff5a7d0e6bcxl.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image3 { + background-image: url(https://media.entertainmentearth.com/assets/images/7d25142cd2e54e5d812db1c4e10f6ec5xl.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image4 { + background-image: url(https://i.pinimg.com/originals/3b/51/d4/3b51d4a14122f723ef857b4a195c8b03.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image5 { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnVXnP0G7tOvgN3Iw7RZT_tdoh63gpnnYQiw&usqp=CAU); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image6 { + background-image: url(https://pop-figures.com/media/img/figurine/46-funko-pop-figure-the-hobbit-legolas-greenleaf.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image7 { + background-image: url(https://cashcow-cdn.azureedge.net/images/d5c3a970-9bab-42ec-b63f-f01a1938d2c8.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image8 { + background-image: url(data:image/jpeg;base64,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); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image9 { + background-image: url(https://assets.teenvogue.com/photos/5cc7017bd1b87b6cfcd4d405/1:1/pass/00-tout-maisie-williams.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image10 { + background-image: url(https://hips.hearstapps.com/hmg-prod/images/theory-1553634761.jpg?crop=0.501xw:1.00xh;0,0&resize=640:*); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image11 { + background-image: url(https://media.allure.com/photos/5ba532e30ac6c654eca1f789/4:3/w_1525,h_1143,c_limit/e31a1dd95b519c8063075bf3ebfc231d685e7cd34fb0985dfabe35ab063bdeb84011b71e4ae81ada3b2eb21920dc167c.jpg); + background-size: cover; +} +.rightContainer__main__liveStages__liveStage__speakers__speaker__image--image12 { + background-image: url(https://www.telegraph.co.uk/content/dam/tv/2016/05/13/97849975-GOTEmilia_Clarke_as_Daenerys_Targaryen-TV_trans_NvBQzQNjv4BqajCpFXsei0OXjDFGPZkcdMJTIQHYfRIrbi-iMJIzu0Y.jpg?imwidth=480); + background-size: cover; +} +.rightContainer__main__activitiesLog { + width: 14em; + height: 44em; + border-left: 0.5em solid #9a9898; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + color: white; + font-weight: 700; + gap: 1em; +} +.rightContainer__main__activitiesLog__header { + width: 9em; + height: 2em; + border-radius: 0.5em; + text-align: left; + font-size: 1.5em; + font-weight: 700; + margin-left: 1.5em; +} +.rightContainer__main__activitiesLog__activity { + width: 10em; + height: 10em; + background-color: #474747; + border-radius: 0.5em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + margin: 1.5em; +} +.rightContainer__main__activitiesLog__activity__participants { + width: 7em; + height: 2.5em; + border-radius: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-around; + line-height: 2em; +} +.rightContainer__main__activitiesLog__activity__participants--image1 { + background-image: url(https://deadline.com/wp-content/uploads/2022/01/Peacemaker-John-Cena.jpg?w=1000); + background-size: cover; + width: 2em; + height: 2em; + border-radius: 2em; +} +.rightContainer__main__activitiesLog__activity__title { + width: 9em; + height: 2em; + border-radius: 0.5em; + text-align: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/amit/ui-design.md b/01-HTML-CSS/07-BEM/HW/amit/ui-design.md new file mode 100644 index 000000000..aefde47ea --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/amit/ui-design.md @@ -0,0 +1 @@ +https://app.diagrams.net/#G13d1PTzwDDpCrdjwmYEHe_QRVdp7WlFb9 \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/aviva-elias/Whatsapp.html b/01-HTML-CSS/07-BEM/HW/aviva-elias/Whatsapp.html new file mode 100644 index 000000000..8b24026bd --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/aviva-elias/Whatsapp.html @@ -0,0 +1,265 @@ + + + + + + + BEM + + + + + +
+
+
+

12.33

+
+ + signal_wifi_4_bar + + battery_full + + signal_cellular_4_bar + + +
+
+
+

WhatsUpp

+
+ + search + + more_vert + +
+
+
+
+ photo_camera +
+
CHATS
+
STATUS
+
CALLS
+ +
+ +
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.2 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+ +
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+
+
+
+
+
+
+
+
Username 01
+
+ subdirectory_arrow_left + Yesterday 3.20 pm
+ +
+
+ +
+ + + +
+
+
+

12.33

+
+ + signal_wifi_4_bar + + battery_full + + signal_cellular_4_bar + + +
+
+
+
+ + arrow_back + + account_circle +

User 01

+ + +
+
+ + videocam + + call + + more_vert + +
+
+ +
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit..

+
+
+ + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing..

+
+
+ + + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing..

+
+
+ + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ + + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et?..

+
+
+ + + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing..

+
+
+ + +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+ + +
+
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

+
+
+ +
+ +
+
+ + sentiment_satisfied +
type a message
+ +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/aviva-elias/dist/style.css b/01-HTML-CSS/07-BEM/HW/aviva-elias/dist/style.css new file mode 100644 index 000000000..544fef0b7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/aviva-elias/dist/style.css @@ -0,0 +1,263 @@ +body { + margin: 0; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.watsapp-screen { + width: 500px; + height: 790px; + background-color: white; + margin: 20px auto; + border: 3px solid gainsboro; + display: flex; + flex-direction: column; + position: relative; + border-radius: 25px; +} +.watsapp-screen__indicator-bar { + width: 100%; + height: 25px; + background-color: #034603; + display: flex; + flex-direction: row; + gap: 400px; + top: 0px; + border-radius: 25px 25px 0px 0px; + position: relative; + margin-right: 5px; +} +.watsapp-screen__indicator-bar p { + font-size: 11px; + color: white; + left: 5px; + bottom: 5px; +} +.watsapp-screen__indicator-bar span { + color: white; + font-size: 20px; +} +.watsapp-screen__search-input { + width: 100%; + height: 50px; + background-color: #035503; + display: flex; + flex-direction: row; + gap: 360px; + position: relative; +} +.watsapp-screen__search-input h3 { + color: white; + margin-top: 15px; + font-family: "Times New Roman", Times, serif; + font-size: large; + opacity: 0.9; +} +.watsapp-screen__search-input span { + color: white; + opacity: 0.61; +} +.watsapp-screen__search-input__icon { + top: 15px; + position: relative; +} +.watsapp-screen__chats-bar { + width: 100%; + height: 50px; + background-color: #035503; + display: flex; + flex-direction: row; + justify-content: space-around; + position: relative; +} +.watsapp-screen__chats-bar H5 { + color: white; + opacity: 0.61; +} +.watsapp-screen__chats-bar__camera { + top: 15px; + position: relative; +} +.watsapp-screen__chats-bar span { + color: white; + opacity: 0.61; +} +.watsapp-screen__contact-chats { + width: 100%; + height: 75px; + display: flex; + position: relative; + flex-direction: column; +} +.watsapp-screen__contact-chats span { + font-size: 15px; + color: green; + position: relative; + right: 5px; + font-weight: bolder; +} +.watsapp-screen__contact-chats__contact { + width: 45%; + height: 100%; + position: relative; + display: flex; + gap: 10px; + margin-top: 0px; +} +.watsapp-screen__contact-chats__contact__circle { + width: 50px; + height: 50px; + border-radius: 100%; + background-color: #80df80; + left: 10px; + top: 10px; + position: relative; +} +.watsapp-screen__contact-chats__contact__usrename { + width: 66%; + height: 70%; + display: flex; + flex-direction: column; + position: relative; +} +.watsapp-screen__contact-chats__contact__usrename--redarrow span { + color: red; +} +.watsapp-screen__contact-chats__contact__usrename h5 { + display: inline; + margin-top: 15px; + margin-left: 10px; + margin-bottom: 10px; +} +.watsapp-screen__contact-chats__contact__usrename h6 { + display: inline; + margin-top: 0px; + margin-left: 10px; + opacity: 0.6; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.watsapp-screen { + width: 500px; + height: 790px; + background-color: wheat; + margin: 20px auto; + border: 3px solid gainsboro; + display: flex; + flex-direction: column; + position: relative; + border-radius: 25px; +} +.watsapp-screen__indicator-bar { + width: 100%; + height: 25px; + background-color: #034603; + display: flex; + flex-direction: row; + gap: 400px; + top: 0px; + border-radius: 25px 25px 0px 0px; + position: relative; + margin-right: 5px; +} +.watsapp-screen__indicator-bar p { + font-size: 11px; + color: white; + margin-left: 5px; + bottom: 5px; + opacity: 0.61; +} +.watsapp-screen__indicator-bar span { + color: white; + font-size: 20px; + opacity: 0.9; +} +.watsapp-screen__user-bar { + width: 100%; + height: 50px; + background-color: #034603; + display: flex; + flex-direction: row; + position: relative; +} +.watsapp-screen__user-bar span { + color: white; + opacity: 0.61; + margin-top: 15px; + position: relative; +} +.watsapp-screen__user-bar__user { + width: 50%; + height: 100%; + position: relative; + display: flex; + flex-direction: row; + gap: 3px; +} +.watsapp-screen__user-bar__user h4 { + color: white; + opacity: 0.61; +} +.watsapp-screen__user-bar__icon { + width: 50%; + height: 100%; + position: relative; + display: flex; + flex-direction: row; + justify-content: end; + gap: 15px; +} +.watsapp-screen__user-chats { + width: 100%; + height: 675px; + display: flex; + flex-direction: column; + margin-top: 10px; + position: relative; +} +.watsapp-screen__user-chats__chats { + width: 230px; + height: 75px; + margin-left: 5px; + position: relative; + display: flex; +} +.watsapp-screen__user-chats__chats--right { + position: relative; + left: 245px; +} +.watsapp-screen__user-chats__chats__p-box { + width: fit-content; + height: fit-content; + background-color: white; + border-radius: 15px; + border: 1px solid gainsboro; +} +.watsapp-screen__user-chats__chats__p-box--color { + background-color: #a7bb90; +} +.watsapp-screen__message { + width: 80%; + height: 50px; + background-color: white; + border-radius: 20px; + margin-bottom: 10px; + margin-left: 15px; +} +.watsapp-screen__message__icons { + height: 100%; + width: 50%; + display: flex; + flex-direction: row; + opacity: 0.61; + gap: 10px; +} +.watsapp-screen__message__icons span { + margin-top: 15px; + opacity: 0.81; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/aviva-elias/style.css b/01-HTML-CSS/07-BEM/HW/aviva-elias/style.css new file mode 100644 index 000000000..51ff73114 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/aviva-elias/style.css @@ -0,0 +1,266 @@ +body { + margin: 0; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.watsapp-screen { + width: 500px; + height: 790px; + background-color: white; + margin: 20px auto; + border: 3px solid gainsboro; + display: flex; + flex-direction: column; + position: relative; + border-radius: 25px; +} +.watsapp-screen__indicator-bar { + width: 100%; + height: 25px; + background-color: rgb(3, 70, 3); + display: flex; + flex-direction: row; + gap: 400px; + top: 0px; + border-radius: 25px 25px 0px 0px; + position: relative; + margin-right: 5px; +} +.watsapp-screen__indicator-bar p { + font-size: 11px; + color: white; + left: 5px; + bottom: 5px; +} +.watsapp-screen__indicator-bar span { + color: white; + font-size: 20px; +} +.watsapp-screen__search-input { + width: 100%; + height: 50px; + background-color: rgb(3, 85, 3); + display: flex; + flex-direction: row; + gap: 360px; + position: relative; +} +.watsapp-screen__search-input h3 { + color: white; + margin-top: 15px; + font-family: "Times New Roman", Times, serif; + font-size: large; + opacity: 0.9; +} +.watsapp-screen__search-input span { + color: white; + opacity: 0.61; +} +.watsapp-screen__search-input__icon { + top: 15px; + position: relative; +} +.watsapp-screen__chats-bar { + width: 100%; + height: 50px; + background-color: rgb(3, 85, 3); + display: flex; + flex-direction: row; + justify-content: space-around; + position: relative; +} +.watsapp-screen__chats-bar H5 { + color: white; + opacity: 0.61; +} +.watsapp-screen__chats-bar__camera { + top: 15px; + position: relative; +} +.watsapp-screen__chats-bar span { + color: white; + opacity: 0.61; +} +.watsapp-screen__contact-chats { + width: 100%; + height: 75px; + display: flex; + position: relative; + flex-direction: column; +} +.watsapp-screen__contact-chats span { + font-size: 15px; + color: green; + position: relative; + right: 5px; + font-weight: bolder; +} +.watsapp-screen__contact-chats__contact { + width: 45%; + height: 100%; + position: relative; + display: flex; + gap: 10px; + margin-top: 0px; +} +.watsapp-screen__contact-chats__contact__circle { + width: 50px; + height: 50px; + border-radius: 100%; + background-color: rgb(128, 223, 128); + left: 10px; + top: 10px; + position: relative; +} +.watsapp-screen__contact-chats__contact__usrename { + width: 66%; + height: 70%; + display: flex; + flex-direction: column; + position: relative; +} +.watsapp-screen__contact-chats__contact__usrename--redarrow span { + color: red; +} +.watsapp-screen__contact-chats__contact__usrename h5 { + display: inline; + margin-top: 15px; + margin-left: 10px; + margin-bottom: 10px; +} +.watsapp-screen__contact-chats__contact__usrename h6 { + display: inline; + margin-top: 0px; + margin-left: 10px; + opacity: 0.6; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.watsapp-screen { + width: 500px; + height: 790px; + background-color: wheat; + margin: 20px auto; + border: 3px solid gainsboro; + display: flex; + flex-direction: column; + position: relative; + border-radius: 25px; +} +.watsapp-screen__indicator-bar { + width: 100%; + height: 25px; + background-color: rgb(3, 70, 3); + display: flex; + flex-direction: row; + gap: 400px; + top: 0px; + border-radius: 25px 25px 0px 0px; + position: relative; + margin-right: 5px; +} +.watsapp-screen__indicator-bar p { + font-size: 11px; + color: white; + margin-left: 5px; + bottom: 5px; + opacity: 0.61; +} +.watsapp-screen__indicator-bar span { + color: white; + font-size: 20px; + opacity: 0.9; +} +.watsapp-screen__user-bar { + width: 100%; + height: 50px; + background-color: rgb(3, 70, 3); + display: flex; + flex-direction: row; + position: relative; +} +.watsapp-screen__user-bar span { + color: white; + opacity: 0.61; + margin-top: 15px; + position: relative; +} +.watsapp-screen__user-bar__user { + width: 50%; + height: 100%; + position: relative; + display: flex; + flex-direction: row; + gap: 3px; +} +.watsapp-screen__user-bar__user h4 { + color: white; + opacity: 0.61; +} +.watsapp-screen__user-bar__icon { + width: 50%; + height: 100%; + position: relative; + display: flex; + flex-direction: row; + justify-content: end; + gap: 15px; +} +.watsapp-screen__user-chats { + width: 100%; + height: 675px; + display: flex; + flex-direction: column; + margin-top: 10px; + position: relative; +} +.watsapp-screen__user-chats__chats { + width: 230px; + margin-left: 5px; + position: relative; + display: flex; +} +.watsapp-screen__user-chats__chats--right { + position: relative; + left: 500px; +} +.watsapp-screen__user-chats__chats__p-box { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + background-color: white; + border-radius: 15px; + border: 1px solid gainsboro; +} +.watsapp-screen__user-chats__chats__p-box--color { + background-color: rgb(167, 187, 144); +} +.watsapp-screen__message { + width: 80%; + height: 50px; + background-color: white; + border-radius: 20px; + margin-bottom: 10px; + margin-left: 15px; +} +.watsapp-screen__message__icons { + height: 100%; + width: 50%; + display: flex; + flex-direction: row; + opacity: 0.61; + gap: 10px; +} +.watsapp-screen__message__icons span { + margin-top: 15px; + opacity: 0.81; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/aviva-elias/style.css.map b/01-HTML-CSS/07-BEM/HW/aviva-elias/style.css.map new file mode 100644 index 000000000..3213dfd43 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/aviva-elias/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/aviva-elias/style.scss b/01-HTML-CSS/07-BEM/HW/aviva-elias/style.scss new file mode 100644 index 000000000..008d00910 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/aviva-elias/style.scss @@ -0,0 +1,317 @@ +body{ + margin: 0; +} + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} + + + + +.watsapp-screen{ + width: 500px; + height: 790px; + background-color:white; + margin: 20px auto; + border: 3px solid gainsboro; + display: flex; + flex-direction: column; + + position: relative; + border-radius: 25px; + + &__indicator-bar{ + width: 100%; + height: 25px; + background-color: rgb(3, 70, 3); + display: flex; + flex-direction: row; + gap: 400px; + top: 0px; + border-radius: 25px 25px 0px 0px; + position: relative; + margin-right: 5px; + p{ + font-size: 11px; + color: white; + left: 5px; + bottom: 5px; + + } + span{ + color: white; + font-size: 20px; + }} + + &__search-input{ + width: 100%; + height: 50px; + background-color: rgb(3, 85, 3); + display: flex; + flex-direction: row; + gap: 360px; + position: relative; + + h3{ + color: white; + margin-top: 15px; + font-family: 'Times New Roman', Times, serif; + font-size:large; + opacity: 0.9; + } + span{ + color: white; + opacity: 0.61; + } + + &__icon{ + top: 15px; + position: relative; + } + } + &__chats-bar{ + width: 100%; + height: 50px; + background-color: rgb(3, 85, 3,1); + display: flex; + flex-direction: row; + justify-content: space-around; + position: relative; +H5{ + color: white; + + opacity: 0.61; +} +&__camera{top: 15px; + position: relative; + +} +span{ color: white; + opacity: 0.61; +} + + } + + + + &__contact-chats{ + width: 100%; + height: 75px; + display: flex; + position: relative; + flex-direction:column; + + + span{ + font-size: 15px; + color: green; + position: relative; + right: 5px; + font-weight:bolder; + } + + +&__contact{ + width: 45%; + height: 100%; + position: relative; + display: flex; +gap: 10px; +margin-top: 0px; + + +&__circle{ + width: 50px; + height: 50px; + border-radius: 100%; + background-color: rgb(128, 223, 128); + left: 10px; + top: 10px; + position: relative; +} + &__usrename{ + width: 66%; + height: 70%; + display: flex; + flex-direction: column; + position: relative; + &--redarrow{ + span{ + color: red;} + } + + + h5{ +display: inline; +margin-top: 15px; +margin-left: 10px; +margin-bottom: 10px; + + } + h6{ + display: inline; + margin-top: 0px; + margin-left: 10px; + opacity: 0.6; + + } + +} + +} + +} + + + +} +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 + } + .watsapp-screen{ + width: 500px; + height: 790px; + background-color:wheat; + margin: 20px auto; + border: 3px solid gainsboro; + display: flex; + flex-direction: column; + + position: relative; + border-radius: 25px; + + &__indicator-bar{ + width: 100%; + height: 25px; + background-color: rgb(3, 70, 3); + display: flex; + flex-direction: row; + gap: 400px; + top: 0px; + border-radius: 25px 25px 0px 0px; + position: relative; + margin-right: 5px; + p{ + font-size: 11px; + color: white; + margin-left: 5px; + bottom: 5px; + opacity: 0.61; + + } + span{ + color: white; + font-size: 20px; + opacity: 0.9; + }} + + &__user-bar{ + width: 100%; + height: 50px; + background-color: rgb(3, 70, 3); + display: flex; + flex-direction: row; + position: relative; + + span{ + color: white; + opacity: 0.61; + margin-top: 15px; + position: relative; + } + + &__user{ + width: 50%; + height: 100%; + position: relative; + display: flex; + flex-direction: row; + gap: 3px; + + h4{ + color:white; + opacity: 0.61; + } + } + + &__icon{ + width: 50%; + height:100%; + position: relative; + display: flex; + flex-direction: row; + justify-content:end; + gap: 15px; + + + + + }} + + &__user-chats{ + width: 100%; + height: 675px; + display: flex; + flex-direction: column; + margin-top: 10px; + position: relative; + + + + + &__chats{ + width: 230px ; + + margin-left: 5px; + + position: relative; + display: flex; + &--right{ + position: relative; + left: 500px; + } + + &__p-box{ + width:fit-content; + height: fit-content; + background-color: white; + border-radius: 15px; + border: 1px solid gainsboro; + &--color{ + background-color: rgb(167, 187, 144); + } + + } + } + } + &__message{ + width: 80%; + height: 50px; + background-color: white; + border-radius: 20px; + margin-bottom: 10px; + margin-left: 15px; + &__icons{ + height: 100%; + width: 50%; + display: flex; + flex-direction: row; + opacity: 0.61; + + gap: 10px; + span{ + margin-top: 15px; + opacity: 0.81; + } + } + } + } \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/.gitignore b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/index.html b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/index.html new file mode 100644 index 000000000..0afc1f1d8 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + Discord + + +
+ + + diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/package-lock.json b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/package-lock.json new file mode 100644 index 000000000..899bfeba2 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/package-lock.json @@ -0,0 +1,2205 @@ +{ + "name": "discord-kseniya", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "discord-kseniya", + "version": "0.0.0", + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.10.16", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.56.1" + }, + "devDependencies": { + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^2.2.0", + "vite": "^3.2.3" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", + "dependencies": { + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", + "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "dependencies": { + "@babel/highlight": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.5.tgz", + "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.5.tgz", + "integrity": "sha512-UdOWmk4pNWTm/4DlPUl/Pt4Gz4rcEMb7CY0Y3eJl5Yz1vI8ZJGmHWaVE55LoxRjdpx0z259GE9U5STA9atUinQ==", + "dependencies": { + "@ampproject/remapping": "^2.1.0", + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.5", + "@babel/helper-compilation-targets": "^7.20.0", + "@babel/helper-module-transforms": "^7.20.2", + "@babel/helpers": "^7.20.5", + "@babel/parser": "^7.20.5", + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.5", + "@babel/types": "^7.20.5", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.1", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.5.tgz", + "integrity": "sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==", + "dependencies": { + "@babel/types": "^7.20.5", + "@jridgewell/gen-mapping": "^0.3.2", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", + "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.20.0", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz", + "integrity": "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==", + "dependencies": { + "@babel/compat-data": "^7.20.0", + "@babel/helper-validator-option": "^7.18.6", + "browserslist": "^4.21.3", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", + "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", + "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "dependencies": { + "@babel/template": "^7.18.10", + "@babel/types": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", + "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", + "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz", + "integrity": "sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==", + "dependencies": { + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-simple-access": "^7.20.2", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/helper-validator-identifier": "^7.19.1", + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.1", + "@babel/types": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", + "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz", + "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==", + "dependencies": { + "@babel/types": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", + "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz", + "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.6.tgz", + "integrity": "sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==", + "dependencies": { + "@babel/template": "^7.18.10", + "@babel/traverse": "^7.20.5", + "@babel/types": "^7.20.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz", + "integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==", + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz", + "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz", + "integrity": "sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-plugin-utils": "^7.19.0", + "@babel/plugin-syntax-jsx": "^7.18.6", + "@babel/types": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-development": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz", + "integrity": "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==", + "dev": true, + "dependencies": { + "@babel/plugin-transform-react-jsx": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz", + "integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.19.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz", + "integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz", + "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==", + "dependencies": { + "regenerator-runtime": "^0.13.11" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/template": { + "version": "7.18.10", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", + "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/parser": "^7.18.10", + "@babel/types": "^7.18.10" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.5.tgz", + "integrity": "sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==", + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.5", + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-function-name": "^7.19.0", + "@babel/helper-hoist-variables": "^7.18.6", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/parser": "^7.20.5", + "@babel/types": "^7.20.5", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz", + "integrity": "sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==", + "dependencies": { + "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-validator-identifier": "^7.19.1", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/babel-plugin": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", + "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/cache": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz", + "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==", + "dependencies": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.1", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/react": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz", + "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.5", + "@emotion/cache": "^11.10.5", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz", + "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==" + }, + "node_modules/@emotion/styled": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz", + "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.5", + "@emotion/is-prop-valid": "^1.2.0", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==" + }, + "node_modules/@esbuild/android-arm": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.16.tgz", + "integrity": "sha512-nyB6CH++2mSgx3GbnrJsZSxzne5K0HMyNIWafDHqYy7IwxFc4fd/CgHVZXr8Eh+Q3KbIAcAe3vGyqIPhGblvMQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.16.tgz", + "integrity": "sha512-SDLfP1uoB0HZ14CdVYgagllgrG7Mdxhkt4jDJOKl/MldKrkQ6vDJMZKl2+5XsEY/Lzz37fjgLQoJBGuAw/x8kQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", + "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", + "dependencies": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + } + }, + "node_modules/@mui/base": { + "version": "5.0.0-alpha.108", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.108.tgz", + "integrity": "sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@emotion/is-prop-valid": "^1.2.0", + "@mui/types": "^7.2.2", + "@mui/utils": "^5.10.16", + "@popperjs/core": "^2.11.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.16.tgz", + "integrity": "sha512-eK9+olw2ZbXX+vGrtKnN01/vLP1aX0Lq0xok35bqWM1aB93Dcmky/xPNf8h31oJ/C+IzJBjZaZMEDzVZg4Qc0A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + } + }, + "node_modules/@mui/material": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.16.tgz", + "integrity": "sha512-JSHcDQQ+k30NKkCM/0KX6jq4F5LOrbFKZpS+cEl7scZWOCJpUPH5ccAT5a7O8wzrgNZ8Y9PnwzNvWBrfShpJFw==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@mui/base": "5.0.0-alpha.108", + "@mui/core-downloads-tracker": "^5.10.16", + "@mui/system": "^5.10.16", + "@mui/types": "^7.2.2", + "@mui/utils": "^5.10.16", + "@types/react-transition-group": "^4.4.5", + "clsx": "^1.2.1", + "csstype": "^3.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz", + "integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@mui/utils": "^5.10.16", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.16.tgz", + "integrity": "sha512-ZMSjXvtiGwGDKqrSlXhpxK2voUaF2/lpC/pSTfFmZvKH9j9a9h1/iwo3ybgjFVYGgbfNeW4h0xEchiRohu9xsw==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@emotion/cache": "^11.10.5", + "csstype": "^3.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz", + "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@mui/private-theming": "^5.10.16", + "@mui/styled-engine": "^5.10.16", + "@mui/types": "^7.2.2", + "@mui/utils": "^5.10.16", + "clsx": "^1.2.1", + "csstype": "^3.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz", + "integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.10.16", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz", + "integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@types/prop-types": "^15.7.5", + "@types/react-is": "^16.7.1 || ^17.0.0", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "node_modules/@types/react": { + "version": "18.0.25", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz", + "integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.0.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz", + "integrity": "sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-is": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", + "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, + "node_modules/@vitejs/plugin-react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.2.0.tgz", + "integrity": "sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.19.6", + "@babel/plugin-transform-react-jsx": "^7.19.0", + "@babel/plugin-transform-react-jsx-development": "^7.18.6", + "@babel/plugin-transform-react-jsx-self": "^7.18.6", + "@babel/plugin-transform-react-jsx-source": "^7.19.6", + "magic-string": "^0.26.7", + "react-refresh": "^0.14.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^3.0.0" + } + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.21.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", + "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001400", + "electron-to-chromium": "^1.4.251", + "node-releases": "^2.0.6", + "update-browserslist-db": "^1.0.9" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001435", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001435.tgz", + "integrity": "sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.4.284", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", + "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/esbuild": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.16.tgz", + "integrity": "sha512-o6iS9zxdHrrojjlj6pNGC2NAg86ECZqIETswTM5KmJitq+R1YmahhWtMumeQp9lHqJaROGnsBi2RLawGnfo5ZQ==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.15.16", + "@esbuild/linux-loong64": "0.15.16", + "esbuild-android-64": "0.15.16", + "esbuild-android-arm64": "0.15.16", + "esbuild-darwin-64": "0.15.16", + "esbuild-darwin-arm64": "0.15.16", + "esbuild-freebsd-64": "0.15.16", + "esbuild-freebsd-arm64": "0.15.16", + "esbuild-linux-32": "0.15.16", + "esbuild-linux-64": "0.15.16", + "esbuild-linux-arm": "0.15.16", + "esbuild-linux-arm64": "0.15.16", + "esbuild-linux-mips64le": "0.15.16", + "esbuild-linux-ppc64le": "0.15.16", + "esbuild-linux-riscv64": "0.15.16", + "esbuild-linux-s390x": "0.15.16", + "esbuild-netbsd-64": "0.15.16", + "esbuild-openbsd-64": "0.15.16", + "esbuild-sunos-64": "0.15.16", + "esbuild-windows-32": "0.15.16", + "esbuild-windows-64": "0.15.16", + "esbuild-windows-arm64": "0.15.16" + } + }, + "node_modules/esbuild-android-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.16.tgz", + "integrity": "sha512-Vwkv/sT0zMSgPSVO3Jlt1pUbnZuOgtOQJkJkyyJFAlLe7BiT8e9ESzo0zQSx4c3wW4T6kGChmKDPMbWTgtliQA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-android-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.16.tgz", + "integrity": "sha512-lqfKuofMExL5niNV3gnhMUYacSXfsvzTa/58sDlBET/hCOG99Zmeh+lz6kvdgvGOsImeo6J9SW21rFCogNPLxg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-darwin-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.16.tgz", + "integrity": "sha512-wo2VWk/n/9V2TmqUZ/KpzRjCEcr00n7yahEdmtzlrfQ3lfMCf3Wa+0sqHAbjk3C6CKkR3WKK/whkMq5Gj4Da9g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-darwin-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.16.tgz", + "integrity": "sha512-fMXaUr5ou0M4WnewBKsspMtX++C1yIa3nJ5R2LSbLCfJT3uFdcRoU/NZjoM4kOMKyOD9Sa/2vlgN8G07K3SJnw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-freebsd-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.16.tgz", + "integrity": "sha512-UzIc0xlRx5x9kRuMr+E3+hlSOxa/aRqfuMfiYBXu2jJ8Mzej4lGL7+o6F5hzhLqWfWm1GWHNakIdlqg1ayaTNQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-freebsd-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.16.tgz", + "integrity": "sha512-8xyiYuGc0DLZphFQIiYaLHlfoP+hAN9RHbE+Ibh8EUcDNHAqbQgUrQg7pE7Bo00rXmQ5Ap6KFgcR0b4ALZls1g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-32": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.16.tgz", + "integrity": "sha512-iGijUTV+0kIMyUVoynK0v+32Oi8yyp0xwMzX69GX+5+AniNy/C/AL1MjFTsozRp/3xQPl7jVux/PLe2ds10/2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.16.tgz", + "integrity": "sha512-tuSOjXdLw7VzaUj89fIdAaQT7zFGbKBcz4YxbWrOiXkwscYgE7HtTxUavreBbnRkGxKwr9iT/gmeJWNm4djy/g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-arm": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.16.tgz", + "integrity": "sha512-XKcrxCEXDTOuoRj5l12tJnkvuxXBMKwEC5j0JISw3ziLf0j4zIwXbKbTmUrKFWbo6ZgvNpa7Y5dnbsjVvH39bQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.16.tgz", + "integrity": "sha512-mPYksnfHnemNrvjrDhZyixL/AfbJN0Xn9S34ZOHYdh6/jJcNd8iTsv3JwJoEvTJqjMggjMhGUPJAdjnFBHoH8A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-mips64le": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.16.tgz", + "integrity": "sha512-kSJO2PXaxfm0pWY39+YX+QtpFqyyrcp0ZeI8QPTrcFVQoWEPiPVtOfTZeS3ZKedfH+Ga38c4DSzmKMQJocQv6A==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-ppc64le": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.16.tgz", + "integrity": "sha512-NimPikwkBY0yGABw6SlhKrtT35sU4O23xkhlrTT/O6lSxv3Pm5iSc6OYaqVAHWkLdVf31bF4UDVFO+D990WpAA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-riscv64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.16.tgz", + "integrity": "sha512-ty2YUHZlwFOwp7pR+J87M4CVrXJIf5ZZtU/umpxgVJBXvWjhziSLEQxvl30SYfUPq0nzeWKBGw5i/DieiHeKfw==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-s390x": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.16.tgz", + "integrity": "sha512-VkZaGssvPDQtx4fvVdZ9czezmyWyzpQhEbSNsHZZN0BHvxRLOYAQ7sjay8nMQwYswP6O2KlZluRMNPYefFRs+w==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-netbsd-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.16.tgz", + "integrity": "sha512-ElQ9rhdY51et6MJTWrCPbqOd/YuPowD7Cxx3ee8wlmXQQVW7UvQI6nSprJ9uVFQISqSF5e5EWpwWqXZsECLvXg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-openbsd-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.16.tgz", + "integrity": "sha512-KgxMHyxMCT+NdLQE1zVJEsLSt2QQBAvJfmUGDmgEq8Fvjrf6vSKB00dVHUEDKcJwMID6CdgCpvYNt999tIYhqA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-sunos-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.16.tgz", + "integrity": "sha512-exSAx8Phj7QylXHlMfIyEfNrmqnLxFqLxdQF6MBHPdHAjT7fsKaX6XIJn+aQEFiOcE4X8e7VvdMCJ+WDZxjSRQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-32": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.16.tgz", + "integrity": "sha512-zQgWpY5pUCSTOwqKQ6/vOCJfRssTvxFuEkpB4f2VUGPBpdddZfdj8hbZuFRdZRPIVHvN7juGcpgCA/XCF37mAQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.16.tgz", + "integrity": "sha512-HjW1hHRLSncnM3MBCP7iquatHVJq9l0S2xxsHHj4yzf4nm9TU4Z7k4NkeMlD/dHQ4jPlQQhwcMvwbJiOefSuZw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-arm64": { + "version": "0.15.16", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.16.tgz", + "integrity": "sha512-oCcUKrJaMn04Vxy9Ekd8x23O8LoU01+4NOkQ2iBToKgnGj5eo1vU9i27NQZ9qC8NFZgnQQZg5oZWAejmbsppNA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "engines": { + "node": ">=4" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + }, + "node_modules/json5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", + "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/magic-string": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "dev": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", + "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==" + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/react-refresh": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "engines": { + "node": ">=4" + } + }, + "node_modules/rollup": { + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/sass": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.1.tgz", + "integrity": "sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, + "node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "engines": { + "node": ">=4" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", + "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist-lint": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/vite": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.4.tgz", + "integrity": "sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==", + "dev": true, + "dependencies": { + "esbuild": "^0.15.9", + "postcss": "^8.4.18", + "resolve": "^1.22.1", + "rollup": "^2.79.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + } + } +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/package.json b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/package.json new file mode 100644 index 000000000..199d8c3e4 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/package.json @@ -0,0 +1,25 @@ +{ + "name": "discord-kseniya", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.10.16", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.56.1" + }, + "devDependencies": { + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^2.2.0", + "vite": "^3.2.3" + } +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/public/vite.svg b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/App.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/App.css new file mode 100644 index 000000000..1f91a35c1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/App.css @@ -0,0 +1,16 @@ +body { + margin: 0 auto; + font-family: 'Work Sans', sans-serif; +} + +.App{ + display: flex; +} + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/App.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/App.jsx new file mode 100644 index 000000000..1c8946e2c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/App.jsx @@ -0,0 +1,23 @@ +import "./App.css"; +import Accounts from "./Components/Accounts/Accounts"; +import Center from "./Components/Center/Center"; +import Navbar from "./Components/Navbar/Navbar"; +import Grid from "@mui/material/Grid"; + +function App() { + return ( + + + + + + + + +
+ + + ); +} + +export default App; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/Accounts.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/Accounts.jsx new file mode 100644 index 000000000..ece5b9353 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/Accounts.jsx @@ -0,0 +1,34 @@ +import React from "react"; +import "./dist/accounts.css"; +import user1 from "../../assets/profile3.png"; +import user2 from "../../assets/user1.png"; +import user3 from "../../assets/user2.png"; +import animeUser from "../../assets/animeUser.png"; +import { USER_PROFILE_IMAGES } from "../../consts/Activities/users"; +import { EXTRA_ICONS } from "../../consts/Activities/extreaIcons"; + +const Accounts = () => { + return ( +
+ discord user + { + USER_PROFILE_IMAGES.map((element,index) => ( + {element.alt} + )) + } + { + EXTRA_ICONS.map((element,index) => ( +
+ {element.iconName} +
+ )) + } +
+ ); +}; + +export default Accounts; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.css new file mode 100644 index 000000000..8ff09d10a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.css @@ -0,0 +1,32 @@ +.accountsContainer { + background-color: #2b2b2b; + text-align: center; + height: 100%; +} + +.discordUser { + width: 3rem; + border-radius: 20%; + margin-top: 2rem; + margin-bottom: 2rem; +} + +.plainUser { + width: 3rem; + height: 3rem; + border-radius: 50%; + margin-bottom: 0.4rem; +} + +.sidebarExtraIcons { + width: 3rem; + height: 3rem; + border-radius: 50%; + margin-top: 0.5rem; + background-color: #424242; + color: rgb(13, 121, 62); + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.css.map new file mode 100644 index 000000000..c6e7189d2 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["accounts.scss","accounts.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;EACA,kBAAA;EACA,YAAA;ACCF;;ADEA;EACE,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACCF;;ADEA;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,qBAAA;ACCF;;ADEA;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,yBAAA;EACA,uBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACCF","file":"accounts.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.scss new file mode 100644 index 000000000..20c399d17 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Accounts/accounts.scss @@ -0,0 +1,32 @@ +.accountsContainer { + background-color: #2b2b2b; + text-align: center; + height: 100% +} + +.discordUser { + width: 3rem; + border-radius: 20%; + margin-top: 2rem; + margin-bottom: 2rem; +} + +.plainUser { + width: 3rem; + height: 3rem; + border-radius: 50%; + margin-bottom: 0.4rem; +} + +.sidebarExtraIcons{ + width: 3rem; + height: 3rem; + border-radius: 50%; + margin-top: 0.5rem; + background-color: #424242; + color: rgb(13, 121, 62); + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/Activities.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/Activities.jsx new file mode 100644 index 000000000..562d01408 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/Activities.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import { ACTIVITIES } from "../../../consts/Activities/activities"; +import SingleActivity from "./SingleActivity/SingleActivity"; +import './dist/activities.css' + +const Activities = () => { + return ( +
+
Activities
+ {ACTIVITIES.map((element, index) => ( + + ) + )} +
+ ); +}; + +export default Activities; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.css new file mode 100644 index 000000000..2dc96acb6 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.css @@ -0,0 +1,30 @@ +.singleActivity { + display: flex; + align-items: center; + margin-left: 2.5rem; + background-color: #424242; + margin-bottom: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 5px; + margin-right: 2rem; + width: 20rem; +} +.singleActivity__pic { + width: 2rem; + height: 2rem; + border-radius: 50%; + margin-left: 1rem; + margin-right: 1rem; +} +.singleActivity__header { + padding-left: 2rem; +} +.singleActivity__userNames { + font-weight: bold; + font-size: 0.9rem; +} +.singleActivity__desc { + font-size: 0.8rem; + color: rgb(160, 160, 160); +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.css.map new file mode 100644 index 000000000..da33f7924 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["SingleActivity.scss","SingleActivity.css"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,yBAAA;EACA,mBAAA;EACA,iBAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;ACCF;ADCE;EACE,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;ACCJ;ADEE;EACE,kBAAA;ACAJ;ADGE;EACE,iBAAA;EACA,iBAAA;ACDJ;ADIE;EACE,iBAAA;EACA,yBAAA;ACFJ","file":"SingleActivity.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.jsx new file mode 100644 index 000000000..944df6e12 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import "./dist/SingleActivity.css"; + +const SingleActivity = ({ pic, users, desc, server }) => { + return ( +
+ activity picture +
+
{users}
+
{desc}
+
+
+ ); +}; + +export default SingleActivity; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.scss new file mode 100644 index 000000000..29e003242 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/SingleActivity/SingleActivity.scss @@ -0,0 +1,34 @@ +.singleActivity { + display: flex; + align-items: center; + margin-left: 2.5rem; + background-color: #424242; + margin-bottom: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 5px; + margin-right: 2rem; + width: 20rem; + + &__pic { + width: 2rem; + height: 2rem; + border-radius: 50%; + margin-left: 1rem; + margin-right: 1rem; + } + + &__header { + padding-left: 2rem; + } + + &__userNames { + font-weight: bold; + font-size: 0.9rem; + } + + &__desc { + font-size: 0.8rem; + color: rgb(160, 160, 160); + } +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.css new file mode 100644 index 000000000..3361ac827 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.css @@ -0,0 +1,7 @@ +.activities__title { + font-size: 1.4rem; + font-weight: bold; + padding-top: 3.8rem; + padding-bottom: 2rem; + padding-left: 1rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.css.map new file mode 100644 index 000000000..b723c92a1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["activities.scss","activities.css"],"names":[],"mappings":"AACE;EACE,iBAAA;EACA,iBAAA;EACA,mBAAA;EACA,oBAAA;EACA,kBAAA;ACAJ","file":"activities.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.scss new file mode 100644 index 000000000..740a3d505 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Activities/activities.scss @@ -0,0 +1,9 @@ +.activities { + &__title { + font-size: 1.4rem; + font-weight: bold; + padding-top: 3.8rem; + padding-bottom: 2rem; + padding-left: 1rem; + } +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Center.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Center.jsx new file mode 100644 index 000000000..97ec2c300 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Center.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import './dist/center.css' +import Home from './Home/Home'; +import Activities from './Activities/Activities'; + +const Center = () => { + return ( +
+ + +
+ ); +}; + +export default Center; \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/Home.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/Home.jsx new file mode 100644 index 000000000..14caaeea6 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/Home.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import "./dist/home.css"; +import { LIVE_STAGES } from "../../../consts/Stages/stages"; +import SingleStage from "./SingleStage/SingleStage"; + +const Home = () => { + return ( +
+
Home
+
+
Live Stages
+ {LIVE_STAGES.map((element, index) => ( + + ))} +
+
+ ); +}; + +export default Home; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/SingleStage.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/SingleStage.jsx new file mode 100644 index 000000000..73e585720 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/SingleStage.jsx @@ -0,0 +1,33 @@ +import React from "react"; +import "./dist/singleStage.css"; +import Grid from "@mui/material/Grid"; + +const SingleStage = ({ picture, host, desc, name, users }) => { + return ( +
+
+ stage picture +
+
{host}
+
{desc}
+
+
+
{name}
+ + {users.map((element, index) => ( + + user picture + + {element.name} + + ))} + +
+ ); +}; + +export default SingleStage; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.css new file mode 100644 index 000000000..ee6d3c0c5 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.css @@ -0,0 +1,51 @@ +.stageWrapper { + background-color: #424242; + color: white; + margin-bottom: 2rem; + padding-top: 1rem; + padding-left: 1rem; + padding-bottom: 1rem; + border-radius: 0.5rem; +} +.stageWrapper__pic { + width: 2rem; + height: 2rem; + border-radius: 20%; +} +.stageWrapper__host { + font-size: 1.3vw; + font-weight: bold; +} +.stageWrapper__desc { + font-size: 0.9rem; + color: rgb(160, 160, 160); +} +.stageWrapper__name { + font-size: 1.4vw; + font-weight: bold; + padding-top: 0.8rem; + margin-bottom: 1.5rem; +} + +.stageHeader { + display: flex; + align-items: center; +} +.stageHeader__nameDesc { + padding-left: 1rem; +} + +.stageUsers { + display: flex; +} +.stageUsers__wraprer { + display: flex; + align-items: center; + padding-bottom: 0.5rem; +} +.stageUsers__img { + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + margin-right: 0.5rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.css.map new file mode 100644 index 000000000..add303321 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["singleStage.scss","singleStage.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;EACA,YAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,oBAAA;EACA,qBAAA;ACCF;ADCE;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ACCJ;ADEE;EACE,gBAAA;EACA,iBAAA;ACAJ;ADGE;EACE,iBAAA;EACA,yBAAA;ACDJ;ADIE;EACE,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qBAAA;ACFJ;;ADKA;EACE,aAAA;EACA,mBAAA;ACFF;ADIE;EACE,kBAAA;ACFJ;;ADMA;EACE,aAAA;ACHF;ADIE;EACE,aAAA;EACA,mBAAA;EACA,sBAAA;ACFJ;ADIE;EACE,aAAA;EACA,cAAA;EACA,kBAAA;EACA,oBAAA;ACFJ","file":"singleStage.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.scss new file mode 100644 index 000000000..bb02a5782 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/SingleStage/singleStage.scss @@ -0,0 +1,55 @@ +.stageWrapper { + background-color: #424242; + color: white; + margin-bottom: 2rem; + padding-top: 1rem; + padding-left: 1rem; + padding-bottom: 1rem; + border-radius: 0.5rem; + + &__pic { + width: 2rem; + height: 2rem; + border-radius: 20%; + } + + &__host { + font-size: 1.3vw; + font-weight: bold; + } + + &__desc { + font-size: 0.9rem; + color: rgb(160, 160, 160); + } + + &__name { + font-size: 1.4vw; + font-weight: bold; + padding-top: 0.8rem; + margin-bottom: 1.5rem; + } +} +.stageHeader { + display: flex; + align-items: center; + + &__nameDesc { + padding-left: 1rem; + } +} + +.stageUsers { + display: flex; + &__wraprer { + display: flex; + align-items: center; + padding-bottom: 0.5rem; + } + &__img { + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + margin-right: 0.5rem; + } +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.css new file mode 100644 index 000000000..4b445a5ed --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.css @@ -0,0 +1,34 @@ +.homeContainer { + max-height: 100vh; + overflow-y: auto; +} +.homeContainer__title { + font-size: 1.2rem; + font-weight: bold; + padding-top: 1rem; + padding-left: 2rem; +} + +.centerContainer ::-webkit-scrollbar { + width: 10px; + height: 10px; +} +.centerContainer ::-webkit-scrollbar-thumb { + background-color: #2b2b2b; + border-radius: 10px; +} +.centerContainer ::-webkit-scrollbar-track { + background: #424242; + border-radius: 10px; +} + +.liveStagesContainer { + padding-left: 3vh; + padding-right: 3vh; +} +.liveStagesContainer__title { + font-size: 1.4rem; + font-weight: bold; + padding-top: 1.6rem; + padding-bottom: 2rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.css.map new file mode 100644 index 000000000..992284d12 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["home.scss","home.css"],"names":[],"mappings":"AAAA;EACE,iBAAA;EACA,gBAAA;ACCF;ADCE;EACE,iBAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;ACCJ;;ADIE;EACE,WAAA;EACA,YAAA;ACDJ;ADGE;EACE,yBAAA;EACA,mBAAA;ACDJ;ADGE;EACE,mBAAA;EACA,mBAAA;ACDJ;;ADKA;EACE,iBAAA;EACA,kBAAA;ACFF;ADIE;EACE,iBAAA;EACA,iBAAA;EACA,mBAAA;EACA,oBAAA;ACFJ","file":"home.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.scss new file mode 100644 index 000000000..a01f996fb --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/Home/home.scss @@ -0,0 +1,38 @@ +.homeContainer { + max-height: 100vh; + overflow-y: auto; + + &__title { + font-size: 1.2rem; + font-weight: bold; + padding-top: 1rem; + padding-left: 2rem; + } +} + +.centerContainer { + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-thumb { + background-color: #2b2b2b; + border-radius: 10px; + } + ::-webkit-scrollbar-track { + background: #424242; + border-radius: 10px; + } +} + +.liveStagesContainer { + padding-left: 3vh; + padding-right: 3vh; + + &__title { + font-size: 1.4rem; + font-weight: bold; + padding-top: 1.6rem; + padding-bottom: 2rem; + } +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.css new file mode 100644 index 000000000..6561f8df1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.css @@ -0,0 +1,6 @@ +.centerContainer { + background-color: #4e4e4e; + width: 100%; + color: white; + display: flex; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.css.map new file mode 100644 index 000000000..70dab9d0d --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["center.scss","center.css"],"names":[],"mappings":"AAAA;EACI,yBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;ACCJ","file":"center.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.scss new file mode 100644 index 000000000..f34aae806 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Center/center.scss @@ -0,0 +1,6 @@ +.centerContainer{ + background-color: #4e4e4e; + width: 100%; + color: white; + display: flex; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/Navbar.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/Navbar.jsx new file mode 100644 index 000000000..45cb9a9e5 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/Navbar.jsx @@ -0,0 +1,51 @@ +import React from "react"; +import "./dist/navbar.css"; +import { NAVBAR_ELEMENTS } from "../../consts/Sidebar/SidebarElements"; +import { DIRECT_MESSAGES } from "../../consts/Sidebar/SidebarDirectMessages"; + +import NavbarSingleCategory from "./NavbarSingleCategory/NavbarSingleCategory"; +import TextField from "@mui/material/TextField"; + +const Navbar = () => { + return ( +
+ + {NAVBAR_ELEMENTS.map((element, index) => ( + + ))} +
DIRECT MESSAGES
+ {DIRECT_MESSAGES.map((element,index) => ( +
+ activity picture +
+
{element.name}
+ {element.secondaryTitle &&
{element.secondaryTitle}
} +
+
+ ))} +
+ ); +}; + +export default Navbar; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.css new file mode 100644 index 000000000..a2f5f3233 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.css @@ -0,0 +1,9 @@ +.singleCategoryWrapper { + display: flex; + align-items: center; + padding-top: 1.5em; + color: white; +} +.singleCategoryWrapper__icon { + padding-right: 1rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.css.map new file mode 100644 index 000000000..f5a91334e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["NavbarSingleCategory.scss","NavbarSingleCategory.css"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,YAAA;ACCF;ADCE;EACE,mBAAA;ACCJ","file":"NavbarSingleCategory.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.jsx new file mode 100644 index 000000000..ebd2b1ca9 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import './dist/NavbarSingleCategory.css' + +const NavbarSingleCategory = ({ category, icon }) => { + return ( +
+ {icon} +
{category}
+
+ ); +}; + +export default NavbarSingleCategory; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.scss new file mode 100644 index 000000000..acf7b7c2c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/NavbarSingleCategory/NavbarSingleCategory.scss @@ -0,0 +1,12 @@ +.singleCategoryWrapper { + display: flex; + align-items: center; + padding-top: 1.5em; + color: white; + + &__icon { + padding-right: 1rem; + } +} + + diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.css b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.css new file mode 100644 index 000000000..8fd541c1b --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.css @@ -0,0 +1,37 @@ +.navbarContainer { + background-color: #424242; + height: 100%; + color: white; + padding-left: 5%; +} +.navbarContainer__search { + font-size: 1rem; +} + +.sidebarDirectMessageTitle { + font-size: 1vw; + margin-top: 1.5rem; + margin-bottom: 1rem; +} + +.singleDirectMessage { + display: flex; + align-items: center; + margin-bottom: 0.75rem; +} + +.directMessageImg { + height: 2.5rem; + border-radius: 50%; + margin-right: 0.5rem; +} + +.directMessageSecondaryTitle { + font-size: 0.65rem; + color: rgb(160, 160, 160); +} + +.directMessageUserName { + font-weight: bold; + font-size: 0.9rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.css.map b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.css.map new file mode 100644 index 000000000..c361ec4f1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["navbar.scss","navbar.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;ACCF;ADCE;EACE,eAAA;ACCJ;;ADGA;EACE,cAAA;EACA,kBAAA;EACA,mBAAA;ACAF;;ADGA;EACE,aAAA;EACA,mBAAA;EACA,sBAAA;ACAF;;ADGA;EACE,cAAA;EACA,kBAAA;EACA,oBAAA;ACAF;;ADGA;EACE,kBAAA;EACA,yBAAA;ACAF;;ADGA;EACE,iBAAA;EACA,iBAAA;ACAF","file":"navbar.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.scss b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.scss new file mode 100644 index 000000000..a440c5342 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/Components/Navbar/navbar.scss @@ -0,0 +1,38 @@ +.navbarContainer { + background-color: #424242; + height: 100%; + color: white; + padding-left: 5%; + + &__search { + font-size: 1rem; + } +} + +.sidebarDirectMessageTitle { + font-size: 1vw; + margin-top: 1.5rem; + margin-bottom: 1rem; +} + +.singleDirectMessage { + display: flex; + align-items: center; + margin-bottom: 0.75rem; +} + +.directMessageImg { + height: 2.5rem; + border-radius: 50%; + margin-right: 0.5rem; +} + +.directMessageSecondaryTitle { + font-size: 0.65rem; + color: rgb(160, 160, 160); +} + +.directMessageUserName { + font-weight: bold; + font-size: 0.9rem; +} diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/animeUser.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/animeUser.png new file mode 100644 index 000000000..417375134 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/animeUser.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/profile3.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/profile3.png new file mode 100644 index 000000000..966dd5d5e Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/profile3.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/server.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/server.png new file mode 100644 index 000000000..da7f57f3f Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/server.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user.png new file mode 100644 index 000000000..cc5a282e6 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user1.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user1.png new file mode 100644 index 000000000..1dd44275a Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user1.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user2.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user2.png new file mode 100644 index 000000000..ba5b1d5f1 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user2.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user4.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user4.png new file mode 100644 index 000000000..d1249d50f Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user4.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user5.png b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user5.png new file mode 100644 index 000000000..30ea168f5 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/assets/user5.png differ diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/activities.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/activities.js new file mode 100644 index 000000000..a9571fc19 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/activities.js @@ -0,0 +1,43 @@ +import user1 from "../../assets/profile3.png"; +import user2 from "../../assets/user1.png"; +import user3 from "../../assets/user2.png"; +import animeUser from "../../assets/animeUser.png"; +import user4 from "../../assets/user4.png"; +import serverPic from "../../assets/server.png"; +import user5 from "../../assets/user5.png"; + +export const ACTIVITIES = [ + { + pic: user1, + users: "RokaK, Sylvie, and 4 others", + desc: "In a voice channel", + server: { + pic: user4, + name: "Friends Server", + desc: "Hangout Room", + serverPic: serverPic, + }, + }, + { + pic: user2, + users: "yuugu, iDiscarded, and 2 others", + desc: "League of Legends - 3h", + server: { + pic: user5, + name: "Scrubs", + desc: "Bronze to Gold Scr..", + }, + }, + { + pic: user3, + users: "abfuscate", + desc: "Hearthstone - 3h", + server: "", + }, + { + pic: animeUser, + users: "Kovath", + desc: "Destiny 2 - 4h", + server: "", + }, +]; diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/extreaIcons.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/extreaIcons.js new file mode 100644 index 000000000..d47d29460 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/extreaIcons.js @@ -0,0 +1,8 @@ +export const EXTRA_ICONS = [ + { + iconName: 'add' + }, + { + iconName: 'explore' + } +] \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/users.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/users.js new file mode 100644 index 000000000..9e2d314b4 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Activities/users.js @@ -0,0 +1,27 @@ +import user1 from "../../assets/profile3.png"; +import user2 from "../../assets/user1.png"; +import user3 from "../../assets/user2.png"; +import animeUser from "../../assets/animeUser.png"; + +export const USER_PROFILE_IMAGES = [ + { + img: user1, + alt: 'first user' + }, + { + img: user2, + alt: 'second user' + }, + { + img: user3, + alt: 'third user' + }, + { + img: user1, + alt: 'fourth user' + }, + { + img: animeUser, + alt: 'anime user' + }, +] \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Sidebar/SidebarDirectMessages.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Sidebar/SidebarDirectMessages.js new file mode 100644 index 000000000..c3ce60fd3 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Sidebar/SidebarDirectMessages.js @@ -0,0 +1,28 @@ +import animeUser from '../../assets/animeUser.png' +import user5 from '../../assets/user5.png' + +import user1 from '../../assets/user1.png' +import user4 from '../../assets/user4.png' + + + +export const DIRECT_MESSAGES = [ + { + img: animeUser, + name: 'sonicman' + }, + { + img: user1, + name: 'MrLocke', + secondaryTitle: 'Playging Game Name' + }, + { + img: user5, + name: 'Secret Squad', + secondaryTitle: '6 Members' + }, + { + img: user4, + name: 'thereaclap' + } +] \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Sidebar/SidebarElements.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Sidebar/SidebarElements.js new file mode 100644 index 000000000..40b3c151a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Sidebar/SidebarElements.js @@ -0,0 +1,15 @@ +export const NAVBAR_ELEMENTS = [ + { + category: 'Home', + icon: 'account_circle' + + }, + { + category: 'Friends', + icon: 'group' + }, + { + category: 'Nitro', + icon: 'trail_length_medium' + } +] \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Stages/stages.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Stages/stages.js new file mode 100644 index 000000000..46733d11c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/consts/Stages/stages.js @@ -0,0 +1,126 @@ +import user1 from '../../assets/profile3.png' +import user2 from '../../assets/user1.png' +import user3 from '../../assets/user2.png' +import animeUser from '../../assets/animeUser.png' + +export const LIVE_STAGES = [ + { + stagePic: user1, + stageHost: 'Biocord', + stageDesc: 'Server you are in', + stageName: 'Dr. Smith on COVID-19 Vaccine in the Bay Area', + users: [ + { + name: 'sonicman', + pic: user1 + }, + { + name: 'acetaminophen', + pic: user2 + }, + { + name: 'drsmith', + pic: user1 + }, + { + name: 'ibuprofen', + pic: user1 + }, + { + name: '+2 Speakers', + pic: user1 + } + ] + }, + { + stagePic: user2, + stageHost: 'The House of Cap', + stageDesc: 'Server you are in', + stageName: 'Story Time with The Legendary Cap: how he got started on Discord', + users: [ + { + name: 'therealcap', + pic: user1 + }, + { + name: 'jwoff', + pic: user1 + }, + { + name: 'tpcstld', + pic: user1 + }, + ] + }, + { + stagePic: user3, + stageHost: "Grimes' Community", + stageDesc: 'Just started', + stageName: 'AMA with Grimes', + users: [ + { + name: 'Grimes', + pic: user1 + }, + { + name: 'bigbrainisme', + pic: user1 + }, + { + name: 'MrLocke', + pic: user1 + }, + ] + }, + { + stagePic: animeUser, + stageHost: 'Anime Soul Discord', + stageDesc: 'shahar', + stageName: 'What are your favorite anime of the year?', + users: [ + { + name: 'AnimeMan', + pic: user1 + }, + { + name: 'cookiesncream', + pic: user1 + }, + { + name: 'WhoIsMe', + pic: user1 + }, + { + name: 'prancie', + pic: user1 + }, + ] + }, { + stagePic: animeUser, + stageHost: 'Anime Soul Discord', + stageDesc: 'shahar', + stageName: 'What are your favorite anime of the year?', + users: [ + { + name: 'shahar', + pic: user1 + }, + { + name: 'shahar', + pic: user1 + }, + { + name: 'shahar', + pic: user1 + }, + { + name: 'shahar', + pic: user1 + }, + { + name: 'shahar', + pic: user1 + } + ] + }, +] \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/main.jsx b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/main.jsx new file mode 100644 index 000000000..d23a1e985 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/src/main.jsx @@ -0,0 +1,7 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' + +ReactDOM.createRoot(document.getElementById('root')).render( + +) diff --git a/01-HTML-CSS/07-BEM/HW/discord-Kseniya/vite.config.js b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/vite.config.js new file mode 100644 index 000000000..b1b5f91e5 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/discord-Kseniya/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()] +}) diff --git a/01-HTML-CSS/07-BEM/HW/idan/dist/style.css b/01-HTML-CSS/07-BEM/HW/idan/dist/style.css new file mode 100644 index 000000000..445d6ad64 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/idan/dist/style.css @@ -0,0 +1,511 @@ +h1 { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} + +p { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} + +.light { + font-weight: lighter; + color: #b9bbbe94; +} + +.descriptor { + font-size: 10px; +} + +.server_list { + width: 70px; + height: 100vh; + position: fixed; + left: 0px; + top: 0px; + display: flex; + gap: 0.625rem; + flex-direction: column; + background-color: #202225; + overflow-y: scroll; +} +.server_list img { + height: 3rem; + width: 3rem; + margin: auto; + border-radius: 50%; +} +.server_list__spacer { + width: 2rem; + border-bottom: #363a3f solid 2px; + margin: auto; +} +.server_list__icon { + min-height: 3rem; + min-width: 3rem; + margin: 10px auto 0px; + border-radius: 33%; + background-color: #5865f2; + padding-bottom: 20px; + box-sizing: border-box; +} +.server_list__icon img { + width: 1.625rem; + height: auto; + margin-left: 0.6875rem; + margin-top: 0.87rem; + margin-right: auto; + border-radius: 0; +} + +.conv_list { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + width: 240px; + height: 100vh; + display: flex; + flex-direction: column; + position: absolute; + overflow-y: scroll; + left: 70px; + top: 60px; + gap: 2px; + background-color: #2f3136; + color: #b9bbbe; + overflow-x: hidden; +} +.conv_list input[type=text] { + position: fixed; + top: -10px; + min-height: 20px; + margin-top: 25px; + border-radius: 3px; + border: none; + float: none; + display: block; + text-align: left; + width: 210px; + margin-left: 10px; + padding-left: 10px; + background-color: #202225; + color: white; + z-index: 11; +} +.conv_list img { + width: 20px; + height: 20px; + position: fixed; + right: -207px; + top: -20px; +} +.conv_list__select { + margin: 0px auto; + width: 224px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + color: #96989d; +} +.conv_list__select--home { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + margin: 0px auto; + width: 224px; + height: 42px; + background-color: #42464d; + color: #dcddde; + border-radius: 4px; +} +.conv_list__friend { + margin: 0px auto; + width: 224px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + color: #96989d; +} +.conv_list__friend__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; +} +.conv_list__friend__status--dND { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + color: #18191b; + background-color: red; + position: relative; + right: 113px; + top: 10px; +} +.conv_list__friend__status--dND p { + color: #2f3136; + position: relative; + top: -42px; + right: 3.5px; + font-size: 1.8rem; +} +.conv_list__friend img { + height: 30px; + width: 30px; + position: relative; + left: 5px; + top: 0px; + border-radius: 50%; +} +.conv_list__friend p { + padding-left: 5px; +} +.conv_list h1 { + position: relative; + left: 13px; + font-size: 10px; + font-weight: 100; +} + +.conv_list__select img { + height: 30px; + width: 30px; + position: relative; + left: 5px; + top: 0px; + padding-right: 10px; +} + +.conv_list__select--home img { + height: 40px; + width: 40px; + position: relative; + left: 1px; + top: 0px; +} + +.home { + width: 100%; + height: 100vh; + position: absolute; + left: 310px; + top: 0px; + background-color: #36393f; + display: flex; + flex-direction: column; + overflow-y: scroll; +} +.home__card { + position: fixed; + left: 70px; + height: 50px; + background-color: #36393f; + display: flex; + align-items: center; + z-index: 10; + width: 100vw; + border-bottom: solid rgba(0, 0, 0, 0.363) 1px; +} +.home__card h1 { + position: fixed; + left: 360px; +} +.home__card img { + height: 40px; + width: 40px; + position: fixed; + left: 320px; + top: 2 px; +} +.home h1 { + color: white; + font-size: 1.6rem; +} +.home__stage_list { + position: absolute; + top: 100px; + left: 80px; + height: 100%; + min-width: 70vw; + display: flex; + flex-direction: column; + overflow-y: scroll; + gap: 40px; +} +.home__stage_list h1 { + font-size: 2rem; +} +.home__stage_list__stages { + width: 65%; + background-color: #2f3136; + border-radius: 7px; + position: relative; + display: flex; + flex-wrap: wrap; + flex-direction: row; + min-height: 100px; +} +.home__stage_list__stages img { + border-radius: 50%; + height: 20px; + width: 20px; +} +.home__stage_list__stages p { + position: relative; + bottom: 0px; + color: #dcddde; +} +.home__stage_list__stages__friend { + height: 30px; + border-bottom: 1px solid #36393f; + display: flex; + flex-direction: row; + align-items: center; + gap: 17px; + width: 100%; +} +.home__stage_list__stages__friend img { + position: relative; + left: 10px; +} +.home__stage_list__stages__server { + height: 70px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +} +.home__stage_list__stages__server p { + font-size: 1.125rem; + line-height: 0.5rem; +} +.home__stage_list__stages__server img { + box-sizing: border-box; + height: 30px; + width: 30px; + border-radius: 5px; + position: relative; + left: 10px; +} +.home__stage_list__stages__server__listiner { + min-height: 1.4rem; + background-color: #202225; + color: #b9bbbea9; + height: 10px; + position: absolute; + right: 30px; + border-radius: 10px; + display: flex; + align-items: center; + gap: 7px; +} +.home__stage_list__stages__server__listiner img { + width: 20px; + height: 20px; + border-radius: 50%; + position: relative; + left: 4px; +} +.home__stage_list__stages__title { + position: relative; + bottom: 10px; +} +.home__stage_list__stages__title h1 { + color: #c5c7c9; + font-size: 1.6rem; + position: relative; + left: 10px; +} +.home__stage_list__stages__speakers { + position: relative; + left: 5px; + min-width: 100px; + height: 30px; + display: grid; + width: 90%; + height: 70px; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); + column-gap: 10%; + color: #b9bbbe; +} +.home__stage_list__stages__speakers__speaker { + width: 200px; + height: 10px; + display: flex; + align-items: center; + color: #b9bbbe; +} +.home__stage_list__stages__speakers img { + border-radius: 50%; +} + +.activity_feed { + color: #c5c7c9; + min-width: 416px; + max-width: 416px; + height: 100%; + position: absolute; + right: 0px; + top: 0px; + background-color: #36393f; + border-left: solid #96989d2f 1px; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: scroll; +} +.activity_feed h1 { + padding-left: 20px; + align-self: flex-start; +} +.activity_feed__activity { + margin-top: 20px; + width: 380px; + min-height: 350px; + border-radius: 10px; + background-color: #2f3136; + overflow-y: scroll; +} +.activity_feed__activity img { + border-radius: 50%; + height: 35px; + width: 35px; +} +.activity_feed__activity__profile { + position: relative; + gap: 10px; + border-radius: 10px; + width: 350px; + margin: 5px auto; + display: flex; + align-items: center; +} +.activity_feed__activity__profile__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #130e0e; + position: relative; + right: 190px; + top: 10px; +} +.activity_feed__activity__server { + position: relative; + background-color: #36393f; + width: 350px; + min-height: 258px; + border-radius: 10px; + width: 350px; + margin: 5px auto; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0px; +} +.activity_feed__activity__server__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; +} +.activity_feed__activity__server__screen_share { + width: 350px; + position: absolute; + left: 0px; + top: 60px; +} +.activity_feed__activity__server__screen_share img { + height: auto; + width: 350px; + border-radius: 10px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} +.activity_feed__activity__par_container { + display: flex; + flex-direction: row; + width: 70px; + height: 100px; + position: relative; + left: 270px; + bottom: 60px; + overflow: hidden; +} +.activity_feed__activity__par_container__participants { + position: relative; + width: 10px; + height: 30px; + border-radius: 50%; +} +.activity_feed__activity__par_container__participants img { + border: #202225 solid 3px; + width: 30px; + height: 30px; + border-radius: 50%; +} + +body { + overflow: hidden; +} + +.profile { + position: absolute; + left: 70px; + bottom: 0px; + margin: 0px auto; + width: 240px; + height: 42px; + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; + color: #96989d; + background-color: #292b2f; +} +.profile__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; +} +.profile img { + height: 30px; + width: 30px; + position: relative; + left: 5px; + top: 0px; + border-radius: 50%; +} +.profile p { + padding-left: 5px; +} + +body { + background-color: #2f3136; +} + +::-webkit-scrollbar { + width: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #18191b; + border-radius: 20px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/idan/drawio.txt b/01-HTML-CSS/07-BEM/HW/idan/drawio.txt new file mode 100644 index 000000000..231ba3d1a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/idan/drawio.txt @@ -0,0 +1 @@ +https://drive.google.com/file/d/1vcG-nwFk5cIWImF1u-OWv9T8E_mV7p5j/view?usp=sharing diff --git a/01-HTML-CSS/07-BEM/HW/idan/index.html b/01-HTML-CSS/07-BEM/HW/idan/index.html new file mode 100644 index 000000000..8432da8f5 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/idan/index.html @@ -0,0 +1,467 @@ + + + + + + + Hey👋 ladies💁‍♀️ 📷 Would 😍 you 👈 like 👍 to 2️⃣ get 😮 rich 💰💰💰 by running 🏃‍♀️🏃‍♀️ your 👈 own business 👩‍💼💼 from home 🏡 with just ☝ your phone? 📱🤳 Well 🤷‍♀️ you can't. 😂 Get 👏 a 👏 real 👏 job 👏 you 👏 stupid 👏 cunt + + + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ + Home +
+
+ + Friends +
+
+ + Nitro +
+

DIRECT MESSAGES

+
+ +

Joe biden's house of fun!
9 Members

+
+
+ +

Joe biden
playing with hunter...

+

-

+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+ +

Joe biden

+
+
+
+
+
+
+ +

Home

+ +
+ +
+

Live Stages

+
+
+ +

Joe Biden is in the audiance

+
+
+ +

Joe Bicrod
server you are in

+
+ +

999+

+
+ +
+
+

JOE BIDEN JOE BIDEN JOE BIDEN JOE BIDEN JOE BIDEN

+
+
+ +
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

+99 Joe Bidens

+
+
+
+
+
+ +

Joe Biden is in the audiance

+
+
+ +

Joe Bicrod
server you are in

+
+ +

999+

+
+ +
+
+

JOE BIDEN JOE BIDEN JOE BIDEN JOE BIDEN JOE BIDEN

+
+
+ +
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

+99 Joe Bidens

+
+
+
+
+
+ +

Joe Biden is in the audiance

+
+
+ +

Joe Bicrod
server you are in

+
+ +

999+

+
+ +
+
+

JOE BIDEN JOE BIDEN JOE BIDEN JOE BIDEN JOE BIDEN

+
+
+ +
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

Joe Biden

+
+
+ +

+99 Joe Bidens

+
+
+
+ +
+
+
+

temp fix

+

Activities

+
+
+ +

Joe Biden, Joe Biden, and +99 others
in a voice channel +

+
+
+ +

Joe Biden
hunter biden playroom

+
a
+
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ +

Joe Biden, Joe Biden, and +99 others
in a voice channel +

+
+
+ +

Joe Biden
hunter biden playroom

+
a
+
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ +

Joe Biden, Joe Biden, and +99 others
in a voice channel +

+
+
+ +

Joe Biden
hunter biden playroom

+
a
+
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ +

Joe Biden, Joe Biden, and +99 others
in a voice channel +

+
+
+ +

Joe Biden
hunter biden playroom

+
a
+
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+ +

Joe Biden
#joeB

+
+ + + +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/idan/style.css b/01-HTML-CSS/07-BEM/HW/idan/style.css new file mode 100644 index 000000000..b1818ed6a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/idan/style.css @@ -0,0 +1,512 @@ +h1 { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} + +p { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} + +.light { + font-weight: lighter; + color: rgba(185, 187, 190, 0.5803921569); +} + +.descriptor { + font-size: 10px; +} + +.server_list { + width: 70px; + height: 100vh; + position: fixed; + left: 0px; + top: 0px; + display: flex; + gap: 0.625rem; + flex-direction: column; + background-color: #202225; + overflow-y: scroll; +} +.server_list img { + height: 3rem; + width: 3rem; + margin: auto; + border-radius: 50%; +} +.server_list__spacer { + width: 2rem; + border-bottom: #363a3f solid 2px; + margin: auto; +} +.server_list__icon { + min-height: 3rem; + min-width: 3rem; + margin: 10px auto 0px; + border-radius: 33%; + background-color: #5865f2; + padding-bottom: 20px; + box-sizing: border-box; +} +.server_list__icon img { + width: 1.625rem; + height: auto; + margin-left: 0.6875rem; + margin-top: 0.87rem; + margin-right: auto; + border-radius: 0; +} + +.conv_list { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + width: 240px; + height: 100vh; + display: flex; + flex-direction: column; + position: absolute; + overflow-y: scroll; + left: 70px; + top: 60px; + gap: 2px; + background-color: #2f3136; + color: #b9bbbe; + overflow-x: hidden; +} +.conv_list input[type=text] { + position: fixed; + top: -10px; + min-height: 20px; + margin-top: 25px; + border-radius: 3px; + border: none; + float: none; + display: block; + text-align: left; + width: 210px; + margin-left: 10px; + padding-left: 10px; + background-color: #202225; + color: white; + z-index: 11; +} +.conv_list img { + width: 20px; + height: 20px; + position: fixed; + right: -207px; + top: -20px; +} +.conv_list__select { + margin: 0px auto; + width: 224px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + color: #96989d; +} +.conv_list__select--home { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + margin: 0px auto; + width: 224px; + height: 42px; + background-color: #42464d; + color: #dcddde; + border-radius: 4px; +} +.conv_list__friend { + margin: 0px auto; + width: 224px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + color: #96989d; +} +.conv_list__friend__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; +} +.conv_list__friend__status--dND { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + color: #18191b; + background-color: red; + position: relative; + right: 113px; + top: 10px; +} +.conv_list__friend__status--dND p { + color: #2f3136; + position: relative; + top: -42px; + right: 3.5px; + font-size: 1.8rem; +} +.conv_list__friend img { + height: 30px; + width: 30px; + position: relative; + left: 5px; + top: 0px; + border-radius: 50%; +} +.conv_list__friend p { + padding-left: 5px; +} +.conv_list h1 { + position: relative; + left: 13px; + font-size: 10px; + font-weight: 100; +} + +.conv_list__select img { + height: 30px; + width: 30px; + position: relative; + left: 5px; + top: 0px; + padding-right: 10px; +} + +.conv_list__select--home img { + height: 40px; + width: 40px; + position: relative; + left: 1px; + top: 0px; +} + +.home { + width: 100%; + height: 100vh; + position: absolute; + left: 310px; + top: 0px; + background-color: #36393f; + display: flex; + flex-direction: column; + overflow-y: scroll; +} +.home__card { + position: fixed; + left: 70px; + height: 50px; + background-color: #36393f; + display: flex; + align-items: center; + z-index: 10; + width: 100vw; + border-bottom: solid rgba(0, 0, 0, 0.363) 1px; +} +.home__card h1 { + position: fixed; + left: 360px; +} +.home__card img { + height: 40px; + width: 40px; + position: fixed; + left: 320px; + top: 2 px; +} +.home h1 { + color: white; + font-size: 1.6rem; +} +.home__stage_list { + position: absolute; + top: 100px; + left: 80px; + height: 100%; + min-width: 70vw; + display: flex; + flex-direction: column; + overflow-y: scroll; + gap: 40px; +} +.home__stage_list h1 { + font-size: 2rem; +} +.home__stage_list__stages { + width: 65%; + background-color: #2f3136; + border-radius: 7px; + position: relative; + display: flex; + flex-wrap: wrap; + flex-direction: row; + min-height: 100px; +} +.home__stage_list__stages img { + border-radius: 50%; + height: 20px; + width: 20px; +} +.home__stage_list__stages p { + position: relative; + bottom: 0px; + color: #dcddde; +} +.home__stage_list__stages__friend { + height: 30px; + border-bottom: 1px solid #36393f; + display: flex; + flex-direction: row; + align-items: center; + gap: 17px; + width: 100%; +} +.home__stage_list__stages__friend img { + position: relative; + left: 10px; +} +.home__stage_list__stages__server { + height: 70px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +} +.home__stage_list__stages__server p { + font-size: 1.125rem; + line-height: 0.5rem; +} +.home__stage_list__stages__server img { + box-sizing: border-box; + height: 30px; + width: 30px; + border-radius: 5px; + position: relative; + left: 10px; +} +.home__stage_list__stages__server__listiner { + min-height: 1.4rem; + background-color: #202225; + color: rgba(185, 187, 190, 0.662745098); + height: 10px; + position: absolute; + right: 30px; + border-radius: 10px; + display: flex; + align-items: center; + gap: 7px; +} +.home__stage_list__stages__server__listiner img { + width: 20px; + height: 20px; + border-radius: 50%; + position: relative; + left: 4px; +} +.home__stage_list__stages__title { + position: relative; + bottom: 10px; +} +.home__stage_list__stages__title h1 { + color: #c5c7c9; + font-size: 1.6rem; + position: relative; + left: 10px; +} +.home__stage_list__stages__speakers { + position: relative; + left: 5px; + min-width: 100px; + height: 30px; + display: grid; + width: 90%; + height: 70px; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); + -moz-column-gap: 10%; + column-gap: 10%; + color: #b9bbbe; +} +.home__stage_list__stages__speakers__speaker { + width: 200px; + height: 10px; + display: flex; + align-items: center; + color: #b9bbbe; +} +.home__stage_list__stages__speakers img { + border-radius: 50%; +} + +.activity_feed { + color: #c5c7c9; + min-width: 416px; + max-width: 416px; + height: 100%; + position: absolute; + right: 0px; + top: 0px; + background-color: #36393f; + border-left: solid rgba(150, 152, 157, 0.1843137255) 1px; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: scroll; +} +.activity_feed h1 { + padding-left: 20px; + align-self: flex-start; +} +.activity_feed__activity { + margin-top: 20px; + width: 380px; + min-height: 350px; + border-radius: 10px; + background-color: #2f3136; + overflow-y: scroll; +} +.activity_feed__activity img { + border-radius: 50%; + height: 35px; + width: 35px; +} +.activity_feed__activity__profile { + position: relative; + gap: 10px; + border-radius: 10px; + width: 350px; + margin: 5px auto; + display: flex; + align-items: center; +} +.activity_feed__activity__profile__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #130e0e; + position: relative; + right: 190px; + top: 10px; +} +.activity_feed__activity__server { + position: relative; + background-color: #36393f; + width: 350px; + min-height: 258px; + border-radius: 10px; + width: 350px; + margin: 5px auto; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0px; +} +.activity_feed__activity__server__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; +} +.activity_feed__activity__server__screen_share { + width: 350px; + position: absolute; + left: 0px; + top: 60px; +} +.activity_feed__activity__server__screen_share img { + height: auto; + width: 350px; + border-radius: 10px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} +.activity_feed__activity__par_container { + display: flex; + flex-direction: row; + width: 70px; + height: 100px; + position: relative; + left: 270px; + bottom: 60px; + overflow: hidden; +} +.activity_feed__activity__par_container__participants { + position: relative; + width: 10px; + height: 30px; + border-radius: 50%; +} +.activity_feed__activity__par_container__participants img { + border: #202225 solid 3px; + width: 30px; + height: 30px; + border-radius: 50%; +} + +body { + overflow: hidden; +} + +.profile { + position: absolute; + left: 70px; + bottom: 0px; + margin: 0px auto; + width: 240px; + height: 42px; + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; + color: #96989d; + background-color: #292b2f; +} +.profile__status { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; +} +.profile img { + height: 30px; + width: 30px; + position: relative; + left: 5px; + top: 0px; + border-radius: 50%; +} +.profile p { + padding-left: 5px; +} + +body { + background-color: #2f3136; +} + +::-webkit-scrollbar { + width: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #18191b; + border-radius: 20px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/idan/style.css.map b/01-HTML-CSS/07-BEM/HW/idan/style.css.map new file mode 100644 index 000000000..47c5ce51d --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/idan/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/idan/style.scss b/01-HTML-CSS/07-BEM/HW/idan/style.scss new file mode 100644 index 000000000..c772a8534 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/idan/style.scss @@ -0,0 +1,549 @@ +//12:58 start i wonder how i will once im done +$widthh: 100vw 710px; +h1{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + +} +p{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + +} +.light{ + font-weight: lighter; + color: #b9bbbe94; +} +.descriptor{ + font-size: 10px; +} +.server_list{ + width: 70px; + height: 100vh; + position: fixed; + left: 0px; + top: 0px; + display: flex; + gap: 0.625rem; + flex-direction: column; + background-color: #202225; + overflow-y: scroll; + + img{ + height: 3rem; + width: 3rem; + margin: auto; + border-radius: 50%; + } + &__spacer{ + width: 2rem; + border-bottom: #363a3f solid 2px; + margin:auto; + } + &__icon{ + + min-height: 3rem; + min-width: 3rem; + margin: 10px auto 0px; + border-radius: 33%; + background-color: #5865f2; + padding-bottom: 20px; + box-sizing: border-box; + + img{ + width: 1.625rem; + height: auto; + margin-left: 0.6875rem; + margin-top: 0.87rem; + margin-right: auto; + border-radius: 0; + + } + + } + + +} +//if you zoom out funny stuff happan yes funny its 2 am also i dont know why but only margin auto works which is something im guessing its a problem on my end because i cant think of any other reason i have a tendency to break things +.conv_list{ + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + width: 240px; + height: 100vh; + display: flex; + flex-direction: column; + position: absolute; + overflow-y: scroll; + left: 70px; + top: 60px; + gap: 2px; + background-color: #2f3136; + color: #b9bbbe; + overflow-x: hidden; + + input[type=text] { + position: fixed; + top: -10px; + min-height: 20px; + margin-top: 25px; + border-radius: 3px; + border: none; + float: none; + display: block; + text-align: left; + width: 210px; + margin-left: 10px; + padding-left: 10px; + background-color: #202225; + color: white; + z-index: 11; + //i just now noticed its not a real search bar + } + img{ + width: 20px; + height: 20px; + position: fixed; + right: -207px; + top: -20px; + //its a search icon yes also i know it doesnt it stopped existing when this code turned into trash which is the oposite of what im supposed to be doing in this exercise but please i am so tired + } + &__select{ + margin: 0px auto; + width: 224px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + color: #96989d; + &--home{ + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + margin: 0px auto; + width: 224px; + height: 42px; + background-color: #42464d; + color:#dcddde; + border-radius: 4px; + } + + } + &__friend{ + margin: 0px auto; + width: 224px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + color: #96989d; + &__status{ + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; + &--dND { + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + color: #18191b; + background-color: red; + position: relative; + right: 113px; + top: 10px; + p{ + color: #2f3136; + position: relative; + top: -42px; + right: 3.5px; + font-size: 1.8rem; + } + } + } + + img{ + height: 30px; + width: 30px; + position: relative; + left: 5px; + top:0px; + border-radius: 50%; + } + + p{ + padding-left: 5px; + } + } + h1{ + position:relative; + left: 13px; + font-size: 10px; + font-weight: 100; + } + + +} +.conv_list__select img{ + height: 30px; + width: 30px; + position: relative; + left: 5px; + top:0px; + padding-right: 10px ; +} +.conv_list__select--home img{ + height: 40px; + width: 40px; + position: relative; + left: 1px; + top: 0px; +} +//ignore this ^^ it exists because its late +.home{ + width: 100%; + height: 100vh; + position: absolute; + left: 310px; + top: 0px; + background-color: #36393f; + display: flex; + flex-direction: column; + overflow-y: scroll; + &__card{ + position: fixed; + left: 70px; + height: 50px; + background-color: #36393f; + display: flex; + align-items: center; + z-index: 10; + width: 100vw; + border-bottom: solid rgba(0, 0, 0, 0.363) 1px; + h1{ + position: fixed; + left: 360px; + } + img{ + height: 40px; + width: 40px; + position: fixed; + left: 320px; + top: 2 + px; + } + } + h1{ + color: white; + font-size: 1.6rem; + } + + &__stage_list{ + position: absolute; + top: 100px; + left: 80px; + height: 100%; + min-width: 70vw; + display: flex; + flex-direction: column; + overflow-y: scroll; + gap: 40px; + + h1{ + font-size: 2rem; + } + &__stages{ + width: 65%; + background-color: #2f3136; + border-radius: 7px; + position: relative; + display: flex; + flex-wrap: wrap; + flex-direction: row; + img{ + border-radius: 50%; + height: 20px; + width: 20px; + } + min-height: 100px; + p{ + position: relative; + bottom: 0px; + color: #dcddde; + } + &__friend{ + + height: 30px; + border-bottom: 1px solid #36393f; + display: flex; + flex-direction: row; + align-items: center; + gap: 17px; + width: 100%; + img{ + position: relative; + left: 10px; + } + + + + } + &__server{ + height: 70px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; + p{ + font-size: 1.125rem; + line-height: 0.5rem; + } + img{ + + box-sizing: border-box; + height: 30px; + width: 30px; + border-radius: 5px; + position: relative; + left: 10px; + } + &__listiner{ + min-height: 1.4rem; + background-color: #202225; + color: #b9bbbea9; + height: 10px; + position: absolute; + right: 30px; + border-radius: 10px; + display: flex; + align-items: center; + gap: 7px; + + img{ + width:20px; + height: 20px; + border-radius:50%; + position: relative; + left: 4px; + } + } + } + &__title{ + position: relative; + bottom: 10px; + h1{ + color: #c5c7c9; + font-size: 1.6rem; + position: relative; + left: 10px; + } + } + &__speakers{ + position: relative; + left: 5px; + min-width: 100px; + height: 30px; + display: grid; + width: 90%; + height: 70px; + grid-template-rows: repeat(2,1fr); + grid-template-columns: repeat(3,1fr); + column-gap: 10%; + color : #b9bbbe; + &__speaker{ + width: 200px; + height: 10px; + display: flex; + align-items: center; + color: #b9bbbe; + } + img{ + border-radius: 50%; + } + + } + + + } + } + + +} +.activity_feed{ + color: #c5c7c9; + min-width: 416px; + max-width: 416px; + height: 100%; + position: absolute; + right: 0px; + top: 0px; + background-color: #36393f ; + border-left: solid #96989d2f 1px; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: scroll; + h1{ + padding-left: 20px; + align-self: flex-start; + } + &__activity{ + margin-top: 20px; + width: 380px; + min-height: 350px; + border-radius: 10px; + background-color: #2f3136; + overflow-y: scroll; + img{ + border-radius: 50%; + height: 35px; + width: 35px; + } + &__profile{ + position: relative; + gap: 10px; + border-radius: 10px; + width: 350px; + margin: 5px auto; + display: flex; + align-items: center; + &__status{ + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #130e0e; + position: relative; + right: 190px; + top: 10px; + } + //im not going to add joe biden in game with hunter biden i know its missing stuff at the top i dont have time + } + &__server{ + position: relative; + background-color: #36393f; + width: 350px; + min-height: 258px; + border-radius: 10px; + width: 350px; + margin: 5px auto; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0px; + &__status{ + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; + } + &__screen_share{ + width: 350px; + position: absolute; + left: 0px; + top: 60px; + img{ + + height: auto; + width: 350px; + border-radius: 10px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; + + } + } + } + &__par_container{ + display: flex; + flex-direction: row; + width: 70px; + height: 100px; + position: relative; + left: 270px; + bottom: 60px; + overflow: hidden; + &__participants{ + position: relative; + width: 10px; + height: 30px; + border-radius: 50%; + + img{ + border: #202225 solid 3px ; + width: 30px; + height: 30px; + border-radius: 50%; + } + } + } + + + } + +} + + +body{ + overflow: hidden; + +} + + +.profile{ + position: absolute; + left: 70px; + bottom: 0px; + margin: 0px auto; + width: 240px; + height: 42px; + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; + color: #96989d; + background-color: #292b2f; + &__status{ + height: 10px; + width: 10px; + border: solid #2f3136 2px; + border-radius: 50%; + background-color: #3ba55c; + position: relative; + right: 88px; + top: 10px; + } + img{ + height: 30px; + width: 30px; + position: relative; + left: 5px; + top:0px; + border-radius: 50%; + } + p{ + padding-left: 5px; + } +} +body{ + background-color: #2f3136; +} + + + +::-webkit-scrollbar { + width: 3px; + //works on chrome works for me +} + +::-webkit-scrollbar-thumb:hover { + background: #18191b; + border-radius: 20px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/instructions.md b/01-HTML-CSS/07-BEM/HW/instructions.md new file mode 100644 index 000000000..d6063c4ab --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/instructions.md @@ -0,0 +1,4 @@ +create a BEM design to one of the following levels, and build with html and scss: +1) whatsapp +2) instegram +3) discord diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/dist/style.css b/01-HTML-CSS/07-BEM/HW/john-ben/dist/style.css new file mode 100644 index 000000000..9b6fa3118 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/john-ben/dist/style.css @@ -0,0 +1,332 @@ +.big_container { + display: flex; + width: 100vw; + height: 1000px; +} + +* { + padding: 3px; + margin: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +.container { + width: 390px; + margin-left: 350px; + margin-top: 100px; + border-radius: 10px; +} + +.chat { + display: flex; + flex-direction: column; + height: 700px; + background: url("img/john.jpeg"); + background: #036055; + border-radius: 15px; +} +.chat__header { + display: flex; + cursor: pointer; +} +.chat__header__profile { + width: 100%; + background: #036055; + display: flex; + align-items: center; + height: 60px; + padding: 0px 10px; + position: relative; +} +.chat__header__profile__left { + flex: 1; +} +.chat__header__profile__left__pic { + width: 50px; + display: inline-block; + border-radius: 50%; + margin-left: 33px; +} +.chat__header__profile__left__fleche { + display: inline-block; + width: 30px; + position: absolute; + top: 19px; + cursor: pointer; +} +.chat__header__profile__left h2 { + display: inline-block; + line-height: 45px; + vertical-align: bottom; + color: #fff; + font-size: 20px; +} +.chat__header__profile__left span { + color: #ccc; + position: absolute; + top: 40px; + left: 100px; + font-size: 14px; +} +.chat__header__profile__right { + display: flex; +} +.chat__header__profile__right__icon { + width: 25px; + margin-left: 15px; +} +.chat__footer { + display: flex; + justify-content: center; + align-items: center; + border-radius: 60px; + position: relative; + cursor: pointer; +} +.chat__footer__emoji { + display: block; + width: 35px; + height: 35px; + position: absolute; + left: 10px; + top: 12px; +} +.chat__footer textarea { + display: block; + flex: 1; + width: 100%; + height: 50px; + border-radius: 60px; + margin: 5px; + padding: 10px; + outline: none; + font-size: 19px; + padding-left: 40px; + padding-right: 90px; + border: 2px solid #ccc; + color: #555; + resize: none; +} +.chat__footer__icons { + position: absolute; + right: 80px; + top: 10px; +} +.chat__footer img { + display: inline-block; + width: 35px; + height: 35px; + margin-left: 5px; +} +.chat__footer__micro { + display: block; + width: 85px; + height: 85px; + margin-right: 15px; +} +.chat__box { + background: url("../img/john.jpeg"); + padding-left: 0px; + overflow-y: scroll; + overflow-x: hidden; + flex: 1; +} +.chat__box__chat-r { + display: flex; +} +.chat__box__chat-r__sp { + flex: 1; +} +.chat__box__chat-r__mess { + display: block; + max-width: 325px; + background: #F7FCF6; + padding: 5px; + border-radius: 10px; + margin: 10px 0px; + cursor: pointer; + background: #E2FFC7; +} +.chat__box__chat-r__mess__img_chat { + width: 280px; +} +.chat__box__chat-r__mess__check { + display: flex; + float: left; +} +.chat__box__chat-r__mess__check img { + width: 20px; + margin: auto; +} +.chat__box__chat-l { + display: flex; +} +.chat__box__chat-l__mess { + display: block; + max-width: 325px; + background: #f7fcf6; + padding: 5px; + border-radius: 10px; + margin: 10px 0px; + cursor: pointer; +} +.chat p { + word-break: break-all; + font-size: 16px; +} +.chat .chat-box .mess-r { + background: #e2ffc7; +} +.chat .chat-box .emoji { + width: 20px; +} +.chat__box__chat-l__mess__check { + display: flex; + float: left; +} +.chat__box__chat-l__mess__check img { + width: 20px; + margin: auto; +} +.chat__box__chat-l__sp { + flex: 1; +} +.chat__box p { + word-break: break-all; + font-size: 16px; +} +.chat__box span { + color: #888; + font-size: 12px; + font-weight: 700px; +} +.chat__box *::-webkit-scrollbar { + width: 2px; +} +.chat__box *::-webkit-scrollbar-track { + background: #f1f1f1; +} +.chat__box *::-webkit-scrollbar-thumb { + background: #aaa; +} +.chat__box *::-webkit-scrollbar-thumb:hover { + background: #555; +} + +.container2 { + width: 390px; + margin-left: 300px; + margin-top: 100px; + border-radius: 10px; +} + +.chat2 { + display: flex; + flex-direction: column; + height: 700px; + background-color: white; + background: #036055; + border-radius: 15px; +} +.chat2__header { + display: flex; + cursor: pointer; +} +.chat2__header__profile { + width: 100%; + background: #036055; + display: flex; + align-items: center; + height: 60px; + padding: 0px 10px; + position: relative; +} +.chat2__header__profile__left { + flex: 1; +} +.chat2__header__profile__left__pic { + width: 50px; + display: inline-block; + border-radius: 50%; + margin-left: 33px; +} +.chat2__header__profile__left__fleche { + display: inline-block; + width: 30px; + position: absolute; + top: 19px; + cursor: pointer; +} +.chat2__header__profile__left h2 { + display: inline-block; + line-height: 45px; + vertical-align: bottom; + color: #fff; + font-size: 20px; +} +.chat2__header__profile__left span { + color: #ccc; + position: absolute; + top: 40px; + left: 100px; + font-size: 14px; +} +.chat2__header__profile__right { + display: flex; +} +.chat2__header__profile__right__icon { + width: 25px; + margin-left: 15px; +} +.chat2 .chat-box2 { + display: flex; + width: 378px; + flex-direction: column; + background-color: #036055; + padding-left: 0px; + overflow-y: scroll; + overflow-x: hidden; + border-radius: 10px; +} +.chat2 .section { + display: flex; + width: 378px; + height: 78px; + border-style: solid; + border-color: #036055; + background-color: white; +} +.chat2 .section__left { + display: flex; + width: 60%; + height: 81px; +} +.chat2 .section__left img { + width: 50px; + height: 50px; + border-radius: 50%; + margin-left: 25px; + margin-top: 10px; +} +.chat2 .section__left h2 { + color: #036055; + font-size: 20px; + margin-top: 15px; +} +.chat2 .section__left span { + color: #036055; + display: inline-block; + font-size: 14px; + margin-top: 17px; + margin-right: 30px; +} +.chat2 .section__right { + display: flex; + width: 40%; + height: 81px; +} +.chat2 .section__right img { + height: 30px; + margin: auto; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/arrow.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/arrow.png new file mode 100644 index 000000000..15b604bea Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/arrow.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/attach file.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/attach file.png new file mode 100644 index 000000000..e51be371b Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/attach file.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/bg.jpeg b/01-HTML-CSS/07-BEM/HW/john-ben/img/bg.jpeg new file mode 100644 index 000000000..734d6141e Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/bg.jpeg differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/camera.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/camera.png new file mode 100644 index 000000000..0cb2d51dc Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/camera.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/check-1.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/check-1.png new file mode 100644 index 000000000..b803095dd Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/check-1.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/check-2.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/check-2.png new file mode 100644 index 000000000..df9de4fcd Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/check-2.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/emo.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/emo.png new file mode 100644 index 000000000..8f43169f7 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/emo.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/emoji-1.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/emoji-1.png new file mode 100644 index 000000000..91aacc328 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/emoji-1.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/emoji-2.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/emoji-2.png new file mode 100644 index 000000000..536413429 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/emoji-2.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/heart.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/heart.png new file mode 100644 index 000000000..b453c4d40 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/heart.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/john.jpeg b/01-HTML-CSS/07-BEM/HW/john-ben/img/john.jpeg new file mode 100644 index 000000000..ce31b1c51 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/john.jpeg differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/mic.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/mic.png new file mode 100644 index 000000000..864c0f338 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/mic.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/more.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/more.png new file mode 100644 index 000000000..32c0d53e8 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/more.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/phone.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/phone.png new file mode 100644 index 000000000..6a8b4658c Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/phone.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/post2.jpg b/01-HTML-CSS/07-BEM/HW/john-ben/img/post2.jpg new file mode 100644 index 000000000..0de86e0dd Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/post2.jpg differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/pp.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/pp.png new file mode 100644 index 000000000..2b8318559 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/pp.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/video.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/video.png new file mode 100644 index 000000000..6f2cd4052 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/video.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/img/video2.png b/01-HTML-CSS/07-BEM/HW/john-ben/img/video2.png new file mode 100644 index 000000000..2ae010bb0 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/john-ben/img/video2.png differ diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/style.css b/01-HTML-CSS/07-BEM/HW/john-ben/style.css new file mode 100644 index 000000000..4efb611cf --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/john-ben/style.css @@ -0,0 +1,186 @@ +* { + padding: 3px; + margin: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +.container { + width: 390px; + margin: auto; + border-radius: 10px; +} + +.chat { + display: flex; + flex-direction: column; + height: 700px; + background: url("img/john.jpeg"); + background: #036055; + border-radius: 15px; +} +.chat__header { + display: flex; + cursor: pointer; +} +.chat__header__profile { + width: 100%; + background: #036055; + display: flex; + align-items: center; + height: 60px; + padding: 0px 10px; + position: relative; +} +.chat__header__profile__left { + flex: 1; +} +.chat__header__profile__left__pic { + width: 50px; + display: inline-block; + border-radius: 50%; + margin-left: 33px; +} +.chat__header__profile__left__fleche { + display: inline-block; + width: 30px; + position: absolute; + top: 19px; + cursor: pointer; +} +.chat__header__profile__left h2 { + display: inline-block; + line-height: 45px; + vertical-align: bottom; + color: #fff; + font-size: 20px; +} +.chat__header__profile__left span { + color: #ccc; + position: absolute; + top: 40px; + left: 100px; + font-size: 14px; +} +.chat__header__profile__right { + display: flex; +} +.chat__header__profile__right__icon { + width: 25px; + margin-left: 15px; +} +.chat__footer { + display: flex; + justify-content: center; + align-items: center; + border-radius: 60px; + position: relative; + cursor: pointer; +} +.chat__footer__emoji { + display: block; + width: 35px; + height: 35px; + position: absolute; + left: 10px; + top: 12px; +} +.chat__footer textarea { + display: block; + flex: 1; + width: 100%; + height: 50px; + border-radius: 60px; + margin: 5px; + padding: 10px; + outline: none; + font-size: 19px; + padding-left: 40px; + padding-right: 90px; + border: 2px solid #ccc; + color: #555; + resize: none; +} +.chat__footer__icons { + position: absolute; + right: 80px; + top: 10px; +} +.chat__footer img { + display: inline-block; + width: 35px; + height: 35px; + margin-left: 5px; +} +.chat__footer__micro { + display: block; + width: 85px; + height: 85px; + margin-right: 15px; +} +.chat .chat-box { + background: url("../img/john.jpeg"); + padding-left: 0px; + overflow-y: scroll; + overflow-x: hidden; + flex: 1; +} +.chat .chat-box .img_chat { + width: 280px; +} +.chat .chat-r { + display: flex; +} +.chat .chat-r .sp { + flex: 1; +} +.chat .chat-l { + display: flex; +} +.chat .chat-l .sp { + flex: 1; +} +.chat .chat-box .mess { + display: block; + max-width: 325px; + background: #f7fcf6; + padding: 5px; + border-radius: 10px; + margin: 10px 0px; + cursor: pointer; +} +.chat p { + word-break: break-all; + font-size: 16px; +} +.chat .chat-box .mess-r { + background: #e2ffc7; +} +.chat .chat-box .emoji { + width: 20px; +} +.chat .chat-box .check { + display: flex; + float: left; +} +.chat .chat-box .check img { + width: 20px; + margin: auto; +} +.chat .chat-box .check span { + color: #888; + font-size: 12px; + font-weight: 700px; +} +.chat *::-webkit-scrollbar { + width: 2px; +} +.chat *::-webkit-scrollbar-track { + background: #f1f1f1; +} +.chat *::-webkit-scrollbar-thumb { + background: #aaa; +} +.chat *::-webkit-scrollbar-thumb:hover { + background: #555; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/style.css.map b/01-HTML-CSS/07-BEM/HW/john-ben/style.css.map new file mode 100644 index 000000000..a3a718914 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/john-ben/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/style.scss b/01-HTML-CSS/07-BEM/HW/john-ben/style.scss new file mode 100644 index 000000000..71ee648f1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/john-ben/style.scss @@ -0,0 +1,194 @@ +* { + padding: 3px; + margin: 0; + box-sizing: border-box; + font-family: sans-serif; +} +.container { + width: 390px; + margin: auto; + border-radius: 10px; +} +.chat { + display: flex; + flex-direction: column; + height: 700px; + background: url("img/john.jpeg"); + background: #036055; + border-radius: 15px; + + &__header { + display: flex; + cursor: pointer; + &__profile { + width: 100%; + background: #036055; + display: flex; + align-items: center; + height: 60px; + padding: 0px 10px; + position: relative; + + &__left { + flex: 1; + + &__pic { + width: 50px; + display: inline-block; + border-radius: 50%; + margin-left: 33px; + } + &__fleche { + display: inline-block; + width: 30px; + position: absolute; + top: 19px; + cursor: pointer; + } + h2 { + display: inline-block; + line-height: 45px; + vertical-align: bottom; + color: #fff; + font-size: 20px; + } + span { + color: #ccc; + position: absolute; + top: 40px; + left: 100px; + font-size: 14px; + } + } + &__right { + display: flex; + + &__icon { + width: 25px; + margin-left: 15px; + } + } + } + } + + &__footer { + display: flex; + justify-content: center; + align-items: center; + border-radius: 60px; + position: relative; + cursor: pointer; + + &__emoji { + display: block; + width: 35px; + height: 35px; + position: absolute; + left: 10px; + top: 12px; + } + textarea { + display: block; + flex: 1; + width: 100%; + height: 50px; + border-radius: 60px; + margin: 5px; + padding: 10px; + outline: none; + font-size: 19px; + padding-left: 40px; + padding-right: 90px; + border: 2px solid #ccc; + color: #555; + resize: none; + } + &__icons { + position: absolute; + right: 80px; + top: 10px; + } + img { + display: inline-block; + width: 35px; + height: 35px; + margin-left: 5px; + } + &__micro { + display: block; + width: 85px; + height: 85px; + margin-right: 15px; + } + } + .chat-box { + background: url("../img/john.jpeg"); + padding-left: 0px; + overflow-y: scroll; + overflow-x: hidden; + flex: 1; + } + .chat-box .img_chat { + width: 280px; + } + + .chat-r { + display: flex; + } + .chat-r .sp { + flex: 1; + } + + .chat-l { + display: flex; + } + .chat-l .sp { + flex: 1; + } + + .chat-box .mess { + display: block; + max-width: 325px; + background: #f7fcf6; + padding: 5px; + border-radius: 10px; + margin: 10px 0px; + cursor: pointer; + } + p { + word-break: break-all; + font-size: 16px; + } + .chat-box .mess-r { + background: #e2ffc7; + } + .chat-box .emoji { + width: 20px; + } + .chat-box .check { + display: flex; + float: left; + } + .chat-box .check img { + width: 20px; + margin: auto; + } + .chat-box .check span { + color: #888; + font-size: 12px; + font-weight: 700px; + } + + *::-webkit-scrollbar { + width: 2px; + } + *::-webkit-scrollbar-track { + background: #f1f1f1; + } + *::-webkit-scrollbar-thumb { + background: #aaa; + } + *::-webkit-scrollbar-thumb:hover { + background: #555; + } +} diff --git a/01-HTML-CSS/07-BEM/HW/john-ben/whatsapp.html b/01-HTML-CSS/07-BEM/HW/john-ben/whatsapp.html new file mode 100644 index 000000000..e44a5f363 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/john-ben/whatsapp.html @@ -0,0 +1,250 @@ + + + + + + + whatsapp + + + +
+
+
+
+
+
+ + +

john

+ online +
+
+ + + +
+
+
+
+
+
+
+

cava john

+
+ 4:00 PM + +
+
+
+
+
+

+ Oh! cava? +

+
+ 4:00 PM +
+
+
+
+
+
+
+

oui , et toi ? +

+
+ 4:00 PM + +
+
+
+
+
+

top! tu fais quoi?

+
+ 4:00 PM +
+
+
+
+
+
+
+

+ je suis au centre commercial tu veux venir? +

+
+ 4:00 PM +
+
+
+
+
+

+ oui . envoi moi ta localisation +

+
+ 4:00 PM +
+
+
+
+
+
+
+ +
+ 4:00 PM + +
+
+
+
+
+
+

Ne tarde pas ca va bientot fermer.

+
+ 4:10 PM + +
+
+
+
+
+

+ J'arrive t'inquiete . +

+
+ 4:11 PM +
+
+
+
+
+
+
+

je t'attends +

+
+ 4:12 PM + +
+
+
+
+
+ + +
+ +
+ +
+
+
+
+
+
+
+
+ + +

john

+ online +
+
+ + + +
+
+
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+
+
+ profil +

john

+ online +
+
+ video +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shalomcop/dist/style.css b/01-HTML-CSS/07-BEM/HW/shalomcop/dist/style.css new file mode 100644 index 000000000..4fd8e970c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shalomcop/dist/style.css @@ -0,0 +1,8 @@ +body { + width: 600px; +} + +.top_bar { + background-color: blue; + height: 0px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shalomcop/index.html b/01-HTML-CSS/07-BEM/HW/shalomcop/index.html new file mode 100644 index 000000000..788f4c14a --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shalomcop/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
+ +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shalomcop/style.css b/01-HTML-CSS/07-BEM/HW/shalomcop/style.css new file mode 100644 index 000000000..4fd8e970c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shalomcop/style.css @@ -0,0 +1,8 @@ +body { + width: 600px; +} + +.top_bar { + background-color: blue; + height: 0px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shalomcop/style.scss b/01-HTML-CSS/07-BEM/HW/shalomcop/style.scss new file mode 100644 index 000000000..78b7fef1c --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shalomcop/style.scss @@ -0,0 +1,11 @@ +body { + width: 600px; + +} + +.top_bar { + background-color: blue; + // width: 400px; + height: 0px; + +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/.vscode/settings.json b/01-HTML-CSS/07-BEM/HW/shlomi_samai/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shlomi_samai/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/1-whatsapp.png b/01-HTML-CSS/07-BEM/HW/shlomi_samai/1-whatsapp.png new file mode 100644 index 000000000..4064e2de3 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/shlomi_samai/1-whatsapp.png differ diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/Logo.PNG b/01-HTML-CSS/07-BEM/HW/shlomi_samai/Logo.PNG new file mode 100644 index 000000000..55038c796 Binary files /dev/null and b/01-HTML-CSS/07-BEM/HW/shlomi_samai/Logo.PNG differ diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/Shlomi HW_.drawio b/01-HTML-CSS/07-BEM/HW/shlomi_samai/Shlomi HW_.drawio new file mode 100644 index 000000000..e4921e410 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shlomi_samai/Shlomi HW_.drawio @@ -0,0 +1 @@ +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 \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/index.html b/01-HTML-CSS/07-BEM/HW/shlomi_samai/index.html new file mode 100644 index 000000000..a8cd8caf6 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shlomi_samai/index.html @@ -0,0 +1,288 @@ + + + + + + + BEM-shlomi + + + + + +
+
+
+ 22:00 +
+
+ + signal_wifi_4_bar + + + signal_cellular_4_bar + + + battery_full + +
+ +
+
+
+ WhatsApp +
+
+ + search + + + more_vert + +
+
+
+ + photo_camera + +

CHATS

+

STATUS

+

CALLES

+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_made + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_received + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_received + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_received + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_made + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_received + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_received + +
+
+ yesterday 3:20 pm +
+
+
+
+ + videocam + +
+
+
+
+
+
+
+
+ +
+
+
+ Username 01 +
+
+
+ + call_received + +
+
+ yesterday 3:20 pm +
+
+
+
+ + add_call + +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.css b/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.css new file mode 100644 index 000000000..a8c345f70 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.css @@ -0,0 +1,127 @@ +.body { + margin: 0%; +} + +.page { + margin: auto; + border: 1px solid black; + border-radius: 17px; + height: auto; + width: 18vw; + display: flex; + flex-direction: column; + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +.navbar { + background-color: rgb(3, 77, 68); + display: flex; + flex-direction: row; + justify-content: space-between; + border-radius: 17px 17px 0px 0px; + height: 17px; + color: white; + font-size: 15px; + padding-right: 10px; + padding-left: 10px; +} +.navbar__batteryDiv { + display: flex; + font-size: 10px; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 1; +} + +.logoLine { + height: 34px; + background-color: rgb(7, 94, 84); + display: flex; + justify-content: space-between; + color: white; + font-weight: bold; + padding-top: 10px; + padding-left: 5px; +} + +.menu { + color: white; + display: flex; + height: 30px; + background-color: rgb(7, 94, 84); + justify-content: space-around; + vertical-align: text-top; + font-size: 10px; +} + +.camaraLogoPosition { + position: relative; + top: 4px; + opacity: 0.5; +} + +.opacity { + opacity: 0.5; +} + +.calles { + color: white; + display: flex; + height: 30px; + background-color: white; + justify-content: space-between; + vertical-align: text-top; + padding: 5PX; + padding-left: 25px; + padding-right: 25px; +} + +.colorRed { + color: red; +} + +.colorGreen { + color: green; +} + +.colorBlack { + color: black; + font-size: 15px; +} + +.users { + display: flex; + gap: 10px; +} + +.callesAndTime { + display: flex; + padding-bottom: 15px; +} + +.time { + font-size: 11px; +} + +.greenCircle { + width: 30px; + height: 30px; +} + +.callaSeperator { + height: 1px; + width: 14vw; + position: relative; + left: 50px; + opacity: 0.6; + padding-top: 20px; + border-top: 1px solid gray; +} + +.blackEnding { + height: 10px; + background-color: black; + border-radius: 0px 0px 10px 10px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.css.map b/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.css.map new file mode 100644 index 000000000..efaeb5cef --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;ACCJ;;ADGA;EACI,YAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,sBAAA;EACA,8BAAA;ACAJ;;ADGA;EACI,gCAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,gCAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,mBAAA;EACA,kBAAA;ACAJ;ADEI;EACI,aAAA;EACA,eAAA;ACAR;;ADIA;EACE,iEACA;ACFF;;ADQA;EACI,YAAA;EACA,gCAAA;EACA,aAAA;EACA,8BAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;EACA,iBAAA;ACLJ;;ADQA;EACI,YAAA;EACA,aAAA;EACA,YAAA;EACA,gCAAA;EACA,6BAAA;EACA,wBAAA;EACA,eAAA;ACLJ;;ADQA;EACA,kBAAA;EACA,QAAA;EACA,YAAA;ACLA;;ADQA;EACA,YAAA;ACLA;;ADQA;EACI,YAAA;EACA,aAAA;EACA,YAAA;EACA,uBAAA;EACA,8BAAA;EACA,wBAAA;EACA,YAAA;EACA,kBAAA;EACA,mBAAA;ACLJ;;ADQA;EACI,UAAA;ACLJ;;ADOA;EACI,YAAA;ACJJ;;ADOA;EACI,YAAA;EACA,eAAA;ACJJ;;ADOA;EACI,aAAA;EACA,SAAA;ACJJ;;ADOA;EACI,aAAA;EACA,oBAAA;ACJJ;;ADMA;EACI,eAAA;ACHJ;;ADMA;EACI,WAAA;EACA,YAAA;ACHJ;;ADKA;EACI,WAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;EACA,YAAA;EACA,iBAAA;EACA,0BAAA;ACFJ;;ADMA;EACI,YAAA;EACA,uBAAA;EACA,gCAAA;ACHJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.scss b/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.scss new file mode 100644 index 000000000..da600dc9e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/shlomi_samai/style.scss @@ -0,0 +1,133 @@ +.body { + margin:0%; + +} + +.page { + margin: auto; + border:1px solid black; + border-radius: 17px; + height: auto; + width: 18vw; + display: flex; + flex-direction: column; + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +.navbar{ + background-color: rgb(3,77,68); + display: flex; + flex-direction: row; + justify-content: space-between; + border-radius: 17px 17px 0px 0px; + height: 17px; + color: white; + font-size: 15px; + padding-right: 10px; + padding-left: 10px; + + &__batteryDiv{ + display: flex; + font-size: 10px ; + } +} + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 1 +} + +.logoLine{ + height: 34px; + background-color: rgb(7,94,84); + display: flex; + justify-content: space-between; + color: white; + font-weight: bold; + padding-top: 10px; + padding-left: 5px; +} + +.menu{ + color: white; + display: flex; + height: 30px; + background-color: rgb(7,94,84); + justify-content: space-around; + vertical-align: text-top; + font-size: 10px; +} + +.camaraLogoPosition { +position: relative; +top: 4px; +opacity: 0.5; +} + +.opacity { +opacity: 0.5; +} + +.calles { + color: white; + display: flex; + height: 30px; + background-color: white; + justify-content: space-between; + vertical-align: text-top; + padding: 5PX; + padding-left: 25px; + padding-right: 25px; +} + +.colorRed { + color:red ; +} +.colorGreen { + color:green ; +} + +.colorBlack { + color:black ; + font-size: 15px; +} + +.users{ + display: flex; + gap: 10px; +} + +.callesAndTime { + display: flex; + padding-bottom: 15px; +} +.time { + font-size: 11px; +} + +.greenCircle { + width: 30px; + height: 30px; +} +.callaSeperator{ + height: 1px; + width: 14vw; + position: relative; + left: 50px; + opacity: 0.6; + padding-top: 20px; + border-top: 1px solid gray; + +} + +.blackEnding { + height: 10px; + background-color: black; + border-radius: 0px 0px 10px 10px; +} + + diff --git a/01-HTML-CSS/07-BEM/HW/uriel bargil/bem b/01-HTML-CSS/07-BEM/HW/uriel bargil/bem new file mode 100644 index 000000000..82eb35e90 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/uriel bargil/bem @@ -0,0 +1 @@ +https://drive.google.com/file/d/1kHMC8EXdsJnzPRYkT7EiHKSxy9JJKTK-/view?usp=sharing \ No newline at end of file diff --git a/Ayala Perlovich/style.scss b/01-HTML-CSS/07-BEM/HW/uriel bargil/dist/script.js similarity index 100% rename from Ayala Perlovich/style.scss rename to 01-HTML-CSS/07-BEM/HW/uriel bargil/dist/script.js diff --git a/01-HTML-CSS/07-BEM/HW/uriel bargil/dist/style.css b/01-HTML-CSS/07-BEM/HW/uriel bargil/dist/style.css new file mode 100644 index 000000000..ba1c2e0bb --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/uriel bargil/dist/style.css @@ -0,0 +1,148 @@ +body { + margin: 0; + overflow-y: hidden; + overflow-x: hidden; +} + +border-right { + border-right: #3874ce; +} + +.material-symbols-outlined { + color: white; + width: 10px; + align-items: center; + align-content: center; +} + +.container { + background-color: #36393f; + height: 100vh; + width: 100vw; + position: relative; +} + +.header { + height: 5vh; + background-color: #1e2023; + color: white; +} + +.LeftToolBar { + height: 95vh; + width: 5.63vw; + background-color: #202225; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 20px; +} +.LeftToolBar .disImg { + padding-top: 5px; + height: 7.8vh; + width: 3.52vw; + border-radius: 30px; +} + +.SideMenu { + background-color: #2f3136; + width: 18.75vw; + height: 95vh; + position: absolute; + top: 5vh; + left: 5.7vw; + padding: 10px; + border: solid 1px #40444b; +} +.SideMenu #placeH { + background-color: #36393f; + width: 16.8vw; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAAB7CAMAAABjGQ9NAAAAZlBMVEUAAAD8/vz///+Xl5fz9PNvcW/t7u05Ojnb3Nv6+/qampo2Njbe396oqahQUVCOj47HyMdnZ2e9vr11dnXU1dQZGhmIiYjNzs1CQkLn6OexsrEPEA8wMDB9fX1WVlZeX14hIiEoKCg6RtdMAAAEoUlEQVRoge2b6baiMAyAoSIXVFZRFjd4/5ccUK+mQJekVGfOmfy759J+TZukaVodRyWnbr9+yvmg/Ho5iZOmDl32K27oF5vLzyfAUR0OQCjDCLxgVVkFHy5FOOKCAYRldrKGPtYi8C++TiyRfTn5QQ9uy5OrnZr8oKfbhdGRHvlO9y5Lks+lNvmu+mY59LXGoAd6sVS8WXvz6Edkmf/XbhlvO04BD2owCJsfAauXiDTHGbKfJvHrg/jSFFM8C2NJp0Q0c9P1ZEK7JBjTWd0aoq9jspfPT+bpVoyjfG2GrngzYyyXBI7byB1YboI+BTzaX8u/H0UgdjRgR3xXgbLBzedahHRjv/DoSKPJgYOzHZnNLbYWupeCa0TdU7kZZ9obxA40Y/6ZhD6EBK17qaC5I9pBaWAXJaJhxQ26JaC33NShmu5h04bA5tS+4trmsC1+R2vBqqEXDZoKIZEAvk0w1gS2RrOBm1JCIwgxDBvcOu/dlpKDwGnDWtvRoO1d3oqzADl2YKmMlG8DN2HIDAYMu6CgnRuwdFy+fno7CW3KndPbR5E9XMGMKfIFkeTUmVsDNg0NAiurUScFEBs8IhtMnYfy8M170NTUI16ATTM1x/kB0Skjsmmb/3/2v8r+pq1RfQyyUbWnxJwNYwuq4LlATCXHtcx0+3acFXXq4B66orHfRyPUwcLhcoeUhI6BqSHdFBTzQlKtDCZ8KBfjE2xSiRJULLBJMky3kMt1lxi0Ryd8Pj3PHATmueioDA7+BGvjDrHooguYNNdF1+PhiUpdIZI2x1bpblBtwmkug+1xm1kHjSXEo50DVzZBJekpbEmq43PVNUx8gPUpRkyx+UqZtubE0hgvMezEZXsKmnaQnHTjaqnAl2ANCvhcUZppBKg25eeKuP8OUoV8V2kr/35URqbP+CAZ11c/77JA0eXjmwN6GXmQhO+tj5AiZ2s3M/dJZldVzRjO6mTGgLI8nJBdQp1HDh8uuosoq15577ba58LLacNpz6fdsp7vFWXTNGlReJN3AHbhzwFIbiWXgif6F9BPHvdH6A8SNLSiUSa4jRWhi5GfP8Uj3Z50JeLu3W3Gd3qvMRSkQ85RV3W2GzKseP5z5iFz9YdsGx3Vmbt5eLQIjs/97lKlKjpjzesQsxd5B/WiMnLF+N6WuI1OACdmUYNcUm/GqQcjLsezKYTTd9ZzFvU+xInXO+/MnYpoiky29d7wbtkxesoqywQnD/HyLPgIRSCSKG+kuRnbPtyXwS1PeyALB5bhk7Tjg9O+lodBu5qrQrBNzSMV3KLmrWrjtQlXrLhduCDP/Myap1/U/KR8b2hR85Mssv4FmtuDn3dfhG/VcHtr/lV4901rl+YRttf8oNZ80SfUnGhYu4Wn609RGhz1rLYMnPjCUEda1ZoT7+L0RGntyEd6GFFZu9kzYoWorJ1yw6EtCoOjvmDSE7nmls9prfSY9sUzolnJXUfECaRVD3+IMHX+QEVCqLn9goQYbtfHfmX2J0qmv80wgX9GbQc+XHqhbYZzXlbjO62g/Rjb2cM7HsbS7nPofk/dvKujockvYWhyXaVlWRbRr5X9AXvxNONNC7hmAAAAAElFTkSuQmCC"); + background-size: 19px; + background-repeat: no-repeat; + position: relative; + padding-left: 20px; + color: white; + border-radius: 9px; +} +.SideMenu__lines { + color: white; + position: relative; + top: 20px; + display: flex; + justify-content: space-between; + flex-direction: column; +} +.SideMenu__lines__span { + position: relative; + left: 40px; + bottom: 5px; + font-weight: bold; + font-size: 20px; +} + +.RightContainer { + background-color: #36393f; + width: 75.63vw; + height: 95vh; + position: absolute; + top: -1px; + left: 20.38vw; + display: block; +} +.RightContainer .HeadMenu { + background-color: #36393f; + height: 7.45vh; + top: 0px; + position: relative; + align-items: center; + display: flex; + justify-content: space-evenly; +} +.RightContainer .HeadMenu__span { + position: relative; + top: -2px; + left: 20px; + font-weight: bold; + font-size: 20px; + color: white; +} +.RightContainer .Mreact { + background-color: #36393f; + height: 91.68vh; + width: 47.5vw; + top: 0px; + position: relative; + display: flex; + border: solid 1px #40444b; + background-image: url(https://www.uploads.co.il/uploads/images/622737990.png); + background-repeat: no-repeat; + background-size: 500px; + background-position-x: center; + background-position-y: center; +} +.RightContainer .activity { + background-color: #36393f; + height: 91.68vh; + width: 27.97vw; + right: 1.5px; + position: absolute; + top: 7.4vh; + border: solid 1px #40444b; +} +.RightContainer .activity .turn { + max-width: 20vw; + text-align: center; + position: relative; + top: 120px; + left: 40px; +} +.RightContainer .activity .active { + color: white; + font-weight: bold; + position: relative; + left: 8px; +} +.RightContainer .activity .Factivity { + color: #77797e; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/uriel bargil/index.html b/01-HTML-CSS/07-BEM/HW/uriel bargil/index.html new file mode 100644 index 000000000..42f585077 --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/uriel bargil/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + BBC Bargil + + + +
+
+

Discord

+
+ + +
+ + + + + +
+ +
+
+ +
+ +
group + Friends
+
group + Friends
+
group + Friends
+ +
+
+
+
+

group Friends

+
+
+

Online

+
+
+

All

+
+
+

Pending

+
+
+

Blocked

+
+
+

Add Friend

+
+
+ +
+ +
+ +
+
+

Active Now

+
+
+

It's quiet for now...

+

When a friend starts an activity—like + playing a game or hanging out on voice—well show + it here!

+
+ +
+ +
+ + +
+
+ \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/uriel bargil/style.css b/01-HTML-CSS/07-BEM/HW/uriel bargil/style.css new file mode 100644 index 000000000..ba1c2e0bb --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/uriel bargil/style.css @@ -0,0 +1,148 @@ +body { + margin: 0; + overflow-y: hidden; + overflow-x: hidden; +} + +border-right { + border-right: #3874ce; +} + +.material-symbols-outlined { + color: white; + width: 10px; + align-items: center; + align-content: center; +} + +.container { + background-color: #36393f; + height: 100vh; + width: 100vw; + position: relative; +} + +.header { + height: 5vh; + background-color: #1e2023; + color: white; +} + +.LeftToolBar { + height: 95vh; + width: 5.63vw; + background-color: #202225; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 20px; +} +.LeftToolBar .disImg { + padding-top: 5px; + height: 7.8vh; + width: 3.52vw; + border-radius: 30px; +} + +.SideMenu { + background-color: #2f3136; + width: 18.75vw; + height: 95vh; + position: absolute; + top: 5vh; + left: 5.7vw; + padding: 10px; + border: solid 1px #40444b; +} +.SideMenu #placeH { + background-color: #36393f; + width: 16.8vw; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAAB7CAMAAABjGQ9NAAAAZlBMVEUAAAD8/vz///+Xl5fz9PNvcW/t7u05Ojnb3Nv6+/qampo2Njbe396oqahQUVCOj47HyMdnZ2e9vr11dnXU1dQZGhmIiYjNzs1CQkLn6OexsrEPEA8wMDB9fX1WVlZeX14hIiEoKCg6RtdMAAAEoUlEQVRoge2b6baiMAyAoSIXVFZRFjd4/5ccUK+mQJekVGfOmfy759J+TZukaVodRyWnbr9+yvmg/Ho5iZOmDl32K27oF5vLzyfAUR0OQCjDCLxgVVkFHy5FOOKCAYRldrKGPtYi8C++TiyRfTn5QQ9uy5OrnZr8oKfbhdGRHvlO9y5Lks+lNvmu+mY59LXGoAd6sVS8WXvz6Edkmf/XbhlvO04BD2owCJsfAauXiDTHGbKfJvHrg/jSFFM8C2NJp0Q0c9P1ZEK7JBjTWd0aoq9jspfPT+bpVoyjfG2GrngzYyyXBI7byB1YboI+BTzaX8u/H0UgdjRgR3xXgbLBzedahHRjv/DoSKPJgYOzHZnNLbYWupeCa0TdU7kZZ9obxA40Y/6ZhD6EBK17qaC5I9pBaWAXJaJhxQ26JaC33NShmu5h04bA5tS+4trmsC1+R2vBqqEXDZoKIZEAvk0w1gS2RrOBm1JCIwgxDBvcOu/dlpKDwGnDWtvRoO1d3oqzADl2YKmMlG8DN2HIDAYMu6CgnRuwdFy+fno7CW3KndPbR5E9XMGMKfIFkeTUmVsDNg0NAiurUScFEBs8IhtMnYfy8M170NTUI16ATTM1x/kB0Skjsmmb/3/2v8r+pq1RfQyyUbWnxJwNYwuq4LlATCXHtcx0+3acFXXq4B66orHfRyPUwcLhcoeUhI6BqSHdFBTzQlKtDCZ8KBfjE2xSiRJULLBJMky3kMt1lxi0Ryd8Pj3PHATmueioDA7+BGvjDrHooguYNNdF1+PhiUpdIZI2x1bpblBtwmkug+1xm1kHjSXEo50DVzZBJekpbEmq43PVNUx8gPUpRkyx+UqZtubE0hgvMezEZXsKmnaQnHTjaqnAl2ANCvhcUZppBKg25eeKuP8OUoV8V2kr/35URqbP+CAZ11c/77JA0eXjmwN6GXmQhO+tj5AiZ2s3M/dJZldVzRjO6mTGgLI8nJBdQp1HDh8uuosoq15577ba58LLacNpz6fdsp7vFWXTNGlReJN3AHbhzwFIbiWXgif6F9BPHvdH6A8SNLSiUSa4jRWhi5GfP8Uj3Z50JeLu3W3Gd3qvMRSkQ85RV3W2GzKseP5z5iFz9YdsGx3Vmbt5eLQIjs/97lKlKjpjzesQsxd5B/WiMnLF+N6WuI1OACdmUYNcUm/GqQcjLsezKYTTd9ZzFvU+xInXO+/MnYpoiky29d7wbtkxesoqywQnD/HyLPgIRSCSKG+kuRnbPtyXwS1PeyALB5bhk7Tjg9O+lodBu5qrQrBNzSMV3KLmrWrjtQlXrLhduCDP/Myap1/U/KR8b2hR85Mssv4FmtuDn3dfhG/VcHtr/lV4901rl+YRttf8oNZ80SfUnGhYu4Wn609RGhz1rLYMnPjCUEda1ZoT7+L0RGntyEd6GFFZu9kzYoWorJ1yw6EtCoOjvmDSE7nmls9prfSY9sUzolnJXUfECaRVD3+IMHX+QEVCqLn9goQYbtfHfmX2J0qmv80wgX9GbQc+XHqhbYZzXlbjO62g/Rjb2cM7HsbS7nPofk/dvKujockvYWhyXaVlWRbRr5X9AXvxNONNC7hmAAAAAElFTkSuQmCC"); + background-size: 19px; + background-repeat: no-repeat; + position: relative; + padding-left: 20px; + color: white; + border-radius: 9px; +} +.SideMenu__lines { + color: white; + position: relative; + top: 20px; + display: flex; + justify-content: space-between; + flex-direction: column; +} +.SideMenu__lines__span { + position: relative; + left: 40px; + bottom: 5px; + font-weight: bold; + font-size: 20px; +} + +.RightContainer { + background-color: #36393f; + width: 75.63vw; + height: 95vh; + position: absolute; + top: -1px; + left: 20.38vw; + display: block; +} +.RightContainer .HeadMenu { + background-color: #36393f; + height: 7.45vh; + top: 0px; + position: relative; + align-items: center; + display: flex; + justify-content: space-evenly; +} +.RightContainer .HeadMenu__span { + position: relative; + top: -2px; + left: 20px; + font-weight: bold; + font-size: 20px; + color: white; +} +.RightContainer .Mreact { + background-color: #36393f; + height: 91.68vh; + width: 47.5vw; + top: 0px; + position: relative; + display: flex; + border: solid 1px #40444b; + background-image: url(https://www.uploads.co.il/uploads/images/622737990.png); + background-repeat: no-repeat; + background-size: 500px; + background-position-x: center; + background-position-y: center; +} +.RightContainer .activity { + background-color: #36393f; + height: 91.68vh; + width: 27.97vw; + right: 1.5px; + position: absolute; + top: 7.4vh; + border: solid 1px #40444b; +} +.RightContainer .activity .turn { + max-width: 20vw; + text-align: center; + position: relative; + top: 120px; + left: 40px; +} +.RightContainer .activity .active { + color: white; + font-weight: bold; + position: relative; + left: 8px; +} +.RightContainer .activity .Factivity { + color: #77797e; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/HW/uriel bargil/style.scss b/01-HTML-CSS/07-BEM/HW/uriel bargil/style.scss new file mode 100644 index 000000000..aaccbd99e --- /dev/null +++ b/01-HTML-CSS/07-BEM/HW/uriel bargil/style.scss @@ -0,0 +1,175 @@ +body { + margin: 0; + overflow-y: hidden; + overflow-x: hidden; +} + +border-right { + border-right: #3874ce; +} + +.material-symbols-outlined { + color: white; + width: 10px; + align-items: center; + align-content: center; +} + +.container { + background-color: #36393f; + height: 100vh; + width: 100vw; + position: relative; +} + +.header { + height: 5vh; + background-color: #1e2023; + color: white; +} + + +.LeftToolBar { + height: 95vh; + width: 5.63vw; + background-color: #202225; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 20px; + + .disImg { + padding-top: 5px; + height: 7.8vh; + width: 3.52vw; + border-radius: 30px; + } +} + +.SideMenu { + background-color: #2f3136; + width: 18.75vw; + height: 95vh; + position: absolute; + top: 5vh; + left: 5.7vw; + padding: 10px; + border: solid 1px #40444b; + + + + #placeH { + background-color: #36393f; + width: 16.8vw; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAAB7CAMAAABjGQ9NAAAAZlBMVEUAAAD8/vz///+Xl5fz9PNvcW/t7u05Ojnb3Nv6+/qampo2Njbe396oqahQUVCOj47HyMdnZ2e9vr11dnXU1dQZGhmIiYjNzs1CQkLn6OexsrEPEA8wMDB9fX1WVlZeX14hIiEoKCg6RtdMAAAEoUlEQVRoge2b6baiMAyAoSIXVFZRFjd4/5ccUK+mQJekVGfOmfy759J+TZukaVodRyWnbr9+yvmg/Ho5iZOmDl32K27oF5vLzyfAUR0OQCjDCLxgVVkFHy5FOOKCAYRldrKGPtYi8C++TiyRfTn5QQ9uy5OrnZr8oKfbhdGRHvlO9y5Lks+lNvmu+mY59LXGoAd6sVS8WXvz6Edkmf/XbhlvO04BD2owCJsfAauXiDTHGbKfJvHrg/jSFFM8C2NJp0Q0c9P1ZEK7JBjTWd0aoq9jspfPT+bpVoyjfG2GrngzYyyXBI7byB1YboI+BTzaX8u/H0UgdjRgR3xXgbLBzedahHRjv/DoSKPJgYOzHZnNLbYWupeCa0TdU7kZZ9obxA40Y/6ZhD6EBK17qaC5I9pBaWAXJaJhxQ26JaC33NShmu5h04bA5tS+4trmsC1+R2vBqqEXDZoKIZEAvk0w1gS2RrOBm1JCIwgxDBvcOu/dlpKDwGnDWtvRoO1d3oqzADl2YKmMlG8DN2HIDAYMu6CgnRuwdFy+fno7CW3KndPbR5E9XMGMKfIFkeTUmVsDNg0NAiurUScFEBs8IhtMnYfy8M170NTUI16ATTM1x/kB0Skjsmmb/3/2v8r+pq1RfQyyUbWnxJwNYwuq4LlATCXHtcx0+3acFXXq4B66orHfRyPUwcLhcoeUhI6BqSHdFBTzQlKtDCZ8KBfjE2xSiRJULLBJMky3kMt1lxi0Ryd8Pj3PHATmueioDA7+BGvjDrHooguYNNdF1+PhiUpdIZI2x1bpblBtwmkug+1xm1kHjSXEo50DVzZBJekpbEmq43PVNUx8gPUpRkyx+UqZtubE0hgvMezEZXsKmnaQnHTjaqnAl2ANCvhcUZppBKg25eeKuP8OUoV8V2kr/35URqbP+CAZ11c/77JA0eXjmwN6GXmQhO+tj5AiZ2s3M/dJZldVzRjO6mTGgLI8nJBdQp1HDh8uuosoq15577ba58LLacNpz6fdsp7vFWXTNGlReJN3AHbhzwFIbiWXgif6F9BPHvdH6A8SNLSiUSa4jRWhi5GfP8Uj3Z50JeLu3W3Gd3qvMRSkQ85RV3W2GzKseP5z5iFz9YdsGx3Vmbt5eLQIjs/97lKlKjpjzesQsxd5B/WiMnLF+N6WuI1OACdmUYNcUm/GqQcjLsezKYTTd9ZzFvU+xInXO+/MnYpoiky29d7wbtkxesoqywQnD/HyLPgIRSCSKG+kuRnbPtyXwS1PeyALB5bhk7Tjg9O+lodBu5qrQrBNzSMV3KLmrWrjtQlXrLhduCDP/Myap1/U/KR8b2hR85Mssv4FmtuDn3dfhG/VcHtr/lV4901rl+YRttf8oNZ80SfUnGhYu4Wn609RGhz1rLYMnPjCUEda1ZoT7+L0RGntyEd6GFFZu9kzYoWorJ1yw6EtCoOjvmDSE7nmls9prfSY9sUzolnJXUfECaRVD3+IMHX+QEVCqLn9goQYbtfHfmX2J0qmv80wgX9GbQc+XHqhbYZzXlbjO62g/Rjb2cM7HsbS7nPofk/dvKujockvYWhyXaVlWRbRr5X9AXvxNONNC7hmAAAAAElFTkSuQmCC"); + background-size: 19px; + background-repeat: no-repeat; + position: relative; + padding-left: 20px; + color: white; + border-radius: 9px; + + ; + + } + + &__lines { + color: white; + position: relative; + top: 20px; + display: flex; + justify-content: space-between; + flex-direction: column; + + + &__span { + position: relative; + left: 40px; + bottom: 5px; + font-weight: bold; + font-size: 20px; + } + } +} + +.RightContainer { + background-color: #36393f; + width: 75.63vw; + height: 95vh; + position: absolute; + top: -1px; + left: 20.38vw; + display: block; + + .HeadMenu { + background-color: #36393f; + height: 7.45vh; + top: 0px; + + position: relative; + align-items: center; + display: flex; + justify-content: space-evenly; + + &__span { + position: relative; + top: -2px; + left: 20px; + font-weight: bold; + font-size: 20px; + color: white; + } + } + + + .Mreact { + background-color: #36393f; + height: 91.68vh; + width: 47.5vw; + top: 0px; + position: relative; + display: flex; + border: solid 1px #40444b; +background-image: url(https://www.uploads.co.il/uploads/images/622737990.png); +background-repeat: no-repeat; +background-size: 500px; +background-position-x: center; +background-position-y: center; + + + + +} + + .activity { + background-color: #36393f; + height: 91.68vh; + width: 27.97vw; + right: 1.5px; + position: absolute; + top: 7.4vh; + border: solid 1px #40444b; + + + + + .turn { + max-width: 20vw; + text-align: center; + position: relative; + top: 120px; + left: 40px; + } + + .active { + color: white; + font-weight: bold; + position: relative; + left: 8px ; + } + + .Factivity { + color: #77797e; + } + } +} diff --git a/01-HTML-CSS/07-BEM/example/dist/style.css b/01-HTML-CSS/07-BEM/example/dist/style.css new file mode 100644 index 000000000..7b36650e7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/example/dist/style.css @@ -0,0 +1,48 @@ +.addTask { + border-radius: 10px; + background-color: wheat; + width: 700px; + margin: 10px auto; + display: flex; + gap: 10px; + padding: 20px; + box-sizing: border-box; +} +.addTask__input { + flex: auto; + border-radius: 10px; + border: none; + padding: 10px; +} +.addTask__btn { + background-color: teal; + color: white; + border-radius: 10px; + padding: 20px; + border: none; +} + +.tasks { + display: flex; + gap: 10px; + flex-direction: column; + width: 700px; + margin: auto; +} +.tasks__task { + background-color: #e2e26d; + padding: 20px; + border-radius: 10px; +} +.tasks__task p { + background-color: #9e9e4d; + font-size: 1.5rem; +} +.tasks__task--done { + background-color: rgba(226, 226, 109, 0.402); +} + +.bold-large { + font-size: 2rem; + font-weight: 900; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example/index.html b/01-HTML-CSS/07-BEM/example/index.html new file mode 100644 index 000000000..34f669b3d --- /dev/null +++ b/01-HTML-CSS/07-BEM/example/index.html @@ -0,0 +1,28 @@ + + + + + + + + Document + + + + +
+ + + +
+
+
+

buy milk

+

from Motti's super

+
+
clean room
+
cleanup the room
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example/style.css b/01-HTML-CSS/07-BEM/example/style.css new file mode 100644 index 000000000..7db219ea7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/example/style.css @@ -0,0 +1,48 @@ +.addTask { + border-radius: 10px; + background-color: wheat; + width: 700px; + margin: 10px auto; + display: flex; + gap: 10px; + padding: 20px; + box-sizing: border-box; +} +.addTask__input { + flex: auto; + border-radius: 10px; + border: none; + padding: 10px; +} +.addTask__btn { + background-color: teal; + color: white; + border-radius: 10px; + padding: 20px; + border: none; +} + +.tasks { + display: flex; + gap: 10px; + flex-direction: column; + width: 700px; + margin: auto; +} +.tasks__task { + background-color: rgb(226, 226, 109); + padding: 20px; + border-radius: 10px; +} +.tasks__task p { + background-color: rgb(158, 158, 77); + font-size: 1.5rem; +} +.tasks__task--done { + background-color: rgba(226, 226, 109, 0.402); +} + +.bold-large { + font-size: 2rem; + font-weight: 900; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example/style.css.map b/01-HTML-CSS/07-BEM/example/style.css.map new file mode 100644 index 000000000..ed90fa87c --- /dev/null +++ b/01-HTML-CSS/07-BEM/example/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAEA;EACE,mBAAA;EACA,uBAAA;EACA,YALK;EAML,iBAAA;EACA,aAAA;EACA,SAAA;EACA,aAAA;EACA,sBAAA;ACDF;ADGE;EACE,UAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;ACDJ;ADIE;EACE,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,aAAA;EACA,YAAA;ACFJ;;ADMA;EACE,aAAA;EACA,SAAA;EACA,sBAAA;EACA,YAhCK;EAiCL,YAAA;ACHF;ADIE;EACE,oCAAA;EACA,aAAA;EACA,mBAAA;ACFJ;ADII;EACE,mCAAA;EACA,iBAAA;ACFN;ADII;EACE,4CAAA;ACFN;;ADOA;EACE,eAAA;EACA,gBAAA;ACJF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example/style.scss b/01-HTML-CSS/07-BEM/example/style.scss new file mode 100644 index 000000000..4d9548b7c --- /dev/null +++ b/01-HTML-CSS/07-BEM/example/style.scss @@ -0,0 +1,53 @@ +$width:700px; + +.addTask { + border-radius: 10px; + background-color: wheat; + width: $width; + margin: 10px auto; + display: flex; + gap: 10px; + padding: 20px; + box-sizing: border-box; + + &__input { + flex: auto; + border-radius: 10px; + border: none; + padding: 10px; + } + + &__btn { + background-color: teal; + color: white; + border-radius: 10px; + padding: 20px; + border: none; + } +} + +.tasks { + display: flex; + gap: 10px; + flex-direction: column; + width: $width; + margin: auto; + &__task { + background-color: rgb(226, 226, 109); + padding: 20px; + border-radius: 10px; + + p { + background-color: rgb(158, 158, 77); + font-size: 1.5rem; + } + &--done { + background-color: rgba(226, 226, 109, 0.402); + } + } +} + +.bold-large { + font-size: 2rem; + font-weight: 900; +} diff --git a/01-HTML-CSS/07-BEM/example2/index.html b/01-HTML-CSS/07-BEM/example2/index.html new file mode 100644 index 000000000..5deae118c --- /dev/null +++ b/01-HTML-CSS/07-BEM/example2/index.html @@ -0,0 +1,24 @@ + + + + + + + + Document + + + +
+
+
+
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example3/dist/style.css b/01-HTML-CSS/07-BEM/example3/dist/style.css new file mode 100644 index 000000000..c697a363c --- /dev/null +++ b/01-HTML-CSS/07-BEM/example3/dist/style.css @@ -0,0 +1,25 @@ +.header { + background-color: pink; + display: flex; + gap: 10px; + padding: 10px; +} +.header__item { + background-color: teal; + padding: 20px; +} +.header__item--important { + font-size: 2rem; + color: white; +} + +.btn { + background-color: blue; + color: white; + padding: 20px; + border-radius: 10px; + border: none; +} +.btn--danger { + background-color: red; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example3/index.html b/01-HTML-CSS/07-BEM/example3/index.html new file mode 100644 index 000000000..317db05f7 --- /dev/null +++ b/01-HTML-CSS/07-BEM/example3/index.html @@ -0,0 +1,27 @@ + + + + + + + + Document + + + + +
+
a
+
b
+
c
+
d
+
e
+
+ + + + + + + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example3/style.css b/01-HTML-CSS/07-BEM/example3/style.css new file mode 100644 index 000000000..c697a363c --- /dev/null +++ b/01-HTML-CSS/07-BEM/example3/style.css @@ -0,0 +1,25 @@ +.header { + background-color: pink; + display: flex; + gap: 10px; + padding: 10px; +} +.header__item { + background-color: teal; + padding: 20px; +} +.header__item--important { + font-size: 2rem; + color: white; +} + +.btn { + background-color: blue; + color: white; + padding: 20px; + border-radius: 10px; + border: none; +} +.btn--danger { + background-color: red; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example3/style.css.map b/01-HTML-CSS/07-BEM/example3/style.css.map new file mode 100644 index 000000000..4f59d3e0f --- /dev/null +++ b/01-HTML-CSS/07-BEM/example3/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,aAAA;EACA,SAAA;EACA,aAAA;ACCF;ADCE;EACE,sBAAA;EACA,aAAA;ACCJ;ADAI;EACE,eAAA;EACA,YAAA;ACEN;;ADGA;EACE,sBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;ACAF;ADEE;EACE,qBAAA;ACAJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/example3/style.scss b/01-HTML-CSS/07-BEM/example3/style.scss new file mode 100644 index 000000000..dcdee75cf --- /dev/null +++ b/01-HTML-CSS/07-BEM/example3/style.scss @@ -0,0 +1,27 @@ +.header { + background-color: pink; + display: flex; + gap: 10px; + padding: 10px; + + &__item { + background-color: teal; + padding: 20px; + &--important { + font-size: 2rem; + color: white; + } + } +} + +.btn { + background-color: blue; + color: white; + padding: 20px; + border-radius: 10px; + border: none; + + &--danger { + background-color: red; + } +} diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/group 2/dist/style.css b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/dist/style.css new file mode 100644 index 000000000..0f2fb0907 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/dist/style.css @@ -0,0 +1,55 @@ +body { + margin: 0; + direction: rtl; + font-family: "Anek Devanagari", sans-serif; + font-family: "Open Sans", sans-serif; +} + +.navbarConrtainer { + background-color: red; + height: 2.5rem; + width: 100%; + color: white; + display: flex; + align-items: center; + justify-content: space-around; +} +.navbarConrtainer__more { + border-radius: 20%; + border: 2px solid white; + width: 3rem; + padding-right: 1.5rem; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.date { + padding-top: 3rem; + padding-right: 3rem; +} + +.mainArticel { + width: 41rem; + padding-top: 4rem; + padding-right: 3rem; +} +.mainArticel__mineTitle { + font-size: 2.5rem; + font-weight: bold; +} +.mainArticel__mineDesc { + padding-top: 1.5rem; +} +.mainArticel__mineWriter { + font-size: 0.8rem; + padding-top: 2.5rem; + color: grey; +} + +.bibipic { + width: 700px; + margin-right: 60%; + margin-top: -300px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/group 2/index.html b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/index.html new file mode 100644 index 000000000..ab95bbb34 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/index.html @@ -0,0 +1,59 @@ + + + + + + + ynet group 2 + + + + + + + +
+ ראשי + ynet+ + חדשות + רדיו + ספורט + כלכלה + תרבות + רכילות + בריאות + רכב + דיגיטל + לאשה + אוכל +
עוד
+ search + חיפוש +
+ +
+ 1.12.22 ז בכסלו התשפ"ג +
+ +
+
+ הסכם בין הליכוד לציונות הדתית: + האוצר ברוטציה,ושר במשרד הביטחון +
+
+ הציונות הדתית תהיה אחראית בין היתר על ההתנחלויות, המינהל האזרחי, פעולות הממשלה בשטחים, ותקבל גם את משרד העלייה והקליטה. היא גם תוכל למנות יו"ר מטעמה לוועדת החוקה. נתניהו: "צעד שמקרב להקמת ממשלת ימין לאומית". סמוטריץ': "נקדם רפורמה במערכת המשפט" +
+
+ מורן אזולאי +
+
+ + bibipic + + diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.css b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.css new file mode 100644 index 000000000..0f2fb0907 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.css @@ -0,0 +1,55 @@ +body { + margin: 0; + direction: rtl; + font-family: "Anek Devanagari", sans-serif; + font-family: "Open Sans", sans-serif; +} + +.navbarConrtainer { + background-color: red; + height: 2.5rem; + width: 100%; + color: white; + display: flex; + align-items: center; + justify-content: space-around; +} +.navbarConrtainer__more { + border-radius: 20%; + border: 2px solid white; + width: 3rem; + padding-right: 1.5rem; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.date { + padding-top: 3rem; + padding-right: 3rem; +} + +.mainArticel { + width: 41rem; + padding-top: 4rem; + padding-right: 3rem; +} +.mainArticel__mineTitle { + font-size: 2.5rem; + font-weight: bold; +} +.mainArticel__mineDesc { + padding-top: 1.5rem; +} +.mainArticel__mineWriter { + font-size: 0.8rem; + padding-top: 2.5rem; + color: grey; +} + +.bibipic { + width: 700px; + margin-right: 60%; + margin-top: -300px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.css.map b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.css.map new file mode 100644 index 000000000..b0671bcba --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,cAAA;EACA,0CAAA;EACA,oCAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,6BAAA;ACCJ;ADCI;EACI,kBAAA;EACA,uBAAA;EACA,WAAA;EACA,qBAAA;ACCR;;ADGA;EACI,kEACA;ACDJ;;ADME;EACE,iBAAA;EACA,mBAAA;ACHJ;;ADKC;EACG,YAAA;EACA,iBAAA;EACA,mBAAA;ACFJ;ADGI;EACI,iBAAA;EACA,iBAAA;ACDR;ADII;EACI,mBAAA;ACFR;ADKI;EACI,iBAAA;EACA,mBAAA;EACA,WAAA;ACHR;;ADOC;EACG,YAAA;EACA,iBAAA;EACA,kBAAA;ACJJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.scss b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.scss new file mode 100644 index 000000000..55cb2b1a1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/group 2/style.scss @@ -0,0 +1,62 @@ +body{ + margin: 0; + direction: rtl; + font-family: 'Anek Devanagari', sans-serif; + font-family: 'Open Sans', sans-serif; + +} +.navbarConrtainer{ + background-color: red; + height: 2.5rem; + width: 100%; + color: white; + display: flex; + align-items: center; + justify-content: space-around; + // margin-left: 3rem; + &__more{ + border-radius: 20%; + border: 2px solid white; + width:3rem; + padding-right: 1.5rem; + } + +} +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 + } + .date{ + padding-top: 3rem; + padding-right: 3rem; + } + .mainArticel{ + width: 41rem; + padding-top: 4rem; + padding-right: 3rem; + &__mineTitle{ + font-size: 2.5rem; + font-weight: bold; + + } + &__mineDesc{ + padding-top: 1.5rem; + + } + &__mineWriter{ + font-size: 0.8rem; + padding-top: 2.5rem; + color: grey; + } + } + + .bibipic{ + width: 700px; + margin-right: 60%; + margin-top: -300px; + } + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/room3/dist/style.css b/01-HTML-CSS/07-BEM/exercise-bbc/room3/dist/style.css new file mode 100644 index 000000000..05e5ede70 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/room3/dist/style.css @@ -0,0 +1,17 @@ +* { + margin: 0; +} + +.container { + display: flex; +} + +.header { + display: flex; + position: sticky; + width: 100vw; + height: 50px; + background-color: red; + justify-content: space-between; + box-sizing: border-box; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/room3/index.html b/01-HTML-CSS/07-BEM/exercise-bbc/room3/index.html new file mode 100644 index 000000000..c3ec18a13 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/room3/index.html @@ -0,0 +1,30 @@ + + + + + + + Document + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+ +
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.css b/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.css new file mode 100644 index 000000000..6af1def6a --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.css @@ -0,0 +1,18 @@ +* { + margin: 0; +} + +.container { + display: flex; +} + +.header { + display: flex; + position: -webkit-sticky; + position: sticky; + width: 100vw; + height: 50px; + background-color: red; + justify-content: space-between; + box-sizing: border-box; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.css.map b/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.css.map new file mode 100644 index 000000000..67dc853af --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACG,aAAA;EACA,wBAAA;EAAA,gBAAA;EACA,YAAA;EACA,YAAA;EACA,qBAAA;EACA,8BAAA;EACA,sBAAA;ACCH","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.scss b/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.scss new file mode 100644 index 000000000..e2e41be18 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/room3/style.scss @@ -0,0 +1,18 @@ +*{ + margin: 0; +} + +.container{ + display: flex; + +} +.header{ + display: flex; + position: sticky; + width: 100vw; + height: 50px; + background-color: red; + justify-content: space-between; + box-sizing: border-box; + +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/dist/style.css b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/dist/style.css new file mode 100644 index 000000000..3cca8a4c6 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/dist/style.css @@ -0,0 +1,125 @@ +body { + margin: 0; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.header { + width: 100%; + height: 50px; + background: red; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + gap: 20px; + box-shadow: 3px 3px 3px 3px #000; +} +.header__titles:hover { + background: #850000; + padding: 3px; +} +.header img { + width: 50px; + height: 50px; +} +.header__titles { + margin-left: 50px; + font-size: 30px; + color: white; +} +.header__titles a { + text-decoration: none; + color: white; +} +.header .menu { + display: flex; + align-items: center; + justify-content: left; + align-content: space-between; + position: relative; + right: -550px; + box-sizing: border-box; +} +.header .submenu { + display: none; + animation: popout 0.3s ease-in-out forwards; + transform-origin: top center; +} +@keyframes popout { + 0% { + transform: scale(0); + } + 80% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} +.header .menu:hover .submenu { + display: inline-flex; + justify-content: center; + position: absolute; + background: #666666; + z-index: 1; + top: 20px; + width: 110px; + box-sizing: border-box; + padding: 5px; + border-radius: 4px; + box-shadow: 3px 3px 10px 3px #000; +} +.header .insubmenu { + transition: all 0.3s ease-in-out; +} +.header .insubmenu a { + color: white; + text-decoration: none; + font-size: 20px; +} +.header .insubmenu hr { + width: min-content; +} +.header .menu button { + cursor: pointer; + position: absolute; + font-size: 25px; + color: white; + background-color: transparent; + border-radius: 15px; + border: 3px solid white; + width: 110px; +} +.header .menu i { + position: absolute; + font-size: 15px; + right: -25px; + z-index: 1; + color: white; +} +.header .search { + display: flex; + align-items: center; + position: relative; +} +.header .search input { + position: absolute; + right: -780px; + width: 100px; + height: 40px; + border-radius: 10px; + cursor: pointer; + transition: width 0.4s ease-in-out; + background: red; + border: 1px solid white; +} +.header .search input:focus { + color: white; + font-size: 20px; +} +.header .search i { + position: absolute; + font-size: 30px; + right: -770px; + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/index.html b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/index.html new file mode 100644 index 000000000..cb40ef411 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/index.html @@ -0,0 +1,38 @@ + + + + + + + Ynet + + + + +
+ ynet icon +
Home
+
Sport
+
Culture
+
Health
+
News
+
+ + +
+
+
Link1
+
+
Link1
+
+
Link1
+
+
+
+
+ + +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/style.css b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/style.css new file mode 100644 index 000000000..c9a9e69ba --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/style.css @@ -0,0 +1,139 @@ +body { + margin: 0; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.header { + width: 100%; + height: 50px; + background: red; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + gap: 20px; + box-shadow: 3px 3px 3px 3px #000; +} +.header__titles:hover { + background: rgb(133, 0, 0); + padding: 3px; +} +.header img { + width: 50px; + height: 50px; +} +.header__titles { + margin-left: 50px; + font-size: 30px; + color: white; +} +.header__titles a { + text-decoration: none; + color: white; +} +.header .menu { + display: flex; + align-items: center; + justify-content: left; + align-content: space-between; + position: relative; + right: -550px; + box-sizing: border-box; +} +.header .submenu { + display: none; + -webkit-animation: popout 0.3s ease-in-out forwards; + animation: popout 0.3s ease-in-out forwards; + transform-origin: top center; +} +@-webkit-keyframes popout { + 0% { + transform: scale(0); + } + 80% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} +@keyframes popout { + 0% { + transform: scale(0); + } + 80% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} +.header .menu:hover .submenu { + display: inline-flex; + justify-content: center; + position: absolute; + background: rgb(102, 102, 102); + z-index: 1; + top: 20px; + width: 110px; + box-sizing: border-box; + padding: 5px; + border-radius: 4px; + box-shadow: 3px 3px 10px 3px #000; +} +.header .insubmenu { + transition: all 0.3s ease-in-out; +} +.header .insubmenu a { + color: white; + text-decoration: none; + font-size: 20px; +} +.header .insubmenu hr { + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; +} +.header .menu button { + cursor: pointer; + position: absolute; + font-size: 25px; + color: rgb(255, 255, 255); + background-color: transparent; + border-radius: 15px; + border: 3px solid white; + width: 110px; +} +.header .menu i { + position: absolute; + font-size: 15px; + right: -25px; + z-index: 1; + color: white; +} +.header .search { + display: flex; + align-items: center; + position: relative; +} +.header .search input { + position: absolute; + right: -780px; + width: 100px; + height: 40px; + border-radius: 10px; + cursor: pointer; + transition: width 0.4s ease-in-out; + background: red; + border: 1px solid white; +} +.header .search input:focus { + color: white; + font-size: 20px; +} +.header .search i { + position: absolute; + font-size: 30px; + right: -770px; + color: white; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/style.scss b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/style.scss new file mode 100644 index 000000000..be710ba22 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/style.scss @@ -0,0 +1,127 @@ +body{ + margin: 0; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +.header{ + width: 100%; + height: 50px; + background: red; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + gap: 20px; + box-shadow: 3px 3px 3px 3px #000; + &__titles:hover{ + background: rgb(133, 0, 0); + padding: 3px; + + } + img{ + width: 50px; + height: 50px; + } + &__titles{ + margin-left: 50px; + font-size: 30px; + color: white; + a{ + text-decoration: none; + color: white; + } + + } + .menu{ + display: flex; + align-items:center; + justify-content: left; + align-content: space-between; + position: relative; + right: -550px; + box-sizing: border-box; + + } + .submenu{ + display: none; + // transition: all 0.3s ease-in-out; + animation: popout 0.3s ease-in-out forwards; + transform-origin: top center; + } + @keyframes popout { + 0%{transform: scale(0);} + 80%{transform: scale(1.1);} + 100%{transform: scale(1);} + } + .menu:hover .submenu{ + display: inline-flex; + justify-content: center; + position: absolute; + background: rgb(102, 102, 102); + z-index: 1; + top: 20px; + width:110px; + box-sizing: border-box; + padding: 5px; + border-radius: 4px; + box-shadow: 3px 3px 10px 3px #000; + } + + .insubmenu{ + transition: all 0.3s ease-in-out; + } + .insubmenu a{ + color: white; + text-decoration: none; + font-size: 20px; + } + .insubmenu hr{ + width: min-content; + } + .menu button{ + cursor: pointer; + // position: relative; + position: absolute; + font-size: 25px; + // right: -550px; + color: rgb(255, 255, 255); + background-color: transparent; + border-radius: 15px; + border: 3px solid white; + width: 110px; + } + .menu i{ + position: absolute; + font-size: 15px; + right: -25px; + z-index: 1; + color: white; + } + .search{ + display: flex; + align-items: center; + position: relative; + } + .search input{ + position: absolute; + right: -780px; + width: 100px; + height: 40px; + border-radius: 10px; + cursor: pointer; + transition: width 0.4s ease-in-out; + background: red; + border: 1px solid white; + } + .search input:focus{ + // width: 300px; + color: white; + font-size: 20px; + } + .search i{ + // cursor: pointer; + position: absolute; + font-size: 30px; + right: -770px; + color: white; + } +} diff --git a/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/ynet icon.png b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/ynet icon.png new file mode 100644 index 000000000..45e1d0d95 Binary files /dev/null and b/01-HTML-CSS/07-BEM/exercise-bbc/yovel.p ynet/ynet icon.png differ diff --git a/01-HTML-CSS/07-BEM/exercise/BBC-Room7/dist/style.css b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/dist/style.css new file mode 100644 index 000000000..90bc53bb1 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/dist/style.css @@ -0,0 +1,37 @@ +.grid { + display: flex; + flex-direction: column; + width: 80vw; + height: 100vh; +} +.grid__main { + border: 2px solid white; + margin: 0 auto; + width: 80%; + height: 40%; + background-color: #5858ae; +} +.grid__main__title { + border: 2px solid black; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1em; + height: 2rem; +} +.grid__main__articles { + border: 10px solid blueviolet; + display: flex; + flex-wrap: wrap; + height: 70%; +} +.grid__main__articles .subArticle--main { + border: 2px solid red; + width: 50%; + height: 100%; +} +.grid__main__articles .subArticle { + border: 2px solid red; + width: 100px; + height: 50px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/BBC-Room7/index.html b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/index.html new file mode 100644 index 000000000..d96ef13e2 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/index.html @@ -0,0 +1,32 @@ + + + + + + + BBC-From Diagram + + + +
+
+
+

Welcome to BBC

+ date: +
+
+
+
+
+
+
+
+
+
+
+

News

+
+
+
+ + diff --git a/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.css b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.css new file mode 100644 index 000000000..27a4f317b --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.css @@ -0,0 +1,37 @@ +.grid { + display: flex; + flex-direction: column; + width: 80vw; + height: 100vh; +} +.grid__main { + border: 2px solid white; + margin: 0 auto; + width: 80%; + height: 40%; + background-color: rgb(88, 88, 174); +} +.grid__main__title { + border: 2px solid black; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1em; + height: 2rem; +} +.grid__main__articles { + border: 10px solid blueviolet; + display: flex; + flex-wrap: wrap; + height: 70%; +} +.grid__main__articles .subArticle--main { + border: 2px solid red; + width: 50%; + height: 100%; +} +.grid__main__articles .subArticle { + border: 2px solid red; + width: 100px; + height: 50px; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.css.map b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.css.map new file mode 100644 index 000000000..8f411e2f9 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,sBAAA;EACA,WAAA;EACA,aAAA;ACCJ;ADAI;EACI,uBAAA;EACA,cAAA;EACA,UAAA;EACA,WAAA;EACA,kCAAA;ACER;ADDQ;EACI,uBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,YAAA;ACGZ;ADDQ;EACI,6BAAA;EACA,aAAA;EACA,eAAA;EACA,WAAA;ACGZ;ADFY;EACI,qBAAA;EACA,UAAA;EACA,YAAA;ACIhB;ADDY;EACI,qBAAA;EACA,YAAA;EACA,YAAA;ACGhB","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.scss b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.scss new file mode 100644 index 000000000..8b5b1f4f2 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/BBC-Room7/style.scss @@ -0,0 +1,39 @@ +.grid{ + display: flex; + flex-direction: column; + width: 80vw; + height: 100vh; + &__main{ + border: 2px solid white; + margin: 0 auto; + width: 80%; + height: 40%; + background-color: rgb(88, 88, 174); + &__title{ + border: 2px solid black; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1em; + height: 2rem; + } + &__articles{ + border: 10px solid blueviolet; + display: flex; + flex-wrap: wrap; + height: 70%; + .subArticle--main{ + border: 2px solid red; + width: 50%; + height: 100%; + + } + .subArticle{ + border: 2px solid red; + width: 100px; + height: 50px; + + } + } + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/bbc.png b/01-HTML-CSS/07-BEM/exercise/bbc.png new file mode 100644 index 000000000..22ac2e68e Binary files /dev/null and b/01-HTML-CSS/07-BEM/exercise/bbc.png differ diff --git a/01-HTML-CSS/07-BEM/exercise/karin-tania/dist/style.css b/01-HTML-CSS/07-BEM/exercise/karin-tania/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/01-HTML-CSS/07-BEM/exercise/karin-tania/index.html b/01-HTML-CSS/07-BEM/exercise/karin-tania/index.html new file mode 100644 index 000000000..5256de76f --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/karin-tania/index.html @@ -0,0 +1,53 @@ + + + + + + + Document + + + +

Welcome

+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +
+
+ +
+
+

News

+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/karin-tania/style.css b/01-HTML-CSS/07-BEM/exercise/karin-tania/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/01-HTML-CSS/07-BEM/exercise/karin-tania/style.css.map b/01-HTML-CSS/07-BEM/exercise/karin-tania/style.css.map new file mode 100644 index 000000000..8d7575122 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/karin-tania/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/karin-tania/style.scss b/01-HTML-CSS/07-BEM/exercise/karin-tania/style.scss new file mode 100644 index 000000000..e7b71e101 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/karin-tania/style.scss @@ -0,0 +1,3 @@ +body{ + +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/room4/dist/style.css b/01-HTML-CSS/07-BEM/exercise/room4/dist/style.css new file mode 100644 index 000000000..616d1d037 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/room4/dist/style.css @@ -0,0 +1,24 @@ +body { + margin: 0; +} + +.wrapper { + width: 90vw; + height: 100vh; +} +.wrapper__header { + display: flex; + justify-content: space-between; + margin: auto; + color: gray; + border: 0.25rem solid black; + width: 35em; +} +.wrapper__header__welcome { + font-weight: 900; + width: 1em; +} +.wrapper__header__date { + font-weight: 500; + width: 1em; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/room4/index.html b/01-HTML-CSS/07-BEM/exercise/room4/index.html new file mode 100644 index 000000000..3b6384dc8 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/room4/index.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + +
+
+
welcome
+
01/12/2022
+
+ +
+
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/room4/style.css b/01-HTML-CSS/07-BEM/exercise/room4/style.css new file mode 100644 index 000000000..616d1d037 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/room4/style.css @@ -0,0 +1,24 @@ +body { + margin: 0; +} + +.wrapper { + width: 90vw; + height: 100vh; +} +.wrapper__header { + display: flex; + justify-content: space-between; + margin: auto; + color: gray; + border: 0.25rem solid black; + width: 35em; +} +.wrapper__header__welcome { + font-weight: 900; + width: 1em; +} +.wrapper__header__date { + font-weight: 500; + width: 1em; +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/room4/style.css.map b/01-HTML-CSS/07-BEM/exercise/room4/style.css.map new file mode 100644 index 000000000..817a9e3d2 --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/room4/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADCA;EACI,WAAA;EACA,aAAA;ACEJ;ADDI;EACI,aAAA;EACA,8BAAA;EACA,YAAA;EACA,WAAA;EACA,2BAAA;EACA,WAAA;ACGR;ADDQ;EACI,gBAAA;EACA,UAAA;ACGZ;ADAQ;EACI,gBAAA;EACA,UAAA;ACEZ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/room4/style.scss b/01-HTML-CSS/07-BEM/exercise/room4/style.scss new file mode 100644 index 000000000..aaa81f10f --- /dev/null +++ b/01-HTML-CSS/07-BEM/exercise/room4/style.scss @@ -0,0 +1,25 @@ +body{ + margin: 0; +} +.wrapper{ + width: 90vw; + height: 100vh; + &__header{ + display: flex; + justify-content: space-between; + margin: auto; + color: gray; + border: 0.25rem solid black; + width: 35em; + + &__welcome{ + font-weight: 900; + width: 1em; + + } + &__date{ + font-weight: 500; + width: 1em; + } + } +} \ No newline at end of file diff --git a/01-HTML-CSS/07-BEM/exercise/ynet.png b/01-HTML-CSS/07-BEM/exercise/ynet.png new file mode 100644 index 000000000..94af90a9a Binary files /dev/null and b/01-HTML-CSS/07-BEM/exercise/ynet.png differ diff --git a/01-HTML-CSS/07-BEM/info/info.md b/01-HTML-CSS/07-BEM/info/info.md new file mode 100644 index 000000000..82a6f51b9 --- /dev/null +++ b/01-HTML-CSS/07-BEM/info/info.md @@ -0,0 +1,11 @@ + + + +## Main ## +https://getbem.com/introduction/ + +## Videos ## +Video: https://www.youtube.com/watch?v=SLjHSVwXYq4 background-color: red; + +## Example (todo list): ## +https://drive.google.com/file/d/1gK9SbElupVIANm3lNw_a1Lchq6P6e7R7/view?usp=sharing diff --git a/01-HTML-CSS/08-Tabels-nth/example/dist/style.css b/01-HTML-CSS/08-Tabels-nth/example/dist/style.css new file mode 100644 index 000000000..d47a08769 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/example/dist/style.css @@ -0,0 +1,16 @@ +table { + border-collapse: collapse; + background-color: #ffd7de; +} +table caption { + background-color: orange; +} + +th { + background-color: yellow; +} + +td, th { + padding: 20px; + border: 1px solid; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/example/index.html b/01-HTML-CSS/08-Tabels-nth/example/index.html new file mode 100644 index 000000000..eff2443d9 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/example/index.html @@ -0,0 +1,32 @@ + + + + + + + Tables + + + + + + + + + + + + + + + + + + + + + +
Monthly savings
abc
def
rtu
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/example/style.css b/01-HTML-CSS/08-Tabels-nth/example/style.css new file mode 100644 index 000000000..d47a08769 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/example/style.css @@ -0,0 +1,16 @@ +table { + border-collapse: collapse; + background-color: #ffd7de; +} +table caption { + background-color: orange; +} + +th { + background-color: yellow; +} + +td, th { + padding: 20px; + border: 1px solid; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/example/style.css.map b/01-HTML-CSS/08-Tabels-nth/example/style.css.map new file mode 100644 index 000000000..054d8afaf --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/example/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AACA;EACI,yBAAA;EACA,yBAAA;ACAJ;ADEI;EACI,wBAAA;ACAR;;ADIA;EACI,wBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,iBAAA;ACDJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/example/style.scss b/01-HTML-CSS/08-Tabels-nth/example/style.scss new file mode 100644 index 000000000..910f39515 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/example/style.scss @@ -0,0 +1,18 @@ + +table{ + border-collapse: collapse; + background-color: #ffd7de; + + caption{ + background-color: orange; + } +} + +th{ + background-color: yellow; +} + +td, th{ + padding: 20px; + border: 1px solid; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/exmaple-nth/dist/style.css b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/dist/style.css new file mode 100644 index 000000000..fa02f172c --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/dist/style.css @@ -0,0 +1,20 @@ +td, th { + padding: 10px 20px; + border: none; + border-collapse: collapse; + border-style: hidden; +} + +caption { + background-color: #9f9f9f; + color: white; + padding: 10px; +} + +tr:nth-child(5) { + background-color: #ebebeb; +} + +li:nth-child(2n+5) { + color: #da2644; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/exmaple-nth/index.html b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/index.html new file mode 100644 index 000000000..1f94d5c36 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/index.html @@ -0,0 +1,137 @@ + + + + + + + + Tables-nth + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Monthly savings
abc
def
rtu
rtu
rtu
rtu
rtu
rtu
rtu
+
    +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • + +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit incidunt officiis corrupti animi veritatis + cumque voluptatem veniam? Vero, quae veritatis enim repudiandae dignissimos voluptatum, totam consequatur + quasi delectus cumque eum.
    • +
+ +
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+
aaaaaaa
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.css b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.css new file mode 100644 index 000000000..bfe0cc27f --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.css @@ -0,0 +1,20 @@ +td, th { + padding: 10px 20px; + border: none; + border-collapse: collapse; + border-style: hidden; +} + +caption { + background-color: rgb(159, 159, 159); + color: white; + padding: 10px; +} + +tr:nth-child(5) { + background-color: rgb(235, 235, 235); +} + +li:nth-child(2n+5) { + color: rgb(218, 38, 68); +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.css.map b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.css.map new file mode 100644 index 000000000..3f50531d5 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAEA;EACI,kBAAA;EACA,YAAA;EACA,yBAAA;EACA,oBAAA;ACDJ;;ADKA;EACI,oCAAA;EACA,YAAA;EACA,aAAA;ACFJ;;ADKA;EACI,oCAAA;ACFJ;;ADMA;EACI,uBAAA;ACHJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.scss b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.scss new file mode 100644 index 000000000..ba59db386 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/exmaple-nth/style.scss @@ -0,0 +1,25 @@ + + +td, th{ + padding: 10px 20px; + border:none; + border-collapse: collapse; + border-style : hidden; + +} + +caption{ + background-color: rgb(159, 159, 159); + color: white; + padding: 10px; +} + +tr:nth-child(5){ + background-color: rgb(235, 235, 235); +} + + +li:nth-child(2n+5){ + color:rgb(218, 38, 68); +} + diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/dist/style.css new file mode 100644 index 000000000..264758b8f --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/dist/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; +} + +table { + border-collapse: collapse; + width: 400px; + height: 200px; + margin-left: auto; + margin-right: auto; + margin-top: 200px; +} +table caption { + height: 50px; + text-align: center; + padding-top: 20px; + font-size: 20px; +} + +td, th { + border: 4px solid black; + padding: 18px; +} + +th { + background-color: red; +} + +caption { + background-color: yellow; +} + +td:nth-child(n+2) { + background-color: palegreen; +} + +td:nth-child(1) { + background-color: green; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/index.html b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/index.html new file mode 100644 index 000000000..915274493 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/index.html @@ -0,0 +1,41 @@ + + + + + + + tables_fallowup + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Contect list +
NameNumberE-mailAddress
timor chone054-48937432cscskcmj@gmail.comdsdxasdsdxsa
shimon ori054-32341243jcndjcvnj@gmail.comdsdxasdsdxsa
yoni yuinhd052-23484433dfvfbvgt@gmail.comdsdxasdsdxsa
+ + diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.css new file mode 100644 index 000000000..264758b8f --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; +} + +table { + border-collapse: collapse; + width: 400px; + height: 200px; + margin-left: auto; + margin-right: auto; + margin-top: 200px; +} +table caption { + height: 50px; + text-align: center; + padding-top: 20px; + font-size: 20px; +} + +td, th { + border: 4px solid black; + padding: 18px; +} + +th { + background-color: red; +} + +caption { + background-color: yellow; +} + +td:nth-child(n+2) { + background-color: palegreen; +} + +td:nth-child(1) { + background-color: green; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.css.map new file mode 100644 index 000000000..40ee8359b --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADCA;EACI,yBAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,kBAAA;EACA,iBAAA;ACEJ;ADDI;EACI,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;ACGR;;ADAA;EACI,uBAAA;EACA,aAAA;ACGJ;;ADDA;EACI,qBAAA;ACIJ;;ADFA;EACI,wBAAA;ACKJ;;ADHA;EACI,2BAAA;ACMJ;;ADJA;EACI,uBAAA;ACOJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.scss new file mode 100644 index 000000000..88bc38bd2 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Itai-g/style.scss @@ -0,0 +1,33 @@ +body{ + margin: 0; +} +table{ + border-collapse: collapse; + width: 400px; + height: 200px; + margin-left: auto; + margin-right: auto; + margin-top: 200px; + caption{ + height: 50px; + text-align: center; + padding-top: 20px; + font-size: 20px; + } +} +td, th { + border: 4px solid black; + padding: 18px; +} +th{ + background-color: red; +} +caption{ + background-color: yellow; +} +td:nth-child(n+2){ + background-color: palegreen; +} +td:nth-child(1){ + background-color: green; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/dist/style.css new file mode 100644 index 000000000..6cfb2dce2 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/dist/style.css @@ -0,0 +1,63 @@ +table.int-inside-text { + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + border: 3px solid #555555; + background-color: #555555; + width: 400px; + text-align: center; + border-collapse: collapse; +} + +table.int-inside-text td, table.int-inside-text th { + border: 1px solid #555555; + padding: 8px 8px; +} + +table.int-inside-text tbody td { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; +} + +table.int-inside-text tr:nth-child(even) { + background: #A40000; +} + +table.int-inside-text td:nth-child(even) { + background: #A4A4A4; +} + +table.int-inside-text thead { + background: #000000; + background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%); + background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%); + background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%); + border-bottom: 6px solid #FFFFFF; +} + +table.int-inside-text thead th { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; + text-align: left; + border-left: 2px solid #B90000; +} + +table.int-inside-text thead th:first-child { + border-left: none; +} + +table.int-inside-text tfoot td { + font-size: 13px; +} + +table.int-inside-text tfoot .links { + text-align: right; +} + +table.int-inside-text tfoot .links a { + display: inline-block; + background: #FFFFFF; + color: #A43152; + padding: 2px 8px; + border-radius: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.css new file mode 100644 index 000000000..ca38918d6 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.css @@ -0,0 +1,61 @@ +table.int-inside-text { + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + border: 3px solid #555555; + background-color: #555555; + width: 400px; + text-align: center; + border-collapse: collapse; +} + +table.int-inside-text td, table.int-inside-text th { + border: 1px solid #555555; + padding: 8px 8px; +} + +table.int-inside-text tbody td { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; +} + +table.int-inside-text tr:nth-child(even) { + background: #A40000; +} + +table.int-inside-text td:nth-child(even) { + background: #A4A4A4; +} + +table.int-inside-text thead { + background: #000000; + background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%); + border-bottom: 6px solid #FFFFFF; +} + +table.int-inside-text thead th { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; + text-align: left; + border-left: 2px solid #B90000; +} + +table.int-inside-text thead th:first-child { + border-left: none; +} + +table.int-inside-text tfoot td { + font-size: 13px; +} + +table.int-inside-text tfoot .links { + text-align: right; +} + +table.int-inside-text tfoot .links a { + display: inline-block; + background: #FFFFFF; + color: #A43152; + padding: 2px 8px; + border-radius: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.css.map new file mode 100644 index 000000000..d74c17b96 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,+DAAA;EACA,yBAAA;EACA,yBAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAAA;ACCJ;;ADME;EACE,yBAAA;EACA,gBAAA;ACHJ;;ADKE;EACE,eAAA;EACA,iBAAA;EACA,cAAA;ACFJ;;ADIE;EACE,mBAAA;ACDJ;;ADGE;EACE,mBAAA;ACAJ;;ADEE;EACE,mBAAA;EAGA,6EAAA;EACA,gCAAA;ACCJ;;ADCE;EACE,eAAA;EACA,iBAAA;EACA,cAAA;EACA,gBAAA;EACA,8BAAA;ACEJ;;ADAE;EACE,iBAAA;ACGJ;;ADAE;EACE,eAAA;ACGJ;;ADDE;EACE,iBAAA;ACIJ;;ADFE;EACE,qBAAA;EACA,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;ACKJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.scss new file mode 100644 index 000000000..3b1c2dc63 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/css/style.scss @@ -0,0 +1,59 @@ +table.int-inside-text { + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + border: 3px solid #555555; + background-color: #555555; + width: 400px; + text-align: center; + border-collapse: collapse; + } + .head-tab{ + + + } + + table.int-inside-text td, table.int-inside-text th { + border: 1px solid #555555; + padding: 8px 8px; + } + table.int-inside-text tbody td { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; + } + table.int-inside-text tr:nth-child(even) { + background: #A40000; + } + table.int-inside-text td:nth-child(even) { + background: #A4A4A4; + } + table.int-inside-text thead { + background: #000000; + background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%); + background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%); + background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%); + border-bottom: 6px solid #FFFFFF; + } + table.int-inside-text thead th { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; + text-align: left; + border-left: 2px solid #B90000; + } + table.int-inside-text thead th:first-child { + border-left: none; + } + + table.int-inside-text tfoot td { + font-size: 13px; + } + table.int-inside-text tfoot .links { + text-align: right; + } + table.int-inside-text tfoot .links a{ + display: inline-block; + background: #FFFFFF; + color: #A43152; + padding: 2px 8px; + border-radius: 5px; + } \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/index.html b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/index.html new file mode 100644 index 000000000..85e0d2cc5 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Matanel Harush/index.html @@ -0,0 +1,110 @@ + + + + + + + INT Tables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
INTExampleExampleExampleExampleExampleExampleExample
Example-INTExample-INTExample-INTExample-INTExample-INTExample-INTExample-INTExample-INT
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room 1/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/dist/style.css new file mode 100644 index 000000000..6a198c5b7 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/dist/style.css @@ -0,0 +1,55 @@ +table.table1 { + border: 4px solid #555555; + background-color: #555555; + width: 400px; + text-align: center; + border-collapse: collapse; +} + +table.table1 td, table.table1 th { + border: 1px solid #555555; + padding: 5px 10px; +} + +table.table1 tbody td { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; +} + +table.table1 td:nth-child(even) { + background: #398AA4; +} + +table.table1 thead { + background: #398AA4; + border-bottom: 10px solid #398AA4; +} + +table.table1 thead th { + font-size: 15px; + font-weight: bold; + color: #FFFFFF; + text-align: left; + border-left: 2px solid #398AA4; +} + +table.table1 thead th:first-child { + border-left: none; +} + +table.table1 tfoot td { + font-size: 13px; +} + +table.table1 tfoot .links { + text-align: right; +} + +table.table1 tfoot .links a { + display: inline-block; + background: #FFFFFF; + color: #398AA4; + padding: 2px 8px; + border-radius: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room 1/index.html b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/index.html new file mode 100644 index 000000000..eec6b6448 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/index.html @@ -0,0 +1,68 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
head1head2head3head4
cell1_1cell2_1cell3_1cell4_1
cell1_2cell2_2cell3_2cell4_2
cell1_3cell2_3cell3_3cell4_3
cell1_4cell2_4cell3_4cell4_4
cell1_5cell2_5cell3_5cell4_5
cell1_6cell2_6cell3_6cell4_6
cell1_7cell2_7cell3_7cell4_7
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.css new file mode 100644 index 000000000..6a198c5b7 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.css @@ -0,0 +1,55 @@ +table.table1 { + border: 4px solid #555555; + background-color: #555555; + width: 400px; + text-align: center; + border-collapse: collapse; +} + +table.table1 td, table.table1 th { + border: 1px solid #555555; + padding: 5px 10px; +} + +table.table1 tbody td { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; +} + +table.table1 td:nth-child(even) { + background: #398AA4; +} + +table.table1 thead { + background: #398AA4; + border-bottom: 10px solid #398AA4; +} + +table.table1 thead th { + font-size: 15px; + font-weight: bold; + color: #FFFFFF; + text-align: left; + border-left: 2px solid #398AA4; +} + +table.table1 thead th:first-child { + border-left: none; +} + +table.table1 tfoot td { + font-size: 13px; +} + +table.table1 tfoot .links { + text-align: right; +} + +table.table1 tfoot .links a { + display: inline-block; + background: #FFFFFF; + color: #398AA4; + padding: 2px 8px; + border-radius: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.css.map new file mode 100644 index 000000000..f94f52e89 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,yBAAA;EACA,yBAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAAA;ACCJ;;ADCE;EACE,yBAAA;EACA,iBAAA;ACEJ;;ADAE;EACE,eAAA;EACA,iBAAA;EACA,cAAA;ACGJ;;ADDE;EACE,mBAAA;ACIJ;;ADFE;EACE,mBAAA;EACA,iCAAA;ACKJ;;ADHE;EACE,eAAA;EACA,iBAAA;EACA,cAAA;EACA,gBAAA;EACA,8BAAA;ACMJ;;ADJE;EACE,iBAAA;ACOJ;;ADJE;EACE,eAAA;ACOJ;;ADLE;EACE,iBAAA;ACQJ;;ADNE;EACE,qBAAA;EACA,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;ACSJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.scss new file mode 100644 index 000000000..1b83f1cf3 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room 1/style.scss @@ -0,0 +1,47 @@ +table.table1 { + border: 4px solid #555555; + background-color: #555555; + width: 400px; + text-align: center; + border-collapse: collapse; + } + table.table1 td, table.table1 th { + border: 1px solid #555555; + padding: 5px 10px; + } + table.table1 tbody td { + font-size: 12px; + font-weight: bold; + color: #FFFFFF; + } + table.table1 td:nth-child(even) { + background: #398AA4; + } + table.table1 thead { + background: #398AA4; + border-bottom: 10px solid #398AA4; + } + table.table1 thead th { + font-size: 15px; + font-weight: bold; + color: #FFFFFF; + text-align: left; + border-left: 2px solid #398AA4; + } + table.table1 thead th:first-child { + border-left: none; + } + + table.table1 tfoot td { + font-size: 13px; + } + table.table1 tfoot .links { + text-align: right; + } + table.table1 tfoot .links a{ + display: inline-block; + background: #FFFFFF; + color: #398AA4; + padding: 2px 8px; + border-radius: 5px; + } \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room-4/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/dist/style.css new file mode 100644 index 000000000..82df34f06 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/dist/style.css @@ -0,0 +1,20 @@ +table, tr, th { + width: 100px; + border: 1px solid red; + margin: 100px auto; +} + +th { + text-align: center; + padding: 8px; + border: 1px; + border: 1px solid red; +} + +tr:nth-child(5n) { + background-color: aqua; +} + +tr { + text-align: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room-4/index.html b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/index.html new file mode 100644 index 000000000..0063c3239 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/index.html @@ -0,0 +1,89 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
room
amitamitavivaitay
abcc
deff
deff
deff
deff
deff
deff
deff
deff
deff
deff
+ + diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.css new file mode 100644 index 000000000..82df34f06 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.css @@ -0,0 +1,20 @@ +table, tr, th { + width: 100px; + border: 1px solid red; + margin: 100px auto; +} + +th { + text-align: center; + padding: 8px; + border: 1px; + border: 1px solid red; +} + +tr:nth-child(5n) { + background-color: aqua; +} + +tr { + text-align: center; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.css.map new file mode 100644 index 000000000..b1e5403ea --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EAEE,YAAA;EACA,qBAAA;EACA,kBAAA;ACAF;;ADEA;EACI,kBAAA;EACA,YAAA;EACA,WAAA;EACA,qBAAA;ACCJ;;ADEA;EACI,sBAAA;ACCJ;;ADCA;EACE,kBAAA;ACEF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.scss new file mode 100644 index 000000000..dc20d791e --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Room-4/style.scss @@ -0,0 +1,20 @@ +table ,tr ,th { + // border-collapse: collapse; + width: 100px; + border:1px solid red; + margin: 100px auto; +} +th { + text-align: center; + padding: 8px; + border: 1px; + border:1px solid red; + + } +tr:nth-child(5n){ + background-color: aqua; +} +tr{ + text-align: center; + +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/4us2nCgl6kgZc0t3hpW75Q_48x48.png b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/4us2nCgl6kgZc0t3hpW75Q_48x48.png new file mode 100644 index 000000000..7b1e122ca Binary files /dev/null and b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/4us2nCgl6kgZc0t3hpW75Q_48x48.png differ diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/dist/style.css new file mode 100644 index 000000000..c6e0c032e --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/dist/style.css @@ -0,0 +1,53 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +table { + border-collapse: collapse; +} +table th { + border-bottom: 2px solid rgba(0, 0, 0, 0.391); + color: #727070; + font-weight: 200; +} +table tr { + position: relative; + text-align: center; +} +table tr td:nth-child(2) { + text-align: left; + display: flex; + align-items: center; + justify-content: center; +} +table tr td:nth-child(3) { + text-align: left; +} +table tr:nth-child(even) { + background-color: rgba(255, 0, 0, 0.178); +} +table tr:nth-child(-n+5) td:first-child { + position: relative; +} +table tr:nth-child(-n+5) td:first-child div { + position: absolute; + left: -7px; + top: 2px; + height: 75px; + width: 5px; + background-color: #7a7ad9; +} + +td, th { + padding: 1rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/download.png b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/download.png new file mode 100644 index 000000000..5812e3a96 Binary files /dev/null and b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/download.png differ diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/index.html b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/index.html new file mode 100644 index 000000000..afadd06f1 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/index.html @@ -0,0 +1,99 @@ + + + + + + + Table Practice + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClubLogoMPWDLGFGAGDPtsLast 5
1		Arsenal14121133112237WWWDW
2		Man City14102240142632LWWWL
3		Newcastle1586129111830WWWWW
4		Tottenham1592431211029WLWLL
5		Man United148242020026WLWDL
+ + diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/newcstle.png b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/newcstle.png new file mode 100644 index 000000000..1ed030b56 Binary files /dev/null and b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/newcstle.png differ diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.css b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.css new file mode 100644 index 000000000..939b12237 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.css @@ -0,0 +1,53 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +table { + border-collapse: collapse; +} +table th { + border-bottom: 2px solid rgba(0, 0, 0, 0.391); + color: rgb(114, 112, 112); + font-weight: 200; +} +table tr { + position: relative; + text-align: center; +} +table tr td:nth-child(2) { + text-align: left; + display: flex; + align-items: center; + justify-content: center; +} +table tr td:nth-child(3) { + text-align: left; +} +table tr:nth-child(even) { + background-color: rgba(255, 0, 0, 0.178); +} +table tr:nth-child(-n+5) td:first-child { + position: relative; +} +table tr:nth-child(-n+5) td:first-child div { + position: absolute; + left: -7px; + top: 2px; + height: 75px; + width: 5px; + background-color: rgb(122, 122, 217); +} + +td, th { + padding: 1rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.css.map new file mode 100644 index 000000000..744b4bf9f --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;ADAI;EACI,6CAAA;EACA,yBAAA;EACA,gBAAA;ACER;ADAI;EACI,kBAAA;EACA,kBAAA;ACER;ADDQ;EACI,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACGZ;ADDQ;EACI,gBAAA;ACGZ;ADAI;EACI,wCAAA;ACER;ADCQ;EACI,kBAAA;ACCZ;ADAY;EACI,kBAAA;EACA,UAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA;EACA,oCAAA;ACEhB;;ADIA;EACI,aAAA;ACDJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.scss new file mode 100644 index 000000000..e6de08e9f --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/style.scss @@ -0,0 +1,55 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +table{ + border-collapse: collapse; + th{ + border-bottom: 2px solid rgba(0, 0, 0, 0.391); + color: rgb(114, 112, 112); + font-weight: 200; + } + tr{ + position: relative; + text-align: center; + td:nth-child(2){ + text-align: left; + display: flex; + align-items: center; + justify-content: center; + } + td:nth-child(3){ + text-align: left; + } + } + tr:nth-child(even){ + background-color: rgba(255, 0, 0, 0.178); + } + tr:nth-child(-n+5){ + td:first-child{ + position: relative; + div{ + position: absolute; + left: -7px; + top: 2px; + height: 75px; + width: 5px; + background-color: rgb(122, 122, 217); + } + } + } +} + +td, th{ + padding: 1rem; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/tottenham.png b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/tottenham.png new file mode 100644 index 000000000..459d0cea3 Binary files /dev/null and b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/tottenham.png differ diff --git a/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/united.png b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/united.png new file mode 100644 index 000000000..20556e865 Binary files /dev/null and b/01-HTML-CSS/08-Tabels-nth/followup/Vladi_Bykanov/united.png differ diff --git a/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/dist/style.css new file mode 100644 index 000000000..6809d3513 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/dist/style.css @@ -0,0 +1,33 @@ +body { + margin: 0; +} + +table { + border-collapse: collapse; + margin: 100px auto; + border: 1px solid black; +} + +td, th { + padding: 20px; + text-align: center; + border: none; +} + +th { + font-size: 2rem; + background-color: #a1a8aa; +} + +tr:nth-child(3n) { + color: #420ca5; + font-size: 1.5rem; +} + +td:nth-child(even) { + background-color: red; +} + +td:nth-child(4) { + background-color: aqua; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/index.html b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/index.html new file mode 100644 index 000000000..2ffa43cc4 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/index.html @@ -0,0 +1,93 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
famely table
first namefamely nameageaddress
avivaelias46byalik
yanayelias9byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
yaelelias5byalik
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/style.css b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/style.css new file mode 100644 index 000000000..ce80c4b62 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/style.css @@ -0,0 +1,33 @@ +body { + margin: 0; +} + +table { + border-collapse: collapse; + margin: 100px auto; + border: 1px solid black; +} + +td, th { + padding: 20px; + text-align: center; + border: none; +} + +th { + font-size: 2rem; + background-color: rgb(161, 168, 170); +} + +tr:nth-child(3n) { + color: rgb(66, 12, 165); + font-size: 1.5rem; +} + +td:nth-child(even) { + background-color: red; +} + +td:nth-child(4) { + background-color: aqua; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/style.scss new file mode 100644 index 000000000..559b6fe36 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/avivaelias/style.scss @@ -0,0 +1,40 @@ +body{ + margin: 0; + +} +table{ + border-collapse: collapse; + margin: 100px auto; + border: 1px solid black; +} +td,th{ + padding: 20px; + + text-align: center; + border: none; + + + +} + + + +th{ + font-size: 2rem; + background-color: rgb(161, 168, 170); + +} +tr:nth-child(3n){ + color: rgb(66, 12, 165); + font-size: 1.5rem; + +} + + +td:nth-child(even){ + background-color: red;} +td:nth-child(4){ + background-color: aqua ; + + +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/dist/style.css new file mode 100644 index 000000000..19e71044e --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/dist/style.css @@ -0,0 +1,24 @@ +* { + margin: 0; + padding: 0; +} + +table { + margin: auto; + margin-top: 200px; + width: 400px; + height: 400px; + border: 1px solid brown; +} +table caption { + background-color: brown; + font-size: xx-large; +} +table td, table th { + width: 50px; + height: 50px; + background-color: wheat; + text-align: center; + padding: 20px; + color: brown; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group 7/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/group 7/dist/style.css new file mode 100644 index 000000000..2b528d421 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group 7/dist/style.css @@ -0,0 +1,71 @@ +table.blueTable { + border: 1px solid #1c6ea4; + background-color: #eeeeee; + width: 100%; + text-align: left; + border-collapse: collapse; +} + +table.blueTable td, +table.blueTable th { + border: 5px solid #aaaaaa; + padding: 3px 2px; +} + +table.blueTable tbody td { + font-size: 15px; +} + +table.blueTable tr:nth-child(even) { + background: #d0e4f5; +} + +table.blueTable td:nth-child(even) { + background: #d0e4f5; +} + +table.blueTable thead { + background: #1c6ea4; + background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1c6ea4 100%); + background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1c6ea4 100%); + background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1c6ea4 100%); + border-bottom: 2px solid #444444; +} + +table.blueTable thead th { + font-size: 15px; + font-weight: bold; + color: #ffffff; + border-left: 2px solid #d0e4f5; +} + +table.blueTable thead th:first-child { + border-left: none; +} + +table.blueTable tfoot { + font-size: 14px; + font-weight: bold; + color: #ffffff; + background: #d0e4f5; + background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #d0e4f5 100%); + background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #d0e4f5 100%); + background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #d0e4f5 100%); + border-top: 2px solid #444444; +} + +table.blueTable tfoot td { + font-size: 14px; +} + +table.blueTable tfoot .links { + text-align: right; +} + +table.blueTable tfoot .links a { + display: inline-block; + background: #1c6ea4; + color: #ffffff; + padding: 2px 8px; + border-radius: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group 7/index.html b/01-HTML-CSS/08-Tabels-nth/followup/group 7/index.html new file mode 100644 index 000000000..47cf7cc9d --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group 7/index.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
head1head2head3head4head5head6head7
+
« 1 2 3 4 »
+
cell1_1cell2_1cell3_1cell4_1cell5_1cell6_1cell7_1
cell1_2cell2_2cell3_2cell4_2cell5_2cell6_2cell7_2
cell1_3cell2_3cell3_3cell4_3cell5_3cell6_3cell7_3
cell1_4cell2_4cell3_4cell4_4cell5_4cell6_4cell7_4
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.css b/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.css new file mode 100644 index 000000000..6101e7e68 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.css @@ -0,0 +1,67 @@ +table.blueTable { + border: 1px solid #1c6ea4; + background-color: #eeeeee; + width: 100%; + text-align: left; + border-collapse: collapse; +} + +table.blueTable td, +table.blueTable th { + border: 5px solid #aaaaaa; + padding: 3px 2px; +} + +table.blueTable tbody td { + font-size: 15px; +} + +table.blueTable tr:nth-child(even) { + background: #d0e4f5; +} + +table.blueTable td:nth-child(even) { + background: #d0e4f5; +} + +table.blueTable thead { + background: #1c6ea4; + background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1c6ea4 100%); + border-bottom: 2px solid #444444; +} + +table.blueTable thead th { + font-size: 15px; + font-weight: bold; + color: #ffffff; + border-left: 2px solid #d0e4f5; +} + +table.blueTable thead th:first-child { + border-left: none; +} + +table.blueTable tfoot { + font-size: 14px; + font-weight: bold; + color: #ffffff; + background: #d0e4f5; + background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #d0e4f5 100%); + border-top: 2px solid #444444; +} + +table.blueTable tfoot td { + font-size: 14px; +} + +table.blueTable tfoot .links { + text-align: right; +} + +table.blueTable tfoot .links a { + display: inline-block; + background: #1c6ea4; + color: #ffffff; + padding: 2px 8px; + border-radius: 5px; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.css.map new file mode 100644 index 000000000..c9dc747f9 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;EACA,yBAAA;EACA,WAAA;EACA,gBAAA;EACA,yBAAA;ACCF;;ADCA;;EAEE,yBAAA;EACA,gBAAA;ACEF;;ADAA;EACE,eAAA;ACGF;;ADDA;EACE,mBAAA;ACIF;;ADFA;EACE,mBAAA;ACKF;;ADHA;EACE,mBAAA;EAQA,6EAAA;EACA,gCAAA;ACCF;;ADCA;EACE,eAAA;EACA,iBAAA;EACA,cAAA;EACA,8BAAA;ACEF;;ADAA;EACE,iBAAA;ACGF;;ADAA;EACE,eAAA;EACA,iBAAA;EACA,cAAA;EACA,mBAAA;EAQA,6EAAA;EACA,6BAAA;ACFF;;ADIA;EACE,eAAA;ACDF;;ADGA;EACE,iBAAA;ACAF;;ADEA;EACE,qBAAA;EACA,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;ACCF","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.scss new file mode 100644 index 000000000..597b1f6f9 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group 7/style.scss @@ -0,0 +1,71 @@ +table.blueTable { + border: 1px solid #1c6ea4; + background-color: #eeeeee; + width: 100%; + text-align: left; + border-collapse: collapse; +} +table.blueTable td, +table.blueTable th { + border: 5px solid #aaaaaa; + padding: 3px 2px; +} +table.blueTable tbody td { + font-size: 15px; +} +table.blueTable tr:nth-child(even) { + background: #d0e4f5; +} +table.blueTable td:nth-child(even) { + background: #d0e4f5; +} +table.blueTable thead { + background: #1c6ea4; + background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1c6ea4 100%); + background: -webkit-linear-gradient( + top, + #5592bb 0%, + #327cad 66%, + #1c6ea4 100% + ); + background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1c6ea4 100%); + border-bottom: 2px solid #444444; +} +table.blueTable thead th { + font-size: 15px; + font-weight: bold; + color: #ffffff; + border-left: 2px solid #d0e4f5; +} +table.blueTable thead th:first-child { + border-left: none; +} + +table.blueTable tfoot { + font-size: 14px; + font-weight: bold; + color: #ffffff; + background: #d0e4f5; + background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #d0e4f5 100%); + background: -webkit-linear-gradient( + top, + #dcebf7 0%, + #d4e6f6 66%, + #d0e4f5 100% + ); + background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #d0e4f5 100%); + border-top: 2px solid #444444; +} +table.blueTable tfoot td { + font-size: 14px; +} +table.blueTable tfoot .links { + text-align: right; +} +table.blueTable tfoot .links a { + display: inline-block; + background: #1c6ea4; + color: #ffffff; + padding: 2px 8px; + border-radius: 5px; +} diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group-3/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/group-3/dist/style.css new file mode 100644 index 000000000..732c41f1c --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group-3/dist/style.css @@ -0,0 +1,20 @@ +table { + margin: 200px auto; + width: 50%; + font-size: large; +} + +th { + background-color: lightpink; +} + +.hannuka { + color: lightsalmon; +} + +tr:nth-child(odd) { + background-color: rgba(168, 245, 245, 0.749); +} +tr:nth-child(odd) td:nth-child(even) { + font-weight: 900; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group-3/index.html b/01-HTML-CSS/08-Tabels-nth/followup/group-3/index.html new file mode 100644 index 000000000..ca6f663b5 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group-3/index.html @@ -0,0 +1,56 @@ + + + + + + + Tables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
December 2022
1234567
891011121314
15161718192021
22232425262728
293031
+ + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.css b/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.css new file mode 100644 index 000000000..732c41f1c --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.css @@ -0,0 +1,20 @@ +table { + margin: 200px auto; + width: 50%; + font-size: large; +} + +th { + background-color: lightpink; +} + +.hannuka { + color: lightsalmon; +} + +tr:nth-child(odd) { + background-color: rgba(168, 245, 245, 0.749); +} +tr:nth-child(odd) td:nth-child(even) { + font-weight: 900; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.css.map new file mode 100644 index 000000000..cb484e286 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,UAAA;EACA,gBAAA;ACCJ;;ADEA;EACI,2BAAA;ACCJ;;ADEA;EACI,kBAAA;ACCJ;;ADEA;EAII,4CAAA;ACFJ;ADDI;EACI,gBAAA;ACGR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.scss new file mode 100644 index 000000000..6115d1960 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/group-3/style.scss @@ -0,0 +1,20 @@ +table{ + margin: 200px auto; + width: 50%; + font-size: large; +} + +th{ + background-color: lightpink; +} + +.hannuka{ + color:lightsalmon; +} + +tr:nth-child(odd){ + td:nth-child(even){ + font-weight: 900; + } + background-color: rgba(168, 245, 245, 0.749); +} diff --git a/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/dist/style.css b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/dist/style.css new file mode 100644 index 000000000..d966a02b1 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/dist/style.css @@ -0,0 +1,18 @@ +table, th, td { + border: 1px solid black; + border-collapse: collapse; + margin: 100px auto; +} + +td { + width: 100px; + text-align: center; +} + +tr:nth-child(even) { + background-color: lightsteelblue; +} + +tr:hover { + background-color: aquamarine; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/index.html b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/index.html new file mode 100644 index 000000000..1d3399b01 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/index.html @@ -0,0 +1,38 @@ + + + + + + + Tables + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NAMES
KARIN
IDAN-
-NOA-
+ + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.css b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.css new file mode 100644 index 000000000..d966a02b1 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.css @@ -0,0 +1,18 @@ +table, th, td { + border: 1px solid black; + border-collapse: collapse; + margin: 100px auto; +} + +td { + width: 100px; + text-align: center; +} + +tr:nth-child(even) { + background-color: lightsteelblue; +} + +tr:hover { + background-color: aquamarine; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.css.map new file mode 100644 index 000000000..5cf0282cb --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,uBAAA;EACA,yBAAA;EACA,kBAAA;ACCJ;;ADEA;EACI,YAAA;EACA,kBAAA;ACCJ;;ADEA;EACI,gCAAA;ACCJ;;ADEA;EACI,4BAAA;ACCJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.scss new file mode 100644 index 000000000..8008c1b9a --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/noa-meillet/style.scss @@ -0,0 +1,18 @@ +table, th, td{ + border: 1px solid black; + border-collapse: collapse; + margin: 100px auto; +} + +td{ + width: 100px; + text-align: center; +} + +tr:nth-child(even) { + background-color: lightsteelblue; +} + +tr:hover{ + background-color: aquamarine; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/index.html b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/index.html new file mode 100644 index 000000000..97e026973 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/index.html @@ -0,0 +1,72 @@ + + + + + + + + + CNN + + +
+
+
+ menu +
CNN
+ world US Politics Business Health More +
+
+
Audio
+ search + +
+
+
+
+ PODCAST: Tug of war Russia's war in Ukraine TRENDING: Brittney Griner + Harry and Meghan South Korea Marriage bill Celine Dion Nigeria first lady +
+
+
+ +
+
+ Why Viktor Bout is so important to Putin +
+
+
+
+ ANALYSIS +
+
+

The exchange of basketball star Brittney Griner for the arms dealer is a win for Putin, but at a cost +

+
+ The exchange of basketball star Brittney Griner for the arms dealer is a win for Putin, but at a cost +
+ The exchange of basketball star Brittney Griner for the arms dealer is a win for Putin, but at a cost +
+ The exchange of basketball star Brittney Griner for the arms dealer is a win for Putin, but at a cost +
+
+ +
+
Why Viktor Bout is so important to Putin
+
pictures
+
+
+ +
+
Why Viktor Bout is so important to Putin
+
pictures
+
+
+
+ +
+ + diff --git a/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.css b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.css new file mode 100644 index 000000000..cf9e536ad --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.css @@ -0,0 +1,98 @@ +body { + margin: 0%; + font-family: Arial, Helvetica, sans-serif; +} + +.navbar_back { + width: 100vw; + height: 5vh; + background-color: black; + color: white; + position: -webkit-sticky; + position: sticky; +} + +.navbar { + margin: auto; + width: 95vw; + height: 4.5vh; + display: flex; + justify-content: space-around; + padding-top: 0.6%; + font-size: 1.05rem; +} +.navbar__leftNavbar { + display: flex; + gap: 2rem; +} +.navbar__leftNavbar__cnn { + background-color: red; + height: 3vh; +} +.navbar__rightNavbar { + display: flex; + gap: 0.5rem; +} +.navbar__rightNavbar__logIn { + border: 0.1rem solid white; + border-radius: 0.5rem; + font-weight: bold; + height: 3vh; +} + +.material-symbols-outlined { + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; +} + +.tags { + display: flex; + margin: auto; + width: 70vw; +} + +.page { + margin: auto; + width: 70vw; + position: relative; + top: 2rem; +} + +.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +.wrapper__col1 { + display: flex; + flex-direction: column; +} +.wrapper__col1__mainHeadline { + font-size: 2rem; + text-align: center; + font-weight: bold; +} +.wrapper__col1__mainPicture { + background: url(https://cdn.cnn.com/cnnnext/dam/assets/221208132438-third-griner-bout-split-large-tease.jpg); + background-size: cover; + background-repeat: no-repeat; + width: 22rem; + height: 15rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.wrapper__col1__mainPicture__ANALYSIS { + background-color: black; + font-weight: bold; + color: white; + width: 25%; +} + +.seperator { + width: 20rem; + height: 0.1rem; + background-color: gray; +} + +p:hover { + background-color: aqua; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.css.map new file mode 100644 index 000000000..205fdff31 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,yCAAA;ACCJ;;ADEA;EACI,YAAA;EACA,WAAA;EACA,uBAAA;EACA,YAAA;EACA,wBAAA;EAAA,gBAAA;ACCJ;;ADEA;EACI,YAAA;EACA,WAAA;EACA,aAAA;EACA,aAAA;EACA,6BAAA;EACA,iBAAA;EACA,kBAAA;ACCJ;ADEI;EACI,aAAA;EACA,SAAA;ACAR;ADEQ;EACI,qBAAA;EACA,WAAA;ACAZ;ADKI;EACI,aAAA;EACA,WAAA;ACHR;ADKQ;EACI,0BAAA;EACA,qBAAA;EACA,iBAAA;EACA,WAAA;ACHZ;;ADWA;EACI,kEACI;ACTR;;ADeA;EACI,aAAA;EACA,YAAA;EACA,WAAA;ACZJ;;ADeA;EACI,YAAA;EACA,WAAA;EACA,kBAAA;EACA,SAAA;ACZJ;;ADeA;EACI,aAAA;EACA,kCAAA;ACZJ;ADcI;EACI,aAAA;EACA,sBAAA;ACZR;ADcQ;EACI,eAAA;EACA,kBAAA;EACA,iBAAA;ACZZ;ADeQ;EACI,4GAAA;EACA,sBAAA;EACA,4BAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;ACbZ;ADiBY;EACI,uBAAA;EACA,iBAAA;EACC,YAAA;EACA,UAAA;ACfjB;;ADsBA;EACI,YAAA;EACA,cAAA;EACA,sBAAA;ACnBJ;;ADsBA;EACI,sBAAA;ACnBJ","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.scss new file mode 100644 index 000000000..2debe3931 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/shlomi.samai/style.scss @@ -0,0 +1,117 @@ +body { + margin: 0%; + font-family: Arial, Helvetica, sans-serif; +} + +.navbar_back { + width: 100vw; + height: 5vh; + background-color: black; + color: white; + position: sticky; +} + +.navbar { + margin: auto; + width: 95vw; + height: 4.5vh; + display: flex; + justify-content: space-around; + padding-top: 0.6%; + font-size: 1.05rem; + + + &__leftNavbar { + display: flex; + gap: 2rem; + + &__cnn { + background-color: red; + height: 3vh; + } + + } + + &__rightNavbar { + display: flex; + gap: 0.5rem; + + &__logIn { + border: 0.1rem solid white; + border-radius: 0.5rem; + font-weight: bold; + height: 3vh; + } + + } +} + + + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} + +.tags { + display: flex; + margin: auto; + width: 70vw; +} + +.page { + margin: auto; + width: 70vw; + position: relative; + top: 2rem; +} + +.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + + &__col1 { + display: flex; + flex-direction: column; + + &__mainHeadline { + font-size: 2rem; + text-align: center; + font-weight: bold; + } + + &__mainPicture { + background: url(https://cdn.cnn.com/cnnnext/dam/assets/221208132438-third-griner-bout-split-large-tease.jpg); + background-size:cover; + background-repeat: no-repeat; + width: 22rem; + height: 15rem; + display: flex; + flex-direction: column; + justify-content: space-between; + + + + &__ANALYSIS { + background-color: black; + font-weight: bold; + color: white; + width: 25%; + } + } + + } + +} +.seperator { + width: 20rem; + height: 0.1rem; + background-color: gray; +} + +p:hover { + background-color: aqua; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/start.md b/01-HTML-CSS/08-Tabels-nth/followup/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/01-HTML-CSS/08-Tabels-nth/followup/style.css b/01-HTML-CSS/08-Tabels-nth/followup/style.css new file mode 100644 index 000000000..19e71044e --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/style.css @@ -0,0 +1,24 @@ +* { + margin: 0; + padding: 0; +} + +table { + margin: auto; + margin-top: 200px; + width: 400px; + height: 400px; + border: 1px solid brown; +} +table caption { + background-color: brown; + font-size: xx-large; +} +table td, table th { + width: 50px; + height: 50px; + background-color: wheat; + text-align: center; + padding: 20px; + color: brown; +} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/style.css.map b/01-HTML-CSS/08-Tabels-nth/followup/style.css.map new file mode 100644 index 000000000..03204db4f --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;ACCJ;;ADGA;EACI,YAAA;EACA,iBAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACAJ;ADGI;EACI,uBAAA;EACA,mBAAA;ACDR;ADII;EACI,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;EACA,YAAA;ACFR","file":"style.css"} \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/followup/style.scss b/01-HTML-CSS/08-Tabels-nth/followup/style.scss new file mode 100644 index 000000000..15e03e773 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/style.scss @@ -0,0 +1,31 @@ +*{ + margin: 0; + padding: 0; +} + + +table{ + margin: auto; + margin-top: 200px; + width: 400px; + height: 400px; + border: 1px solid brown; + + + caption{ + background-color: brown; + font-size: xx-large; + } + + td , th{ + width: 50px; + height: 50px; + background-color: wheat; + text-align: center; + padding: 20px; + color: brown; + } + + +} + diff --git a/01-HTML-CSS/08-Tabels-nth/followup/table.html b/01-HTML-CSS/08-Tabels-nth/followup/table.html new file mode 100644 index 000000000..36ac2ce44 --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/followup/table.html @@ -0,0 +1,41 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tic-Tac-Toe +
OXO
OOX
X0X
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/08-Tabels-nth/info/info.md b/01-HTML-CSS/08-Tabels-nth/info/info.md new file mode 100644 index 000000000..26913142b --- /dev/null +++ b/01-HTML-CSS/08-Tabels-nth/info/info.md @@ -0,0 +1,14 @@ +# Table # +## Documentation ## +https://www.w3schools.com/html/html_tables.asp +https://www.w3schools.com/tags/tag_table.asp#:~:text=An%20HTML%20table%20consists%20of,%2C%20and%20elements + +## Videos ## +https://www.youtube.com/watch?v=iDA0kF5lrVk + +# nth-child # +## Documentation ## + +https://www.w3schools.com/cssref/sel_nth-child.php + +https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/feedScreenStyle.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/feedScreenStyle.css new file mode 100644 index 000000000..5dd498ab2 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/feedScreenStyle.css @@ -0,0 +1,296 @@ +.feedScreen { + height: 700px; + width: 500px; + background-color: #faf7f7; + border: solid 1px #b7b6b6; + margin: auto; +} +.feedScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: #faf7f7; +} +.feedScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.feedScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.feedScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.feedScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.feedScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.feedScreen__title { + height: 60px; + width: 100%; + background-color: #faf7f7; + display: flex; +} +.feedScreen__title__instagram { + height: 60px; + width: 130px; + padding-left: 200px; +} +.feedScreen__title__instagram img { + height: 100%; + width: 100%; +} +.feedScreen__title__store { + height: 100%; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.feedScreen__title__store i { + font-size: x-large; + padding-top: 10px; +} +.feedScreen__feedPost { + height: 600px; + width: 100%; + background-color: #fffefe; + border: solid 1px rgba(211, 208, 208, 0.89); + box-sizing: border-box; +} +.feedScreen__feedPost__profile { + height: 60px; + width: 100%; + background-color: #fffefe; + display: flex; +} +.feedScreen__feedPost__profile__identifire { + height: 60px; + width: 500px; + background-color: #fffdfd; + display: flex; +} +.feedScreen__feedPost__profile__identifire__picture { + height: 60px; + width: 60px; + padding-left: 10px; + padding-top: 5px; +} +.feedScreen__feedPost__profile__identifire__picture img { + border-radius: 30px; + height: 50px; + width: 50px; +} +.feedScreen__feedPost__profile__identifire__username { + height: 40px; + width: 80px; + padding-top: 20px; + font-weight: bold; +} +.feedScreen__feedPost__profile__menu { + height: 40px; + width: 50px; + font-size: x-large; + padding-top: 20px; +} +.feedScreen__feedPost__mainPicture { + height: 400px; + width: 100%; + position: relative; + text-align: center; +} +.feedScreen__feedPost__mainPicture img { + height: 100%; + width: 100%; +} +.feedScreen__feedPost__mainPicture__like { + position: absolute; + font-size: 100px; + color: rgba(255, 254, 254, 0.663); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__buttons { + height: 60px; + width: 100%; + background-color: #fffefe; + border: solid 1px #b7b6b6; + display: flex; +} +.feedScreen__feedPost__buttons__likeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__commentButton { + height: 40px; + width: 35px; + background-color: #fffefe; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__shareButton { + height: 40px; + width: 35px; + background-color: #fffefe; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__postInfo { + height: 55px; + width: 100%; + background-color: #fffefe; +} +.feedScreen__feedPost__postInfo__Likes { + height: 20px; + width: 100%; + padding-top: 10px; + padding-left: 10px; + display: flex; +} +.feedScreen__feedPost__postInfo__Likes__iconLikes { + height: 100%; + width: 20px; +} +.feedScreen__feedPost__postInfo__Likes__amountLikes { + width: 100px; + height: 100%; +} +.feedScreen__feedPost__postInfo__comment { + height: 15px; + width: 100%; + padding-left: 15px; +} +.feedScreen__feedPost__postInfo__comment span { + color: blue; +} +.feedScreen__feedPost__postInfo__bubble { + height: 30px; + width: 150px; + border: 2px solid #e23636; + border-radius: 10px; + color: #e23636; + display: flex; + justify-content: space-around; + padding-top: 10px; + background-color: #e23636; + animation-name: bubble; + animation-duration: 6s; + animation-iteration-count: infinite; + position: absolute; + font-size: 10px; + top: 66%; + left: 55%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__postInfo__bubble__comment { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__comment i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__love { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__love i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__user { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__user i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid #cd2a2a; + bottom: -20px; + content: ""; + left: 50%; + margin-left: -20px; + position: absolute; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-top: 23px solid; + border-top-color: inherit; + bottom: -23px; + margin-left: -23px; +} +.feedScreen__feedPost__menuButtons { + height: 40px; + width: 100%; + background-color: #faf7f7; + border: solid 1px #b7b6b6; + display: flex; + justify-content: space-around; +} +.feedScreen__feedPost__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} + +@keyframes bubble { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/prifileScreen.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/prifileScreen.css new file mode 100644 index 000000000..4bd99fd09 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/prifileScreen.css @@ -0,0 +1,244 @@ +.profileScreen { + height: 750px; + width: 500px; + background-color: white; + border: solid 1px #b7b6b6; + margin: auto; +} +.profileScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: #faf7f7; +} +.profileScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.profileScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.profileScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.profileScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.profileScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.profileScreen__title { + height: 60px; + width: 100%; + background-color: #faf7f7; + display: flex; + justify-content: space-between; +} +.profileScreen__title__username { + height: 40px; + width: 130px; + padding-left: 200px; + padding-top: 15px; +} +.profileScreen__title__username span { + font-size: x-large; + font-weight: bold; +} +.profileScreen__title__settings { + height: 40px; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.profileScreen__title__settings i { + font-size: x-large; + padding-top: 10px; +} +.profileScreen__profileInfo { + height: 110px; + width: 100%; + display: flex; + border: solid 1px #b7b6b6; +} +.profileScreen__profileInfo__profilePicture { + height: 90px; + width: 500px; + padding-top: 5px; + padding-left: 20px; +} +.profileScreen__profileInfo__profilePicture img { + height: 100px; + width: 100px; + border-radius: 100px; +} +.profileScreen__profileInfo__profileFollow { + height: 110px; + width: 100%; + margin-right: 30px; +} +.profileScreen__profileInfo__profileFollow__profileData { + display: flex; + justify-content: space-around; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts #posts { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers #followers { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing #following { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__editProfile { + height: 30px; + width: 90%; + margin-left: 10px; + text-align: center; + background-color: #ded9d9; +} +.profileScreen__aboutUsername { + height: 110px; + width: 100%; + border: solid 1px #b7b6b6; +} +.profileScreen__aboutUsername__info { + height: 100px; + width: 200px; + padding-top: 10px; + padding-left: 15px; +} +.profileScreen__aboutUsername span { + font-size: medium; +} +.profileScreen__aboutUsername #site { + color: blue; +} +.profileScreen__sortingPictures { + height: 40px; + width: 100%; + background-color: white; + border: solid 1px #b7b6b6; + display: flex; + justify-content: space-around; + padding-top: 15px; + font-size: x-large; + color: rgba(148, 146, 146, 0.563); +} +.profileScreen__albumPicturesWrapper { + width: 100%; + height: 280px; +} +.profileScreen__albumPicturesWrapper__albumPictures { + display: grid; + gap: 5px; + grid-template-areas: "topLeftPicture topCenterPicture topRightPicture" "bottomLeftPicture bottomCenterPicture bottomRightPicture"; + height: 100%; + width: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topLeftPicture { + grid-area: topLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topCenterPicture { + grid-area: topCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topRightPicture { + grid-area: topRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomLeftPicture { + grid-area: bottomLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomCenterPicture { + grid-area: bottomCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomRightPicture { + grid-area: bottomRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures img { + width: 100%; + height: 100%; +} +.profileScreen__menuButtons { + height: 40px; + width: 100%; + background-color: #faf7f7; + border: solid 1px #b7b6b6; + display: flex; + justify-content: space-around; + padding-top: 70px; +} +.profileScreen__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/style.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreen.html b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreen.html new file mode 100644 index 000000000..7d6b7b823 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreen.html @@ -0,0 +1,116 @@ + + + + + + + FeedScreen + + + + +
+
+
+ +
+
company
+
+ +
+
19:33
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
username +
+
+
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
username Hi! #marinad +
+
+
+ 1 +
+
+ 1 +
+
+ 1 +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreenStyle.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreenStyle.css new file mode 100644 index 000000000..112bfcc3b --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreenStyle.css @@ -0,0 +1,311 @@ +.feedScreen { + height: 700px; + width: 500px; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + margin: auto; +} +.feedScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); +} +.feedScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.feedScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.feedScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.feedScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.feedScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.feedScreen__title { + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; +} +.feedScreen__title__instagram { + height: 60px; + width: 130px; + padding-left: 200px; +} +.feedScreen__title__instagram img { + height: 100%; + width: 100%; +} +.feedScreen__title__store { + height: 100%; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.feedScreen__title__store i { + font-size: x-large; + padding-top: 10px; +} +.feedScreen__feedPost { + height: 600px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgba(211, 208, 208, 0.89); + box-sizing: border-box; +} +.feedScreen__feedPost__profile { + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + display: flex; +} +.feedScreen__feedPost__profile__identifire { + height: 60px; + width: 500px; + background-color: rgb(255, 253, 253); + display: flex; +} +.feedScreen__feedPost__profile__identifire__picture { + height: 60px; + width: 60px; + padding-left: 10px; + padding-top: 5px; +} +.feedScreen__feedPost__profile__identifire__picture img { + border-radius: 30px; + height: 50px; + width: 50px; +} +.feedScreen__feedPost__profile__identifire__username { + height: 40px; + width: 80px; + padding-top: 20px; + font-weight: bold; +} +.feedScreen__feedPost__profile__menu { + height: 40px; + width: 50px; + font-size: x-large; + padding-top: 20px; +} +.feedScreen__feedPost__mainPicture { + height: 400px; + width: 100%; + position: relative; + text-align: center; +} +.feedScreen__feedPost__mainPicture img { + height: 100%; + width: 100%; +} +.feedScreen__feedPost__mainPicture__like { + position: absolute; + font-size: 100px; + color: rgba(255, 254, 254, 0.663); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__buttons { + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgb(183, 182, 182); + display: flex; +} +.feedScreen__feedPost__buttons__likeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__commentButton { + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__shareButton { + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__postInfo { + height: 55px; + width: 100%; + background-color: rgb(255, 254, 254); +} +.feedScreen__feedPost__postInfo__Likes { + height: 20px; + width: 100%; + padding-top: 10px; + padding-left: 10px; + display: flex; +} +.feedScreen__feedPost__postInfo__Likes__iconLikes { + height: 100%; + width: 20px; +} +.feedScreen__feedPost__postInfo__Likes__amountLikes { + width: 100px; + height: 100%; +} +.feedScreen__feedPost__postInfo__comment { + height: 15px; + width: 100%; + padding-left: 15px; +} +.feedScreen__feedPost__postInfo__comment span { + color: blue; +} +.feedScreen__feedPost__postInfo__bubble { + height: 30px; + width: 150px; + border: 2px solid rgb(226, 54, 54); + border-radius: 10px; + color: rgb(226, 54, 54); + display: flex; + justify-content: space-around; + padding-top: 10px; + background-color: rgb(226, 54, 54); + -webkit-animation-name: bubble; + animation-name: bubble; + -webkit-animation-duration: 6s; + animation-duration: 6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + font-size: 10px; + top: 66%; + left: 55%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__postInfo__bubble__comment { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__comment i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__love { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__love i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__user { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__user i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid rgb(205, 42, 42); + bottom: -20px; + content: ""; + left: 50%; + margin-left: -20px; + position: absolute; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-top: 23px solid; + border-top-color: inherit; + bottom: -23px; + margin-left: -23px; +} +.feedScreen__feedPost__menuButtons { + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; +} +.feedScreen__feedPost__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} + +@-webkit-keyframes bubble { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes bubble { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreenStyle.scss b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreenStyle.scss new file mode 100644 index 000000000..fa3a4da52 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/feedScreenStyle.scss @@ -0,0 +1,348 @@ + + +.feedScreen{ + height: 700px; + width: 500px; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + margin: auto; + + + &__phoneStatus{ + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); + + &__connection{ + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; + } + + &__company{ + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; + } + + &__wifi{ + height: 100%; + width: 60px; + padding-right: 50px; + } + + &__clock{ + height: 100%; + width: 70px; + } + + &__battery{ + height: 100%; + width: 30px; + padding-left: 150px; + } + + } + + &__title{ + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; + + &__instagram{ + height: 60px; + width: 130px; + padding-left: 200px; + + img{ + height: 100%; + width: 100%; + } + } + + &__store{ + height: 100%; + width: 40px; + padding-left: 130px; + padding-top: 10px; + + i{ + font-size:x-large; + padding-top: 10px; + + } + } + } + + + &__feedPost{ + height: 600px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgba(211, 208, 208, 0.89); + box-sizing: border-box; + + &__profile{ + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + display: flex; + + &__identifire{ + height: 60px; + width: 500px; + background-color: rgb(255, 253, 253); + display: flex; + + &__picture{ + height: 60px; + width: 60px; + padding-left: 10px; + padding-top: 5px; + + img{ + border-radius: 30px; + height: 50px; + width: 50px; + } + } + + &__username{ + height: 40px; + width: 80px; + padding-top: 20px; + font-weight: bold; + } + } + + &__menu{ + height: 40px; + width: 50px; + font-size: x-large; + padding-top: 20px; + } + } + + &__mainPicture{ + height: 400px; + width: 100%; + position: relative; + text-align: center; + + img{ + height: 100%; + width: 100%; + } + + &__like{ + position: absolute; + font-size: 100px; + color: rgba(255, 254, 254, 0.663); + top: 50%; + left:50%; + transform: translate(-50%, -50%); + } + } + + + &__buttons{ + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgb(183, 182, 182); + display: flex; + + &__likeButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; + } + + &__commentButton{ + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color:rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; + } + + &__shareButton{ + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color:rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; + } + } + + &__postInfo{ + height: 55px; + width: 100%; + background-color: rgb(255, 254, 254); + + &__Likes{ + height: 20px; + width: 100%; + padding-top: 10px; + padding-left: 10px; + display: flex; + + &__iconLikes{ + height: 100%; + width: 20px; + } + + &__amountLikes{ + width: 100px; + height: 100%; + } + } + + &__comment{ + height: 15px; + width: 100%; + padding-left: 15px; + + span{ + color: blue; + } + } + + &__bubble{ + height: 30px; + width: 150px; + border: 2px solid rgb(226, 54, 54); + border-radius: 10px; + color: rgb(226, 54, 54); + display: flex; + justify-content:space-around; + padding-top: 10px; + background-color: rgb(226, 54, 54); + animation-name: bubble; + animation-duration: 6s; + animation-iteration-count: infinite; + + position: absolute; + font-size: 10px; + top: 66%; + left:55%; + transform: translate(-50%, -50%); + + &__comment{ + height: 15px; + width: 30px; + + i{ + color: white; + font-size: large; + } + } + + &__love{ + height: 15px; + width: 30px; + + i{ + color: white; + font-size: large; + } + } + + &__user{ + height: 15px; + width: 30px; + + i{ + color: white; + font-size: large; + } + } + + + } + + + &__bubble::before{ + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid rgb(205, 42, 42); + bottom: -20px; + content: ''; + left: 50%; + margin-left: -20px; + position: absolute; + } + + &__bubble::before{ + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-top: 23px solid; + border-top-color: inherit; + bottom: -23px; + margin-left: -23px; + } + } + + &__menuButtons{ + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + + &__homeButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854);; + } + + &__searchButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__cameraButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__loveButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + + &__profileButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + } + } +} + +@keyframes bubble { + 0% { opacity:1; } + 50% { opacity:0; } + 100% { opacity:1; } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/prifileScreen.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/prifileScreen.css new file mode 100644 index 000000000..705bd4edc --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/prifileScreen.css @@ -0,0 +1,244 @@ +.profileScreen { + height: 750px; + width: 500px; + background-color: white; + border: solid 1px rgb(183, 182, 182); + margin: auto; +} +.profileScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); +} +.profileScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.profileScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.profileScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.profileScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.profileScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.profileScreen__title { + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; + justify-content: space-between; +} +.profileScreen__title__username { + height: 40px; + width: 130px; + padding-left: 200px; + padding-top: 15px; +} +.profileScreen__title__username span { + font-size: x-large; + font-weight: bold; +} +.profileScreen__title__settings { + height: 40px; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.profileScreen__title__settings i { + font-size: x-large; + padding-top: 10px; +} +.profileScreen__profileInfo { + height: 110px; + width: 100%; + display: flex; + border: solid 1px rgb(183, 182, 182); +} +.profileScreen__profileInfo__profilePicture { + height: 90px; + width: 500px; + padding-top: 5px; + padding-left: 20px; +} +.profileScreen__profileInfo__profilePicture img { + height: 100px; + width: 100px; + border-radius: 100px; +} +.profileScreen__profileInfo__profileFollow { + height: 110px; + width: 100%; + margin-right: 30px; +} +.profileScreen__profileInfo__profileFollow__profileData { + display: flex; + justify-content: space-around; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts #posts { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers #followers { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing #following { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__editProfile { + height: 30px; + width: 90%; + margin-left: 10px; + text-align: center; + background-color: rgb(222, 217, 217); +} +.profileScreen__aboutUsername { + height: 110px; + width: 100%; + border: solid 1px rgb(183, 182, 182); +} +.profileScreen__aboutUsername__info { + height: 100px; + width: 200px; + padding-top: 10px; + padding-left: 15px; +} +.profileScreen__aboutUsername span { + font-size: medium; +} +.profileScreen__aboutUsername #site { + color: blue; +} +.profileScreen__sortingPictures { + height: 40px; + width: 100%; + background-color: rgb(255, 255, 255); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 15px; + font-size: x-large; + color: rgba(148, 146, 146, 0.563); +} +.profileScreen__albumPicturesWrapper { + width: 100%; + height: 280px; +} +.profileScreen__albumPicturesWrapper__albumPictures { + display: grid; + gap: 5px; + grid-template-areas: "topLeftPicture topCenterPicture topRightPicture" "bottomLeftPicture bottomCenterPicture bottomRightPicture"; + height: 100%; + width: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topLeftPicture { + grid-area: topLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topCenterPicture { + grid-area: topCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topRightPicture { + grid-area: topRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomLeftPicture { + grid-area: bottomLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomCenterPicture { + grid-area: bottomCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomRightPicture { + grid-area: bottomRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures img { + width: 100%; + height: 100%; +} +.profileScreen__menuButtons { + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 70px; +} +.profileScreen__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/prifileScreen.scss b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/prifileScreen.scss new file mode 100644 index 000000000..c2d83dd3d --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/prifileScreen.scss @@ -0,0 +1,293 @@ +.profileScreen{ + height: 750px; + width: 500px; + background-color: white; + border: solid 1px rgb(183, 182, 182); + margin: auto; + + &__phoneStatus{ + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); + + &__connection{ + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; + } + + &__company{ + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; + } + + &__wifi{ + height: 100%; + width: 60px; + padding-right: 50px; + } + + &__clock{ + height: 100%; + width: 70px; + } + + &__battery{ + height: 100%; + width: 30px; + padding-left: 150px; + } + + } + + &__title{ + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; + justify-content: space-between; + + &__username{ + height: 40px; + width: 130px; + padding-left: 200px; + padding-top: 15px; + + span{ + font-size: x-large; + font-weight: bold; + } + } + + &__settings{ + height: 40px; + width: 40px; + padding-left: 130px; + padding-top: 10px; + + i{ + font-size:x-large; + padding-top: 10px; + } + } + } + + &__profileInfo{ + height: 110px; + width: 100%; + display: flex; + border: solid 1px rgb(183, 182, 182); + + &__profilePicture{ + height: 90px; + width: 500px; + padding-top: 5px; + padding-left: 20px; + + img{ + height: 100px; + width: 100px; + border-radius: 100px; + } + } + + + &__profileFollow{ + height: 110px; + width: 100%; + margin-right: 30px; + + &__profileData{ + display: flex; + justify-content: space-around; + + &__amountPosts{ + height: 60px; + width: 60px; + padding-top: 10px; + + span{ + font-weight: bold; + font-size: large; + + } + #posts{ + color: gray; + font-weight:lighter; + } + } + + &__amountFollowers{ + height: 60px; + width: 60px; + padding-top: 10px; + + span{ + font-weight: bold; + font-size: large; + + } + #followers{ + color: gray; + font-weight:lighter; + } + } + + &__amountFollowing{ + height: 60px; + width: 60px; + padding-top: 10px; + + span{ + font-weight: bold; + font-size: large; + } + #following{ + color: gray; + font-weight:lighter; + } + } + } + + &__editProfile{ + height: 30px; + width: 90%; + margin-left: 10px; + text-align: center; + background-color: rgb(222, 217, 217); + } + } + } + + &__aboutUsername{ + height: 110px; + width: 100%; + border: solid 1px rgb(183, 182, 182); + + &__info{ + height: 100px; + width: 200px; + padding-top: 10px; + padding-left: 15px; + } + span{ + font-size: medium; + } + + #site{ + color: blue; + } + } + + &__sortingPictures{ + height: 40px; + width: 100%; + background-color: rgb(255, 255, 255); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 15px; + font-size: x-large; + color: rgba(148, 146, 146, 0.563); + + } + + &__albumPicturesWrapper{ + width: 100%; + height: 280px; + + &__albumPictures{ + display: grid; + gap: 5px; + grid-template-areas: + 'topLeftPicture topCenterPicture topRightPicture' + 'bottomLeftPicture bottomCenterPicture bottomRightPicture'; + height: 100%; + width: 100%; + + &__topLeftPicture{ + grid-area: topLeftPicture; + height: 100%; + } + + &__topCenterPicture{ + grid-area: topCenterPicture; + height: 100%; + } + + &__topRightPicture{ + grid-area: topRightPicture; + height: 100%; + } + + &__bottomLeftPicture{ + grid-area: bottomLeftPicture; + height: 100%; + } + + &__bottomCenterPicture{ + grid-area: bottomCenterPicture; + height: 100%; + } + + &__bottomRightPicture{ + grid-area: bottomRightPicture; + height: 100%; + } + + img{ + width: 100%; + height: 100%; + } + } + } + + &__menuButtons{ + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 70px; + + &__homeButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854);; + } + + &__searchButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__cameraButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__loveButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__profileButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:black; + } + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/profileScreen.html b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/profileScreen.html new file mode 100644 index 000000000..c1bc07d05 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi 2/profileScreen.html @@ -0,0 +1,144 @@ + + + + + + + ProfileScreen + + + + +
+
+
+ +
+
company
+
+ +
+
19:33
+
+ +
+
+ +
+
+ username +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ 3431 +
+ posts +
+
+ 6530 +
+ posts +
+
+ 217 +
+ posts +
+
+
+ Edit Profile +
+
+
+ + +
+
+ Your Name +
+ Your bio goes here ... +
+ and here too. +
+
+ + yoursite.com +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ + + + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/feedScreenStyle.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/feedScreenStyle.css new file mode 100644 index 000000000..5dd498ab2 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/feedScreenStyle.css @@ -0,0 +1,296 @@ +.feedScreen { + height: 700px; + width: 500px; + background-color: #faf7f7; + border: solid 1px #b7b6b6; + margin: auto; +} +.feedScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: #faf7f7; +} +.feedScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.feedScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.feedScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.feedScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.feedScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.feedScreen__title { + height: 60px; + width: 100%; + background-color: #faf7f7; + display: flex; +} +.feedScreen__title__instagram { + height: 60px; + width: 130px; + padding-left: 200px; +} +.feedScreen__title__instagram img { + height: 100%; + width: 100%; +} +.feedScreen__title__store { + height: 100%; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.feedScreen__title__store i { + font-size: x-large; + padding-top: 10px; +} +.feedScreen__feedPost { + height: 600px; + width: 100%; + background-color: #fffefe; + border: solid 1px rgba(211, 208, 208, 0.89); + box-sizing: border-box; +} +.feedScreen__feedPost__profile { + height: 60px; + width: 100%; + background-color: #fffefe; + display: flex; +} +.feedScreen__feedPost__profile__identifire { + height: 60px; + width: 500px; + background-color: #fffdfd; + display: flex; +} +.feedScreen__feedPost__profile__identifire__picture { + height: 60px; + width: 60px; + padding-left: 10px; + padding-top: 5px; +} +.feedScreen__feedPost__profile__identifire__picture img { + border-radius: 30px; + height: 50px; + width: 50px; +} +.feedScreen__feedPost__profile__identifire__username { + height: 40px; + width: 80px; + padding-top: 20px; + font-weight: bold; +} +.feedScreen__feedPost__profile__menu { + height: 40px; + width: 50px; + font-size: x-large; + padding-top: 20px; +} +.feedScreen__feedPost__mainPicture { + height: 400px; + width: 100%; + position: relative; + text-align: center; +} +.feedScreen__feedPost__mainPicture img { + height: 100%; + width: 100%; +} +.feedScreen__feedPost__mainPicture__like { + position: absolute; + font-size: 100px; + color: rgba(255, 254, 254, 0.663); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__buttons { + height: 60px; + width: 100%; + background-color: #fffefe; + border: solid 1px #b7b6b6; + display: flex; +} +.feedScreen__feedPost__buttons__likeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__commentButton { + height: 40px; + width: 35px; + background-color: #fffefe; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__shareButton { + height: 40px; + width: 35px; + background-color: #fffefe; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__postInfo { + height: 55px; + width: 100%; + background-color: #fffefe; +} +.feedScreen__feedPost__postInfo__Likes { + height: 20px; + width: 100%; + padding-top: 10px; + padding-left: 10px; + display: flex; +} +.feedScreen__feedPost__postInfo__Likes__iconLikes { + height: 100%; + width: 20px; +} +.feedScreen__feedPost__postInfo__Likes__amountLikes { + width: 100px; + height: 100%; +} +.feedScreen__feedPost__postInfo__comment { + height: 15px; + width: 100%; + padding-left: 15px; +} +.feedScreen__feedPost__postInfo__comment span { + color: blue; +} +.feedScreen__feedPost__postInfo__bubble { + height: 30px; + width: 150px; + border: 2px solid #e23636; + border-radius: 10px; + color: #e23636; + display: flex; + justify-content: space-around; + padding-top: 10px; + background-color: #e23636; + animation-name: bubble; + animation-duration: 6s; + animation-iteration-count: infinite; + position: absolute; + font-size: 10px; + top: 66%; + left: 55%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__postInfo__bubble__comment { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__comment i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__love { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__love i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__user { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__user i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid #cd2a2a; + bottom: -20px; + content: ""; + left: 50%; + margin-left: -20px; + position: absolute; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-top: 23px solid; + border-top-color: inherit; + bottom: -23px; + margin-left: -23px; +} +.feedScreen__feedPost__menuButtons { + height: 40px; + width: 100%; + background-color: #faf7f7; + border: solid 1px #b7b6b6; + display: flex; + justify-content: space-around; +} +.feedScreen__feedPost__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} + +@keyframes bubble { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/prifileScreen.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/prifileScreen.css new file mode 100644 index 000000000..4bd99fd09 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/prifileScreen.css @@ -0,0 +1,244 @@ +.profileScreen { + height: 750px; + width: 500px; + background-color: white; + border: solid 1px #b7b6b6; + margin: auto; +} +.profileScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: #faf7f7; +} +.profileScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.profileScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.profileScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.profileScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.profileScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.profileScreen__title { + height: 60px; + width: 100%; + background-color: #faf7f7; + display: flex; + justify-content: space-between; +} +.profileScreen__title__username { + height: 40px; + width: 130px; + padding-left: 200px; + padding-top: 15px; +} +.profileScreen__title__username span { + font-size: x-large; + font-weight: bold; +} +.profileScreen__title__settings { + height: 40px; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.profileScreen__title__settings i { + font-size: x-large; + padding-top: 10px; +} +.profileScreen__profileInfo { + height: 110px; + width: 100%; + display: flex; + border: solid 1px #b7b6b6; +} +.profileScreen__profileInfo__profilePicture { + height: 90px; + width: 500px; + padding-top: 5px; + padding-left: 20px; +} +.profileScreen__profileInfo__profilePicture img { + height: 100px; + width: 100px; + border-radius: 100px; +} +.profileScreen__profileInfo__profileFollow { + height: 110px; + width: 100%; + margin-right: 30px; +} +.profileScreen__profileInfo__profileFollow__profileData { + display: flex; + justify-content: space-around; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts #posts { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers #followers { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing #following { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__editProfile { + height: 30px; + width: 90%; + margin-left: 10px; + text-align: center; + background-color: #ded9d9; +} +.profileScreen__aboutUsername { + height: 110px; + width: 100%; + border: solid 1px #b7b6b6; +} +.profileScreen__aboutUsername__info { + height: 100px; + width: 200px; + padding-top: 10px; + padding-left: 15px; +} +.profileScreen__aboutUsername span { + font-size: medium; +} +.profileScreen__aboutUsername #site { + color: blue; +} +.profileScreen__sortingPictures { + height: 40px; + width: 100%; + background-color: white; + border: solid 1px #b7b6b6; + display: flex; + justify-content: space-around; + padding-top: 15px; + font-size: x-large; + color: rgba(148, 146, 146, 0.563); +} +.profileScreen__albumPicturesWrapper { + width: 100%; + height: 280px; +} +.profileScreen__albumPicturesWrapper__albumPictures { + display: grid; + gap: 5px; + grid-template-areas: "topLeftPicture topCenterPicture topRightPicture" "bottomLeftPicture bottomCenterPicture bottomRightPicture"; + height: 100%; + width: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topLeftPicture { + grid-area: topLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topCenterPicture { + grid-area: topCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topRightPicture { + grid-area: topRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomLeftPicture { + grid-area: bottomLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomCenterPicture { + grid-area: bottomCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomRightPicture { + grid-area: bottomRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures img { + width: 100%; + height: 100%; +} +.profileScreen__menuButtons { + height: 40px; + width: 100%; + background-color: #faf7f7; + border: solid 1px #b7b6b6; + display: flex; + justify-content: space-around; + padding-top: 70px; +} +.profileScreen__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/style.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreen.html b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreen.html new file mode 100644 index 000000000..7d6b7b823 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreen.html @@ -0,0 +1,116 @@ + + + + + + + FeedScreen + + + + +
+
+
+ +
+
company
+
+ +
+
19:33
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
username +
+
+
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
username Hi! #marinad +
+
+
+ 1 +
+
+ 1 +
+
+ 1 +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreenStyle.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreenStyle.css new file mode 100644 index 000000000..112bfcc3b --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreenStyle.css @@ -0,0 +1,311 @@ +.feedScreen { + height: 700px; + width: 500px; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + margin: auto; +} +.feedScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); +} +.feedScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.feedScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.feedScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.feedScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.feedScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.feedScreen__title { + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; +} +.feedScreen__title__instagram { + height: 60px; + width: 130px; + padding-left: 200px; +} +.feedScreen__title__instagram img { + height: 100%; + width: 100%; +} +.feedScreen__title__store { + height: 100%; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.feedScreen__title__store i { + font-size: x-large; + padding-top: 10px; +} +.feedScreen__feedPost { + height: 600px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgba(211, 208, 208, 0.89); + box-sizing: border-box; +} +.feedScreen__feedPost__profile { + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + display: flex; +} +.feedScreen__feedPost__profile__identifire { + height: 60px; + width: 500px; + background-color: rgb(255, 253, 253); + display: flex; +} +.feedScreen__feedPost__profile__identifire__picture { + height: 60px; + width: 60px; + padding-left: 10px; + padding-top: 5px; +} +.feedScreen__feedPost__profile__identifire__picture img { + border-radius: 30px; + height: 50px; + width: 50px; +} +.feedScreen__feedPost__profile__identifire__username { + height: 40px; + width: 80px; + padding-top: 20px; + font-weight: bold; +} +.feedScreen__feedPost__profile__menu { + height: 40px; + width: 50px; + font-size: x-large; + padding-top: 20px; +} +.feedScreen__feedPost__mainPicture { + height: 400px; + width: 100%; + position: relative; + text-align: center; +} +.feedScreen__feedPost__mainPicture img { + height: 100%; + width: 100%; +} +.feedScreen__feedPost__mainPicture__like { + position: absolute; + font-size: 100px; + color: rgba(255, 254, 254, 0.663); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__buttons { + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgb(183, 182, 182); + display: flex; +} +.feedScreen__feedPost__buttons__likeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__commentButton { + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__buttons__shareButton { + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color: rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; +} +.feedScreen__feedPost__postInfo { + height: 55px; + width: 100%; + background-color: rgb(255, 254, 254); +} +.feedScreen__feedPost__postInfo__Likes { + height: 20px; + width: 100%; + padding-top: 10px; + padding-left: 10px; + display: flex; +} +.feedScreen__feedPost__postInfo__Likes__iconLikes { + height: 100%; + width: 20px; +} +.feedScreen__feedPost__postInfo__Likes__amountLikes { + width: 100px; + height: 100%; +} +.feedScreen__feedPost__postInfo__comment { + height: 15px; + width: 100%; + padding-left: 15px; +} +.feedScreen__feedPost__postInfo__comment span { + color: blue; +} +.feedScreen__feedPost__postInfo__bubble { + height: 30px; + width: 150px; + border: 2px solid rgb(226, 54, 54); + border-radius: 10px; + color: rgb(226, 54, 54); + display: flex; + justify-content: space-around; + padding-top: 10px; + background-color: rgb(226, 54, 54); + -webkit-animation-name: bubble; + animation-name: bubble; + -webkit-animation-duration: 6s; + animation-duration: 6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + font-size: 10px; + top: 66%; + left: 55%; + transform: translate(-50%, -50%); +} +.feedScreen__feedPost__postInfo__bubble__comment { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__comment i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__love { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__love i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble__user { + height: 15px; + width: 30px; +} +.feedScreen__feedPost__postInfo__bubble__user i { + color: white; + font-size: large; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid rgb(205, 42, 42); + bottom: -20px; + content: ""; + left: 50%; + margin-left: -20px; + position: absolute; +} +.feedScreen__feedPost__postInfo__bubble::before { + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-top: 23px solid; + border-top-color: inherit; + bottom: -23px; + margin-left: -23px; +} +.feedScreen__feedPost__menuButtons { + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; +} +.feedScreen__feedPost__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.feedScreen__feedPost__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} + +@-webkit-keyframes bubble { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes bubble { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreenStyle.scss b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreenStyle.scss new file mode 100644 index 000000000..fa3a4da52 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/feedScreenStyle.scss @@ -0,0 +1,348 @@ + + +.feedScreen{ + height: 700px; + width: 500px; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + margin: auto; + + + &__phoneStatus{ + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); + + &__connection{ + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; + } + + &__company{ + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; + } + + &__wifi{ + height: 100%; + width: 60px; + padding-right: 50px; + } + + &__clock{ + height: 100%; + width: 70px; + } + + &__battery{ + height: 100%; + width: 30px; + padding-left: 150px; + } + + } + + &__title{ + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; + + &__instagram{ + height: 60px; + width: 130px; + padding-left: 200px; + + img{ + height: 100%; + width: 100%; + } + } + + &__store{ + height: 100%; + width: 40px; + padding-left: 130px; + padding-top: 10px; + + i{ + font-size:x-large; + padding-top: 10px; + + } + } + } + + + &__feedPost{ + height: 600px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgba(211, 208, 208, 0.89); + box-sizing: border-box; + + &__profile{ + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + display: flex; + + &__identifire{ + height: 60px; + width: 500px; + background-color: rgb(255, 253, 253); + display: flex; + + &__picture{ + height: 60px; + width: 60px; + padding-left: 10px; + padding-top: 5px; + + img{ + border-radius: 30px; + height: 50px; + width: 50px; + } + } + + &__username{ + height: 40px; + width: 80px; + padding-top: 20px; + font-weight: bold; + } + } + + &__menu{ + height: 40px; + width: 50px; + font-size: x-large; + padding-top: 20px; + } + } + + &__mainPicture{ + height: 400px; + width: 100%; + position: relative; + text-align: center; + + img{ + height: 100%; + width: 100%; + } + + &__like{ + position: absolute; + font-size: 100px; + color: rgba(255, 254, 254, 0.663); + top: 50%; + left:50%; + transform: translate(-50%, -50%); + } + } + + + &__buttons{ + height: 60px; + width: 100%; + background-color: rgb(255, 254, 254); + border: solid 1px rgb(183, 182, 182); + display: flex; + + &__likeButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; + } + + &__commentButton{ + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color:rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; + } + + &__shareButton{ + height: 40px; + width: 35px; + background-color: rgb(255, 254, 254); + font-size: 30px; + color:rgba(0, 0, 0, 0.67); + padding-top: 15px; + padding-left: 20px; + } + } + + &__postInfo{ + height: 55px; + width: 100%; + background-color: rgb(255, 254, 254); + + &__Likes{ + height: 20px; + width: 100%; + padding-top: 10px; + padding-left: 10px; + display: flex; + + &__iconLikes{ + height: 100%; + width: 20px; + } + + &__amountLikes{ + width: 100px; + height: 100%; + } + } + + &__comment{ + height: 15px; + width: 100%; + padding-left: 15px; + + span{ + color: blue; + } + } + + &__bubble{ + height: 30px; + width: 150px; + border: 2px solid rgb(226, 54, 54); + border-radius: 10px; + color: rgb(226, 54, 54); + display: flex; + justify-content:space-around; + padding-top: 10px; + background-color: rgb(226, 54, 54); + animation-name: bubble; + animation-duration: 6s; + animation-iteration-count: infinite; + + position: absolute; + font-size: 10px; + top: 66%; + left:55%; + transform: translate(-50%, -50%); + + &__comment{ + height: 15px; + width: 30px; + + i{ + color: white; + font-size: large; + } + } + + &__love{ + height: 15px; + width: 30px; + + i{ + color: white; + font-size: large; + } + } + + &__user{ + height: 15px; + width: 30px; + + i{ + color: white; + font-size: large; + } + } + + + } + + + &__bubble::before{ + border-left: 20px solid transparent; + border-right: 20px solid transparent; + border-top: 20px solid rgb(205, 42, 42); + bottom: -20px; + content: ''; + left: 50%; + margin-left: -20px; + position: absolute; + } + + &__bubble::before{ + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-top: 23px solid; + border-top-color: inherit; + bottom: -23px; + margin-left: -23px; + } + } + + &__menuButtons{ + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + + &__homeButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854);; + } + + &__searchButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__cameraButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__loveButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + + &__profileButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + } + } +} + +@keyframes bubble { + 0% { opacity:1; } + 50% { opacity:0; } + 100% { opacity:1; } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/prifileScreen.css b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/prifileScreen.css new file mode 100644 index 000000000..705bd4edc --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/prifileScreen.css @@ -0,0 +1,244 @@ +.profileScreen { + height: 750px; + width: 500px; + background-color: white; + border: solid 1px rgb(183, 182, 182); + margin: auto; +} +.profileScreen__phoneStatus { + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); +} +.profileScreen__phoneStatus__connection { + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; +} +.profileScreen__phoneStatus__company { + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; +} +.profileScreen__phoneStatus__wifi { + height: 100%; + width: 60px; + padding-right: 50px; +} +.profileScreen__phoneStatus__clock { + height: 100%; + width: 70px; +} +.profileScreen__phoneStatus__battery { + height: 100%; + width: 30px; + padding-left: 150px; +} +.profileScreen__title { + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; + justify-content: space-between; +} +.profileScreen__title__username { + height: 40px; + width: 130px; + padding-left: 200px; + padding-top: 15px; +} +.profileScreen__title__username span { + font-size: x-large; + font-weight: bold; +} +.profileScreen__title__settings { + height: 40px; + width: 40px; + padding-left: 130px; + padding-top: 10px; +} +.profileScreen__title__settings i { + font-size: x-large; + padding-top: 10px; +} +.profileScreen__profileInfo { + height: 110px; + width: 100%; + display: flex; + border: solid 1px rgb(183, 182, 182); +} +.profileScreen__profileInfo__profilePicture { + height: 90px; + width: 500px; + padding-top: 5px; + padding-left: 20px; +} +.profileScreen__profileInfo__profilePicture img { + height: 100px; + width: 100px; + border-radius: 100px; +} +.profileScreen__profileInfo__profileFollow { + height: 110px; + width: 100%; + margin-right: 30px; +} +.profileScreen__profileInfo__profileFollow__profileData { + display: flex; + justify-content: space-around; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountPosts #posts { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowers #followers { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing { + height: 60px; + width: 60px; + padding-top: 10px; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing span { + font-weight: bold; + font-size: large; +} +.profileScreen__profileInfo__profileFollow__profileData__amountFollowing #following { + color: gray; + font-weight: lighter; +} +.profileScreen__profileInfo__profileFollow__editProfile { + height: 30px; + width: 90%; + margin-left: 10px; + text-align: center; + background-color: rgb(222, 217, 217); +} +.profileScreen__aboutUsername { + height: 110px; + width: 100%; + border: solid 1px rgb(183, 182, 182); +} +.profileScreen__aboutUsername__info { + height: 100px; + width: 200px; + padding-top: 10px; + padding-left: 15px; +} +.profileScreen__aboutUsername span { + font-size: medium; +} +.profileScreen__aboutUsername #site { + color: blue; +} +.profileScreen__sortingPictures { + height: 40px; + width: 100%; + background-color: rgb(255, 255, 255); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 15px; + font-size: x-large; + color: rgba(148, 146, 146, 0.563); +} +.profileScreen__albumPicturesWrapper { + width: 100%; + height: 280px; +} +.profileScreen__albumPicturesWrapper__albumPictures { + display: grid; + gap: 5px; + grid-template-areas: "topLeftPicture topCenterPicture topRightPicture" "bottomLeftPicture bottomCenterPicture bottomRightPicture"; + height: 100%; + width: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topLeftPicture { + grid-area: topLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topCenterPicture { + grid-area: topCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__topRightPicture { + grid-area: topRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomLeftPicture { + grid-area: bottomLeftPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomCenterPicture { + grid-area: bottomCenterPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures__bottomRightPicture { + grid-area: bottomRightPicture; + height: 100%; +} +.profileScreen__albumPicturesWrapper__albumPictures img { + width: 100%; + height: 100%; +} +.profileScreen__menuButtons { + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 70px; +} +.profileScreen__menuButtons__homeButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__searchButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__cameraButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__loveButton { + height: 40px; + width: 35px; + font-size: 30px; + color: rgba(141, 138, 138, 0.854); +} +.profileScreen__menuButtons__profileButton { + height: 40px; + width: 35px; + font-size: 30px; + color: black; +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/prifileScreen.scss b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/prifileScreen.scss new file mode 100644 index 000000000..c2d83dd3d --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/prifileScreen.scss @@ -0,0 +1,293 @@ +.profileScreen{ + height: 750px; + width: 500px; + background-color: white; + border: solid 1px rgb(183, 182, 182); + margin: auto; + + &__phoneStatus{ + height: 20px; + width: 100%; + display: flex; + background-color: rgb(250, 247, 247); + + &__connection{ + height: 100%; + width: 30px; + font-size: x-large; + padding-left: 10px; + } + + &__company{ + height: 100%; + width: 70px; + padding-right: 25px; + font-weight: bold; + } + + &__wifi{ + height: 100%; + width: 60px; + padding-right: 50px; + } + + &__clock{ + height: 100%; + width: 70px; + } + + &__battery{ + height: 100%; + width: 30px; + padding-left: 150px; + } + + } + + &__title{ + height: 60px; + width: 100%; + background-color: rgb(250, 247, 247); + display: flex; + justify-content: space-between; + + &__username{ + height: 40px; + width: 130px; + padding-left: 200px; + padding-top: 15px; + + span{ + font-size: x-large; + font-weight: bold; + } + } + + &__settings{ + height: 40px; + width: 40px; + padding-left: 130px; + padding-top: 10px; + + i{ + font-size:x-large; + padding-top: 10px; + } + } + } + + &__profileInfo{ + height: 110px; + width: 100%; + display: flex; + border: solid 1px rgb(183, 182, 182); + + &__profilePicture{ + height: 90px; + width: 500px; + padding-top: 5px; + padding-left: 20px; + + img{ + height: 100px; + width: 100px; + border-radius: 100px; + } + } + + + &__profileFollow{ + height: 110px; + width: 100%; + margin-right: 30px; + + &__profileData{ + display: flex; + justify-content: space-around; + + &__amountPosts{ + height: 60px; + width: 60px; + padding-top: 10px; + + span{ + font-weight: bold; + font-size: large; + + } + #posts{ + color: gray; + font-weight:lighter; + } + } + + &__amountFollowers{ + height: 60px; + width: 60px; + padding-top: 10px; + + span{ + font-weight: bold; + font-size: large; + + } + #followers{ + color: gray; + font-weight:lighter; + } + } + + &__amountFollowing{ + height: 60px; + width: 60px; + padding-top: 10px; + + span{ + font-weight: bold; + font-size: large; + } + #following{ + color: gray; + font-weight:lighter; + } + } + } + + &__editProfile{ + height: 30px; + width: 90%; + margin-left: 10px; + text-align: center; + background-color: rgb(222, 217, 217); + } + } + } + + &__aboutUsername{ + height: 110px; + width: 100%; + border: solid 1px rgb(183, 182, 182); + + &__info{ + height: 100px; + width: 200px; + padding-top: 10px; + padding-left: 15px; + } + span{ + font-size: medium; + } + + #site{ + color: blue; + } + } + + &__sortingPictures{ + height: 40px; + width: 100%; + background-color: rgb(255, 255, 255); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 15px; + font-size: x-large; + color: rgba(148, 146, 146, 0.563); + + } + + &__albumPicturesWrapper{ + width: 100%; + height: 280px; + + &__albumPictures{ + display: grid; + gap: 5px; + grid-template-areas: + 'topLeftPicture topCenterPicture topRightPicture' + 'bottomLeftPicture bottomCenterPicture bottomRightPicture'; + height: 100%; + width: 100%; + + &__topLeftPicture{ + grid-area: topLeftPicture; + height: 100%; + } + + &__topCenterPicture{ + grid-area: topCenterPicture; + height: 100%; + } + + &__topRightPicture{ + grid-area: topRightPicture; + height: 100%; + } + + &__bottomLeftPicture{ + grid-area: bottomLeftPicture; + height: 100%; + } + + &__bottomCenterPicture{ + grid-area: bottomCenterPicture; + height: 100%; + } + + &__bottomRightPicture{ + grid-area: bottomRightPicture; + height: 100%; + } + + img{ + width: 100%; + height: 100%; + } + } + } + + &__menuButtons{ + height: 40px; + width: 100%; + background-color: rgb(250, 247, 247); + border: solid 1px rgb(183, 182, 182); + display: flex; + justify-content: space-around; + padding-top: 70px; + + &__homeButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854);; + } + + &__searchButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__cameraButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__loveButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:rgba(141, 138, 138, 0.854); + } + + &__profileButton{ + height: 40px; + width: 35px; + font-size: 30px; + color:black; + } + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/profileScreen.html b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/profileScreen.html new file mode 100644 index 000000000..c1bc07d05 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Karin-levi/profileScreen.html @@ -0,0 +1,144 @@ + + + + + + + ProfileScreen + + + + +
+
+
+ +
+
company
+
+ +
+
19:33
+
+ +
+
+ +
+
+ username +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ 3431 +
+ posts +
+
+ 6530 +
+ posts +
+
+ 217 +
+ posts +
+
+
+ Edit Profile +
+
+
+ + +
+
+ Your Name +
+ Your bio goes here ... +
+ and here too. +
+
+ + yoursite.com +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ + + + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/dist/style.css b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/dist/style.css new file mode 100644 index 000000000..6895ef5ba --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/dist/style.css @@ -0,0 +1,298 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; +} + +a { + text-decoration: none; + color: black; +} + +.wraper { + position: relative; + width: 400px; + border: 1px solid black; + min-height: 100vh; +} +.wraper__about { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + height: 80px; + padding: 5px 10px; +} +.wraper__about__pic { + grid-column: 1/2; +} +.wraper__about__pic img { + width: 65%; + border-radius: 50%; + aspect-ratio: 1/1; +} +.wraper__about__info { + grid-column: 2/4; + display: flex; + flex-direction: column; + justify-content: center; +} +.wraper__about__info__stats > * { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 10px; +} +.wraper__about__info__stats { + display: flex; + align-items: center; + justify-content: space-around; +} +.wraper__about__info__stats span { + font-weight: bold; +} +.wraper__about__info__edit { + width: 100%; + text-align: center; + background-color: #c4c2c2; +} +.wraper__bio > * { + margin: 3px 0px; +} +.wraper__bio { + padding: 10px 5px; +} +.wraper__bio__text--site { + color: #4c8bf1; +} +.wraper__menu { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 0px; + border-top: 1px #bebebe solid; + border-bottom: 1px #bebebe solid; +} +.wraper__main { + display: grid; + grid-column: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 2px; +} +.wraper__main__pic:nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(3) { + grid-column: 3/4; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(5) { + grid-column: 2/3; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(6) { + grid-column: 3/4; + grid-row: 2/3; +} +.wraper__main__pic img { + width: 100%; + aspect-ratio: 16/13; + display: grid; + place-items: center; +} +.wraper__starter { + background-color: rgba(245, 241, 241, 0.68); + border-bottom: 1px #bebebe solid; + position: relative; +} +.wraper__starter__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5px; +} +.wraper__starter__top__company { + display: flex; + align-items: center; +} +.wraper__starter__top__company p { + margin: 0px 5px; +} +.wraper__starter__top__company h4 { + font-weight: bold; + transform: translateY(-15%); +} +.wraper__starter__top__time { + position: absolute; + left: 50%; + transform: translate(-50%); +} +.wraper__starter__bottom { + height: 40px; + position: relative; + display: flex; + align-items: center; + flex-direction: row-reverse; + padding: 0px 5px; +} +.wraper__starter__bottom__logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.wraper__starter__bottom__logo img { + width: 100px; + height: 50px; +} +.wraper__post__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; +} +.wraper__post__top__userName { + display: flex; + align-items: center; +} +.wraper__post__top__userName__pic { + width: 30px; + height: 30px; + border: none; + margin-right: 10px; +} +.wraper__post__top__userName__pic img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.wraper__post__pic { + height: 350px; +} +.wraper__post__pic img { + width: 100%; + height: 100%; +} +.wraper__post__iconsUnderPic__icons { + padding: 10px 15px; + width: 100px; + display: flex; + align-items: center; + justify-content: space-between; +} +.wraper__post__comments { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; +} +.wraper__post__comments__likes { + display: flex; + align-items: center; +} +.wraper__post__comments__likes i { + margin-right: 5px; +} +.wraper__post__comments__comment { + display: flex; +} +.wraper__post__comments__comment span { + font-weight: 900; +} +.wraper__post__comments__comment .hash { + color: #1b61bc; +} +.wraper__footer { + background-color: rgba(245, 241, 241, 0.68); + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + position: absolute; + bottom: 0px; + border-top: 1px #bebebe solid; +} +.wraper__footer__like { + position: absolute; + display: flex; + align-items: center; + justify-content: space-around; + width: 80px; + height: 30px; + background-color: #f15757; + border-radius: 10px; + right: 70px; + top: -35px; + animation: like 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; +} +.wraper__footer__like i { + z-index: 10; + display: flex; +} +.wraper__footer__like i p { + font-size: 0.7em; + margin-left: 2px; +} +.wraper__footer__like__triangle { + position: absolute; + bottom: -9px; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid #f15757; + left: 50%; + transform: translateX(-50%); + animation: triangle 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; +} + +@keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid #f15757; + } + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid #f15757; + } + 100% { + opacity: 0; + } +} +@keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/main.html b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/main.html new file mode 100644 index 000000000..7de422586 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/main.html @@ -0,0 +1,69 @@ + + + + + + + + Instagram + + + + + + +
+
+
+

.....

company

+

17:38

+
+
+
+ +
+
+
+
+
+
+
+
userName
 +
+

...

+
+
+
+
+ + + +
+
+
+ +
+

userName Hi!! #user

+
+
+
+
+ + + + + + +
+
+ + + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/Instagram_logo.svg-removebg-preview (1).png b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/Instagram_logo.svg-removebg-preview (1).png new file mode 100644 index 000000000..b554506a4 Binary files /dev/null and b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/Instagram_logo.svg-removebg-preview (1).png differ diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/dog.jpg b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/dog.jpg new file mode 100644 index 000000000..6ab430715 Binary files /dev/null and b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/dog.jpg differ diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/instagram.svg b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/instagram.svg new file mode 100644 index 000000000..0d643595f --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/mountain.jpg b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/mountain.jpg new file mode 100644 index 000000000..09c6944f8 Binary files /dev/null and b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/photos/mountain.jpg differ diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/profile.html b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/profile.html new file mode 100644 index 000000000..0feba6812 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/profile.html @@ -0,0 +1,78 @@ + + + + + + + Instagram + + + + + +
+
+
+

.....

company

+

17:38

+
+
+
+ +
+
+
+
+
+
+
+
+

345

+

posts

+
+
+

7689

+

followers

+
+
+

456

+

following

+
+
+

Edit profile

+
+
+
+

Your name

+
Your bio goes here...
+
And here too
+
yoursite.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ + + + + +
+
+ + \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/style.css b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/style.css new file mode 100644 index 000000000..7f1cbc3db --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/style.css @@ -0,0 +1,334 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; +} + +a { + text-decoration: none; + color: black; +} + +.wraper { + position: relative; + width: 400px; + border: 1px solid black; + min-height: 100vh; +} +.wraper__about { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + height: 80px; + padding: 5px 10px; +} +.wraper__about__pic { + grid-column: 1/2; +} +.wraper__about__pic img { + width: 65%; + border-radius: 50%; + aspect-ratio: 1/1; +} +.wraper__about__info { + grid-column: 2/4; + display: flex; + flex-direction: column; + justify-content: center; +} +.wraper__about__info__stats > * { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 10px; +} +.wraper__about__info__stats { + display: flex; + align-items: center; + justify-content: space-around; +} +.wraper__about__info__stats span { + font-weight: bold; +} +.wraper__about__info__edit { + width: 100%; + text-align: center; + background-color: rgb(196, 194, 194); +} +.wraper__bio > * { + margin: 3px 0px; +} +.wraper__bio { + padding: 10px 5px; +} +.wraper__bio__text--site { + color: rgb(76, 139, 241); +} +.wraper__menu { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 0px; + border-top: 1px rgb(190, 190, 190) solid; + border-bottom: 1px rgb(190, 190, 190) solid; +} +.wraper__main { + display: grid; + grid-column: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 2px; +} +.wraper__main__pic:nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(3) { + grid-column: 3/4; + grid-row: 1/2; +} +.wraper__main__pic:nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(5) { + grid-column: 2/3; + grid-row: 2/3; +} +.wraper__main__pic:nth-child(6) { + grid-column: 3/4; + grid-row: 2/3; +} +.wraper__main__pic img { + width: 100%; + aspect-ratio: 16/13; + display: grid; + place-items: center; +} +.wraper__starter { + background-color: rgba(245, 241, 241, 0.68); + border-bottom: 1px rgb(190, 190, 190) solid; + position: relative; +} +.wraper__starter__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5px; +} +.wraper__starter__top__company { + display: flex; + align-items: center; +} +.wraper__starter__top__company p { + margin: 0px 5px; +} +.wraper__starter__top__company h4 { + font-weight: bold; + transform: translateY(-15%); +} +.wraper__starter__top__time { + position: absolute; + left: 50%; + transform: translate(-50%); +} +.wraper__starter__bottom { + height: 40px; + position: relative; + display: flex; + align-items: center; + flex-direction: row-reverse; + padding: 0px 5px; +} +.wraper__starter__bottom__logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.wraper__starter__bottom__logo img { + width: 100px; + height: 50px; +} +.wraper__post__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; +} +.wraper__post__top__userName { + display: flex; + align-items: center; +} +.wraper__post__top__userName__pic { + width: 30px; + height: 30px; + border: none; + margin-right: 10px; +} +.wraper__post__top__userName__pic img { + width: 100%; + height: 100%; + border-radius: 50%; +} +.wraper__post__pic { + height: 350px; +} +.wraper__post__pic img { + width: 100%; + height: 100%; +} +.wraper__post__iconsUnderPic__icons { + padding: 10px 15px; + width: 100px; + display: flex; + align-items: center; + justify-content: space-between; +} +.wraper__post__comments { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; +} +.wraper__post__comments__likes { + display: flex; + align-items: center; +} +.wraper__post__comments__likes i { + margin-right: 5px; +} +.wraper__post__comments__comment { + display: flex; +} +.wraper__post__comments__comment span { + font-weight: 900; +} +.wraper__post__comments__comment .hash { + color: rgb(27, 97, 188); +} +.wraper__footer { + background-color: rgba(245, 241, 241, 0.68); + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + position: absolute; + bottom: 0px; + border-top: 1px rgb(190, 190, 190) solid; +} +.wraper__footer__like { + position: absolute; + display: flex; + align-items: center; + justify-content: space-around; + width: 80px; + height: 30px; + background-color: rgb(241, 87, 87); + border-radius: 10px; + right: 70px; + top: -35px; + -webkit-animation: like 4s ease-in; + animation: like 4s ease-in; + -webkit-animation-delay: 1s; + animation-delay: 1s; + opacity: 0; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.wraper__footer__like i { + z-index: 10; + display: flex; +} +.wraper__footer__like i p { + font-size: 0.7em; + margin-left: 2px; +} +.wraper__footer__like__triangle { + position: absolute; + bottom: -9px; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid rgb(241, 87, 87); + left: 50%; + transform: translateX(-50%); + -webkit-animation: triangle 4s ease-in; + animation: triangle 4s ease-in; + -webkit-animation-delay: 1s; + animation-delay: 1s; + opacity: 0; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@-webkit-keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid rgb(241, 87, 87); + } + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid rgb(241, 87, 87); + } + 100% { + opacity: 0; + } +} + +@keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid rgb(241, 87, 87); + } + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid rgb(241, 87, 87); + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/style.scss b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/style.scss new file mode 100644 index 000000000..1c23a98a9 --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/Omer.Virshuvski/style.scss @@ -0,0 +1,360 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; +} + +a { + text-decoration: none; + color: black; +} + +.wraper { + position: relative; + width: 400px; + border: 1px solid black; + min-height: 100vh; + + &__about { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + height: 80px; + padding: 5px 10px; + &__pic { + grid-column: 1/2; + img { + width: 65%; + border-radius: 50%; + aspect-ratio: 1/1; + } + } + &__info { + grid-column: 2/4; + display: flex; + flex-direction: column; + justify-content: center; + &__stats > * { + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 10px; + } + &__stats { + span { + font-weight: bold; + } + display: flex; + align-items: center; + justify-content: space-around; + } + &__edit { + width: 100%; + text-align: center; + background-color: rgb(196, 194, 194); + } + } + } + + &__bio > * { + margin: 3px 0px; + } + &__bio { + padding: 10px + 5px; + &__text { + &--site { + color: rgb(76, 139, 241); + } + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 0px; + border-top: 1px rgb(190, 190, 190) solid; + border-bottom: 1px rgb(190, 190, 190) solid; + } + + &__main { + display: grid; + grid-column: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-gap: 2px; + &__pic:nth-child(1) { + grid-column: 1/2; + grid-row: 1/2; + } + &__pic:nth-child(2) { + grid-column: 2/3; + grid-row: 1/2; + } + &__pic:nth-child(3) { + grid-column: 3/4; + grid-row: 1/2; + } + &__pic:nth-child(4) { + grid-column: 1/2; + grid-row: 2/3; + } + &__pic:nth-child(5) { + grid-column: 2/3; + grid-row: 2/3; + } + &__pic:nth-child(6) { + grid-column: 3/4; + grid-row: 2/3; + } + &__pic { + img { + width: 100%; + aspect-ratio: 16/13; + display: grid; + place-items: center; + } + } + } + + + + + + + + + + + + + + + + &__starter { + background-color: rgba(245, 241, 241, 0.68); + border-bottom: 1px rgb(190, 190, 190) solid; + position: relative; + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 5px; + + &__company { + display: flex; + align-items: center; + + p { + margin: 0px 5px; + } + + h4 { + font-weight: bold; + transform: translateY(-15%); + } + } + + &__time { + position: absolute; + left: 50%; + transform: translate(-50%); + } + } + + &__bottom { + height: 40px; + position: relative; + display: flex; + align-items: center; + flex-direction: row-reverse; + padding: 0px 5px; + + &__logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + img { + width: 100px; + height: 50px; + } + } + } + } + + + &__post { + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; + + &__userName { + display: flex; + align-items: center; + + &__pic { + width: 30px; + height: 30px; + border: none; + margin-right: 10px; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + } + } + } + } + + &__pic { + height: 350px; + + img { + width: 100%; + height: 100%; + } + } + + &__iconsUnderPic { + &__icons { + padding: 10px 15px; + width: 100px; + display: flex; + align-items: center; + justify-content: space-between; + } + } + + &__comments { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; + + &__likes { + i { + margin-right: 5px; + } + + display: flex; + align-items: center; + } + + &__comment { + span { + font-weight: 900; + } + + .hash { + color: rgb(27, 97, 188); + } + + display: flex; + } + } + } + + + &__footer { + background-color: rgba(245, 241, 241, 0.68); + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + position: absolute; + bottom: 0px; + border-top: 1px rgb(190, 190, 190) solid; + + &__like { + position: absolute; + display: flex; + align-items: center; + justify-content: space-around; + width: 80px; + height: 30px; + background-color: rgb(241, 87, 87); + border-radius: 10px; + right: 70px; + top: -35px; + animation: like 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; + + i { + z-index: 10; + display: flex; + + p { + font-size: .7em; + margin-left: 2px; + } + } + + &__triangle { + position: absolute; + bottom: -9px; + width: 0px; + height: 0px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid rgb(241, 87, 87); + left: 50%; + transform: translateX(-50%); + animation: triangle 4s ease-in; + animation-delay: 1s; + opacity: 0; + animation-fill-mode: forwards; + } + } + } +} + +@keyframes triangle { + 0% { + bottom: -15px; + border-top: 10px solid rgb(241, 87, 87); + } + + 10% { + bottom: -9px; + opacity: 1; + border-top: 20px solid rgb(241, 87, 87); + } + + 100% { + opacity: 0; + } +} + + +@keyframes like { + 0% { + top: -10px; + height: 0px; + opacity: 0; + } + + 10% { + top: -35px; + height: 30px; + opacity: 1; + } + + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/01-HTML-CSS/09-CSS-final-test/info/info.md b/01-HTML-CSS/09-CSS-final-test/info/info.md new file mode 100644 index 000000000..1c076e27c --- /dev/null +++ b/01-HTML-CSS/09-CSS-final-test/info/info.md @@ -0,0 +1,6 @@ +Horray, we have finished CSS!!! +Now let us see how far we got. + +You will be given 3 hours and an image of a website. You would be asked to recreate a responsive site (with BEM classes). +After you finish, please submit the files (not in zip or rar) to the LMS. +Prepare yourself! \ No newline at end of file diff --git a/02-TypeScript/.vscode/settings.json b/02-TypeScript/.vscode/settings.json new file mode 100644 index 000000000..806f79030 --- /dev/null +++ b/02-TypeScript/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false, + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/02-TypeScript/01-intro/example/dist/style.css b/02-TypeScript/01-intro/example/dist/style.css new file mode 100644 index 000000000..0482dafce --- /dev/null +++ b/02-TypeScript/01-intro/example/dist/style.css @@ -0,0 +1,11 @@ +.wrapper { + margin: auto; + display: flex; + max-width: 300px; + gap: 10px; +} +.wrapper .box { + width: 300px; + height: 200px; + background-color: teal; +} \ No newline at end of file diff --git a/02-TypeScript/01-intro/example/index.dev.js b/02-TypeScript/01-intro/example/index.dev.js new file mode 100644 index 000000000..e7beba961 --- /dev/null +++ b/02-TypeScript/01-intro/example/index.dev.js @@ -0,0 +1,20 @@ +"use strict"; + +var boxs = document.querySelectorAll('.box'); +console.log(boxs); +boxs.forEach(function (box) { + box.addEventListener('click', function () { + box.style.backgroundColor = getRandomColor(); + }); +}); + +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + + return color; +} \ No newline at end of file diff --git a/02-TypeScript/01-intro/example/index.html b/02-TypeScript/01-intro/example/index.html new file mode 100644 index 000000000..fac5a144e --- /dev/null +++ b/02-TypeScript/01-intro/example/index.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/02-TypeScript/01-intro/example/index.js b/02-TypeScript/01-intro/example/index.js new file mode 100644 index 000000000..f75d72e11 --- /dev/null +++ b/02-TypeScript/01-intro/example/index.js @@ -0,0 +1,17 @@ +const boxs = document.querySelectorAll('.box'); +console.log(boxs); +boxs.forEach(box=>{ + box.addEventListener('click',()=>{ + box.style.backgroundColor = getRandomColor(); + }) +}) + +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; + } + \ No newline at end of file diff --git a/02-TypeScript/01-intro/example/style.css b/02-TypeScript/01-intro/example/style.css new file mode 100644 index 000000000..0482dafce --- /dev/null +++ b/02-TypeScript/01-intro/example/style.css @@ -0,0 +1,11 @@ +.wrapper { + margin: auto; + display: flex; + max-width: 300px; + gap: 10px; +} +.wrapper .box { + width: 300px; + height: 200px; + background-color: teal; +} \ No newline at end of file diff --git a/02-TypeScript/01-intro/example/style.scss b/02-TypeScript/01-intro/example/style.scss new file mode 100644 index 000000000..61f6c3d3f --- /dev/null +++ b/02-TypeScript/01-intro/example/style.scss @@ -0,0 +1,11 @@ +.wrapper{ + margin: auto; + display: flex; + max-width: 300px; + gap:10px; + .box{ + width: 300px; + height: 200px; + background-color: teal; + } +} \ No newline at end of file diff --git a/02-TypeScript/02-variables/example/dist/index.dev.js b/02-TypeScript/02-variables/example/dist/index.dev.js new file mode 100644 index 000000000..845ac2584 --- /dev/null +++ b/02-TypeScript/02-variables/example/dist/index.dev.js @@ -0,0 +1,29 @@ +"use strict"; + +// console.log("Hi Tal"); +// console.log('Good evening'); +// console.error('This is a F*ing error'); +// console.warn("Be aware") +// console.time('aaaaa'); +// console.timeEnd('aaaaa'); +// console.info('info'); +//variable +var x = "This is a varibale"; +console.log(x); +x = 4; +console.log(x); +var y = x; //השמה + +console.log(y); +var z = y * x; +console.log(z); //example for using variables + +function handleSubmit(event) { + event.preventDefault(); + var amount = event.target.elements.number.valueAsNumber; + console.log(amount); + var vat = amount * 1.17; + document.querySelector('#root').innerText = "Vat is ".concat(vat); +} + +var key = 'b8djm8'; \ No newline at end of file diff --git a/02-TypeScript/02-variables/example/index.dev.js b/02-TypeScript/02-variables/example/index.dev.js new file mode 100644 index 000000000..5b7a49daa --- /dev/null +++ b/02-TypeScript/02-variables/example/index.dev.js @@ -0,0 +1,35 @@ +"use strict"; +<<<<<<< HEAD +======= + +// console.log("Hi Tal"); +// console.log('Good evening'); +// console.error('This is a F*ing error'); +// console.warn("Be aware") +// console.time('aaaaa'); +// console.timeEnd('aaaaa'); +// console.info('info'); +//variable +var x = "This is a varibale"; +console.log(x); +x = 4; +console.log(x); +var y = x; //השמה + +console.log(y); +var z = y * x; +console.log(z); //example for using variables + +function handleSubmit(event) { + event.preventDefault(); + var amount = event.target.elements.number.valueAsNumber; + console.log(amount); + var vat = amount * 1.17; + document.querySelector('#root').innerText = "Vat is ".concat(vat); +} +<<<<<<< HEAD + +var key = 'b8djm8'; +======= +>>>>>>> 1dc92fe084d0eae8e6129c6fd5f28d8682976236 +>>>>>>> main diff --git a/02-TypeScript/02-variables/example/index.html b/02-TypeScript/02-variables/example/index.html new file mode 100644 index 000000000..b533e7474 --- /dev/null +++ b/02-TypeScript/02-variables/example/index.html @@ -0,0 +1,20 @@ + + + + + + + + Document + + + +
+ + +
+
Answer:
+ + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/example/index.js b/02-TypeScript/02-variables/example/index.js new file mode 100644 index 000000000..0c674b5d6 --- /dev/null +++ b/02-TypeScript/02-variables/example/index.js @@ -0,0 +1,45 @@ +// console.log("Hi Tal"); +// console.log('Good evening'); +// console.error('This is a F*ing error'); +// console.warn("Be aware") +// console.time('aaaaa'); +// console.timeEnd('aaaaa'); +// console.info('info'); + + +//variable + +var x = "This is a varibale"; +console.log(x); +x = 4; +console.log(x); + +var y = x; //השמה +console.log(y); + +var z = y*x; +console.log(z); + + + + + +//example for using variables + +function handleSubmit(event){ + event.preventDefault(); + var amount = event.target.elements.number.valueAsNumber; + console.log(amount) + var vat = amount * 1.17; + document.querySelector('#root').innerText = `Vat is ${vat}` +} + +var key = 'b8djm8' + + + + + + + + diff --git a/02-TypeScript/02-variables/followup2/Vladi_bykanov/dist/mail.dev.js b/02-TypeScript/02-variables/followup2/Vladi_bykanov/dist/mail.dev.js new file mode 100644 index 000000000..5da03f648 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/Vladi_bykanov/dist/mail.dev.js @@ -0,0 +1,16 @@ +"use strict"; + +var incrementBtn = document.getElementById('increment-btn'); +var amount = document.getElementById("count"); +var resetBtn = document.getElementById("reset-btn"); +var count = 0; +incrementBtn.addEventListener('click', function () { + count++; + amount.textContent = count; + console.log(count); +}); +resetBtn.addEventListener('click', function () { + count = 0; + amount.textContent = count; + console.log(count); +}); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/Vladi_bykanov/index.html b/02-TypeScript/02-variables/followup2/Vladi_bykanov/index.html new file mode 100644 index 000000000..3e8109e0f --- /dev/null +++ b/02-TypeScript/02-variables/followup2/Vladi_bykanov/index.html @@ -0,0 +1,19 @@ + + + + + + + People Counter + + + +

People Entered

+

0

+ + + + + diff --git a/02-TypeScript/02-variables/followup2/Vladi_bykanov/mail.js b/02-TypeScript/02-variables/followup2/Vladi_bykanov/mail.js new file mode 100644 index 000000000..8d0b0c1cd --- /dev/null +++ b/02-TypeScript/02-variables/followup2/Vladi_bykanov/mail.js @@ -0,0 +1,17 @@ + +const incrementBtn = document.getElementById('increment-btn') +const amount = document.getElementById("count") +const resetBtn = document.getElementById("reset-btn") +let count = 0; + +incrementBtn.addEventListener('click', () => { + count ++ + amount.textContent = count + console.log(count) +}) + +resetBtn.addEventListener('click', () => { + count = 0 + amount.textContent = count + console.log(count) +}) \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/Vladi_bykanov/style.css b/02-TypeScript/02-variables/followup2/Vladi_bykanov/style.css new file mode 100644 index 000000000..037c9e1d6 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/Vladi_bykanov/style.css @@ -0,0 +1,30 @@ +html { + background-color: bisque; +} + +body { + height: 80vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; +} + +h1 { + font-size: 50px; +} + +h2 { + font-size: 80px; +} + +button { + font-size: 40px; + background-color: brown; + border: none; + border-radius: 10px; +} + +#increment-btn:hover { + border: 3px solid blue; +} \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/adi/dist/index.js b/02-TypeScript/02-variables/followup2/adi/dist/index.js new file mode 100644 index 000000000..a1939a2e1 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/adi/dist/index.js @@ -0,0 +1,6 @@ +var firstName = "adi"; +var firstAge = 45; +var otherName = "beni"; +var otherAge = 55; +var z = (otherAge + firstAge) / 2; +console.log(z); diff --git a/02-TypeScript/02-variables/followup2/adi/index.html b/02-TypeScript/02-variables/followup2/adi/index.html new file mode 100644 index 000000000..0e547c5bf --- /dev/null +++ b/02-TypeScript/02-variables/followup2/adi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/adi/index.ts b/02-TypeScript/02-variables/followup2/adi/index.ts new file mode 100644 index 000000000..79d51eec6 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/adi/index.ts @@ -0,0 +1,11 @@ + +var firstName:string = "adi"; +var firstAge:number = 45; + +var otherName:string = "beni"; +var otherAge:number = 55; + + +var z:number = (otherAge + firstAge) / 2; + +console.log(z); diff --git a/02-TypeScript/02-variables/followup2/room 10/dist/index.dev.js b/02-TypeScript/02-variables/followup2/room 10/dist/index.dev.js new file mode 100644 index 000000000..53830c654 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/room 10/dist/index.dev.js @@ -0,0 +1,12 @@ +"use strict"; + +var x = 5; +var y = 6; +console.log('x=', x); +console.log('y=', y); +var z = x + y; +console.log('z=', z); +z = x * x; +console.log('z=', z); +z = x + x; +console.log('z=', z); // for(i=0;) \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/room 10/index.html b/02-TypeScript/02-variables/followup2/room 10/index.html new file mode 100644 index 000000000..1d6a7af63 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/room 10/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/room 10/index.js b/02-TypeScript/02-variables/followup2/room 10/index.js new file mode 100644 index 000000000..42522d740 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/room 10/index.js @@ -0,0 +1,19 @@ +var x= 5; +var y= 6; + +console.log('x=',x); +console.log('y=',y); + +var z= x+y; +console.log('z=',z); + +z=x*x; +console.log('z=',z); + +z=x+x; +console.log('z=',z); + +// for(i=0;) + + + diff --git a/02-TypeScript/02-variables/followup2/shai-li/dist/index.dev.js b/02-TypeScript/02-variables/followup2/shai-li/dist/index.dev.js new file mode 100644 index 000000000..5968c7082 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/shai-li/dist/index.dev.js @@ -0,0 +1,7 @@ +"use strict"; + +var x = 3; +var y = 6; +var z = Math.pow(y, 2); +var x = z; +console.log(x); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/shai-li/index.html b/02-TypeScript/02-variables/followup2/shai-li/index.html new file mode 100644 index 000000000..0405ea76d --- /dev/null +++ b/02-TypeScript/02-variables/followup2/shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/02-TypeScript/02-variables/followup2/shai-li/index.js b/02-TypeScript/02-variables/followup2/shai-li/index.js new file mode 100644 index 000000000..cad1ecbd5 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/shai-li/index.js @@ -0,0 +1,7 @@ +var x = 3; +var y = 6; +var z = y ** 2; +var x = z; + + +console.log(x) \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/shalomcop/dist/index.dev.js b/02-TypeScript/02-variables/followup2/shalomcop/dist/index.dev.js new file mode 100644 index 000000000..8468654d3 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/shalomcop/dist/index.dev.js @@ -0,0 +1,14 @@ +"use strict"; + +console.log('Shalom Copperman'); +var x = 100; +console.log(x); +var y = x * 3.4; +console.log(y); +var z = y + x; +console.log(z); +console.log('This is a Home work'); +console.log("this is x:", x); +console.log('this its y:', y); +console.log('this is z:', z); +console.log('Well done! Your score is:', x); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/shalomcop/index.html b/02-TypeScript/02-variables/followup2/shalomcop/index.html new file mode 100644 index 000000000..120e16661 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/shalomcop/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + ; + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/shalomcop/index.js b/02-TypeScript/02-variables/followup2/shalomcop/index.js new file mode 100644 index 000000000..2ac4b5a66 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/shalomcop/index.js @@ -0,0 +1,12 @@ +console.log ('Shalom Copperman'); +var x=100; +console.log(x); +var y=x*3.4; +console.log(y); +var z=y+x; +console.log(z); +console.log('This is a Home work'); +console.log("this is x:",x) +console.log('this its y:',y) +console.log('this is z:',z) +console.log('Well done! Your score is:',x); diff --git a/02-TypeScript/02-variables/followup2/start.md b/02-TypeScript/02-variables/followup2/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followup2/yuval.p - ts test/dist/index.js b/02-TypeScript/02-variables/followup2/yuval.p - ts test/dist/index.js new file mode 100644 index 000000000..1635a7a86 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/yuval.p - ts test/dist/index.js @@ -0,0 +1,10 @@ +var myName = "Yuval"; +var age = 24; +console.log(myName, age); +var myName = "Matanel"; +var age = 23; +console.log(myName, age); +var x = (24 + 23) / 2; +console.log(x); +console.log("The matanel and yuval average age is " + x); +console.log(myName + " age is " + age + " and he is married:" + isMarried); diff --git a/02-TypeScript/02-variables/followup2/yuval.p - ts test/index.html b/02-TypeScript/02-variables/followup2/yuval.p - ts test/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/02-variables/followup2/yuval.p - ts test/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followup2/yuval.p - ts test/index.ts b/02-TypeScript/02-variables/followup2/yuval.p - ts test/index.ts new file mode 100644 index 000000000..abe1341a5 --- /dev/null +++ b/02-TypeScript/02-variables/followup2/yuval.p - ts test/index.ts @@ -0,0 +1,11 @@ +var myName:string = "Yuval"; +var age:number = 24; +console.log(myName,age) +var myName:string = "Matanel"; +var age:number = 23; +console.log(myName,age) +var x = (24+23)/2; +console.log(x) +console.log(`The matanel and yuval average age is ${x}`) + +console.log(`${myName} age is ${age} and he is married:${isMarried}`); diff --git a/02-TypeScript/02-variables/followups/Itai-g/dist/index.dev.js b/02-TypeScript/02-variables/followups/Itai-g/dist/index.dev.js new file mode 100644 index 000000000..15a652791 --- /dev/null +++ b/02-TypeScript/02-variables/followups/Itai-g/dist/index.dev.js @@ -0,0 +1,18 @@ +"use strict"; + +console.log('hi itai'); +console.error('erorrrrr'); +console.warn('warning'); +console.time('sss'); +console.timeEnd('sss'); //variable// + +var x = "this is a variable"; +x = 60; +console.log(x); +var y = "this is a variable"; +y = 2; +var z = x * y; +console.log(z); +var z = x + y; +console.log(z); +y = 10; \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/Itai-g/dist/styles.css b/02-TypeScript/02-variables/followups/Itai-g/dist/styles.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/Itai-g/index.html b/02-TypeScript/02-variables/followups/Itai-g/index.html new file mode 100644 index 000000000..2c9f95aad --- /dev/null +++ b/02-TypeScript/02-variables/followups/Itai-g/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/Itai-g/index.js b/02-TypeScript/02-variables/followups/Itai-g/index.js new file mode 100644 index 000000000..3c4882964 --- /dev/null +++ b/02-TypeScript/02-variables/followups/Itai-g/index.js @@ -0,0 +1,23 @@ +console.log('hi itai'); +console.error('erorrrrr'); +console.warn('warning'); +console.time('sss'); +console.timeEnd('sss'); + +//variable// +var x = "this is a variable"; +x = 60 +console.log(x); +var y = "this is a variable" +y = 2 +var z = x*y; +console.log(z); + + +var z = x+y; +console.log(z) + + + +y = 10 + diff --git a/02-TypeScript/02-variables/followups/Itai-g/styles.css b/02-TypeScript/02-variables/followups/Itai-g/styles.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/Itai-g/styles.scss b/02-TypeScript/02-variables/followups/Itai-g/styles.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/ItayAmosi/dist/index.dev.js b/02-TypeScript/02-variables/followups/ItayAmosi/dist/index.dev.js new file mode 100644 index 000000000..7eed5bd72 --- /dev/null +++ b/02-TypeScript/02-variables/followups/ItayAmosi/dist/index.dev.js @@ -0,0 +1,24 @@ +"use strict"; + +console.log("hi itay"); //var + +var x = 42; +console.log(x); +var y = 58; +console.log(y); +var z = y + x; +console.log(z); +z = y * x; +console.log(z); +z = y * x + x; +console.log(z); +z = y + x / x; +console.log(z); + +function handleSubmit(event) { + event.preventDefault(); + var amount = event.target.elements.number.valueAsNumber; + console.log(amount); + var vat = amount * 1.17; + document.querySelector('#root').innerText = "Vat is ".concat(vat); +} \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/ItayAmosi/index.html b/02-TypeScript/02-variables/followups/ItayAmosi/index.html new file mode 100644 index 000000000..0c0f94e02 --- /dev/null +++ b/02-TypeScript/02-variables/followups/ItayAmosi/index.html @@ -0,0 +1,17 @@ + + + + + + + Document + + +
+ + +
+
Answer:
+ + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/ItayAmosi/index.js b/02-TypeScript/02-variables/followups/ItayAmosi/index.js new file mode 100644 index 000000000..854f417bf --- /dev/null +++ b/02-TypeScript/02-variables/followups/ItayAmosi/index.js @@ -0,0 +1,33 @@ +console.log("hi itay"); + + + + + +//var + +var x = 42; +console.log(x); + var y = 58; + console.log(y); + + var z = y + x; + console.log(z); + + z = y * x; + console.log(z); + + z = y * x + x; + console.log(z); + + z = y + x / x; +console.log(z); + + +function handleSubmit(event){ + event.preventDefault(); + var amount = event.target.elements.number.valueAsNumber; + console.log(amount) + var vat = amount * 1.17; + document.querySelector('#root').innerText = `Vat is ${vat}` +} diff --git a/02-TypeScript/02-variables/followups/ItayAmosi/style.css b/02-TypeScript/02-variables/followups/ItayAmosi/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/ItayAmosi/style.scss b/02-TypeScript/02-variables/followups/ItayAmosi/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/Karin-Levi/dist/index.dev.js b/02-TypeScript/02-variables/followups/Karin-Levi/dist/index.dev.js new file mode 100644 index 000000000..926f4e4e6 --- /dev/null +++ b/02-TypeScript/02-variables/followups/Karin-Levi/dist/index.dev.js @@ -0,0 +1,4 @@ +"use strict"; + +console.log('Hi karin'); +var x = "This is a varibale"; \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/Karin-Levi/index.html b/02-TypeScript/02-variables/followups/Karin-Levi/index.html new file mode 100644 index 000000000..19ca2b02d --- /dev/null +++ b/02-TypeScript/02-variables/followups/Karin-Levi/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/Karin-Levi/index.js b/02-TypeScript/02-variables/followups/Karin-Levi/index.js new file mode 100644 index 000000000..839391c49 --- /dev/null +++ b/02-TypeScript/02-variables/followups/Karin-Levi/index.js @@ -0,0 +1,6 @@ +console.log('Hi karin'); + +var x = "This is a varibale"; + + + diff --git a/02-TypeScript/02-variables/followups/Nikita Rossenko/dist/index.dev.js b/02-TypeScript/02-variables/followups/Nikita Rossenko/dist/index.dev.js new file mode 100644 index 000000000..af084cdcf --- /dev/null +++ b/02-TypeScript/02-variables/followups/Nikita Rossenko/dist/index.dev.js @@ -0,0 +1,12 @@ +"use strict"; + +console.log("Hey Nikita!!!!"); +var x = 10; +var y = 2; +console.log("My x is: " + x + " and my y is: " + y); +var z = 5; +console.log('Lets add also z which is: ' + z); +var sum = x + y; +console.log("lets add x to y so x+y=" + sum); +sum = z + y; +console.log("lets add z to y so z+y=" + sum); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/Nikita Rossenko/index.html b/02-TypeScript/02-variables/followups/Nikita Rossenko/index.html new file mode 100644 index 000000000..2c9f95aad --- /dev/null +++ b/02-TypeScript/02-variables/followups/Nikita Rossenko/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/Nikita Rossenko/index.js b/02-TypeScript/02-variables/followups/Nikita Rossenko/index.js new file mode 100644 index 000000000..8028fef5b --- /dev/null +++ b/02-TypeScript/02-variables/followups/Nikita Rossenko/index.js @@ -0,0 +1,17 @@ +console.log("Hey Nikita!!!!"); + + +var x = 10; +var y = 2; + +console.log("My x is: " + x + " and my y is: " + y); + +var z = 5; + +console.log('Lets add also z which is: ' + z); + +var sum = x + y +console.log("lets add x to y so x+y=" + sum); + +sum = z + y +console.log("lets add z to y so z+y=" + sum); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/adi/dist/index.dev.js b/02-TypeScript/02-variables/followups/adi/dist/index.dev.js new file mode 100644 index 000000000..c54728159 --- /dev/null +++ b/02-TypeScript/02-variables/followups/adi/dist/index.dev.js @@ -0,0 +1,9 @@ +"use strict"; + +var x = "this is var"; +console.log(x); +x = 10; +console.log(x); +var y = 10; +var z = y * x; +console.log(z); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/adi/index.html b/02-TypeScript/02-variables/followups/adi/index.html new file mode 100644 index 000000000..36aaedd59 --- /dev/null +++ b/02-TypeScript/02-variables/followups/adi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/adi/index.js b/02-TypeScript/02-variables/followups/adi/index.js new file mode 100644 index 000000000..e7bcec53a --- /dev/null +++ b/02-TypeScript/02-variables/followups/adi/index.js @@ -0,0 +1,13 @@ + + +var x = "this is var" + console.log(x); + +x = 10; + +console.log(x); + +var y = 10; + +var z = y*x; +console.log(z) \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/amit/dist/index.dev.js b/02-TypeScript/02-variables/followups/amit/dist/index.dev.js new file mode 100644 index 000000000..dda3b6ccc --- /dev/null +++ b/02-TypeScript/02-variables/followups/amit/dist/index.dev.js @@ -0,0 +1,4 @@ +"use strict"; + +console.log('hi amit'); +var x = 2; \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/amit/index.html b/02-TypeScript/02-variables/followups/amit/index.html new file mode 100644 index 000000000..1d6a7af63 --- /dev/null +++ b/02-TypeScript/02-variables/followups/amit/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/amit/index.js b/02-TypeScript/02-variables/followups/amit/index.js new file mode 100644 index 000000000..55337ed82 --- /dev/null +++ b/02-TypeScript/02-variables/followups/amit/index.js @@ -0,0 +1,3 @@ +console.log('hi amit'); + +var x=2; diff --git a/02-TypeScript/02-variables/followups/angela/dist/index.dev.js b/02-TypeScript/02-variables/followups/angela/dist/index.dev.js new file mode 100644 index 000000000..5b2b0a6c0 --- /dev/null +++ b/02-TypeScript/02-variables/followups/angela/dist/index.dev.js @@ -0,0 +1,9 @@ +"use strict"; + +console.log('hi angela'); +var x = 7; +var y = 15; +var z = x * y; +console.log(z); +y = z + 1; +console.log(y); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/angela/index.html b/02-TypeScript/02-variables/followups/angela/index.html new file mode 100644 index 000000000..19ca2b02d --- /dev/null +++ b/02-TypeScript/02-variables/followups/angela/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/angela/index.js b/02-TypeScript/02-variables/followups/angela/index.js new file mode 100644 index 000000000..d9a97b072 --- /dev/null +++ b/02-TypeScript/02-variables/followups/angela/index.js @@ -0,0 +1,9 @@ +console.log('hi angela') +var x = 7; +var y = 15; +var z = x*y; +console.log(z) + +y = z+1 + +console.log(y) \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/asael-matari/dist/index.dev.js b/02-TypeScript/02-variables/followups/asael-matari/dist/index.dev.js new file mode 100644 index 000000000..82cd393a4 --- /dev/null +++ b/02-TypeScript/02-variables/followups/asael-matari/dist/index.dev.js @@ -0,0 +1,12 @@ +// var x=2 +// var y=5 +// // console.log(x/y); +// alert('bring me to number whose sum isequal to 5') +// x= +prompt() +// y=+prompt() +// console.log(IsEqualTo(x,y)); +// function IsEqualTo(x,y){ +// if(x+y!=5) return alert('not equalt') +// return alert('good work') +// } +"use strict"; \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/asael-matari/index.html b/02-TypeScript/02-variables/followups/asael-matari/index.html new file mode 100644 index 000000000..2c9f95aad --- /dev/null +++ b/02-TypeScript/02-variables/followups/asael-matari/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/asael-matari/index.js b/02-TypeScript/02-variables/followups/asael-matari/index.js new file mode 100644 index 000000000..f77c3ac37 --- /dev/null +++ b/02-TypeScript/02-variables/followups/asael-matari/index.js @@ -0,0 +1,13 @@ +// var x=2 +// var y=5 +// // console.log(x/y); +// alert('bring me to number whose sum isequal to 5') +// x= +prompt() +// y=+prompt() +// console.log(IsEqualTo(x,y)); +// function IsEqualTo(x,y){ +// if(x+y!=5) return alert('not equalt') +// return alert('good work') +// } + + diff --git a/02-TypeScript/02-variables/followups/aviva-elias/dist/index.dev.js b/02-TypeScript/02-variables/followups/aviva-elias/dist/index.dev.js new file mode 100644 index 000000000..74242733f --- /dev/null +++ b/02-TypeScript/02-variables/followups/aviva-elias/dist/index.dev.js @@ -0,0 +1,11 @@ +"use strict"; + +console.log("hi aviva"); +console.error("this is an error"); +console.warn("be aware"); +console.time("aaa"); +console.timeEnd("aaa"); +var x = 10; +var y = x * 10; +var z = y * x; +console.log(z / 10); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/aviva-elias/index.html b/02-TypeScript/02-variables/followups/aviva-elias/index.html new file mode 100644 index 000000000..2c9f95aad --- /dev/null +++ b/02-TypeScript/02-variables/followups/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/aviva-elias/index.js b/02-TypeScript/02-variables/followups/aviva-elias/index.js new file mode 100644 index 000000000..ded2e4bb0 --- /dev/null +++ b/02-TypeScript/02-variables/followups/aviva-elias/index.js @@ -0,0 +1,12 @@ +console.log( "hi aviva") +console.error( "this is an error") +console.warn("be aware") +console.time( "aaa"); +console.timeEnd("aaa") + +var x=10; +var y=x*10; +var z=y*x; +console.log(z/10); + + diff --git a/02-TypeScript/02-variables/followups/dist/index.dev.js b/02-TypeScript/02-variables/followups/dist/index.dev.js new file mode 100644 index 000000000..1a068395b --- /dev/null +++ b/02-TypeScript/02-variables/followups/dist/index.dev.js @@ -0,0 +1,3 @@ +"use strict"; + +console.log('Hi shaili'); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/noa-meillet/dist/index.dev.js b/02-TypeScript/02-variables/followups/noa-meillet/dist/index.dev.js new file mode 100644 index 000000000..58da6f995 --- /dev/null +++ b/02-TypeScript/02-variables/followups/noa-meillet/dist/index.dev.js @@ -0,0 +1,11 @@ +"use strict"; + +//messages to the f12 +console.log('Hi Noa'); +console.log('Good evening'); +console.error('This is an error'); //variable + +var x = 521; +var y = 36; +var sum = x + y; +console.log(x + ' + ' + y + ' = ' + sum); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/noa-meillet/dist/style.css b/02-TypeScript/02-variables/followups/noa-meillet/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/noa-meillet/index.html b/02-TypeScript/02-variables/followups/noa-meillet/index.html new file mode 100644 index 000000000..cec80b9fa --- /dev/null +++ b/02-TypeScript/02-variables/followups/noa-meillet/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/noa-meillet/index.js b/02-TypeScript/02-variables/followups/noa-meillet/index.js new file mode 100644 index 000000000..a370ff397 --- /dev/null +++ b/02-TypeScript/02-variables/followups/noa-meillet/index.js @@ -0,0 +1,11 @@ +//messages to the f12 +console.log('Hi Noa'); +console.log('Good evening'); +console.error('This is an error'); + +//variable +var x= 521; +var y= 36; +var sum= x+y; +console.log(x+ ' + '+ y+ ' = ' +sum); + diff --git a/02-TypeScript/02-variables/followups/noa-meillet/style.css b/02-TypeScript/02-variables/followups/noa-meillet/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/noa-meillet/style.scss b/02-TypeScript/02-variables/followups/noa-meillet/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/shai-li/index.html b/02-TypeScript/02-variables/followups/shai-li/index.html new file mode 100644 index 000000000..0405ea76d --- /dev/null +++ b/02-TypeScript/02-variables/followups/shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/02-TypeScript/02-variables/followups/shai-li/index.js b/02-TypeScript/02-variables/followups/shai-li/index.js new file mode 100644 index 000000000..9fcd25254 --- /dev/null +++ b/02-TypeScript/02-variables/followups/shai-li/index.js @@ -0,0 +1 @@ +console.log('Hi shaili'); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/shalomcop/dist/index.dev.js b/02-TypeScript/02-variables/followups/shalomcop/dist/index.dev.js new file mode 100644 index 000000000..4a9614983 --- /dev/null +++ b/02-TypeScript/02-variables/followups/shalomcop/dist/index.dev.js @@ -0,0 +1,8 @@ +"use strict"; + +console.log('Hi Shalom'); +var x = 100; +var y = 12; +var z = 32; +console.log(x); +console.log(); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/shalomcop/index.html b/02-TypeScript/02-variables/followups/shalomcop/index.html new file mode 100644 index 000000000..2c9f95aad --- /dev/null +++ b/02-TypeScript/02-variables/followups/shalomcop/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/shalomcop/index.js b/02-TypeScript/02-variables/followups/shalomcop/index.js new file mode 100644 index 000000000..7c59ae397 --- /dev/null +++ b/02-TypeScript/02-variables/followups/shalomcop/index.js @@ -0,0 +1,6 @@ +console.log('Hi Shalom'); +var x=100; +var y=12 +var z=32 +console.log(x); +console.log() \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/shlomi.samai/dist/index.dev.js b/02-TypeScript/02-variables/followups/shlomi.samai/dist/index.dev.js new file mode 100644 index 000000000..014159d1d --- /dev/null +++ b/02-TypeScript/02-variables/followups/shlomi.samai/dist/index.dev.js @@ -0,0 +1,10 @@ +"use strict"; + +console.log('hi shlomi'); +var x = 2; +var y = 3; +var z = x * y; +console.log(z); +console.log(x + y); +console.log(x / 0); +console.log(number); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/shlomi.samai/index.html b/02-TypeScript/02-variables/followups/shlomi.samai/index.html new file mode 100644 index 000000000..51cbe0536 --- /dev/null +++ b/02-TypeScript/02-variables/followups/shlomi.samai/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/shlomi.samai/index.js b/02-TypeScript/02-variables/followups/shlomi.samai/index.js new file mode 100644 index 000000000..3e196a222 --- /dev/null +++ b/02-TypeScript/02-variables/followups/shlomi.samai/index.js @@ -0,0 +1,11 @@ +console.log('hi shlomi'); +var x=2; +var y=3; +var z=x*y; + +console.log(z); +console.log(x+y); +console.log(x/0); +console.log(number); + + diff --git a/02-TypeScript/02-variables/followups/start.md b/02-TypeScript/02-variables/followups/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/02-variables/followups/tomer-cohen/dist/index.dev.js b/02-TypeScript/02-variables/followups/tomer-cohen/dist/index.dev.js new file mode 100644 index 000000000..5798c8f84 --- /dev/null +++ b/02-TypeScript/02-variables/followups/tomer-cohen/dist/index.dev.js @@ -0,0 +1,9 @@ +"use strict"; + +var x = "This is a varibale"; +console.log(x); +x = 4; +console.log(x); +var y = 2; +y = 2; +console.log(y); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/tomer-cohen/index.html b/02-TypeScript/02-variables/followups/tomer-cohen/index.html new file mode 100644 index 000000000..2c9f95aad --- /dev/null +++ b/02-TypeScript/02-variables/followups/tomer-cohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/tomer-cohen/index.js b/02-TypeScript/02-variables/followups/tomer-cohen/index.js new file mode 100644 index 000000000..1c84dfae2 --- /dev/null +++ b/02-TypeScript/02-variables/followups/tomer-cohen/index.js @@ -0,0 +1,11 @@ + +var x = "This is a varibale"; +console.log(x); +x = 4; +console.log(x); + +var y = 2; +y = 2; +console.log(y); + + diff --git a/02-TypeScript/02-variables/followups/uriel bargil/dist/index.dev.js b/02-TypeScript/02-variables/followups/uriel bargil/dist/index.dev.js new file mode 100644 index 000000000..ab72b4914 --- /dev/null +++ b/02-TypeScript/02-variables/followups/uriel bargil/dist/index.dev.js @@ -0,0 +1,11 @@ +"use strict"; + +console.log('hi Bargil'); +var x = "this is a varibale"; +console.log(x); +x = 4; +console.log(x); +var y = 8; +console.log(y); +var z = x + y; +console.log(z); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/uriel bargil/index.html b/02-TypeScript/02-variables/followups/uriel bargil/index.html new file mode 100644 index 000000000..b6c5d14af --- /dev/null +++ b/02-TypeScript/02-variables/followups/uriel bargil/index.html @@ -0,0 +1,26 @@ + + + + + + + Bar-Gil JS + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/uriel bargil/index.js b/02-TypeScript/02-variables/followups/uriel bargil/index.js new file mode 100644 index 000000000..929fbe29d --- /dev/null +++ b/02-TypeScript/02-variables/followups/uriel bargil/index.js @@ -0,0 +1,15 @@ +console.log ('hi Bargil'); + +var x = "this is a varibale"; +console.log (x); +x= 4; +console.log (x); + +var y = 8; +console.log (y); + +var z = x+y; +console.log (z); + + + diff --git a/02-TypeScript/02-variables/followups/yuval.p - test/dist/index.dev.js b/02-TypeScript/02-variables/followups/yuval.p - test/dist/index.dev.js new file mode 100644 index 000000000..d52a9092a --- /dev/null +++ b/02-TypeScript/02-variables/followups/yuval.p - test/dist/index.dev.js @@ -0,0 +1,16 @@ +"use strict"; + +var x = "this is variable"; +console.log(x); +x = 6; +var y = 5; +console.log(y); +var z = x * y; +console.log(z); +var x = "this is variable"; +console.log(x); +x = 8; +var y = x * 5; +console.log(y); +var z = x * y; +console.log(z); \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/yuval.p - test/index.html b/02-TypeScript/02-variables/followups/yuval.p - test/index.html new file mode 100644 index 000000000..b06ae4c0d --- /dev/null +++ b/02-TypeScript/02-variables/followups/yuval.p - test/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/02-variables/followups/yuval.p - test/index.js b/02-TypeScript/02-variables/followups/yuval.p - test/index.js new file mode 100644 index 000000000..2161a3146 --- /dev/null +++ b/02-TypeScript/02-variables/followups/yuval.p - test/index.js @@ -0,0 +1,16 @@ +var x = "this is variable"; +console.log(x) +x = 6 +var y = 5; +console.log(y) +var z = x*y; +console.log(z) + + +var x = "this is variable"; +console.log(x) +x = 8 +var y = x*5; +console.log(y) +var z = x*y; +console.log(z) \ No newline at end of file diff --git a/02-TypeScript/03-typescript/.vscode/settings.json b/02-TypeScript/03-typescript/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/03-typescript/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/.vscode/settings.json b/02-TypeScript/03-typescript/HW/.vscode/settings.json new file mode 100644 index 000000000..8f611f638 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "liveServer.settings.port": 5501, + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Ayala Perlovich/dist/index.js b/02-TypeScript/03-typescript/HW/Ayala Perlovich/dist/index.js new file mode 100644 index 000000000..5c167fc92 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Ayala Perlovich/dist/index.js @@ -0,0 +1,17 @@ +var Namedeveloper = "David" + "or" + "Dani" + "yonit" + "Dana" + "Rina" + "Omer" + "Tomer" + "Dafna" + "Sigal"; +var SalarieDavid = 8000; +var Salarieor = 10000; +var SalarieDani = 13000; +var Salarieyonit = 12000; +var SalarieDana = 9000; +var SalarieRina = 16000; +var SalarieOmer = 18000; +var SalarieTomer = 20000; +var SalarieDafna = 21000; +var SalarieSigal = 19000; +var avg = (SalarieDavid + Salarieor + SalarieDani + Salarieyonit + SalarieDana + SalarieRina + SalarieOmer + SalarieTomer + SalarieDafna + SalarieSigal) / 10; +console.log(" The average salary of a developeris " + avg); +var nunber = 2; +var powe = 5; +var result = Math.pow(nunber, powe); +console.log(result); diff --git a/02-TypeScript/03-typescript/HW/Ayala Perlovich/dist/style.css b/02-TypeScript/03-typescript/HW/Ayala Perlovich/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/Ayala Perlovich/index.html b/02-TypeScript/03-typescript/HW/Ayala Perlovich/index.html similarity index 100% rename from Ayala Perlovich/index.html rename to 02-TypeScript/03-typescript/HW/Ayala Perlovich/index.html diff --git a/02-TypeScript/03-typescript/HW/Ayala Perlovich/index.ts b/02-TypeScript/03-typescript/HW/Ayala Perlovich/index.ts new file mode 100644 index 000000000..b709fb355 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Ayala Perlovich/index.ts @@ -0,0 +1,20 @@ +var Namedeveloper = "David" + "or" + "Dani" + "yonit" + "Dana" + "Rina" + "Omer" + "Tomer" + "Dafna" + "Sigal"; +var SalarieDavid = 8000; +var Salarieor = 10000; +var SalarieDani = 13000; +var Salarieyonit = 12000; +var SalarieDana = 9000; +var SalarieRina = 16000; +var SalarieOmer = 18000; +var SalarieTomer = 20000; +var SalarieDafna = 21000; +var SalarieSigal = 19000; + + +var avg = (SalarieDavid + Salarieor + SalarieDani + Salarieyonit + SalarieDana + SalarieRina + SalarieOmer + SalarieTomer + SalarieDafna + SalarieSigal) / 10; + +console.log(` The average salary of a developeris ${avg}`); +var nunber=2; +var powe=5; +var result=Math.pow(nunber,powe); +console.log(result); \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Ayala Perlovich/style.css b/02-TypeScript/03-typescript/HW/Ayala Perlovich/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/HW/Ayala Perlovich/style.scss b/02-TypeScript/03-typescript/HW/Ayala Perlovich/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/HW/Itai-G/dist/index.js b/02-TypeScript/03-typescript/HW/Itai-G/dist/index.js new file mode 100644 index 000000000..fac5fa047 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itai-G/dist/index.js @@ -0,0 +1,5 @@ +//sqr root var +var number1 = 144; +var number2 = 36; +console.log("this squre root number " + Math.sqrt(number1) + " of the number " + number1); +console.log("this squre root number " + Math.sqrt(number2) + " of the number " + number2); diff --git a/02-TypeScript/03-typescript/HW/Itai-G/index.html b/02-TypeScript/03-typescript/HW/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Itai-G/index.ts b/02-TypeScript/03-typescript/HW/Itai-G/index.ts new file mode 100644 index 000000000..aa3f466e9 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itai-G/index.ts @@ -0,0 +1,6 @@ +//sqr root var + +var number1:number = 144; +var number2:number = 36; +console.log(`this squre root number ${Math.sqrt(number1)} of the number ${number1}`) +console.log(`this squre root number ${Math.sqrt(number2)} of the number ${number2}`) \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Itay-Amosi/dist/index.js b/02-TypeScript/03-typescript/HW/Itay-Amosi/dist/index.js new file mode 100644 index 000000000..b9620c774 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itay-Amosi/dist/index.js @@ -0,0 +1,29 @@ +// average-task-1 +console.log("task 1"); +var n = 10; //10 salary og developers +var itay = 25000; +var moshe = 23000; +var shaar = 28000; +var smuel = 15002; +var shalome = 17000; +var amit = 20000; +var amihai = 20500; +var tal = 33000; +var gali = 18200; +var kobi = 35000; +var avg = (itay + moshe + shaar + smuel + shalome + amit + amihai + tal + gali + kobi) / n; +console.log(" the average salary of 10 Developers is " + avg + " "); +console.log(" --- "); +console.log(" --- "); +// variable that gets the power +console.log("task 2"); +var N_power = 30; +console.log("The number " + Math.pow(N_power, 2) + " is a power of " + N_power); +console.log(" --- "); +console.log(" --- "); +// square root +console.log("task 3"); +var sqrt_number1 = 25; +var sqrt_number2 = 100; +console.log("The number " + Math.sqrt(sqrt_number1) + " is a square root of " + sqrt_number1); +console.log("The number " + Math.sqrt(sqrt_number2) + " is a square root of " + sqrt_number2); diff --git a/02-TypeScript/03-typescript/HW/Itay-Amosi/dist/style.css b/02-TypeScript/03-typescript/HW/Itay-Amosi/dist/style.css new file mode 100644 index 000000000..7e36bf6b8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itay-Amosi/dist/style.css @@ -0,0 +1,26 @@ +body { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 15rem; +} + +h1 { + color: coral; +} + +h2 { + color: cornflowerblue; +} + +.click { + border: none; + color: gold; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + background-color: brown; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Itay-Amosi/index.html b/02-TypeScript/03-typescript/HW/Itay-Amosi/index.html new file mode 100644 index 000000000..c0423d78a --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itay-Amosi/index.html @@ -0,0 +1,20 @@ + + + + + + + + Itay-HW + + + + +

Hello to my HomeWork

+

to see about my HW!.

+ + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Itay-Amosi/index.ts b/02-TypeScript/03-typescript/HW/Itay-Amosi/index.ts new file mode 100644 index 000000000..22e458fe2 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itay-Amosi/index.ts @@ -0,0 +1,36 @@ +// average-task-1 +console.log("task 1"); +var n:number = 10; //10 salary og developers +var itay:number = 25000; +var moshe:number = 23000; +var shaar:number = 28000; +var smuel:number = 15002; +var shalome:number = 17000; +var amit:number = 20000; +var amihai:number = 20500; +var tal:number = 33000; +var gali:number = 18200; +var kobi:number = 35000; +var avg = (itay+moshe+shaar+smuel+shalome+amit+amihai+tal+gali+kobi) / n; +console.log(` the average salary of 10 Developers is ${avg} `); + +console.log(` --- `) +console.log(` --- `) + + +// variable that gets the power +console.log(`task 2`) +var N_power:number = 30; +console.log(`The number ${N_power**2} is a power of ${N_power}`) + + +console.log(` --- `) +console.log(` --- `) + + +// square root +console.log(`task 3`) +var sqrt_number1:number = 25; +var sqrt_number2:number = 100; +console.log(`The number ${Math.sqrt(sqrt_number1)} is a square root of ${sqrt_number1}`) +console.log(`The number ${Math.sqrt(sqrt_number2)} is a square root of ${sqrt_number2}`) \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Itay-Amosi/style.css b/02-TypeScript/03-typescript/HW/Itay-Amosi/style.css new file mode 100644 index 000000000..7e36bf6b8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itay-Amosi/style.css @@ -0,0 +1,26 @@ +body { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 15rem; +} + +h1 { + color: coral; +} + +h2 { + color: cornflowerblue; +} + +.click { + border: none; + color: gold; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + background-color: brown; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Itay-Amosi/style.scss b/02-TypeScript/03-typescript/HW/Itay-Amosi/style.scss new file mode 100644 index 000000000..9268723e2 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Itay-Amosi/style.scss @@ -0,0 +1,27 @@ +body{ +display: flex; +justify-content: center; +gap: 1rem; +margin-top: 15rem; +} + + +h1{ + color: coral; +} + +h2{ + color:cornflowerblue; +} + +.click { + border: none; + color: gold; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + background-color:brown; + } \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Karin-Levi/dist/index.js b/02-TypeScript/03-typescript/HW/Karin-Levi/dist/index.js new file mode 100644 index 000000000..0cc260343 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Karin-Levi/dist/index.js @@ -0,0 +1,26 @@ +console.log('exercise1'); +var developerSalery1 = 25000; +var developerSalery2 = 19000; +var developerSalery3 = 16500; +var developerSalery4 = 31000; +var developerSalery5 = 18000; +var developerSalery6 = 22000; +var developerSalery7 = 27000; +var developerSalery8 = 35000; +var developerSalery9 = 34000; +var developerSalery10 = 29000; +var average = (developerSalery1 + developerSalery2 + developerSalery3 + developerSalery4 + developerSalery5 + developerSalery6 + developerSalery7 + developerSalery8 + developerSalery9 + developerSalery10) / 10; +console.log("The average salary of a developer is " + average); +console.log(''); +console.log('exercise2'); +var x = 3; +var power = Math.pow(x, 2); +console.log("The power of the variable is " + power); +console.log(''); +console.log('exercise3'); +var number1 = 4; +var number2 = 16; +var sqrt = Math.sqrt(number1); +var sqrt2 = Math.sqrt(number2); +console.log(number1 + " square root is " + sqrt); +console.log(number2 + " square root is " + sqrt2); diff --git a/02-TypeScript/03-typescript/HW/Karin-Levi/index.html b/02-TypeScript/03-typescript/HW/Karin-Levi/index.html new file mode 100644 index 000000000..e94a73fa2 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Karin-Levi/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Karin-Levi/index.ts b/02-TypeScript/03-typescript/HW/Karin-Levi/index.ts new file mode 100644 index 000000000..9c56be505 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Karin-Levi/index.ts @@ -0,0 +1,33 @@ + +console.log('exercise1'); +var developerSalery1:number = 25000; +var developerSalery2:number = 19000; +var developerSalery3:number = 16500; +var developerSalery4:number = 31000; +var developerSalery5:number = 18000; +var developerSalery6:number = 22000; +var developerSalery7:number = 27000; +var developerSalery8:number = 35000; +var developerSalery9:number = 34000; +var developerSalery10:number = 29000; +var average:number = (developerSalery1 + developerSalery2 + developerSalery3 + developerSalery4 + developerSalery5 + developerSalery6 + developerSalery7 + developerSalery8 + developerSalery9 + developerSalery10)/10; +console.log(`The average salary of a developer is ${average}`); + + + +console.log(''); +console.log('exercise2'); +var x:number = 3; +var power:number = x**2; +console.log(`The power of the variable is ${power}`); + + + +console.log(''); +console.log('exercise3'); +var number1:number = 4; +var number2:number = 16; +var sqrt:number = Math.sqrt(number1) +var sqrt2:number = Math.sqrt(number2) +console.log(`${number1} square root is ${sqrt}`); +console.log(`${number2} square root is ${sqrt2}`); diff --git a/02-TypeScript/03-typescript/HW/Kseniya_T/dist/index.js b/02-TypeScript/03-typescript/HW/Kseniya_T/dist/index.js new file mode 100644 index 000000000..c024c47b6 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Kseniya_T/dist/index.js @@ -0,0 +1,62 @@ +var developers = [ + { + name: 'Tom', + salary: 12000 + }, + { + name: 'Adam', + salary: 2000 + }, + { + name: 'Shir', + salary: 1000 + }, + { + name: 'Anna', + salary: 11000 + }, + { + name: 'Mia', + salary: 120 + }, + { + name: 'Sarah', + salary: 15000 + }, + { + name: 'Moran', + salary: 8000 + }, + { + name: 'Helen', + salary: 9000 + }, + { + name: 'Becky', + salary: 20000 + }, + { + name: 'Shalom', + salary: 39000 + } +]; +var averageSalary = function (developers) { + var sum = 0; + developers.forEach(function (element) { + sum += element.salary; + }); + var averageSalary = sum / developers.length; + console.log("The average salary of a developer is " + averageSalary); +}; +var powerNumber = function (num) { + var power = Math.pow(num, 2); + console.log(power); +}; +var rootNumbers = function (firstNum, secondNum) { + var firstRoot = Math.sqrt(firstNum); + var secondRoot = Math.sqrt(secondNum); + console.log("The square root of the numbers are " + firstRoot + " and " + secondRoot); +}; +averageSalary(developers); +powerNumber(5); +rootNumbers(9, 49); diff --git a/02-TypeScript/03-typescript/HW/Kseniya_T/index.html b/02-TypeScript/03-typescript/HW/Kseniya_T/index.html new file mode 100644 index 000000000..794ed108d --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Kseniya_T/index.html @@ -0,0 +1,12 @@ + + + + + + + TypeScript + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Kseniya_T/index.ts b/02-TypeScript/03-typescript/HW/Kseniya_T/index.ts new file mode 100644 index 000000000..0c187ec9e --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Kseniya_T/index.ts @@ -0,0 +1,74 @@ +interface IDeveloper { + name: string + salary: number +} + +let developers: IDeveloper[] = [ + { + name: 'Tom', + salary: 12000 + }, + { + name: 'Adam', + salary: 2000 + }, + { + name: 'Shir', + salary: 1000 + }, + { + name: 'Anna', + salary: 11000 + }, + { + name: 'Mia', + salary: 120 + }, + { + name: 'Sarah', + salary: 15000 + }, + { + name: 'Moran', + salary: 8000 + }, + { + name: 'Helen', + salary: 9000 + }, + { + name: 'Becky', + salary: 20000 + }, + { + name: 'Shalom', + salary: 39000 + } +] + +const averageSalary = (developers: IDeveloper[]) :void => { + let sum = 0 + developers.forEach((element) => { + sum += element.salary + }) + let averageSalary = sum / developers.length + console.log(`The average salary of a developer is ${averageSalary}`) +} + +const powerNumber = (num: number): void => { + let power = Math.pow(num, 2) + console.log(power) +} + + +const rootNumbers = (firstNum: number, secondNum: number): void => { + let firstRoot = Math.sqrt(firstNum) + let secondRoot = Math.sqrt(secondNum) + console.log(`The square root of the numbers are ${firstRoot} and ${secondRoot}`) +} + +averageSalary(developers) +powerNumber(5) +rootNumbers(9, 49) + + diff --git a/02-TypeScript/03-typescript/HW/Nikita Rossenko/app.ts b/02-TypeScript/03-typescript/HW/Nikita Rossenko/app.ts new file mode 100644 index 000000000..ad6df5128 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Nikita Rossenko/app.ts @@ -0,0 +1,24 @@ +// Task 1 + +var employee1:number = 10000; +var employee2:number = 11000; +var employee3:number = 12000; +var employee4:number = 13000; +var employee5:number = 14000; +var employee6:number = 15000; +var employee7:number = 16000; +var employee8:number = 17000; +var employee9:number = 18000; +var employee10:number = 19000; + +var avg:number = (employee1+employee2+employee3+employee4+employee5+employee6+employee7+employee8+employee9+employee10)/10 + +console.log(`Task 1 \nThe average salary of ten developers is ${avg}$`); + +// Task 2 +var num1:number = 30; +console.log(`Task 2 \nThe number ${num1**2} is a power of ${num1}`) + +// Task 3 +var num2:number = 30; +console.log(`Task 3 \nThe number ${Math.sqrt(num2)} is a square root of ${num2}`) diff --git a/02-TypeScript/03-typescript/HW/Nikita Rossenko/dist/app.js b/02-TypeScript/03-typescript/HW/Nikita Rossenko/dist/app.js new file mode 100644 index 000000000..e4b2cbf77 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Nikita Rossenko/dist/app.js @@ -0,0 +1,19 @@ +// Task 1 +var employee1 = 10000; +var employee2 = 11000; +var employee3 = 12000; +var employee4 = 13000; +var employee5 = 14000; +var employee6 = 15000; +var employee7 = 16000; +var employee8 = 17000; +var employee9 = 18000; +var employee10 = 19000; +var avg = (employee1 + employee2 + employee3 + employee4 + employee5 + employee6 + employee7 + employee8 + employee9 + employee10) / 10; +console.log("Task 1 \nThe average salary of ten developers is " + avg + "$"); +// Task 2 +var num1 = 30; +console.log("Task 2 \nThe number " + Math.pow(num1, 2) + " is a power of " + num1); +// Task 3 +var num2 = 30; +console.log("Task 3 \nThe number " + Math.sqrt(num2) + " is a square root of " + num2); diff --git a/02-TypeScript/03-typescript/HW/Nikita Rossenko/index.html b/02-TypeScript/03-typescript/HW/Nikita Rossenko/index.html new file mode 100644 index 000000000..232cc41d4 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Nikita Rossenko/index.html @@ -0,0 +1,13 @@ + + + + + + + Typescript - HW + + +

Open "Console (F12)"

+ + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Omer.Vir/dist/index.js b/02-TypeScript/03-typescript/HW/Omer.Vir/dist/index.js new file mode 100644 index 000000000..40c661830 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Omer.Vir/dist/index.js @@ -0,0 +1,22 @@ +var sal1 = 100; +var sal2 = 1040; +var sal3 = 1020; +var sal4 = 1003; +var sal5 = 1060; +var sal6 = 1030; +var sal7 = 10660; +var sal8 = 1030; +var sal9 = 1006; +var sal10 = 1020; +var average = (sal1 + sal2 + sal3 + sal4 + sal5 + sal6 + sal7 + sal8 + sal9 + sal10) / 10; +console.log("The average salary of a developer is " + average); +var num1 = 35; +var num2 = 4; +var power = Math.pow(num1, num2); +console.log(power); +num1 = 64; +num2 = 81; +var num1Root = Math.sqrt(num1); +var num2Root = Math.sqrt(num2); +console.log(num1 + " square root is " + num1Root); +console.log(num2 + " square root is " + num2Root); diff --git a/02-TypeScript/03-typescript/HW/Omer.Vir/index.html b/02-TypeScript/03-typescript/HW/Omer.Vir/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Omer.Vir/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Omer.Vir/index.ts b/02-TypeScript/03-typescript/HW/Omer.Vir/index.ts new file mode 100644 index 000000000..b3f450685 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Omer.Vir/index.ts @@ -0,0 +1,31 @@ +var sal1:number = 100; +var sal2:number = 1040; +var sal3:number = 1020; +var sal4:number = 1003; +var sal5:number = 1060; +var sal6:number = 1030; +var sal7:number = 10660; +var sal8:number = 1030; +var sal9:number = 1006; +var sal10:number = 1020; +var average = (sal1+sal2+sal3+sal4+sal5+sal6+sal7+sal8+sal9+sal10) / 10; +console.log(`The average salary of a developer is ${average}`); + + +var num1:number = 35; +var num2:number = 4; + +var power = num1 ** num2; +console.log(power); + + +num1 = 64; +num2 = 81; +var num1Root = Math.sqrt(num1); +var num2Root = Math.sqrt(num2); + +console.log(`${num1} square root is ${num1Root}`); +console.log(`${num2} square root is ${num2Root}`); + + + diff --git a/02-TypeScript/03-typescript/HW/Shalom Copperman/dist/index.js b/02-TypeScript/03-typescript/HW/Shalom Copperman/dist/index.js new file mode 100644 index 000000000..fc8b7d6a5 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Shalom Copperman/dist/index.js @@ -0,0 +1,12 @@ +var devname1 = 11; +var devname2 = 232; +var devname3 = 3432; +var devname4 = 4768; +var devname5 = 5454; +var devname6 = 13234; +var devname7 = 15456; +var devname8 = 1767; +var devname9 = 177; +var devname10 = 13421; +var devaverage = (devname1 + devname2 + devname3 + devname4 + devname5 + devname6 + devname7 + devname8 + devname9 + devname10) / 10; +console.log("The average salary of a developer is " + devaverage); diff --git a/02-TypeScript/03-typescript/HW/Shalom Copperman/index.html b/02-TypeScript/03-typescript/HW/Shalom Copperman/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Shalom Copperman/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Shalom Copperman/index.ts b/02-TypeScript/03-typescript/HW/Shalom Copperman/index.ts new file mode 100644 index 000000000..7102c4000 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Shalom Copperman/index.ts @@ -0,0 +1,13 @@ +var devname1:number=11; +var devname2:number=232; +var devname3:number=3432; +var devname4:number=4768; +var devname5:number=5454; +var devname6:number=13234; +var devname7:number=15456; +var devname8:number=1767; +var devname9:number=177; +var devname10:number=13421; +var devaverage:number=(devname1+devname2+devname3+devname4+devname5+devname6+devname7+devname8+devname9+devname10)/10; +console.log (`The average salary of a developer is ${devaverage}`); + diff --git a/02-TypeScript/03-typescript/HW/Tanya Holczer/dist/index.js b/02-TypeScript/03-typescript/HW/Tanya Holczer/dist/index.js new file mode 100644 index 000000000..eae34a743 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Tanya Holczer/dist/index.js @@ -0,0 +1,21 @@ +console.log('Exercise1'); +var salary1 = 10000; +var salary2 = 11000; +var salary3 = 12000; +var salary4 = 13000; +var salary5 = 14000; +var salary6 = 15000; +var salary7 = 16000; +var salary8 = 17000; +var salary9 = 18000; +var salary10 = 19000; +var average = (salary1 + salary2 + salary3 + salary4 + salary5 + salary6 + salary6 + salary7 + salary8 + salary9 + salary10) / 10; +console.log("The average salary for a developer is: " + average); +console.log('Exercise2'); +var number1 = 7; +var number2 = 3; +console.log('7 in the power of 3 is:', Math.pow(number1, number2)); +console.log('Exercise3'); +var variable1 = 25; +var variable2 = 225; +console.log('The squre roots of 25 and 225 are:', Math.sqrt(variable1), 'and', Math.sqrt(variable2)); diff --git a/02-TypeScript/03-typescript/HW/Tanya Holczer/index.html b/02-TypeScript/03-typescript/HW/Tanya Holczer/index.html new file mode 100644 index 000000000..38e0416d1 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Tanya Holczer/index.html @@ -0,0 +1,12 @@ + + + + + + + Homework + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/Tanya Holczer/index.ts b/02-TypeScript/03-typescript/HW/Tanya Holczer/index.ts new file mode 100644 index 000000000..6bac68258 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/Tanya Holczer/index.ts @@ -0,0 +1,26 @@ +console.log('Exercise1'); +var salary1:number =10000; +var salary2:number =11000; +var salary3:number =12000; +var salary4:number =13000; +var salary5:number =14000; +var salary6:number =15000; +var salary7:number =16000; +var salary8:number =17000; +var salary9:number =18000; +var salary10:number =19000; + +var average = (salary1 + salary2 + salary3 + salary4 + salary5 + salary6 + salary6 + salary7 + salary8 + salary9 + salary10 ) / 10; +console.log(`The average salary for a developer is: ${average}`); + +console.log('Exercise2'); +var number1:number =7; +var number2:number =3; +console.log('7 in the power of 3 is:', Math.pow(number1, number2)); + +console.log('Exercise3'); +var variable1:number =25; +var variable2: number =225; +console.log('The squre roots of 25 and 225 are:', Math.sqrt(variable1), 'and', Math.sqrt(variable2)); + + diff --git a/02-TypeScript/03-typescript/HW/amit/dist/index.js b/02-TypeScript/03-typescript/HW/amit/dist/index.js new file mode 100644 index 000000000..53c9776b7 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/amit/dist/index.js @@ -0,0 +1,42 @@ +//task 1: average// +console.log("task 1:"); +var n = 10; //the number of devlopers +var dev01 = 28000; +var dev02 = 15000; +var dev03 = 34000; +var dev04 = 12000; +var dev05 = 34000; +var dev06 = 23000; +var dev07 = 50000; +var dev08 = 37000; +var dev09 = 29000; +var dev10 = 31000; +var average = (dev01 + dev02 + dev03 + dev04 + dev05 + dev06 + dev07 + dev08 + dev09 + dev10) / n; +console.log("The average salary of a developer is " + average + "."); +console.log(""); +console.log(""); +//task 2: power of// +console.log("task 2:"); +var base = 2; +var exponent = -3; +var power = 1; +var i = 0; +console.log(base + " in the power of " + exponent + " is"); +if (exponent < 0) { + exponent = -exponent; + base = 1 / base; +} +for (var i_1 = 0; i_1 < exponent; i_1++) { + power *= base; +} +console.log(power + "."); +console.log(""); +console.log(""); +//task 3// square root +console.log("task 3:"); +var x = 25; +var squareRootX = Math.sqrt(x); +console.log("the square root of " + x + " is " + squareRootX + "."); +var y = 144; +var squareRootY = Math.sqrt(y); +console.log("the square root of " + y + " is " + squareRootY + "."); diff --git a/02-TypeScript/03-typescript/HW/amit/index.html b/02-TypeScript/03-typescript/HW/amit/index.html new file mode 100644 index 000000000..cfeb62545 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/amit/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/amit/index.ts b/02-TypeScript/03-typescript/HW/amit/index.ts new file mode 100644 index 000000000..fe819a503 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/amit/index.ts @@ -0,0 +1,51 @@ +//task 1: average// + +console.log(`task 1:`); +var n:number= 10; //the number of devlopers +var dev01:number= 28000; +var dev02:number= 15000; +var dev03:number= 34000; +var dev04:number= 12000; +var dev05:number= 34000; +var dev06:number= 23000; +var dev07:number= 50000; +var dev08:number= 37000; +var dev09:number= 29000; +var dev10:number= 31000; +var average:number= (dev01+dev02+dev03+dev04+dev05+dev06+dev07+dev08+dev09+dev10)/n; +console.log(`The average salary of a developer is ${average}.`); +console.log(``); +console.log(``); + + + + +//task 2: power of// +console.log(`task 2:`); +var base:number= 2; +var exponent:number= -3; +var power:number= 1; +var i:number= 0; +console.log(`${base} in the power of ${exponent} is`); +if (exponent<0){ + exponent= -exponent; + base= 1/base; +} +for (let i = 0; i < exponent; i++){ + power*=base; +} +console.log(`${power}.`); +console.log(``); +console.log(``); + + + + +//task 3// square root +console.log(`task 3:`); +var x:number= 25; +var squareRootX = Math.sqrt(x); +console.log(`the square root of ${x} is ${squareRootX}.`); +var y:number= 144; +var squareRootY = Math.sqrt(y); +console.log(`the square root of ${y} is ${squareRootY}.`); \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/angela/dist/index.js b/02-TypeScript/03-typescript/HW/angela/dist/index.js new file mode 100644 index 000000000..017e96f73 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/angela/dist/index.js @@ -0,0 +1,38 @@ +console.log("task 1"); +var salaries = [ + 10000, + 12400, + 9800, + 13400, + 11230, + 12000, + 9900, + 18900, + 23000, + 28000 +]; +var sum = 0; +salaries.forEach(function (num) { sum += num; }); +var average = sum / salaries.length; +console.log("the average salary of a developer is $ " + average + " "); +console.log(''); +// taske 2 +console.log("task 2"); +var x = 6; +var y = Math.pow(x, 2); +console.log("the power of " + x + " is " + y); +console.log("another way to calculate the power of a number is: x*x"); +x = 15; +y = x * x; +console.log("the power of " + x + " is " + y); +console.log(''); +// task 3 +var a = 200; +var b = 840; +var c = Math.sqrt(a).toFixed(2); +var d = Math.sqrt(b).toFixed(3); +console.log("the square root of " + a + " is " + c + " and the square root of " + b + " is " + d); +console.log(''); +var num = prompt("choose an intger number to get the squre root of , you'll see the result at the bottom"); +var root = Math.sqrt(num).toFixed(2); +console.log("the squre root of " + num + " is " + root); diff --git a/02-TypeScript/03-typescript/HW/angela/index.html b/02-TypeScript/03-typescript/HW/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/angela/index.ts b/02-TypeScript/03-typescript/HW/angela/index.ts new file mode 100644 index 000000000..07b2fd870 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/angela/index.ts @@ -0,0 +1,43 @@ +console.log("task 1"); + +const salaries = [ + 10000, + 12400, + 9800, + 13400, + 11230, + 12000, + 9900, + 18900, + 23000, + 28000 +]; +var sum = 0; +salaries.forEach(function(num) {sum+=num}); +var average = sum / salaries.length; +console.log(`the average salary of a developer is $ ${average} `); +console.log(''); +// taske 2 + +console.log("task 2"); +var x:number = 6; +var y = x**2; +console.log(`the power of ${x} is ${y}`); +console.log(`another way to calculate the power of a number is: x*x`); +x =15; +y=x*x; +console.log(`the power of ${x} is ${y}`); +console.log(''); +// task 3 + +var a:number = 200; +var b:number = 840; +var c= Math.sqrt(a).toFixed(2); +var d= Math.sqrt(b).toFixed(3); +console.log(`the square root of ${a} is ${c} and the square root of ${b} is ${d}`); + +console.log(''); +var num = prompt("choose an intger number to get the squre root of , you'll see the result at the bottom"); +var root = Math.sqrt(num).toFixed(2); +console.log(`the squre root of ${num} is ${root}`); + diff --git a/02-TypeScript/03-typescript/HW/aviva-elias/dist/dist/index.dev.js b/02-TypeScript/03-typescript/HW/aviva-elias/dist/dist/index.dev.js new file mode 100644 index 000000000..06b50a7ac --- /dev/null +++ b/02-TypeScript/03-typescript/HW/aviva-elias/dist/dist/index.dev.js @@ -0,0 +1,13 @@ +"use strict"; + +/* task1*/ +var salary1 = 20000; +var salary2 = 30000; +var salary3 = 50000; +var salary4 = 40000; +var salary5 = 10000; +var salary6 = 20000; +var salary7 = 30000; +var salary8 = 50000; +var salary9 = 40000; +var salary10 = 10000; \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/aviva-elias/dist/index.js b/02-TypeScript/03-typescript/HW/aviva-elias/dist/index.js new file mode 100644 index 000000000..86d851b8b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/aviva-elias/dist/index.js @@ -0,0 +1,31 @@ +// Task1 +console.log("Task1"); +var salary1 = 20000; +var salary2 = 30000; +var salary3 = 50000; +var salary4 = 40000; +var salary5 = 10000; +var salary6 = 20000; +var salary7 = 30000; +var salary8 = 50000; +var salary9 = 40000; +var salary10 = 10000; +var averageSalary = (salary1 + salary2 + salary3 + salary4 + salary5 + salary6 + salary7 + salary8 + salary9 + salary10) / 10; +console.log("The average salary of a developer is " + averageSalary); +console.log(""); +//Task 2 +console.log("Task2"); +var x = 3; +console.log(Math.pow(x, -2) + " is " + x + " to power (-2)"); +console.log(""); +console.log("Anather way to solve is by a function :math.pow"); +var x = 3; +var y = 5; +console.log(Math.pow(x, y) + (" is " + x + " to power " + y)); +console.log(""); +//Task 3 +console.log("Task3"); +var x = 64; +console.log(x + " square root is " + Math.sqrt(x)); +var x = 81; +console.log(x + " square root is " + Math.sqrt(x)); diff --git a/02-TypeScript/03-typescript/HW/aviva-elias/index.html b/02-TypeScript/03-typescript/HW/aviva-elias/index.html new file mode 100644 index 000000000..010f712bf --- /dev/null +++ b/02-TypeScript/03-typescript/HW/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + typeScript + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/aviva-elias/index.ts b/02-TypeScript/03-typescript/HW/aviva-elias/index.ts new file mode 100644 index 000000000..5c8439d51 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/aviva-elias/index.ts @@ -0,0 +1,40 @@ +// Task1 + +console.log("Task1") +var salary1: number=20000; +var salary2: number=30000; +var salary3: number=50000; +var salary4: number= 40000; +var salary5: number=10000; +var salary6: number=20000; +var salary7: number=30000; +var salary8: number=50000; +var salary9: number= 40000; +var salary10: number=10000; + +var averageSalary:number =(salary1+salary2+salary3+salary4+salary5+salary6 +salary7+salary8+salary9+salary10)/10; +console.log(`The average salary of a developer is ${averageSalary}`); +console.log("") + +//Task 2 + +console.log("Task2"); +var x:number=3; +console.log(`${x**-2} is ${x} to power (-2)`); +console.log("") + +console.log("Anather way to solve is by a function :math.pow") + +var x:number=3; +var y:number=5; +console.log( Math.pow(x,y)+` is ${x} to power ${y}`) +console.log(``) + +//Task 3 + +console.log("Task3"); +var x:number=64; +console.log(`${x} square root is ` + Math.sqrt(x)); + +var x:number=81; +console.log(`${x} square root is ` + Math.sqrt(x)); \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/dist/index.js new file mode 100644 index 000000000..8133133c6 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/dist/index.js @@ -0,0 +1,9 @@ +var firstName = "itai"; +var secondName = "idan"; +var firstAge = 28; +var secondAge = 18; +var avrgeAge = (firstAge + secondAge) / 2; +console.log(firstName + " " + firstAge); +console.log(secondName + " " + secondAge); +console.log("avrgeAge is " + avrgeAge); +console.log(firstName + " age is " + firstAge + " " + secondName + " age is " + secondAge + " avegeAge is " + avrgeAge); diff --git a/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/index.html b/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/index.ts b/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/index.ts new file mode 100644 index 000000000..41aad7634 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/Itai-Idan/index.ts @@ -0,0 +1,19 @@ +var firstName:string = "itai" +var secondName:string = "idan" +var firstAge:number = 28; +var secondAge:number = 18; +var avrgeAge:number = (firstAge+secondAge)/2; + + + +console.log(`${firstName} ${firstAge}`); +console.log(`${secondName} ${secondAge}`); +console.log(`avrgeAge is ${avrgeAge}`) + + + + +console.log(`${firstName} age is ${firstAge} ${secondName} age is ${secondAge} avegeAge is ${avrgeAge}`); + + + diff --git a/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/dist/html.js b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/dist/html.js new file mode 100644 index 000000000..503029032 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/dist/html.js @@ -0,0 +1,6 @@ +var firstName = "itay"; +var firstAge = 29; +var secondName = "Vladi"; +var secondAge = 33; +var avg = (firstAge + secondAge) / 2; +console.log("the average age of " + firstName + " and " + secondName + " is " + avg); diff --git a/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/dist/style.css b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/html.ts b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/html.ts new file mode 100644 index 000000000..a48748097 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/html.ts @@ -0,0 +1,9 @@ +var firstName = "itay"; +var firstAge = 29; + + +var secondName = "Vladi"; +var secondAge = 33; + +var avg = (firstAge + secondAge) / 2; +console.log (`the average age of ${firstName} and ${secondName} is ${avg}`); diff --git a/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/index.html b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/index.html new file mode 100644 index 000000000..7b20a4b0c --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/style.css b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/style.scss b/02-TypeScript/03-typescript/HW/exercise/ItayAmosi/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/HW/exercise/Room 7/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/Room 7/dist/index.js new file mode 100644 index 000000000..5a60af011 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/Room 7/dist/index.js @@ -0,0 +1,6 @@ +var myName = "Nikita"; +var yourName = "Shlomo"; +var myAge = 30; +var yourAge = 24; +var avg = (myAge + yourAge) / 2; +console.log("My name " + myName + " and your name is " + yourName + " and our avg age is " + avg); diff --git a/02-TypeScript/03-typescript/HW/exercise/Room 7/index.html b/02-TypeScript/03-typescript/HW/exercise/Room 7/index.html new file mode 100644 index 000000000..0c93d49eb --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/Room 7/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/Room 7/index.ts b/02-TypeScript/03-typescript/HW/exercise/Room 7/index.ts new file mode 100644 index 000000000..4fff57058 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/Room 7/index.ts @@ -0,0 +1,8 @@ +var myName = "Nikita"; +var yourName = "Shlomo"; +var myAge = 30; +var yourAge = 24; + +var avg = (myAge + yourAge) / 2; +console.log(`My name ${myName} and your name is ${yourName} and our avg age is ${avg}`) + diff --git a/02-TypeScript/03-typescript/HW/exercise/angela/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/angela/dist/index.js new file mode 100644 index 000000000..68b0b4422 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/angela/dist/index.js @@ -0,0 +1,8 @@ +console.log('hi'); +var firstName = 'Michael'; +var firstAge = 40; +var secondName = 'Dina'; +var secondAge = 81; +var avg = (firstAge + secondAge) / 2; +console.log(firstName + " is " + firstAge + " years old and " + secondName + " is " + secondAge + " years old"); +console.log("the avrage age between " + firstName + " and " + secondName + " is " + avg); diff --git a/02-TypeScript/03-typescript/HW/exercise/angela/index.html b/02-TypeScript/03-typescript/HW/exercise/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/angela/index.ts b/02-TypeScript/03-typescript/HW/exercise/angela/index.ts new file mode 100644 index 000000000..19833659d --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/angela/index.ts @@ -0,0 +1,13 @@ +console.log('hi') + +var firstName = 'Michael' +var firstAge = 40 + +var secondName = 'Dina' +var secondAge = 81 + +var avg:number = (firstAge + secondAge) / 2 + +console.log(`${firstName} is ${firstAge} years old and ${secondName} is ${secondAge} years old`) +console.log(`the avrage age between ${firstName} and ${secondName} is ${avg}`) + diff --git a/02-TypeScript/03-typescript/HW/exercise/group-3/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/group-3/dist/index.js new file mode 100644 index 000000000..06f49e7d4 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/group-3/dist/index.js @@ -0,0 +1,17 @@ +var firstName = "Noa"; +var secondName = "Amit"; +var firstAge = 21; +var secondAge = 33; +var average = (firstAge + secondAge) / 2; +console.log("The average age of " + firstName + " and " + secondName + " is " + average); +if (average < 30) { + console.log("You are very young :)"); +} +else { + console.log("You are young :)"); +} +/*let num; +for (let i = 0; i <= 5; i++) { + num += num; + console.log(`The number is ${i}`); + }*/ diff --git a/02-TypeScript/03-typescript/HW/exercise/group-3/index.html b/02-TypeScript/03-typescript/HW/exercise/group-3/index.html new file mode 100644 index 000000000..41a9277de --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/group-3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/group-3/index.ts b/02-TypeScript/03-typescript/HW/exercise/group-3/index.ts new file mode 100644 index 000000000..6188961b0 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/group-3/index.ts @@ -0,0 +1,20 @@ +var firstName:string= "Noa"; +var secondName:string= "Amit"; +var firstAge:number= 21; +var secondAge:number= 33; + +var average:number= (firstAge+secondAge)/2; + +console.log(`The average age of ${firstName} and ${secondName} is ${average}`); + +if (average < 30){ + console.log("You are very young :)"); +} else{ + console.log("You are young :)"); +} + +/*let num; +for (let i = 0; i <= 5; i++) { + num += num; + console.log(`The number is ${i}`); + }*/ \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/room 5/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/room 5/dist/index.js new file mode 100644 index 000000000..be2f7bbcb --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/room 5/dist/index.js @@ -0,0 +1,7 @@ +var firstName = "tomer"; +var firstAge = 21; +console.log(firstName + "," + firstAge); +var secondName = "shlomi"; +var secondAge = 35; +console.log(secondName + "," + secondAge); +var average; diff --git a/02-TypeScript/03-typescript/HW/exercise/room 5/index.html b/02-TypeScript/03-typescript/HW/exercise/room 5/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/room 5/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/room 5/index.ts b/02-TypeScript/03-typescript/HW/exercise/room 5/index.ts new file mode 100644 index 000000000..f6e11e4c1 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/room 5/index.ts @@ -0,0 +1,13 @@ + + +var firstName:string = `tomer`; +var firstAge:number= 21; + +console.log(`${firstName},${firstAge}`) + +var secondName:string = `shlomi`; +var secondAge:number = 35 ; + +console.log(`${secondName},${secondAge}`) + +var average:number; diff --git a/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/dist/index.js new file mode 100644 index 000000000..4ea8f1f88 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/dist/index.js @@ -0,0 +1,5 @@ +"use strict"; +var firstName = "Dana"; +var firstAge = 20; +var secondName = "Shani"; +var secondAge = 30; diff --git a/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/index.html b/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/index.html new file mode 100644 index 000000000..a3ec917a3 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/index.ts b/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/index.ts new file mode 100644 index 000000000..582b411a4 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/shai-liAyalaAnat/index.ts @@ -0,0 +1,17 @@ +"use strict"; + +var firstName = "Dana"; +var firstAge = 20; +var secondName = "Shani"; +var secondAge = 30; + +// var firstName: string = "Tal"; +// var age: number = 0; + +// firstName = "Dana"; +// firstAge = 20; + +// secondName = "Shani"; +// secondAge = 30; + +// console.log("${firstAge}"); diff --git a/02-TypeScript/03-typescript/HW/exercise/start.md b/02-TypeScript/03-typescript/HW/exercise/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/dist/index.js b/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/dist/index.js new file mode 100644 index 000000000..d9d8c773d --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/dist/index.js @@ -0,0 +1,8 @@ +var firstName = "uriel"; +var firstAge = 27; +var firstName2 = "yehonatan"; +var firstAge2 = 23; +var averege = (firstAge + firstAge2) / 2; +console.log(averege); +console.log("the averege of " + firstName + " and " + firstName2 + " is " + averege); +console.log(firstName + firstAge); diff --git a/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/index.html b/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/index.html new file mode 100644 index 000000000..0f5798d2e --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/index.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/index.ts b/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/index.ts new file mode 100644 index 000000000..05096c9b5 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/exercise/uriel and yehonatan/index.ts @@ -0,0 +1,20 @@ +var firstName:string = "uriel"; +var firstAge:number = 27; + + +var firstName2:string = "yehonatan"; +var firstAge2:number = 23; + +var averege:number = (firstAge+firstAge2)/2; + +console.log (averege); + +console.log (`the averege of ${firstName} and ${firstName2} is ${averege}`); + + + +console.log (firstName+firstAge); + + + + diff --git a/02-TypeScript/03-typescript/HW/idan/dist/index.js b/02-TypeScript/03-typescript/HW/idan/dist/index.js new file mode 100644 index 000000000..5a66b2a96 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/idan/dist/index.js @@ -0,0 +1,4 @@ +var num1 = 10; +var num2 = 952; +console.log(num1 + " square root is: " + Math.sqrt(num1)); +console.log(num2 + " square root is: " + Math.sqrt(num2)); diff --git a/02-TypeScript/03-typescript/HW/idan/index.html b/02-TypeScript/03-typescript/HW/idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/idan/index.ts b/02-TypeScript/03-typescript/HW/idan/index.ts new file mode 100644 index 000000000..3f67c1908 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/idan/index.ts @@ -0,0 +1,6 @@ +var num1:number = 10; +var num2:number = 952; + + +console.log(`${num1} square root is: ${Math.sqrt(num1)}`); +console.log(`${num2} square root is: ${Math.sqrt(num2)}`); \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/instructions.md b/02-TypeScript/03-typescript/HW/instructions.md new file mode 100644 index 000000000..48a4aac3f --- /dev/null +++ b/02-TypeScript/03-typescript/HW/instructions.md @@ -0,0 +1,8 @@ +With TypeScript: +1) create a list of variables that holds the salaries of 10 developers. +Create a variable that gets the average of the salaries. +print to console "The average salary of a developer is (the average)" + +2) define a number variable, and create a variable that gets the power (חזקה) of the first variable. Print the power to the console. + +3) define two number variables and calculate the square root (שורש) of each of them. write to the console "(number) square root is (sqrt)" \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/john-ben/dist/index.js b/02-TypeScript/03-typescript/HW/john-ben/dist/index.js new file mode 100644 index 000000000..8abca03bd --- /dev/null +++ b/02-TypeScript/03-typescript/HW/john-ben/dist/index.js @@ -0,0 +1,26 @@ +//ex1: +var n = 10; //the number of devlopers +var dev01 = 10000; +var dev02 = 20000; +var dev03 = 30000; +var dev04 = 40000; +var dev05 = 50000; +var dev06 = 60000; +var dev07 = 70000; +var dev08 = 80000; +var dev09 = 90000; +var dev10 = 100000; +var average = (dev01 + dev02 + dev03 + dev04 + dev05 + dev06 + dev07 + dev08 + dev09 + dev10) / n; +console.log("The average salary of a developer is " + average + "."); +//ex3: +var number1 = 25; +var number2 = -4; +var result1 = Math.sqrt(number1); +var result2 = Math.sqrt(number2); +console.log("The square root of " + number1 + " is " + result1); +console.log("The square root of " + number2 + " is " + result2); +//ex2: +var num1 = 5; +var pow = 2; +var result = Math.pow(num1, pow); +console.log("The result of " + num1 + " in power of " + pow + " is " + result); diff --git a/02-TypeScript/03-typescript/HW/john-ben/index.html b/02-TypeScript/03-typescript/HW/john-ben/index.html new file mode 100644 index 000000000..59e874bee --- /dev/null +++ b/02-TypeScript/03-typescript/HW/john-ben/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/john-ben/index.ts b/02-TypeScript/03-typescript/HW/john-ben/index.ts new file mode 100644 index 000000000..02796dec8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/john-ben/index.ts @@ -0,0 +1,33 @@ +//ex1: +var n:number= 10; //the number of devlopers +var dev01:number= 10000; +var dev02:number= 20000; +var dev03:number= 30000; +var dev04:number= 40000; +var dev05:number= 50000; +var dev06:number= 60000; +var dev07:number= 70000; +var dev08:number= 80000; +var dev09:number= 90000; +var dev10:number= 100000; +var average:number= (dev01+dev02+dev03+dev04+dev05+dev06+dev07+dev08+dev09+dev10)/n; +console.log(`The average salary of a developer is ${average}.`); + +//ex3: +const number1 = 25; +const number2 = -4; + +const result1 = Math.sqrt(number1); +const result2 = Math.sqrt(number2); + +console.log(`The square root of ${number1} is ${result1}`); +console.log(`The square root of ${number2} is ${result2}`); + + +//ex2: +const num1 = 5; +const pow = 2 + +var result = num1 ** pow; + +console.log(`The result of ${num1} in power of ${pow} is ${result}`); diff --git a/02-TypeScript/03-typescript/HW/matanel harush/dist/lib.js b/02-TypeScript/03-typescript/HW/matanel harush/dist/lib.js new file mode 100644 index 000000000..fa9cae52e --- /dev/null +++ b/02-TypeScript/03-typescript/HW/matanel harush/dist/lib.js @@ -0,0 +1,10 @@ +var numberInput = document.getElementById('numberInput'); +var submitButton = document.getElementById('submitButton'); +var result = document.getElementById('result'); +submitButton.addEventListener('click', function (event) { + event.preventDefault(); + var number = parseInt(numberInput.value); + var power = Math.pow(number, 2); + result.textContent = "The power of " + number + " is " + power + "."; + console.log("The power of " + number + " is " + power + "."); +}); diff --git a/02-TypeScript/03-typescript/HW/matanel harush/dist/style.css b/02-TypeScript/03-typescript/HW/matanel harush/dist/style.css new file mode 100644 index 000000000..02b6e0253 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/matanel harush/dist/style.css @@ -0,0 +1,48 @@ +* { + margin: 0; + padding: 0; +} + +.main-cntnt { + margin-top: 25rem; +} + +form { + display: flex; + flex-direction: column; + align-items: center; +} + +label { + font-size: 1.2em; +} + +input[type=number] { + font-size: 1.2em; + padding: 0.5em; + border: 1px solid #ccc; + border-radius: 4px; +} + +button[type=submit] { + font-size: 1.2em; + padding: 0.5em 1em; + border: none; + border-radius: 4px; + background-color: #4CAF50; + color: white; + cursor: pointer; +} + +#result { + font-size: 1.2em; + font-weight: bold; + display: flex; + justify-content: center; +} + +.mtn { + margin-top: 70px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/matanel harush/index.html b/02-TypeScript/03-typescript/HW/matanel harush/index.html new file mode 100644 index 000000000..bf09f9cba --- /dev/null +++ b/02-TypeScript/03-typescript/HW/matanel harush/index.html @@ -0,0 +1,29 @@ + + + + + + + H-W + + + + +
+ +
+ + + +
+ +

+ + + +
+ +

Matanel Harush

+ + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/matanel harush/lib.ts b/02-TypeScript/03-typescript/HW/matanel harush/lib.ts new file mode 100644 index 000000000..64aefa03b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/matanel harush/lib.ts @@ -0,0 +1,13 @@ + + let numberInput: HTMLInputElement = document.getElementById('numberInput') as HTMLInputElement; + let submitButton: HTMLButtonElement = document.getElementById('submitButton') as HTMLButtonElement; + let result: HTMLElement = document.getElementById('result'); + + + submitButton.addEventListener('click', (event: Event) => { + event.preventDefault(); + let number: number = parseInt(numberInput.value); + let power: number = number ** 2; + result.textContent = `The power of ${number} is ${power}.`; + console.log(`The power of ${number} is ${power}.`); + }); \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/matanel harush/style.css b/02-TypeScript/03-typescript/HW/matanel harush/style.css new file mode 100644 index 000000000..02b6e0253 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/matanel harush/style.css @@ -0,0 +1,48 @@ +* { + margin: 0; + padding: 0; +} + +.main-cntnt { + margin-top: 25rem; +} + +form { + display: flex; + flex-direction: column; + align-items: center; +} + +label { + font-size: 1.2em; +} + +input[type=number] { + font-size: 1.2em; + padding: 0.5em; + border: 1px solid #ccc; + border-radius: 4px; +} + +button[type=submit] { + font-size: 1.2em; + padding: 0.5em 1em; + border: none; + border-radius: 4px; + background-color: #4CAF50; + color: white; + cursor: pointer; +} + +#result { + font-size: 1.2em; + font-weight: bold; + display: flex; + justify-content: center; +} + +.mtn { + margin-top: 70px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/matanel harush/style.scss b/02-TypeScript/03-typescript/HW/matanel harush/style.scss new file mode 100644 index 000000000..8aeac09a8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/matanel harush/style.scss @@ -0,0 +1,50 @@ +*{ + margin: 0; + padding: 0; +} + + +.main-cntnt{ + margin-top: 25rem; +} + + +form { + display: flex; + flex-direction: column; + align-items: center; + } + + label { + font-size: 1.2em; + } + + input[type="number"] { + font-size: 1.2em; + padding: 0.5em; + border: 1px solid #ccc; + border-radius: 4px; + } + + button[type="submit"] { + font-size: 1.2em; + padding: 0.5em 1em; + border: none; + border-radius: 4px; + background-color: #4CAF50; + color: white; + cursor: pointer; + } + + #result { + font-size: 1.2em; + font-weight: bold; + display: flex; + justify-content: center; + } + + .mtn{ + margin-top: 70px; + display: flex; + justify-content: center; + } \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/noa-meillet/dist/index.js b/02-TypeScript/03-typescript/HW/noa-meillet/dist/index.js new file mode 100644 index 000000000..cc32826dd --- /dev/null +++ b/02-TypeScript/03-typescript/HW/noa-meillet/dist/index.js @@ -0,0 +1,17 @@ +console.log("First exercise"); +var salaries = [15000, 20000, 23000, 12000, 41000, 17000, 36000, 25000, 41000, 32000]; +var salariesSum = salaries[0]; +for (var i = 1; i < 10; i++) { + salariesSum += salaries[i]; +} +var salariesAvg = salariesSum / 10; +console.log("The average salary of a developer is " + salariesAvg); +console.log("Second exercise"); +var num = 50; +var numPower = Math.pow(num, 2); +console.log("The power of " + num + " is " + numPower); +console.log("Third exercise"); +var num1 = 16; +var num2 = 841; +console.log(num1 + " square root is " + Math.sqrt(num1)); +console.log(num2 + " square root is " + Math.sqrt(num2)); diff --git a/02-TypeScript/03-typescript/HW/noa-meillet/index.html b/02-TypeScript/03-typescript/HW/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/noa-meillet/index.ts b/02-TypeScript/03-typescript/HW/noa-meillet/index.ts new file mode 100644 index 000000000..0c0c58bdf --- /dev/null +++ b/02-TypeScript/03-typescript/HW/noa-meillet/index.ts @@ -0,0 +1,19 @@ +console.log("First exercise"); +const salaries:number[] = [15000, 20000, 23000,12000,41000,17000,36000,25000,41000,32000 ]; +var salariesSum:number =salaries[0]; +for (let i = 1; i < 10; i++) { + salariesSum += salaries[i]; +} +var salariesAvg:number= salariesSum/10; +console.log(`The average salary of a developer is ${salariesAvg}`); + +console.log("Second exercise"); +var num:number=50; +var numPower:number= Math.pow(num,2); +console.log(`The power of ${num} is ${numPower}`); + +console.log("Third exercise"); +var num1:number= 16; +var num2:number= 841; +console.log(`${num1} square root is ${Math.sqrt(num1)}`); +console.log(`${num2} square root is ${Math.sqrt(num2)}`); diff --git a/02-TypeScript/03-typescript/HW/shai-liHarniv/dist/index.js b/02-TypeScript/03-typescript/HW/shai-liHarniv/dist/index.js new file mode 100644 index 000000000..de3f1b854 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shai-liHarniv/dist/index.js @@ -0,0 +1,36 @@ +"use strict"; +console.log("first ex:"); +var firstSalary = 8000; +var secondSalary = 10000; +var thirdSalary = 12000; +var forthSalary = 15000; +var fifthSalary = 18000; +var sixthSalary = 20000; +var seventhSalary = 23000; +var eighthSalary = 25000; +var ninthSalary = 27000; +var tenthSalary = 30000; +var sumAllSalaries = firstSalary + + secondSalary + + thirdSalary + + forthSalary + + fifthSalary + + sixthSalary + + seventhSalary + + eighthSalary + + ninthSalary + + tenthSalary; +var avg = sumAllSalaries / 10; +console.log("The average salary of a developers is: " + avg); +console.log("second ex:"); +var firstNum = 5; +var secondNum = 3; +var power = Math.pow(firstNum, secondNum); +console.log("The power is: " + power); +console.log("third ex:"); +var num1 = 4; +var num2 = 64; +var newNum1 = Math.sqrt(num1); +var newNum2 = Math.sqrt(num2); +console.log(num1 + " square root is: " + newNum1); +console.log(num2 + " square root is: " + newNum2); diff --git a/02-TypeScript/03-typescript/HW/shai-liHarniv/dist/style.css b/02-TypeScript/03-typescript/HW/shai-liHarniv/dist/style.css new file mode 100644 index 000000000..609253955 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shai-liHarniv/dist/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shai-liHarniv/index.html b/02-TypeScript/03-typescript/HW/shai-liHarniv/index.html new file mode 100644 index 000000000..90ff802be --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shai-liHarniv/index.html @@ -0,0 +1,13 @@ + + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shai-liHarniv/index.ts b/02-TypeScript/03-typescript/HW/shai-liHarniv/index.ts new file mode 100644 index 000000000..0a1043199 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shai-liHarniv/index.ts @@ -0,0 +1,47 @@ +"use strict"; +console.log("first ex:"); + +var firstSalary: number = 8000; +var secondSalary: number = 10000; +var thirdSalary: number = 12000; +var forthSalary: number = 15000; +var fifthSalary: number = 18000; +var sixthSalary: number = 20000; +var seventhSalary: number = 23000; +var eighthSalary: number = 25000; +var ninthSalary: number = 27000; +var tenthSalary: number = 30000; + +var sumAllSalaries = + firstSalary + + secondSalary + + thirdSalary + + forthSalary + + fifthSalary + + sixthSalary + + seventhSalary + + eighthSalary + + ninthSalary + + tenthSalary; +var avg = sumAllSalaries / 10; + +console.log("The average salary of a developers is: " + avg); + +console.log("second ex:"); + +var firstNum = 5; +var secondNum = 3; + +var power = firstNum ** secondNum; +console.log("The power is: " + power); + +console.log("third ex:"); + +var num1 = 4; +var num2 = 64; + +var newNum1 = Math.sqrt(num1); +var newNum2 = Math.sqrt(num2); + +console.log(num1 + " square root is: " + newNum1); +console.log(num2 + " square root is: " + newNum2); diff --git a/02-TypeScript/03-typescript/HW/shai-liHarniv/style.css b/02-TypeScript/03-typescript/HW/shai-liHarniv/style.css new file mode 100644 index 000000000..609253955 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shai-liHarniv/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shai-liHarniv/style.scss b/02-TypeScript/03-typescript/HW/shai-liHarniv/style.scss new file mode 100644 index 000000000..3d480cbf4 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shai-liHarniv/style.scss @@ -0,0 +1,3 @@ +body{ + margin: 0; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi.samai/dist/index.js b/02-TypeScript/03-typescript/HW/shlomi.samai/dist/index.js new file mode 100644 index 000000000..638b7fbf5 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi.samai/dist/index.js @@ -0,0 +1,24 @@ +//ex1//////////////////////////////////////// +var programmer1 = 51000; +var programmer2 = 19000; +var programmer3 = 30000; +var programmer4 = 18000; +var programmer5 = 22000; +var programmer6 = 20000; +var programmer7 = 40000; +var programmer8 = 36000; +var programmer9 = 32000; +var programmer10 = 32000; +var avarege = (programmer1 + programmer2 + programmer3 + programmer4 + programmer5 + programmer6 + programmer7 + programmer8 + programmer9 + programmer10) / 10; +console.log("The avarege salary of a developer is " + avarege); +//ex2//////////////////////////////////////// +var int = 6; +var int_power = Math.pow(int, 2); +console.log(int + " power is " + int_power); +//ex3//////////////////////////////////////// +var number1 = 49; +var number2 = 81; +var avarege1 = Math.sqrt(number1); +var avarege2 = Math.sqrt(number2); +console.log(number1 + " squere root is " + avarege1); +console.log(number2 + " squere root is " + avarege2); diff --git a/02-TypeScript/03-typescript/HW/shlomi.samai/index.html b/02-TypeScript/03-typescript/HW/shlomi.samai/index.html new file mode 100644 index 000000000..949a7a455 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi.samai/index.html @@ -0,0 +1,15 @@ + + + + + + + Shlomi + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi.samai/index.ts b/02-TypeScript/03-typescript/HW/shlomi.samai/index.ts new file mode 100644 index 000000000..ec357e5ea --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi.samai/index.ts @@ -0,0 +1,33 @@ +//ex1//////////////////////////////////////// + +var programmer1:number=51000; +var programmer2:number=19000; +var programmer3:number=30000; +var programmer4:number=18000; +var programmer5:number=22000; +var programmer6:number=20000; +var programmer7:number=40000; +var programmer8:number=36000; +var programmer9:number=32000; +var programmer10:number=32000; + +var avarege:number=(programmer1+programmer2+programmer3+programmer4+programmer5+programmer6+programmer7+programmer8+programmer9+programmer10)/10; +console.log(`The avarege salary of a developer is ${avarege}`); + +//ex2//////////////////////////////////////// + +var int:number=6; +var int_power:number=Math.pow(int,2); +console.log(`${int} power is ${int_power}`); + +//ex3//////////////////////////////////////// + +var number1:number=49; +var number2:number=81; + +var avarege1:number=Math.sqrt(number1); +var avarege2:number=Math.sqrt(number2); + +console.log(`${number1} squere root is ${avarege1}`); +console.log(`${number2} squere root is ${avarege2}`); + diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/.vscode/settings.json b/02-TypeScript/03-typescript/HW/shlomi_a/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/app.ts b/02-TypeScript/03-typescript/HW/shlomi_a/app.ts new file mode 100644 index 000000000..7b4a82572 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/app.ts @@ -0,0 +1,30 @@ +let programmer1=1000; +let programmer2=2000; +let programmer3=3000; +let programmer4=4000; +let programmer5=5000; +let programmer6=6000; +let programmer7=7000; +let programmer8=8000; +let programmer9=9000; +let programmer10=10_000; + + + +let avg = (programmer1+programmer2+programmer3+programmer4+programmer5+programmer6+programmer7+programmer8+programmer9+programmer10)/10; + + + +console.log(` The average salary of programmer is ${avg}`); + + +let num1 =60; +let num2 = num1**2; + +console.log(`The number ${num2} is a power of ${num1}`) + + +let num3 = 16; +let num4 = 9; +console.log(`The number ${Math.sqrt(num3)} is a square root of ${num3}`) +console.log(`The number ${Math.sqrt(num4)} is a square root of ${num4}`) \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/dist/app.js b/02-TypeScript/03-typescript/HW/shlomi_a/dist/app.js new file mode 100644 index 000000000..3d3bd4699 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/dist/app.js @@ -0,0 +1,19 @@ +var programmer1 = 1000; +var programmer2 = 2000; +var programmer3 = 3000; +var programmer4 = 4000; +var programmer5 = 5000; +var programmer6 = 6000; +var programmer7 = 7000; +var programmer8 = 8000; +var programmer9 = 9000; +var programmer10 = 10000; +var avg = (programmer1 + programmer2 + programmer3 + programmer4 + programmer5 + programmer6 + programmer7 + programmer8 + programmer9 + programmer10) / 10; +console.log(" The average salary of programmer is " + avg); +var num1 = 60; +var num2 = Math.pow(num1, 2); +console.log("The number " + num2 + " is a power of " + num1); +var num3 = 16; +var num4 = 9; +console.log("The number " + Math.sqrt(num3) + " is a square root of " + num3); +console.log("The number " + Math.sqrt(num4) + " is a square root of " + num4); diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/dist/style.css b/02-TypeScript/03-typescript/HW/shlomi_a/dist/style.css new file mode 100644 index 000000000..4e8396de8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/dist/style.css @@ -0,0 +1,15 @@ +body { + background-color: brown; + text-align: center; +} + +h1 { + font-size: 20vw; + margin-top: 30%; + color: white; +} + +#a { + font-size: 20vw; + display: inline; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/index.html b/02-TypeScript/03-typescript/HW/shlomi_a/index.html new file mode 100644 index 000000000..c5db30d3c --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + +

consle.log

+

👇

+ + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/style.css b/02-TypeScript/03-typescript/HW/shlomi_a/style.css new file mode 100644 index 000000000..4e8396de8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/style.css @@ -0,0 +1,15 @@ +body { + background-color: brown; + text-align: center; +} + +h1 { + font-size: 20vw; + margin-top: 30%; + color: white; +} + +#a { + font-size: 20vw; + display: inline; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/shlomi_a/style.scss b/02-TypeScript/03-typescript/HW/shlomi_a/style.scss new file mode 100644 index 000000000..76b816091 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/shlomi_a/style.scss @@ -0,0 +1,13 @@ +body{ + background-color: brown; + text-align: center; +} +h1{ + font-size: 20vw; + margin-top:30%; + color: white; +} +#a{ + font-size: 20vw; + display: inline; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/tomer cohen/dist/index.js b/02-TypeScript/03-typescript/HW/tomer cohen/dist/index.js new file mode 100644 index 000000000..954dbdc4e --- /dev/null +++ b/02-TypeScript/03-typescript/HW/tomer cohen/dist/index.js @@ -0,0 +1,25 @@ +// test 1 +console.log("avrage salary of developers"); +var amountofdev = 10; +var dev01 = 12000; +var dev02 = 9000; +var dev03 = 25000; +var dev04 = 13000; +var dev05 = 30000; +var dev06 = 20000; +var dev07 = 15000; +var dev08 = 21000; +var dev09 = 18000; +var dev10 = 14000; +var avrage = (dev01 + dev02 + dev03 + dev04 + dev05 + dev06 + dev07 + dev08 + dev09 + dev10) / amountofdev; +console.log("the avrage salary of developers is " + avrage); +// test2 +console.log("power math"); +var x = 2; +var y = 8; +console.log(Math.pow(x, y)); +//test 3 +console.log("test 3 squre"); +var x = 9; +var square = (Math.sqrt(x)); +console.log(x + " square root is " + square); diff --git a/02-TypeScript/03-typescript/HW/tomer cohen/index.html b/02-TypeScript/03-typescript/HW/tomer cohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/HW/tomer cohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/tomer cohen/index.ts b/02-TypeScript/03-typescript/HW/tomer cohen/index.ts new file mode 100644 index 000000000..e2dd2a648 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/tomer cohen/index.ts @@ -0,0 +1,37 @@ + +// test 1 +console.log(`avrage salary of developers`); +var amountofdev:number=10; +var dev01:number= 12000; +var dev02:number= 9000; +var dev03:number= 25000; +var dev04:number= 13000; +var dev05:number=30000; +var dev06:number=20000; +var dev07:number= 15000; +var dev08:number= 21000; +var dev09:number=18000; +var dev10:number= 14000; +var avrage:number= (dev01+dev02+dev03+dev04+dev05+dev06+dev07+dev08+dev09+dev10)/amountofdev; + +console.log(`the avrage salary of developers is ${avrage}`); + +// test2 +console.log(`power math`) + +var x:number= 2 +var y:number= 8 +console.log(Math.pow(x, y)); + + +//test 3 + +console.log( `test 3 squre`) + +var x:number= 9 + +var square:number= (Math.sqrt(x)); + +console.log(`${x} square root is ${square}` ) + + diff --git a/02-TypeScript/03-typescript/HW/uriel bargil/dist/index.js b/02-TypeScript/03-typescript/HW/uriel bargil/dist/index.js new file mode 100644 index 000000000..35962b7d8 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/uriel bargil/dist/index.js @@ -0,0 +1,13 @@ +var sellary1 = 32000; +var sellary2 = 38430; +var sellary3 = 27568; +var sellary4 = 65233; +var sellary5 = 15889; +var sellary6 = 22368; +var sellary7 = 17852; +var sellary8 = 21356; +var sellary9 = 55698; +var sellary10 = 10369; +var avg = (sellary1 + sellary2 + sellary3 + sellary4 + sellary5 + sellary6 + sellary7 + sellary8 + sellary9 + sellary10) / 10; +console.log(avg); +console.log("the averege of 10 employee in company is " + avg); diff --git a/02-TypeScript/03-typescript/HW/uriel bargil/index.html b/02-TypeScript/03-typescript/HW/uriel bargil/index.html new file mode 100644 index 000000000..bbb223113 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/uriel bargil/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/uriel bargil/index.ts b/02-TypeScript/03-typescript/HW/uriel bargil/index.ts new file mode 100644 index 000000000..e51d2eac1 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/uriel bargil/index.ts @@ -0,0 +1,17 @@ +var sellary1:number = 32000; +var sellary2:number = 38430; +var sellary3:number = 27568; +var sellary4:number = 65233; +var sellary5:number = 15889; +var sellary6:number = 22368; +var sellary7:number = 17852; +var sellary8:number = 21356; +var sellary9:number = 55698; +var sellary10:number = 10369; + +var avg = (sellary1+sellary2+sellary3+sellary4+sellary5+sellary6+sellary7+sellary8+sellary9+sellary10)/10; + +console.log (avg); + + +console.log (`the averege of 10 employee in company is ${avg}`); \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/.vscode/settings.json b/02-TypeScript/03-typescript/HW/vladiBykanov/.vscode/settings.json new file mode 100644 index 000000000..8f611f638 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "liveServer.settings.port": 5501, + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/app.ts b/02-TypeScript/03-typescript/HW/vladiBykanov/app.ts new file mode 100644 index 000000000..7640eac10 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/app.ts @@ -0,0 +1,105 @@ +const nameInput = document.getElementById("name") as HTMLInputElement | null; +const salaryInput = document.getElementById( + "salary" +) as HTMLInputElement | null; +const calculateBtn = document.querySelector("#calculateBtn"); +const saveBtn = document.querySelector("#saveBtn"); +const resetBtn = document.querySelector("#resetBtn"); +const makeListBtn = document.querySelector("#makeListBtn"); +const output = document.querySelector(".output") as HTMLElement | null; +const listOutput: HTMLElement | null = document.querySelector("#listOutput"); +const inputPage = document.querySelector(".inputPage") as HTMLElement | null; +const ulEl = document.querySelector(".listOfNames"); + +function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); +} + +const highestPayingJobs = { + Cardiologist: 353970, + Anesthesiologist: 331190, + "Oral and Maxillofacial Surgeon": 311460, + "Emergency Medicine Physician": 310640, + "Orthopedic Surgeon, Except Pediatric": 306220, + Dermatologist: 302740, + Radiologist: 301720, + "Surgeon (All Other)": 297800, + "Obstetrician-Gynecologist": 296210, + "Pediatric Surgeon": 290310, +}; + +const totalIncome = Object.values(highestPayingJobs).reduce((a, b) => a + b, 0); +const jobTitles = Object.keys(highestPayingJobs).join(", "); +const avrageOfIncome = totalIncome / Object.entries(highestPayingJobs).length; + +const text: string = `The 10 highest paying jobs in the US currently are: ${jobTitles}. And their average income is ${numberWithCommas( + avrageOfIncome +)} $ a year`; + +if (listOutput != null) listOutput.textContent = text; + +makeListBtn?.addEventListener("click", () => { + if (inputPage != null) inputPage.style.transform = "translateY(0)"; +}); + +let salaryArr: number[] = []; +let namesArr: string[] = []; +let totalPpl = 0; + +saveBtn?.addEventListener("click", () => { + if (nameInput?.value == "" || salaryInput?.value == "") { + salaryInput!.value = ""; + nameInput!.value = ""; + return (output!.textContent = "please provide full data"); + } else if (nameInput!.value.length < 8) + return (output!.textContent = "please provide full name"); + + salaryArr.push(parseInt(salaryInput!.value)); + namesArr.push(nameInput!.value); + console.log(salaryArr); + console.log(namesArr); + totalPpl++; + salaryInput!.value = ""; + nameInput!.value = ""; + output!.textContent = "Type in your data"; + renderArr(namesArr); +}); + +calculateBtn?.addEventListener("click", () => { + if (salaryArr.length == 0 || namesArr.length < 0) { + salaryInput!.value = ""; + nameInput!.value = ""; + return (output!.textContent = "No Date Entered"); + } else if (salaryArr.length < 3 || namesArr.length < 3) { + return (output!.textContent = "please provide at least 3 inputs"); + } + const fullSum = salaryArr.reduce((a, b) => a + b, 0); + const lastName = namesArr.pop(); + const textOutput = `The avrage salaries of ${namesArr.join( + ", " + )} and ${lastName} is ${numberWithCommas(fullSum / totalPpl)} ₪`; + namesArr.push(lastName!); + output!.textContent = textOutput; +}); + +resetBtn?.addEventListener("click", () => { + output!.textContent = "Cleaned"; + + if (salaryArr.length == 0 || namesArr.length == 0) { + salaryInput!.value = ""; + nameInput!.value = ""; + return; + } + + salaryArr = []; + namesArr = []; +}); + +function renderArr(arr) { + ulEl?.replaceChildren(); + arr.forEach((element) => { + const li = document.createElement("li"); + li.textContent = element; + ulEl?.append(li); + }); +} diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/dist/app.js b/02-TypeScript/03-typescript/HW/vladiBykanov/dist/app.js new file mode 100644 index 000000000..644ffab63 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/dist/app.js @@ -0,0 +1,89 @@ +var nameInput = document.getElementById("name"); +var salaryInput = document.getElementById("salary"); +var calculateBtn = document.querySelector("#calculateBtn"); +var saveBtn = document.querySelector("#saveBtn"); +var resetBtn = document.querySelector("#resetBtn"); +var makeListBtn = document.querySelector("#makeListBtn"); +var output = document.querySelector(".output"); +var listOutput = document.querySelector("#listOutput"); +var inputPage = document.querySelector(".inputPage"); +var ulEl = document.querySelector(".listOfNames"); +function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); +} +var highestPayingJobs = { + Cardiologist: 353970, + Anesthesiologist: 331190, + "Oral and Maxillofacial Surgeon": 311460, + "Emergency Medicine Physician": 310640, + "Orthopedic Surgeon, Except Pediatric": 306220, + Dermatologist: 302740, + Radiologist: 301720, + "Surgeon (All Other)": 297800, + "Obstetrician-Gynecologist": 296210, + "Pediatric Surgeon": 290310 +}; +var totalIncome = Object.values(highestPayingJobs).reduce(function (a, b) { return a + b; }, 0); +var jobTitles = Object.keys(highestPayingJobs).join(", "); +var avrageOfIncome = totalIncome / Object.entries(highestPayingJobs).length; +var text = "The 10 highest paying jobs in the US currently are: " + jobTitles + ". And their average income is " + numberWithCommas(avrageOfIncome) + " $ a year"; +if (listOutput != null) + listOutput.textContent = text; +makeListBtn === null || makeListBtn === void 0 ? void 0 : makeListBtn.addEventListener("click", function () { + if (inputPage != null) + inputPage.style.transform = "translateY(0)"; +}); +var salaryArr = []; +var namesArr = []; +var totalPpl = 0; +saveBtn === null || saveBtn === void 0 ? void 0 : saveBtn.addEventListener("click", function () { + if ((nameInput === null || nameInput === void 0 ? void 0 : nameInput.value) == "" || (salaryInput === null || salaryInput === void 0 ? void 0 : salaryInput.value) == "") { + salaryInput.value = ""; + nameInput.value = ""; + return (output.textContent = "please provide full data"); + } + else if (nameInput.value.length < 8) + return (output.textContent = "please provide full name"); + salaryArr.push(parseInt(salaryInput.value)); + namesArr.push(nameInput.value); + console.log(salaryArr); + console.log(namesArr); + totalPpl++; + salaryInput.value = ""; + nameInput.value = ""; + output.textContent = "Type in your data"; + renderArr(namesArr); +}); +calculateBtn === null || calculateBtn === void 0 ? void 0 : calculateBtn.addEventListener("click", function () { + if (salaryArr.length == 0 || namesArr.length < 0) { + salaryInput.value = ""; + nameInput.value = ""; + return (output.textContent = "No Date Entered"); + } + else if (salaryArr.length < 3 || namesArr.length < 3) { + return (output.textContent = "please provide at least 3 inputs"); + } + var fullSum = salaryArr.reduce(function (a, b) { return a + b; }, 0); + var lastName = namesArr.pop(); + var textOutput = "The avrage salaries of " + namesArr.join(", ") + " and " + lastName + " is " + numberWithCommas(fullSum / totalPpl) + " \u20AA"; + namesArr.push(lastName); + output.textContent = textOutput; +}); +resetBtn === null || resetBtn === void 0 ? void 0 : resetBtn.addEventListener("click", function () { + output.textContent = "Cleaned"; + if (salaryArr.length == 0 || namesArr.length == 0) { + salaryInput.value = ""; + nameInput.value = ""; + return; + } + salaryArr = []; + namesArr = []; +}); +function renderArr(arr) { + ulEl === null || ulEl === void 0 ? void 0 : ulEl.replaceChildren(); + arr.forEach(function (element) { + var li = document.createElement("li"); + li.textContent = element; + ulEl === null || ulEl === void 0 ? void 0 : ulEl.append(li); + }); +} diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/dist/style.css b/02-TypeScript/03-typescript/HW/vladiBykanov/dist/style.css new file mode 100644 index 000000000..5a5ee73d4 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/dist/style.css @@ -0,0 +1,78 @@ +* { + margin: 0; + padding: 0; +} + +html { + overflow: hidden; + display: flex; + align-items: center; +} + +.startPage { + background-color: white; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.startPage p { + width: 60%; + line-height: 2em; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.3rem; + color: darkblue; +} +.startPage button { + width: 15vw; + height: 5vh; +} + +.inputPage { + background-color: white; + transform: translateY(-100vh); + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font-size: 2rem; + position: absolute; + top: 0; + transition: all 0.5s; +} +.inputPage input { + padding: 0.5em; +} +.inputPage input::placeholder { + font-size: 1.3rem; +} +.inputPage button { + width: 15vw; + height: 5vh; +} +.inputPage .output { + font-size: 1.2rem; + font-weight: 400; +} + +.listDiv { + position: absolute; + left: 0; + top: 0; + height: 100vh; + font-size: 1.3rem; + padding: 1em; +} +.listDiv span { + border-bottom: 1px solid black; + line-height: 1rem; +} +.listDiv .listOfNames { + height: 100%; + display: block; + line-height: 2rem; + margin-top: 1em; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/index.html b/02-TypeScript/03-typescript/HW/vladiBykanov/index.html new file mode 100644 index 000000000..e9ddac810 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/index.html @@ -0,0 +1,41 @@ + + + + + + + class asignment + + + +
+

Pre made list

+

+

+ +
+
+

Calculate the average income of your group

+
+

Enter full name

+ +
+
+

Enter salary

+ +
+
+ + + +
+
Type in your data
+
+ List of names +
    +
    +
    + + + + diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/style.css b/02-TypeScript/03-typescript/HW/vladiBykanov/style.css new file mode 100644 index 000000000..2e65e2508 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/style.css @@ -0,0 +1,84 @@ +* { + margin: 0; + padding: 0; +} + +html { + overflow: hidden; + display: flex; + align-items: center; +} + +.startPage { + background-color: white; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.startPage p { + width: 60%; + line-height: 2em; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.3rem; + color: darkblue; +} +.startPage button { + width: 15vw; + height: 5vh; +} + +.inputPage { + background-color: white; + transform: translateY(-100vh); + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font-size: 2rem; + position: absolute; + top: 0; + transition: all 0.5s; +} +.inputPage input { + padding: 0.5em; +} +.inputPage input::-moz-placeholder { + font-size: 1.3rem; +} +.inputPage input:-ms-input-placeholder { + font-size: 1.3rem; +} +.inputPage input::placeholder { + font-size: 1.3rem; +} +.inputPage button { + width: 15vw; + height: 5vh; +} +.inputPage .output { + font-size: 1.2rem; + font-weight: 400; +} + +.listDiv { + position: absolute; + left: 0; + top: 0; + height: 100vh; + font-size: 1.3rem; + padding: 1em; +} +.listDiv span { + border-bottom: 1px solid black; + line-height: 1rem; +} +.listDiv .listOfNames { + height: 100%; + display: block; + line-height: 2rem; + margin-top: 1em; +} \ No newline at end of file diff --git a/02-TypeScript/03-typescript/HW/vladiBykanov/style.scss b/02-TypeScript/03-typescript/HW/vladiBykanov/style.scss new file mode 100644 index 000000000..68e664414 --- /dev/null +++ b/02-TypeScript/03-typescript/HW/vladiBykanov/style.scss @@ -0,0 +1,80 @@ +* { + margin: 0; + padding: 0; +} + +html { + overflow: hidden; + display: flex; + align-items: center; +} + +.startPage { + background-color: white; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + p { + width: 60%; + line-height: 2em; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.3rem; + color: darkblue; + } + button { + width: 15vw; + height: 5vh; + } +} + +.inputPage { + background-color: white; + transform: translateY(-100vh); + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font-size: 2rem; + position: absolute; + top: 0; + transition: all 0.5s; + input { + padding: 0.5em; + } + input::placeholder { + font-size: 1.3rem; + } + button { + width: 15vw; + height: 5vh; + } + .output { + font-size: 1.2rem; + font-weight: 400; + } +} + +.listDiv { + // border: 1px solid black; + position: absolute; + left: 0; + top: 0; + // width: 20vw; + height: 100vh; + font-size: 1.3rem; + padding: 1em; + span { + border-bottom: 1px solid black; + line-height: 1rem; + } + .listOfNames { + height: 100%; + display: block; + line-height: 2rem; + margin-top: 1em; + } +} diff --git a/02-TypeScript/03-typescript/dist/index.js b/02-TypeScript/03-typescript/dist/index.js new file mode 100644 index 000000000..87705753e --- /dev/null +++ b/02-TypeScript/03-typescript/dist/index.js @@ -0,0 +1,19 @@ +var myName = "Tal"; +var age = 0; +var yearOfBirth = 1971; +var isMarried = true; +isMarried = true; +age = new Date().getFullYear() - yearOfBirth; +console.log(myName + " age is " + age + " and he is married:" + isMarried); +myName = "Tomer"; +age = 21; +isMarried = false; +console.log(myName + " age is " + age + " and he is married:" + isMarried); +myName = 'Ayala'; +age = 20; +isMarried = false; +console.log(myName + " age is " + age + " and she is married:" + isMarried); +console.log(myName, age, isMarried); +// firstName = +// firstAge +// "shlomi, shola avg age is 45" diff --git a/02-TypeScript/03-typescript/dist/style.css b/02-TypeScript/03-typescript/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/example/dist/index.js b/02-TypeScript/03-typescript/example/dist/index.js new file mode 100644 index 000000000..9d38dfd2c --- /dev/null +++ b/02-TypeScript/03-typescript/example/dist/index.js @@ -0,0 +1,31 @@ +var myName = "Tal"; +var age = 0; +var yearOfBirth = 1971; +var isMarried = true; +isMarried = true; +age = new Date().getFullYear() - yearOfBirth; +console.log(myName + " age is " + age + " and he is married:" + isMarried); +myName = "Tomer"; +age = 21; +isMarried = false; +console.log(myName + " age is " + age + " and he is married:" + isMarried); +myName = "Ayala"; +age = 20; +isMarried = false; +console.log(myName + " age is " + age + " and she is married:" + isMarried); +console.log(myName, age, isMarried); +var someNumber; +var someNumber2; +someNumber = 2; +console.log(someNumber); +//artimetica +var x = 4; +console.log(x); +x++; +x = Math.pow(x, 2); +console.log(x); +x = Math.sqrt(x); +console.log(x); +// firstName = +// firstAge +// "shlomi, shola avg age is 45" diff --git a/02-TypeScript/03-typescript/example/index.html b/02-TypeScript/03-typescript/example/index.html new file mode 100644 index 000000000..1b3f593a6 --- /dev/null +++ b/02-TypeScript/03-typescript/example/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + div + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/example/index.ts b/02-TypeScript/03-typescript/example/index.ts new file mode 100644 index 000000000..35502567b --- /dev/null +++ b/02-TypeScript/03-typescript/example/index.ts @@ -0,0 +1,44 @@ +var myName: string = "Tal"; +var age: number = 0; +var yearOfBirth = 1971; +var isMarried: boolean = true; + +isMarried = true; + +age = new Date().getFullYear() - yearOfBirth; + +console.log(`${myName} age is ${age} and he is married:${isMarried}`); + +myName = "Tomer"; +age = 21; +isMarried = false; + +console.log(`${myName} age is ${age} and he is married:${isMarried}`); + +myName = "Ayala"; +age = 20; +isMarried = false; + +console.log(`${myName} age is ${age} and she is married:${isMarried}`); +console.log(myName, age, isMarried); + +var someNumber: number |undefined ; +var someNumber2: number | null; +someNumber = 2; +console.log(someNumber); + +//artimetica + +var x = 4; +console.log(x); +x++; +x = x**2; + +console.log(x); +x = Math.sqrt(x); +console.log(x); + +// firstName = +// firstAge + +// "shlomi, shola avg age is 45" diff --git a/02-TypeScript/03-typescript/example/style.css b/02-TypeScript/03-typescript/example/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/example/style.scss b/02-TypeScript/03-typescript/example/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/03-typescript/exercise/aviva-elias/dist/dist/index.dev.js b/02-TypeScript/03-typescript/exercise/aviva-elias/dist/dist/index.dev.js new file mode 100644 index 000000000..9a390c31f --- /dev/null +++ b/02-TypeScript/03-typescript/exercise/aviva-elias/dist/dist/index.dev.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/02-TypeScript/03-typescript/exercise/aviva-elias/dist/index.js b/02-TypeScript/03-typescript/exercise/aviva-elias/dist/index.js new file mode 100644 index 000000000..9b9bf09f6 --- /dev/null +++ b/02-TypeScript/03-typescript/exercise/aviva-elias/dist/index.js @@ -0,0 +1,20 @@ +var firstNane = "aviva"; +var secondName = "avigdor"; +var firstAge = 46; +var secondAge = 50; +var avg = (firstAge + secondAge) / 2; +console.log("The average age of " + firstNane + " and " + secondAge + " is " + avg); +if (avg < 30) { + console.log("you are very young"); +} +else { + console.log("you are young"); +} +var x = 4; +console.log(x); +var y = 5; +console.log(y); +y = Math.pow(y, 2); +console.log(y); +y = Math.sqrt(y); +console.log(y); diff --git a/02-TypeScript/03-typescript/exercise/aviva-elias/index.html b/02-TypeScript/03-typescript/exercise/aviva-elias/index.html new file mode 100644 index 000000000..e34e67376 --- /dev/null +++ b/02-TypeScript/03-typescript/exercise/aviva-elias/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + diff --git a/02-TypeScript/03-typescript/exercise/aviva-elias/index.ts b/02-TypeScript/03-typescript/exercise/aviva-elias/index.ts new file mode 100644 index 000000000..5e02ae965 --- /dev/null +++ b/02-TypeScript/03-typescript/exercise/aviva-elias/index.ts @@ -0,0 +1,22 @@ +var firstNane:String="aviva"; +var secondName:String="avigdor"; +var firstAge:Number=46; +var secondAge:Number=50; + +var avg:Number=(firstAge+secondAge)/2 + + + +console.log(`The average age of ${firstNane} and ${secondAge} is ${avg}`); +if( avg<30) { console.log ("you are very young");} + +else{console.log( "you are young");} + +var x=4; +console.log(x); +var y=5 +console.log(y) +y=y**2; +console.log(y) +y=Math.sqrt(y) +console.log(y); diff --git a/02-TypeScript/03-typescript/shalomkarin/dist/index.js b/02-TypeScript/03-typescript/shalomkarin/dist/index.js new file mode 100644 index 000000000..7f8da6bee --- /dev/null +++ b/02-TypeScript/03-typescript/shalomkarin/dist/index.js @@ -0,0 +1,12 @@ +console.log('This is the exercise we are doing'); +var firstname = "shalom"; +var secondname = "karin"; +console.log(firstname, secondname); +var shalomage = 53; +var karinage = 34; +console.log("Shalom age is " + shalomage); +console.log("karig age is " + karinage); +var average = (shalomage + karinage) / 2; +console.log("THe average age of Shalom & Karin is: " + average); +var myscore = 100; +console.log("Well done!! Your score is " + myscore); diff --git a/02-TypeScript/03-typescript/shalomkarin/index.html b/02-TypeScript/03-typescript/shalomkarin/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/03-typescript/shalomkarin/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/03-typescript/shalomkarin/index.ts b/02-TypeScript/03-typescript/shalomkarin/index.ts new file mode 100644 index 000000000..4a7451c0e --- /dev/null +++ b/02-TypeScript/03-typescript/shalomkarin/index.ts @@ -0,0 +1,12 @@ +console.log('This is the exercise we are doing'); +var firstname:string="shalom"; +var secondname:string="karin"; +console.log(firstname, secondname); +var shalomage:number=53; +var karinage:number=34; +console.log(`Shalom age is ${shalomage}`); +console.log(`karig age is ${karinage}`); +var average=(shalomage+karinage)/2; +console.log(`THe average age of Shalom & Karin is: ${average}`); +var myscore=100; +console.log(`Well done!! Your score is ${myscore}`); \ No newline at end of file diff --git a/02-TypeScript/04-conditions/HW/instructions.md b/02-TypeScript/04-conditions/HW/instructions.md new file mode 100644 index 000000000..cbae50bb4 --- /dev/null +++ b/02-TypeScript/04-conditions/HW/instructions.md @@ -0,0 +1 @@ +https://contactmentor.com/javascript-if-else-exercises-solutions/ diff --git a/02-TypeScript/04-conditions/example-2/dist/index.js b/02-TypeScript/04-conditions/example-2/dist/index.js new file mode 100644 index 000000000..180a58061 --- /dev/null +++ b/02-TypeScript/04-conditions/example-2/dist/index.js @@ -0,0 +1,21 @@ +var x = 7; +if (x < 4) { + console.log("is is amller than 4"); +} +else if (x >= 4 && x < 10) { + console.log("bigger than or equla to 4 and amller than 10"); +} +else { + console.log("bigget than 10"); +} +var theName = "Dana"; +switch (theName) { + case "Dana": + console.log("Hi I am Dana"); + break; + case "Gimi": + console.log("Hi I am Gimi"); + break; + default: + console.log("I dont have this name"); +} diff --git a/02-TypeScript/04-conditions/example-2/index.html b/02-TypeScript/04-conditions/example-2/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/example-2/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/example-2/index.ts b/02-TypeScript/04-conditions/example-2/index.ts new file mode 100644 index 000000000..2ca252586 --- /dev/null +++ b/02-TypeScript/04-conditions/example-2/index.ts @@ -0,0 +1,21 @@ +var x = 7; +if (x < 4) { + console.log("is is amller than 4"); +} else if (x >= 4 && x < 10) { + console.log("bigger than or equla to 4 and amller than 10"); +} else { + console.log("bigget than 10"); +} + +var theName: string = "Dana"; + +switch (theName) { + case "Dana": + console.log("Hi I am Dana"); + break; + case "Gimi": + console.log("Hi I am Gimi"); + break; + default: + console.log("I dont have this name"); +} diff --git a/02-TypeScript/04-conditions/example-comparison/dist/index.js b/02-TypeScript/04-conditions/example-comparison/dist/index.js new file mode 100644 index 000000000..eea30075d --- /dev/null +++ b/02-TypeScript/04-conditions/example-comparison/dist/index.js @@ -0,0 +1,12 @@ +var x = false; +x = true; +console.log(x === true); +console.log("Logical Operators"); +// -- AND -- +console.log(true && false); //both should be true to return true +// -- OR --- +console.log(true || false); //at least one should be true to return true +// NOT +console.log(!false); +console.log(!0); +// falisfy variables: false, 0, null, undefined, [] diff --git a/02-TypeScript/04-conditions/example-comparison/index.html b/02-TypeScript/04-conditions/example-comparison/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/example-comparison/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/example-comparison/index.ts b/02-TypeScript/04-conditions/example-comparison/index.ts new file mode 100644 index 000000000..1055f1821 --- /dev/null +++ b/02-TypeScript/04-conditions/example-comparison/index.ts @@ -0,0 +1,18 @@ +var x:boolean = false; +x = true; +console.log(x === true); + + +console.log("Logical Operators") + +// -- AND -- +console.log(true && false); //both should be true to return true + +// -- OR --- +console.log(true || false); //at least one should be true to return true + +// NOT +console.log(!false); + +console.log(!0) +// falisfy variables: false, 0, null, undefined, [] \ No newline at end of file diff --git a/02-TypeScript/04-conditions/example-if/dist/index.js b/02-TypeScript/04-conditions/example-if/dist/index.js new file mode 100644 index 000000000..bb9611b78 --- /dev/null +++ b/02-TypeScript/04-conditions/example-if/dist/index.js @@ -0,0 +1,32 @@ +var x = 5; +if (x > 5) { + //block code + console.log('x is larger than 5'); +} +// var result = confirm('Do you agree'); +// console.log(result); +// if(result){ +// alert("I hacked your bank account") +// } else { +// alert("Yor bank acount was saved!!!!") +// }; +var donationStr = prompt("How much will you donate?"); +console.log(donationStr, typeof donationStr); +if (donationStr) { + var donation = parseInt(donationStr); + console.log(donation, typeof donation); + if (!isNaN(donation)) { + if (donation > 100) { + alert("You are awsome!!!"); + } + else { + alert('thanks!'); + } + } + else { + alert("You didnt put a number"); + } +} +else { + alert('you should enter a number'); +} diff --git a/02-TypeScript/04-conditions/example-if/index.html b/02-TypeScript/04-conditions/example-if/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/example-if/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/example-if/index.ts b/02-TypeScript/04-conditions/example-if/index.ts new file mode 100644 index 000000000..ce99d952a --- /dev/null +++ b/02-TypeScript/04-conditions/example-if/index.ts @@ -0,0 +1,38 @@ +var x:number= 5; + +if(x>5){ + //block code + console.log('x is larger than 5') +} + +// var result = confirm('Do you agree'); +// console.log(result); + +// if(result){ +// alert("I hacked your bank account") +// } else { +// alert("Yor bank acount was saved!!!!") +// }; + +var donationStr = prompt("How much will you donate?"); +console.log(donationStr, typeof donationStr); + +if(donationStr){ + var donation = parseInt(donationStr); + console.log(donation, typeof donation); + if(!isNaN(donation)){ + if(donation>100){ + alert("You are awsome!!!") + } else { + alert('thanks!'); + } + } else { + alert("You didnt put a number") + } + +} else { + alert('you should enter a number'); +} + + + diff --git a/02-TypeScript/04-conditions/exercise/Itay-Amosi/dist/index.js b/02-TypeScript/04-conditions/exercise/Itay-Amosi/dist/index.js new file mode 100644 index 000000000..afb9693ad --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Itay-Amosi/dist/index.js @@ -0,0 +1,13 @@ +// // var password = `opensesami`; +// // console.log(password); +// var password = prompt(`enter password`) +// console.log(password); +// if (password === `opensesami`){ +// alert("you got all the gold in the cave!!!!") +// }else{ +// alert("you are done") +// } +var n = null; +console.log(number * 1.17); +var calulate = prompt; +// console.log(` the average salary of 10 Developers is ${} `); diff --git a/02-TypeScript/04-conditions/exercise/Itay-Amosi/dist/style.css b/02-TypeScript/04-conditions/exercise/Itay-Amosi/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/04-conditions/exercise/Itay-Amosi/index.html b/02-TypeScript/04-conditions/exercise/Itay-Amosi/index.html new file mode 100644 index 000000000..93839e6cd --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Itay-Amosi/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + +
    +
    +
    + +
    + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/Itay-Amosi/index.ts b/02-TypeScript/04-conditions/exercise/Itay-Amosi/index.ts new file mode 100644 index 000000000..641aec1f5 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Itay-Amosi/index.ts @@ -0,0 +1,17 @@ +// // var password = `opensesami`; +// // console.log(password); + +// var password = prompt(`enter password`) +// console.log(password); + +// if (password === `opensesami`){ +// alert("you got all the gold in the cave!!!!") +// }else{ +// alert("you are done") +// } + +var n:number = null; +console.log(number * 1.17) + +var calulate = prompt; +// console.log(` the average salary of 10 Developers is ${} `); \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/Itay-Amosi/style.css b/02-TypeScript/04-conditions/exercise/Itay-Amosi/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/04-conditions/exercise/Itay-Amosi/style.scss b/02-TypeScript/04-conditions/exercise/Itay-Amosi/style.scss new file mode 100644 index 000000000..ef7a40270 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Itay-Amosi/style.scss @@ -0,0 +1,3 @@ +calulate{ + +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/Room 7/app.ts b/02-TypeScript/04-conditions/exercise/Room 7/app.ts new file mode 100644 index 000000000..57ef5c296 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Room 7/app.ts @@ -0,0 +1,55 @@ +// 3) + +var loan; +var years; + +loan = prompt("Please enter the amount of $ you want to take:"); + +if (loan) { + loan = parseInt(loan); + if (!isNaN(loan)){ + years = prompt("For how many years?"); + if (years) { + years = parseInt(years); + + if (!isNaN(years)){ + var interest:number = 1; + if (years <= 5){ + interest = 1.2; + } + if (years >= 10){ + interest = 1.3; + } + if (years >= 20){ + interest = 5; + } + + var totalLoan:number = loan * interest; + alert(`Your total loan after adding ${interest} yearly percentage ${totalLoan} and your monthly payment will be ${totalLoan/(years*12)}$`); + + } else { + alert("You didn't enter a number"); + } + } + } else { + alert("You didn't enter a number"); + } +} + + +// 2) + +var num; + +num = prompt("Please enter a number:"); + +if (num) { + num = parseInt(num); + if (!isNaN(num)){ + var total = num*1.17; + alert(`Your total amount with vat ${total}`); + + } else { + alert("You didn't enter a number"); + } +} diff --git a/02-TypeScript/04-conditions/exercise/Room 7/dist/app.js b/02-TypeScript/04-conditions/exercise/Room 7/dist/app.js new file mode 100644 index 000000000..9cf2ac4ce --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Room 7/dist/app.js @@ -0,0 +1,46 @@ +// 3) +var loan; +var years; +loan = prompt("Please enter the amount of $ you want to take:"); +if (loan) { + loan = parseInt(loan); + if (!isNaN(loan)) { + years = prompt("For how many years?"); + if (years) { + years = parseInt(years); + if (!isNaN(years)) { + var interest = 1; + if (years <= 5) { + interest = 1.2; + } + if (years >= 10) { + interest = 1.3; + } + if (years >= 20) { + interest = 5; + } + var totalLoan = loan * interest; + alert("Your total loan after adding " + interest + " yearly percentage " + totalLoan + " and your monthly payment will be " + totalLoan / (years * 12) + "$"); + } + else { + alert("You didn't enter a number"); + } + } + } + else { + alert("You didn't enter a number"); + } +} +// 2) +var num; +num = prompt("Please enter a number:"); +if (num) { + num = parseInt(num); + if (!isNaN(num)) { + var total = num * 1.17; + alert("Your total amount with vat " + total); + } + else { + alert("You didn't enter a number"); + } +} diff --git a/02-TypeScript/04-conditions/exercise/Room 7/index.html b/02-TypeScript/04-conditions/exercise/Room 7/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Room 7/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/Shalom+Ayala/dist/index.js b/02-TypeScript/04-conditions/exercise/Shalom+Ayala/dist/index.js new file mode 100644 index 000000000..74ea46171 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Shalom+Ayala/dist/index.js @@ -0,0 +1,23 @@ +// exercise No. 1 +// var sisma:string = prompt ('Pleas insert your password'); +// if (sisma=='sisma'){ +// alert ('You have enetered the cave'); +// } else { +// alert ('you are done'); +// } +// exercise No. 2 +var pricestr = prompt('Please enter the price'); +if (pricestr) { + var price = parseInt(pricestr); + console.log(price, typeof price); + if (isNaN(price)) { + alert('You did not enter a number'); + } + else { + var vat = price * .17; + console.log("The vat is " + vat); + } +} +else { + alert('You didnt enter a number'); +} diff --git a/02-TypeScript/04-conditions/exercise/Shalom+Ayala/index.html b/02-TypeScript/04-conditions/exercise/Shalom+Ayala/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Shalom+Ayala/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/Shalom+Ayala/index.ts b/02-TypeScript/04-conditions/exercise/Shalom+Ayala/index.ts new file mode 100644 index 000000000..d4e202792 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/Shalom+Ayala/index.ts @@ -0,0 +1,25 @@ +// exercise No. 1 + +// var sisma:string = prompt ('Pleas insert your password'); +// if (sisma=='sisma'){ +// alert ('You have enetered the cave'); +// } else { +// alert ('you are done'); +// } + + +// exercise No. 2 + +var pricestr = prompt ('Please enter the price'); +if (pricestr){ + var price = parseInt (pricestr); + console.log (price, typeof price); + if (isNaN(price)) { + alert ('You did not enter a number'); + } else { + var vat = price*.17; + console.log (`The vat is ${vat}`); + } +} else { + alert ('You didnt enter a number'); +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/aviva-elias/dist/index.js b/02-TypeScript/04-conditions/exercise/aviva-elias/dist/index.js new file mode 100644 index 000000000..80a8cdf4b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/aviva-elias/dist/index.js @@ -0,0 +1,53 @@ +var password = prompt("enter your password"); +console.log(password); +if (password == "open sesami") { + alert("you got all the gold in the cave"); +} +else { + alert("you are done"); +} +var amountstr = prompt('enter your amount'); +if (amountstr) { + var amount = parseInt(amountstr); + if (!isNaN(amount)) { + alert("your vat is " + amount * 0.17); + } + else { + alert("you didnt put anumber"); + } +} +else { + alert('you didnt put something'); +} +var loenstr = prompt("Enter the requested loan amount"); +if (loenstr) { + var loen = parseInt(loenstr); + if (!isNaN(loen)) + console.log("The requested loen amount is ", loen); +} +else { + alert("you did not put a value"); +} +var itereststr = prompt("Enter the annual interest"); +if (itereststr) { + var interest = parseInt(itereststr); + if (!isNaN(interest)) { + console.log("The annual interest off the loen is ", interest); + } + else { + alert("you did not put anumber"); + } +} +else { + alert("you did not put a value"); +} +var yearstr = prompt(" Enter how many years the loan is"); +if (yearstr) { + var year = parseInt(yearstr); + console.log("THE requasted loen ia for ", year, "years"); +} +else { + alert("you did not put a value"); +} +var totalLoen = (loen * (interest / 100 + 1)); +alert("THE TOTAL LOEN IS " + totalLoen); diff --git a/02-TypeScript/04-conditions/exercise/aviva-elias/index.html b/02-TypeScript/04-conditions/exercise/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/aviva-elias/index.ts b/02-TypeScript/04-conditions/exercise/aviva-elias/index.ts new file mode 100644 index 000000000..a79ef6fe6 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/aviva-elias/index.ts @@ -0,0 +1,60 @@ + +var password= prompt("enter your password") +console.log(password) +if(password=="open sesami"){ + + alert( "you got all the gold in the cave") + } + else{ + alert("you are done") +} + + +var amountstr= prompt('enter your amount') +if (amountstr){ + var amount=parseInt(amountstr); + if(!isNaN(amount)){ + alert("your vat is "+amount*0.17 ) + + } + else{alert("you didnt put anumber")} +} +else{ alert('you didnt put something')} + + + +var loenstr=prompt("Enter the requested loan amount") + +if(loenstr){ + var loen=parseInt(loenstr); + if(!isNaN(loen)) + console.log( "The requested loen amount is ",loen) +} +else{ + alert("you did not put a value"); +} + +var itereststr=prompt("Enter the annual interest"); +if(itereststr){ + var interest=parseInt(itereststr); + if(!isNaN(interest)){ + console.log("The annual interest off the loen is " ,interest);} + else{ + alert("you did not put anumber") + } +} +else{ + alert("you did not put a value"); +} + +var yearstr=prompt(" Enter how many years the loan is") + if(yearstr){ + var year=parseInt(yearstr) + console.log("THE requasted loen ia for ",year,"years") + } + else{ + alert( "you did not put a value"); +} +var totalLoen:number= (loen*(interest/100+1)) +alert("THE TOTAL LOEN IS "+totalLoen) + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/instructions.md b/02-TypeScript/04-conditions/exercise/instructions.md new file mode 100644 index 000000000..2bf104678 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/instructions.md @@ -0,0 +1,6 @@ +1) get a password from the user, and if the password is "open sesami", then say "you got all the gold in the cave" else say "You are done!" + +2) get a an amount from user and calulate vat (Mam, 1.17) + +3) get from the user loan amount, yearly precentage, for how many years, and return the total amount the user will have to pay enetualy. + diff --git a/02-TypeScript/04-conditions/exercise/john-yuval/dist/index.js b/02-TypeScript/04-conditions/exercise/john-yuval/dist/index.js new file mode 100644 index 000000000..89866128a --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/john-yuval/dist/index.js @@ -0,0 +1,25 @@ +// ex1: +// var password = prompt("Please enter your password",); +// if (password == "open sesami") { +// console.log( "you got all the gold in the cave" ) +// } +// else{ +// console.log( "You are done!" ) +// } +// ex 2: +// var amount = prompt("get a number: ") +// if(amount){ +// var number_amount = parseInt(amount); +// var total_amount = number_amount * 1.17 +// console.log(total_amount) +// } +//ex3: +// var loan = prompt("get a loan: ") +// var percentage = 0.03 +// var years = prompt("for how many years?") +// if (loan && years){ +// var number_loan = parseInt(loan); +// var number_years = parseInt(years); +// var total = (number_loan * Math.pow(1+0.03,number_years)) +// console.log(total) +// } diff --git a/02-TypeScript/04-conditions/exercise/john-yuval/index.html b/02-TypeScript/04-conditions/exercise/john-yuval/index.html new file mode 100644 index 000000000..c6d38daab --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/john-yuval/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/john-yuval/index.ts b/02-TypeScript/04-conditions/exercise/john-yuval/index.ts new file mode 100644 index 000000000..ca1428300 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/john-yuval/index.ts @@ -0,0 +1,38 @@ +// ex1: + +// var password = prompt("Please enter your password",); + +// if (password == "open sesami") { +// console.log( "you got all the gold in the cave" ) +// } +// else{ +// console.log( "You are done!" ) +// } + +// ex 2: + +// var amount = prompt("get a number: ") + +// if(amount){ +// var number_amount = parseInt(amount); +// var total_amount = number_amount * 1.17 +// console.log(total_amount) + +// } + +//ex3: + +// var loan = prompt("get a loan: ") +// var percentage = 0.03 +// var years = prompt("for how many years?") + +// if (loan && years){ +// var number_loan = parseInt(loan); +// var number_years = parseInt(years); +// var total = (number_loan * Math.pow(1+0.03,number_years)) +// console.log(total) +// } + + + + diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 1/dist/index.js b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/dist/index.js new file mode 100644 index 000000000..85fdab7f8 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/dist/index.js @@ -0,0 +1,14 @@ +var passwordForm = document.querySelector("#passwordForm"); +var passwordInput = document.querySelector("#passwordInput"); +passwordForm.addEventListener("submit", function (event) { + event.preventDefault(); + var password = passwordInput.value; + if (password === "opensesame") { + console.log("You got all the gold in the cave!"); + alert("You got all the gold in the cave!"); + } + else { + console.log("Wrong Password!"); + alert("Wrong Password!"); + } +}); diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 1/dist/style.css b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/dist/style.css new file mode 100644 index 000000000..44de89187 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/dist/style.css @@ -0,0 +1,39 @@ +* { + margin: 0; + padding: 0; +} + +form { + width: 300px; + margin: 0 auto; + text-align: center; +} + +label, input { + display: block; + margin: 10px 0; +} + +input[type=password] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; +} + +button[type=submit] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button[type=submit]:hover { + background-color: #45a049; +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 1/index.html b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/index.html new file mode 100644 index 000000000..d376a0333 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/index.html @@ -0,0 +1,23 @@ + + + + + + + exercise - matanel + + + + +

    pass is opensesame

    + +
    +
    +
    + +
    + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 1/index.ts b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/index.ts new file mode 100644 index 000000000..e7cc865c0 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/index.ts @@ -0,0 +1,14 @@ + const passwordForm = document.querySelector("#passwordForm"); + const passwordInput = document.querySelector("#passwordInput"); + passwordForm.addEventListener("submit", (event) => { + event.preventDefault(); + const password = passwordInput.value; + + if (password === "opensesame") { + console.log("You got all the gold in the cave!"); + alert("You got all the gold in the cave!") + } else { + console.log("Wrong Password!"); + alert("Wrong Password!") + } + }); \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 1/style.css b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/style.css new file mode 100644 index 000000000..44de89187 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/style.css @@ -0,0 +1,39 @@ +* { + margin: 0; + padding: 0; +} + +form { + width: 300px; + margin: 0 auto; + text-align: center; +} + +label, input { + display: block; + margin: 10px 0; +} + +input[type=password] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; +} + +button[type=submit] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button[type=submit]:hover { + background-color: #45a049; +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 1/style.scss b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/style.scss new file mode 100644 index 000000000..a1bdcc98b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 1/style.scss @@ -0,0 +1,36 @@ +*{ + margin: 0; + padding: 0; +} + + +form { + width: 300px; + margin: 0 auto; + text-align: center; + } + label, input { + display: block; + margin: 10px 0; + } + input[type="password"] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + } + button[type="submit"] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + } + button[type="submit"]:hover { + background-color: #45a049; + } \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 2/dist/index.js b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/dist/index.js new file mode 100644 index 000000000..085801206 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/dist/index.js @@ -0,0 +1,13 @@ +var formElement = document.getElementById('calculator-form'); +formElement.addEventListener('submit', function (event) { + event.preventDefault(); + var inputElement = document.getElementById('amount-input'); + var amount = parseFloat(inputElement.value); + var vatRate = 1.17; + var vat = amount * vatRate; + var total = amount + vat; + var resultsElement = document.getElementById('results'); + resultsElement.textContent = "VAT: " + vat + " | Total: " + total; + console.log("VAT: " + vat); + console.log("Total: " + total); +}); diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 2/dist/style.css b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/dist/style.css new file mode 100644 index 000000000..787adfb21 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/dist/style.css @@ -0,0 +1,56 @@ +* { + margin: 0; + padding: 0; +} + +h1 { + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +#calculator-form { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; +} + +#calculator-form label { + font-size: 18px; + margin-bottom: 10px; +} + +#calculator-form input[type=number] { + width: 100%; + font-size: 18px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +#calculator-form button[type=submit] { + width: 100%; + font-size: 18px; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#calculator-form button[type=submit]:hover { + background-color: #45a049; +} + +#results { + margin-top: 20px; + font-size: 18px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 2/index.html b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/index.html new file mode 100644 index 000000000..3c568ebf2 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/index.html @@ -0,0 +1,24 @@ + + + + + + + exercise - matanel (task2) + + + + +

    Task 2 - Matanel

    + +
    + + + +
    +

    + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 2/index.ts b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/index.ts new file mode 100644 index 000000000..1254f338b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/index.ts @@ -0,0 +1,13 @@ +const formElement = document.getElementById('calculator-form') as HTMLFormElement; +formElement.addEventListener('submit', (event) => { + event.preventDefault(); + const inputElement = document.getElementById('amount-input') as HTMLInputElement; + const amount = parseFloat(inputElement.value); + const vatRate = 1.17; + const vat = amount * vatRate; + const total = amount + vat; + const resultsElement = document.getElementById('results') as HTMLParagraphElement; + resultsElement.textContent = `VAT: ${vat} | Total: ${total}`; + console.log(`VAT: ${vat}`); + console.log(`Total: ${total}`); +}); \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 2/style.css b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/style.css new file mode 100644 index 000000000..787adfb21 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/style.css @@ -0,0 +1,56 @@ +* { + margin: 0; + padding: 0; +} + +h1 { + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +#calculator-form { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; +} + +#calculator-form label { + font-size: 18px; + margin-bottom: 10px; +} + +#calculator-form input[type=number] { + width: 100%; + font-size: 18px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +#calculator-form button[type=submit] { + width: 100%; + font-size: 18px; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#calculator-form button[type=submit]:hover { + background-color: #45a049; +} + +#results { + margin-top: 20px; + font-size: 18px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/matanel harush/task 2/style.scss b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/style.scss new file mode 100644 index 000000000..c2ce627f3 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/matanel harush/task 2/style.scss @@ -0,0 +1,57 @@ +*{ + margin: 0; + padding: 0; +} + + +h1{ + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +#calculator-form { + display: flex; + flex-direction: column; + align-items: center; + width: 300px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + } + + #calculator-form label { + font-size: 18px; + margin-bottom: 10px; + } + + #calculator-form input[type="number"] { + width: 100%; + font-size: 18px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + } + + #calculator-form button[type="submit"] { + width: 100%; + font-size: 18px; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + } + + #calculator-form button[type="submit"]:hover { + background-color: #45a049; + } + + #results { + margin-top: 20px; + font-size: 18px; + display: flex; + justify-content: center; + } \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/noa-meillet/dist/index.js b/02-TypeScript/04-conditions/exercise/noa-meillet/dist/index.js new file mode 100644 index 000000000..6bb5baa07 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/noa-meillet/dist/index.js @@ -0,0 +1,72 @@ +alert("First exercise"); +var password = prompt("Please enter the password:"); +if (password == "open sesami") { + alert("you got all the gold in the cave"); +} +else { + alert("You are done!"); +} +alert("Second exercise"); +var priceStr = prompt("Please enter the price of the item:"); +if (priceStr) { + var price = parseInt(priceStr); + if (!isNaN(price)) { + if (price > 0) { + alert("The price of the item after vat is " + price * 1.17); + } + else if (price < 0) { + alert("The price of the item can not be less then 0..."); + } + else { + alert("The item is FREE!!!!!"); + } + } + else { + alert("You didnt put a number"); + } +} +else { + alert("You should enter something"); +} +alert("Third exercise"); +var loan; +var years; +var yearlyPrc; +var loanStr = prompt("Please enter the loan amount you need:"); +if (loanStr) { + loan = parseInt(loanStr); + if (!isNaN(loan)) { + } + else { + alert("You didnt put a number"); + } +} +else { + alert("You should enter something"); +} +var yearsStr = prompt("Please enter in how much year you will return the loan:"); +if (yearsStr) { + years = parseInt(yearsStr); + if (!isNaN(years)) { + } + else { + alert("You didnt put a number"); + } +} +else { + alert("You should enter something"); +} +var yearlyPrcStr = prompt("Please the yearly percentage:"); +if (yearlyPrcStr) { + yearlyPrc = parseInt(yearlyPrcStr); + if (!isNaN(yearlyPrc)) { + } + else { + alert("You didnt put a number"); + } +} +else { + alert("You should enter something"); +} +var finalLoan = loan + (loan / yearlyPrc * years); +alert("for a loan of " + loan + " for " + years + " years, with a yearly percentage of " + yearlyPrc + "%, you will return in the end " + finalLoan); diff --git a/02-TypeScript/04-conditions/exercise/noa-meillet/index.html b/02-TypeScript/04-conditions/exercise/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/noa-meillet/index.ts b/02-TypeScript/04-conditions/exercise/noa-meillet/index.ts new file mode 100644 index 000000000..8d11d82b2 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/noa-meillet/index.ts @@ -0,0 +1,64 @@ +alert("First exercise"); + +var password = prompt("Please enter the password:"); +if(password == "open sesami"){ + alert("you got all the gold in the cave"); +} else { + alert("You are done!"); +} + +alert("Second exercise"); + +var priceStr = prompt("Please enter the price of the item:"); +if (priceStr){ + var price = parseInt(priceStr); + if(!isNaN(price)){ + if (price > 0){ + alert("The price of the item after vat is " + price*1.17); + } else if (price <0){ + alert("The price of the item can not be less then 0..."); + } else { + alert("The item is FREE!!!!!"); + } + } else { + alert("You didnt put a number"); + } +} else { + alert("You should enter something"); +} + +alert("Third exercise"); + +var loan;var years;var yearlyPrc; +var loanStr = prompt("Please enter the loan amount you need:"); +if (loanStr){ + loan = parseInt(loanStr); + if(!isNaN(loan)){ + } else { + alert("You didnt put a number"); + } +} else { + alert("You should enter something"); +} +var yearsStr = prompt("Please enter in how much year you will return the loan:"); +if (yearsStr){ + years = parseInt(yearsStr); + if(!isNaN(years)){ + } else { + alert("You didnt put a number"); + } +} else { + alert("You should enter something"); +} +var yearlyPrcStr = prompt("Please the yearly percentage:"); +if (yearlyPrcStr){ + yearlyPrc = parseInt(yearlyPrcStr); + if(!isNaN(yearlyPrc)){ + } else { + alert("You didnt put a number"); + } +} else { + alert("You should enter something"); +} +var finalLoan= loan+(loan/yearlyPrc*years); +alert (`for a loan of ${loan} for ${years} years, with a yearly percentage of ${yearlyPrc}%, you will return in the end ${finalLoan}`); diff --git a/02-TypeScript/04-conditions/exercise/room 4/dist/index.js b/02-TypeScript/04-conditions/exercise/room 4/dist/index.js new file mode 100644 index 000000000..dc109f8dc --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/room 4/dist/index.js @@ -0,0 +1,49 @@ +var loanAmount; +var yearlyPre; +var years; +var loanAmountStr = prompt('enter loan amount:'); +if (loanAmountStr) { + loanAmount = parseInt(loanAmountStr); + if (isNaN(loanAmount)) { + while (true) { + alert("You didnt put a number please reload page"); + } + } +} +var yearlyPreStr = prompt('enter yearly increase %:'); +if (yearlyPreStr) { + yearlyPre = parseInt(yearlyPreStr); + // yearlyPre = (100 + yearlyPre)/100 + if (isNaN(yearlyPre)) { + alert("You didnt put a number"); + while (true) { + alert("You didnt put a number please reload page"); + } + } +} +var yearsStr = prompt('how many years'); +if (yearsStr) { + years = parseInt(yearsStr); + if (isNaN(years)) { + alert("You didnt put a number"); + while (true) { + alert("You didnt put a number please reload page"); + } + } +} +var joeBidenStr; +if (yearlyPre < 50) { + joeBidenStr = prompt("would you like a loan from gray shark?"); + if (joeBidenStr) { + alert(' how nice of you to accept our conditions'); + loanAmount = 200000; + yearlyPre = 1.50; + alert("you will have to pay " + loanAmount * Math.pow(yearlyPre, years)); + } +} +if (!joeBidenStr) { + yearlyPre = (yearlyPre + 100) / 100; + alert("you will have to pay " + loanAmount * Math.pow(yearlyPre, years)); + alert("mam = " + loanAmount / 1.17); + alert("mam = " + loanAmount * 1.17); +} diff --git a/02-TypeScript/04-conditions/exercise/room 4/index.html b/02-TypeScript/04-conditions/exercise/room 4/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/room 4/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/room 4/index.ts b/02-TypeScript/04-conditions/exercise/room 4/index.ts new file mode 100644 index 000000000..df58ea101 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/room 4/index.ts @@ -0,0 +1,53 @@ +var loanAmount; +var yearlyPre; +var years; + +var loanAmountStr = prompt('enter loan amount:'); +if(loanAmountStr){ + loanAmount = parseInt(loanAmountStr); + if(isNaN(loanAmount)){ + while(true){ + alert("You didnt put a number please reload page"); + } + } +} + + + +var yearlyPreStr = prompt('enter yearly increase %:'); +if(yearlyPreStr){ + yearlyPre = parseInt(yearlyPreStr); + // yearlyPre = (100 + yearlyPre)/100 + if(isNaN(yearlyPre)){ + alert("You didnt put a number"); + while(true){ + alert("You didnt put a number please reload page"); + } + } +} +var yearsStr = prompt('how many years'); +if(yearsStr){ + years = parseInt(yearsStr); + if(isNaN(years)){ + alert("You didnt put a number"); + while(true){ + alert("You didnt put a number please reload page"); + } + } +} +var joeBidenStr; +if(yearlyPre<50){ + joeBidenStr = prompt(`would you like a loan from gray shark?`); + if(joeBidenStr){ + alert(' how nice of you to accept our conditions') + loanAmount = 200000; + yearlyPre = 1.50; + alert(`you will have to pay ${loanAmount*Math.pow(yearlyPre, years)}`); + } +} +if(!joeBidenStr){ + yearlyPre = (yearlyPre+100)/100 + alert(`you will have to pay ${loanAmount*Math.pow(yearlyPre, years)}`); + alert(`mam = ${loanAmount/1.17}`) + alert(`mam = ${loanAmount*1.17}`) +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/tomer&shai-li/dist/index.js b/02-TypeScript/04-conditions/exercise/tomer&shai-li/dist/index.js new file mode 100644 index 000000000..85a661021 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/tomer&shai-li/dist/index.js @@ -0,0 +1,23 @@ +//1) get a password from the user, and if the password is "open sesami", +// then say "you got all the gold in the cave" else say "You are done!" +//test 1 +// var password = prompt(`enter a password`); +// if(password == `open sesami`){ +// alert(`you got all the gold in the cave`); +// } else { +// alert(`you are done`) +// } +//test2 +// var amountStr = prompt(`enter a amount`); +// var amount= parseInt(amountStr); +// var vat= amount*1.17; +// alert(vat); +//test3// +var loanamountStr = prompt("enter loan amount"); +// var loanamount= parseInt(loanamountStr); +var yearlyprecentageStr = prompt("enter yearly precentage"); +// var yearlyprecentage= parseInt(yearlyprecentageStr); +var yearsStr = prompt("for how many years"); +// var years= parseInt(yearsStr); +// var result= loanamount*yearlyprecentage*years; +// alert(result); diff --git a/02-TypeScript/04-conditions/exercise/tomer&shai-li/index.html b/02-TypeScript/04-conditions/exercise/tomer&shai-li/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/tomer&shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/tomer&shai-li/index.ts b/02-TypeScript/04-conditions/exercise/tomer&shai-li/index.ts new file mode 100644 index 000000000..4dbf97115 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/tomer&shai-li/index.ts @@ -0,0 +1,40 @@ +//1) get a password from the user, and if the password is "open sesami", +// then say "you got all the gold in the cave" else say "You are done!" + +//test 1 + +// var password = prompt(`enter a password`); + +// if(password == `open sesami`){ +// alert(`you got all the gold in the cave`); +// } else { +// alert(`you are done`) +// } + +//test2 + +// var amountStr = prompt(`enter a amount`); + +// var amount= parseInt(amountStr); + +// var vat= amount*1.17; + +// alert(vat); + +//test3// + +var loanamountStr= prompt(`enter loan amount`); + +// var loanamount= parseInt(loanamountStr); + +var yearlyprecentageStr= prompt(`enter yearly precentage`); + +// var yearlyprecentage= parseInt(yearlyprecentageStr); + +var yearsStr= prompt(`for how many years`); + +// var years= parseInt(yearsStr); + + +// var result= loanamount*yearlyprecentage*years; +// alert(result); \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/uriel and karin/dist/index.js b/02-TypeScript/04-conditions/exercise/uriel and karin/dist/index.js new file mode 100644 index 000000000..f57b84a4f --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/uriel and karin/dist/index.js @@ -0,0 +1,30 @@ +// // var pass = prompt("what is the password"); +// // console.log (pass); +// // if (pass === "open sessami"){ +// // console.log ("you got all the gold ")} +// // else {console.log ("you are done")}; +// var ammount = 566; +// console.log (ammount); +// var vat = (ammount)*0.17; +// console.log (vat) +// console.log (`the vat for ${ammount} is ${vat} ` ); +// var vat = (ammount)*1.17; +// console.log (vat); +// console.log (`the ammount ${ammount} shekels with the vat is ${vat} ` ); +var userDetails = { + name: "John Doe", + username: "jonnydoe", + age: 14 +}; +var myEmptyObj = {}; +var nullObj = null; +var undefinedObj; +var isObjectEmpty = function (objectName) { + return (objectName && + Object.keys(objectName).length === 0 && + objectName.constructor === Object); +}; +console.log(isObjectEmpty(userDetails)); // false +console.log(isObjectEmpty(myEmptyObj)); // true +console.log(isObjectEmpty(undefinedObj)); // undefined +console.log(isObjectEmpty(nullObj)); // null diff --git a/02-TypeScript/04-conditions/exercise/uriel and karin/index.html b/02-TypeScript/04-conditions/exercise/uriel and karin/index.html new file mode 100644 index 000000000..d92a79a69 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/uriel and karin/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exercise/uriel and karin/index.ts b/02-TypeScript/04-conditions/exercise/uriel and karin/index.ts new file mode 100644 index 000000000..1583b8428 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/uriel and karin/index.ts @@ -0,0 +1,56 @@ +// // var pass = prompt("what is the password"); +// // console.log (pass); + + +// // if (pass === "open sessami"){ +// // console.log ("you got all the gold ")} + + +// // else {console.log ("you are done")}; + + + + +// var ammount = 566; +// console.log (ammount); + + +// var vat = (ammount)*0.17; +// console.log (vat) +// console.log (`the vat for ${ammount} is ${vat} ` ); + + + +// var vat = (ammount)*1.17; +// console.log (vat); + + + +// console.log (`the ammount ${ammount} shekels with the vat is ${vat} ` ); + +let userDetails = { + name: "John Doe", + username: "jonnydoe", + age: 14 + }; + + let myEmptyObj = {}; + let nullObj = null; + let undefinedObj; + + const isObjectEmpty = (objectName) => { + return ( + objectName && + Object.keys(objectName).length === 0 && + objectName.constructor === Object + ); + }; + + console.log(isObjectEmpty(userDetails)); // false + console.log(isObjectEmpty(myEmptyObj)); // true + console.log(isObjectEmpty(undefinedObj)); // undefined + console.log(isObjectEmpty(nullObj)); // null + + + + diff --git a/02-TypeScript/04-conditions/exercise/vladiExercise/app.ts b/02-TypeScript/04-conditions/exercise/vladiExercise/app.ts new file mode 100644 index 000000000..7f4d1c93e --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/vladiExercise/app.ts @@ -0,0 +1,34 @@ +const output = document.querySelector(".output") as HTMLDivElement | null; +const loanAmount = document.querySelector("#amount") as HTMLInputElement | null; +const loanPeriod = document.querySelector("#period") as HTMLInputElement | null; +const loanPercentage = document.querySelector( + "#percentage" +) as HTMLInputElement | null; + +window.addEventListener("keydown", (e) => { + e.defaultPrevented; + + if (e.key == "Enter") { + console.log("It's working"); + if ( + loanAmount?.value == "" || + loanPeriod?.value == "" || + loanPeriod?.value == "" + ) { + output!.textContent = "Please provide full info"; + } else { + const intAmount = parseInt(loanAmount!.value); + const intPeriod = parseInt(loanPeriod!.value); + const intPercentage = parseInt(loanPercentage!.value); + const finalOutput = calculateLoan(intAmount, intPeriod, intPercentage); + output!.textContent = + `The amount you will have to pay back when you loan ${intAmount}$ for ${intPeriod} years at ${intPercentage}% a year is: ${finalOutput}`; + output!.style.fontSize = '2rem'; + output!.style.margin = '2rem'; + } + } +}); + +function calculateLoan(amount, period, percentage) { + return amount * (percentage / 100) * period + amount; +} diff --git a/02-TypeScript/04-conditions/exercise/vladiExercise/dist/app.js b/02-TypeScript/04-conditions/exercise/vladiExercise/dist/app.js new file mode 100644 index 000000000..40fb26819 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/vladiExercise/dist/app.js @@ -0,0 +1,28 @@ +var output = document.querySelector(".output"); +var loanAmount = document.querySelector("#amount"); +var loanPeriod = document.querySelector("#period"); +var loanPercentage = document.querySelector("#percentage"); +window.addEventListener("keydown", function (e) { + e.defaultPrevented; + if (e.key == "Enter") { + console.log("It's working"); + if ((loanAmount === null || loanAmount === void 0 ? void 0 : loanAmount.value) == "" || + (loanPeriod === null || loanPeriod === void 0 ? void 0 : loanPeriod.value) == "" || + (loanPeriod === null || loanPeriod === void 0 ? void 0 : loanPeriod.value) == "") { + output.textContent = "Please provide full info"; + } + else { + var intAmount = parseInt(loanAmount.value); + var intPeriod = parseInt(loanPeriod.value); + var intPercentage = parseInt(loanPercentage.value); + var finalOutput = calculateLoan(intAmount, intPeriod, intPercentage); + output.textContent = + "The amount you will have to pay back when you loan " + intAmount + "$ for " + intPeriod + " years at " + intPercentage + "% a year is: " + finalOutput; + output.style.fontSize = '2rem'; + output.style.margin = '2rem'; + } + } +}); +function calculateLoan(amount, period, percentage) { + return amount * (percentage / 100) * period + amount; +} diff --git a/02-TypeScript/04-conditions/exercise/vladiExercise/index.html b/02-TypeScript/04-conditions/exercise/vladiExercise/index.html new file mode 100644 index 000000000..c466a3ff8 --- /dev/null +++ b/02-TypeScript/04-conditions/exercise/vladiExercise/index.html @@ -0,0 +1,16 @@ + + + + + + + exercise conditions + + + + + +
    + + + diff --git a/02-TypeScript/04-conditions/exmple-if2/dist/index.js b/02-TypeScript/04-conditions/exmple-if2/dist/index.js new file mode 100644 index 000000000..b6d18033b --- /dev/null +++ b/02-TypeScript/04-conditions/exmple-if2/dist/index.js @@ -0,0 +1,9 @@ +var x = 7; +console.log(x < 5); +if (x > 5) { + //code block + document.write('bigger than'); +} +else { + document.write('smaller'); +} diff --git a/02-TypeScript/04-conditions/exmple-if2/index.html b/02-TypeScript/04-conditions/exmple-if2/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/exmple-if2/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/exmple-if2/index.ts b/02-TypeScript/04-conditions/exmple-if2/index.ts new file mode 100644 index 000000000..047cf98d5 --- /dev/null +++ b/02-TypeScript/04-conditions/exmple-if2/index.ts @@ -0,0 +1,10 @@ +var x = 7; +console.log(x < 5); + + +if(x>5){ + //code block + document.write('bigger than') +} else { + document.write('smaller') +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/Itai-G/dist/index.js b/02-TypeScript/04-conditions/followup-conditions/Itai-G/dist/index.js new file mode 100644 index 000000000..cabe7c783 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/Itai-G/dist/index.js @@ -0,0 +1,27 @@ +// conditions +var x = 20; +console.log(x === 9); +console.log(x >= 20); +console.log(x !== 15); +// logical operators +var x = 10; +var y = 20; +console.log(x > 5 && y > 10); +console.log(x >= 10 || y >= 20); +var donationStr = prompt("how much will you donate?"); +console.log(donationStr); +if (donationStr == !isNaN) { + var donation = parseInt(donationStr); + console.log(donation, typeof donation); + if (typeof donation === 'number') { + if (donation > 100) { + console.log('you are awsme!!'); + } + else { + console.log('cheap!!!'); + } + } +} +else { + alert('you shuld put a number'); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/Itai-G/index.html b/02-TypeScript/04-conditions/followup-conditions/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/Itai-G/index.ts b/02-TypeScript/04-conditions/followup-conditions/Itai-G/index.ts new file mode 100644 index 000000000..802daba79 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/Itai-G/index.ts @@ -0,0 +1,33 @@ +// conditions + + +var x = 20; +console.log(x === 9); +console.log(x >= 20); +console.log(x !== 15); + +// logical operators +var x = 10; +var y = 20; +console.log(x>5 && y>10); +console.log(x>=10 || y>=20); + + + + +var donationStr = prompt("how much will you donate?"); +console.log(donationStr) +if(donationStr ==!isNaN){ + var donation = parseInt(donationStr); + console.log(donation, typeof donation); + if(typeof donation === 'number'){ + if(donation>100){ + console.log('you are awsme!!'); + } else{ + console.log('cheap!!!') + } + } +} else{ + alert('you shuld put a number') +} + diff --git a/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/dist/index.js b/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/dist/index.js new file mode 100644 index 000000000..676d7aa74 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/dist/index.js @@ -0,0 +1,58 @@ +// // false & true +// var x = 8; +// console.log(x == 9); +// var x = 9 +// console.log(x == 9); +// console.log(`---`); +// //console.log("Logical Operators") +// //and +// console.log(true && false); //2 must be true +// console.log(true && true); //2 must be true +// console.log(`---`); +// //or +// console.log(true || false); //1 true must be true +// console.log(false || false); //1 or 2 false must be false +// console.log(true || true); //2 true must be true +// console.log(`---`); +// //not +// console.log(!false); //shows the opposite //true +// console.log(!0); //shows the opposite, opposite of not 0 is true +// // console.log(!0) +// // falisfy variables: false, 0, null, undefined, [] +// console.log(`---`); +// var x:number= 5; +// if (x>4){ +// console.log(`x is larger than 5`) +// } +// var result = confirm(`Are you sure`) +// console.log(result) +// if (result) { +// alert(`i hacked your browser`) +// } +// if (result) { +// alert(`i hacked your browser`) +// }else{ +// alert(`your browser is saved`) +// } +// console.log(`---`); +// const donationstr = prompt(`How mach you donate`) +// console.log(donationstr); +var donationStr = prompt("How mach you donate?"); +console.log(donationStr, typeof donationstr); +if (donationsStr) { + var donation = parseInt(donationsStr); + if (!isNaN(donation)) { + if (donation > 100) { + alert("you are awsome!!!"); + } + else { + alert("thanks!"); + } + } + else { + alert("you are not put a number"); + } +} +else { + alert("you should enter a number"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/index.html b/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/index.ts b/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/index.ts new file mode 100644 index 000000000..1e91b8388 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/Itay-Amosi/index.ts @@ -0,0 +1,79 @@ +// // false & true +// var x = 8; +// console.log(x == 9); + +// var x = 9 +// console.log(x == 9); +// console.log(`---`); + + +// //console.log("Logical Operators") + + +// //and +// console.log(true && false); //2 must be true +// console.log(true && true); //2 must be true +// console.log(`---`); + +// //or +// console.log(true || false); //1 true must be true +// console.log(false || false); //1 or 2 false must be false +// console.log(true || true); //2 true must be true +// console.log(`---`); + +// //not +// console.log(!false); //shows the opposite //true +// console.log(!0); //shows the opposite, opposite of not 0 is true +// // console.log(!0) +// // falisfy variables: false, 0, null, undefined, [] +// console.log(`---`); + + +// var x:number= 5; +// if (x>4){ +// console.log(`x is larger than 5`) +// } + +// var result = confirm(`Are you sure`) +// console.log(result) + +// if (result) { +// alert(`i hacked your browser`) +// } + + + + +// if (result) { +// alert(`i hacked your browser`) +// }else{ +// alert(`your browser is saved`) +// } +// console.log(`---`); + + +// const donationstr = prompt(`How mach you donate`) +// console.log(donationstr); + + + + +var donationStr = prompt(`How mach you donate?`) +console.log(donationStr typeof donationstr); + + +if (donationsStr) { + var donation = parseInt(donationsStr); + if(!isNaN(donation)) { + if(donation>100){ + alert(`you are awsome!!!`); + } else { + alert(`thanks!`); + } +}else{ +alert(`you are not put a number`) +} + +}else { + alert(`you should enter a number`) +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/aviva-elias/dist/index.js b/02-TypeScript/04-conditions/followup-conditions/aviva-elias/dist/index.js new file mode 100644 index 000000000..7995fd2a7 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/aviva-elias/dist/index.js @@ -0,0 +1,55 @@ +var x = false; +console.log(x === false); +console.log(true && true); +console.log(true || false); +console.log(!true); +console.log(!null); +// var donationStr=prompt("How much will you donate?") +// console.log(donationStr,typeof donationStr) +// if(donationStr){ +// var donation = parseInt(donationStr); +// console.log(donation, typeof donation); +// if(!isNaN(donation)){ +// if(donation>100){ +// alert("You are awsome!!!") +// } else { +// alert('thanks!'); +// } +// } else { +// alert("You didnt put a number") +// } +// } else { +// alert('you should enter a number'); +// } +var x = 13; +if (x < 4) { + console.log("is is amller than 4"); +} +else if (x >= 4 && x < 10) { + console.log("bigger than or equla to 4 and amller than 10"); +} +else { + console.log("bigget than 10"); +} +var theName = "DAN"; +switch (theName) { + case "Dana": + console.log("Hi I am Dana"); + break; + case "Gimi": + console.log("Hi I am DAN"); + { } + break; + default: + console.log("I dont have this name"); +} +var x = isEvenorOdd(x), = (void 0)["if"]; +(4 % 2 == 0); +{ + console.log(4 + " is a Even number"); +} +{ + console.log(4 + " is a Odd number"); +} +isEvenorOdd(10); //"10 is a Even number" +isEvenorOdd(19); //"19 is a Odd number" diff --git a/02-TypeScript/04-conditions/followup-conditions/aviva-elias/index.html b/02-TypeScript/04-conditions/followup-conditions/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/aviva-elias/index.ts b/02-TypeScript/04-conditions/followup-conditions/aviva-elias/index.ts new file mode 100644 index 000000000..baa7321bf --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/aviva-elias/index.ts @@ -0,0 +1,67 @@ +var x=false +console.log(x===false); + +console.log(true && true); +console.log(true||false) +console.log(!true) +console.log(!null) + + +// var donationStr=prompt("How much will you donate?") +// console.log(donationStr,typeof donationStr) + +// if(donationStr){ +// var donation = parseInt(donationStr); +// console.log(donation, typeof donation); + +// if(!isNaN(donation)){ +// if(donation>100){ +// alert("You are awsome!!!") +// } else { +// alert('thanks!'); +// } +// } else { +// alert("You didnt put a number") +// } + +// } else { +// alert('you should enter a number'); +// } + +var x =13 +if (x < 4) { + console.log("is is amller than 4");} + else if (x >= 4 && x < 10) { + console.log("bigger than or equla to 4 and amller than 10"); +} else { + console.log("bigget than 10"); +} + +var theName: string = "DAN"; + +switch (theName) { + case "Dana": + console.log("Hi I am Dana"); + break; + case "Gimi": + console.log("Hi I am DAN");{} + break; + default: + console.log("I dont have this name"); +} + + + +var x= isEvenorOdd(x) { + + if(4 % 2 == 0){ + console.log(`${4} is a Even number`) + } + else{ + console.log(`${4} is a Odd number`) + } + } + + isEvenorOdd(10) //"10 is a Even number" + isEvenorOdd(19) //"19 is a Odd number" + diff --git a/02-TypeScript/04-conditions/followup-conditions/matanel harush/dist/index.js b/02-TypeScript/04-conditions/followup-conditions/matanel harush/dist/index.js new file mode 100644 index 000000000..54be12b44 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/matanel harush/dist/index.js @@ -0,0 +1,38 @@ +var x = 1; +var y = 5; +if (x == y) { + console.log("x and y are equal"); +} +else { + console.log("x and y are not equal"); +} +if (x != y) { + console.log("x and y are not equal"); +} +else { + console.log("x and y are equal"); +} +if (x > y) { + console.log("x is greater than y"); +} +else { + console.log("x is not greater than y"); +} +if (x < y) { + console.log("x is less than y"); +} +else { + console.log("x is not less than y"); +} +if (x >= y) { + console.log("x is greater than or equal to y"); +} +else { + console.log("x is not greater than or equal to y"); +} +if (x <= y) { + console.log("x is less than or equal to y"); +} +else { + console.log("x is not less than or equal to y"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/matanel harush/index.html b/02-TypeScript/04-conditions/followup-conditions/matanel harush/index.html new file mode 100644 index 000000000..ca283fc13 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/matanel harush/index.html @@ -0,0 +1,15 @@ + + + + + + + Comparison Operators \ Follow up- Matanel Harush + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/matanel harush/index.ts b/02-TypeScript/04-conditions/followup-conditions/matanel harush/index.ts new file mode 100644 index 000000000..04daf9f01 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/matanel harush/index.ts @@ -0,0 +1,42 @@ +let x = 1; +let y = 5; +if (x == y) { + console.log("x and y are equal"); +} else { + console.log("x and y are not equal"); +} + + +if (x != y) { + console.log("x and y are not equal"); +} else { + console.log("x and y are equal"); +} + + +if (x > y) { + console.log("x is greater than y"); +} else { + console.log("x is not greater than y"); +} + + +if (x < y) { + console.log("x is less than y"); +} else { + console.log("x is not less than y"); +} + + +if (x >= y) { + console.log("x is greater than or equal to y"); +} else { + console.log("x is not greater than or equal to y"); +} + + +if (x <= y) { + console.log("x is less than or equal to y"); +} else { + console.log("x is not less than or equal to y"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/room2/dist/index.js b/02-TypeScript/04-conditions/followup-conditions/room2/dist/index.js new file mode 100644 index 000000000..ce3a86f60 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/room2/dist/index.js @@ -0,0 +1,8 @@ +var x = 10; +console.log(x === 10); +if ((x !== 10) || (x === 10)) { + console.log("Messi (no." + x + ") is the best"); +} +else { + console.log("Mbape is the best"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/room2/index.html b/02-TypeScript/04-conditions/followup-conditions/room2/index.html new file mode 100644 index 000000000..22681297c --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/room2/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/room2/index.ts b/02-TypeScript/04-conditions/followup-conditions/room2/index.ts new file mode 100644 index 000000000..5637f4ac9 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/room2/index.ts @@ -0,0 +1,9 @@ +var x:number = 10; +console.log(x===10); + +if((x!==10) || (x===10)){ + console.log(`Messi (no.${x}) is the best`); +} +else { + console.log("Mbape is the best"); +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi && y/app.ts b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/app.ts new file mode 100644 index 000000000..3f2ff2d6c --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/app.ts @@ -0,0 +1,5 @@ + + + + + diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi && y/dist/app.js b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/dist/app.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi && y/dist/style.css b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/dist/style.css new file mode 100644 index 000000000..579d86777 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/dist/style.css @@ -0,0 +1,3 @@ +body { + background-color: aliceblue; +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi && y/index.html b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/index.html new file mode 100644 index 000000000..f9ad46e1e --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi && y/index.html @@ -0,0 +1,16 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/dist/index.js b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/dist/index.js new file mode 100644 index 000000000..9006e45fb --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/dist/index.js @@ -0,0 +1,9 @@ +var password = prompt("what is your password?"); +console.log(password); +if (password === "open sesami") { + alert("you got all the gold in the cave"); + console.log(password); +} +else { + alert("You are done!"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/dist/loan.js b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/dist/loan.js new file mode 100644 index 000000000..88386dee2 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/dist/loan.js @@ -0,0 +1,6 @@ +var interst = prompt("what is your amount?"); +console.log(amount); +var amount = prompt("what is your amount?"); +console.log(amount); +var years = prompt("what is your amount?"); +console.log(amount); diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/loan.html b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/loan.html new file mode 100644 index 000000000..d6073e196 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/loan.html @@ -0,0 +1,16 @@ + + + + + + + Shlomi + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/loan.ts b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/loan.ts new file mode 100644 index 000000000..b7f6db910 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/ex3/loan.ts @@ -0,0 +1,9 @@ +var interst= prompt ("what is your amount?"); +console.log(amount); + +var amount= prompt ("what is your amount?"); +console.log(amount); + +var years= prompt ("what is your amount?"); +console.log(amount); + diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/index.html b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/index.html new file mode 100644 index 000000000..85a789399 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/index.html @@ -0,0 +1,16 @@ + + + + + + + Shlomi + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/index.ts b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/index.ts new file mode 100644 index 000000000..d819780ef --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/index.ts @@ -0,0 +1,11 @@ +var password= prompt ("what is your password?"); +console.log(password); + +if(password==="open sesami"){ + alert("you got all the gold in the cave") + console.log(password); +} +else{ + alert("You are done!") +} + diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/dist/vat.js b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/dist/vat.js new file mode 100644 index 000000000..2d7a6a116 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/dist/vat.js @@ -0,0 +1,14 @@ +var amount = prompt("what is your amount?"); +console.log(amount); +if (amount) { + var amountNum = parseInt(amount); + if (!isNaN(amountNum)) { + alert("The total amount is " + amountNum * 1.17); + } + else { + prompt("please write a number"); + } +} +else { + prompt("please write something"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/vat.html b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/vat.html new file mode 100644 index 000000000..1b33bfece --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/vat.html @@ -0,0 +1,16 @@ + + + + + + + Shlomi + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/vat.ts b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/vat.ts new file mode 100644 index 000000000..77cf84d12 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/shlomi.samai/vat/vat.ts @@ -0,0 +1,18 @@ +var amount= prompt ("what is your amount?"); +console.log(amount); + +if(amount){ + var amountNum=parseInt(amount); + + if(!isNaN(amountNum)){ + + alert(`The total amount is ${amountNum*1.17}`); + } + else{ + prompt ("please write a number"); + } + +} +else{ + prompt ("please write something"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/start.md b/02-TypeScript/04-conditions/followup-conditions/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/app.ts b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/app.ts new file mode 100644 index 000000000..774698041 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/app.ts @@ -0,0 +1,8 @@ +let x: number = Math.floor(Math.random() * 10) + 1; + +if (x % 2 == 0) { + console.log("X is an even number"); +} +else { + console.log("X is an uneven number"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/dist/app.js b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/dist/app.js new file mode 100644 index 000000000..f10c2018b --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/dist/app.js @@ -0,0 +1,7 @@ +var x = Math.floor(Math.random() * 10) + 1; +if (x % 2 == 0) { + console.log("X is an even number"); +} +else { + console.log("X is an uneven number"); +} diff --git a/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/dist/dist/app.dev.js b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/dist/dist/app.dev.js new file mode 100644 index 000000000..9e4d375b6 --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/dist/dist/app.dev.js @@ -0,0 +1,7 @@ +"use strict"; + +var x = Math.floor(Math.random() * 10) + 1; + +if (x % 2 == 0) { + console.log("X is an even number"); +} \ No newline at end of file diff --git a/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/index.html b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/index.html new file mode 100644 index 000000000..dbd8d65bb --- /dev/null +++ b/02-TypeScript/04-conditions/followup-conditions/vladi&tomer/index.html @@ -0,0 +1,12 @@ + + + + + + + conditions + + + + + \ No newline at end of file diff --git a/02-TypeScript/04-conditions/info/info.md b/02-TypeScript/04-conditions/info/info.md new file mode 100644 index 000000000..08cdb2a10 --- /dev/null +++ b/02-TypeScript/04-conditions/info/info.md @@ -0,0 +1,8 @@ +# Documentations # +Comparison: https://www.w3schools.com/js/js_comparisons.asp +if, else: https://www.w3schools.com/js/js_if_else.asp +switch: https://www.w3schools.com/js/js_switch.asp + +## Video ## +https://www.youtube.com/watch?v=Re-J9ydyuO8 + diff --git a/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/dist/index.js b/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/dist/index.js new file mode 100644 index 000000000..e113c6dc7 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/dist/index.js @@ -0,0 +1,13 @@ +// var shouldIContinue = true; +// while (shouldIContinue) { +// shouldIContinue = confirm (`should I Continue?`); +// console.log(`shouldIContinue`) ; +// } +// task 1 +// for (var i = 99; i > 0 ; i--) { +// console.log(`Bottles of Beer. take one down pass it around, and ${i} on the wall`); +// } +// // task 2 +// for (var i = 1; i < 15 ; i++) { +// console.log(i); +// } diff --git a/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/index.html b/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/index.ts b/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/index.ts new file mode 100644 index 000000000..1cac4b442 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Itay-Amosi/index.ts @@ -0,0 +1,24 @@ +// var shouldIContinue = true; + +// while (shouldIContinue) { +// shouldIContinue = confirm (`should I Continue?`); +// console.log(`shouldIContinue`) ; +// } + + +// task 1 + +// for (var i = 99; i > 0 ; i--) { +// console.log(`Bottles of Beer. take one down pass it around, and ${i} on the wall`); + +// } + + + + +// // task 2 +// for (var i = 1; i < 15 ; i++) { +// console.log(i); + +// } + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/app.ts b/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/app.ts new file mode 100644 index 000000000..8cb88e9f5 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/app.ts @@ -0,0 +1,15 @@ + +// 1) +for (var i = 100 ; i > 0 ; i--){ + console.log(`${i} Bottles of Beer. take one down pass it around, and ${i-1} on the wall"`); +} + +// 2+3) + +var sum:number = 0; +for (var i = 1 ; i <= 3 ; i++){ + for (var j = 1 ; j <= 3 ; j++){ + sum = sum + i; + } +} +console.log(sum) \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/dist/app.js b/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/dist/app.js new file mode 100644 index 000000000..d2e2a138a --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/dist/app.js @@ -0,0 +1,12 @@ +// 1) +for (var i = 100; i > 0; i--) { + console.log(i + " Bottles of Beer. take one down pass it around, and " + (i - 1) + " on the wall\""); +} +// 2+3) +var sum = 0; +for (var i = 1; i <= 3; i++) { + for (var j = 1; j <= 3; j++) { + sum = sum + i; + } +} +console.log(sum); diff --git a/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/index.html b/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Room7-Nikita&Yuval/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/Tal/dist/index.js b/02-TypeScript/05-loops/class-puzzles/Tal/dist/index.js new file mode 100644 index 000000000..99de9c601 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Tal/dist/index.js @@ -0,0 +1,27 @@ +// puzzle 1 +// for (var bottle = 99; bottle > 0; bottle--) { +// console.log( +// `${bottle} on the wall.... one fell done ... ${bottle - 1} left...` +// ); +// } +//puzle 2 +// var n = 10; +// var sum = 0; +// while (n > 0) { +// sum += n; +// console.log(sum); +// n--; +// } +// console.log(sum); +//puzle 3 +var sum = 0; //global variable +for (var j = 0; j < 5; j++) { + var n = 10; //local varaible + console.log(j); + while (n > 0) { + sum += n; + console.log(sum); + n--; + } +} +console.log(sum); diff --git a/02-TypeScript/05-loops/class-puzzles/Tal/index.html b/02-TypeScript/05-loops/class-puzzles/Tal/index.html new file mode 100644 index 000000000..ea519e328 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Tal/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/Tal/index.ts b/02-TypeScript/05-loops/class-puzzles/Tal/index.ts new file mode 100644 index 000000000..63f167e7a --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/Tal/index.ts @@ -0,0 +1,38 @@ +// puzzle 1 +// for (var bottle = 99; bottle > 0; bottle--) { +// console.log( +// `${bottle} on the wall.... one fell done ... ${bottle - 1} left...` +// ); +// } + +//puzle 2 + +// var n = 10; +// var sum = 0; + +// while (n > 0) { +// sum += n; + +// console.log(sum); +// n--; +// } + +// console.log(sum); + +//puzle 3 + +var sum = 0; //global variable + +for (var j = 0; j < 5; j++) { + var n = 10; //local varaible + console.log(j); + + while (n > 0) { + sum += n; + + console.log(sum); + n--; + } +} + +console.log(sum); diff --git a/02-TypeScript/05-loops/class-puzzles/amit-uriel/dist/index.js b/02-TypeScript/05-loops/class-puzzles/amit-uriel/dist/index.js new file mode 100644 index 000000000..785cba240 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/amit-uriel/dist/index.js @@ -0,0 +1,16 @@ +// create a loop which says "99 Bottles of Beer. take one down pass it around, and 98 on the wall"... untill you get to zero bottles. +// for(var i=100; i>0; i--){ +// console.log (`${i} Bottles of Beer. take one down pass it around, and ${i-1} on the wall`); +// } +// 2. calculate with a varibal and a loop how much is 1+2+3+...+n +var n = 0; +var sum = 0; +// for(var i=0; i + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/amit-uriel/index.ts b/02-TypeScript/05-loops/class-puzzles/amit-uriel/index.ts new file mode 100644 index 000000000..a7a011d4c --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/amit-uriel/index.ts @@ -0,0 +1,23 @@ +// create a loop which says "99 Bottles of Beer. take one down pass it around, and 98 on the wall"... untill you get to zero bottles. + + +// for(var i=100; i>0; i--){ +// console.log (`${i} Bottles of Beer. take one down pass it around, and ${i-1} on the wall`); +// } + + +// 2. calculate with a varibal and a loop how much is 1+2+3+...+n + +var n:number = 0; +var sum:number = 0; + +// for(var i=0; i 0; i--) { + console.log(i + " Bottles of Beer on the wall. take one down pass it around, and " + (i - 1) + " bootle of beer on the wall "); +} +console.log("tase 2"); +var n = 4; +var sum = 0; +var sum2 = 0; +for (var j = 1; j <= n; j++) { + for (var i = 1; i <= n; i++) { + sum = sum + i; + console.log(sum); + } + //sum2=sum2+j + //console.log (sum2); +} +console.log(sum + " is the sum of n i doubled n time"); +console.log('task 3'); diff --git a/02-TypeScript/05-loops/class-puzzles/aviva-elias/index.html b/02-TypeScript/05-loops/class-puzzles/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/aviva-elias/index.ts b/02-TypeScript/05-loops/class-puzzles/aviva-elias/index.ts new file mode 100644 index 000000000..8f755aecc --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/aviva-elias/index.ts @@ -0,0 +1,24 @@ +for(var i=99;i>0;i--){ + console.log(`${i} Bottles of Beer on the wall. take one down pass it around, and ${i-1} bootle of beer on the wall `) +} +console.log("tase 2") + + var n:number=4 +var sum:number=0 +var sum2:number=0 + + +for(var j=1;j<=n;j++){ +for( var i=1;i<=n;i++){ + sum=sum+i + console.log(sum ) +} + +//sum2=sum2+j +//console.log (sum2); +} +console.log(`${sum} is the sum of n i doubled n time`) + +console.log('task 3') + + diff --git a/02-TypeScript/05-loops/class-puzzles/group-10/dist/index.js b/02-TypeScript/05-loops/class-puzzles/group-10/dist/index.js new file mode 100644 index 000000000..514cd4bc0 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/group-10/dist/index.js @@ -0,0 +1,21 @@ +for (var i = 99; i > 0; i--) { + console.log(i + " Bottles of Beer. take one down pass it around, and " + (i - 1) + " on the wall"); +} +var sum = 0; +for (var i = 1; i <= 15; i++) { + sum = sum + i; + console.log(i + ", " + sum); +} +console.log(sum); +sum = 0; +var sum2 = 0; +for (var j = 1; j <= 5; j++) { + for (var i = 1; i <= 15; i++) { + sum = sum + i; + } + //console.log (sum); + sum2 = sum2 + (j * sum); + sum = 0; + //console.log (sum2); +} +console.log(sum2); diff --git a/02-TypeScript/05-loops/class-puzzles/group-10/index.html b/02-TypeScript/05-loops/class-puzzles/group-10/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/group-10/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/group-10/index.ts b/02-TypeScript/05-loops/class-puzzles/group-10/index.ts new file mode 100644 index 000000000..f089f9f32 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/group-10/index.ts @@ -0,0 +1,29 @@ +for(var i=99;i>0;i--){ + console.log(`${i} Bottles of Beer. take one down pass it around, and ${i-1} on the wall`) +} + + +var sum=0; +for (var i=1;i<=15;i++){ + sum=sum+i; + console.log(`${i}, ${sum}`); +} +console.log (sum); +sum=0; + + + + +var sum2=0; +for (var j=1;j<=5;j++){ + for (var i=1;i<=15;i++){ + sum=sum+i; + } + //console.log (sum); + sum2 =sum2 +(j*sum); + sum=0; + //console.log (sum2); +} +console.log (sum2); + + diff --git a/02-TypeScript/05-loops/class-puzzles/idan/dist/index.js b/02-TypeScript/05-loops/class-puzzles/idan/dist/index.js new file mode 100644 index 000000000..b00c83b68 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/idan/dist/index.js @@ -0,0 +1,13 @@ +var total = 0; +var joeBidenStr; +var indexStr; +indexStr = prompt('please enter the number to calculate'); +joeBidenStr = prompt('please enter how many times you would like to repeat the enitial calculation'); +for (var joeBiden = parseInt(joeBidenStr); joeBiden > 0; joeBiden--) { + for (var index = parseInt(indexStr); index > 0; index--) { + total += index; + console.log(index); + } + console.log(joeBiden); +} +alert("the total is " + total); diff --git a/02-TypeScript/05-loops/class-puzzles/idan/index.html b/02-TypeScript/05-loops/class-puzzles/idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/idan/index.ts b/02-TypeScript/05-loops/class-puzzles/idan/index.ts new file mode 100644 index 000000000..0af12311d --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/idan/index.ts @@ -0,0 +1,18 @@ + +var total:number = 0; +var joeBidenStr; +var indexStr; + + +indexStr = prompt('please enter the number to calculate'); +joeBidenStr= prompt('please enter how many times you would like to repeat the enitial calculation'); + +for ( var joeBiden = parseInt(joeBidenStr); joeBiden > 0; joeBiden--) { + for (var index = parseInt(indexStr); index > 0; index--) { + total += index; + console.log(index) + } + console.log(joeBiden) +} + +alert(`the total is ${total}`) diff --git a/02-TypeScript/05-loops/class-puzzles/instructions.md b/02-TypeScript/05-loops/class-puzzles/instructions.md new file mode 100644 index 000000000..459f01443 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/instructions.md @@ -0,0 +1,5 @@ +1. create a loop which says "99 Bottles of Beer on the wall. take one down pass it around, and 98 bootle of beer on the wall"... untill you get to zero bottles. + +2. calculate with a varibal and a loop how much is 1+2+3+...+n + +3. calculate with loop inside a loop, how much is (1+2+3+...+n) double j diff --git a/02-TypeScript/05-loops/class-puzzles/john/dist/index.js b/02-TypeScript/05-loops/class-puzzles/john/dist/index.js new file mode 100644 index 000000000..b2da5fa44 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/john/dist/index.js @@ -0,0 +1,11 @@ +// var n = 5 +// var x =0 +// for ( var i =1 ; i <= n; i++){ +// x+=i +// } +// console.log(x) +// var i=99; +// while (i >=0){ +// console.log(`${i} Bottles of Beer.`) +// i--; +// } diff --git a/02-TypeScript/05-loops/class-puzzles/john/index.html b/02-TypeScript/05-loops/class-puzzles/john/index.html new file mode 100644 index 000000000..4cddfe333 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/john/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/john/index.ts b/02-TypeScript/05-loops/class-puzzles/john/index.ts new file mode 100644 index 000000000..2b4653fec --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/john/index.ts @@ -0,0 +1,15 @@ +// var n = 5 +// var x =0 +// for ( var i =1 ; i <= n; i++){ +// x+=i +// } +// console.log(x) + +// var i=99; +// while (i >=0){ +// console.log(`${i} Bottles of Beer.`) +// i--; +// } + + + diff --git a/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/dist/index.js b/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/dist/index.js new file mode 100644 index 000000000..daf4b09bb --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/dist/index.js @@ -0,0 +1,6 @@ +for (var numBottles = 99; numBottles > 0; numBottles--) { + console.log(numBottles + " bottles of beer on the wall, " + numBottles + " bottles of beer."); + console.log("Take one down, pass it around, " + (numBottles - 1) + " bottles of beer on the wall."); +} +console.log("No more bottles of beer on the wall, no more bottles of beer."); +console.log("Go to the store and buy some more, 99 bottles of beer on the wall."); diff --git a/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/index.html b/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/index.html new file mode 100644 index 000000000..50eb0ee90 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/index.ts b/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/index.ts new file mode 100644 index 000000000..c641b1a91 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/matanel harush/Task 1/index.ts @@ -0,0 +1,6 @@ +for (let numBottles = 99; numBottles > 0; numBottles--) { + console.log(`${numBottles} bottles of beer on the wall, ${numBottles} bottles of beer.`); + console.log(`Take one down, pass it around, ${numBottles - 1} bottles of beer on the wall.`); + } + console.log("No more bottles of beer on the wall, no more bottles of beer."); + console.log("Go to the store and buy some more, 99 bottles of beer on the wall."); \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/room 8/dist/index.js b/02-TypeScript/05-loops/class-puzzles/room 8/dist/index.js new file mode 100644 index 000000000..833430f17 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/room 8/dist/index.js @@ -0,0 +1,8 @@ +//2. calculate with a varibal and a loop how much is 1+2+3+...+n +var sum = 0; +var j = ; +for (var i = 1; i <= 15; i++) { + sum = sum + i; + console.log(sum); +} +//3. calculate with loop inside a loop, how much is (1+2+3+...+n) double j diff --git a/02-TypeScript/05-loops/class-puzzles/room 8/index.html b/02-TypeScript/05-loops/class-puzzles/room 8/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/room 8/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/room 8/index.ts b/02-TypeScript/05-loops/class-puzzles/room 8/index.ts new file mode 100644 index 000000000..e2a31d4c3 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/room 8/index.ts @@ -0,0 +1,12 @@ +//2. calculate with a varibal and a loop how much is 1+2+3+...+n +var sum = 0; +var j = + + +for(var i = 1; i <= 15; i++){ + sum = sum+i; + console.log(sum); +} + + +//3. calculate with loop inside a loop, how much is (1+2+3+...+n) double j \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/room3/dist/index.js b/02-TypeScript/05-loops/class-puzzles/room3/dist/index.js new file mode 100644 index 000000000..f13c33290 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/room3/dist/index.js @@ -0,0 +1,28 @@ +// var apples:number = 10; +// while (apples>0) { +// console.log(`${apples} apples. take one down pass it around, and ${apples-1} on the wall`); +// apples -=1; +// } +// var n:number = 19; +// var x:number = 0; +// var sidra:number = 0; +// while (x + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/room3/index.ts b/02-TypeScript/05-loops/class-puzzles/room3/index.ts new file mode 100644 index 000000000..eb350765b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/room3/index.ts @@ -0,0 +1,30 @@ +// var apples:number = 10; +// while (apples>0) { +// console.log(`${apples} apples. take one down pass it around, and ${apples-1} on the wall`); +// apples -=1; +// } + +// var n:number = 19; +// var x:number = 0; +// var sidra:number = 0; +// while (x + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/room4/index.ts b/02-TypeScript/05-loops/class-puzzles/room4/index.ts new file mode 100644 index 000000000..d027e8df5 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/room4/index.ts @@ -0,0 +1,8 @@ + + +// for (var x = 1; x <= 5 ; x++) { +// console.log(x) +// } + +var y = 1 +var i = y+1 diff --git a/02-TypeScript/05-loops/class-puzzles/shlomi.samai/99bottels.ts b/02-TypeScript/05-loops/class-puzzles/shlomi.samai/99bottels.ts new file mode 100644 index 000000000..2e5cf685a --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/shlomi.samai/99bottels.ts @@ -0,0 +1,9 @@ +var i:number=0 +var j:number=0 + +while(i<=3){ +var j:number=j+i +i++ +} + +console.log(j) \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/shlomi.samai/99bottles.html b/02-TypeScript/05-loops/class-puzzles/shlomi.samai/99bottles.html new file mode 100644 index 000000000..89845aa8d --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/shlomi.samai/99bottles.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/shlomi.samai/dist/99bottels.js b/02-TypeScript/05-loops/class-puzzles/shlomi.samai/dist/99bottels.js new file mode 100644 index 000000000..03ce559f7 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/shlomi.samai/dist/99bottels.js @@ -0,0 +1,7 @@ +var i = 0; +var j = 0; +while (i <= 3) { + var j = j + i; + i++; +} +console.log(j); diff --git a/02-TypeScript/05-loops/class-puzzles/tomer&vladi/dist/index.js b/02-TypeScript/05-loops/class-puzzles/tomer&vladi/dist/index.js new file mode 100644 index 000000000..f9f87b1ab --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/tomer&vladi/dist/index.js @@ -0,0 +1,19 @@ +var n = 10; +var result = 0; +for (var i = 1; i <= n; i++) { + result += i; +} +console.log(result); +var n2 = 10; +var result2 = 0; +for (var i = 1; i <= n2; i++) { + result2 += i; + for (var j = 1; j <= n2; j++) { + result2 += j; + } +} +console.log(result2); +//test1 +for (var i = 99; i >= 1; i--) { + console.log(i + " Bottles of Beer. take one down pass it aroundand " + (i - 1) + " on the wall"); +} diff --git a/02-TypeScript/05-loops/class-puzzles/tomer&vladi/index.html b/02-TypeScript/05-loops/class-puzzles/tomer&vladi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/tomer&vladi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/class-puzzles/tomer&vladi/index.ts b/02-TypeScript/05-loops/class-puzzles/tomer&vladi/index.ts new file mode 100644 index 000000000..1c5d2cec8 --- /dev/null +++ b/02-TypeScript/05-loops/class-puzzles/tomer&vladi/index.ts @@ -0,0 +1,24 @@ +var n=10; +var result = 0 +for(var i=1; i<=n; i++){ + result+=i +} +console.log(result) + + +var n2=10; +var result2 = 0 +for(var i=1; i<=n2; i++){ + result2+=i + for(var j=1; j<=n2;j++){ + result2+=j + } +} +console.log(result2) + + +//test1 + +for(var i=99; i>=1;i--){ + console.log(`${i} Bottles of Beer. take one down pass it aroundand ${i-1} on the wall`) +} \ No newline at end of file diff --git a/02-TypeScript/05-loops/example/dist/index.js b/02-TypeScript/05-loops/example/dist/index.js new file mode 100644 index 000000000..68e1f29c8 --- /dev/null +++ b/02-TypeScript/05-loops/example/dist/index.js @@ -0,0 +1,14 @@ +// loops +// for loop +// for (init index value; run as long as the condition is true; change the value of the index) +for (var i = 0; i <= 5; i++) { + // //code block + console.log(i); +} +// var shalomKoopermanIsAStudent => camleCase +// while loop +// var shouldIContinue: boolean = true; +// while (shouldIContinue) { +// shouldIContinue = confirm("Should I continue?"); +// console.log(shouldIContinue); +// } diff --git a/02-TypeScript/05-loops/example/index.html b/02-TypeScript/05-loops/example/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/example/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/example/index.ts b/02-TypeScript/05-loops/example/index.ts new file mode 100644 index 000000000..66aa3b8e4 --- /dev/null +++ b/02-TypeScript/05-loops/example/index.ts @@ -0,0 +1,19 @@ +// loops + +// for loop + +// for (init index value; run as long as the condition is true; change the value of the index) +for (var i = 0; i <= 5; i++) { +// //code block + console.log(i); +} + +// var shalomKoopermanIsAStudent => camleCase + +// while loop +// var shouldIContinue: boolean = true; + +// while (shouldIContinue) { +// shouldIContinue = confirm("Should I continue?"); +// console.log(shouldIContinue); +// } diff --git a/02-TypeScript/05-loops/followup/Itai-G/dist/index.js b/02-TypeScript/05-loops/followup/Itai-G/dist/index.js new file mode 100644 index 000000000..a88d52ca6 --- /dev/null +++ b/02-TypeScript/05-loops/followup/Itai-G/dist/index.js @@ -0,0 +1,10 @@ +//for loop +for (var i = 50; i > 20; i--) { + console.log(i); +} +// while loop +var continueMe = true; +while (continueMe) { + continueMe = confirm("continue next one?"); + console.log(continueMe); +} diff --git a/02-TypeScript/05-loops/followup/Itai-G/index.html b/02-TypeScript/05-loops/followup/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/Itai-G/index.ts b/02-TypeScript/05-loops/followup/Itai-G/index.ts new file mode 100644 index 000000000..6a0d4bac8 --- /dev/null +++ b/02-TypeScript/05-loops/followup/Itai-G/index.ts @@ -0,0 +1,16 @@ +//for loop + + +for(var i = 50; i > 20; i--){ + console.log(i); +} + + +// while loop + + +var continueMe:boolean = true; +while (continueMe){ + continueMe = confirm ("continue next one?") + console.log(continueMe) +} \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/Itay-Amosi/dist/index.js b/02-TypeScript/05-loops/followup/Itay-Amosi/dist/index.js new file mode 100644 index 000000000..3f93dd797 --- /dev/null +++ b/02-TypeScript/05-loops/followup/Itay-Amosi/dist/index.js @@ -0,0 +1,22 @@ +// var shouldIContinue = true; +// while (shouldIContinue) { +// shouldIContinue = confirm (`should I Continue?`); +// console.log(`shouldIContinue`) ; +// } +// task 1 +// for (var i = 99; i > 0 ; i--) { +// console.log(` ${i} Bottles of Beer. take one down pass it around, and ${i - 1} on the wall`); +// } +// // // task 2 +// var n = 19; +// var sum = 0; +// while (n > 0) { +// sum += n; +// console.log(sum); +// n--; +// } +// console.log(sum); +// task 3 +// var n = 10; +// var sum = 0; +// for (var i = 0; i < 5; i++) { diff --git a/02-TypeScript/05-loops/followup/Itay-Amosi/index.html b/02-TypeScript/05-loops/followup/Itay-Amosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/Itay-Amosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/Itay-Amosi/index.ts b/02-TypeScript/05-loops/followup/Itay-Amosi/index.ts new file mode 100644 index 000000000..2d0c25d92 --- /dev/null +++ b/02-TypeScript/05-loops/followup/Itay-Amosi/index.ts @@ -0,0 +1,41 @@ +// var shouldIContinue = true; + +// while (shouldIContinue) { +// shouldIContinue = confirm (`should I Continue?`); +// console.log(`shouldIContinue`) ; +// } + + +// task 1 + +// for (var i = 99; i > 0 ; i--) { +// console.log(` ${i} Bottles of Beer. take one down pass it around, and ${i - 1} on the wall`); + +// } + + + + +// // // task 2 +// var n = 19; +// var sum = 0; +// while (n > 0) { +// sum += n; + +// console.log(sum); +// n--; + +// } + +// console.log(sum); + + + + + +// task 3 + + +// var n = 10; +// var sum = 0; +// for (var i = 0; i < 5; i++) { \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/amit/dist/index.js b/02-TypeScript/05-loops/followup/amit/dist/index.js new file mode 100644 index 000000000..b4d9ca7c5 --- /dev/null +++ b/02-TypeScript/05-loops/followup/amit/dist/index.js @@ -0,0 +1,8 @@ +for (var i = 0; i < 10; ++i) { + console.log(i); +} +var password = true; +var p2 = 1984; +while (password === true) { + password = confirm("welcome"); +} diff --git a/02-TypeScript/05-loops/followup/amit/index.html b/02-TypeScript/05-loops/followup/amit/index.html new file mode 100644 index 000000000..2f90e4c47 --- /dev/null +++ b/02-TypeScript/05-loops/followup/amit/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/amit/index.ts b/02-TypeScript/05-loops/followup/amit/index.ts new file mode 100644 index 000000000..c2854f8e7 --- /dev/null +++ b/02-TypeScript/05-loops/followup/amit/index.ts @@ -0,0 +1,12 @@ +for(var i=0; i<10 ;++i){ + console.log(i); +} + +var password:boolean = true; + +var p2:number = 1984; + +while(password === true){ + password = confirm ("welcome"); +} + diff --git a/02-TypeScript/05-loops/followup/angela/dist/index.js b/02-TypeScript/05-loops/followup/angela/dist/index.js new file mode 100644 index 000000000..d866e8c60 --- /dev/null +++ b/02-TypeScript/05-loops/followup/angela/dist/index.js @@ -0,0 +1,11 @@ +// for loops +var x = 0; +for (x; x <= 10; x++) { + console.log(x); +} +// while loops +var cancel = false; +while (cancel === false) { + cancel = confirm("word"); + console.log(cancel); +} diff --git a/02-TypeScript/05-loops/followup/angela/index.html b/02-TypeScript/05-loops/followup/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/angela/index.ts b/02-TypeScript/05-loops/followup/angela/index.ts new file mode 100644 index 000000000..0eb60266a --- /dev/null +++ b/02-TypeScript/05-loops/followup/angela/index.ts @@ -0,0 +1,14 @@ +// for loops + +var x=0 +for(x;x<=10;x++){ + console.log(x) +} + +// while loops + +var cancel:boolean = false +while (cancel===false){ + cancel=confirm("word") + console.log(cancel) +} \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/aviva-elias/dist/index.js b/02-TypeScript/05-loops/followup/aviva-elias/dist/index.js new file mode 100644 index 000000000..052bf23f0 --- /dev/null +++ b/02-TypeScript/05-loops/followup/aviva-elias/dist/index.js @@ -0,0 +1,11 @@ +//while loop +var shouldIContinue = true; +while (shouldIContinue === true) { + shouldIContinue = confirm("Should I continue?"); + console.log(shouldIContinue); +} +for (var i = 0; i < 100; i++) { + if (i % 5 == 0) { + console.log(i); + } +} diff --git a/02-TypeScript/05-loops/followup/aviva-elias/index.html b/02-TypeScript/05-loops/followup/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/aviva-elias/index.ts b/02-TypeScript/05-loops/followup/aviva-elias/index.ts new file mode 100644 index 000000000..538a7e3e1 --- /dev/null +++ b/02-TypeScript/05-loops/followup/aviva-elias/index.ts @@ -0,0 +1,14 @@ +//while loop +var shouldIContinue: boolean = true; + +while (shouldIContinue === true) { + shouldIContinue = confirm("Should I continue?"); + console.log(shouldIContinue); +} +for (var i = 0; i < 100; i++) { + if (i % 5 == 0) { + console.log(i) + } +} + + diff --git a/02-TypeScript/05-loops/followup/ayala-perlovich/dist/index.js b/02-TypeScript/05-loops/followup/ayala-perlovich/dist/index.js new file mode 100644 index 000000000..61f16c485 --- /dev/null +++ b/02-TypeScript/05-loops/followup/ayala-perlovich/dist/index.js @@ -0,0 +1,7 @@ +var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; + console.log(x, n); +} diff --git a/02-TypeScript/05-loops/followup/ayala-perlovich/index.html b/02-TypeScript/05-loops/followup/ayala-perlovich/index.html new file mode 100644 index 000000000..a9a34fc80 --- /dev/null +++ b/02-TypeScript/05-loops/followup/ayala-perlovich/index.html @@ -0,0 +1,18 @@ + + + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/ayala-perlovich/index.ts b/02-TypeScript/05-loops/followup/ayala-perlovich/index.ts new file mode 100644 index 000000000..db93db566 --- /dev/null +++ b/02-TypeScript/05-loops/followup/ayala-perlovich/index.ts @@ -0,0 +1,10 @@ + + var n = 0; + var x = 0; + while (n < 3) { + n++; + x += n; +console.log(x,n); +} + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/karin-levi/dist/index.js b/02-TypeScript/05-loops/followup/karin-levi/dist/index.js new file mode 100644 index 000000000..65006af77 --- /dev/null +++ b/02-TypeScript/05-loops/followup/karin-levi/dist/index.js @@ -0,0 +1,8 @@ +// for (var i =15; i >=0; i--){ +// console.log(i); +// } +var shouldIContinue = true; +while (shouldIContinue) { + shouldIContinue = confirm("Should I Continue?"); + console.log(shouldIContinue); +} diff --git a/02-TypeScript/05-loops/followup/karin-levi/index.html b/02-TypeScript/05-loops/followup/karin-levi/index.html new file mode 100644 index 000000000..3b35f9d81 --- /dev/null +++ b/02-TypeScript/05-loops/followup/karin-levi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/karin-levi/index.ts b/02-TypeScript/05-loops/followup/karin-levi/index.ts new file mode 100644 index 000000000..84c770c75 --- /dev/null +++ b/02-TypeScript/05-loops/followup/karin-levi/index.ts @@ -0,0 +1,13 @@ +// for (var i =15; i >=0; i--){ +// console.log(i); +// } + + + +var shouldIContinue: boolean = true; + +while (shouldIContinue) { + shouldIContinue = confirm("Should I Continue?"); + console.log(shouldIContinue); + +} \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/noa-meillet/dist/index.js b/02-TypeScript/05-loops/followup/noa-meillet/dist/index.js new file mode 100644 index 000000000..edf1063bd --- /dev/null +++ b/02-TypeScript/05-loops/followup/noa-meillet/dist/index.js @@ -0,0 +1,19 @@ +for (var i = 0; i < 100; i++) { + if (i % 10 == 7 || i / 10 == 7) { + console.log(i); + } +} +var isANum = false; +var ageStr; +var age; +while (isANum == false) { + ageStr = prompt("Enter your Age:"); + age = parseInt(ageStr); + if (isNaN(age)) { + alert("You didnt put a number"); + } + else { + alert("Your age is " + age); + isANum = true; + } +} diff --git a/02-TypeScript/05-loops/followup/noa-meillet/index.html b/02-TypeScript/05-loops/followup/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/noa-meillet/index.ts b/02-TypeScript/05-loops/followup/noa-meillet/index.ts new file mode 100644 index 000000000..5fe443adb --- /dev/null +++ b/02-TypeScript/05-loops/followup/noa-meillet/index.ts @@ -0,0 +1,19 @@ +for (var i=0;i<100;i++){ + if (i%10==7 || i/10==7){ + console.log(i); + } +} + +var isANum=false; +var ageStr; +var age; +while (isANum==false){ + ageStr= prompt("Enter your Age:"); + age = parseInt(ageStr); + if(isNaN(age)){ + alert("You didnt put a number"); + } else { + alert(`Your age is ${age}`); + isANum=true; + } +} diff --git a/02-TypeScript/05-loops/followup/shalomcop/dist/index.js b/02-TypeScript/05-loops/followup/shalomcop/dist/index.js new file mode 100644 index 000000000..54ae55373 --- /dev/null +++ b/02-TypeScript/05-loops/followup/shalomcop/dist/index.js @@ -0,0 +1,8 @@ +var x = 0; +while (x < 20) { + x = x + 1; + console.log(x); +} +x = 0; +for (var x = 0; ; ) + ; diff --git a/02-TypeScript/05-loops/followup/shalomcop/index.html b/02-TypeScript/05-loops/followup/shalomcop/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/shalomcop/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/shalomcop/index.ts b/02-TypeScript/05-loops/followup/shalomcop/index.ts new file mode 100644 index 000000000..764265d63 --- /dev/null +++ b/02-TypeScript/05-loops/followup/shalomcop/index.ts @@ -0,0 +1,9 @@ +var x:number = 0 +while(x<20) { + x = x + 1 + console.log(x); + +} + +x = 0 +for (var x:number=0, ) \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/shlomi.samai/dist/followUp.js b/02-TypeScript/05-loops/followup/shlomi.samai/dist/followUp.js new file mode 100644 index 000000000..8c1fb3e45 --- /dev/null +++ b/02-TypeScript/05-loops/followup/shlomi.samai/dist/followUp.js @@ -0,0 +1,8 @@ +//for (var i=0;i<=15;i++) { +//console.log(i); +//} +var k = true; +while (k) { + k = confirm("continue?"); + console.log(k); +} diff --git a/02-TypeScript/05-loops/followup/shlomi.samai/followUp.ts b/02-TypeScript/05-loops/followup/shlomi.samai/followUp.ts new file mode 100644 index 000000000..3d1207167 --- /dev/null +++ b/02-TypeScript/05-loops/followup/shlomi.samai/followUp.ts @@ -0,0 +1,10 @@ +//for (var i=0;i<=15;i++) { +//console.log(i); +//} + +var k:boolean=true; + +while (k){ + k=confirm("continue?") + console.log(k) +} diff --git a/02-TypeScript/05-loops/followup/shlomi.samai/index.html b/02-TypeScript/05-loops/followup/shlomi.samai/index.html new file mode 100644 index 000000000..26ecb1008 --- /dev/null +++ b/02-TypeScript/05-loops/followup/shlomi.samai/index.html @@ -0,0 +1,13 @@ + + + + + + + followUp + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/start.md b/02-TypeScript/05-loops/followup/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/05-loops/followup/tomer-cohen/dist/index.js b/02-TypeScript/05-loops/followup/tomer-cohen/dist/index.js new file mode 100644 index 000000000..f86536960 --- /dev/null +++ b/02-TypeScript/05-loops/followup/tomer-cohen/dist/index.js @@ -0,0 +1,8 @@ +for (var i = 15; i >= 0; i--) { + console.log(i); +} +var shouldIContinue = true; +while (shouldIContinue) { + shouldIContinue = confirm("should I Continue"); + console.log(shouldIContinue); +} diff --git a/02-TypeScript/05-loops/followup/tomer-cohen/index.html b/02-TypeScript/05-loops/followup/tomer-cohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/followup/tomer-cohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/tomer-cohen/index.ts b/02-TypeScript/05-loops/followup/tomer-cohen/index.ts new file mode 100644 index 000000000..775ad3ae3 --- /dev/null +++ b/02-TypeScript/05-loops/followup/tomer-cohen/index.ts @@ -0,0 +1,14 @@ + +for(var i=15; i>=0; i--){ + console.log(i) +} + + + + +var shouldIContinue: boolean= true; + +while(shouldIContinue){ + shouldIContinue= confirm( `should I Continue`); + console.log(shouldIContinue); +} diff --git a/02-TypeScript/05-loops/followup/uriel bargil/dist/index.js b/02-TypeScript/05-loops/followup/uriel bargil/dist/index.js new file mode 100644 index 000000000..f49bcedef --- /dev/null +++ b/02-TypeScript/05-loops/followup/uriel bargil/dist/index.js @@ -0,0 +1,3 @@ +for (var i = 20; i >= 10; i++) { + console.log(i); +} diff --git a/02-TypeScript/05-loops/followup/uriel bargil/index.html b/02-TypeScript/05-loops/followup/uriel bargil/index.html new file mode 100644 index 000000000..bd4943904 --- /dev/null +++ b/02-TypeScript/05-loops/followup/uriel bargil/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/uriel bargil/index.ts b/02-TypeScript/05-loops/followup/uriel bargil/index.ts new file mode 100644 index 000000000..6801922a4 --- /dev/null +++ b/02-TypeScript/05-loops/followup/uriel bargil/index.ts @@ -0,0 +1,7 @@ + + +for (var i = 20; i >= 10; i++ ) { + console.log (i) +} + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/followup/vladiFollowUp/app.ts b/02-TypeScript/05-loops/followup/vladiFollowUp/app.ts new file mode 100644 index 000000000..bb43d271e --- /dev/null +++ b/02-TypeScript/05-loops/followup/vladiFollowUp/app.ts @@ -0,0 +1,6 @@ +for (var i = 1; i < 7; i++) { + for (var j = 1; j < 2; j++) { + let dash ='#' + console.log(dash.repeat(i)); + } +} diff --git a/02-TypeScript/05-loops/followup/vladiFollowUp/dist/app.js b/02-TypeScript/05-loops/followup/vladiFollowUp/dist/app.js new file mode 100644 index 000000000..591912172 --- /dev/null +++ b/02-TypeScript/05-loops/followup/vladiFollowUp/dist/app.js @@ -0,0 +1,6 @@ +for (var i = 1; i < 7; i++) { + for (var j = 1; j < 2; j++) { + var dash = '#'; + console.log(dash.repeat(i)); + } +} diff --git a/02-TypeScript/05-loops/followup/vladiFollowUp/dist/dist/app.dev.js b/02-TypeScript/05-loops/followup/vladiFollowUp/dist/dist/app.dev.js new file mode 100644 index 000000000..74fe6b55a --- /dev/null +++ b/02-TypeScript/05-loops/followup/vladiFollowUp/dist/dist/app.dev.js @@ -0,0 +1,8 @@ +"use strict"; + +for (var i = 1; i < 7; i++) { + for (var j = 1; j < 2; j++) { + var dash = '#'; + console.log(dash.repeat(i)); + } +} \ No newline at end of file diff --git a/02-TypeScript/05-loops/info/example/dist/index.js b/02-TypeScript/05-loops/info/example/dist/index.js new file mode 100644 index 000000000..1c8e32a43 --- /dev/null +++ b/02-TypeScript/05-loops/info/example/dist/index.js @@ -0,0 +1,14 @@ +//loops +//for loop +//for (init index value; run as long as the condition is true; change the value of the index) +for (var i = 15; i >= 0; i--) { + //code block + console.log(i); +} +// var shalomKoopermanIsAStudent => camleCase +//while loop +var shouldIContinue = true; +while (shouldIContinue) { + shouldIContinue = confirm("Should I continue?"); + console.log(shouldIContinue); +} diff --git a/02-TypeScript/05-loops/info/example/index.html b/02-TypeScript/05-loops/info/example/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/05-loops/info/example/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/05-loops/info/example/index.ts b/02-TypeScript/05-loops/info/example/index.ts new file mode 100644 index 000000000..24fc34d67 --- /dev/null +++ b/02-TypeScript/05-loops/info/example/index.ts @@ -0,0 +1,19 @@ +//loops + +//for loop + +//for (init index value; run as long as the condition is true; change the value of the index) +for (var i = 15; i >= 0; i--) { + //code block + console.log(i); +} + +// var shalomKoopermanIsAStudent => camleCase + +//while loop +var shouldIContinue: boolean = true; + +while (shouldIContinue) { + shouldIContinue = confirm("Should I continue?"); + console.log(shouldIContinue); +} diff --git a/02-TypeScript/05-loops/info/info.md b/02-TypeScript/05-loops/info/info.md new file mode 100644 index 000000000..93190273b --- /dev/null +++ b/02-TypeScript/05-loops/info/info.md @@ -0,0 +1,6 @@ +# Documentation # +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration + + +# Video # +https://www.youtube.com/watch?v=s9wW2PpJsmQ diff --git a/02-TypeScript/06-scope/example/dist/index.js b/02-TypeScript/06-scope/example/dist/index.js new file mode 100644 index 000000000..0d14af2c7 --- /dev/null +++ b/02-TypeScript/06-scope/example/dist/index.js @@ -0,0 +1,16 @@ +//global scope +var shouldIGo = true; +if (shouldIGo) { + //local scope + var x = 20; + console.log(x); + x = 50; + console.log(x); +} +for (var i = 0; i < 4; i++) { + var x = 12; + console.log(i + ": x is " + x); +} +var order = prompt("what will yo order"); +// order = "please order fast"; +document.write("I am preparing a " + order); diff --git a/02-TypeScript/06-scope/example/index.html b/02-TypeScript/06-scope/example/index.html new file mode 100644 index 000000000..ea519e328 --- /dev/null +++ b/02-TypeScript/06-scope/example/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/06-scope/example/index.ts b/02-TypeScript/06-scope/example/index.ts new file mode 100644 index 000000000..48a243e19 --- /dev/null +++ b/02-TypeScript/06-scope/example/index.ts @@ -0,0 +1,19 @@ +//global scope +const shouldIGo: boolean = true; + +if (shouldIGo) { + //local scope + let x: number = 20; + console.log(x); + x = 50; + console.log(x); +} + +for (let i = 0; i < 4; i++) { + let x = 12; + console.log(`${i}: x is ${x}`); +} + +const order = prompt("what will yo order"); +// order = "please order fast"; +document.write(`I am preparing a ${order}`); diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/dist/index.js b/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/dist/index.js new file mode 100644 index 000000000..074af6059 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/dist/index.js @@ -0,0 +1,14 @@ +function multiplication(a, b) { + return a * b; +} +var a = 5; +var b = 4; +console.log(multiplication(a, b)); +function addUp(n) { + var x = 0; + for (var i = 1; i <= n; i++) { + x += i; + } + return x; +} +console.log(addUp(10)); diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/index.html new file mode 100644 index 000000000..59e874bee --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/index.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/index.ts new file mode 100644 index 000000000..633b26443 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/aviva-elias/index.ts @@ -0,0 +1,19 @@ +function multiplication(a:number,b:number):number{ +return a*b +} +const a:number=5 +const b:number=4 + +console.log(multiplication(a,b)) + +function addUp(n: number): number{ + let x: number = 0; + for(let i = 1; i <= n; i++){ + x += i; + } + return x; +} + + + +console.log(addUp(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/dist/index.js b/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/dist/index.js new file mode 100644 index 000000000..ba0155d65 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/dist/index.js @@ -0,0 +1,14 @@ +var nStr = prompt("Enter a number:"); +var n; +if (nStr) { + n = parseInt(nStr); +} +console.log("your number is " + n); +console.log("the result is " + zeroToN(n)); +function zeroToN(n) { + var sum = 0; + for (var i = 0; i <= n; i++) { + sum += i; + } + return sum; +} diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/index.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/index.ts new file mode 100644 index 000000000..803d9bf1e --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/group-6/index.ts @@ -0,0 +1,15 @@ +const nStr = prompt ("Enter a number:"); +let n; +if (nStr) { + n = parseInt(nStr); +} +console.log(`your number is ${n}`); +console.log(`the result is ${zeroToN(n)}`); + +function zeroToN (n:number):number{ + let sum=0; + for(let i=0;i<=n;i++){ + sum+=i; + } + return sum; +} diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/idan/dist/index.js b/02-TypeScript/07-functions/01-basic/class-puzzle/idan/dist/index.js new file mode 100644 index 000000000..ea059a5ce --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/idan/dist/index.js @@ -0,0 +1,9 @@ +var userInput; +userInput = prompt("joe biden age?"); +console.log(oneToNum(parseInt(userInput))); +alert(oneToNum(parseInt(userInput))); +function oneToNum(n) { + n = n / 2 * (1 + n); + //let total; for(let i = 0; i <= n; i++){ total += i; } return total + return n; +} diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/idan/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/idan/index.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/idan/index.ts new file mode 100644 index 000000000..826e5aedf --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/idan/index.ts @@ -0,0 +1,13 @@ +let userInput; + +userInput = prompt(`joe biden age?`) + +console.log(oneToNum(parseInt(userInput))) +alert(oneToNum(parseInt(userInput))) + + +function oneToNum(n:number){ + n= n/2*(1+n); + //let total; for(let i = 0; i <= n; i++){ total += i; } return total + return n +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/instructions.md b/02-TypeScript/07-functions/01-basic/class-puzzle/instructions.md new file mode 100644 index 000000000..dbbdabeba --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/instructions.md @@ -0,0 +1,7 @@ +1. create a function which get to argument (numbers) and return their multiplication + +//function multy(a:number,b:number){ + +} + +2. create a function which return: calculate with a varibal and a loop how much is 1+2+3+...+n diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/dist/index.js b/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/dist/index.js new file mode 100644 index 000000000..f33b44c97 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/dist/index.js @@ -0,0 +1,17 @@ +//test1// +var a = 2; +var b = 6; +function x2(a, b) { + return a * b; +} +console.log(x2(a, b)); +//test 2// +var n = 10; +function sum(n) { + var result = 0; + for (var i = 1; i <= n; i++) { + result += i; + } + return result; +} +console.log(sum(n)); diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/index.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/index.ts new file mode 100644 index 000000000..11f4faf49 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room 4/index.ts @@ -0,0 +1,23 @@ +//test1// + +let a:number= 2; +let b:number= 6; + +function x2(a:number,b:number):number{ + return a*b +} +console.log(x2(a,b)) + + +//test 2// + + +const n:number=10; +function sum(n:number){ + let result:number = 0 + for(let i=1; i<=n; i++){ + result+=i + } + return result +} +console.log(sum(n)) diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/dist/index.js b/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/dist/index.js new file mode 100644 index 000000000..e9a5a33d3 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/dist/index.js @@ -0,0 +1,14 @@ +var num1 = 10; +var num2 = 4; +function multiply(number1, number2) { + return number1 * number2; +} +console.log(multiply(num1, num2)); +function multiplay2(numOne) { + var sum = 0; + for (var i = 1; i <= numOne; i++) { + sum = sum + i; + } + return sum; +} +console.log(multiplay2(10)); diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/index.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/index.ts new file mode 100644 index 000000000..e419f7c0a --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room 5/index.ts @@ -0,0 +1,21 @@ +const num1 = 10; +const num2 = 4; +function multiply(number1:number,number2:number){ + return number1*number2; +} +console.log(multiply(num1,num2)); + + + + + + + +function multiplay2(numOne:number):number{ + let sum:number = 0; + for (let i = 1 ; i <= numOne ; i++){ + sum = sum + i; + } + return sum; +} +console.log(multiplay2(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room3/dist/index.js b/02-TypeScript/07-functions/01-basic/class-puzzle/room3/dist/index.js new file mode 100644 index 000000000..db0f38db2 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room3/dist/index.js @@ -0,0 +1,5 @@ +function multy(a, b) { + var n = a * b; + return n; +} +console.log(multy(5, 10)); diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room3/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/room3/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/room3/index.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/room3/index.ts new file mode 100644 index 000000000..8ac73ea98 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/room3/index.ts @@ -0,0 +1,6 @@ +function multy(a:number,b:number): number { + const n:number = a*b + return n; +} + +console.log(multy(5,10)) \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/app.ts b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/app.ts new file mode 100644 index 000000000..f9cd18191 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/app.ts @@ -0,0 +1,15 @@ +function multi(a:number, b:number): number{ + return a * b; +} + +function addUp(n: number): number{ + let x: number = 0; + for(let i = 1; i <= n; i++){ + x += i; + } + return x; +} + +console.log(multi(3, 4)); + +console.log(addUp(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/dist/app.js b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/dist/app.js new file mode 100644 index 000000000..34cb5dce1 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/dist/app.js @@ -0,0 +1,12 @@ +function multi(a, b) { + return a * b; +} +function addUp(n) { + var x = 0; + for (var i = 1; i <= n; i++) { + x += i; + } + return x; +} +console.log(multi(3, 4)); +console.log(addUp(10)); diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/dist/dist/app.dev.js b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/dist/dist/app.dev.js new file mode 100644 index 000000000..807bc686e --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/dist/dist/app.dev.js @@ -0,0 +1,18 @@ +"use strict"; + +function multi(a, b) { + return a * b; +} + +function addUp(n) { + var x = 0; + + for (var i = 1; i <= n; i++) { + x += i; + } + + return x; +} + +console.log(multi(3, 4)); +console.log(addUp(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/index.html b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/index.html new file mode 100644 index 000000000..7d3f151f1 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/class-puzzle/vladiPuzzel/index.html @@ -0,0 +1,12 @@ + + + + + + + Function Puzzel + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/example/dist/index.js b/02-TypeScript/07-functions/01-basic/example/dist/index.js new file mode 100644 index 000000000..ff79bb903 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/example/dist/index.js @@ -0,0 +1,17 @@ +// before functions +var userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); diff --git a/02-TypeScript/07-functions/01-basic/example/dist/indexWithFunctions.js b/02-TypeScript/07-functions/01-basic/example/dist/indexWithFunctions.js new file mode 100644 index 000000000..77a15cf30 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/example/dist/indexWithFunctions.js @@ -0,0 +1,32 @@ +//function sayThankYou(argument){ +function priceWithVat(price) { + return price * 1.17; +} +for (var i = 0; i < 7; i++) { + var userName = prompt("What is your name?"); + function sayThankYou(name) { + if (name) { + name = name.toUpperCase(); + return "Thank you " + name + " for registering"; + } + else { + return ""; + } + } + // userName = prompt("What is your name?"); + // console.log(sayThankYou(userName)); + // const userPrice = prompt("what is the price?"); + // if (userPrice) { + // const _userPrice = parseInt(userPrice); + // const withVat = priceWithVat(_userPrice); + // console.log(`Your price with vat is ${withVat}`); + // } +} +// userName = prompt("What is your name?"); +// console.log(sayThankYou(userName)); +// const userPrice = prompt("what is the price?"); +// if (userPrice) { +// const _userPrice = parseInt(userPrice); +// const withVat = priceWithVat(_userPrice); +// console.log(`Your price with vat is ${withVat}`); +// } diff --git a/02-TypeScript/07-functions/01-basic/example/index.html b/02-TypeScript/07-functions/01-basic/example/index.html new file mode 100644 index 000000000..6c5eaf92b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/example/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/example/index.ts b/02-TypeScript/07-functions/01-basic/example/index.ts new file mode 100644 index 000000000..64205b46f --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/example/index.ts @@ -0,0 +1,29 @@ +// before functions + +let userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); + +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); + +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); + +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); diff --git a/02-TypeScript/07-functions/01-basic/example/indexWithFunctions.ts b/02-TypeScript/07-functions/01-basic/example/indexWithFunctions.ts new file mode 100644 index 000000000..ed41783da --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/example/indexWithFunctions.ts @@ -0,0 +1,28 @@ +//function sayThankYou(argument){ + +function priceWithVat(price: number): number { + return price * 1.17; +} + +for (let i = 0; i < 7; i++) { + let userName = prompt("What is your name?"); + +function sayThankYou(name: string | null): string { + if (name) { + name = name.toUpperCase(); + return `Thank you ${name} for registering`; + } else { + return ""; + } +} + +// userName = prompt("What is your name?"); +// console.log(sayThankYou(userName)); + +// const userPrice = prompt("what is the price?"); + +// if (userPrice) { +// const _userPrice = parseInt(userPrice); +// const withVat = priceWithVat(_userPrice); +// console.log(`Your price with vat is ${withVat}`); +// } diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/dist/reverse.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/dist/reverse.js new file mode 100644 index 000000000..d8fee4e2b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/dist/reverse.js @@ -0,0 +1,27 @@ +function reverse(userNumber) { + var straightNumber = userNumber; + var reverseNumber = 0; + while (straightNumber > 0) { + reverseNumber = reverseNumber * 10 + straightNumber % 10; + straightNumber = Math.floor(straightNumber / 10); + } + return reverseNumber; +} +var again = true; +while (again === true) { + var nStr = prompt("Enter a number you would like to reverse:\n (to stop press cancel)"); + if (nStr !== null) { + var userNumber = parseInt(nStr); + if (!isNaN(userNumber) && (nStr !== "")) { + console.log(userNumber + " in reverse is " + reverse(userNumber)); + alert("The reversed number of " + userNumber + " is " + reverse(userNumber)); + } + else { + alert("You didn't enter a number"); + } + } + else { + alert("Thank you, come again!"); + again = false; + } +} diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/reverse.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/reverse.html new file mode 100644 index 000000000..250a761ca --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/reverse.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/reverse.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/reverse.ts new file mode 100644 index 000000000..4b5dc6551 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Amit/reverse.ts @@ -0,0 +1,32 @@ +function reverse(userNumber: number): number { + let straightNumber = userNumber; + let reverseNumber: number = 0; + + while (straightNumber > 0) { + reverseNumber = reverseNumber * 10 + straightNumber % 10; + straightNumber = Math.floor(straightNumber / 10); + } + + return reverseNumber; +} + +let again: boolean = true; + +while (again === true) { + const nStr = prompt("Enter a number you would like to reverse:\n (to stop press cancel)"); + + if (nStr !== null) { + const userNumber = parseInt(nStr); + + if (!isNaN(userNumber) && (nStr !== "")) { + console.log(`${userNumber} in reverse is ${reverse(userNumber)}`); + alert(`The reversed number of ${userNumber} is ${reverse(userNumber)}`); + } else { + alert("You didn't enter a number"); + } + + } else { + alert("Thank you, come again!"); + again = false; + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/dist/indexWithFunctions.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/dist/indexWithFunctions.js new file mode 100644 index 000000000..7c648bc62 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/dist/indexWithFunctions.js @@ -0,0 +1,29 @@ +/* //function pos_to_neg(num) +{ + return -Math.abs(num); + } + + console.log(pos_to_neg(15)); */ +//מחזירה את המספר השלילי +1.; +function number(number) { + var x = 32243; + return (number); +} +var negativeNumber = number(-32243); +console.log(negativeNumber); +//מחזיר את הריבוע +// +2.; +function square(num) { + return num * num; +} +console.log(square(4)); +// נכפיל מעלות צלזיוס ב1.8 +32 Fahrenheitהמרת צלזיוס ל +//12*1.8+32=53.6// +function fahrenheitConvert(celsius) { + var fahrenheit; + fahrenheit = (celsius * 1.8) + 32; + console.log(fahrenheit); +} +fahrenheitConvert(12); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/index.html new file mode 100644 index 000000000..d5fe743eb --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/index.html @@ -0,0 +1,12 @@ + + + + + + + ayala + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/indexWithFunctions.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/indexWithFunctions.ts new file mode 100644 index 000000000..bd1af5c9e --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Ayala Perlovich/indexWithFunctions.ts @@ -0,0 +1,38 @@ + +/* //function pos_to_neg(num) +{ + return -Math.abs(num); + } + + console.log(pos_to_neg(15)); */ + +//מחזירה את המספר השלילי +1. +function number(number) { + let x: number = 32243; + return (number); +} +let negativeNumber = number(-32243); +console.log(negativeNumber); + +//מחזיר את הריבוע +// +2. +function square(num) { + return num * num; +} +console.log(square(4)); + +// נכפיל מעלות צלזיוס ב1.8 +32 Fahrenheitהמרת צלזיוס ל +//12*1.8+32=53.6// + +function fahrenheitConvert(celsius) { + + let fahrenheit + fahrenheit = (celsius * 1.8) + 32 + console.log(fahrenheit) +} +fahrenheitConvert(12) + + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/dist/index.js new file mode 100644 index 000000000..bf2b8b7df --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/dist/index.js @@ -0,0 +1,52 @@ +//exerise level 1; +var num1 = 32243; +function negetiveNum(num1) { + return num1 * -1; +} +console.log("the negetive value of this " + num1 + " is " + negetiveNum(num1)); +//2. +var num2 = 4; +function square(num2) { + return num2 * num2; +} +console.log("the square number of " + num2 + " is " + square(num2)); +//3. +var clToFr = 23; +function clToFrConvert(clToFr) { + return (clToFr * 1.8) + 32; +} +console.log("Now outside is " + clToFr + " c and " + clToFrConvert(clToFr) + " Fr"); +//ex level 1. +var numBig = 20; +var numSmall = 12; +function max(numBig, numSmall) { + if ((numBig) > (numSmall)) { + return numBig; + } + else + return numSmall; +} +console.log("this number " + max(numBig, numSmall) + " is biger then " + numSmall); +//ex level 2 2. +function genderToHghit(gender, height) { + if (gender === 'male') { + return height - 175; + } + else { + return height - 160; + } +} +console.log("your height is " + genderToHghit('male', 185) + " below / above avrege height"); +//ex level 3. +var num3 = 425; +var value = 0; +function revers(num3) { + var reversNumer = 0; + while (num3) { + value = num3 % 10; + reversNumer = (reversNumer * 10) + value; + num3 = num3 / 10 | 0; + } + return reversNumer; +} +console.log("this number " + num3 + " and the revers is " + revers(num3)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/index.ts new file mode 100644 index 000000000..29a561f37 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itai-G/index.ts @@ -0,0 +1,73 @@ + +//exerise level 1; + +let num1 = 32243; +function negetiveNum (num1:number):number{ + return num1 * -1; +} + +console.log(`the negetive value of this ${num1} is ${negetiveNum(num1)}`); + + + +//2. + +let num2 = 4; +function square (num2:number):number{ + return num2 * num2; +} + +console.log(`the square number of ${num2} is ${square(num2)}`); + + +//3. + + +let clToFr = 23; +function clToFrConvert (clToFr):number{ + return (clToFr*1.8)+32; +} +console.log(`Now outside is ${clToFr} c and ${clToFrConvert(clToFr)} Fr`); + + + + +//ex level 1. +let numBig = 20; +let numSmall = 12; +function max (numBig:number, numSmall:number):number{ + if((numBig) > (numSmall)){ + return numBig; + }else + return numSmall; +} +console.log(`this number ${max(numBig,numSmall)} is biger then ${numSmall}`); + +//ex level 2 2. +function genderToHghit(gender:string,height:number):number { + if (gender === 'male'){ + return height - 175; + }else { + return height - 160; + } +} +console.log(`your height is ${genderToHghit('male',185)} below / above avrege height`); + + + + +//ex level 3. + + +let num3 = 425; +let value = 0; +function revers (num3:number):number{ + let reversNumer = 0; + while (num3){ + value = num3 % 10; + reversNumer = (reversNumer*10) +value; + num3 = num3/10 |0; + } + return reversNumer; +} +console.log(`this number ${num3} and the revers is ${revers(num3)}`); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/dist/index.js new file mode 100644 index 000000000..4697e9880 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/dist/index.js @@ -0,0 +1,61 @@ +// HW +// level 1 +console.log("level 1.1"); +function negativeNumber(a) { + return a * -1; +} +console.log(negativeNumber(50)); +console.log("level 1.2"); +function sqrtNumber(b) { + return (b = Math.sqrt(b)); +} +console.log(sqrtNumber(9)); +console.log("level 1.3"); +function celsiusToFahrnhit(celsius) { + var cTemp = celsius; + var fahr = (cTemp * 9) / 5 + 32; + // const message = `${cTemp}\xB0C is ${cToFahr}\xB0F` + // return message; + return fahr; +} +console.log(celsiusToFahrnhit(0)); +function fahrenheitTemp(fahrenheit) { + var fTemp = fahrenheit; + var fToCel = ((fTemp - 32) * 5) / 9; + var message = fTemp + '\xB0F is ' + fToCel + '\xB0C.'; + console.log(message); +} +celsiusToFahrnhit(40); +fahrenheitTemp(30); +// level 2 +console.log("level 2.1"); +function maxOfTwo(number1, number2) { + if (parseFloat(number1) < parseFloat(number2)) { + return number2; + } + else if (parseFloat(number1) > parseFloat(number2)) { + return number1; + } + else { + console.log(number1 + ' and ' + number2 + ' are equal!'); + } +} +console.log(maxOfTwo(1, 5)); +console.log(maxOfTwo(9, 12)); +console.log("level 2.2"); +function genderHeightAvrge(avr, male) { + if (male === "male") { + return avr - 174; + } +} +console.log(genderHeightAvrge(168, "male")); +// level 3 +console.log("level 3"); +function reverseNum(x) { + return (x + .toString() + .split('') + .reverse() + .join('')); +} +console.log("" + reverseNum(987654321)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/index.ts new file mode 100644 index 000000000..73cfe40a1 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Itay-Amosi-HW/index.ts @@ -0,0 +1,72 @@ +// HW +// level 1 +console.log (`level 1.1`) +function negativeNumber(a: number): number { + return a * -1 +} + +console.log(negativeNumber(50)) + +console.log (`level 1.2`) +function sqrtNumber(b: number): number { + return (b = Math.sqrt(b)) +} +console.log(sqrtNumber(9)) + +console.log (`level 1.3`) +function celsiusToFahrnhit(celsius:number): number { + const cTemp = celsius + const fahr = (cTemp * 9) / 5 + 32 + // const message = `${cTemp}\xB0C is ${cToFahr}\xB0F` + // return message; + return fahr +} +console.log(celsiusToFahrnhit(0)); + +function fahrenheitTemp(fahrenheit:number): value { + var fTemp = fahrenheit + var fToCel = ((fTemp - 32) * 5) / 9 + var message = fTemp + '\xB0F is ' + fToCel + '\xB0C.' + console.log(message) +} +celsiusToFahrnhit(40) +fahrenheitTemp(30) + +// level 2 +console.log (`level 2.1`) +function maxOfTwo(number1, number2) { + if (parseFloat(number1) < parseFloat(number2)) { + return number2 + } else if (parseFloat(number1) > parseFloat(number2)) { + return number1 + } else { + console.log(number1 + ' and ' + number2 + ' are equal!') + } +} +console.log(maxOfTwo(1, 5)) +console.log(maxOfTwo(9, 12)) + + +console.log (`level 2.2`) +function genderHeightAvrge(avr:number,male:string){ + if (male === `male`) { + return avr - 174; + } +} +console.log(genderHeightAvrge(168,`male`)); + + +// level 3 +console.log (`level 3`) + +function reverseNum(x:number) { + return ( + x + .toString() + .split('') + .reverse() + .join('') + ) + + } +console.log(`${reverseNum(987654321)}`) diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/dist/index.js new file mode 100644 index 000000000..93e4c93e8 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/dist/index.js @@ -0,0 +1,61 @@ +// Level 1 +// A +function negativeNumber(number) { + if (number < 0) { + return number; + } + return -1 * number; +} +console.log("This is the negative number " + negativeNumber(323)); +// B +function square(number) { + return Math.pow(number, 2); +} +console.log("The squre of the number " + 4 + " is " + square(4)); +// C +function fahrenheit(number) { + return number * 1.8 + 32; +} +console.log(20 + " celciuse is " + fahrenheit(20) + " fahrenheit"); +// Level 2 +// A +function largerNumber(a, b) { + if (a > b) { + return a; + } + return b; +} +console.log("The larger number is " + largerNumber(20, 30)); +// B +function relativeHeight(height, gender) { + if (gender === "male") { + return height - 174; + } + else if (gender === "female") { + return height - 160; + } +} +// console.log(`Your relative height is ${relativeHeight(170,`male`)}`); +// Level 3 +// reverse function!!! +function reverseString(str) { + // Step 1. Use the split() method to return a new array + var splitString = str.split(""); // var splitString = "hello".split(""); + // ["h", "e", "l", "l", "o"] + // Step 2. Use the reverse() method to reverse the new created array + var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse(); + // ["o", "l", "l", "e", "h"] + // Step 3. Use the join() method to join all elements of the array into a string + var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join(""); + // "olleh" + //Step 4. Return the reversed string + return joinArray; // "olleh" +} +function reverseNumber(number) { + var numAsString = number.toString(); + numAsString = reverseString(numAsString); + return Number(numAsString); +} +console.log("The reverse number of " + 123456 + " is " + reverseNumber(123456)); +// let n = prompt("Please enter a number"); +// let y: number = parseInt(n); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/index.html new file mode 100644 index 000000000..0e547c5bf --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/index.ts new file mode 100644 index 000000000..49eae30dc --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Karin-levi/index.ts @@ -0,0 +1,82 @@ +// Level 1 +// A +function negativeNumber(number:number): number{ + if (number <0){ + return number; + } + return -1*number; +} +console.log(`This is the negative number ${negativeNumber(323)}`); + + +// B +function square(number:number): number{ + return number**2; +} +console.log(`The squre of the number ${4} is ${square(4)}`) + + +// C +function fahrenheit(number:number):number{ + return number*1.8+32; +} +console.log(`${20} celciuse is ${fahrenheit(20)} fahrenheit`) + + +// Level 2 +// A +function largerNumber(a,b:number): number{ + if(a>b){ + return a; + } + return b; +} +console.log(`The larger number is ${largerNumber(20,30)}`); + +// B +function relativeHeight(height:number,gender:string): number{ + if(gender === "male" ){ + return height-174; + } + else if (gender === "female"){ + return height-160 + } +} +// console.log(`Your relative height is ${relativeHeight(170,`male`)}`); + +// Level 3 +// reverse function!!! +function reverseString(str) { + // Step 1. Use the split() method to return a new array + var splitString = str.split(""); // var splitString = "hello".split(""); + // ["h", "e", "l", "l", "o"] + + // Step 2. Use the reverse() method to reverse the new created array + var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse(); + // ["o", "l", "l", "e", "h"] + + // Step 3. Use the join() method to join all elements of the array into a string + var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join(""); + // "olleh" + + //Step 4. Return the reversed string + return joinArray; // "olleh" +} + + +function reverseNumber(number:number): number{ + let numAsString = number.toString() + numAsString = reverseString(numAsString) + return Number(numAsString) +} + console.log(`The reverse number of ${123456} is ${reverseNumber(123456)}`) + + + + + +// let n = prompt("Please enter a number"); +// let y: number = parseInt(n); + + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Kseniya_T/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Kseniya_T/dist/index.js new file mode 100644 index 000000000..a417f6214 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Kseniya_T/dist/index.js @@ -0,0 +1,25 @@ +var negativeNum = function (num) { + return -Math.abs(num); +}; +var celToFer = function (celDegree) { + return celDegree * 1.8 + 32; +}; +var largerNum = function (firstNum, secondNum) { + if (firstNum === secondNum) { + return "they are the same"; + } + //return condition ?(if) true :(else) false + return firstNum > secondNum ? firstNum : secondNum; +}; +var heightRelativeToGender = function (height, gender) { + var avgMaleHeight = 174; + var avgFemaleHeight = 161; + return gender === "male" ? avgMaleHeight - height : avgFemaleHeight - height; +}; +var reverseNum = function (num) { + return parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num); +}; +negativeNum(23); +celToFer(30); +largerNum(40, 21); +largerNum(12, 12); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Kseniya_T/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Kseniya_T/index.ts new file mode 100644 index 000000000..8a907ea0a --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Kseniya_T/index.ts @@ -0,0 +1,31 @@ +const negativeNum = (num: number): number => { + return -Math.abs(num); +}; + +const celToFer = (celDegree: number): number => { + return celDegree * 1.8 + 32; +}; + +const largerNum = (firstNum: number, secondNum: number): number | string => { + if (firstNum === secondNum) { + return "they are the same"; + } + //return condition ?(if) true :(else) false + return firstNum > secondNum ? firstNum : secondNum; +}; + +const heightRelativeToGender = (height: number, gender: string): number => { + let avgMaleHeight: number = 174; + let avgFemaleHeight: number = 161; + + return gender === "male" ? avgMaleHeight - height : avgFemaleHeight - height; +}; + +const reverseNum = (num:number):number => { + return parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num); +} + +negativeNum(23); +celToFer(30); +largerNum(40, 21); +largerNum(12, 12); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/app.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/app.ts new file mode 100644 index 000000000..7b1ea9c55 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/app.ts @@ -0,0 +1,55 @@ +// Level 1____________________________________ +// 1) +function negativeNumber(num:number):number { + return num*(-1); +} +console.log(negativeNumber(20)); + +// 2) +function squareNumber(num:number):number{ + return Math.sqrt(num); +} +console.log(squareNumber(20)); + +// 3) +function celToFahr(num:number):number { + return (num*9/5)+32; +} +console.log(celToFahr(10)); + +// level 2____________________________________ +// 1) +function largerOfTwo(num1:number,num2:number):number { + if (num1 > num2) { + return num1; + } else { + return num2; + } +} +console.log(largerOfTwo(10,20)); + +// 2) +function heightToGender(height:number,gender:string):number { + if (gender === 'male') { + return height - 174; + } else { + return height - 163; + } +} +console.log(heightToGender(170,'male')); + +// Level 3____________________________________ +// 1) +function reverseNumber(num:number):number { + let digit, result = 0 + + while(num){ + digit = num % 10 + result = (result * 10) + digit + num = num/10|0 + } + return result +} +console.log(reverseNumber(1234)); + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/dist/app.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/dist/app.js new file mode 100644 index 000000000..4760207e4 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/dist/app.js @@ -0,0 +1,49 @@ +// Level 1____________________________________ +// 1) +function negativeNumber(num) { + return num * (-1); +} +console.log(negativeNumber(20)); +// 2) +function squareNumber(num) { + return Math.sqrt(num); +} +console.log(squareNumber(20)); +// 3) +function celToFahr(num) { + return (num * 9 / 5) + 32; +} +console.log(celToFahr(10)); +// level 2____________________________________ +// 1) +function largerOfTwo(num1, num2) { + if (num1 > num2) { + return num1; + } + else { + return num2; + } +} +console.log(largerOfTwo(10, 20)); +// 2) +function heightToGender(height, gender) { + if (gender === 'male') { + return height - 174; + } + else { + return height - 163; + } +} +console.log(heightToGender(170, 'male')); +// Level 3____________________________________ +// 1) +function reverseNumber(num) { + var digit, result = 0; + while (num) { + digit = num % 10; + result = (result * 10) + digit; + num = num / 10 | 0; + } + return result; +} +console.log(reverseNumber(1234)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Nikita Rossenko/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/dist/index.js new file mode 100644 index 000000000..348489547 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/dist/index.js @@ -0,0 +1,74 @@ +//Level 1 +console.log("Level 1"); +function negativeNum(num) { + return num * -1; +} +console.log("5 as a negative number is: " + negativeNum(5)); +function square(num) { + return num * num; +} +console.log("5 square is: " + square(5)); +function cTof(num) { + return num * 1.8 + 32; +} +console.log("24 deg in C is " + cTof(24) + "in F"); +//Level 2 +console.log("Level 2"); +function biggerNum(num1, num2) { + if (num1 > num2) { + return num1; + } + else { + return num2; + } +} +console.log("The bigger number between 3 and 7 is: " + biggerNum(7, 3)); +function avrHeight() { + var check1 = true; + var realHeight = 0; + while (check1) { + var heightSTR = prompt("Insert your height:"); + if (heightSTR != null && heightSTR != "") { + var height = parseInt(heightSTR); + realHeight = height; + check1 = false; + } + else { + alert("Try again"); + } + } + var avrHeight = 0; + var check = true; + while (check) { + var gender = prompt("Enter your gender(male/female):"); + switch (gender) { + case "male": + avrHeight = 177; + check = false; + break; + case "female": + avrHeight = 166; + check = false; + break; + default: alert("Invalid gender"); + } + } + return realHeight - avrHeight; +} +console.log("Average: " + avrHeight()); +//Level 3 +console.log("Level 3"); +function reverse(num) { + var str = num.toString(); + var count = 0; + while (num > 1) { + count++; + num /= 10; + } + var newStr = ""; + for (var i = count; i > 0; i--) { + newStr += str[i - 1]; + } + return parseInt(newStr); +} +console.log("123 reverse is: " + reverse(123)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/index.html new file mode 100644 index 000000000..4200eb46e --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/index.html @@ -0,0 +1,12 @@ + + + + + + + Lesson 7 + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/index.ts new file mode 100644 index 000000000..4b2850bac --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Omer.Virshuvski/index.ts @@ -0,0 +1,82 @@ +//Level 1 +console.log("Level 1"); +function negativeNum(num: number): number { + return num * -1; +} +console.log("5 as a negative number is: " + negativeNum(5)); + +function square(num: number): number { + return num * num; +} +console.log("5 square is: " + square(5)); + +function cTof(num: number): number { + return num * 1.8 + 32; +} +console.log("24 deg in C is " + cTof(24) + "in F"); + + +//Level 2 +console.log("Level 2"); +function biggerNum(num1: number, num2: number): number { + if (num1 > num2) { + return num1; + } else { + return num2; + } +} +console.log("The bigger number between 3 and 7 is: " + biggerNum(7, 3)); + +function avrHeight(): number { + var check1 = true; + var realHeight = 0; + while (check1) { + var heightSTR = prompt("Insert your height:") + if (heightSTR != null && heightSTR != "") { + var height = parseInt(heightSTR); + realHeight = height; + check1 = false; + } else { + alert("Try again"); + } + } + var avrHeight = 0; + var check = true; + while (check) { + var gender = prompt("Enter your gender(male/female):"); + switch (gender) { + case "male": + avrHeight = 177; + check = false; + break; + case "female": + avrHeight = 166; + check = false; + break; + default: alert("Invalid gender") + } + } + return realHeight - avrHeight; +} +console.log("Average: " + avrHeight()); + + +//Level 3 +console.log("Level 3"); +function reverse(num:number):number { + var str:string = num.toString(); + var count = 0; + while (num > 1) { + count++; + num /= 10; + } + var newStr = ""; + for (let i = count; i > 0; i--) { + newStr += str[i-1]; + } + return parseInt(newStr) +} +console.log("123 reverse is: " + reverse(123)); + + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/dist/index.js new file mode 100644 index 000000000..a2b905471 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/dist/index.js @@ -0,0 +1,11 @@ +var firstNumber = 30; +var secondNumber = 20; +function maxNumber(number1, number2) { + if (number1 > number2) { + return number1; + } + else { + return number2; + } +} +console.log(maxNumber(firstNumber, secondNumber)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/index.ts new file mode 100644 index 000000000..9b00357b8 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shalom Copperman/index.ts @@ -0,0 +1,11 @@ +let firstNumber:number = 30; +let secondNumber: number = 20; +function maxNumber (number1:number, number2:number):number { + if (number1>number2){ + return number1; + }else { + return number2; + } +} +console.log (maxNumber(firstNumber,secondNumber)); + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/.vscode/settings.json b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/app.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/app.ts new file mode 100644 index 000000000..bf1aa8e7d --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/app.ts @@ -0,0 +1,52 @@ +const btn = document.getElementById("btn"); + +btn?.addEventListener("click",(event)=>{ + + // 👇️ const input: HTMLInputElement | null +const input = document.getElementById('input') as HTMLInputElement; +const value :string | undefined = input?.value; + + +// const reversedNum = value => parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value); + + + + + +function reversedNum(value){ + return (parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value)).toString(); + } + const reverse = reversedNum(value); + +let result = document.getElementById("result")as HTMLHeadElement; +result.innerHTML=reverse; + + + + + + + + + + + + + +// input?.addEventListener('input', function (event) { +// const target = event.target as HTMLInputElement; +// console.log(target.value); +// }); + + + + + + +}); + + + +// function reverseNumber(reverse:number):number{ +// return reverse; +// }; \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/dist/app.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/dist/app.js new file mode 100644 index 000000000..d9794ace5 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/dist/app.js @@ -0,0 +1,20 @@ +var btn = document.getElementById("btn"); +btn === null || btn === void 0 ? void 0 : btn.addEventListener("click", function (event) { + // 👇️ const input: HTMLInputElement | null + var input = document.getElementById('input'); + var value = input === null || input === void 0 ? void 0 : input.value; + // const reversedNum = value => parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value); + function reversedNum(value) { + return (parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value)).toString(); + } + var reverse = reversedNum(value); + var result = document.getElementById("result"); + result.innerHTML = reverse; + // input?.addEventListener('input', function (event) { + // const target = event.target as HTMLInputElement; + // console.log(target.value); + // }); +}); +// function reverseNumber(reverse:number):number{ +// return reverse; +// }; diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/index.html new file mode 100644 index 000000000..f025dc271 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/Shlomo_Azenkot/index.html @@ -0,0 +1,83 @@ + + + + + + + Document + + + + + + + + +
    +

    Reverse the number try it

    +

    +
    +

    + + +
    + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/Images/image.jpg b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/Images/image.jpg new file mode 100644 index 000000000..574147ae7 Binary files /dev/null and b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/Images/image.jpg differ diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/dist/index.js new file mode 100644 index 000000000..5ac4535f2 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/dist/index.js @@ -0,0 +1,92 @@ +// console.log(-Math.abs(10)); +// function negate(num){ +// return -num; +// } +// let number = 25; +// let negativenumber = negate (number); +// console.log(negativenumber) +// TypeScript - HomeWork #1 +// exercise #1 +var num; +var negativenum; +document.getElementById("btn1").onclick = function () { + var _a; + num = document.getElementById("inp").value; + negativenum = -num; + (_a = document.getElementById("h4")) === null || _a === void 0 ? void 0 : _a.innerHTML = "The negative number is: " + negativenum; +}; +// exercise #2 +var num1; +var sqaure; +document.getElementById("btn2").onclick = function () { + var _a; + num1 = document.getElementById("inp1").value; + sqaure = Math.sqrt(num1); + (_a = document.getElementById("h41")) === null || _a === void 0 ? void 0 : _a.innerHTML = "The Sqaure number is : " + sqaure; +}; +// exercise #3 +var num2; +var Fah; +document.getElementById("btn3").onclick = function () { + var _a; + num2 = document.getElementById("inp2").value; + Fah = (num2 * 1.8) + 32; + (_a = document.getElementById("h42")) === null || _a === void 0 ? void 0 : _a.innerHTML = "The converted number is:" + Fah + "*F"; +}; +document.getElementById("HwBtn").onclick = function () { + document.querySelector(".exercise1").style.display = "flex"; +}; +document.querySelector(".fa-circle-xmark").onclick = function () { + document.querySelector(".exercise1").style.display = "none"; +}; +// TypeScript - End of HomeWork #1 +document.querySelector(".fa-right-from-bracket").onclick = function () { + document.querySelector(".exercise2").style.display = "none"; +}; +document.getElementById("Hw2Btn").onclick = function () { + document.querySelector(".exercise2").style.display = "flex"; +}; +// TypeScript - HomeWork #2 +// exercise #1 +var pnum1; +var pnum2; +document.getElementById("pbtn").onclick = function () { + var _a, _b, _c; + pnum1 = document.getElementById("num1").value; + pnum2 = document.getElementById("num2").value; + if ((pnum1) > (pnum2)) { + (_a = document.getElementById("pp")) === null || _a === void 0 ? void 0 : _a.innerHTML = "The Larger number is " + pnum1; + } + else { + (_b = document.getElementById("pp")) === null || _b === void 0 ? void 0 : _b.innerHTML = "The larger number is " + pnum2; + } + if ((pnum1) === (pnum2)) { + (_c = document.getElementById("pp")) === null || _c === void 0 ? void 0 : _c.innerHTML = "The both numbers are equals!"; + } +}; +// exercise #2 +var gender; +var height; +document.getElementById("HGbtn").onclick = function () { + var _a; + gender = document.getElementById("Gender").value; + height = document.getElementById("height").value; + (_a = document.getElementById("HGp")) === null || _a === void 0 ? void 0 : _a.innerHTML = "The height is:" + height + " and the Gender is:" + gender; +}; +// TypeScript - End of HomeWork #2 +// TypeScript - HomeWork #3 +document.querySelector(".fa-xmark").onclick = function () { + document.querySelector(".exercise3").style.display = "none"; +}; +document.getElementById("Hw3Btn").onclick = function () { + document.querySelector(".exercise3").style.display = "flex"; + // exercise #1 + var rnum; + var rnum1; + document.getElementById("Rbtn").onclick = function () { + var _a; + rnum = document.getElementById("rnum").value; + rnum1 = rnum.toString().split("").reverse().join(""); + (_a = document.getElementById("rp")) === null || _a === void 0 ? void 0 : _a.innerHTML = "The reverse number is : " + rnum1; + }; +}; diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/dist/style.css b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/dist/style.css new file mode 100644 index 000000000..810f26ed5 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/dist/style.css @@ -0,0 +1,164 @@ +body { + margin: 0; + padding: 0; + box-sizing: border-box; + background: #005f5f; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +* { + box-sizing: border-box; +} + +.presentation { + width: 80vw; + height: 60vh; + position: relative; +} +.presentation h1 { + text-align: center; + color: white; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +.presentation__boxes { + width: 100%; + height: 100%; + position: absolute; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} +.presentation__boxes .box { + width: 30%; + height: 60%; + border: 0.2vw solid white; +} +.presentation__boxes .box__btn { + position: absolute; + background: rgba(0, 0, 0, 0.6); + padding: 0.5vw; + border-radius: 1vw; + color: white; + cursor: pointer; + z-index: 1; +} +.presentation__boxes .box img { + width: 100%; + height: 100%; + box-shadow: 3px 3px 3px 3px #000 inset; + filter: blur(0.5vw); + transition: 1s ease-in-out; +} +.presentation__boxes .box img:hover { + filter: blur(0); +} +.presentation__boxes .box p { + position: absolute; +} + +.exercise1 { + width: 60%; + height: 60%; + background-color: #003355; + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; +} +.exercise1 .fa-circle-xmark { + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; +} +.exercise1 .HW { + width: 100%; + border: 1px solid white; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; +} +.exercise1 .HW h2, .exercise1 .HW h4 { + color: white; +} + +.exercise2 { + width: 60%; + height: 60%; + background-color: #003355; + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + flex-direction: row; +} +.exercise2 .HW { + width: 100%; + border: 1px solid white; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; +} +.exercise2 #pp, .exercise2 label, .exercise2 h3, .exercise2 #HGp { + color: white; +} +.exercise2 .fa-right-from-bracket { + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; +} + +.box__btn2 { + position: absolute; + background: rgba(0, 0, 0, 0.6); + padding: 0.5vw; + border-radius: 1vw; + color: white; + cursor: pointer; + z-index: 1; +} + +.exercise3 { + width: 60%; + height: 60%; + background-color: #003355; + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + flex-direction: row; + justify-content: center; + align-items: center; +} +.exercise3 .fa-xmark { + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; +} +.exercise3 h3, .exercise3 p { + color: white; +} +.exercise3 input, .exercise3 button { + display: block; +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/index.html new file mode 100644 index 000000000..f2f850dfc --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/index.html @@ -0,0 +1,87 @@ + + + + + + + TypeScript - Yuval.P + + + +
    +

    INT FullStack - Yuval Partush - Home work

    +
    +
    + + +
    +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    +

    JavaScript - Negative Number

    + + +

    The negative number is:

    +
    +
    +

    JavaScript - Number Sqaure

    + + +

    The square of the number you put is:

    +
    +
    +

    JavaScript - Celsius to Fahrenheit

    + + +

    The converted number is:

    +
    +
    +
    + +
    +

    TS - Larger number of two

    + + + +

    +
    +
    +

    TS - Gender & Height

    + + + + +

    +
    + +
    +
    +
    + +

    TypeScript - Reverse a number

    + + +

    The reverse number is:

    +
    +
    + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/index.ts new file mode 100644 index 000000000..1f8b89c28 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/index.ts @@ -0,0 +1,92 @@ +// console.log(-Math.abs(10)); +// function negate(num){ +// return -num; +// } +// let number = 25; +// let negativenumber = negate (number); +// console.log(negativenumber) + +// TypeScript - HomeWork #1 + + // exercise #1 +let num; +let negativenum; +document.getElementById("btn1").onclick = function (){ + num = document.getElementById("inp").value; + negativenum = -num; + document.getElementById("h4")?.innerHTML = `The negative number is: ${negativenum}`; +} + // exercise #2 +let num1; +let sqaure; +document.getElementById("btn2").onclick = function(){ + num1 = document.getElementById("inp1").value; + sqaure = Math.sqrt(num1); + document.getElementById("h41")?.innerHTML = `The Sqaure number is : ${sqaure}`; +} + // exercise #3 +let num2; +let Fah; +document.getElementById("btn3").onclick = function(){ + num2 = document.getElementById("inp2").value; + Fah = (num2 * 1.8) + 32; + document.getElementById("h42")?.innerHTML = `The converted number is:${Fah}*F`; +} +document.getElementById("HwBtn").onclick = function (){ + document.querySelector(".exercise1").style.display = "flex"; +} +document.querySelector(".fa-circle-xmark").onclick = function(){ + document.querySelector(".exercise1").style.display = "none"; +} +// TypeScript - End of HomeWork #1 +document.querySelector(".fa-right-from-bracket").onclick = function(){ + document.querySelector(".exercise2").style.display = "none"; +} +document.getElementById("Hw2Btn").onclick = function (){ + document.querySelector(".exercise2").style.display = "flex"; +} +// TypeScript - HomeWork #2 + + // exercise #1 +let pnum1:number; +let pnum2:number; +document.getElementById("pbtn").onclick = function(){ +pnum1 = document.getElementById("num1").value; +pnum2 = document.getElementById("num2").value; +if ((pnum1) > (pnum2)){ + document.getElementById("pp")?.innerHTML = `The Larger number is ${pnum1}` +} +else{ + document.getElementById("pp")?.innerHTML = `The larger number is ${pnum2}` +} +else if ((pnum1) === (pnum2)){ + document.getElementById("pp")?.innerHTML = `The both numbers are equals!`; +} +} + + // exercise #2 +let gender; +let height; +document.getElementById("HGbtn").onclick = function(){ + gender = document.getElementById("Gender").value; + height = document.getElementById("height").value; + document.getElementById("HGp")?.innerHTML = `The height is:${height} and the Gender is:${gender}`; +} +// TypeScript - End of HomeWork #2 + + +// TypeScript - HomeWork #3 +document.querySelector(".fa-xmark").onclick = function(){ + document.querySelector(".exercise3").style.display = "none"; +} +document.getElementById("Hw3Btn").onclick = function (){ + document.querySelector(".exercise3").style.display = "flex"; + + // exercise #1 + let rnum; + let rnum1; + document.getElementById("Rbtn").onclick = function(){ + rnum = document.getElementById("rnum").value; + rnum1 = rnum.toString().split(``).reverse().join(``); + document.getElementById("rp")?.innerHTML = `The reverse number is : ${rnum1}`; + } \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/style.css b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/style.css new file mode 100644 index 000000000..de591c573 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/style.css @@ -0,0 +1,164 @@ +body { + margin: 0; + padding: 0; + box-sizing: border-box; + background: rgb(0, 95, 95); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +* { + box-sizing: border-box; +} + +.presentation { + width: 80vw; + height: 60vh; + position: relative; +} +.presentation h1 { + text-align: center; + color: white; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +.presentation__boxes { + width: 100%; + height: 100%; + position: absolute; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} +.presentation__boxes .box { + width: 30%; + height: 60%; + border: 0.2vw solid white; +} +.presentation__boxes .box__btn { + position: absolute; + background: rgba(0, 0, 0, 0.6); + padding: 0.5vw; + border-radius: 1vw; + color: white; + cursor: pointer; + z-index: 1; +} +.presentation__boxes .box img { + width: 100%; + height: 100%; + box-shadow: 3px 3px 3px 3px #000 inset; + filter: blur(0.5vw); + transition: 1s ease-in-out; +} +.presentation__boxes .box img:hover { + filter: blur(0); +} +.presentation__boxes .box p { + position: absolute; +} + +.exercise1 { + width: 60%; + height: 60%; + background-color: rgb(0, 51, 85); + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; +} +.exercise1 .fa-circle-xmark { + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; +} +.exercise1 .HW { + width: 100%; + border: 1px solid white; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; +} +.exercise1 .HW h2, .exercise1 .HW h4 { + color: white; +} + +.exercise2 { + width: 60%; + height: 60%; + background-color: rgb(0, 51, 85); + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + flex-direction: row; +} +.exercise2 .HW { + width: 100%; + border: 1px solid white; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; +} +.exercise2 #pp, .exercise2 label, .exercise2 h3, .exercise2 #HGp { + color: white; +} +.exercise2 .fa-right-from-bracket { + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; +} + +.box__btn2 { + position: absolute; + background: rgba(0, 0, 0, 0.6); + padding: 0.5vw; + border-radius: 1vw; + color: white; + cursor: pointer; + z-index: 1; +} + +.exercise3 { + width: 60%; + height: 60%; + background-color: rgb(0, 51, 85); + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + flex-direction: row; + justify-content: center; + align-items: center; +} +.exercise3 .fa-xmark { + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; +} +.exercise3 h3, .exercise3 p { + color: white; +} +.exercise3 input, .exercise3 button { + display: block; +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/style.scss b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/style.scss new file mode 100644 index 000000000..d0e525608 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/TS - Yuval Partush/style.scss @@ -0,0 +1,177 @@ +body{ + margin: 0; + padding: 0; + box-sizing: border-box; + background: rgb(0, 95, 95); + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +* { + box-sizing: border-box; + } +.presentation{ + width: 80vw; + height: 60vh; + // border: 2px solid white; + position: relative; + h1{ + text-align: center; + color: white; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + &__boxes{ + width: 100%; + height: 100%; + position: absolute; + // border: 1px solid white; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + .box{ + width: 30%; + height: 60%; + border: 0.2vw solid white; + // border: inset 0.5vw #000; + // filter: blur(0vw); + // -webkit-filter: blur(0.vw); + &__btn{ + position: absolute; + background: rgba(0, 0, 0, 0.6); + padding: 0.5vw; + border-radius: 1vw; + color: white; + cursor: pointer; + z-index: 1; + // top: 50%; + // left: 13%; + } + } + // h3{ + // color: white; + // position: absolute; + // z-index: 2; + // } + .box img{ + width: 100%; + height: 100%; + box-shadow: 3px 3px 3px 3px #000 inset; + filter: blur(0.5vw); + transition: 1s ease-in-out; + } + .box img:hover{ + filter: blur(0); + } + .box p{ + position: absolute; + } + + + } +} +.exercise1{ + width: 60%; + height: 60%; + background-color: rgb(0, 51, 85); + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + .fa-circle-xmark{ + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; + } + .HW{ + width: 100%; + border: 1px solid white; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; + h2,h4{ + color: white; + // text-align: center; + } + + } +} +.exercise2{ + width: 60%; + height: 60%; + background-color: rgb(0, 51, 85); + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + flex-direction: row; + .HW{ + width: 100%; + border: 1px solid white; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 30px; + } + #pp,label,h3,#HGp{ + color: white; + } + .fa-right-from-bracket{ + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; + } + + +} +.box__btn2{ + position: absolute; + background: rgba(0, 0, 0, 0.6); + padding: 0.5vw; + border-radius: 1vw; + color: white; + cursor: pointer; + z-index: 1; + +} +.exercise3{ + width: 60%; + height: 60%; + background-color: rgb(0, 51, 85); + position: absolute; + z-index: 1; + box-shadow: 0px 5px 80px 6px #fff; + border: 3px solid white; + display: none; + flex-direction: row; + justify-content: center; + align-items: center; + .fa-xmark{ + position: absolute; + color: white; + font-size: 2rem; + right: 1vw; + top: 1vh; + cursor: pointer; + } + h3,p{ + color: white; + } + input,button{ + display: block; + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/app.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/app.ts new file mode 100644 index 000000000..3fb9033c9 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/app.ts @@ -0,0 +1,27 @@ +function reversedNum(num: number): number { + return ( + parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num) + ); +} + +//arrow function returns reversed number as a string +const revNum = (num: number) => + (parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num)).toString(); + +console.log(reversedNum(123456789)); +console.log(reversedNum(-123456789)); + +console.log(revNum(32546758654)); +console.log(revNum(-6754341232145364)); + +const inputNumber = document.querySelector("#number") as HTMLInputElement; +const output = document.querySelector("#output") as HTMLHeadElement; + +inputNumber.addEventListener("keydown", (e) => { + e.defaultPrevented; + + if (e.key == "Enter") { + output.textContent = revNum(parseFloat(inputNumber.value)); + inputNumber.value = ''; + } +}); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/dist/app.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/dist/app.js new file mode 100644 index 000000000..ef2d83ff4 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/dist/app.js @@ -0,0 +1,20 @@ +function reversedNum(num) { + return (parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num)); +} +//arrow function returns reversed number as a string +var revNum = function (num) { + return (parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num)).toString(); +}; +console.log(reversedNum(123456789)); +console.log(reversedNum(-123456789)); +console.log(revNum(32546758654)); +console.log(revNum(-6754341232145364)); +var inputNumber = document.querySelector("#number"); +var output = document.querySelector("#output"); +inputNumber.addEventListener("keydown", function (e) { + e.defaultPrevented; + if (e.key == "Enter") { + output.textContent = revNum(parseFloat(inputNumber.value)); + inputNumber.value = ''; + } +}); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/dist/dist/app.dev.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/dist/dist/app.dev.js new file mode 100644 index 000000000..9387ca12c --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/dist/dist/app.dev.js @@ -0,0 +1,7 @@ +"use strict"; + +function reverseNum(num) { + return num.split('').reverse(); +} + +console.log(reverseNum(123)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/index.html new file mode 100644 index 000000000..a78f344d2 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/VladiBykanov/index.html @@ -0,0 +1,30 @@ + + + + + + + Functions Home Work + + + + + +

    Your reversed number will be displayed here

    + + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/dist/index.js new file mode 100644 index 000000000..52536d767 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/dist/index.js @@ -0,0 +1,65 @@ +// ***level 1*** +// 1.1 +console.log("**level 1**"); +function negative(number) { + return -Math.abs(number); +} +var massageStr = prompt("choose a number"); +if (massageStr) { + var massage = parseInt(massageStr); + console.log("1.1) " + negative(massage)); +} +// 1.2 +function square(num) { + return Math.sqrt(num); +} +console.log("1.2) " + square(12).toFixed(3)); +// 1.3 +function Fahrenheit(celsius) { + return (celsius * 9 / 5) + 32; +} +console.log("1.3) " + Fahrenheit(15) + "\u00B0f "); +// ***level 2*** +// 2.1 +console.log("**level 2**"); +function max(num1, num2) { + return Math.max(num1, num2); +} +console.log("2.1) " + max(3, 9)); +// 2.2 +function avrageHeight(gender, height) { + if (gender == "male") { + return height - 174; + } + else if (gender == "woman" || "female") { + return height - 160; + } +} +var gender = prompt("what is your biological gender?"); +if (gender == " " || !gender) { + alert("please enter a gender"); +} +if (gender == "male" || "man") { + var heightStr = prompt("what is your height?"); + if (heightStr) { + var height = parseInt(heightStr); + console.log("2.2) you are a " + gender + " and your height is " + height + " ,compared to the average population you are taller or shorter by " + avrageHeight(gender, height) + "cm"); + } + else if (gender == "woman" || "female") { + var heightStr_1 = prompt("what is your height?"); + if (heightStr_1) { + var height = parseInt(heightStr_1); + console.log("2.2) you are a " + gender + " and your height is " + height + " ,compared to the average population you are taller or shorter by " + avrageHeight(gender, height) + "cm"); + } + } +} +// ***level 3*** +console.log("**level 3**"); +function reversedNum(num) { + return (num + .toString() + .split('') + .reverse() + .join('')); +} +console.log("3) " + reversedNum(6543.21)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/index.ts new file mode 100644 index 000000000..b6f9b601d --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/angela/index.ts @@ -0,0 +1,72 @@ +// ***level 1*** +// 1.1 +console.log("**level 1**") +function negative (number:number) { + return -Math.abs(number); +} +const massageStr = prompt("choose a number") +if (massageStr){ + const massage = parseInt(massageStr) + console.log(`1.1) ${negative(massage)}`) +} +// 1.2 +function square (num:number){ + return Math.sqrt(num) +} +console.log(`1.2) ${square(12).toFixed(3)}`); + +// 1.3 +function Fahrenheit (celsius:number){ + return ( celsius* 9/5)+32 +} +console.log(`1.3) ${Fahrenheit(15)}°f `); + +// ***level 2*** +// 2.1 +console.log("**level 2**") +function max (num1:number,num2:number){ + return Math.max(num1,num2) + +} +console.log(`2.1) ${max(3,9)}`); +// 2.2 + +function avrageHeight (gender:string,height:number){ + if (gender=="male"){ + return height-174 + } else if (gender=="woman"||"female"){ + return height-160 + } + +} +const gender=prompt("what is your biological gender?") +if (gender== " " ||!gender ){ + alert("please enter a gender"); + } +if (gender=="male"||"man"){ + let heightStr=prompt("what is your height?") + if (heightStr){ + const height = parseInt(heightStr) + console.log(`2.2) you are a ${gender} and your height is ${height} ,compared to the average population you are taller or shorter by ${avrageHeight(gender,height)}cm`) +}else if (gender=="woman"||"female"){ + let heightStr=prompt("what is your height?") + if (heightStr){ + const height = parseInt(heightStr) + console.log(`2.2) you are a ${gender} and your height is ${height} ,compared to the average population you are taller or shorter by ${avrageHeight(gender,height)}cm`) + } + +} +} +// ***level 3*** +console.log("**level 3**") +function reversedNum(num:number) { + return ( + num + .toString() + .split('') + .reverse() + .join('') + ) + + } +console.log(`3) ${reversedNum(6543.21)}`) \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/dist/index.js new file mode 100644 index 000000000..55e73c286 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/dist/index.js @@ -0,0 +1,106 @@ +//level 1 1 +//1.1 +var x = 123; +function negativReturn(x) { + return (-x); +} +console.log(negativReturn(x)); +//1.2 +function squareNumber(x) { + return Math.pow(x, 2); +} +console.log(squareNumber(x)); +//1.3 +var Celsius = 36.4; +function Fahrenheit(Celsius) { + return Celsius * 9 / 5 + 32; +} +console.log(Fahrenheit(Celsius)); +//level 2 +//2.1 +var y = 123; +function theLarger(x, y) { + if (x > y) { + return x; + } + else if (x < y) { + return y; + } + else { + return "Equals"; + } +} +console.log(theLarger(x, y)); +//2.2 +var averegeMale = 174; +var avaregeFemale = 164; +var gender = "mail" || "female"; +function HeightoGender(height, gender) { + if (gender === "male") { + return averegeMale - height; + } + else if (gender === "female") { + return avaregeFemale - height; + } +} +var gender = prompt("what is your gender ?"); +if (gender) { + var heightStr = prompt("what is your height?"); + var height = parseInt(heightStr); + if (!isNaN(height) && heightStr !== "") { + console.log(HeightoGender(height, gender)); + } + else { + alert("you did not enter a number"); + } +} +else if (gender === "") { + if (!gender) { + { + alert("you did not enter a gender"); + } + } +} +var reverseNum = function (num) { + return (num.toString().split('').reverse().join('')); +}; +// let again: boolean=true +// while(again===true){ +// const answer=prompt(" write a number pleace") +// if(answer){ +// const num=parseInt(answer) +// if(!isNaN(num)&&(answer!=="" )){ +// console.log(reverseNum(123)) +// alert(`the rever num is ${reverseNum(123)}`) +// } +// else{ alert("you did not write anumber")} +// } +// else{alert("you did not write somthing") +// again=false +// } +// } +var answer; +// while (isNaN(num) || (answer == null)) { +// const answer = prompt("pleas enter a number") +// if (answer !== null) { +// const num = parseInt(answer) +// if (isNaN(num)) { +// alert("you did not write anumber") +// } +// else { +// console.log(reverseNum(123)) +// alert(`the revers num is ${reverseNum(123)}`) +// } +// } +// else { alert("you did not write somthing") } +//} +// ***level 3*** +console.log("**level 3**"); +function reversedNum(num) { + return (num + .toString() + .split('') + .reverse() + .join('')); +} +console.log("3) " + reversedNum(6543.21)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/index.ts new file mode 100644 index 000000000..1bf847ffb --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/aviva-elias/index.ts @@ -0,0 +1,135 @@ +//level 1 1 +//1.1 +const x: number = 123 +function negativReturn(x: number): number { + return (-x) +} +console.log(negativReturn(x)) + +//1.2 + +function squareNumber(x: number): number { + return x ** 2 +} +console.log(squareNumber(x)) + +//1.3 +const Celsius: number = 36.4 +function Fahrenheit(Celsius: number): number { + return Celsius * 9 / 5 + 32 +} +console.log(Fahrenheit(Celsius)) + +//level 2 +//2.1 +const y: number = 123 +function theLarger(x: number, y: number) { + if (x > y) { + return x + } + else if (x < y) { return y } + else { return "Equals" } +} +console.log(theLarger(x, y)) + +//2.2 + + +let averegeMale: number = 174 +let avaregeFemale: number = 164 +let gender: string = "mail" || "female" + +function HeightoGender(height: number, gender: string): number { + if (gender === "male") { + return averegeMale - height + } + else if (gender === "female") { + + return avaregeFemale - height + } + +} + + +let gender = prompt("what is your gender ?"); + + + +if (gender) { + + let heightStr = prompt("what is your height?") + let height = parseInt(heightStr) + + if (!isNaN(height) && heightStr !== "") { + + console.log(HeightoGender(height, gender)) + } + + else { alert("you did not enter a number") } +} + + +else if (gender === "") { + if (!gender) { + { alert("you did not enter a gender") } + } +} + + + + + + +const reverseNum: Function = (num: number): number | string => { + return (num.toString().split('').reverse().join('')) +} +// let again: boolean=true + +// while(again===true){ +// const answer=prompt(" write a number pleace") + +// if(answer){ +// const num=parseInt(answer) +// if(!isNaN(num)&&(answer!=="" )){ +// console.log(reverseNum(123)) +// alert(`the rever num is ${reverseNum(123)}`) +// } +// else{ alert("you did not write anumber")} +// } +// else{alert("you did not write somthing") +// again=false +// } +// } +let answer + +// while (isNaN(num) || (answer == null)) { +// const answer = prompt("pleas enter a number") +// if (answer !== null) { +// const num = parseInt(answer) + +// if (isNaN(num)) { +// alert("you did not write anumber") +// } +// else { +// console.log(reverseNum(123)) +// alert(`the revers num is ${reverseNum(123)}`) + +// } +// } +// else { alert("you did not write somthing") } + +//} +// ***level 3*** +console.log("**level 3**") +function reversedNum(num:number) { + return ( + num + .toString() + .split('') + .reverse() + .join('') + ) + + } + +console.log(`3) ${reversedNum(6543.21)}`) diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/instructions.md b/02-TypeScript/07-functions/01-basic/puzzles-HW/instructions.md new file mode 100644 index 000000000..49f0372da --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/instructions.md @@ -0,0 +1,22 @@ +# Level 1 + +1. Write a JavaScript function that returns the negative number of a number. + Example: + x = 32243; + Expected Output: -32243; + +2. Write a function that returns the square of a number + +3. Write a function to convert Celsius to Fahrenheit + +# Level 2 + +1. Crate a function that gets to numbers and returns the larger of the two + +2. Create a function that gets the gender of the user and height of the user. + The function returns the height of the user relative to his gender. For example, the user's height is 170cm, and the gender is male. + The average height of males is 174cm, and the function return -4 + +# Level 3 + +1. Write a function to reverse a number. For example, the function gets 123 and returns 321 diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/dist/index.js new file mode 100644 index 000000000..2c69de3cf --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/dist/index.js @@ -0,0 +1,34 @@ +var numStr; +var num; +while (isNaN(num) || numStr == null) { + numStr = prompt("Enter the number you want to reverse:"); + if (numStr) { + num = parseInt(numStr); + if (isNaN(num)) { + alert("You did not put a number..."); + } + } + else { + alert("You did not put a value a all..."); + } +} +alert("the reverse number of " + num + " is " + reverseRecursive(num, 0)); +//function with recursive +function reverseRecursive(num, rem) { + if (num < 10) { + return rem * 10 + num; + } + else { + rem = rem * 10 + num % 10; + return reverseRecursive(Math.floor(num / 10), rem); + } +} +//function with loop +function reverse(num) { + var rem = 0; + while (num > 0) { + rem = rem * 10 + num % 10; + num = Math.floor(num / 10); + } + return rem; +} diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/index.ts new file mode 100644 index 000000000..554509519 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/noa-meillet/index.ts @@ -0,0 +1,39 @@ +let numStr; +let num; + +while (isNaN(num) || numStr == null){ + numStr= prompt("Enter the number you want to reverse:"); + if (numStr){ + num= parseInt(numStr); + if (isNaN(num)){ + alert("You did not put a number..."); + } + } else { + alert("You did not put a value a all..."); + } +} + +alert(`the reverse number of ${num} is ${reverseRecursive(num,0)}`); + + +//function with recursive +function reverseRecursive(num:number,rem:number):number { + if (num<10){ + return rem*10+num; + } else { + rem= rem*10 + num%10; + return reverseRecursive(Math.floor(num/10),rem); + } + } + + //function with loop + function reverse(num:number):number { + let rem=0; + while(num>0){ + rem= rem*10 + num%10; + num=Math.floor(num/10); + } + return rem; + } + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/dist/index.js new file mode 100644 index 000000000..df078246d --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/dist/index.js @@ -0,0 +1,13 @@ +'use strict'; +//1. Write a function to reverse a number. +// For example, the function gets 123 and returns 321 +printReverseNum(); +function printReverseNum() { + var newNum = ''; + var number = prompt('Enter a number: '); + for (var i = number.length - 1; i >= 0; i--) { + newNum += number.charAt(i); + } + console.log(number); + console.log(newNum); +} diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/index.html new file mode 100644 index 000000000..43d2e3edc --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/index.ts new file mode 100644 index 000000000..1747f5f78 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shai-li/index.ts @@ -0,0 +1,17 @@ +'use strict' + +//1. Write a function to reverse a number. +// For example, the function gets 123 and returns 321 + +printReverseNum() + +function printReverseNum() { + let newNum = '' + let number = prompt('Enter a number: ') + for (let i = number.length - 1; i >= 0; i--) { + newNum += number.charAt(i) + + } + console.log(number) + console.log(newNum) +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/dist/index.js new file mode 100644 index 000000000..9ff09a8cc --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/dist/index.js @@ -0,0 +1,13 @@ +function positiveToNegitive(userNumberVar) { + if (isNaN(userNumberVar)) { + return alert("This is not a number!"); + } + else if (userNumberVar == 0) { + return alert("The number zero is neither positive nor negative"); + } + else { + return (userNumberVar * (-1)); + } +} +let userNumber = prompt("please write a number"); +console.log(`The negative number is ${positiveToNegitive(userNumber)}`); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/index.html new file mode 100644 index 000000000..84933e4a2 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/index.html @@ -0,0 +1,12 @@ + + + + + + + shlomi-functions-HW + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/index.ts new file mode 100644 index 000000000..796352caa --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex1/index.ts @@ -0,0 +1,17 @@ + +function positiveToNegitive (userNumberVar:Number|string|null):number{ + if (isNaN(userNumberVar)){ + return alert("This is not a number!") + } + else if (userNumberVar==0){ + return alert("The number zero is neither positive nor negative") + + } + + else { + return (userNumberVar*(-1)) + } +} + +let userNumber=prompt("please write a number"); +console.log(`The negative number is ${positiveToNegitive(userNumber)}`) diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.html new file mode 100644 index 000000000..fae094561 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.html @@ -0,0 +1,12 @@ + + + + + + + ex2 + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.js new file mode 100644 index 000000000..b45b8abe2 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.js @@ -0,0 +1,10 @@ +function squareOfANumber(userNumberVar) { + if (isNaN(userNumberVar)) { + return alert("This is not a number!"); + } + else { + return (userNumberVar * userNumberVar); + } +} +let userNumber = prompt("please write a number"); +console.log(` The square number of ${userNumber} is ${squareOfANumber(userNumber)}`); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.ts new file mode 100644 index 000000000..3e242aa16 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex2/index.ts @@ -0,0 +1,13 @@ + +function squareOfANumber (userNumberVar:Number|string|null):number{ + if (isNaN(userNumberVar)){ + return alert("This is not a number!") + } + else { + return (userNumberVar*userNumberVar) + } +} +let userNumber=prompt("please write a number"); +console.log(` The square number of ${userNumber} is ${squareOfANumber(userNumber)}`) + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/dist/index.js new file mode 100644 index 000000000..2bdbdf3f3 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/dist/index.js @@ -0,0 +1,13 @@ +function CelsiusToFahrenheit(userNumberVar) { + if (isNaN(userNumberVar)) { + return false; + } + else { + return userNumberVar * 1.8 + 32; + } +} +var userNumberStr = prompt("please write a celsius degree"); +if (userNumberStr) { + var userNumber = parseInt(userNumberStr); + console.log("The Fahrenheit degree is " + CelsiusToFahrenheit(userNumber)); +} diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.html new file mode 100644 index 000000000..fae094561 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.html @@ -0,0 +1,12 @@ + + + + + + + ex2 + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.js new file mode 100644 index 000000000..062f89e3f --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.js @@ -0,0 +1,12 @@ + +function CelsiusToFahrenheit(userNumberVar) { + if (isNaN(userNumberVar)) { + return alert("This is not a number!"); + } + else { + return (userNumberVar * 1.8 + 32); + } +} +let userNumber = prompt("please write a celsius degree"); +console.log(`The Fahrenheit degree is ${CelsiusToFahrenheit(userNumber)}`) + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.ts new file mode 100644 index 000000000..c64f6d620 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 1/ex3/index.ts @@ -0,0 +1,14 @@ +function CelsiusToFahrenheit(userNumberVar: number): number | false { + if (isNaN(userNumberVar)) { + return false; + } else { + return userNumberVar * 1.8 + 32; + } +} + +const userNumberStr: string | null = prompt("please write a celsius degree"); +if (userNumberStr) { + const userNumber = parseInt(userNumberStr); + + console.log(`The Fahrenheit degree is ${CelsiusToFahrenheit(userNumber)}`); +} diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.html new file mode 100644 index 000000000..fae094561 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.html @@ -0,0 +1,12 @@ + + + + + + + ex2 + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.js new file mode 100644 index 000000000..55c75163e --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.js @@ -0,0 +1,23 @@ +function reverseANumber(userNumberVar) { + if (isNaN(userNumberVar)) { + return alert("This is not a number!"); + } + else { + let userString = userNumberVar.toString(); + let stringLength = userString.length; + let j = 0; + let oppArray = []; + for (let i = stringLength - 1; i >= 0; i--) { + oppArray[j] = userString[i]; + j++; + } + let k = 0; + let numberOppArray = []; + for (k = 0; k <= stringLength - 1; k++) { + numberOppArray[k] = parseInt(oppArray[k]); + } + return (numberOppArray.join("")); + } +} +let userNumber = prompt("please write a number to be reversed"); +console.log(`The reversed number is ${reverseANumber(userNumber)}`); \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.ts new file mode 100644 index 000000000..df0b6df3b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/shlomi.samai/level 3/index.ts @@ -0,0 +1,28 @@ + +function reverseANumber (userNumberVar:Number|string|null):any{ + if (isNaN(userNumberVar)){ + return alert("This is not a number!") + } + else { + let userString:string= userNumberVar.toString(); + let stringLength:number= userString.length; + let j=0; + let oppArray:string[]=[]; + for (let i=stringLength-1;i>=0;i--){ + + oppArray[j]=userString[i]; + j++; + } + + let k:number=0; + let numberOppArray:number[]=[]; + for (k=0;k<=stringLength-1;k++){ + numberOppArray[k]=parseInt(oppArray[k]) + } + return (numberOppArray.join("")) ; + } +} +let userNumber=prompt("please write a number to be reversed"); +console.log(`the reversed number is ${reverseANumber(userNumber)}`); + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/FullStack-INT-2022-Oct.code-workspace b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/FullStack-INT-2022-Oct.code-workspace new file mode 100644 index 000000000..84f717a12 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/FullStack-INT-2022-Oct.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "../../../.." + }, + { + "path": "../../../.." + } + ], + "settings": { + "compile-hero.disable-compile-files-on-did-save-code": false + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/dist/index.js new file mode 100644 index 000000000..1f3353c2e --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/dist/index.js @@ -0,0 +1,44 @@ +//level 1,1// +function negativnum(n) { + return n * -1; +} +console.log(negativnum(n)); +//level 1,2// +function squareNumbe(n) { + return (Math.sqrt(n)); +} +console.log(squareNumbe(n)); +//level 1,3// +function celesuisToFahrenheit(celsius) { + var fahrnhiet = celsius * 1.8 + 32; + return fahrnhiet; +} +console.log(celesuisToFahrenheit(20)); +//level 2,1// +function largerNumber(low, high) { + if (low > high) { + return low; + } + else { + return high; + } +} +console.log(largerNumber(1000, 350)); +//level 2,2// +function genderHight(avr, male) { + if (male === "male") { + return avr - 174; + } + else { + } +} +console.log(genderHight(170, "male")); +// level 3,1// +function reverseNumbers(n) { + return (n + .toString() + .split("") + .reverse() + .join("")); +} +console.log(reverseNumbers(n)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/index.ts new file mode 100644 index 000000000..390d45ca3 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/tomerCohen/index.ts @@ -0,0 +1,64 @@ + + +//level 1,1// +function negativnum(n:number):number{ + return n*-1 + +} +console.log(negativnum(n)); + +//level 1,2// + +function squareNumbe(n:number):number{ + + return (Math.sqrt(n)) +} +console.log(squareNumbe(n)); + +//level 1,3// + +function celesuisToFahrenheit(celsius:number):number{ + + const fahrnhiet = celsius*1.8+32; + return fahrnhiet; + +} +console.log(celesuisToFahrenheit(20)); + + +//level 2,1// + +function largerNumber(low:number,high:number):number{ + if (low > high) { + return low; + } else { + return high; + } +} +console.log(largerNumber(1000,350)); + +//level 2,2// + +function genderHight(avr:number,male:string){ + if (male === `male`) { + return avr - 174; + } else { + + } +} +console.log(genderHight(170,`male`)); + + +// level 3,1// +function reverseNumbers(n:number){ + return ( + n + .toString() + .split(``) + .reverse() + .join(``) + ) +} +console.log(reverseNumbers(n)); + + diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/dist/index.js b/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/dist/index.js new file mode 100644 index 000000000..30035c74d --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/dist/index.js @@ -0,0 +1,8 @@ +function reverseNum(x) { + return (x + .toString() + .split('') + .reverse() + .join('')); +} +console.log("" + reverseNum(56899965)); diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/index.html b/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/index.html new file mode 100644 index 000000000..4248787f4 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/index.ts b/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/index.ts new file mode 100644 index 000000000..22562e3f4 --- /dev/null +++ b/02-TypeScript/07-functions/01-basic/puzzles-HW/uriel bargil/index.ts @@ -0,0 +1,11 @@ + +function reverseNum(x) { + return (x + .toString() + .split('') + .reverse() + .join('')); +} +console.log("" + reverseNum(56899965)); + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/example/dist/index.js b/02-TypeScript/07-functions/02-function-types/example/dist/index.js new file mode 100644 index 000000000..6b626d364 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/example/dist/index.js @@ -0,0 +1,21 @@ +// different methds to write functions +console.log(someFunction(3)); +function someFunction(arg) { + var result = 2 * arg; + return result; +} +//anonymous function +var someFunction2 = function (arg) { + var result = 2 * arg; + return result; +}; +//arrow function (lamda) +var someFunction3 = function (arg) { + var result = 2 * arg; + return result; +}; +console.log(someFunction2(3)); +console.log(someFunction3(4)); +console.log(someFunction3(5)); +console.log(someFunction3(6)); +console.log(someFunction3(7)); diff --git a/02-TypeScript/07-functions/02-function-types/example/index.html b/02-TypeScript/07-functions/02-function-types/example/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/example/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/example/index.ts b/02-TypeScript/07-functions/02-function-types/example/index.ts new file mode 100644 index 000000000..8cbe8916a --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/example/index.ts @@ -0,0 +1,30 @@ +// different methds to write functions + +console.log(someFunction(3)); + +function someFunction(arg):number{ + const result = 2*arg; + return result +} + +//anonymous function +const someFunction2:Function = function(arg):number{ + const result = 2*arg; + return result; +} + +//arrow function (lamda) +const someFunction3:Function = (arg):number=>{ + const result = 2*arg; + return result; +} + + + +console.log(someFunction2(3)); +console.log(someFunction3(4)); + +console.log(someFunction3(5)); +console.log(someFunction3(6)); +console.log(someFunction3(7)); + diff --git a/02-TypeScript/07-functions/02-function-types/followup/Ayala P/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/Ayala P/dist/index.js new file mode 100644 index 000000000..56cb12cd0 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Ayala P/dist/index.js @@ -0,0 +1,15 @@ +function someFunction(child) { + var result = 3 * child; + return result; +} +var someFunction2 = function (child) { + var result = 3 * child; + return result; +}; +var someFunction3 = function (child) { + var result = 3 * child; + return result; +}; +console.log(someFunction2(3)); +console.log(someFunction3(4)); +console.log(someFunction3(5)); diff --git a/02-TypeScript/07-functions/02-function-types/followup/Ayala P/index.html b/02-TypeScript/07-functions/02-function-types/followup/Ayala P/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Ayala P/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/Ayala P/index.ts b/02-TypeScript/07-functions/02-function-types/followup/Ayala P/index.ts new file mode 100644 index 000000000..8320620be --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Ayala P/index.ts @@ -0,0 +1,25 @@ + + + +function someFunction(child):number{ + const result = 3*child; + return result +} + + +const someFunction2:Function = function(child):number{ + const result = 3*child; + return result; +} + +const someFunction3:Function = (child):number=>{ + const result = 3*child; + return result; +} + + + +console.log(someFunction2(3)); +console.log(someFunction3(4)); +console.log(someFunction3(5)); + diff --git a/02-TypeScript/07-functions/02-function-types/followup/Itai-G/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/Itai-G/dist/index.js new file mode 100644 index 000000000..9f96ac02a --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Itai-G/dist/index.js @@ -0,0 +1,15 @@ +function someFunction(arg) { + var result = 4 * arg; + return result; +} +console.log(someFunction(2)); +var someFunction5 = function (arg) { + var result = 4 * arg; + return result; +}; +console.log(someFunction5(5)); +var someFunction6 = function (arg) { + var result = 4 * arg; + return result; +}; +console.log(someFunction6(10)); diff --git a/02-TypeScript/07-functions/02-function-types/followup/Itai-G/index.html b/02-TypeScript/07-functions/02-function-types/followup/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/Itai-G/index.ts b/02-TypeScript/07-functions/02-function-types/followup/Itai-G/index.ts new file mode 100644 index 000000000..1733b78a4 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Itai-G/index.ts @@ -0,0 +1,20 @@ +function someFunction(arg):number{ + const result = 4*arg; + return result; +} +console.log(someFunction(2)); + +const someFunction5:Function = function(arg):number{ + const result = 4*arg; + return result; +} + +console.log(someFunction5(5)); + + +const someFunction6:Function = (arg):number => { + const result = 4*arg; + return result; +} + +console.log(someFunction6(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/dist/index.js new file mode 100644 index 000000000..b228cb5d7 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/dist/index.js @@ -0,0 +1,15 @@ +console.log(someFunction(3)); +function someFunction(arg) { + var result = 2 * arg; + return result; +} +//anonymous function +var someFunction2 = function (arg) { + var result = 2 * arg; + return result; +}; +//arrow function (lamda) +var someFunction3 = function (arg) { + var result = 2 * arg; + return result; +}; diff --git a/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/index.html b/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/index.html new file mode 100644 index 000000000..c0f0575df --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/index.ts b/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/index.ts new file mode 100644 index 000000000..a5467b4b7 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/Karin-levi/index.ts @@ -0,0 +1,20 @@ +console.log(someFunction(3)); + +function someFunction(arg):number{ + const result = 2*arg; + return result +} + + + +//anonymous function +const someFunction2:function = function(arg):number{ + const result = 2*arg; + return result; +} + +//arrow function (lamda) +const someFunction3:function = (arg):number=>{ + const result = 2*arg; + return result; +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/amit/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/amit/dist/index.js new file mode 100644 index 000000000..f617a0aa3 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/amit/dist/index.js @@ -0,0 +1,6 @@ +var myFunction = function (arg) { + var result = 6 * arg; + return result; +}; +var arg = 6; +console.log("6 times " + arg + " is " + myFunction(arg)); diff --git a/02-TypeScript/07-functions/02-function-types/followup/amit/index.html b/02-TypeScript/07-functions/02-function-types/followup/amit/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/amit/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/amit/index.ts b/02-TypeScript/07-functions/02-function-types/followup/amit/index.ts new file mode 100644 index 000000000..c155158ae --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/amit/index.ts @@ -0,0 +1,8 @@ +const myFunction: Function = (arg) => { + const result = 6*arg; + return result; +} + +const arg = 6; + +console.log(`6 times ${arg} is ${myFunction(arg)}`); \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/dist/index.js new file mode 100644 index 000000000..da75fc2b1 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/dist/index.js @@ -0,0 +1,15 @@ +function pureFunction(arg) { + var result = arg * 4; + return result; +} +console.log(pureFunction(3)); +var anonymousFunction = function (arg) { + var result = arg * 4; + return result; +}; +console.log(anonymousFunction(3)); +var arrowFunction = function (arg) { + var result = arg * 4; + return result; +}; +console.log(arrowFunction(3)); diff --git a/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/index.html b/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/index.ts b/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/index.ts new file mode 100644 index 000000000..344bf57eb --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/aviva-elias/index.ts @@ -0,0 +1,20 @@ +function pureFunction(arg):number{ + let result:number=arg*4 + return result + +} +console.log(pureFunction(3)) + +const anonymousFunction: Function= function(arg):number{ + let result:number=arg*4 + return result +} +console.log(anonymousFunction(3)) + + +const arrowFunction: Function=(arg):number=>{ + let result:number=arg*4 + return result +} + +console.log(arrowFunction(3)) \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/shalomcop/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/shalomcop/dist/index.js new file mode 100644 index 000000000..8b45a2c64 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/shalomcop/dist/index.js @@ -0,0 +1,2 @@ +var shalom, extra2 = function (go) { +}; diff --git a/02-TypeScript/07-functions/02-function-types/followup/shalomcop/index.html b/02-TypeScript/07-functions/02-function-types/followup/shalomcop/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/shalomcop/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/shalomcop/index.ts b/02-TypeScript/07-functions/02-function-types/followup/shalomcop/index.ts new file mode 100644 index 000000000..f3234bab9 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/shalomcop/index.ts @@ -0,0 +1,3 @@ +let shalom:Function extra2 = (go:number)=> { + +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/dist/index.js new file mode 100644 index 000000000..71c37f9a0 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/dist/index.js @@ -0,0 +1,16 @@ +function randonFunction(int) { + var result = 2 - int; + return result; +} +//randonFunction2(5) +var randonFunction2 = function (int) { + var result = 2 - int; + return result; +}; +var randonFunction3 = function (int) { + var result = 2 - int; + return result; +}; +randonFunction(3); +randonFunction2(5); +randonFunction3(10); diff --git a/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/index.html b/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/index.html new file mode 100644 index 000000000..44cb3adcb --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/index.ts b/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/index.ts new file mode 100644 index 000000000..64ba3dbd0 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/shlomi.samai/index.ts @@ -0,0 +1,23 @@ + +function randonFunction (int:number):number{ + const result=2-int; + return result +} + +//randonFunction2(5) + + +const randonFunction2:Function= function (int:number):number { + + const result=2-int; + return result +} + +const randonFunction3:Function = (int:number)=>{ + const result=2-int; + return result; +} + +randonFunction(3) +randonFunction2(5) +randonFunction3(10) \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/start.md b/02-TypeScript/07-functions/02-function-types/followup/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/dist/index.js new file mode 100644 index 000000000..391c32160 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/dist/index.js @@ -0,0 +1,20 @@ +console.log(someFunction(3)); +function someFunction(arg) { + var result = 2 * arg; + return result; +} +//anonymous function// +var someFunction2 = function (arg) { + var result = 2 * arg; + return result; +}; +// arrow function (lamda) => +var someFunction3 = function (arg) { + var result = 2 * arg; + return result; +}; +console.log(someFunction2(3)); +console.log(someFunction3(4)); +console.log(someFunction3(5)); +console.log(someFunction3(6)); +console.log(someFunction3(7)); diff --git a/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/index.html b/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/index.ts b/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/index.ts new file mode 100644 index 000000000..03167bd42 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/tomer-cohen/index.ts @@ -0,0 +1,29 @@ + + +console.log(someFunction(3)); + +function someFunction(arg):number{ + const result = 2*arg; + return result +} + +//anonymous function// + +const someFunction2:Function = function(arg):number{ + const result = 2*arg; + return result; +} + +// arrow function (lamda) => + +const someFunction3:Function = (arg):number=>{ + const result= 2*arg; + return result; +} + + +console.log(someFunction2(3)); +console.log(someFunction3(4)); +console.log(someFunction3(5)); +console.log(someFunction3(6)); +console.log(someFunction3(7)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/dist/index.js new file mode 100644 index 000000000..caf934008 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/dist/index.js @@ -0,0 +1,6 @@ +console.log(someFunction(3)); +function someFunction(arg) { + var result = 2 * arg; + return result; +} +console.log(someFunction(3)); diff --git a/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/index.html b/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/index.html new file mode 100644 index 000000000..74bf1eb91 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/index.ts b/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/index.ts new file mode 100644 index 000000000..af3860203 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/uriel bargil/index.ts @@ -0,0 +1,8 @@ +console.log(someFunction(3)); + + +function someFunction(arg):number { + const result = 2*arg; + return result +} +console.log (someFunction(3)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/yuval.p/dist/index.js b/02-TypeScript/07-functions/02-function-types/followup/yuval.p/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/07-functions/02-function-types/followup/yuval.p/index.html b/02-TypeScript/07-functions/02-function-types/followup/yuval.p/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/yuval.p/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/02-function-types/followup/yuval.p/index.ts b/02-TypeScript/07-functions/02-function-types/followup/yuval.p/index.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/07-functions/02-function-types/followup/yuval.p/index.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/dist/encryptor.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/dist/encryptor.js new file mode 100644 index 000000000..6b57b152e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/dist/encryptor.js @@ -0,0 +1,31 @@ +var encryptor = function (userPassword) { + try { + var arrayedPassword = []; + for (var i = 0; i < userPassword.length; i++) { + var outputCode = userPassword.charCodeAt(i) * 520; + arrayedPassword.push(outputCode); + } + return arrayedPassword.join(""); + } + catch (_a) { + console.error(Error); + return false; + } +}; +var repeat = true; +while (repeat === true) { + var userPassword = prompt("Do not go gentle into that good night"); + console.log(typeof userPassword); + if (userPassword !== null) { + if ((isNaN(Number(userPassword))) && (userPassword !== "")) { + alert("The encryption of " + userPassword + " is " + encryptor(userPassword)); + } + else { + alert("You didn't enter letters"); + } + } + else { + alert("Thank you, come again!"); + repeat = false; + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/encryptor.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/encryptor.html new file mode 100644 index 000000000..0923d88c3 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/encryptor.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/encryptor.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/encryptor.ts new file mode 100644 index 000000000..a65ccd02a --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Amit/encryptor.ts @@ -0,0 +1,39 @@ +const encryptor: Function = (userPassword: string) => { + try { + let arrayedPassword: string | number[] = []; + + for (let i = 0; i < userPassword.length; i++) { + let outputCode = userPassword.charCodeAt(i) * 520; + arrayedPassword.push(outputCode); + } + + return arrayedPassword.join(""); + } + + catch { + console.error(Error); + return false; + } +} + +let repeat: boolean = true; + +while (repeat === true) { + + const userPassword: string | null = prompt("Do not go gentle into that good night"); + console.log(typeof userPassword); + if (userPassword !== null) { + + if ((isNaN(Number(userPassword))) && (userPassword !== "")) { + alert(`The encryption of ${userPassword} is ${encryptor(userPassword)}`); + } else { + alert("You didn't enter letters"); + } + + } else { + alert("Thank you, come again!"); + repeat = false; + } +} + + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..3ec454e9b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/dist/index.js @@ -0,0 +1,57 @@ +//1 +/* +function multiplication(num1: number, num2: number, num3: number) { + + + try { + + return num1 * num2 * num3; + + + } catch (error) { + console.error(error.message); + + } +} +//const result = multiplication(2, 4, 6); +//console.log(result); +const userNumber1 = Number(prompt("Enter your first number")) +const userNumber2 = Number(prompt("Enter your first number")) +const userNumber3 = Number(prompt("Enter your first number")) + +if (!isNaN(userNumber1) || isNaN(userNumber2) || isNaN(userNumber3)) { + console.log("All inputs should be numbers no characters allowed") +} else { + const result = multiplication(userNumber1, userNumber2, userNumber3); + console.log(result) +} +*/ +//2 הצפנת מילה עם מספרים +function exTwo(word) { + try { + var encripted = ""; + for (var i = 0; i < word.length; i++) { + var char = word[i]; + var codeChar = (char.toLowerCase().charCodeAt(0) - 96); + encripted += "" + codeChar; + } + console.log(encripted); + } + catch (error) { + console.error(error.message); + } +} +exTwo("abc"); +/*function exTwo1(word: string) { + try { + for (let i = 0; i < word.length; i++) { + const char = word[i]; + console.log(char); + console.log(char.toLowerCase().charCodeAt(0)); + } + } catch (error) { + console.error(error.message); + + } + } + exTwo1("abc");*/ diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/index.html new file mode 100644 index 000000000..e7bfa823e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/index.ts new file mode 100644 index 000000000..aeca63807 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Ayala/index.ts @@ -0,0 +1,63 @@ +//1 +/* +function multiplication(num1: number, num2: number, num3: number) { + + + try { + + return num1 * num2 * num3; + + + } catch (error) { + console.error(error.message); + + } +} +//const result = multiplication(2, 4, 6); +//console.log(result); +const userNumber1 = Number(prompt("Enter your first number")) +const userNumber2 = Number(prompt("Enter your first number")) +const userNumber3 = Number(prompt("Enter your first number")) + +if (!isNaN(userNumber1) || isNaN(userNumber2) || isNaN(userNumber3)) { + console.log("All inputs should be numbers no characters allowed") +} else { + const result = multiplication(userNumber1, userNumber2, userNumber3); + console.log(result) +} +*/ + +//2 הצפנת מילה עם מספרים + +function exTwo(word: string) { + try { + let encripted = ""; + for (let i = 0; i < word.length; i++) { + const char = word[i]; + const codeChar = (char.toLowerCase().charCodeAt(0) - 96); + encripted += `${codeChar}`; + } + console.log(encripted) + } catch (error) { + console.error(error.message); + } +} + + + +exTwo("abc"); + + +/*function exTwo1(word: string) { + try { + for (let i = 0; i < word.length; i++) { + const char = word[i]; + console.log(char); + console.log(char.toLowerCase().charCodeAt(0)); + } + } catch (error) { + console.error(error.message); + + } + } + exTwo1("abc");*/ \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/dist/index.js new file mode 100644 index 000000000..be59ebcb0 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/dist/index.js @@ -0,0 +1,76 @@ +var threeNumbers = function (x, y, z) { + try { + if (typeof x !== "number" || + typeof y !== "number" || + typeof z !== "number") { + throw new Error("error is not a number"); + } + return x * y * z; + } + catch (Error) { + alert("Can't do a calculation, There must be 3 numbers to calculate"); + console.error(Error); + return false; + } +}; +var calculation = true; +var x = prompt("Enter a Number 1"); +var y = prompt("Enter a Number 2"); +var z = prompt("Enter a Number 3"); +console.log(x * y * z); +if (x !== null && y !== null && z !== null) { + if (threeNumbers(parseInt(x), parseInt(y), parseInt(z))) { + alert("The answer is " + x * y * z); + calculation = false; + } +} +else { + alert("Can't do a calculation, There must be 3 numbers to calculate"); +} +Question; +2; +function letterValue(abcToCode) { + var encriptDictionary = { + a: 1, + b: 2, + c: 3, + d: 4, + e: 5, + f: 6, + g: 7, + h: 8, + i: 9, + j: 10, + k: 11, + l: 12, + m: 13, + n: 14, + o: 15, + p: 16, + q: 17, + r: 18, + s: 19, + t: 20, + u: 21, + v: 22, + w: 23, + x: 24, + y: 25, + z: 26 + }; + try { + if (abcToCode.length === 1) { + return encriptDictionary[abcToCode] || ""; + } + if (typeof abcToCode === "number") { + throw new Error("We can't encrypt your message"); + } + return abcToCode.split("").map(letterValue); + } + catch (error) { + console.error("If you don't type how will you encrypt?"); + return false; + } +} +var abcToCode = prompt("Please enter the message to encrypt"); +console.log("" + letterValue(abcToCode)); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/index.ts new file mode 100644 index 000000000..b255006c9 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Itai-G/index.ts @@ -0,0 +1,82 @@ +const threeNumbers: Function = ( + x: number, + y: number, + z: number +): number | false => { + try { + if ( + typeof x !== "number" || + typeof y !== "number" || + typeof z !== "number" + ) { + throw new Error(`error is not a number`); + } + return x * y * z; + } catch (Error) { + alert(`Can't do a calculation, There must be 3 numbers to calculate`); + console.error(Error); + return false; + } +}; +let calculation = true; +const x: any = prompt(`Enter a Number 1`); +const y: any = prompt(`Enter a Number 2`); +const z: any = prompt(`Enter a Number 3`); +console.log(x * y * z); +if (x !== null && y !== null && z !== null) { + if (threeNumbers(parseInt(x), parseInt(y), parseInt(z))) { + alert(`The answer is ${x * y * z}`); + calculation = false; + } +} else { + alert(`Can't do a calculation, There must be 3 numbers to calculate`); +} + +Question 2 + +function letterValue(abcToCode: string) { + const encriptDictionary = { + a: 1, + b: 2, + c: 3, + d: 4, + e: 5, + f: 6, + g: 7, + h: 8, + i: 9, + j: 10, + k: 11, + l: 12, + m: 13, + n: 14, + o: 15, + p: 16, + q: 17, + r: 18, + s: 19, + t: 20, + u: 21, + v: 22, + w: 23, + x: 24, + y: 25, + z: 26, + }; + try { + if (abcToCode.length === 1) { + return encriptDictionary[abcToCode] || ""; + } + if (typeof abcToCode === `number`) { + throw new Error("We can't encrypt your message"); + } + + return abcToCode.split("").map(letterValue); + } catch (error) { + console.error(`If you don't type how will you encrypt?`); + return false; + } +} + +const abcToCode: any = prompt(`Please enter the message to encrypt`); +console.log(`${letterValue(abcToCode)}`); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..a164ebe59 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/dist/index.js @@ -0,0 +1,24 @@ +function multiplication(number1, number2, number3) { + try { + if ((typeof number1 !== 'number') || + (typeof number2 !== 'number') || + (typeof number3 !== 'number')) { + throw new Error('One of the arguments is not a number'); + } + return number1 * number2 * number3; + } + catch (error) { + console.error(error); + return false; + } +} +var firstNumber = prompt("give me the first number please"); +var secondNumber = prompt("give me the second number please"); +var thirdNumber = prompt("give me the third number please"); +var result = multiplication(parseInt(firstNumber), parseInt(secondNumber), parseInt(thirdNumber)); +if (result && !isNaN(result)) { + alert("the multiplication of the three numbers is " + result); +} +else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/index.html new file mode 100644 index 000000000..0e547c5bf --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..fbc5d8c2b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Karin-levi/index.ts @@ -0,0 +1,27 @@ +function multiplication(number1, number2, number3: any): number | false { + try { + if ((typeof number1 !== 'number') || + (typeof number2 !== 'number') || + (typeof number3 !== 'number')) { + throw new Error('One of the arguments is not a number'); + } + + return number1 * number2 * number3; + + } catch (error) { + console.error(error); + return false; + } +} + + +const firstNumber: any = prompt("give me the first number please"); +const secondNumber: any = prompt("give me the second number please"); +const thirdNumber: any = prompt("give me the third number please"); + +const result = multiplication(parseInt(firstNumber), parseInt(secondNumber), parseInt(thirdNumber)); +if (result && !isNaN(result)) { + alert(`the multiplication of the three numbers is ${result}`); +} else { + alert("we have an error"); +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/app.ts new file mode 100644 index 000000000..b9d2029e2 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/app.ts @@ -0,0 +1,105 @@ +// level 1 +const isNumber = (num: number, argumentPosition: string): number | false => { + if (typeof num !== "number") { + throw new Error(`${argumentPosition} Argument should be a number`); + } + // if (/^\d+$/.test(num.toString())) { + // throw new Error('Only numbers are acceptable') + // } + return num; +}; + +const multiplicationNumbers = ( + firstNumber: number, + secondNumber: number, + thirdNumber: number +): number | false => { + try { + isNumber(firstNumber, "First"); + isNumber(secondNumber, "Second"); + isNumber(thirdNumber, "Third"); + return firstNumber * secondNumber * thirdNumber; + } catch (error) { + console.error(error); + return error; + } +}; + +const firstAnswer = prompt("give me a number please"); +const secondAnswer = prompt("give me a number please"); +const thirdAnswer = prompt("give me a number please"); + +const result = multiplicationNumbers( + +firstAnswer!, + +secondAnswer!, + +thirdAnswer! +); +if (result && !isNaN(result)) { + alert(`Your number returned as ${result}`); +} else { + alert("we have an error"); +} + +// level 2 + +const mapEncription: Map = new Map(); +mapEncription.set("a", "1"); +mapEncription.set("b", "2"); +mapEncription.set("c", "3"); +mapEncription.set("d", "4"); +mapEncription.set("e", "5"); +mapEncription.set("f", "6"); +mapEncription.set("g", "7"); +mapEncription.set("h", "8"); +mapEncription.set("i", "9"); +mapEncription.set("j", "10"); +mapEncription.set("k", "11"); +mapEncription.set("l", "12"); +mapEncription.set("m", "13"); +mapEncription.set("n", "14"); +mapEncription.set("o", "15"); +mapEncription.set("p", "16"); +mapEncription.set("q", "17"); +mapEncription.set("r", "18"); +mapEncription.set("s", "19"); +mapEncription.set("t", "20"); +mapEncription.set("u", "21"); +mapEncription.set("v", "22"); +mapEncription.set("w", "23"); +mapEncription.set("x", "24"); +mapEncription.set("y", "25"); +mapEncription.set("z", "26"); +mapEncription.set(' ', '') + +const encryption = (stringToNum: string): number | false => { + let encryptedMessage = ""; + try { + + if (!/^[a-zA-Z]+$/.test(stringToNum)) { + throw new Error("input should only be letters"); + } + + const arrStringToNum = stringToNum.split(""); + arrStringToNum.forEach((element) => { + encryptedMessage += mapEncription.get(element); + + }); + + console.log(encryptedMessage); + return +encryptedMessage; + } catch (error) { + console.log(error); + return false; + } +}; +const answer = prompt("give me a message please"); + +const message = encryption(answer!); +if (message) { + alert(`Your message returned as ${message}`); +} else { + alert("we have an error"); +} +encryption("hi"); + + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/dist/app.js new file mode 100644 index 000000000..1653f19a6 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/dist/app.js @@ -0,0 +1,88 @@ +// level 1 +var isNumber = function (num, argumentPosition) { + if (typeof num !== "number") { + throw new Error(argumentPosition + " Argument should be a number"); + } + // if (/^\d+$/.test(num.toString())) { + // throw new Error('Only numbers are acceptable') + // } + return num; +}; +var multiplicationNumbers = function (firstNumber, secondNumber, thirdNumber) { + try { + isNumber(firstNumber, "First"); + isNumber(secondNumber, "Second"); + isNumber(thirdNumber, "Third"); + return firstNumber * secondNumber * thirdNumber; + } + catch (error) { + console.error(error); + return error; + } +}; +var firstAnswer = prompt("give me a number please"); +var secondAnswer = prompt("give me a number please"); +var thirdAnswer = prompt("give me a number please"); +var result = multiplicationNumbers(+firstAnswer, +secondAnswer, +thirdAnswer); +if (result && !isNaN(result)) { + alert("Your number returned as " + result); +} +else { + alert("we have an error"); +} +// level 2 +var mapEncription = new Map(); +mapEncription.set("a", "1"); +mapEncription.set("b", "2"); +mapEncription.set("c", "3"); +mapEncription.set("d", "4"); +mapEncription.set("e", "5"); +mapEncription.set("f", "6"); +mapEncription.set("g", "7"); +mapEncription.set("h", "8"); +mapEncription.set("i", "9"); +mapEncription.set("j", "10"); +mapEncription.set("k", "11"); +mapEncription.set("l", "12"); +mapEncription.set("m", "13"); +mapEncription.set("n", "14"); +mapEncription.set("o", "15"); +mapEncription.set("p", "16"); +mapEncription.set("q", "17"); +mapEncription.set("r", "18"); +mapEncription.set("s", "19"); +mapEncription.set("t", "20"); +mapEncription.set("u", "21"); +mapEncription.set("v", "22"); +mapEncription.set("w", "23"); +mapEncription.set("x", "24"); +mapEncription.set("y", "25"); +mapEncription.set("z", "26"); +mapEncription.set(' ', ''); +var encryption = function (stringToNum) { + var encryptedMessage = ""; + try { + if (!/^[a-zA-Z]+$/.test(stringToNum)) { + throw new Error("input should only be letters"); + } + var arrStringToNum = stringToNum.split(""); + arrStringToNum.forEach(function (element) { + encryptedMessage += mapEncription.get(element); + }); + console.log(encryptedMessage); + return +encryptedMessage; + } + catch (error) { + console.log(error); + return false; + } +}; +var answer = prompt("give me a message please"); +var message = encryption(answer); +if (message) { + alert("Your message returned as " + message); +} +else { + alert("we have an error"); +} +encryption("hi"); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/index.html new file mode 100644 index 000000000..f619d8529 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Kseniya_T/index.html @@ -0,0 +1,12 @@ + + + + + + + functions + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/app.ts new file mode 100644 index 000000000..552282d24 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/app.ts @@ -0,0 +1,80 @@ +// 1) +function multiplication() { + try { + const value1 = prompt("Please enter the first number:"); + if (value1) { + if (isNaN(parseInt(value1))){ + throw new Error('Argument should be a number'); + } + } + else if (!value1){ + throw new Error('Argument should be a number'); + } + + const value2 = prompt("Please enter the second number:"); + if (value2) { + if (isNaN(parseInt(value2))){ + throw new Error('Argument should be a number'); + } + } + else if (!value2){ + throw new Error('Argument should be a number'); + } + + const value3 = prompt("Please enter the third number:"); + if (value3) { + if (isNaN(parseInt(value3))){ + throw new Error('Argument should be a number'); + } + } + else if (!value3){ + throw new Error('Argument should be a number'); + } + + if (value1 && value2 && value3){ + + return parseInt(value1)*parseInt(value2)*parseInt(value3) + } + } catch (error) { + console.error(error) + return false + + } +} + +// console.log(multiplication()) + + +// 2) +function encryptMessage(){ + try { + const message = prompt("Please enter a message to encrypt: "); + if(!message){ + throw new Error("must enter a message"); + } else { + const encryptionDictionary = { + a:1,b:2,c:3,d:4,e:5,f:6, + g:7,h:8,i:9,j:10,k:11,l:12,m:13, + n:14,o:15,p:16,q:17,r:18,s:19,t:20, + u:21,v:22,w:23,x:24,y:25,z:26," ":27, + A:28,B:29,C:30,D:31,E:32,F:33, + G:34,H:35,I:36,J:37,K:38,L:39,M:40, + N:41,O:42,P:43,Q:44,R:45,S:46,T:47, + U:48,V:49,W:50,X:51,Y:52,Z:53,1:54, + 2:55,3:56,4:57,5:58,6:59,7:60,8:61,9:62, + 0:63,"!":64,"?":65 + }; + const messageChars = [...message]; + let encryptedMessage:string = ""; + for (const i in messageChars){ + let letter:string = messageChars[i] + encryptedMessage = `${encryptedMessage}`+ encryptionDictionary[letter]+ " " ; + } + console.log(encryptedMessage) + } + } catch (error) { + console.error(error); + } +} + +encryptMessage() diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/dist/app.js new file mode 100644 index 000000000..5a008ed96 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/dist/app.js @@ -0,0 +1,81 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +// 1) +function multiplication() { + try { + var value1 = prompt("Please enter the first number:"); + if (value1) { + if (isNaN(parseInt(value1))) { + throw new Error('Argument should be a number'); + } + } + else if (!value1) { + throw new Error('Argument should be a number'); + } + var value2 = prompt("Please enter the second number:"); + if (value2) { + if (isNaN(parseInt(value2))) { + throw new Error('Argument should be a number'); + } + } + else if (!value2) { + throw new Error('Argument should be a number'); + } + var value3 = prompt("Please enter the third number:"); + if (value3) { + if (isNaN(parseInt(value3))) { + throw new Error('Argument should be a number'); + } + } + else if (!value3) { + throw new Error('Argument should be a number'); + } + if (value1 && value2 && value3) { + return parseInt(value1) * parseInt(value2) * parseInt(value3); + } + } + catch (error) { + console.error(error); + return false; + } +} +// console.log(multiplication()) +// 2) +function encryptMessage() { + try { + var message = prompt("Please enter a message to encrypt: "); + if (!message) { + throw new Error("must enter a message"); + } + else { + var encryptionDictionary = { + a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, + g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, + n: 14, o: 15, p: 16, q: 17, r: 18, s: 19, t: 20, + u: 21, v: 22, w: 23, x: 24, y: 25, z: 26, " ": 27, + A: 28, B: 29, C: 30, D: 31, E: 32, F: 33, + G: 34, H: 35, I: 36, J: 37, K: 38, L: 39, M: 40, + N: 41, O: 42, P: 43, Q: 44, R: 45, S: 46, T: 47, + U: 48, V: 49, W: 50, X: 51, Y: 52, Z: 53, 1: 54, + 2: 55, 3: 56, 4: 57, 5: 58, 6: 59, 7: 60, 8: 61, 9: 62, + 0: 63, "!": 64, "?": 65 + }; + var messageChars = __spreadArrays(message); + var encryptedMessage = ""; + for (var i in messageChars) { + var letter = messageChars[i]; + encryptedMessage = "" + encryptedMessage + encryptionDictionary[letter] + " "; + } + console.log(encryptedMessage); + } + } + catch (error) { + console.error(error); + } +} +encryptMessage(); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Nikita Rossenko/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/dist/index.js new file mode 100644 index 000000000..b71aee14e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/dist/index.js @@ -0,0 +1,142 @@ +//Q 1 +function threeNumbers(num1, num2, num3) { + try { + if (typeof num1 !== 'number' || typeof num2 !== 'number' || typeof num3 !== 'number') { + throw new Error("Not a number"); + } + return num1 * num2 * num3; + } + catch (error) { + console.error(error); + return false; + } +} +var check1 = true; +while (check1) { + var num1 = prompt("Insert first number for first function"); + var num2 = prompt("Insert second number for first function"); + var num3 = prompt("Insert third number for first function"); + if (num1 !== null && num2 !== null && num3 !== null) { + if (threeNumbers(parseInt(num1), parseInt(num2), parseInt(num3))) { + alert("The answer is " + threeNumbers(parseInt(num1), parseInt(num2), parseInt(num3))); + check1 = false; + } + else { + alert("Invalid input"); + } + } + else { + alert("Some of the inputs are null"); + } +} +//Q2 +var code = function (line) { + try { + if (typeof line !== 'string') { + throw new Error("Invalid input"); + } + var newLine = line.toLocaleLowerCase(); + var str = ""; + for (var i = 0; i < newLine.length; i++) { + if ((newLine.charCodeAt(i) > 122 || newLine.charCodeAt(i) < 97) && newLine.charCodeAt(i) != 32) { + throw new Error("Invalid input"); + } + else if (newLine.charCodeAt(i) == 32) { + str += " "; + } + else { + str += newLine.charCodeAt(i) - 96; + } + } + return str; + } + catch (error) { + console.error(error); + return false; + } +}; +var check2 = true; +while (check2) { + var sentence = prompt("Enter a sentence to turn into a code:"); + if (code(sentence)) { + alert(code(sentence)); + check2 = false; + } + else { + alert("Invalid input"); + } +} +//Q3 +//I based the solution on the ASCII table +//The function will recive only letters to encrypt and will add 10 to the ASCII table value +//To decrypt the input should be in the range (the function will check it as well) +var q3Function = function (q3Line, whatToDo) { + try { + var str = ""; + if (whatToDo) { + if (typeof q3Line !== 'string') { + throw new Error("Invalid input"); + } + for (var i = 0; i < q3Line.length; i++) { + if (q3Line.charCodeAt(i) != 32 && (q3Line.charCodeAt(i) < 65 || (q3Line.charCodeAt(i) > 90 && q3Line.charCodeAt(i) < 97) || q3Line.charCodeAt(i) > 122)) { + throw new Error("Invalid input"); + } + else if (q3Line.charCodeAt(i) == 32) { + str += " "; + } + else { + str += String.fromCharCode(q3Line.charCodeAt(i) + 10); + } + } + } + else { + for (var i = 0; i < q3Line.length; i++) { + if (q3Line.charCodeAt(i) != 32 && (q3Line.charCodeAt(i) < 75 || (q3Line.charCodeAt(i) > 100 && q3Line.charCodeAt(i) < 107) || q3Line.charCodeAt(i) > 132)) { + throw new Error("Invalid input"); + } + else if (q3Line.charCodeAt(i) == 32) { + str += " "; + } + else { + str += String.fromCharCode(q3Line.charCodeAt(i) - 10); + } + } + } + return str; + } + catch (error) { + console.error(error); + return false; + } +}; +var check3 = true; +while (check3) { + var q3 = prompt("Enter e if you would like to encrypt a message or enter d if you would like to decrypt a message"); + if (q3 != 'e' && q3 != 'd') { + alert("Invalid input"); + } + else { + var whatToDo; + var message; + if (q3 == 'e') { + message = prompt("Enter the message you would like to encrypt"); + whatToDo = true; + } + else { + message = prompt("Enter the message you would like to decrypt"); + whatToDo = false; + } + if (message == null) { + alert("Invalid input"); + } + else { + if (q3Function(message, whatToDo)) { + alert(q3Function(message, whatToDo)); + check3 = false; + } + else { + alert("Invalid input"); + } + } + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/index.ts new file mode 100644 index 000000000..790a8bd9e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Omer.Virshuvski/index.ts @@ -0,0 +1,132 @@ +//Q 1 +function threeNumbers(num1: number, num2: number, num3: number): number | false { + try { + if (typeof num1 !== 'number' || typeof num2 !== 'number' || typeof num3 !== 'number') { + throw new Error("Not a number"); + } + return num1 * num2 * num3; + } catch (error) { + console.error(error); + return false; + } +} + +var check1 = true; +while (check1) { + const num1 = prompt("Insert first number for first function"); + const num2 = prompt("Insert second number for first function"); + const num3 = prompt("Insert third number for first function"); + if (num1 !== null && num2 !== null && num3 !== null) { + if (threeNumbers(parseInt(num1), parseInt(num2), parseInt(num3))) { + alert(`The answer is ${threeNumbers(parseInt(num1), parseInt(num2), parseInt(num3))}`) + check1 = false; + } else { + alert("Invalid input") + } + } else { + alert("Some of the inputs are null") + } +} + +//Q2 +const code: Function = (line: string): string | false => { + try { + if (typeof line !== 'string') { + throw new Error("Invalid input"); + } + const newLine = line.toLocaleLowerCase(); + var str = ""; + for (var i = 0; i < newLine.length; i++) { + if ((newLine.charCodeAt(i) > 122 || newLine.charCodeAt(i) < 97) && newLine.charCodeAt(i) != 32) { + throw new Error("Invalid input"); + } else if (newLine.charCodeAt(i) == 32) { + str += " "; + } else { + str += newLine.charCodeAt(i) - 96; + } + } + return str; + } catch (error) { + console.error(error); + return false; + } +} + +var check2 = true; +while (check2) { + const sentence = prompt("Enter a sentence to turn into a code:"); + if (code(sentence)) { + alert(code(sentence)); + check2 = false; + } else { + alert("Invalid input") + } +} + +//Q3 +//I based the solution on the ASCII table +//The function will recive only letters to encrypt and will add 10 to the ASCII table value +//To decrypt the input should be in the range (the function will check it as well) +const q3Function:Function = (q3Line:string, whatToDo:boolean):string|false => { + try { + var str = ""; + if (whatToDo) { + if (typeof q3Line !== 'string') { + throw new Error("Invalid input"); + } + for (var i = 0; i < q3Line.length; i++) { + if (q3Line.charCodeAt(i) != 32 && (q3Line.charCodeAt(i) < 65 || (q3Line.charCodeAt(i) > 90 && q3Line.charCodeAt(i) < 97) || q3Line.charCodeAt(i) > 122)) { + throw new Error("Invalid input"); + } else if (q3Line.charCodeAt(i) == 32) { + str += " "; + } else { + str += String.fromCharCode(q3Line.charCodeAt(i) + 10); + } + } + } else { + for (var i = 0; i < q3Line.length; i++) { + if (q3Line.charCodeAt(i) != 32 && (q3Line.charCodeAt(i) < 75 || (q3Line.charCodeAt(i) > 100 && q3Line.charCodeAt(i) < 107) || q3Line.charCodeAt(i) > 132)) { + throw new Error("Invalid input"); + } else if (q3Line.charCodeAt(i) == 32) { + str += " "; + } else { + str += String.fromCharCode(q3Line.charCodeAt(i) - 10); + } + } + } + return str; + } catch (error) { + console.error(error); + return false; + } +} + +var check3 = true; +while(check3) { + const q3 = prompt("Enter e if you would like to encrypt a message or enter d if you would like to decrypt a message") + if(q3 != 'e' && q3 != 'd') { + alert("Invalid input"); + } else { + var whatToDo:boolean; + var message:string|null; + if (q3 == 'e') { + message = prompt("Enter the message you would like to encrypt"); + whatToDo = true; + } else { + message = prompt("Enter the message you would like to decrypt"); + whatToDo = false; + } + if (message == null) { + alert("Invalid input"); + } else { + if (q3Function(message, whatToDo)) { + alert(q3Function(message,whatToDo)); + check3 = false; + } else { + alert("Invalid input"); + } + } + + } +} + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/app.ts new file mode 100644 index 000000000..47d47f84a --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/app.ts @@ -0,0 +1,30 @@ +// function gets string of numbers and returns integer. or false. +let isNumber: Function = (numberString): number | false => { + try { + if (isNaN(numberString)) { + throw new Error("This in not a number!"); + } + return parseInt(numberString); + } catch (error) { + console.error(error); + return false; + } +}; +// function gets a number from the user and retuns it as an integer. +// If the user entered a letter, the loop will continue. +let getNumber: Function = (textNumber: string): number => { + while (true) { + let numberString = prompt(`Please enter your ${textNumber} number.`); + const intNumber = isNumber(numberString); + if (intNumber) { + return intNumber; + } + } +}; + +// get three numbers and prints the result. +const firstNumber = getNumber("first"); +const secondNumber = getNumber("second"); +const thirdNumber = getNumber("third"); +const result: number = firstNumber * secondNumber * thirdNumber; +document.write(`${firstNumber}*${secondNumber}*${thirdNumber}=${result}`); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/dist/app.js new file mode 100644 index 000000000..3186e65ac --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/dist/app.js @@ -0,0 +1,30 @@ +// function gets string of numbers and returns integer. or false. +var isNumber = function (numberString) { + try { + if (isNaN(numberString)) { + throw new Error("This in not a number!"); + } + return parseInt(numberString); + } + catch (error) { + console.error(error); + return false; + } +}; +// function gets a number from the user and retuns it as an integer. +// If the user entered a letter, the loop will continue. +var getNumber = function (textNumber) { + while (true) { + var numberString = prompt("Please enter your " + textNumber + " number."); + var intNumber = isNumber(numberString); + if (intNumber) { + return intNumber; + } + } +}; +// get three numbers and prints the result. +var firstNumber = getNumber("first"); +var secondNumber = getNumber("second"); +var thirdNumber = getNumber("third"); +var result = firstNumber * secondNumber * thirdNumber; +document.write(firstNumber + "*" + secondNumber + "*" + thirdNumber + "=" + result); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shalom Copperman/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/.vscode/settings.json b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/.vscode/settings.json new file mode 100644 index 000000000..806f79030 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false, + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/app.ts new file mode 100644 index 000000000..29e5c15cc --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/app.ts @@ -0,0 +1,572 @@ +let input = document.querySelector("#input_multiplication") as HTMLInputElement; + +let sum = 0; +let result = 1; +let count = 0; + +input.addEventListener("keypress", (event: KeyboardEvent | undefined): void => { + let addNum = document.querySelector( + ".Some_numbers_have_been_entered" + ) as HTMLHeadElement; + let error_Only_3_numbers = document.querySelector( + ".Only_3_numbers" + ) as HTMLHeadElement; + let btn = document.querySelector("#btn") as HTMLButtonElement; + let enter3num = document.querySelector( + ".The_amount_of_numbers_entered" + ) as HTMLDivElement; + + try { + if (event && event.key === "Enter" && input.value !== "") { + sum++; + switch (sum) { + case 1: + let firstNumber: string | undefined = input.value; + let castingFirstNumber = parseInt(firstNumber); + console.log(castingFirstNumber); + addNum.textContent = "+1"; + input.value = ""; + multiplication(castingFirstNumber); + + break; + + case 2: + let secondNumber: string | undefined = input.value; + let castingSecondNumber = parseInt(secondNumber); + console.log(castingSecondNumber); + addNum.textContent = "+2"; + input.value = ""; + multiplication(castingSecondNumber); + + break; + + case 3: + let targetNumber: string | undefined = input.value; + let castingTargetNumber = parseInt(targetNumber); + console.log(castingTargetNumber); + addNum.textContent = "✔"; + enter3num.classList.add("activ"); + + input.value = ""; + multiplication(castingTargetNumber); + + break; + + default: + throw new Error(" should be 3 numbers "); + } + } + } catch (e) { + let error = e.toString(); + error_Only_3_numbers.textContent = error; + } + + function multiplication(n: number) { + count++; + result = result * n; + console.log(result); + } + + btn.addEventListener("click", (event) => { + if (count == 3) { + let showresult = result.toString(); + error_Only_3_numbers.textContent = showresult; + } + }); +}); + +// ---------------------------------------------------------------- +// ---------------------------------------------------------------- +// ---------------------------------------------------------------- +// ---------------------------------------------------------------- + +let btnEncryption = document.querySelector( + ".btnEncryption" +) as HTMLButtonElement; + +btnEncryption.addEventListener("click", (event) => { + let encryptionResult: string = ""; + let inputEncryption = ( + document.querySelector(".inputEncryption") as HTMLInputElement | null + )?.value; + let split_the_string: string[] = []; + try { + if (inputEncryption) { + split_the_string = inputEncryption.split(""); + + if (split_the_string) { + for (let i = 0; i < split_the_string.length; i++) { + switch (split_the_string[i]) { + case "a": + encryptionResult += "1"; + encryptionResult += " "; + break; + + case "b": + encryptionResult += "2"; + encryptionResult += " "; + break; + + case "c": + encryptionResult += "3"; + encryptionResult += " "; + break; + + case "d": + encryptionResult += "4"; + encryptionResult += " "; + break; + case "e": + encryptionResult += "5"; + encryptionResult += " "; + break; + + case "f": + encryptionResult += "6"; + encryptionResult += " "; + break; + case "g": + encryptionResult += "7"; + encryptionResult += " "; + break; + + case "h": + encryptionResult += "8"; + encryptionResult += " "; + break; + case "i": + encryptionResult += "9"; + encryptionResult += " "; + break; + + case "j": + encryptionResult += "10"; + encryptionResult += " "; + break; + case "k": + encryptionResult += "11"; + encryptionResult += " "; + break; + case "l": + encryptionResult += "12"; + encryptionResult += " "; + break; + + case "m": + encryptionResult += "13"; + encryptionResult += " "; + break; + case "n": + encryptionResult += "14"; + encryptionResult += " "; + break; + case "o": + encryptionResult += "15"; + encryptionResult += " "; + break; + + case "p": + encryptionResult += "16"; + encryptionResult += " "; + break; + case "q": + encryptionResult += "17"; + encryptionResult += " "; + break; + case "r": + encryptionResult += "18"; + encryptionResult += " "; + break; + + case "s": + encryptionResult += "19"; + encryptionResult += " "; + break; + case "t": + encryptionResult += "20"; + encryptionResult += " "; + break; + case "u": + encryptionResult += "21"; + encryptionResult += " "; + break; + + case "v": + encryptionResult += "22"; + encryptionResult += " "; + break; + + case "w": + encryptionResult += "23"; + encryptionResult += " "; + break; + + case "x": + encryptionResult += "24"; + encryptionResult += " "; + break; + + case "y": + encryptionResult += "25"; + encryptionResult += " "; + break; + + case "z": + encryptionResult += "26"; + encryptionResult += " "; + break; + + // ------------------------------------------------ + + case "A": + encryptionResult += "1"; + encryptionResult += " "; + break; + + case "B": + encryptionResult += "2"; + encryptionResult += " "; + break; + + case "C": + encryptionResult += "3"; + encryptionResult += " "; + break; + + case "D": + encryptionResult += "4"; + encryptionResult += " "; + break; + + case "E": + encryptionResult += "5"; + encryptionResult += " "; + break; + + case "F": + encryptionResult += "6"; + encryptionResult += " "; + break; + + case "G": + encryptionResult += "7"; + encryptionResult += " "; + break; + + case "H": + encryptionResult += "8"; + encryptionResult += " "; + break; + + case "I": + encryptionResult += "9"; + break; + + case "J": + encryptionResult += "10"; + encryptionResult += " "; + break; + case "K": + encryptionResult += "11"; + encryptionResult += " "; + break; + case "L": + encryptionResult += "12"; + encryptionResult += " "; + break; + + case "M": + encryptionResult += "13"; + encryptionResult += " "; + break; + case "N": + encryptionResult += "14"; + encryptionResult += " "; + break; + case "O": + encryptionResult += "15"; + encryptionResult += " "; + break; + + case "P": + encryptionResult += "16"; + encryptionResult += " "; + break; + case "Q": + encryptionResult += "17"; + encryptionResult += " "; + break; + case "R": + encryptionResult += "18"; + encryptionResult += " "; + break; + + case "S": + encryptionResult += "19"; + encryptionResult += " "; + break; + case "T": + encryptionResult += "20"; + encryptionResult += " "; + break; + case "U": + encryptionResult += "21"; + encryptionResult += " "; + break; + + case "V": + encryptionResult += "22"; + encryptionResult += " "; + break; + + case "W": + encryptionResult += "23"; + encryptionResult += " "; + break; + + case "X": + encryptionResult += "24"; + encryptionResult += " "; + break; + + case "Y": + encryptionResult += "25"; + encryptionResult += " "; + break; + + case "Z": + encryptionResult += "26"; + encryptionResult += " "; + break; + + // --------------------------------- + case "1": + encryptionResult += "A"; + encryptionResult += " "; + break; + + case "2": + encryptionResult += "B"; + encryptionResult += " "; + break; + + case "3": + encryptionResult += "C"; + encryptionResult += " "; + break; + + case "4": + encryptionResult += "D"; + encryptionResult += " "; + break; + case "5": + encryptionResult += "E"; + encryptionResult += " "; + break; + + case "6": + encryptionResult += "F"; + encryptionResult += " "; + break; + case "7": + encryptionResult += "G"; + encryptionResult += " "; + break; + + case "8": + encryptionResult += "H"; + encryptionResult += " "; + break; + case "9": + encryptionResult += "I"; + encryptionResult += " "; + break; + + // ------------------------------- + + case "!": + encryptionResult += "!"; + encryptionResult += " "; + break; + case "@": + encryptionResult += "@"; + encryptionResult += " "; + break; + case "#": + encryptionResult += "#"; + encryptionResult += " "; + break; + case "$": + encryptionResult += "$"; + encryptionResult += " "; + break; + case "%": + encryptionResult += "%"; + encryptionResult += " "; + break; + case "^": + encryptionResult += "^"; + encryptionResult += " "; + break; + case "&": + encryptionResult += "&"; + encryptionResult += " "; + break; + case "*": + encryptionResult += "*"; + encryptionResult += " "; + break; + case "(": + encryptionResult += "("; + encryptionResult += " "; + break; + case "*": + encryptionResult += ")"; + encryptionResult += " "; + break; + + case " ": + encryptionResult += " , "; + break; + + default: + throw new Error( + "linsert error only in tange [ a-z / A-Z / 0-9 / !-) ]" + ); + break; + } + } + } + } + + console.log(split_the_string); + console.log(encryptionResult); + let result = document.querySelector(".EncryptionResult") as HTMLHeadElement; + result.innerText = encryptionResult; + } catch (error) { + console.error(error); + } +}); + +// const btn = document.getElementById("btn"); + +// btn?.addEventListener("click",(event)=>{ + +// // const input: HTMLInputElement | null +// const input = document.getElementById('input') as HTMLInputElement; +// const value :string | undefined = input?.value; + +// // const reversedNum = value => parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value); + +// function reversedNum(value){ +// return (parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value)).toString(); +// } +// const reverse = reversedNum(value); + +// let result = document.getElementById("result")as HTMLHeadElement; +// result.innerHTML=reverse; + +// // input?.addEventListener('input', function (event) { +// // const target = event.target as HTMLInputElement; +// // console.log(target.value); +// // }); + +// }); + +// // function reverseNumber(reverse:number):number{ +// // return reverse; +// // }; + +// let a :string = ""; + +// const array = [ 'third', 'fourth','A','first', 'second']; +// for (let i = 0; i < array.length; i++) { +// switch (array[i]) { +// case "first" : +// console.log('This is first'); +// a+="1"; +// break; +// case 'second': +// a+="2"; +// console.log('This is second'); +// break; +// case 'third': +// a+="3"; +// console.log('This is third'); +// break; +// case 'fourth': +// a+="4"; +// console.log('This is fourth'); +// break; +// case 'A': +// a+="5"; +// console.log('This is A'); +// break; +// default: +// console.log('None'); +// break; +// } +// } +// console.log(a); +// for (var i = 0; i { +// return ar*1; +// } + +// const b:Function=function(arg){ +// return arg*2; +// } + +// function c(a){ +// return a*3; +// } + +// console.log(a(20)); +// console.log(b(20)); +// console.log(c(20)); + +// const someFunction3:Function = (ar):number=>{ +// const result = 2*ar; +// return result; +// } + +// var btn = document.getElementById('vat'); +// var input = document.getElementById('textFild').value; +// var message=document.getElementById('message'); + +// btn.addEventListener('click', (event) => { +// if(isNaN(input)){ +// message.innerHTML ='no number' + +// }else { + +// message.innerHTML ='yes number' +// } +// }); + +// // second option +// btn.addEventListener('click', (event) => { + +// if((typeof input !=='number')){ +// message.innerHTML ='no number' +// }else{ +// message.innerHTML ='is number' +// } +// }); + +// // third option +// btn.addEventListener('click', (event) => { +// var regular_expression=/[0-9]+/ig; + +// var result = regular_expression.test(input); + +// if((typeof result !== true)){ +// message.innerHTML ='no number' +// }else{ +// message.innerHTML =' number' +// } + +// }); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/dist/app.js new file mode 100644 index 000000000..e72df2bd7 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/dist/app.js @@ -0,0 +1,477 @@ +var input = document.querySelector("#input_multiplication"); +var sum = 0; +var result = 1; +var count = 0; +input.addEventListener("keypress", function (event) { + var addNum = document.querySelector(".Some_numbers_have_been_entered"); + var error_Only_3_numbers = document.querySelector(".Only_3_numbers"); + var btn = document.querySelector("#btn"); + var enter3num = document.querySelector(".The_amount_of_numbers_entered"); + try { + if (event && event.key === "Enter" && input.value !== "") { + sum++; + switch (sum) { + case 1: + var firstNumber = input.value; + var castingFirstNumber = parseInt(firstNumber); + console.log(castingFirstNumber); + addNum.textContent = "+1"; + input.value = ""; + multiplication(castingFirstNumber); + break; + case 2: + var secondNumber = input.value; + var castingSecondNumber = parseInt(secondNumber); + console.log(castingSecondNumber); + addNum.textContent = "+2"; + input.value = ""; + multiplication(castingSecondNumber); + break; + case 3: + var targetNumber = input.value; + var castingTargetNumber = parseInt(targetNumber); + console.log(castingTargetNumber); + addNum.textContent = "✔"; + enter3num.classList.add("activ"); + input.value = ""; + multiplication(castingTargetNumber); + break; + default: + throw new Error(" should be 3 numbers "); + } + } + } + catch (e) { + var error = e.toString(); + error_Only_3_numbers.textContent = error; + } + function multiplication(n) { + count++; + result = result * n; + console.log(result); + } + btn.addEventListener("click", function (event) { + if (count == 3) { + var showresult = result.toString(); + error_Only_3_numbers.textContent = showresult; + } + }); +}); +// ---------------------------------------------------------------- +// ---------------------------------------------------------------- +// ---------------------------------------------------------------- +// ---------------------------------------------------------------- +var btnEncryption = document.querySelector(".btnEncryption"); +btnEncryption.addEventListener("click", function (event) { + var _a; + var encryptionResult = ""; + var inputEncryption = (_a = document.querySelector(".inputEncryption")) === null || _a === void 0 ? void 0 : _a.value; + var split_the_string = []; + try { + if (inputEncryption) { + split_the_string = inputEncryption.split(""); + if (split_the_string) { + for (var i = 0; i < split_the_string.length; i++) { + switch (split_the_string[i]) { + case "a": + encryptionResult += "1"; + encryptionResult += " "; + break; + case "b": + encryptionResult += "2"; + encryptionResult += " "; + break; + case "c": + encryptionResult += "3"; + encryptionResult += " "; + break; + case "d": + encryptionResult += "4"; + encryptionResult += " "; + break; + case "e": + encryptionResult += "5"; + encryptionResult += " "; + break; + case "f": + encryptionResult += "6"; + encryptionResult += " "; + break; + case "g": + encryptionResult += "7"; + encryptionResult += " "; + break; + case "h": + encryptionResult += "8"; + encryptionResult += " "; + break; + case "i": + encryptionResult += "9"; + encryptionResult += " "; + break; + case "j": + encryptionResult += "10"; + encryptionResult += " "; + break; + case "k": + encryptionResult += "11"; + encryptionResult += " "; + break; + case "l": + encryptionResult += "12"; + encryptionResult += " "; + break; + case "m": + encryptionResult += "13"; + encryptionResult += " "; + break; + case "n": + encryptionResult += "14"; + encryptionResult += " "; + break; + case "o": + encryptionResult += "15"; + encryptionResult += " "; + break; + case "p": + encryptionResult += "16"; + encryptionResult += " "; + break; + case "q": + encryptionResult += "17"; + encryptionResult += " "; + break; + case "r": + encryptionResult += "18"; + encryptionResult += " "; + break; + case "s": + encryptionResult += "19"; + encryptionResult += " "; + break; + case "t": + encryptionResult += "20"; + encryptionResult += " "; + break; + case "u": + encryptionResult += "21"; + encryptionResult += " "; + break; + case "v": + encryptionResult += "22"; + encryptionResult += " "; + break; + case "w": + encryptionResult += "23"; + encryptionResult += " "; + break; + case "x": + encryptionResult += "24"; + encryptionResult += " "; + break; + case "y": + encryptionResult += "25"; + encryptionResult += " "; + break; + case "z": + encryptionResult += "26"; + encryptionResult += " "; + break; + // ------------------------------------------------ + case "A": + encryptionResult += "1"; + encryptionResult += " "; + break; + case "B": + encryptionResult += "2"; + encryptionResult += " "; + break; + case "C": + encryptionResult += "3"; + encryptionResult += " "; + break; + case "D": + encryptionResult += "4"; + encryptionResult += " "; + break; + case "E": + encryptionResult += "5"; + encryptionResult += " "; + break; + case "F": + encryptionResult += "6"; + encryptionResult += " "; + break; + case "G": + encryptionResult += "7"; + encryptionResult += " "; + break; + case "H": + encryptionResult += "8"; + encryptionResult += " "; + break; + case "I": + encryptionResult += "9"; + break; + case "J": + encryptionResult += "10"; + encryptionResult += " "; + break; + case "K": + encryptionResult += "11"; + encryptionResult += " "; + break; + case "L": + encryptionResult += "12"; + encryptionResult += " "; + break; + case "M": + encryptionResult += "13"; + encryptionResult += " "; + break; + case "N": + encryptionResult += "14"; + encryptionResult += " "; + break; + case "O": + encryptionResult += "15"; + encryptionResult += " "; + break; + case "P": + encryptionResult += "16"; + encryptionResult += " "; + break; + case "Q": + encryptionResult += "17"; + encryptionResult += " "; + break; + case "R": + encryptionResult += "18"; + encryptionResult += " "; + break; + case "S": + encryptionResult += "19"; + encryptionResult += " "; + break; + case "T": + encryptionResult += "20"; + encryptionResult += " "; + break; + case "U": + encryptionResult += "21"; + encryptionResult += " "; + break; + case "V": + encryptionResult += "22"; + encryptionResult += " "; + break; + case "W": + encryptionResult += "23"; + encryptionResult += " "; + break; + case "X": + encryptionResult += "24"; + encryptionResult += " "; + break; + case "Y": + encryptionResult += "25"; + encryptionResult += " "; + break; + case "Z": + encryptionResult += "26"; + encryptionResult += " "; + break; + // --------------------------------- + case "1": + encryptionResult += "A"; + encryptionResult += " "; + break; + case "2": + encryptionResult += "B"; + encryptionResult += " "; + break; + case "3": + encryptionResult += "C"; + encryptionResult += " "; + break; + case "4": + encryptionResult += "D"; + encryptionResult += " "; + break; + case "5": + encryptionResult += "E"; + encryptionResult += " "; + break; + case "6": + encryptionResult += "F"; + encryptionResult += " "; + break; + case "7": + encryptionResult += "G"; + encryptionResult += " "; + break; + case "8": + encryptionResult += "H"; + encryptionResult += " "; + break; + case "9": + encryptionResult += "I"; + encryptionResult += " "; + break; + // ------------------------------- + case "!": + encryptionResult += "!"; + encryptionResult += " "; + break; + case "@": + encryptionResult += "@"; + encryptionResult += " "; + break; + case "#": + encryptionResult += "#"; + encryptionResult += " "; + break; + case "$": + encryptionResult += "$"; + encryptionResult += " "; + break; + case "%": + encryptionResult += "%"; + encryptionResult += " "; + break; + case "^": + encryptionResult += "^"; + encryptionResult += " "; + break; + case "&": + encryptionResult += "&"; + encryptionResult += " "; + break; + case "*": + encryptionResult += "*"; + encryptionResult += " "; + break; + case "(": + encryptionResult += "("; + encryptionResult += " "; + break; + case "*": + encryptionResult += ")"; + encryptionResult += " "; + break; + case " ": + encryptionResult += " , "; + break; + default: + throw new Error("linsert error only in tange [ a-z / A-Z / 0-9 / !-) ]"); + break; + } + } + } + } + console.log(split_the_string); + console.log(encryptionResult); + var result_1 = document.querySelector(".EncryptionResult"); + result_1.innerText = encryptionResult; + } + catch (error) { + console.error(error); + } +}); +// const btn = document.getElementById("btn"); +// btn?.addEventListener("click",(event)=>{ +// // const input: HTMLInputElement | null +// const input = document.getElementById('input') as HTMLInputElement; +// const value :string | undefined = input?.value; +// // const reversedNum = value => parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value); +// function reversedNum(value){ +// return (parseFloat(value.toString().split('').reverse().join('')) * Math.sign(value)).toString(); +// } +// const reverse = reversedNum(value); +// let result = document.getElementById("result")as HTMLHeadElement; +// result.innerHTML=reverse; +// // input?.addEventListener('input', function (event) { +// // const target = event.target as HTMLInputElement; +// // console.log(target.value); +// // }); +// }); +// // function reverseNumber(reverse:number):number{ +// // return reverse; +// // }; +// let a :string = ""; +// const array = [ 'third', 'fourth','A','first', 'second']; +// for (let i = 0; i < array.length; i++) { +// switch (array[i]) { +// case "first" : +// console.log('This is first'); +// a+="1"; +// break; +// case 'second': +// a+="2"; +// console.log('This is second'); +// break; +// case 'third': +// a+="3"; +// console.log('This is third'); +// break; +// case 'fourth': +// a+="4"; +// console.log('This is fourth'); +// break; +// case 'A': +// a+="5"; +// console.log('This is A'); +// break; +// default: +// console.log('None'); +// break; +// } +// } +// console.log(a); +// for (var i = 0; i { +// return ar*1; +// } +// const b:Function=function(arg){ +// return arg*2; +// } +// function c(a){ +// return a*3; +// } +// console.log(a(20)); +// console.log(b(20)); +// console.log(c(20)); +// const someFunction3:Function = (ar):number=>{ +// const result = 2*ar; +// return result; +// } +// var btn = document.getElementById('vat'); +// var input = document.getElementById('textFild').value; +// var message=document.getElementById('message'); +// btn.addEventListener('click', (event) => { +// if(isNaN(input)){ +// message.innerHTML ='no number' +// }else { +// message.innerHTML ='yes number' +// } +// }); +// // second option +// btn.addEventListener('click', (event) => { +// if((typeof input !=='number')){ +// message.innerHTML ='no number' +// }else{ +// message.innerHTML ='is number' +// } +// }); +// // third option +// btn.addEventListener('click', (event) => { +// var regular_expression=/[0-9]+/ig; +// var result = regular_expression.test(input); +// if((typeof result !== true)){ +// message.innerHTML ='no number' +// }else{ +// message.innerHTML =' number' +// } +// }); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/index.html new file mode 100644 index 000000000..c9e9a38a6 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/Shlomo-Azenkot/index.html @@ -0,0 +1,326 @@ + + + + + + + Document + + + + +
    +
    +

    Enter 3 Numbers ("enter to add")

    +

    + +

    + +
    +

    +0

    +
    +
    + +

    +
    +
    +




















    + +
    +

    + E + n + c + o + d + e + n + 🕵🏿‍♂ +

    +

    +
    + +

    +

    +

    +
    +
    + + + + + + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/dist/index.js new file mode 100644 index 000000000..8b2ce03a9 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/dist/index.js @@ -0,0 +1,23 @@ +var threeNumbers = function (num1, num2, num3) { + try { + if (typeof num1 !== "number" || + typeof num2 !== "number" || + typeof num3 !== "number") { + throw new Error("not a number"); + } + return num1 * num2 * num3; + } + catch (error) { + console.error(error); + return false; + } +}; +var numberAllow = true; +function main() { + var num1 = prompt("what is your first number"); + var num2 = prompt("what is your second number"); + var num3 = prompt("what is your third number"); + var result = threeNumbers(parseInt(num1), parseInt(num2), parseInt(num3)); + console.log(result); +} +main(); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/index.ts new file mode 100644 index 000000000..fa87844d2 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/TomerCohen/index.ts @@ -0,0 +1,30 @@ +const threeNumbers: Function = ( + num1: number, + num2: number, + num3: number +): number | false => { + try { + if ( + typeof num1 !== `number` || + typeof num2 !== `number` || + typeof num3 !== `number` + ) { + throw new Error(`not a number`); + } + return num1 * num2 * num3; + } catch (error) { + console.error(error); + return false; + } +}; + +let numberAllow = true; +function main() { + const num1: any = prompt("what is your first number"); + const num2: any = prompt("what is your second number"); + const num3: any = prompt("what is your third number"); + + const result= threeNumbers(parseInt(num1), parseInt(num2), parseInt(num3)); + console.log(result); +} +main() diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/app.ts new file mode 100644 index 000000000..ac9f970e2 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/app.ts @@ -0,0 +1,84 @@ +const message = document.querySelector("#message") as HTMLInputElement; +const encryptionCode = document.querySelector( + "#encryptionCode" +) as HTMLInputElement; +const output = document.querySelector("#output") as HTMLHeadElement; +const encryptCheckbox = document.querySelector("#encrypt") as HTMLInputElement; +const decryptCheckbox = document.querySelector("#decrypt") as HTMLInputElement; + +// const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +// const encryption_Code = "JTREKYAVOGDXPSNCUIZLFBMWHQ"; + +function encrypt(userInput: string): any { + try { + let encytedToNum = ""; + + for (let i = 0; i < userInput.length; i++) { + // check for space + if (userInput[i] == " ") { + encytedToNum += "- "; + } + // check if letter is capital + else if (userInput[i].toUpperCase() == userInput[i]) { + encytedToNum += (userInput.charCodeAt(i) - 65).toString(); + encytedToNum += " "; + } else { + encytedToNum += (userInput.charCodeAt(i) - 97).toString(); + encytedToNum += " "; + } + } + return encytedToNum; + } catch (error) { + return console.error(error); + } +} + +function decrypt(encryptedMessage: string): any { + try { + let decryptBackToString = ""; + //convert code string to an array + const textArr = encryptedMessage.split(" "); + for (let i = 0; i < textArr.length; i++) { + if (textArr[i] == "-") { + decryptBackToString += " "; + } else if (textArr[i] == "") { + decryptBackToString += ""; + } else { + decryptBackToString += String.fromCharCode(parseInt(textArr[i]) + 65); + } + } + return decryptBackToString; + } catch (error) { + console.error(error); + return false; + } +} + +window.addEventListener("keydown", (e) => { + e.preventDefault; + + if (e.key == "Enter") { + if (message.value.length > 5 && message.value != "") { + if ( + encryptCheckbox.checked && + !decryptCheckbox.checked && + !/\d/.test(message.value) + ) { + output.textContent = encrypt(message.value); + message.value = ''; + } else if ( + !encryptCheckbox.checked && + decryptCheckbox.checked && + /\d/.test(message.value) + ) { + output.textContent = decrypt(message.value); + message.value = ''; + } else { + output.textContent = "Value input isn't correct (make sure you check the correct checkbox)"; + } + } + } +}); + +console.log(encrypt("Encrypt This MeSsage")); +console.log(decrypt(encrypt("Encrypt This MeSsage"))); \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/dist/app.js new file mode 100644 index 000000000..4f55123f2 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/dist/app.js @@ -0,0 +1,78 @@ +var message = document.querySelector("#message"); +var encryptionCode = document.querySelector("#encryptionCode"); +var output = document.querySelector("#output"); +var encryptCheckbox = document.querySelector("#encrypt"); +var decryptCheckbox = document.querySelector("#decrypt"); +// const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +// const encryption_Code = "JTREKYAVOGDXPSNCUIZLFBMWHQ"; +function encrypt(userInput) { + try { + var encytedToNum = ""; + for (var i = 0; i < userInput.length; i++) { + // check for space + if (userInput[i] == " ") { + encytedToNum += "- "; + } + // check if letter is capital + else if (userInput[i].toUpperCase() == userInput[i]) { + encytedToNum += (userInput.charCodeAt(i) - 65).toString(); + encytedToNum += " "; + } + else { + encytedToNum += (userInput.charCodeAt(i) - 97).toString(); + encytedToNum += " "; + } + } + return encytedToNum; + } + catch (error) { + return console.error(error); + } +} +function decrypt(encryptedMessage) { + try { + var decryptBackToString = ""; + //convert code string to an array + var textArr = encryptedMessage.split(" "); + for (var i = 0; i < textArr.length; i++) { + if (textArr[i] == "-") { + decryptBackToString += " "; + } + else if (textArr[i] == "") { + decryptBackToString += ""; + } + else { + decryptBackToString += String.fromCharCode(parseInt(textArr[i]) + 65); + } + } + return decryptBackToString; + } + catch (error) { + console.error(error); + return false; + } +} +window.addEventListener("keydown", function (e) { + e.preventDefault; + if (e.key == "Enter") { + if (message.value.length > 5 && message.value != "") { + if (encryptCheckbox.checked && + !decryptCheckbox.checked && + !/\d/.test(message.value)) { + output.textContent = encrypt(message.value); + message.value = ''; + } + else if (!encryptCheckbox.checked && + decryptCheckbox.checked && + /\d/.test(message.value)) { + output.textContent = decrypt(message.value); + message.value = ''; + } + else { + output.textContent = "Value input isn't correct (make sure you check the correct checkbox)"; + } + } + } +}); +console.log(encrypt("Encrypt This MeSsage")); +console.log(decrypt(encrypt("Encrypt This MeSsage"))); diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/dist/style.css b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/dist/style.css new file mode 100644 index 000000000..83d1c3113 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/dist/style.css @@ -0,0 +1,30 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +input[type=text] { + width: 30vw; + min-width: 300px; + padding: 0.5em 0; + margin-bottom: 2em; +} + +.chackboxes { + width: 20vw; + min-width: 250px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em; + font-size: 1.3rem; +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/index.html new file mode 100644 index 000000000..2f493d14f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/index.html @@ -0,0 +1,38 @@ + + + + + + + encrypt message + + + + + +
    +
    + + +
    +
    + + +
    +
    + +

    Encrypted message will be displayed here

    + + + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/style.css b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/style.css new file mode 100644 index 000000000..83d1c3113 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/style.css @@ -0,0 +1,30 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +input[type=text] { + width: 30vw; + min-width: 300px; + padding: 0.5em 0; + margin-bottom: 2em; +} + +.chackboxes { + width: 20vw; + min-width: 250px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em; + font-size: 1.3rem; +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/style.scss b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/style.scss new file mode 100644 index 000000000..9f1f4e2f9 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/VladiBykanov/style.scss @@ -0,0 +1,31 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +input[type='text']{ + width: 30vw; + min-width: 300px; + padding: .5em 0; + margin-bottom: 2em; +} + +.chackboxes{ + // border: 1px solid black; + width: 20vw; + min-width: 250px; + display: flex; + justify-content: space-between; + align-items: center; + padding: .5em; + font-size: 1.3rem; +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/dist/insex.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/dist/insex.js new file mode 100644 index 000000000..a4b4b0c41 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/dist/insex.js @@ -0,0 +1,19 @@ +// level 1 +var multiplication = function (num1, num2, num3) { + try { + if (typeof num1 !== 'number' || null && typeof num2 !== 'number' || null && typeof num3 !== 'number' || null) { + throw new Error("you have entered an invaild value"); + } + return num1 * num2 * num3; + } + catch (error) { + console.error(error); + } +}; +// let result = true +// while(result){ +// const q1= prompt("pick your first number") +// const q2= prompt("pick your second number") +// const q3= prompt("pick your last number") +// if () +// } diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/index.html new file mode 100644 index 000000000..cb653df1d --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/insex.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/insex.ts new file mode 100644 index 000000000..32bf3443e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/angela/insex.ts @@ -0,0 +1,18 @@ +// level 1 +const multiplication =(num1:number,num2:number,num3:number) =>{ + try { + if (typeof num1!=='number'||null && typeof num2!=='number' || null && typeof num3!=='number' ||null ) { + throw new Error("you have entered an invaild value") + } + return num1*num2*num3 + } catch (error) { + console.error(error) + } +} +// let result = true +// while(result){ +// const q1= prompt("pick your first number") +// const q2= prompt("pick your second number") +// const q3= prompt("pick your last number") +// if () +// } diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/dist/index.js new file mode 100644 index 000000000..3906b83cd --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/dist/index.js @@ -0,0 +1,76 @@ +// //h.w exercise-1 +// const multiplicationNumbers: Function = (num1, num2, num3): number | false => { +// try { +// if ((typeof num1 !== 'number') || +// (typeof num2 !== 'number') || +// (typeof num3 !== 'number')) { +// throw new Error("The variables should be a numbers"); +// } +// const result: number = num1 * num2 * num3 +// return result +// } catch (error) { +// console.error(error) +// return false +// } +// } +// const num1 = prompt(" enter the first number") +// const num2 = prompt("enter the second number ") +// const num3 = prompt("enter the third number") +// console.log(multiplicationNumbers(num1, num2, num3)) +// if (num1 !== null || num2 !== null || num3 !== null) { +// if ((typeof num1 == 'number') && +// (typeof num2 == 'number') && +// (typeof num3 == 'number')) { +// alert("good, you enter a numbers") +// } +// else { alert("you should enter anumber") } +// } +// else { +// alert("you should enter anumber") +// } +//execise 2 +var abcToCode = prompt("Please enter the message to encrypt"); +console.log("" + letterValue(abcToCode)); +function letterValue(abcToCode) { + var encriptDictionary = { + a: 1, + b: 2, + c: 3, + d: 4, + e: 5, + f: 6, + g: 7, + h: 8, + i: 9, + j: 10, + k: 11, + l: 12, + m: 13, + n: 14, + o: 15, + p: 16, + q: 17, + r: 18, + s: 19, + t: 20, + u: 21, + v: 22, + w: 23, + x: 24, + y: 25, + z: 26 + }; + try { + if (abcToCode.length === 1) { + return encriptDictionary[abcToCode] || ""; + } + if (abcToCode == undefined) { + throw new Error("We can't encrypt your message"); + } + return abcToCode.split("").map(letterValue); + } + catch (error) { + console.error("If you don't type how will you encrypt?"); + return false; + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/index.ts new file mode 100644 index 000000000..706105379 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/aviva-elias/index.ts @@ -0,0 +1,88 @@ +// //h.w exercise-1 + +// const multiplicationNumbers: Function = (num1, num2, num3): number | false => { +// try { +// if ((typeof num1 !== 'number') || +// (typeof num2 !== 'number') || +// (typeof num3 !== 'number')) { +// throw new Error("The variables should be a numbers"); +// } +// const result: number = num1 * num2 * num3 +// return result + +// } catch (error) { +// console.error(error) +// return false +// } + +// } + +// const num1 = prompt(" enter the first number") +// const num2 = prompt("enter the second number ") +// const num3 = prompt("enter the third number") + +// console.log(multiplicationNumbers(num1, num2, num3)) +// if (num1 !== null || num2 !== null || num3 !== null) { +// if ((typeof num1 == 'number') && +// (typeof num2 == 'number') && +// (typeof num3 == 'number')) { + +// alert("good, you enter a numbers") +// } +// else { alert("you should enter anumber") } + +// } +// else { +// alert("you should enter anumber") +// } + +//execise 2 +const abcToCode: any = prompt(`Please enter the message to encrypt`); + console.log(`${letterValue(abcToCode)}`); + +function letterValue(abcToCode: string) { + const encriptDictionary = { + a: 1, + b: 2, + c: 3, + d: 4, + e: 5, + f: 6, + g: 7, + h: 8, + i: 9, + j: 10, + k: 11, + l: 12, + m: 13, + n: 14, + o: 15, + p: 16, + q: 17, + r: 18, + s: 19, + t: 20, + u: 21, + v: 22, + w: 23, + x: 24, + y: 25, + z: 26, + }; + try { + if (abcToCode.length === 1) { + return encriptDictionary[abcToCode] || ""; + } + if ( abcToCode ==undefined ) { + throw new Error("We can't encrypt your message"); + } + + return abcToCode.split("").map(letterValue); + } catch (error) { + console.error(`If you don't type how will you encrypt?`); + return false; + } + } + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/dist/index.js new file mode 100644 index 000000000..4e109f71e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/dist/index.js @@ -0,0 +1,85 @@ +while (true) { + var deOrEncrypt = prompt("do you wish to encrypt or decrypt"); + var message = prompt("enter what you wish to encrypt/decrypt"); + if (deOrEncrypt == "decrypt") { + if (message) { + alert(unJoeMachine(message)); + } + } + else { + if (message) { + alert(joeMachine(message)); + } + } +} +function joeMachine(unencryptedMsg) { + try { + var encryptedMsg = [unencryptedMsg.length]; + console.log(typeof (encryptedMsg)); + for (var index = 0; index < unencryptedMsg.length; index++) { + switch (index % 8) { + case 1: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 5); + break; + case 2: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 10); + break; + case 3: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 3); + break; + case 4: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 7); + break; + case 5: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 5); + break; + case 6: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 1); + break; + default: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 3); + break; + } + } + return encryptedMsg.join(''); + } + catch (_a) { + console.error("unexpected input"); + return "an unexpected error has occured please try again"; + } +} +function unJoeMachine(unencryptedMsg) { + try { + var encryptedMsg = [unencryptedMsg.length]; + for (var index = 0; index < unencryptedMsg.length; index++) { + switch (index % 8) { + case 1: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 5); + break; + case 2: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 10); + break; + case 3: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 3); + break; + case 4: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 7); + break; + case 5: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) + 5); + break; + case 6: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 1); + break; + default: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index) - 3); + break; + } + } + return encryptedMsg.join(''); + } + catch (_a) { + console.error("unexpected input"); + return "an unexpected error has occured please try again"; + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/index.html new file mode 100644 index 000000000..d43de7b17 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + joe biden + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/index.ts new file mode 100644 index 000000000..26e35b4a4 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/idan/index.ts @@ -0,0 +1,92 @@ + + +while(true){ + const deOrEncrypt:string|null= prompt(`do you wish to encrypt or decrypt`); + const message:string|null = prompt(`enter what you wish to encrypt/decrypt`); + if(deOrEncrypt == `decrypt`){ + if(message){ + alert(unJoeMachine(message)) + } + } + else{ + if(message){ + alert(joeMachine(message)); + } + } +} + +function joeMachine(unencryptedMsg:string):string{ + try{ + let encryptedMsg:any = [unencryptedMsg.length]; + console.log(typeof(encryptedMsg)) + for (let index = 0; index < unencryptedMsg.length; index++) { + switch (index%8){ + case 1: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+5); + break; + case 2: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-10); + break; + case 3: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-3); + break; + case 4: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+7); + break; + case 5: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-5); + break; + case 6: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+1); + break; + default: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+3); + break; + + } + } + + return encryptedMsg.join(''); + } + catch{ + console.error(`unexpected input`) + return `an unexpected error has occured please try again` + } +} +function unJoeMachine(unencryptedMsg:string):string{ + try{ + let encryptedMsg:any = [unencryptedMsg.length]; + for (let index = 0; index < unencryptedMsg.length; index++) { + switch (index%8){ + case 1: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-5); + break; + case 2: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+10); + break; + case 3: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+3); + break; + case 4: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-7); + break; + case 5: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)+5); + break; + case 6: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-1); + break; + default: + encryptedMsg[index] = String.fromCharCode(unencryptedMsg.charCodeAt(index)-3); + break; + + } + } + + return encryptedMsg.join(''); + } + catch{ + console.error(`unexpected input`) + return `an unexpected error has occured please try again` + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/instructions.md b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/instructions.md new file mode 100644 index 000000000..97ee8e4e8 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/instructions.md @@ -0,0 +1,8 @@ +1) Create a function that gets three numbers, multiplies them with each other, and returns the multiplication. Make sure with try-catch that all three numbers are numbers. +Get the three numbers from the user and print for the user the result of the function. + +2) create a function that encrypts a word to numbers (e.g., hi -> 89) (h is 8th in the alphabet order, i is 9th in the alphabetic order). Check to see that only letters were entered. +let the user enter a message, and then return for her the encrypted code. + +3) create the function in puzzle 2, but add another argument that tells the function to encrypt (letter to numbers) or decrypt (numbers to letters). If you want to challenge yourself, create a better encryption method. +let the user enter a message, and then return for her the encrypted code. let here also decrypt a massege. diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/dist/index.js new file mode 100644 index 000000000..2bc64b5f0 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/dist/index.js @@ -0,0 +1,77 @@ +// // // Question 1 +var threeNumbers = function (x, y, z) { + try { + if (typeof x !== 'number' || + typeof y !== 'number' || + typeof z !== 'number') { + throw new Error("error is not a number"); + } + return x * y * z; + } + catch (Error) { + alert("Can't do a calculation, There must be 3 numbers to calculate"); + console.error(Error); + return false; + } +}; +var calculation = true; +var x = prompt("Enter a Number 1"); +var y = prompt("Enter a Number 2"); +var z = prompt("Enter a Number 3"); +console.log(x * y * z); +if (x !== null && y !== null && z !== null) { + if (threeNumbers(parseInt(x), parseInt(y), parseInt(z))) { + alert("The answer is " + x * y * z); + calculation = false; + } +} +else { + alert("Can't do a calculation, There must be 3 numbers to calculate"); +} +// Question 2 +function letterValue(abcToCode) { + var encriptDictionary = { + a: 1, + b: 2, + c: 3, + d: 4, + e: 5, + f: 6, + g: 7, + h: 8, + i: 9, + j: 10, + k: 11, + l: 12, + m: 13, + n: 14, + o: 15, + p: 16, + q: 17, + r: 18, + s: 19, + t: 20, + u: 21, + v: 22, + w: 23, + x: 24, + y: 25, + z: 26 + }; + try { + if (abcToCode.length === 1) { + return encriptDictionary[abcToCode] || ''; + } + if (typeof abcToCode === "number") { + throw new Error("We can't encrypt your message"); + } + return abcToCode.split('').map(letterValue); + } + catch (error) { + console.error("If you don't type how will you encrypt?"); + return false; + } +} +var abcToCode = prompt("Please enter the message to encrypt"); +console.log("" + letterValue(abcToCode)); +// https://github.com/talyaron/FullStack-INT-2022-Oct/tree/main/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/index.ts new file mode 100644 index 000000000..313e6f6be --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi/index.ts @@ -0,0 +1,94 @@ +// // // Question 1 +const threeNumbers: Function = ( + x: number, + y: number, + z: number, +): number | false => { + try { + if ( + typeof x !== 'number' || + typeof y !== 'number' || + typeof z !== 'number' + ) { + throw new Error(`error is not a number`) + } + return x * y * z + } catch (Error) { + alert(`Can't do a calculation, There must be 3 numbers to calculate`) + console.error(Error) + return false + } +} +let calculation = true +const x: any = prompt(`Enter a Number 1`) +const y: any = prompt(`Enter a Number 2`) +const z: any = prompt(`Enter a Number 3`) +console.log(x * y * z) +if (x !== null && y !== null && z !== null) { + if (threeNumbers(parseInt(x), parseInt(y), parseInt(z))) { + alert(`The answer is ${x * y * z}`) + calculation = false + } +} else { + alert(`Can't do a calculation, There must be 3 numbers to calculate`) +} + + + +// Question 2 + +function letterValue(abcToCode: string) { + const encriptDictionary = { + a: 1, + b: 2, + c: 3, + d: 4, + e: 5, + f: 6, + g: 7, + h: 8, + i: 9, + j: 10, + k: 11, + l: 12, + m: 13, + n: 14, + o: 15, + p: 16, + q: 17, + r: 18, + s: 19, + t: 20, + u: 21, + v: 22, + w: 23, + x: 24, + y: 25, + z: 26, + } + try { + if (abcToCode.length === 1) { + return encriptDictionary[abcToCode] || '' + } + if (typeof abcToCode === `number`) { + throw new Error("We can't encrypt your message") + } + + return abcToCode.split('').map(letterValue) + } catch (error) { + console.error(`If you don't type how will you encrypt?`) + return false + } +} + +const abcToCode: any = prompt(`Please enter the message to encrypt`) +console.log(`${letterValue(abcToCode)}`) + + + + + + + + +// https://github.com/talyaron/FullStack-INT-2022-Oct/tree/main/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/itayAmosi diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/app.ts new file mode 100644 index 000000000..88ab09092 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/app.ts @@ -0,0 +1,24 @@ +function Multiplication(x: any ,y:any ,z:any): number | false { + try { + if(isNaN(x) || isNaN(y) || isNaN(z)){ + throw new Error('Argument should be a number'); + } + return x * y * z; + } catch (error) { + console.error(error); + return false; + } + } + + const answer1 = prompt("give me a number please"); + const answer2 = prompt("give me a number please"); + const answer3 = prompt("give me a number please"); + + const result = Multiplication(answer1,answer2,answer3); + + if (result && !isNaN(result)) { + alert(`Your number returned as ${result}`); + } else { + alert("we have an error"); + } + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/dist/app.js new file mode 100644 index 000000000..273ac0f78 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/dist/app.js @@ -0,0 +1,22 @@ +function Multiplication(x, y, z) { + try { + if (isNaN(x) || isNaN(y) || isNaN(z)) { + throw new Error('Argument should be a number'); + } + return x * y * z; + } + catch (error) { + console.error(error); + return false; + } +} +var answer1 = prompt("give me a number please"); +var answer2 = prompt("give me a number please"); +var answer3 = prompt("give me a number please"); +var result = Multiplication(answer1, answer2, answer3); +if (result && !isNaN(result)) { + alert("Your number returned as " + result); +} +else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/john-ben/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..e77818a4d --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/dist/index.js @@ -0,0 +1,111 @@ +var msgEncpt = prompt("Enter the message you want to encrypt:"); +if (!msgEncpt) { + alert("you don't enter a value"); +} +else { + var msgEncrypt = encrypt(msgEncpt); + if (msgEncrypt != false) { + alert("your encrypted message is: " + msgEncrypt); + } + else { + alert("We can't encrypt your message :("); + } +} +function encrypt(msg) { + try { + msg = msg.toLowerCase(); + var encryptMsg = ""; + for (var i = 0; i < msg.length; i++) { + switch (msg.charAt(i)) { + case "a": + encryptMsg += "1 "; + break; + case "b": + encryptMsg += "2 "; + break; + case "c": + encryptMsg += "3 "; + break; + case "d": + encryptMsg += "4 "; + break; + case "e": + encryptMsg += "5 "; + break; + case "f": + encryptMsg += "6 "; + break; + case "g": + encryptMsg += "7 "; + break; + case "h": + encryptMsg += "8 "; + break; + case "i": + encryptMsg += "9 "; + break; + case "j": + encryptMsg += "10 "; + break; + case "k": + encryptMsg += "11 "; + break; + case "l": + encryptMsg += "12 "; + break; + case "m": + encryptMsg += "13 "; + break; + case "n": + encryptMsg += "14 "; + break; + case "o": + encryptMsg += "15 "; + break; + case "p": + encryptMsg += "16 "; + break; + case "q": + encryptMsg += "17 "; + break; + case "r": + encryptMsg += "18 "; + break; + case "s": + encryptMsg += "19 "; + break; + case "t": + encryptMsg += "20 "; + break; + case "u": + encryptMsg += "21 "; + break; + case "v": + encryptMsg += "22 "; + break; + case "w": + encryptMsg += "23 "; + break; + case "x": + encryptMsg += "24 "; + break; + case "y": + encryptMsg += "25 "; + break; + case "z": + encryptMsg += "26 "; + break; + case " ": + encryptMsg += " "; + break; + default: + throw new Error('your message can not be encrypt because of an unknow value'); + } + } + return encryptMsg; + } + catch (error) { + console.error('your message can not be encrypt because of an unknow value'); + return false; + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/index.html new file mode 100644 index 000000000..41b67a3d3 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..9a8132966 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/index.ts @@ -0,0 +1,111 @@ +const msgEncpt= prompt ("Enter the message you want to encrypt:"); +if (!msgEncpt){ + alert(`you don't enter a value`); +} else { + const msgEncrypt= encrypt(msgEncpt); + if (msgEncrypt!=false){ + alert(`your encrypted message is: ${msgEncrypt}`); + } else { + alert(`We can't encrypt your message :(`); + } +} + +function encrypt (msg:string):string | false{ + try { + msg= msg.toLowerCase(); + let encryptMsg=""; + for (let i=0;i< msg.length ;i++){ + switch (msg.charAt(i)){ + case "a": + encryptMsg+="1 "; + break; + case "b": + encryptMsg+="2 "; + break; + case "c": + encryptMsg+="3 "; + break; + case "d": + encryptMsg+="4 "; + break; + case "e": + encryptMsg+="5 "; + break; + case "f": + encryptMsg+="6 "; + break; + case "g": + encryptMsg+="7 "; + break; + case "h": + encryptMsg+="8 "; + break; + case "i": + encryptMsg+="9 "; + break; + case "j": + encryptMsg+="10 "; + break; + case "k": + encryptMsg+="11 "; + break; + case "l": + encryptMsg+="12 "; + break; + case "m": + encryptMsg+="13 "; + break; + case "n": + encryptMsg+="14 "; + break; + case "o": + encryptMsg+="15 "; + break; + case "p": + encryptMsg+="16 "; + break; + case "q": + encryptMsg+="17 "; + break; + case "r": + encryptMsg+="18 "; + break; + case "s": + encryptMsg+="19 "; + break; + case "t": + encryptMsg+="20 "; + break; + case "u": + encryptMsg+="21 "; + break; + case "v": + encryptMsg+="22 "; + break; + case "w": + encryptMsg+="23 "; + break; + case "x": + encryptMsg+="24 "; + break; + case "y": + encryptMsg+="25 "; + break; + case "z": + encryptMsg+="26 "; + break; + case " ": + encryptMsg+=" "; + break; + default: + throw new Error('your message can not be encrypt because of an unknow value'); + } + } + return encryptMsg; + } catch (error) { + console.error('your message can not be encrypt because of an unknow value'); + return false; + } +} + + diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/try b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/try new file mode 100644 index 000000000..384e20bcf --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/noa-meillet/try @@ -0,0 +1,265 @@ +/* +const questionMsg= prompt ("Enter the method you want to interpretate your message:", "enter encrypt or decrypt"); +if (questionMsg== "encrypt"){ + const msgEncpt= prompt ("Enter one word you want to encrypt:"); + if (!msgEncpt){ + alert(`you don't enter a value`); + } else { + const msgEncrypt= encrypt(msgEncpt); + if (msgEncrypt!=false){ + alert(`your encrypted message is: ${msgEncrypt}`); + } else { + alert(`We can't encrypt your message :(`); + } + } +} else if (questionMsg== "decrypt"){ + const msgDecpt= prompt ("Enter one message you want to decrypt, the message need to be numbers between 1 to 26 with a space between each number:","example: 1 5 24 18 9"); + if (!msgDecpt){ + alert(`you don't enter a value`); + } else { + const msgDecrypt= decrypt(msgDecpt); + if (msgDecrypt!=false){ + alert(`your decrypted message is: ${msgDecrypt}`); + } else { + alert(`We can't decrypt your message :(`); + } + } +} else { + alert(`we do not receive a correct value`); +} + +function encrypt (msg:string):string | false{ + try { + msg= msg.toLowerCase(); + let encryptMsg=""; + for (let i=0;i< msg.length ;i++){ + switch (msg.charAt(i)){ + case "a": + encryptMsg+="1 "; + break; + case "b": + encryptMsg+="2 "; + break; + case "c": + encryptMsg+="3 "; + break; + case "d": + encryptMsg+="4 "; + break; + case "e": + encryptMsg+="5 "; + break; + case "f": + encryptMsg+="6 "; + break; + case "g": + encryptMsg+="7 "; + break; + case "h": + encryptMsg+="8 "; + break; + case "i": + encryptMsg+="9 "; + break; + case "j": + encryptMsg+="10 "; + break; + case "k": + encryptMsg+="11 "; + break; + case "l": + encryptMsg+="12 "; + break; + case "m": + encryptMsg+="13 "; + break; + case "n": + encryptMsg+="14 "; + break; + case "o": + encryptMsg+="15 "; + break; + case "p": + encryptMsg+="16 "; + break; + case "q": + encryptMsg+="17 "; + break; + case "r": + encryptMsg+="18 "; + break; + case "s": + encryptMsg+="19 "; + break; + case "t": + encryptMsg+="20 "; + break; + case "u": + encryptMsg+="21 "; + break; + case "v": + encryptMsg+="22 "; + break; + case "w": + encryptMsg+="23 "; + break; + case "x": + encryptMsg+="24 "; + break; + case "y": + encryptMsg+="25 "; + break; + case "z": + encryptMsg+="26 "; + break; + default: + throw new Error('your message can not be encrypt because of an unknow value'); + } + } + return encryptMsg; + } catch (error) { + console.error('your message can not be encrypt because of an unknow value'); + return false; + } +} + + +function decrypt(msg:string):string | false { + try { + let msgChar=msg.charAt(0); + let decryptMsg=""; + if (msg.length==1){ + switch(msgChar){ + case "1": + decryptMsg+="a"; + break; + case "2": + decryptMsg+="b"; + break; + case "3": + decryptMsg+="c"; + break; + case "4": + decryptMsg+="d"; + break; + case "5": + decryptMsg+="e"; + break; + case "6": + decryptMsg+="f"; + break; + case "7": + decryptMsg+="g"; + break; + case "8": + decryptMsg+="h"; + break; + case "9": + decryptMsg+="i"; + break; + default: + throw new Error('your message can not be encrypt because of an unknow value'); + } + return decryptMsg; + } else { + for (let i=1; i< msg.length; i++){ + if (msg.charAt(i) == " "){ + msgChar=""; + } else { + msgChar+=msg.charAt(i); + } + switch(msgChar){ + case "1": + decryptMsg+="a"; + break; + case "2": + decryptMsg+="b"; + break; + case "3": + decryptMsg+="c"; + break; + case "4": + decryptMsg+="d"; + break; + case "5": + decryptMsg+="e"; + break; + case "6": + decryptMsg+="f"; + break; + case "7": + decryptMsg+="g"; + break; + case "8": + decryptMsg+="h"; + break; + case "9": + decryptMsg+="i"; + break; + case "10": + decryptMsg+="j"; + break; + case "11": + decryptMsg+="k"; + break; + case "12": + decryptMsg+="l"; + break; + case "13": + decryptMsg+="m"; + break; + case "14": + decryptMsg+="n"; + break; + case "15": + decryptMsg+="o"; + break; + case "16": + decryptMsg+="p"; + break; + case "17": + decryptMsg+="q"; + break; + case "18": + decryptMsg+="r"; + break; + case "19": + decryptMsg+="s"; + break; + case "20": + decryptMsg+="t"; + break; + case "21": + decryptMsg+="u"; + break; + case "22": + decryptMsg+="v"; + break; + case "23": + decryptMsg+="w"; + break; + case "24": + decryptMsg+="x"; + break; + case "25": + decryptMsg+="y"; + break; + case "26": + decryptMsg+="z"; + break; + case "": + msgChar=""; + break; + default: + throw new Error('your message can not be encrypt because of an unknow value'); + } + msgChar=""; + } + } + return decryptMsg; + } catch (error) { + console.error('your message can not be encrypt because of an unknow value'); + return false; + } +} +*/ \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/app.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/app.ts new file mode 100644 index 000000000..644b70946 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/app.ts @@ -0,0 +1,35 @@ +"use strict"; + +// Create a function that gets three numbers, +// multiplies them with each other, and returns the multiplication. +// Make sure with try-catch that all three numbers are numbers. +// Get the three numbers from the user and print for the user +// the result of the function. + +function multiplication(number1, number2, number3: any): number | false { + try { + if ( + typeof number1 !== "number" || + typeof number2 !== "number" || + typeof number3 !== "number" + ) { + throw new Error("One of the arguments is not a number"); + } + + return number1 * number2 * number3; + } catch (error) { + console.error(error); + return false; + } +} + +const num1 = prompt("Enter a number please"); +const num2 = prompt("Enter another number please"); +const num3 = prompt("Enter another one please"); + +const result = multiplication(parseInt(num1), parseInt(num2), parseInt(num3)); +if (result && !isNaN(result)) { + alert(`the multiplication of the three numbers is ${result}`); +} else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/dist/app.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/dist/app.js new file mode 100644 index 000000000..9e98c482d --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/dist/app.js @@ -0,0 +1,30 @@ +"use strict"; +// Create a function that gets three numbers, +// multiplies them with each other, and returns the multiplication. +// Make sure with try-catch that all three numbers are numbers. +// Get the three numbers from the user and print for the user +// the result of the function. +function multiplication(number1, number2, number3) { + try { + if (typeof number1 !== "number" || + typeof number2 !== "number" || + typeof number3 !== "number") { + throw new Error("One of the arguments is not a number"); + } + return number1 * number2 * number3; + } + catch (error) { + console.error(error); + return false; + } +} +var num1 = prompt("Enter a number please"); +var num2 = prompt("Enter another number please"); +var num3 = prompt("Enter another one please"); +var result = multiplication(parseInt(num1), parseInt(num2), parseInt(num3)); +if (result && !isNaN(result)) { + alert("the multiplication of the three numbers is " + result); +} +else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/index.html new file mode 100644 index 000000000..deafb963d --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shaili/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/dist/index.js new file mode 100644 index 000000000..f672a5521 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/dist/index.js @@ -0,0 +1,25 @@ +function multiply(x, y, z) { + try { + if (isNaN(x) || isNaN(y) || isNaN(z)) { + console.log("not a number"); + throw new Error("not a number"); + } + return x * y * z; + } + catch (_a) { + return false; + } +} +var inputA = prompt("please enter a number"); +var inputB = prompt("please enter a number"); +var inputC = prompt("please enter a number"); +if (inputA == null || inputB == null || inputC == null) { + console.log("number is null"); +} +else { + var inputANumber = parseInt(inputA); + var inputBNumber = parseInt(inputB); + var inputCNumber = parseInt(inputC); + var functionResult = multiply(inputANumber, inputBNumber, inputCNumber); + console.log(functionResult); +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/index.html new file mode 100644 index 000000000..2cda744c6 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/index.html @@ -0,0 +1,12 @@ + + + + + + + try and catch- shlomi samai + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/index.ts new file mode 100644 index 000000000..cab289b26 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/shlomi.samai/level1/index.ts @@ -0,0 +1,27 @@ +function multiply(x: number, y: number, z: number): number | false { + try { + if (isNaN(x) || isNaN(y) || isNaN(z)) { + console.log("not a number"); + throw new Error("not a number"); + } + + return x * y * z; + } catch { + return false; + } +} + +let inputA = prompt("please enter a number"); +let inputB = prompt("please enter a number"); +let inputC = prompt("please enter a number"); + +if (inputA == null || inputB == null || inputC == null) { + console.log("number is null"); +} else { + let inputANumber: number = parseInt(inputA); + let inputBNumber: number = parseInt(inputB); + let inputCNumber: number = parseInt(inputC); + + const functionResult = multiply(inputANumber, inputBNumber, inputCNumber); + console.log(functionResult); +} diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/dist/index.js b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/dist/index.js new file mode 100644 index 000000000..eabb09078 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/dist/index.js @@ -0,0 +1,27 @@ +// 1. +// function multiplyNumbers(num1: number, num2: number, num3: number) { +// try { +// if (typeof num1 !== "number" || typeof num2 !== "number" || typeof num3 !== "number") { +// throw new Error("One or more input values is not a number."); +// } +// return num1 * num2 * num3; +// } catch (error) { +// console.error(error.message); +// } +// } +// const num1 = parseInt(prompt("Enter the first number:")); +// const num2 = parseInt(prompt("Enter the second number:")); +// const num3 = parseInt(prompt("Enter the third number:")); +// const result = multiplyNumbers(num1, num2, num3); +// console.log(`The result is: ${result}`); +// 2. +// function encrypt(message: string): string { +// let encrypted = ''; +// for (const char of message) { +// encrypted += (char.toLowerCase().charCodeAt(0) - 96).toString(); +// } +// return encrypted; +// } +// const message = prompt('Enter a message to encrypt:'); +// console.log(encrypt(message)); +3.; diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/index.html b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/index.html new file mode 100644 index 000000000..0e547c5bf --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/index.ts b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/index.ts new file mode 100644 index 000000000..aa55ce661 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/HW-Puzzles/uriel bargil/index.ts @@ -0,0 +1,42 @@ +// 1. + +// function multiplyNumbers(num1: number, num2: number, num3: number) { +// try { +// if (typeof num1 !== "number" || typeof num2 !== "number" || typeof num3 !== "number") { +// throw new Error("One or more input values is not a number."); +// } + +// return num1 * num2 * num3; +// } catch (error) { +// console.error(error.message); +// } + + +// } + +// const num1 = parseInt(prompt("Enter the first number:")); +// const num2 = parseInt(prompt("Enter the second number:")); +// const num3 = parseInt(prompt("Enter the third number:")); + +// const result = multiplyNumbers(num1, num2, num3); + +// console.log(`The result is: ${result}`); + + + + +// 2. + +// function encrypt(message: string): string { +// let encrypted = ''; +// for (const char of message) { +// encrypted += (char.toLowerCase().charCodeAt(0) - 96).toString(); +// } +// return encrypted; +// } + +// const message = prompt('Enter a message to encrypt:'); +// console.log(encrypt(message)); + + +3. diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/dist/index.js new file mode 100644 index 000000000..c16c08f1d --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/dist/index.js @@ -0,0 +1,29 @@ +var test = function (product) { + try { + switch (product) { + case "cake": + return 70; + case "ice-cream": + return 8; + case "cookie": + return 5; + default: + throw new Error("Invalid input"); + } + } + catch (error) { + console.error(error); + return false; + } +}; +var check = true; +while (check) { + var answer = prompt("ice-cream/cake/cookie"); + if (test(answer)) { + alert(test(answer)); + check = false; + } + else { + alert("Invalid ipnut, try again..."); + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/index.html new file mode 100644 index 000000000..e94a73fa2 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/index.ts new file mode 100644 index 000000000..aaf8c0b83 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/Omer.Vir/index.ts @@ -0,0 +1,28 @@ +const test: Function = (product: string): number | false => { + try { + switch (product) { + case "cake": + return 70; + case "ice-cream": + return 8; + case "cookie": + return 5; + default: + throw new Error("Invalid input"); + } + } catch (error) { + console.error(error); + return false; + } +} + +var check = true; +while (check) { + const answer = prompt("ice-cream/cake/cookie") + if (test(answer)) { + alert(test(answer)); + check = false; + } else { + alert("Invalid ipnut, try again..."); + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/dist/index.js new file mode 100644 index 000000000..1e187b18c --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/dist/index.js @@ -0,0 +1,33 @@ +var productPrice = function (product) { + try { + switch (product) { + case "ice-cream": + return 8; + break; + case "cake": + return 20; + break; + case "cookie": + return 5; + break; + default: throw new Error('no matching product name'); + } + } + catch (error) { + console.error(error); + return undefined; + } +}; +var product = prompt(" which item would you like to buy?"); +if (isNaN(product)) { + if (product !== "") { + var answer = productPrice(product); + alert("its shouls cost you " + answer + " NIS"); + } + else { + alert("you should enter a product"); + } +} +else { + alert("you sould enter aproduct"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/index.ts new file mode 100644 index 000000000..15b4dc133 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/aviva-elias/index.ts @@ -0,0 +1,32 @@ +const productPrice:Function=(product:string):number|undefined=>{ + try { + + + switch(product){ + case "ice-cream": + return 8; + break; + case "cake": + return 20; + break + case "cookie": + return 5; + break; + default:throw new Error('no matching product name'); + + } + + + } catch (error) { + console.error(error) + return undefined + } +} + +const product:string|null=prompt(" which item would you like to buy?") +if(isNaN(product)){ +if(product!==""){ +const answer=productPrice(product) + alert(`its shouls cost you ${answer} NIS`)} + else{ alert("you should enter a product")}} +else{alert("you sould enter aproduct")} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/dist/index.js new file mode 100644 index 000000000..e5e8739d9 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/dist/index.js @@ -0,0 +1,25 @@ +while (true) { + var userInputProduct = prompt('enter product i.e ice-cream, cake, cookie'); + alert("price is " + productPrice(userInputProduct)); +} +function productPrice(product) { + var cookiePrice = 5; + var iceCreamPrice = 8; + var cakePrice = 70; + try { + switch (product) { + case "ice-cream": + return iceCreamPrice; + case "cake": + return cakePrice; + case "cookie": + return cookiePrice; + default: + throw new Error('no matching product name'); + } + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/index.ts new file mode 100644 index 000000000..89a0ee188 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/idan/index.ts @@ -0,0 +1,28 @@ +while(true){ + const userInputProduct = prompt('enter product i.e ice-cream, cake, cookie'); + alert(`price is ${productPrice(userInputProduct)}`); +} + + + +function productPrice(product:string | null):number | false{ + const cookiePrice:number = 5; + const iceCreamPrice:number = 8; + const cakePrice:number = 70; + try{ + switch (product){ + case `ice-cream`: + return iceCreamPrice; + case `cake`: + return cakePrice; + case `cookie`: + return cookiePrice; + default: + throw new Error('no matching product name'); + } + } + catch (error) { + console.error(error); + return false; + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/instructions.md b/02-TypeScript/07-functions/03-try-catch/class-puzzles/instructions.md new file mode 100644 index 000000000..3e4fc5c70 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/instructions.md @@ -0,0 +1,10 @@ +1) create a function which get a product (ice-cream, cake, cookie), and the function return a price (8, 70, 5) + +ask the user which item she want to buy, and return the price "It should cost you x NIS" + +if non of the abouve return an error + + + + + diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/dist/index.js new file mode 100644 index 000000000..bfc766c8b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/dist/index.js @@ -0,0 +1,28 @@ +var chooseFood = function (productName) { + try { + if (!productName) { + throw new Error("You must choose Product Name"); + } + switch (productName) { + case "ice cream": + return 8; + case "cake": + return 70; + case "cookie": + return 5; + } + throw new Error("Invalid Product Name"); + } + catch (error) { + console.error(error); + return false; + } +}; +var productName = prompt('Choose Product Name'); +var price = chooseFood(productName); +if (price === false) { + alert('You did not enter a correct product name'); +} +else { + alert("Your price is " + price); +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/index.html new file mode 100644 index 000000000..e7587c7e7 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/index.ts new file mode 100644 index 000000000..a94ba6edf --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/itay-Amosi/index.ts @@ -0,0 +1,26 @@ +let chooseFood: Function = (productName: string): number | false => { + try { + if (!productName) { + throw new Error(`You must choose Product Name`) + } + switch (productName) { + case `ice cream`: + return 8 + case `cake`: + return 70 + case `cookie`: + return 5 + } + throw new Error(`Invalid Product Name`) + } catch (error) { + console.error(error) + return false + } +} +const productName = prompt('Choose Product Name') +const price = chooseFood(productName) +if (price === false) { + alert('You did not enter a correct product name') +} else { + alert(`Your price is ${price}`) +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/app.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/app.ts new file mode 100644 index 000000000..118af1a54 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/app.ts @@ -0,0 +1,29 @@ +function product (the_product:string|null){ + +switch (the_product) { + case "ice cream": + result = "8"; + break; + case "cake": + result = "70"; + break; + case "cookie": + result = "5"; + break; + default: + console.error("your choice is wrong!") + +} +return result; +} + +const answer = prompt("which product you want?") +var result = product(answer); + + +if (result && !isNaN(result)) { + console.log(`it should cost you ${result} nis`) + } else { + alert("we have an error"); + } + diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/dist/app.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/dist/app.js new file mode 100644 index 000000000..130179aa9 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/dist/app.js @@ -0,0 +1,24 @@ +function product(the_product) { + switch (the_product) { + case "ice cream": + result = "8"; + break; + case "cake": + result = "70"; + break; + case "cookie": + result = "5"; + break; + default: + console.error("your choice is wrong!"); + } + return result; +} +var answer = prompt("which product you want?"); +var result = product(answer); +if (result && !isNaN(result)) { + console.log("it should cost you " + result + " nis"); +} +else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/john-yuval/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/dist/index.js new file mode 100644 index 000000000..1f4144043 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/dist/index.js @@ -0,0 +1,31 @@ +function getPrice(product) { + try { + switch (product) { + case 'ice-cream': + return 8; + case 'cake': + return 70; + case 'cookie': + return 5; + default: + alert("Sorry, we do not sell " + product); + throw new Error("Invalid product: " + product); + } + } + catch (error) { + console.error(error); + } +} +function showPrice() { + var product = prompt('Which product do you want to buy?'); + try { + var price = getPrice(product); + console.log("It should cost you " + price + " NIS"); + alert("It should cost you " + price + " NIS"); + } + catch (error) { + console.error(error.message); + alert(error.message); + } +} +showPrice(); diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/index.html new file mode 100644 index 000000000..50eb0ee90 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/index.ts new file mode 100644 index 000000000..73792d4a7 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/matanel harush/index.ts @@ -0,0 +1,31 @@ +function getPrice(product: string): number { + try { + switch (product) { + case 'ice-cream': + return 8; + case 'cake': + return 70; + case 'cookie': + return 5; + default: + alert(`Sorry, we do not sell ${product}`); + throw new Error(`Invalid product: ${product}`); + } + } catch (error) { + console.error(error) + } + } + + function showPrice(): void { + const product = prompt('Which product do you want to buy?'); + + try { + const price = getPrice(product); + console.log(`It should cost you ${price} NIS`) + alert(`It should cost you ${price} NIS`); + } catch (error) { + console.error(error.message); + alert(error.message) + } + } + showPrice(); \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/app1.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/app1.ts new file mode 100644 index 000000000..a1734a2af --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/app1.ts @@ -0,0 +1,27 @@ +let productPrice: Function = (productName: string): number | false => { + try { + if (!productName) { + throw new Error("Invalid product name"); + } + switch (productName) { + case "ice-cream": + return 8; + case "cake": + return 70; + case "cookie": + return 5; + } + throw new Error("Invalid product name"); + } catch (error) { + console.error(error); + return false; + } +}; + +const productName = prompt("What is your product?"); +const price = productPrice(productName); +if (price === false) { + alert ('You did not enter a valid product') +} else { + alert (`Your price is ${price}`); +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/dist/app.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/dist/app.js new file mode 100644 index 000000000..d79a9bc5b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/dist/app.js @@ -0,0 +1,28 @@ +var productPrice = function (productName) { + try { + if (!productName) { + throw new Error("Invalid product name"); + } + switch (productName) { + case "ice-cream": + return 8; + case "cake": + return 70; + case "cookie": + return 5; + } + throw new Error("Invalid product name"); + } + catch (error) { + console.error(error); + return false; + } +}; +var productName = prompt("What is your product?"); +var price = productPrice(productName); +if (price === false) { + alert('You did not enter a valid product'); +} +else { + alert("Your price is " + price); +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/dist/app1.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/dist/app1.js new file mode 100644 index 000000000..d79a9bc5b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/dist/app1.js @@ -0,0 +1,28 @@ +var productPrice = function (productName) { + try { + if (!productName) { + throw new Error("Invalid product name"); + } + switch (productName) { + case "ice-cream": + return 8; + case "cake": + return 70; + case "cookie": + return 5; + } + throw new Error("Invalid product name"); + } + catch (error) { + console.error(error); + return false; + } +}; +var productName = prompt("What is your product?"); +var price = productPrice(productName); +if (price === false) { + alert('You did not enter a valid product'); +} +else { + alert("Your price is " + price); +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 10/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/dist/index.js new file mode 100644 index 000000000..e46f7d54f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/dist/index.js @@ -0,0 +1,26 @@ +var priceOfItem; +{ + try { + switch (priceOfItem) { + case "ice-cream": + if ("ice-cream") { + return 7; + console.log("you have selected a ice-creame and the price is 8 lis"); + } + case cake: + if ("cake") { + return 70; + } + case cookie: + if ("cookie") { + return 8; + } + else { + console.log("we dont have this item"); + } + } + } + catch (error) { + } +} +var selectItem = prompt("please select an item"); diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/index.ts new file mode 100644 index 000000000..cc871a44e --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 2/index.ts @@ -0,0 +1,29 @@ +let priceOfItem:function(prudactName:string):number|string => { + try { + switch(priceOfItem) { + case "ice-cream": + if (`ice-cream`){ + return 7; + console.log(`you have selected a ice-creame and the price is 8 lis`) + } + case cake: + if(`cake`){ + return 70; + } + case cookie: + if(`cookie`){ + return 8; + } + else { + console.log(`we dont have this item`); + } + } + } catch (error) { + + } +} + + +} +const selectItem = prompt (`please select an item`); + diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/dist/index.js new file mode 100644 index 000000000..517b45f8b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/dist/index.js @@ -0,0 +1,3 @@ +var Product = function (iceCream, cake, cookie) { + var whatproduct = prompt("which product do you want?"); +}; diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/index.ts new file mode 100644 index 000000000..334efe240 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room 5/index.ts @@ -0,0 +1,6 @@ + +const Product:Function = function(iceCream:string,cake:string,cookie:string):string{ + let whatproduct= prompt(`which product do you want?`); + + +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/desert.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/desert.html new file mode 100644 index 000000000..279106f48 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/desert.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/desert.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/desert.ts new file mode 100644 index 000000000..a8a3c617d --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/desert.ts @@ -0,0 +1,23 @@ +const desertPrice: Function = (desert: string) => { + try { + switch (desert) { + case "cake": + alert(`price is 70 shekels`); + break; + case "ice-cream": + alert(`price is 8 shekels`); + break; + case "cookie": + alert(`price is 5 shekels`); + break; + default: + alert(`not available`); + } + } + catch (error) { + return console.error(error); + } +} + +const input: string | null = prompt("enter your desert (cake / ice-cream / cookie):"); +console.log(desertPrice(input)); diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/dist/desert.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/dist/desert.js new file mode 100644 index 000000000..5cc374578 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room1/dist/desert.js @@ -0,0 +1,22 @@ +var desertPrice = function (desert) { + try { + switch (desert) { + case "cake": + alert("price is 70 shekels"); + break; + case "ice-cream": + alert("price is 8 shekels"); + break; + case "cookie": + alert("price is 5 shekels"); + break; + default: + alert("not available"); + } + } + catch (error) { + return console.error(error); + } +}; +var input = prompt("enter your desert (cake / ice-cream / cookie):"); +console.log(desertPrice(input)); diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/dist/index.js new file mode 100644 index 000000000..22610b672 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/dist/index.js @@ -0,0 +1,30 @@ +var desert = prompt("Enter the desert you want to order:"); +if (desert == " " || !desert) { + console.log("you don't enter a value"); +} +else { + var price = priceOfDesert(desert); + if (price != false) { + console.log("the price for a " + desert + " is " + price); + } + else { + console.log("We dont serve this desert."); + } +} +function priceOfDesert(desert) { + try { + switch (desert) { + case "ice-cream": + return 8; + case "cake": + return 70; + case "cookie": + return 5; + } + throw new Error('We dont serve this desert.'); + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/index.ts new file mode 100644 index 000000000..6308a13db --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/room7/index.ts @@ -0,0 +1,28 @@ +const desert= prompt ("Enter the desert you want to order:"); +if (desert==" " || !desert){ + console.log(`you don't enter a value`); +} else { +const price= priceOfDesert(desert); +if (price!=false){ + console.log(`the price for a ${desert} is ${price}`); +} else { + console.log(`We dont serve this desert.`); +} +} + +function priceOfDesert (desert:string):number | false{ + try { + switch (desert){ + case "ice-cream": + return 8; + case "cake": + return 70; + case "cookie": + return 5; + } + throw new Error('We dont serve this desert.'); + } catch (error) { + console.error(error); + return false; + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/dist/index.js b/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/dist/index.js new file mode 100644 index 000000000..a5e555250 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/dist/index.js @@ -0,0 +1,23 @@ +function prices(product) { + try { + if (typeof product !== 'string') { + throw new Error('Argument should be a string'); + } + else if (product === "ice-cream") { + return 8; + } + else if (product === "cake") { + return 70; + } + else if (product === "cookie") { + return 5; + } + return false; + } + catch (error) { + console.error(error); + return false; + } +} +var price = prompt("which item do you want to buy?"); +console.log(prices(price)); diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/index.html b/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/index.html new file mode 100644 index 000000000..0b13d2f2a --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/index.ts b/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/index.ts new file mode 100644 index 000000000..bbeddb955 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/class-puzzles/shlomi/index.ts @@ -0,0 +1,28 @@ + +function prices (product:string|null):number| false{ + try{ + if(typeof product !=='string'){ + throw new Error('Argument should be a string'); + } + else if (product==="ice-cream"){ + return 8 + } + else if (product==="cake"){ + return 70 + } + else if (product==="cookie"){ + return 5 + } + return false + } + + catch (error) { + console.error(error); + return false; + } + +} + +let price=prompt("which item do you want to buy?") + +console.log(prices(price)) \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/example/app.ts b/02-TypeScript/07-functions/03-try-catch/example/app.ts new file mode 100644 index 000000000..6c6988ae2 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/example/app.ts @@ -0,0 +1,21 @@ +function someFunction(x: any): number | false { + try { + if(typeof x !== 'number'){ + throw new Error('Argument should be a number'); + } + + return x / 0; + } catch (error) { + console.error(error); + return false; + } +} + +const answer = prompt("give me a number please"); + +const result = someFunction(answer); +if (result && !isNaN(result)) { + alert(`Your number returned as ${result}`); +} else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/example/dist/app.js b/02-TypeScript/07-functions/03-try-catch/example/dist/app.js new file mode 100644 index 000000000..630348781 --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/example/dist/app.js @@ -0,0 +1,20 @@ +function someFunction(x) { + try { + if (typeof x !== 'number') { + throw new Error('Argument should be a number'); + } + return x / 0; + } + catch (error) { + console.error(error); + return false; + } +} +var answer = prompt("give me a number please"); +var result = someFunction(answer); +if (result && !isNaN(result)) { + alert("Your number returned as " + result); +} +else { + alert("we have an error"); +} diff --git a/02-TypeScript/07-functions/03-try-catch/example/index.html b/02-TypeScript/07-functions/03-try-catch/example/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/03-try-catch/example/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/03-try-catch/followups/start.md b/02-TypeScript/07-functions/03-try-catch/followups/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/07-functions/class-puzzle/group-6/dist/index.js b/02-TypeScript/07-functions/class-puzzle/group-6/dist/index.js new file mode 100644 index 000000000..ba0155d65 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/group-6/dist/index.js @@ -0,0 +1,14 @@ +var nStr = prompt("Enter a number:"); +var n; +if (nStr) { + n = parseInt(nStr); +} +console.log("your number is " + n); +console.log("the result is " + zeroToN(n)); +function zeroToN(n) { + var sum = 0; + for (var i = 0; i <= n; i++) { + sum += i; + } + return sum; +} diff --git a/02-TypeScript/07-functions/class-puzzle/group-6/index.html b/02-TypeScript/07-functions/class-puzzle/group-6/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/group-6/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/group-6/index.ts b/02-TypeScript/07-functions/class-puzzle/group-6/index.ts new file mode 100644 index 000000000..803d9bf1e --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/group-6/index.ts @@ -0,0 +1,15 @@ +const nStr = prompt ("Enter a number:"); +let n; +if (nStr) { + n = parseInt(nStr); +} +console.log(`your number is ${n}`); +console.log(`the result is ${zeroToN(n)}`); + +function zeroToN (n:number):number{ + let sum=0; + for(let i=0;i<=n;i++){ + sum+=i; + } + return sum; +} diff --git a/02-TypeScript/07-functions/class-puzzle/idan/dist/index.js b/02-TypeScript/07-functions/class-puzzle/idan/dist/index.js new file mode 100644 index 000000000..ea059a5ce --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/idan/dist/index.js @@ -0,0 +1,9 @@ +var userInput; +userInput = prompt("joe biden age?"); +console.log(oneToNum(parseInt(userInput))); +alert(oneToNum(parseInt(userInput))); +function oneToNum(n) { + n = n / 2 * (1 + n); + //let total; for(let i = 0; i <= n; i++){ total += i; } return total + return n; +} diff --git a/02-TypeScript/07-functions/class-puzzle/idan/index.html b/02-TypeScript/07-functions/class-puzzle/idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/idan/index.ts b/02-TypeScript/07-functions/class-puzzle/idan/index.ts new file mode 100644 index 000000000..826e5aedf --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/idan/index.ts @@ -0,0 +1,13 @@ +let userInput; + +userInput = prompt(`joe biden age?`) + +console.log(oneToNum(parseInt(userInput))) +alert(oneToNum(parseInt(userInput))) + + +function oneToNum(n:number){ + n= n/2*(1+n); + //let total; for(let i = 0; i <= n; i++){ total += i; } return total + return n +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/instructions.md b/02-TypeScript/07-functions/class-puzzle/instructions.md new file mode 100644 index 000000000..dbbdabeba --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/instructions.md @@ -0,0 +1,7 @@ +1. create a function which get to argument (numbers) and return their multiplication + +//function multy(a:number,b:number){ + +} + +2. create a function which return: calculate with a varibal and a loop how much is 1+2+3+...+n diff --git a/02-TypeScript/07-functions/class-puzzle/matanel harush/dist/index.js b/02-TypeScript/07-functions/class-puzzle/matanel harush/dist/index.js new file mode 100644 index 000000000..ccf5a54db --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/matanel harush/dist/index.js @@ -0,0 +1,8 @@ +function printSum(n) { + var sum = 0; + for (var i = 1; i < n; i++) { + sum += i; + } + return sum; + console.log(count(10)); +} diff --git a/02-TypeScript/07-functions/class-puzzle/matanel harush/index.html b/02-TypeScript/07-functions/class-puzzle/matanel harush/index.html new file mode 100644 index 000000000..20eddf22b --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/matanel harush/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/matanel harush/index.ts b/02-TypeScript/07-functions/class-puzzle/matanel harush/index.ts new file mode 100644 index 000000000..3cb3a6bd1 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/matanel harush/index.ts @@ -0,0 +1,9 @@ +function printSum(n: number): void { + let sum = 0; + for (let i = 1; i < n; i++) { + sum += i; + } + + return sum; + console.log(count(10)); + } \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/room 4/dist/index.js b/02-TypeScript/07-functions/class-puzzle/room 4/dist/index.js new file mode 100644 index 000000000..f33b44c97 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room 4/dist/index.js @@ -0,0 +1,17 @@ +//test1// +var a = 2; +var b = 6; +function x2(a, b) { + return a * b; +} +console.log(x2(a, b)); +//test 2// +var n = 10; +function sum(n) { + var result = 0; + for (var i = 1; i <= n; i++) { + result += i; + } + return result; +} +console.log(sum(n)); diff --git a/02-TypeScript/07-functions/class-puzzle/room 4/index.html b/02-TypeScript/07-functions/class-puzzle/room 4/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room 4/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/room 4/index.ts b/02-TypeScript/07-functions/class-puzzle/room 4/index.ts new file mode 100644 index 000000000..11f4faf49 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room 4/index.ts @@ -0,0 +1,23 @@ +//test1// + +let a:number= 2; +let b:number= 6; + +function x2(a:number,b:number):number{ + return a*b +} +console.log(x2(a,b)) + + +//test 2// + + +const n:number=10; +function sum(n:number){ + let result:number = 0 + for(let i=1; i<=n; i++){ + result+=i + } + return result +} +console.log(sum(n)) diff --git a/02-TypeScript/07-functions/class-puzzle/room 5/dist/index.js b/02-TypeScript/07-functions/class-puzzle/room 5/dist/index.js new file mode 100644 index 000000000..e9a5a33d3 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room 5/dist/index.js @@ -0,0 +1,14 @@ +var num1 = 10; +var num2 = 4; +function multiply(number1, number2) { + return number1 * number2; +} +console.log(multiply(num1, num2)); +function multiplay2(numOne) { + var sum = 0; + for (var i = 1; i <= numOne; i++) { + sum = sum + i; + } + return sum; +} +console.log(multiplay2(10)); diff --git a/02-TypeScript/07-functions/class-puzzle/room 5/index.html b/02-TypeScript/07-functions/class-puzzle/room 5/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room 5/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/room 5/index.ts b/02-TypeScript/07-functions/class-puzzle/room 5/index.ts new file mode 100644 index 000000000..e419f7c0a --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room 5/index.ts @@ -0,0 +1,21 @@ +const num1 = 10; +const num2 = 4; +function multiply(number1:number,number2:number){ + return number1*number2; +} +console.log(multiply(num1,num2)); + + + + + + + +function multiplay2(numOne:number):number{ + let sum:number = 0; + for (let i = 1 ; i <= numOne ; i++){ + sum = sum + i; + } + return sum; +} +console.log(multiplay2(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/room3/dist/index.js b/02-TypeScript/07-functions/class-puzzle/room3/dist/index.js new file mode 100644 index 000000000..db0f38db2 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room3/dist/index.js @@ -0,0 +1,5 @@ +function multy(a, b) { + var n = a * b; + return n; +} +console.log(multy(5, 10)); diff --git a/02-TypeScript/07-functions/class-puzzle/room3/index.html b/02-TypeScript/07-functions/class-puzzle/room3/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/room3/index.ts b/02-TypeScript/07-functions/class-puzzle/room3/index.ts new file mode 100644 index 000000000..8ac73ea98 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/room3/index.ts @@ -0,0 +1,6 @@ +function multy(a:number,b:number): number { + const n:number = a*b + return n; +} + +console.log(multy(5,10)) \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/app.ts b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/app.ts new file mode 100644 index 000000000..f9cd18191 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/app.ts @@ -0,0 +1,15 @@ +function multi(a:number, b:number): number{ + return a * b; +} + +function addUp(n: number): number{ + let x: number = 0; + for(let i = 1; i <= n; i++){ + x += i; + } + return x; +} + +console.log(multi(3, 4)); + +console.log(addUp(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/dist/app.js b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/dist/app.js new file mode 100644 index 000000000..34cb5dce1 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/dist/app.js @@ -0,0 +1,12 @@ +function multi(a, b) { + return a * b; +} +function addUp(n) { + var x = 0; + for (var i = 1; i <= n; i++) { + x += i; + } + return x; +} +console.log(multi(3, 4)); +console.log(addUp(10)); diff --git a/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/dist/dist/app.dev.js b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/dist/dist/app.dev.js new file mode 100644 index 000000000..807bc686e --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/dist/dist/app.dev.js @@ -0,0 +1,18 @@ +"use strict"; + +function multi(a, b) { + return a * b; +} + +function addUp(n) { + var x = 0; + + for (var i = 1; i <= n; i++) { + x += i; + } + + return x; +} + +console.log(multi(3, 4)); +console.log(addUp(10)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/index.html b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/index.html new file mode 100644 index 000000000..7d3f151f1 --- /dev/null +++ b/02-TypeScript/07-functions/class-puzzle/vladiPuzzel/index.html @@ -0,0 +1,12 @@ + + + + + + + Function Puzzel + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/example/dist/index.js b/02-TypeScript/07-functions/example/dist/index.js new file mode 100644 index 000000000..ff79bb903 --- /dev/null +++ b/02-TypeScript/07-functions/example/dist/index.js @@ -0,0 +1,17 @@ +// before functions +var userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); +userName = prompt("What is you name?"); +console.log("Thank you " + userName + " for registering"); diff --git a/02-TypeScript/07-functions/example/dist/indexWithFunctions.js b/02-TypeScript/07-functions/example/dist/indexWithFunctions.js new file mode 100644 index 000000000..2dd21abc7 --- /dev/null +++ b/02-TypeScript/07-functions/example/dist/indexWithFunctions.js @@ -0,0 +1,25 @@ +//function sayThankYou(argument){ +function priceWithVat(price) { + return price * 1.17; +} +for (var i = 0; i < 7; i++) { + var userName = prompt("What is your name?"); + console.log(sayThankYou(userName)); +} +function sayThankYou(name) { + if (name) { + name = name.toUpperCase(); + return "Thank you " + name + " for registering"; + } + else { + return ""; + } +} +// userName = prompt("What is your name?"); +// console.log(sayThankYou(userName)); +// const userPrice = prompt("what is the price?"); +// if (userPrice) { +// const _userPrice = parseInt(userPrice); +// const withVat = priceWithVat(_userPrice); +// console.log(`Your price with vat is ${withVat}`); +// } diff --git a/02-TypeScript/07-functions/example/index.html b/02-TypeScript/07-functions/example/index.html new file mode 100644 index 000000000..6c5eaf92b --- /dev/null +++ b/02-TypeScript/07-functions/example/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/example/index.ts b/02-TypeScript/07-functions/example/index.ts new file mode 100644 index 000000000..64205b46f --- /dev/null +++ b/02-TypeScript/07-functions/example/index.ts @@ -0,0 +1,29 @@ +// before functions + +let userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); + +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); + +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); + +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); +userName = prompt("What is you name?"); + +console.log(`Thank you ${userName} for registering`); diff --git a/02-TypeScript/07-functions/example/indexWithFunctions.ts b/02-TypeScript/07-functions/example/indexWithFunctions.ts new file mode 100644 index 000000000..50ec13fa2 --- /dev/null +++ b/02-TypeScript/07-functions/example/indexWithFunctions.ts @@ -0,0 +1,30 @@ +//function sayThankYou(argument){ + +function priceWithVat(price: number): number { + return price * 1.17; +} + +for (let i = 0; i < 7; i++) { + let userName = prompt("What is your name?"); + console.log(sayThankYou(userName)); +} + +function sayThankYou(name: string | null): string { + if (name) { + name = name.toUpperCase(); + return `Thank you ${name} for registering`; + } else { + return ""; + } +} + +// userName = prompt("What is your name?"); +// console.log(sayThankYou(userName)); + +// const userPrice = prompt("what is the price?"); + +// if (userPrice) { +// const _userPrice = parseInt(userPrice); +// const withVat = priceWithVat(_userPrice); +// console.log(`Your price with vat is ${withVat}`); +// } diff --git a/02-TypeScript/07-functions/puzzles-HW/Itai-G/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/Itai-G/dist/index.js new file mode 100644 index 000000000..bf2b8b7df --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Itai-G/dist/index.js @@ -0,0 +1,52 @@ +//exerise level 1; +var num1 = 32243; +function negetiveNum(num1) { + return num1 * -1; +} +console.log("the negetive value of this " + num1 + " is " + negetiveNum(num1)); +//2. +var num2 = 4; +function square(num2) { + return num2 * num2; +} +console.log("the square number of " + num2 + " is " + square(num2)); +//3. +var clToFr = 23; +function clToFrConvert(clToFr) { + return (clToFr * 1.8) + 32; +} +console.log("Now outside is " + clToFr + " c and " + clToFrConvert(clToFr) + " Fr"); +//ex level 1. +var numBig = 20; +var numSmall = 12; +function max(numBig, numSmall) { + if ((numBig) > (numSmall)) { + return numBig; + } + else + return numSmall; +} +console.log("this number " + max(numBig, numSmall) + " is biger then " + numSmall); +//ex level 2 2. +function genderToHghit(gender, height) { + if (gender === 'male') { + return height - 175; + } + else { + return height - 160; + } +} +console.log("your height is " + genderToHghit('male', 185) + " below / above avrege height"); +//ex level 3. +var num3 = 425; +var value = 0; +function revers(num3) { + var reversNumer = 0; + while (num3) { + value = num3 % 10; + reversNumer = (reversNumer * 10) + value; + num3 = num3 / 10 | 0; + } + return reversNumer; +} +console.log("this number " + num3 + " and the revers is " + revers(num3)); diff --git a/02-TypeScript/07-functions/puzzles-HW/Itai-G/index.html b/02-TypeScript/07-functions/puzzles-HW/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/Itai-G/index.ts b/02-TypeScript/07-functions/puzzles-HW/Itai-G/index.ts new file mode 100644 index 000000000..29a561f37 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Itai-G/index.ts @@ -0,0 +1,73 @@ + +//exerise level 1; + +let num1 = 32243; +function negetiveNum (num1:number):number{ + return num1 * -1; +} + +console.log(`the negetive value of this ${num1} is ${negetiveNum(num1)}`); + + + +//2. + +let num2 = 4; +function square (num2:number):number{ + return num2 * num2; +} + +console.log(`the square number of ${num2} is ${square(num2)}`); + + +//3. + + +let clToFr = 23; +function clToFrConvert (clToFr):number{ + return (clToFr*1.8)+32; +} +console.log(`Now outside is ${clToFr} c and ${clToFrConvert(clToFr)} Fr`); + + + + +//ex level 1. +let numBig = 20; +let numSmall = 12; +function max (numBig:number, numSmall:number):number{ + if((numBig) > (numSmall)){ + return numBig; + }else + return numSmall; +} +console.log(`this number ${max(numBig,numSmall)} is biger then ${numSmall}`); + +//ex level 2 2. +function genderToHghit(gender:string,height:number):number { + if (gender === 'male'){ + return height - 175; + }else { + return height - 160; + } +} +console.log(`your height is ${genderToHghit('male',185)} below / above avrege height`); + + + + +//ex level 3. + + +let num3 = 425; +let value = 0; +function revers (num3:number):number{ + let reversNumer = 0; + while (num3){ + value = num3 % 10; + reversNumer = (reversNumer*10) +value; + num3 = num3/10 |0; + } + return reversNumer; +} +console.log(`this number ${num3} and the revers is ${revers(num3)}`); \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/Karin-levi/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/Karin-levi/dist/index.js new file mode 100644 index 000000000..93e4c93e8 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Karin-levi/dist/index.js @@ -0,0 +1,61 @@ +// Level 1 +// A +function negativeNumber(number) { + if (number < 0) { + return number; + } + return -1 * number; +} +console.log("This is the negative number " + negativeNumber(323)); +// B +function square(number) { + return Math.pow(number, 2); +} +console.log("The squre of the number " + 4 + " is " + square(4)); +// C +function fahrenheit(number) { + return number * 1.8 + 32; +} +console.log(20 + " celciuse is " + fahrenheit(20) + " fahrenheit"); +// Level 2 +// A +function largerNumber(a, b) { + if (a > b) { + return a; + } + return b; +} +console.log("The larger number is " + largerNumber(20, 30)); +// B +function relativeHeight(height, gender) { + if (gender === "male") { + return height - 174; + } + else if (gender === "female") { + return height - 160; + } +} +// console.log(`Your relative height is ${relativeHeight(170,`male`)}`); +// Level 3 +// reverse function!!! +function reverseString(str) { + // Step 1. Use the split() method to return a new array + var splitString = str.split(""); // var splitString = "hello".split(""); + // ["h", "e", "l", "l", "o"] + // Step 2. Use the reverse() method to reverse the new created array + var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse(); + // ["o", "l", "l", "e", "h"] + // Step 3. Use the join() method to join all elements of the array into a string + var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join(""); + // "olleh" + //Step 4. Return the reversed string + return joinArray; // "olleh" +} +function reverseNumber(number) { + var numAsString = number.toString(); + numAsString = reverseString(numAsString); + return Number(numAsString); +} +console.log("The reverse number of " + 123456 + " is " + reverseNumber(123456)); +// let n = prompt("Please enter a number"); +// let y: number = parseInt(n); diff --git a/02-TypeScript/07-functions/puzzles-HW/Karin-levi/index.html b/02-TypeScript/07-functions/puzzles-HW/Karin-levi/index.html new file mode 100644 index 000000000..0e547c5bf --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Karin-levi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/Karin-levi/index.ts b/02-TypeScript/07-functions/puzzles-HW/Karin-levi/index.ts new file mode 100644 index 000000000..49eae30dc --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Karin-levi/index.ts @@ -0,0 +1,82 @@ +// Level 1 +// A +function negativeNumber(number:number): number{ + if (number <0){ + return number; + } + return -1*number; +} +console.log(`This is the negative number ${negativeNumber(323)}`); + + +// B +function square(number:number): number{ + return number**2; +} +console.log(`The squre of the number ${4} is ${square(4)}`) + + +// C +function fahrenheit(number:number):number{ + return number*1.8+32; +} +console.log(`${20} celciuse is ${fahrenheit(20)} fahrenheit`) + + +// Level 2 +// A +function largerNumber(a,b:number): number{ + if(a>b){ + return a; + } + return b; +} +console.log(`The larger number is ${largerNumber(20,30)}`); + +// B +function relativeHeight(height:number,gender:string): number{ + if(gender === "male" ){ + return height-174; + } + else if (gender === "female"){ + return height-160 + } +} +// console.log(`Your relative height is ${relativeHeight(170,`male`)}`); + +// Level 3 +// reverse function!!! +function reverseString(str) { + // Step 1. Use the split() method to return a new array + var splitString = str.split(""); // var splitString = "hello".split(""); + // ["h", "e", "l", "l", "o"] + + // Step 2. Use the reverse() method to reverse the new created array + var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse(); + // ["o", "l", "l", "e", "h"] + + // Step 3. Use the join() method to join all elements of the array into a string + var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join(""); + // "olleh" + + //Step 4. Return the reversed string + return joinArray; // "olleh" +} + + +function reverseNumber(number:number): number{ + let numAsString = number.toString() + numAsString = reverseString(numAsString) + return Number(numAsString) +} + console.log(`The reverse number of ${123456} is ${reverseNumber(123456)}`) + + + + + +// let n = prompt("Please enter a number"); +// let y: number = parseInt(n); + + + diff --git a/02-TypeScript/07-functions/puzzles-HW/Kseniya_T/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/Kseniya_T/dist/index.js new file mode 100644 index 000000000..f864ec952 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Kseniya_T/dist/index.js @@ -0,0 +1,24 @@ +var negativeNum = function (num) { + return -Math.abs(num); +}; +var celToFer = function (celDegree) { + return celDegree * 1.8 + 32; +}; +var largerNum = function (firstNum, secondNum) { + if (firstNum === secondNum) { + return "they are the same"; + } + return firstNum > secondNum ? firstNum : secondNum; +}; +var heightRelativeToGender = function (height, gender) { + var avgMaleHeight = 174; + var avgFemaleHeight = 161; + return gender === "male" ? avgMaleHeight - height : avgFemaleHeight - height; +}; +var reverseNum = function (num) { + return parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num); +}; +negativeNum(23); +celToFer(30); +largerNum(40, 21); +largerNum(12, 12); diff --git a/02-TypeScript/07-functions/puzzles-HW/Kseniya_T/index.ts b/02-TypeScript/07-functions/puzzles-HW/Kseniya_T/index.ts new file mode 100644 index 000000000..121ecb96a --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Kseniya_T/index.ts @@ -0,0 +1,30 @@ +const negativeNum = (num: number): number => { + return -Math.abs(num); +}; + +const celToFer = (celDegree: number): number => { + return celDegree * 1.8 + 32; +}; + +const largerNum = (firstNum: number, secondNum: number): number | string => { + if (firstNum === secondNum) { + return "they are the same"; + } + return firstNum > secondNum ? firstNum : secondNum; +}; + +const heightRelativeToGender = (height: number, gender: string): number => { + let avgMaleHeight: number = 174; + let avgFemaleHeight: number = 161; + + return gender === "male" ? avgMaleHeight - height : avgFemaleHeight - height; +}; + +const reverseNum = (num:number):number => { + return parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num); +} + +negativeNum(23); +celToFer(30); +largerNum(40, 21); +largerNum(12, 12); diff --git a/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/app.ts b/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/app.ts new file mode 100644 index 000000000..7b1ea9c55 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/app.ts @@ -0,0 +1,55 @@ +// Level 1____________________________________ +// 1) +function negativeNumber(num:number):number { + return num*(-1); +} +console.log(negativeNumber(20)); + +// 2) +function squareNumber(num:number):number{ + return Math.sqrt(num); +} +console.log(squareNumber(20)); + +// 3) +function celToFahr(num:number):number { + return (num*9/5)+32; +} +console.log(celToFahr(10)); + +// level 2____________________________________ +// 1) +function largerOfTwo(num1:number,num2:number):number { + if (num1 > num2) { + return num1; + } else { + return num2; + } +} +console.log(largerOfTwo(10,20)); + +// 2) +function heightToGender(height:number,gender:string):number { + if (gender === 'male') { + return height - 174; + } else { + return height - 163; + } +} +console.log(heightToGender(170,'male')); + +// Level 3____________________________________ +// 1) +function reverseNumber(num:number):number { + let digit, result = 0 + + while(num){ + digit = num % 10 + result = (result * 10) + digit + num = num/10|0 + } + return result +} +console.log(reverseNumber(1234)); + + diff --git a/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/dist/app.js b/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/dist/app.js new file mode 100644 index 000000000..4760207e4 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/dist/app.js @@ -0,0 +1,49 @@ +// Level 1____________________________________ +// 1) +function negativeNumber(num) { + return num * (-1); +} +console.log(negativeNumber(20)); +// 2) +function squareNumber(num) { + return Math.sqrt(num); +} +console.log(squareNumber(20)); +// 3) +function celToFahr(num) { + return (num * 9 / 5) + 32; +} +console.log(celToFahr(10)); +// level 2____________________________________ +// 1) +function largerOfTwo(num1, num2) { + if (num1 > num2) { + return num1; + } + else { + return num2; + } +} +console.log(largerOfTwo(10, 20)); +// 2) +function heightToGender(height, gender) { + if (gender === 'male') { + return height - 174; + } + else { + return height - 163; + } +} +console.log(heightToGender(170, 'male')); +// Level 3____________________________________ +// 1) +function reverseNumber(num) { + var digit, result = 0; + while (num) { + digit = num % 10; + result = (result * 10) + digit; + num = num / 10 | 0; + } + return result; +} +console.log(reverseNumber(1234)); diff --git a/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/index.html b/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Nikita Rossenko/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/dist/index.js new file mode 100644 index 000000000..676d60780 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/dist/index.js @@ -0,0 +1,76 @@ +//Level 1 +console.log("Level 1"); +function negativeNum(num) { + return num * -1; +} +console.log("5 as a negative number is: " + negativeNum(5)); +function square(num) { + return num * num; +} +console.log("5 square is: " + square(5)); +function cTof(num) { + return num * 1.8 + 32; +} +console.log("24 deg in C is " + cTof(24) + "in F"); +//Level 2 +console.log("Level 2"); +function biggerNum(num1, num2) { + if (num1 > num2) { + return num1; + } + else { + return num2; + } +} +console.log("The bigger number between 3 and 7 is: " + biggerNum(7, 3)); +function avrHeight() { + var check1 = true; + var realHeight = 0; + while (check1) { + var heightSTR = prompt("Insert your height:"); + if (heightSTR != null && heightSTR != "") { + var height = parseInt(heightSTR); + realHeight = height; + check1 = false; + } + else { + alert("Try again"); + } + } + var avrHeight = 0; + var check = true; + while (check) { + var gender = prompt("Enter your gender(male/female):"); + switch (gender) { + case "male": + avrHeight = 177; + check = false; + break; + case "female": + avrHeight = 166; + check = false; + break; + default: alert("Invalid gender"); + } + } + return realHeight - avrHeight; +} +// console.log(avrHeight()); +var x = 54; +console.log(x.toString()); +//Level 3 +console.log("Level 3"); +function reverse(num) { + var str = num.toString(); + var count = 0; + while (num > 1) { + count++; + num /= 10; + } + var newStr = ""; + for (var i = count; i > 0; i--) { + newStr += str[i - 1]; + } + return parseInt(newStr); +} +console.log("123 reverse is: " + reverse(123)); diff --git a/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/index.html b/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/index.html new file mode 100644 index 000000000..4200eb46e --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/index.html @@ -0,0 +1,12 @@ + + + + + + + Lesson 7 + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/index.ts b/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/index.ts new file mode 100644 index 000000000..400d41c4e --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Omer.Virshuvski/index.ts @@ -0,0 +1,84 @@ +//Level 1 +console.log("Level 1"); +function negativeNum(num: number): number { + return num * -1; +} +console.log("5 as a negative number is: " + negativeNum(5)); + +function square(num: number): number { + return num * num; +} +console.log("5 square is: " + square(5)); + +function cTof(num: number): number { + return num * 1.8 + 32; +} +console.log("24 deg in C is " + cTof(24) + "in F"); + + +//Level 2 +console.log("Level 2"); +function biggerNum(num1: number, num2: number): number { + if (num1 > num2) { + return num1; + } else { + return num2; + } +} +console.log("The bigger number between 3 and 7 is: " + biggerNum(7, 3)); + +function avrHeight(): number { + var check1 = true; + var realHeight = 0; + while (check1) { + var heightSTR = prompt("Insert your height:") + if (heightSTR != null && heightSTR != "") { + var height = parseInt(heightSTR); + realHeight = height; + check1 = false; + } else { + alert("Try again"); + } + } + var avrHeight = 0; + var check = true; + while (check) { + var gender = prompt("Enter your gender(male/female):"); + switch (gender) { + case "male": + avrHeight = 177; + check = false; + break; + case "female": + avrHeight = 166; + check = false; + break; + default: alert("Invalid gender") + } + } + return realHeight - avrHeight; +} +// console.log(avrHeight()); + + +var x = 54; +console.log(x.toString()); +//Level 3 +console.log("Level 3"); +function reverse(num:number):number { + var str:string = num.toString(); + var count = 0; + while (num > 1) { + count++; + num /= 10; + } + var newStr = ""; + for (let i = count; i > 0; i--) { + newStr += str[i-1]; + } + return parseInt(newStr) +} +console.log("123 reverse is: " + reverse(123)); + + + diff --git a/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/dist/index.js new file mode 100644 index 000000000..8f16b525e --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/dist/index.js @@ -0,0 +1,41 @@ +// Level 1: +var number = prompt("Enter a number"); +console.log("The invert value of ", number, "is: ", number * (-1)); +var number2 = prompt("Enter a second number"); +console.log("The square root of ", number2, "is: ", Math.sqrt(number2)); +var celsius = prompt("Enter degrees in Celsius"); +console.log("Degrees in Fahrenheit: ", celsius * 1.8 + 32); +//Level 2: +var integer1 = prompt("Enter first integer"); +var integer2 = prompt("Enter second integer"); // Given that integer2 isn't equal to integer1 +if (integer1 > integer2) { + console.log(integer1, "is bigger than ", integer2); +} +else { + console.log(integer2, "is bigger than ", integer1); +} +var gender = prompt("Are you a male or a female?"); +var height = prompt("Enter your height in cm"); +parseInt(height, 8); +if (gender === "male") { + if (height > 174) { + console.log("your height is ", (height - 174), " cm above average"); + } + else { + console.log("Your height is ", (174 - height), " cm below average"); + } +} +else { + if (height >= 160) { + console.log("your height is ", (height - 160), " cm above average"); + } + else { + console.log("Your height is ", (160 - height), " cm below average"); + } +} +//level 3: +var str = prompt("Enter a number to reverse"); +var splitString = str.split(''); +var reverseArray = splitString.reverse(); +var newString = reverseArray.join(''); +console.log(newString); diff --git a/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/index.html b/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/index.html new file mode 100644 index 000000000..59e874bee --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/index.ts b/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/index.ts new file mode 100644 index 000000000..4da62e4bb --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/Tanya Holczer/index.ts @@ -0,0 +1,51 @@ +// Level 1: +let number = prompt("Enter a number"); +console.log("The invert value of ", number, "is: ", number * (-1)); + +let number2 = prompt("Enter a second number"); +console.log("The square root of ", number2, "is: ", Math.sqrt(number2)); + +let celsius = prompt("Enter degrees in Celsius"); +console.log("Degrees in Fahrenheit: ", celsius*1.8+32); + +//Level 2: +let integer1 = prompt("Enter first integer"); +let integer2 = prompt("Enter second integer"); // Given that integer2 isn't equal to integer1 +if (integer1 > integer2) { +console.log(integer1, "is bigger than ", integer2); +} +else { + console.log(integer2, "is bigger than ", integer1); +} + + +let gender = prompt("Are you a male or a female?"); +let height:number = prompt("Enter your height in cm"); +parseInt(height,8); +if (gender === "male") { + if (height>174) { + console.log("your height is ", (height-174), " cm above average"); + } + else { + console.log("Your height is ", (174-height), " cm below average"); +} +} +else { + if (height >= 160) { + console.log("your height is ", (height-160), " cm above average"); + } + else { + console.log("Your height is ", (160-height), " cm below average"); + } +} + + +//level 3: + +let str = prompt("Enter a number to reverse"); + +let splitString = str.split('') +let reverseArray = splitString.reverse(); +let newString = reverseArray.join(''); + +console.log(newString); diff --git a/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/app.ts b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/app.ts new file mode 100644 index 000000000..917742dd5 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/app.ts @@ -0,0 +1,29 @@ +function reversedNum(num: number): number { + return ( + parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num) + ); +} + +//arrow function returns reversed number as a string +const revNum = (num: number) => + ( + parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num) + ).toString(); + +console.log(reversedNum(123456789)); +console.log(reversedNum(-123456789)); + +console.log(revNum(32546758654)); +console.log(revNum(-6754341232145364)); + +const inputNumber = document.querySelector("#number") as HTMLInputElement; +const output = document.querySelector("#output") as HTMLHeadElement; + +inputNumber.addEventListener("keydown", (e) => { + e.defaultPrevented; + + if (e.key == "Enter") { + output.textContent = revNum(parseFloat(inputNumber.value)); + inputNumber.value = ''; + } +}); diff --git a/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/dist/app.js b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/dist/app.js new file mode 100644 index 000000000..ef2d83ff4 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/dist/app.js @@ -0,0 +1,20 @@ +function reversedNum(num) { + return (parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num)); +} +//arrow function returns reversed number as a string +var revNum = function (num) { + return (parseFloat(num.toString().split("").reverse().join("")) * Math.sign(num)).toString(); +}; +console.log(reversedNum(123456789)); +console.log(reversedNum(-123456789)); +console.log(revNum(32546758654)); +console.log(revNum(-6754341232145364)); +var inputNumber = document.querySelector("#number"); +var output = document.querySelector("#output"); +inputNumber.addEventListener("keydown", function (e) { + e.defaultPrevented; + if (e.key == "Enter") { + output.textContent = revNum(parseFloat(inputNumber.value)); + inputNumber.value = ''; + } +}); diff --git a/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/dist/dist/app.dev.js b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/dist/dist/app.dev.js new file mode 100644 index 000000000..9387ca12c --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/dist/dist/app.dev.js @@ -0,0 +1,7 @@ +"use strict"; + +function reverseNum(num) { + return num.split('').reverse(); +} + +console.log(reverseNum(123)); \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/index.html b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/index.html new file mode 100644 index 000000000..a78f344d2 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/VladiBykanov/index.html @@ -0,0 +1,30 @@ + + + + + + + Functions Home Work + + + + + +

    Your reversed number will be displayed here

    + + + diff --git a/02-TypeScript/07-functions/puzzles-HW/angela/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/angela/dist/index.js new file mode 100644 index 000000000..52536d767 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/angela/dist/index.js @@ -0,0 +1,65 @@ +// ***level 1*** +// 1.1 +console.log("**level 1**"); +function negative(number) { + return -Math.abs(number); +} +var massageStr = prompt("choose a number"); +if (massageStr) { + var massage = parseInt(massageStr); + console.log("1.1) " + negative(massage)); +} +// 1.2 +function square(num) { + return Math.sqrt(num); +} +console.log("1.2) " + square(12).toFixed(3)); +// 1.3 +function Fahrenheit(celsius) { + return (celsius * 9 / 5) + 32; +} +console.log("1.3) " + Fahrenheit(15) + "\u00B0f "); +// ***level 2*** +// 2.1 +console.log("**level 2**"); +function max(num1, num2) { + return Math.max(num1, num2); +} +console.log("2.1) " + max(3, 9)); +// 2.2 +function avrageHeight(gender, height) { + if (gender == "male") { + return height - 174; + } + else if (gender == "woman" || "female") { + return height - 160; + } +} +var gender = prompt("what is your biological gender?"); +if (gender == " " || !gender) { + alert("please enter a gender"); +} +if (gender == "male" || "man") { + var heightStr = prompt("what is your height?"); + if (heightStr) { + var height = parseInt(heightStr); + console.log("2.2) you are a " + gender + " and your height is " + height + " ,compared to the average population you are taller or shorter by " + avrageHeight(gender, height) + "cm"); + } + else if (gender == "woman" || "female") { + var heightStr_1 = prompt("what is your height?"); + if (heightStr_1) { + var height = parseInt(heightStr_1); + console.log("2.2) you are a " + gender + " and your height is " + height + " ,compared to the average population you are taller or shorter by " + avrageHeight(gender, height) + "cm"); + } + } +} +// ***level 3*** +console.log("**level 3**"); +function reversedNum(num) { + return (num + .toString() + .split('') + .reverse() + .join('')); +} +console.log("3) " + reversedNum(6543.21)); diff --git a/02-TypeScript/07-functions/puzzles-HW/angela/index.html b/02-TypeScript/07-functions/puzzles-HW/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/angela/index.ts b/02-TypeScript/07-functions/puzzles-HW/angela/index.ts new file mode 100644 index 000000000..b6f9b601d --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/angela/index.ts @@ -0,0 +1,72 @@ +// ***level 1*** +// 1.1 +console.log("**level 1**") +function negative (number:number) { + return -Math.abs(number); +} +const massageStr = prompt("choose a number") +if (massageStr){ + const massage = parseInt(massageStr) + console.log(`1.1) ${negative(massage)}`) +} +// 1.2 +function square (num:number){ + return Math.sqrt(num) +} +console.log(`1.2) ${square(12).toFixed(3)}`); + +// 1.3 +function Fahrenheit (celsius:number){ + return ( celsius* 9/5)+32 +} +console.log(`1.3) ${Fahrenheit(15)}°f `); + +// ***level 2*** +// 2.1 +console.log("**level 2**") +function max (num1:number,num2:number){ + return Math.max(num1,num2) + +} +console.log(`2.1) ${max(3,9)}`); +// 2.2 + +function avrageHeight (gender:string,height:number){ + if (gender=="male"){ + return height-174 + } else if (gender=="woman"||"female"){ + return height-160 + } + +} +const gender=prompt("what is your biological gender?") +if (gender== " " ||!gender ){ + alert("please enter a gender"); + } +if (gender=="male"||"man"){ + let heightStr=prompt("what is your height?") + if (heightStr){ + const height = parseInt(heightStr) + console.log(`2.2) you are a ${gender} and your height is ${height} ,compared to the average population you are taller or shorter by ${avrageHeight(gender,height)}cm`) +}else if (gender=="woman"||"female"){ + let heightStr=prompt("what is your height?") + if (heightStr){ + const height = parseInt(heightStr) + console.log(`2.2) you are a ${gender} and your height is ${height} ,compared to the average population you are taller or shorter by ${avrageHeight(gender,height)}cm`) + } + +} +} +// ***level 3*** +console.log("**level 3**") +function reversedNum(num:number) { + return ( + num + .toString() + .split('') + .reverse() + .join('') + ) + + } +console.log(`3) ${reversedNum(6543.21)}`) \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/instructions.md b/02-TypeScript/07-functions/puzzles-HW/instructions.md new file mode 100644 index 000000000..49f0372da --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/instructions.md @@ -0,0 +1,22 @@ +# Level 1 + +1. Write a JavaScript function that returns the negative number of a number. + Example: + x = 32243; + Expected Output: -32243; + +2. Write a function that returns the square of a number + +3. Write a function to convert Celsius to Fahrenheit + +# Level 2 + +1. Crate a function that gets to numbers and returns the larger of the two + +2. Create a function that gets the gender of the user and height of the user. + The function returns the height of the user relative to his gender. For example, the user's height is 170cm, and the gender is male. + The average height of males is 174cm, and the function return -4 + +# Level 3 + +1. Write a function to reverse a number. For example, the function gets 123 and returns 321 diff --git a/02-TypeScript/07-functions/puzzles-HW/john-ben/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/john-ben/dist/index.js new file mode 100644 index 000000000..d88537e9a --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/john-ben/dist/index.js @@ -0,0 +1,30 @@ +//ex1-1 +// let num = 32243 +// function negative_Number (num:number){ +// if (num < 0){ +// return num; +// } +// else{ +// let x = num * -1 +// return x +// } +// } +// console.log(`the negative number of ${num}is ${negative_Number(num)}`) +// ex 2-1 +// let numero1 = 555 +// let numero2 = 555 +// function is_higer (numero1:number,numero2:number){ +// if(numero1 == numero2){ +// return console.log("this is the same number") +// } +// else{ +// return Math.max(numero1,numero2) +// } +// } +// console.log(`the biggest number is ${is_higer(numero1,numero2)}`) +//ex3: +var num = 566; +function reversed_Num(num) { + return (parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num)); +} +console.log("the reverse number of " + num + " is " + reversed_Num(num)); diff --git a/02-TypeScript/07-functions/puzzles-HW/john-ben/index.html b/02-TypeScript/07-functions/puzzles-HW/john-ben/index.html new file mode 100644 index 000000000..68ae0f89a --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/john-ben/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/john-ben/index.ts b/02-TypeScript/07-functions/puzzles-HW/john-ben/index.ts new file mode 100644 index 000000000..86cae384d --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/john-ben/index.ts @@ -0,0 +1,38 @@ +//ex1-1 +// let num = 32243 +// function negative_Number (num:number){ +// if (num < 0){ +// return num; +// } +// else{ +// let x = num * -1 +// return x +// } +// } +// console.log(`the negative number of ${num}is ${negative_Number(num)}`) + + + +// ex 2-1 +// let numero1 = 555 +// let numero2 = 555 + +// function is_higer (numero1:number,numero2:number){ +// if(numero1 == numero2){ +// return console.log("this is the same number") +// } +// else{ +// return Math.max(numero1,numero2) +// } +// } +// console.log(`the biggest number is ${is_higer(numero1,numero2)}`) + + + +//ex3: +let num = 566 + +function reversed_Num(num:number) { + return (parseFloat(num.toString().split('').reverse().join('')) * Math.sign(num)) + } + console.log(`the reverse number of ${num} is ${reversed_Num(num)}`) diff --git a/02-TypeScript/07-functions/puzzles-HW/tomerCohen/FullStack-INT-2022-Oct.code-workspace b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/FullStack-INT-2022-Oct.code-workspace new file mode 100644 index 000000000..84f717a12 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/FullStack-INT-2022-Oct.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "../../../.." + }, + { + "path": "../../../.." + } + ], + "settings": { + "compile-hero.disable-compile-files-on-did-save-code": false + } +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/tomerCohen/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/dist/index.js new file mode 100644 index 000000000..b00bf3f32 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/dist/index.js @@ -0,0 +1,39 @@ +var n = 35; +//level 1,1// +function negativnum(n) { + return n * -1; +} +console.log(negativnum(n)); +//level 1,2// +function squareNumbe(n) { + return (Math.sqrt(n)); +} +console.log(squareNumbe(n)); +//level 1,3// +function celesuisToFahrenheit(n) { + return n * 1.8 + 32; +} +console.log(celesuisToFahrenheit(n)); +//level 2,1// +function largerNumber(low, high) { + if (low > high) { + return low; + } + else { + return high; + } +} +console.log(largerNumber(1000, 350)); +//level 2,2// +function genderHight(avr, male) { + if (male === "male") { + return avr - 174; + } +} +console.log(genderHight(170, "male")); +// level 3,1// +// const revers= 1234 +// function reverseNumbers(revers:number):number{ +// // return +// } +// console.log(reverseNumbers(n)); diff --git a/02-TypeScript/07-functions/puzzles-HW/tomerCohen/index.html b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/tomerCohen/index.ts b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/index.ts new file mode 100644 index 000000000..5309b2596 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/tomerCohen/index.ts @@ -0,0 +1,53 @@ +var n:number=35 +//level 1,1// +function negativnum(n:number):number{ + return n*-1 + +} +console.log(negativnum(n)); + +//level 1,2// + +function squareNumbe(n:number):number{ + + return (Math.sqrt(n)) +} +console.log(squareNumbe(n)); + +//level 1,3// + +function celesuisToFahrenheit(n:number):number{ + return n*1.8+32 +} +console.log(celesuisToFahrenheit(n)); + + +//level 2,1// + +function largerNumber(low:number,high:number):number{ + if (low > high) { + return low; + } else { + return high; + } +} +console.log(largerNumber(1000,350)); + +//level 2,2// + +function genderHight(avr:number,male:string){ + if (male === `male`) { + return avr - 174; + } +} +console.log(genderHight(170,`male`)); + + +// level 3,1// +// const revers= 1234 +// function reverseNumbers(revers:number):number{ +// // return +// } +// console.log(reverseNumbers(n)); + + diff --git a/02-TypeScript/07-functions/puzzles-HW/uriel bargil/dist/index.js b/02-TypeScript/07-functions/puzzles-HW/uriel bargil/dist/index.js new file mode 100644 index 000000000..a05adee67 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/uriel bargil/dist/index.js @@ -0,0 +1,37 @@ +// // level 1 +// // 2. +// function square(x: number): number { +// return x * x; +// } +// const result = square(3); +// console.log (result); +// // 3. +// function celsiusToFahrenheit(celsius: number): number { +// return celsius * (9/5) + 32; +// } +// const fahrenheit = celsiusToFahrenheit(20); +// console.log (`the fahrenheit is ${fahrenheit}`); +// level 2 +// 1. +// function getLargerNumber(num1: number, num2: number): number { +// if (num1 > num2) { +// return num1; +// } else { +// return num2; +// } +// } +// const largerNumber = getLargerNumber(10, 20); +// console.log (`the larger number is : ${largerNumber}`); +// level 3 +// 1. +// function reverseNumber(num: number): number { +// let reversed = 0; +// while (num > 0) { +// reversed = reversed * 10 + (num % 10); +// num = Math.floor(num / 10); +// } +// return reversed; +// } +// let num = prompt("Enter a number:"); +// let reversed = reverseNumber(num ); +// console.log(`The reverse of ${num} is ${reversed}`); diff --git a/02-TypeScript/07-functions/puzzles-HW/uriel bargil/index.html b/02-TypeScript/07-functions/puzzles-HW/uriel bargil/index.html new file mode 100644 index 000000000..ec11d3b0a --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/uriel bargil/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/07-functions/puzzles-HW/uriel bargil/index.ts b/02-TypeScript/07-functions/puzzles-HW/uriel bargil/index.ts new file mode 100644 index 000000000..099205a69 --- /dev/null +++ b/02-TypeScript/07-functions/puzzles-HW/uriel bargil/index.ts @@ -0,0 +1,46 @@ +// // level 1 +// // 2. +// function square(x: number): number { +// return x * x; +// } +// const result = square(3); +// console.log (result); + +// // 3. +// function celsiusToFahrenheit(celsius: number): number { +// return celsius * (9/5) + 32; +// } +// const fahrenheit = celsiusToFahrenheit(20); +// console.log (`the fahrenheit is ${fahrenheit}`); + +// level 2 +// 1. +// function getLargerNumber(num1: number, num2: number): number { +// if (num1 > num2) { +// return num1; +// } else { +// return num2; +// } + +// } +// const largerNumber = getLargerNumber(10, 20); +// console.log (`the larger number is : ${largerNumber}`); + + +// level 3 +// 1. +// function reverseNumber(num: number): number { +// let reversed = 0; +// while (num > 0) { +// reversed = reversed * 10 + (num % 10); +// num = Math.floor(num / 10); +// } +// return reversed; +// } + +// let num = prompt("Enter a number:"); +// let reversed = reverseNumber(num ); +// console.log(`The reverse of ${num} is ${reversed}`); + + + diff --git a/02-TypeScript/07-functions/shlomi_a/.vscode/settings.json b/02-TypeScript/07-functions/shlomi_a/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/07-functions/shlomi_a/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/07-functions/shlomi_a/app.ts b/02-TypeScript/07-functions/shlomi_a/app.ts new file mode 100644 index 000000000..a9048aa0c --- /dev/null +++ b/02-TypeScript/07-functions/shlomi_a/app.ts @@ -0,0 +1,17 @@ + + +function count(n:number):number { + let sum=0; + + for (let i = 1; i <=n; i++) { + for (let j = 1; j <=n; j++) { + sum =sum+(i+j); + } + } + return sum; +} + + +console.log(count(2)); + + diff --git a/02-TypeScript/07-functions/shlomi_a/dist/app.js b/02-TypeScript/07-functions/shlomi_a/dist/app.js new file mode 100644 index 000000000..5a627ee77 --- /dev/null +++ b/02-TypeScript/07-functions/shlomi_a/dist/app.js @@ -0,0 +1,10 @@ +function count(n) { + var sum = 0; + for (var i = 1; i <= n; i++) { + for (var j = 1; j <= n; j++) { + sum = sum + (i + j); + } + } + return sum; +} +console.log(count(2)); diff --git a/02-TypeScript/07-functions/shlomi_a/index.html b/02-TypeScript/07-functions/shlomi_a/index.html new file mode 100644 index 000000000..0a14a1d95 --- /dev/null +++ b/02-TypeScript/07-functions/shlomi_a/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.css new file mode 100644 index 000000000..6dccf9527 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.css @@ -0,0 +1,267 @@ +:root { + font-size: 16px; +} +@media only screen and (min-width: 1400px) { + :root { + font-size: 18px; + } +} +@media only screen and (min-width: 1300px) { + :root { + font-size: 24px; + } +} + +body { + margin: 0; + background-color: rgb(16, 16, 16); +} + +.videoSlide { + display: none; +} + +.zoom { + -webkit-animation-name: zoom; + animation-name: zoom; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-duration: 10.1s; + animation-duration: 10.1s; +} + +.container { + height: 100vh; + width: 100vw; + margin: 0; + color: white; + position: relative; +} +.container .navBar { + width: 100vw; + height: 5vh; + background-color: rgb(0, 0, 0); + font-weight: 900; + padding-left: 14vw; + padding-right: 14vw; + position: -webkit-sticky; + position: sticky; + top: 0rem; + z-index: 10; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; +} +.container .navBar__topics { + width: 40vw; + display: flex; + justify-content: space-between; + align-items: center; +} +.container .navBar__topics__logo { + height: 1.2rem; + background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Netflix_icon.svg/1200px-Netflix_icon.svg.png); + background-size: contain; + background-repeat: no-repeat; + width: 2.2rem; +} +.container .navBar__topics__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .navBar__sales { + width: 20vw; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.container .navBar__sales__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .main { + height: 18rem; + width: 36rem; + border: 0.2rem solid rgb(0, 0, 0); + border-radius: 0.5rem; + position: relative; + top: 5rem; + left: 10rem; + display: block; + line-height: 1.5rem; +} +.container .main__video { + height: 18rem; + width: 36rem; + position: relative; + top: 0rem; + background-size: 100%; + background-repeat: no-repeat; + display: block; +} +.container .main__video__data { + height: 11.5rem; + width: 11rem; + position: relative; + top: 1rem; + left: 2rem; + padding: 1rem; + -webkit-animation: slide 10s linear 1; + animation: slide 10s linear 1; + display: flex; + flex-direction: column; + justify-content: space-between; + -webkit-animation-name: textSlide; + animation-name: textSlide; + -webkit-animation-duration: 10s; + animation-duration: 10s; +} +.container .main__video__data__headline { + width: 32rem; + font-weight: 900; + font-size: 2rem; + line-height: 2.5rem; + margin-bottom: 1rem; +} +.container .main__video__data__basic { + font-weight: 300; + font-size: 1rem; + line-height: 1.5rem; + margin: 0rem; + display: flex; + flex-direction: column; + gap: 0.2rem; +} +.container .main__video__data__order { + width: 10rem; + height: 2rem; + background-color: rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + font-size: 0.6rem; + padding: 0.5rem; + margin-top: 3rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(97, 97, 97); +} +.container .main__video__data__order:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.container .main__video__data__order:active { + background-color: rgb(74, 10, 251); +} +.container .main__video--x-men { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%), url(https://cdn.mos.cms.futurecdn.net/e6hWKhmXszRLNSvPRHizZ5.jpg); +} +.container .main__video--avengers { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 77%), url(https://wallpaperaccess.com/full/500732.jpg); +} +.container .main__video--frozen { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 77%), url(https://w0.peakpx.com/wallpaper/611/280/HD-wallpaper-frozen-2013-sister-frozen-pink-princess-blue-poster-anna-movie-elsa-fantasy-snow-queen-disney.jpg); +} +.container .main__video--fightClub { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 77%), url(https://wallup.net/wp-content/uploads/2019/09/264400-movies-fight-club-brad-pitt-edward-norton-tyler-durden-t-o.jpg); +} +.container .watchlist { + border: 0.3rem solid rgb(255, 217, 5); + height: 17rem; + width: 12rem; + border-radius: 0.4rem; + background-color: rgb(16, 16, 16); + position: relative; + bottom: 13rem; + left: 49rem; + display: flex; + flex-direction: column; + align-items: center; +} +.container .watchlist__header { + height: 2rem; + width: 12rem; + color: rgb(255, 217, 5); + font-size: 1.3rem; + line-height: 0.5rem; + text-align: center; + vertical-align: middle; + padding-top: 1.1rem; + font-weight: 550; + margin: 0; +} +.container .watchlist__item { + height: 1.5rem; + width: 9rem; + color: rgb(252, 252, 252); + line-height: 1.3rem; + text-align: center; + vertical-align: middle; + font-weight: 550; + margin: 0.7rem; + background-color: rgb(16, 16, 16); + border: 0.08rem solid rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + font-size: 1rem; + padding: 0.5rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(255, 230, 0); + pointer-events: none; +} +.container .watchlist__item:hover { + box-shadow: none; + transition: 0.5s; +} +.container .watchlist__item__removeIcon { + height: 1.2rem; + width: 1.2rem; + position: relative; + left: 8rem; + bottom: 1.2rem; + margin: 0; + padding: 0; + color: white; + pointer-events: auto; +} +.container .watchlist__item__removeIcon:hover { + color: rgb(248, 11, 11); + transition: 0.5s; +} +.container .watchlist__item__removeIcon:active { + color: rgb(239, 235, 235); +} + +@-webkit-keyframes zoom { + 100% { + background-size: 112%; + } +} + +@keyframes zoom { + 100% { + background-size: 112%; + } +} +@-webkit-keyframes textSlide { + 0% { + left: 12rem; + } + 3% { + left: 2rem; + } + 100% { + left: 2rem; + } +} +@keyframes textSlide { + 0% { + left: 12rem; + } + 3% { + left: 2rem; + } + 100% { + left: 2rem; + } +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.html new file mode 100644 index 000000000..2bfb6d5e5 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.html @@ -0,0 +1,108 @@ + + + + + + + + + + Amitflix + + + +
    +
    +
    + +
    Action
    +
    Thrillers
    +
    Sci-fi
    +
    Comedy
    +
    Drama
    +
    Series
    +
    Documentary
    +
    Nature
    +
    Music
    +
    Sports
    +
    +
    +
    Downloads
    +
    Premium
    +
    Profile
    +
    Settings
    +
    +
    + +
    +
    +
    +
    X-men
    +
    +
    Genre: Action
    +
    Release date: 14.7.2000
    +
    Director: Bryan Singer
    +
    + +
    +
    +
    +
    +
    Avengers
    +
    +
    Genre: Action
    +
    Release date: 11.4.2012
    +
    Director: Joss Whedon
    +
    + +
    +
    +
    +
    +
    Frozen
    +
    +
    Genre: Musical Fantasy
    +
    Release date: 28.11.2013
    +
    Director: Chris Buck
    +
    + +
    +
    +
    +
    +
    Fight Club
    +
    +
    Genre: Thriller
    +
    Release date: 17.8.1996
    +
    Director: David Fincher
    +
    + +
    +
    +
    + +
    +
    Watchlist
    +
    +
    +
    + + + + + + + + + + + + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.scss b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.scss new file mode 100644 index 000000000..2892371a6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.scss @@ -0,0 +1,231 @@ +:root{ + font-size: 16px; + + @media only screen and (min-width:1400px){ + font-size: 18px; + } + @media only screen and (min-width:1300px){ + font-size: 24px; + } +} + +body{ + margin: 0; + background-color: rgb(16, 16, 16); +} + +.videoSlide{display: none;} + +.zoom { + animation-name: zoom; + animation-timing-function: linear; + animation-duration: 10.1s;} + +.container{ + height: 100vh; + width: 100vw; + margin: 0; + color: white; + position: relative; + + .navBar{ + width: 100vw; + height: 5vh; + background-color: rgb(0, 0, 0); + font-weight: 900; + padding-left: 14vw; + padding-right: 14vw; + position: sticky; + top: 0rem; + z-index: 10; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + &__topics{ + width: 40vw; + display: flex; + justify-content: space-between; + align-items: center; + &__logo{ + height: 1.2rem; + background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Netflix_icon.svg/1200px-Netflix_icon.svg.png); + background-size: contain; + background-repeat: no-repeat; + width: 2.2rem; + } + &__topic{ + width: auto; + font-size: 0.5rem; + text-align: center; + } + } + &__sales{ + width: 20vw; + display: flex; + justify-content: space-evenly; + align-items: center; + &__topic{ + width: auto; + font-size: 0.5rem; + text-align: center; + } + } + } + + .main{ + height: 18rem; + width: 36rem; + border: 0.2rem solid rgb(0, 0, 0); + border-radius: 0.5rem; + position: relative; + top: 5rem; + left: 10rem; + display: block; + line-height: 1.5rem; + &__video{ + height: 18rem; + width: 36rem; + position: relative; + top: 0rem; + background-size: 100%; + background-repeat: no-repeat; + display: block; + &__data{ + height: 11.5rem; + width: 11rem; + position: relative; + top: 1rem; + left: 2rem; + padding: 1rem; + animation: slide 10s linear 1; + display: flex; + flex-direction: column; + justify-content: space-between; + animation-name: textSlide; + animation-duration: 10s ; + &__headline{ + width: 32rem; + font-weight: 900; + font-size: 2rem; + line-height: 2.5rem; + margin-bottom: 1rem; + } + &__basic{ + font-weight: 300; + font-size: 1rem; + line-height: 1.5rem; + margin: 0rem; + display: flex; + flex-direction: column; + gap: 0.2rem; + } + &__order{ + width: 10rem; + height: 2rem; + background-color: rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + font-size: 0.6rem; + padding: 0.5rem; + margin-top: 3rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(97, 97, 97); + &:hover{ + background-color: white; + box-shadow: none; + transition: 0.5s; + } + &:active{background-color: rgb(74, 10, 251);} + } + } + &--x-men{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)70%), url(https://cdn.mos.cms.futurecdn.net/e6hWKhmXszRLNSvPRHizZ5.jpg); + } + &--avengers{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)77%), url(https://wallpaperaccess.com/full/500732.jpg); + } + &--frozen{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)77%), url(https://w0.peakpx.com/wallpaper/611/280/HD-wallpaper-frozen-2013-sister-frozen-pink-princess-blue-poster-anna-movie-elsa-fantasy-snow-queen-disney.jpg); + } + &--fightClub{ + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)77%), url(https://wallup.net/wp-content/uploads/2019/09/264400-movies-fight-club-brad-pitt-edward-norton-tyler-durden-t-o.jpg); + } + } + } + + .watchlist{ + border: 0.3rem solid rgb(255, 217, 5); + height: 17rem; + width: 12rem; + border-radius: 0.4rem; + background-color: rgb(16, 16, 16); + position: relative; + bottom: 13rem; + left: 49rem; + display: flex; + flex-direction: column; + align-items: center; + &__header{ + height: 2rem; + width: 12rem; + color: rgb(255, 217, 5); + font-size: 1.3rem; + line-height: 0.5rem; + text-align: center; + vertical-align: middle; + padding-top: 1.1rem; + font-weight: 550; + margin: 0; + } + &__item{ + height: 1.5rem; + width: 9rem; + color: rgb(252, 252, 252); + line-height: 1.3rem; + text-align: center; + vertical-align: middle; + font-weight: 550; + margin: 0.7rem; + background-color: rgb(16, 16, 16); + border: 0.08rem solid rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + font-size: 1rem; + padding: 0.5rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(255, 230, 0); + pointer-events: none; + &:hover{ + box-shadow: none; + transition: 0.5s; + } + &__removeIcon{ + height: 1.2rem; + width: 1.2rem; + position: relative; + left:8rem; + bottom: 1.2rem; + margin: 0; + padding: 0; + color: white; + pointer-events: auto; + &:hover{ + color: rgb(248, 11, 11); + transition: 0.5s; + } + &:active{color: rgb(239, 235, 235);} + } + } + } +} + +@keyframes zoom{ + 100%{background-size: 112%;} +} + +@keyframes textSlide{ + 0%{left: 12rem;} + 3%{left: 2rem;} + 100%{left: 2rem;} +} + + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.ts new file mode 100644 index 000000000..7abca5129 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/Netflix.ts @@ -0,0 +1,260 @@ +/////////////////////////////////////////interfaces//////////////////////////////////////////////// + +interface Video { + name: string; + genre: string; + SN: number; + usersOrdered: string[]; +} + +interface User { + name: string; + userID: number; + videosOrdered: Video[]; +} + +/////////////////////////////////////////functions//////////////////////////////////////////////// + +function historyOfUsers(obj: Video): string[] | false { + try { + return obj.usersOrdered; + } catch (error) { + console.error(error); + return false; + } +} + +function logIn(): string | undefined { + + try { + let repeat: boolean = true; + while (repeat === true) { + const userName = prompt( + "Welcome to Amitflix! \n\nWhat is your user name?\n" + ); + if (userName !== null) { + if (isNaN(Number(userName)) && userName !== "") { + repeat = false; + const user: User = { + name: userName, + userID: 2, + videosOrdered: [], + }; + usersList.push(user); + return userName; + } else { + alert("You didn't enter any letters"); + } + } else { + alert(`Type in your user name`); + } + } + } catch (error) { + console.error(error); + } +} + +function newOrder(videoSN: Video["SN"]): void { + try { + const video = videosList.find((video) => video.SN === videoSN); + if (video === undefined) { + throw new Error(`could not find video by SN: ${videoSN}`); + } else { + const user = loggedInUser(); + validateNewVideoOnWatchlist(video, user); + + video.usersOrdered.push(user.name); + const orderedBy = historyOfUsers(video); + console.log(`The users who ordered ${video.name} are ${orderedBy}`); + } + } catch (error) { + console.error((error as Error).message); + } +} + +function loggedInUser(): User { + const user = usersList.find((user) => user.userID === 2); + if (user === undefined) { + throw new Error("could not find logged in user"); + } else { + return user; + } +} + +function addVideoToWatchlist(video: Video): void { + try { + const user = loggedInUser(); + const newVideoOnWatchlistId = `watchlistItem-${video.name}`; + validateNewVideoOnWatchlist(video, user); + + user?.videosOrdered.push(video); + + const newVideoOnWatchlist = document.createElement("div"); + newVideoOnWatchlist.innerHTML = ` +
    ${video.name} +
    + +
    +
    + `; + document.getElementById("watchlistItems")?.appendChild(newVideoOnWatchlist); + } catch (error: unknown) { + console.error((error as Error).message); + alert("this video is already on your watchlist"); + } +} + +function removeVideoFromWatchlist(videoName: string): void { + try { + const user = loggedInUser(); + + const index = user.videosOrdered.findIndex( + (video) => video.name === videoName + ); + if (index !== undefined && index > -1) { + user?.videosOrdered.splice(index, 1); + } + + const newVideoOnWatchlistId = `watchlistItem-${videoName}`; + const watchlistVideo = document.getElementById(newVideoOnWatchlistId); + if (watchlistVideo !== null) { + watchlistVideo.remove(); + } + } catch (error) { + console.error((error as Error).message); + } +} + +function showSlides(): void { + try { + let slides = document.getElementsByClassName( + "videoSlides" + ) as HTMLCollectionOf; + for (let i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slideIndex++; + if (slideIndex > slides.length) { + slideIndex = 1; + } + slides[slideIndex - 1].style.display = "block"; + setTimeout(showSlides, 10000); + } catch (error) { + console.error((error as Error).message); + } +} + +function validateNewVideoOnWatchlist(newVideo: Video, user: User): void { + const index = user.videosOrdered.findIndex( + (video) => video.name === newVideo.name + ); + if (index !== undefined && index > -1) { + throw new Error(`this video is already on your watchlist`); + } +} + +/////////////////////////////////////////videos//////////////////////////////////////////////// + +const xMen: Video = { + name: "X-Men", + genre: "action", + SN: 4120, + usersOrdered: ["Wolverine", "Storm"], +}; + +const avengers: Video = { + name: "Avengers", + genre: "action", + SN: 4274, + usersOrdered: ["Michaelangelo", "Leonardo", "Raphael", "Donatelo"], +}; + +const frozen: Video = { + name: "Frozen", + genre: "action", + SN: 4285, + usersOrdered: ["Gamora", "Groot", "Rocket"], +}; + +const fightClub: Video = { + name: "Fight Club", + genre: "thriller", + SN: 1050, + usersOrdered: [ + "Michaelangelo", + "Leonardo", + "Raphael", + "Donatelo", + "Wolverine", + "Storm", + "Gamora", + "Groot", + "Rocket", + "Tyler", + ], +}; + +const videosList: Video[] = [xMen, avengers, frozen, fightClub]; + +/////////////////////////////////////////users//////////////////////////////////////////////// + +const usersList: User[] = [ + { + name: "Michaelangelo", + userID: 170889, + videosOrdered: [avengers, fightClub], + }, + { + name: "Leonardo", + userID: 230193, + videosOrdered: [avengers, fightClub], + }, + { + name: "Raphael", + userID: 281092, + videosOrdered: [avengers, fightClub], + }, + { + name: "Donatelo", + userID: 240663, + videosOrdered: [avengers, fightClub], + }, + { + name: "Wolverine", + userID: 110764, + videosOrdered: [xMen, fightClub], + }, + { + name: "Storm", + userID: 170838, + videosOrdered: [xMen, fightClub], + }, + { + name: "Gamora", + userID: 211963, + videosOrdered: [frozen, fightClub], + }, + { + name: "Groot", + userID: 250289, + videosOrdered: [frozen, fightClub], + }, + { + name: "Rocket", + userID: 111111, + videosOrdered: [frozen, fightClub], + }, + { + name: "Tyler", + userID: 170896, + videosOrdered: [fightClub], + }, +]; + +//////////////////////////////////////////////////////main///////////////////////////////////////////////////// + +const activeUser = logIn(); +console.log(`the logged in user is ${activeUser}`); + +let slideIndex = 0; +showSlides(); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/Netflix.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/Netflix.css new file mode 100644 index 000000000..56a78a7d6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/Netflix.css @@ -0,0 +1,243 @@ +:root { + font-size: 16px; +} +@media only screen and (min-width: 1400px) { + :root { + font-size: 18px; + } +} +@media only screen and (min-width: 1300px) { + :root { + font-size: 24px; + } +} + +body { + margin: 0; + background-color: #101010; +} + +.videoSlide { + display: none; +} + +.zoom { + animation-name: zoom; + animation-timing-function: linear; + animation-duration: 10.1s; +} + +.container { + height: 100vh; + width: 100vw; + margin: 0; + color: white; + position: relative; +} +.container .navBar { + width: 100vw; + height: 5vh; + background-color: black; + font-weight: 900; + padding-left: 14vw; + padding-right: 14vw; + position: sticky; + top: 0rem; + z-index: 10; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; +} +.container .navBar__topics { + width: 40vw; + display: flex; + justify-content: space-between; + align-items: center; +} +.container .navBar__topics__logo { + height: 1.2rem; + background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Netflix_icon.svg/1200px-Netflix_icon.svg.png); + background-size: contain; + background-repeat: no-repeat; + width: 2.2rem; +} +.container .navBar__topics__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .navBar__sales { + width: 20vw; + display: flex; + justify-content: space-evenly; + align-items: center; +} +.container .navBar__sales__topic { + width: auto; + font-size: 0.5rem; + text-align: center; +} +.container .main { + height: 18rem; + width: 36rem; + border: 0.2rem solid black; + border-radius: 0.5rem; + position: relative; + top: 5rem; + left: 10rem; + display: block; + line-height: 1.5rem; +} +.container .main__video { + height: 18rem; + width: 36rem; + position: relative; + top: 0rem; + background-size: 100%; + background-repeat: no-repeat; + display: block; +} +.container .main__video__data { + height: 11.5rem; + width: 11rem; + position: relative; + top: 1rem; + left: 2rem; + padding: 1rem; + animation: slide 10s linear 1; + display: flex; + flex-direction: column; + justify-content: space-between; + animation-name: textSlide; + animation-duration: 10s; +} +.container .main__video__data__headline { + width: 32rem; + font-weight: 900; + font-size: 2rem; + line-height: 2.5rem; + margin-bottom: 1rem; +} +.container .main__video__data__basic { + font-weight: 300; + font-size: 1rem; + line-height: 1.5rem; + margin: 0rem; + display: flex; + flex-direction: column; + gap: 0.2rem; +} +.container .main__video__data__order { + width: 10rem; + height: 2rem; + background-color: #ffe600; + border-radius: 0.5rem; + font-weight: 900; + font-size: 0.6rem; + padding: 0.5rem; + margin-top: 3rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #616161; +} +.container .main__video__data__order:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.container .main__video__data__order:active { + background-color: #4a0afb; +} +.container .main__video--x-men { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 70%), url(https://cdn.mos.cms.futurecdn.net/e6hWKhmXszRLNSvPRHizZ5.jpg); +} +.container .main__video--avengers { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 77%), url(https://wallpaperaccess.com/full/500732.jpg); +} +.container .main__video--frozen { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 77%), url(https://w0.peakpx.com/wallpaper/611/280/HD-wallpaper-frozen-2013-sister-frozen-pink-princess-blue-poster-anna-movie-elsa-fantasy-snow-queen-disney.jpg); +} +.container .main__video--fightClub { + background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, black 77%), url(https://wallup.net/wp-content/uploads/2019/09/264400-movies-fight-club-brad-pitt-edward-norton-tyler-durden-t-o.jpg); +} +.container .watchlist { + border: 0.3rem solid #ffd905; + height: 17rem; + width: 12rem; + border-radius: 0.4rem; + background-color: #101010; + position: relative; + bottom: 13rem; + left: 49rem; + display: flex; + flex-direction: column; + align-items: center; +} +.container .watchlist__header { + height: 2rem; + width: 12rem; + color: #ffd905; + font-size: 1.3rem; + line-height: 0.5rem; + text-align: center; + vertical-align: middle; + padding-top: 1.1rem; + font-weight: 550; + margin: 0; +} +.container .watchlist__item { + height: 1.5rem; + width: 9rem; + color: #fcfcfc; + line-height: 1.3rem; + text-align: center; + vertical-align: middle; + font-weight: 550; + margin: 0.7rem; + background-color: #101010; + border: 0.08rem solid #ffe600; + border-radius: 0.5rem; + font-weight: 900; + font-size: 1rem; + padding: 0.5rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #ffe600; + pointer-events: none; +} +.container .watchlist__item:hover { + box-shadow: none; + transition: 0.5s; +} +.container .watchlist__item__removeIcon { + height: 1.2rem; + width: 1.2rem; + position: relative; + left: 8rem; + bottom: 1.2rem; + margin: 0; + padding: 0; + color: white; + pointer-events: auto; +} +.container .watchlist__item__removeIcon:hover { + color: #f80b0b; + transition: 0.5s; +} +.container .watchlist__item__removeIcon:active { + color: #efebeb; +} + +@keyframes zoom { + 100% { + background-size: 112%; + } +} +@keyframes textSlide { + 0% { + left: 12rem; + } + 3% { + left: 2rem; + } + 100% { + left: 2rem; + } +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/Netflix.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/Netflix.js new file mode 100644 index 000000000..58065e020 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/Netflix.js @@ -0,0 +1,218 @@ +/////////////////////////////////////////interfaces//////////////////////////////////////////////// +/////////////////////////////////////////functions//////////////////////////////////////////////// +function historyOfUsers(obj) { + try { + return obj.usersOrdered; + } + catch (error) { + console.error(error); + return false; + } +} +function logIn() { + try { + var repeat = true; + while (repeat === true) { + var userName = prompt("Welcome to Amitflix! \n\nWhat is your user name?\n"); + if (userName !== null) { + if (isNaN(Number(userName)) && userName !== "") { + repeat = false; + var user = { + name: userName, + userID: 2, + videosOrdered: [] + }; + usersList.push(user); + return userName; + } + else { + alert("You didn't enter any letters"); + } + } + else { + alert("Type in your user name"); + } + } + } + catch (error) { + console.error(error); + } +} +function newOrder(videoSN) { + try { + var video = videosList.find(function (video) { return video.SN === videoSN; }); + if (video === undefined) { + throw new Error("could not find video by SN: " + videoSN); + } + else { + var user = loggedInUser(); + validateNewVideoOnWatchlist(video, user); + video.usersOrdered.push(user.name); + var orderedBy = historyOfUsers(video); + console.log("The users who ordered " + video.name + " are " + orderedBy); + } + } + catch (error) { + console.error(error.message); + } +} +function loggedInUser() { + var user = usersList.find(function (user) { return user.userID === 2; }); + if (user === undefined) { + throw new Error("could not find logged in user"); + } + else { + return user; + } +} +function addVideoToWatchlist(video) { + var _a; + try { + var user = loggedInUser(); + var newVideoOnWatchlistId = "watchlistItem-" + video.name; + validateNewVideoOnWatchlist(video, user); + user === null || user === void 0 ? void 0 : user.videosOrdered.push(video); + var newVideoOnWatchlist = document.createElement("div"); + newVideoOnWatchlist.innerHTML = "\n
    " + video.name + "\n
    \n \n
    \n
    \n "; + (_a = document.getElementById("watchlistItems")) === null || _a === void 0 ? void 0 : _a.appendChild(newVideoOnWatchlist); + } + catch (error) { + console.error(error.message); + alert("this video is already on your watchlist"); + } +} +function removeVideoFromWatchlist(videoName) { + try { + var user = loggedInUser(); + var index = user.videosOrdered.findIndex(function (video) { return video.name === videoName; }); + if (index !== undefined && index > -1) { + user === null || user === void 0 ? void 0 : user.videosOrdered.splice(index, 1); + } + var newVideoOnWatchlistId = "watchlistItem-" + videoName; + var watchlistVideo = document.getElementById(newVideoOnWatchlistId); + if (watchlistVideo !== null) { + watchlistVideo.remove(); + } + } + catch (error) { + console.error(error.message); + } +} +function showSlides() { + try { + var slides = document.getElementsByClassName("videoSlides"); + for (var i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slideIndex++; + if (slideIndex > slides.length) { + slideIndex = 1; + } + slides[slideIndex - 1].style.display = "block"; + setTimeout(showSlides, 10000); + } + catch (error) { + console.error(error.message); + } +} +function validateNewVideoOnWatchlist(newVideo, user) { + var index = user.videosOrdered.findIndex(function (video) { return video.name === newVideo.name; }); + if (index !== undefined && index > -1) { + throw new Error("this video is already on your watchlist"); + } +} +/////////////////////////////////////////videos//////////////////////////////////////////////// +var xMen = { + name: "X-Men", + genre: "action", + SN: 4120, + usersOrdered: ["Wolverine", "Storm"] +}; +var avengers = { + name: "Avengers", + genre: "action", + SN: 4274, + usersOrdered: ["Michaelangelo", "Leonardo", "Raphael", "Donatelo"] +}; +var frozen = { + name: "Frozen", + genre: "action", + SN: 4285, + usersOrdered: ["Gamora", "Groot", "Rocket"] +}; +var fightClub = { + name: "Fight Club", + genre: "thriller", + SN: 1050, + usersOrdered: [ + "Michaelangelo", + "Leonardo", + "Raphael", + "Donatelo", + "Wolverine", + "Storm", + "Gamora", + "Groot", + "Rocket", + "Tyler", + ] +}; +var videosList = [xMen, avengers, frozen, fightClub]; +/////////////////////////////////////////users//////////////////////////////////////////////// +var usersList = [ + { + name: "Michaelangelo", + userID: 170889, + videosOrdered: [avengers, fightClub] + }, + { + name: "Leonardo", + userID: 230193, + videosOrdered: [avengers, fightClub] + }, + { + name: "Raphael", + userID: 281092, + videosOrdered: [avengers, fightClub] + }, + { + name: "Donatelo", + userID: 240663, + videosOrdered: [avengers, fightClub] + }, + { + name: "Wolverine", + userID: 110764, + videosOrdered: [xMen, fightClub] + }, + { + name: "Storm", + userID: 170838, + videosOrdered: [xMen, fightClub] + }, + { + name: "Gamora", + userID: 211963, + videosOrdered: [frozen, fightClub] + }, + { + name: "Groot", + userID: 250289, + videosOrdered: [frozen, fightClub] + }, + { + name: "Rocket", + userID: 111111, + videosOrdered: [frozen, fightClub] + }, + { + name: "Tyler", + userID: 170896, + videosOrdered: [fightClub] + }, +]; +//////////////////////////////////////////////////////main///////////////////////////////////////////////////// +var activeUser = logIn(); +console.log("the logged in user is " + activeUser); +var slideIndex = 0; +showSlides(); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/dist/Netflix.dev.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/dist/Netflix.dev.js new file mode 100644 index 000000000..9f553bcba --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Amit/dist/dist/Netflix.dev.js @@ -0,0 +1,109 @@ +"use strict"; + +/////////////////////////////////////////interfaces//////////////////////////////////////////////// +/////////////////////////////////////////functions//////////////////////////////////////////////// +function historyOfUsers(obj) { + try { + var history = []; + history.push(obj.usersOredred); + return history; + } catch (error) { + console.error(error); + return false; + } +} + +function newOrder(userName, obj) { + try { + if (userName !== null) { + userName = prompt("what is your user name?"); + obj.usersOredred.push("userName"); + } else { + throw new Error("type your user name"); + } + + return userName; + } catch (error) { + console.error(error); + return false; + } +} //function that pushes new users to usersOrdered array. +/////////////////////////////////////////videos//////////////////////////////////////////////// + + +var ninjaTurtles = { + name: "NinjaTurtles", + genre: "action", + SN: 4274, + usersOredred: ["Michaelangelo", "Leonardo", "Raphael", "Donatelo"] +}; +var xMen = { + name: "X-Men", + genre: "action", + SN: 4120, + usersOredred: ["Wolverine", "Storm"] +}; +var guardiansOfTheGalaxy = { + name: "Guardians Of The Galaxy", + genre: "action", + SN: 4285, + usersOredred: ["Gamora", "Groot", "Rocket"] +}; +var fightClub = { + name: "Fight Club", + genre: "thriller", + SN: 1050, + usersOredred: ["Michaelangelo", "Leonardo", "Raphael", "Donatelo", "Wolverine", "Storm", "Gamora", "Groot", "Rocket", "Tyler"] +}; /////////////////////////////////////////users//////////////////////////////////////////////// + +var usersList = [{ + name: "Michaelangelo", + userID: 170889, + videosOredred: [ninjaTurtles, fightClub] +}, { + name: "Leonardo", + userID: 230193, + videosOredred: [ninjaTurtles, fightClub] +}, { + name: "Raphael", + userID: 281092, + videosOredred: [ninjaTurtles, fightClub] +}, { + name: "Donatelo", + userID: 240663, + videosOredred: [ninjaTurtles, fightClub] +}, { + name: "Wolverine", + userID: 110764, + videosOredred: [xMen, fightClub] +}, { + name: "Storm", + userID: 170838, + videosOredred: [xMen, fightClub] +}, { + name: "Gamora", + userID: 211963, + videosOredred: [guardiansOfTheGalaxy, fightClub] +}, { + name: "Groot", + userID: 250289, + videosOredred: [guardiansOfTheGalaxy, fightClub] +}, { + name: "Rocket", + userID: 111111, + videosOredred: [guardiansOfTheGalaxy, fightClub] +}, { + name: "Tyler", + userID: 170896, + videosOredred: [fightClub] +}]; +var choice = newOrder("Groot", xMen); +console.log("The users who oredered this video are " + choice); +var orderedBy = historyOfUsers(xMen); +console.log("The users who oredered this video are " + orderedBy); +var orderedBy2 = historyOfUsers(ninjaTurtles); +console.log("The users who oredered this video are " + orderedBy2); +var orderedBy3 = historyOfUsers(fightClub); +console.log("The users who oredered this video are " + orderedBy3); +var orderedBy4 = historyOfUsers(guardiansOfTheGalaxy); +console.log("The users who oredered this video are " + orderedBy4); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/dist/index.js new file mode 100644 index 000000000..752ab39e6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/dist/index.js @@ -0,0 +1,52 @@ +var users = [{ + firstName: "Shlomi", + lastName: "levi", + usernumber: 123 + }, + { + firstName: "racheli", + lastName: "cohen", + usernumber: 124 + }, + { + firstName: "sara", + lastName: "regev", + usernumber: 125 + } +]; +var movies = [{ + name: "Action-Movie", + price: 5, + rentedBy: 123 + }, + { + name: "Drama-Movie", + price: 6, + rentedBy: 124 + }, + { + name: "Comedy-Movie", + price: 7, + rentedBy: 125 + }, +]; +var usdToNis = function (movie) { + return (movie.price * 3.53).toFixed(2); +}; +var result = usdToNis(movies[1]); +console.log(result); +var haveMovie = function (movie, usernumber) { + if (movie.rentedBy === usernumber) { + for (var i = 0; i < users.length; i++) { + if (users[i].usernumber === usernumber) { + if (users[i] !== null) { + console.log(users[i].firstName + " have the movie " + movie.name); + } + } + } + } + else { + console.log("user with usernumber " + usernumber + " does not has the movie " + movie.name); + } +}; +haveMovie(movies[1], 124); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/index.ts new file mode 100644 index 000000000..a9a000316 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Aviva-Elias/index.ts @@ -0,0 +1,78 @@ +interface Movie { + name: string; + rentedBy: number; + price:number + +} + +interface User { + firstName: string; + lastName:string + usernumber: number + +} + + +const users:Array = [{ + firstName: "Shlomi", + lastName: "levi", + usernumber: 123, + +}, +{ + + + firstName: "racheli", + lastName: "cohen", + usernumber: 124, +}, +{ + firstName: "sara", + lastName: "regev", + usernumber: 125, +} +]; + +const movies: Array =[{ + + name: "Action-Movie", + price: 5, +rentedBy:123, +}, +{ + + name: "Drama-Movie", + price: 6, + rentedBy:124, +}, +{ + name: "Comedy-Movie", + price: 7, + rentedBy:125}, +]; + +const usdToNis:Function=( movie:Movie):number|string=>{ + return (movie.price*3.53).toFixed(2) +} + +const result =usdToNis(movies[1]) +console.log(result) + +const haveMovie: Function= (movie:Movie,usernumber:number)=>{ + if(movie.rentedBy===usernumber){ + for(let i=0; i + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Ayala/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/Ayala/index.ts new file mode 100644 index 000000000..26fded9c4 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Ayala/index.ts @@ -0,0 +1,55 @@ +//הגדרה +interface Video { + title: string, + price: number, + rentBy: string +} +//שייכות אדם לסרטון +interface Person { + firstName: string, + lastName: string, + id: string +} +//חיפוש לראות מיהאדם שצפה ברטון לפי id +const videos = [ + { + title: "harry potter", + price: 40, + rentBy: "id-1" + }, + { + title: "lord of the rings", + price: 20, + rentBy: "id-2" + } +] + +const persons = [ + { + firstName: "David", + lastName: "Levi", + id: "id-1", + }, + { + firstName: "Or", + lastName: "Paz", + id: "id-2", + } +]; +//מקבל וידאו מסוג וידאו וידפיס את המחיר של הסרטון בשקלים +function priceInNis(video: Video) { + console.log(video.price * 3.53); +} + +priceInNis(videos[0]); + +function isRented(video: Video, id: string){ + if(video.rentBy === id){ + const user = persons.find((person) => id === person.id); + console.log(`${user?.firstName} ${user?.lastName} rent the video ${video.title}`); + } else { + console.log(`Video wasn't rent by user with id: ${id}`); + } +} + +isRented(videos[1], 'id-1'); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/dist/index.js new file mode 100644 index 000000000..e03ec703a --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/dist/index.js @@ -0,0 +1,95 @@ +var movies = [ + { + name: "Glass Onion A Knives Out Mystery", + price: 25.99, + rentedBy: 1 + }, + { + name: "Black Panther Wakanda Forever", + price: 15.99, + rentedBy: 1 + }, + { + name: "uncharted", + price: 10.99, + rentedBy: 2 + } +]; +var users = [ + { + id: 1, + firstName: "Shimon", + lastName: "Or" + }, + { + id: 2, + firstName: "Itai", + lastName: "Gelberg" + }, + { + id: 3, + firstName: "Simon", + lastName: "Levi" + }, + { + id: 4, + firstName: "Ayala", + lastName: "Vilo" + }, + { + id: 5, + firstName: "Udi", + lastName: "Bron" + } +]; +function dollarToShekel(movieName) { + try { + if (movieName == "Glass Onion A Knives Out Mystery") { + return movies[0].price * 3.5; + } + if (movieName == "Black Panther Wakanda Forever") { + return movies[1].price * 3.5; + } + if (movieName == "uncharted") { + return movies[2].price * 3.5; + } + } + catch (error) { + console.error("we ha got an error on our hands"); + } +} +var userInput = prompt("please enter a movie name to rent:\n Glass Onion A Knives Out Mystery\n Black Panther Wakanda Forever\n uncharted"); +if (typeof userInput === "undefined") { + alert("error input"); +} +var moviePrice = dollarToShekel(userInput); +alert("thank you for choosing the movie " + userInput + " and it's price in nis is " + moviePrice); +//ex:2 +function howRentedMovie(movie, id) { + if (movie.rentedBy === id) { + for (var i = 0; i < users.length; i++) { + var user = null; + if (users[i].id === id) { + user = users[i]; + } + if (user !== null) { + console.log(user.firstName + " " + user.lastName + " have rented the movie " + movie.name); + } + } + } +} +function howRentedMovie1(movie, id) { + if (movie.rentedBy === id) { + for (var i = 0; i < users.length; i++) { + var user = null; + if (users[i].id === id) { + user = users[i]; + } + if (user !== null) { + console.log(user.firstName + " " + user.lastName + " have rented the movie " + movie.name); + } + } + } +} +howRentedMovie(movies[1], 1); +howRentedMovie(movies[2], 2); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/index.ts new file mode 100644 index 000000000..51e71192b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Itai-G/index.ts @@ -0,0 +1,124 @@ +interface Movie { + name: string; + price: number; + rentedBy:number + } + interface User { + firstName: string; + lastName:string; + id: number; + } + + const movies: Array = [ + { + name: "Glass Onion A Knives Out Mystery", + price: 25.99, + rentedBy: 1 + }, + { + name: "Black Panther Wakanda Forever", + price: 15.99, + rentedBy: 1 + }, + { + name: "uncharted", + price: 10.99, + rentedBy:2 + } + ] + const users: Array = [ + { + id: 1, + firstName: "Shimon", + lastName: "Or" + }, + { + id: 2, + firstName: "Itai", + lastName: "Gelberg", + }, + { + id: 3, + firstName: "Simon", + lastName: "Levi", + }, + { + id: 4, + firstName: "Ayala", + lastName: "Vilo", + }, + { + id: 5, + firstName: "Udi", + lastName: "Bron", + } +]; + + function dollarToShekel(movieName) { + try { + if (movieName == "Glass Onion A Knives Out Mystery") { + return movies[0].price * 3.5; + } + if (movieName == "Black Panther Wakanda Forever") { + return movies[1].price * 3.5; + } + if (movieName == "uncharted") { + return movies[2].price * 3.5; + } + } catch (error) { + console.error(`we ha got an error on our hands`); + } + } + + + const userInput = prompt(`please enter a movie name to rent: + Glass Onion A Knives Out Mystery + Black Panther Wakanda Forever + uncharted`) + +if (typeof userInput === "undefined") { + alert("error input"); +} + +const moviePrice = dollarToShekel(userInput); + +alert(`thank you for choosing the movie ${userInput} and it's price in nis is ${moviePrice}`); + + +//ex:2 + + +function howRentedMovie(movie:Movie, id: number){ + if(movie.rentedBy === id) { + for(let i =0; i < users.length; i++){ + let user: User | null = null; + if(users[i].id === id){ + user = users[i]; + } + + if (user !== null){ + console.log(`${user.firstName} ${user.lastName} have rented the movie ${movie.name}`); + } + } + } +} + + + +function howRentedMovie1(movie:Movie, id: number){ + if(movie.rentedBy === id) { + for(let i =0; i < users.length; i++){ + let user: User | null = null; + if(users[i].id === id){ + user = users[i]; + } + + if (user !== null){ + console.log(`${user.firstName} ${user.lastName} have rented the movie ${movie.name}`); + } + } + } +} + +howRentedMovie(movies[1] , 1); +howRentedMovie(movies[2] , 2); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/app.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/app.ts new file mode 100644 index 000000000..9fdef01c2 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/app.ts @@ -0,0 +1,124 @@ +interface video { + name:string; + genre:string; + ageRestriction:number; + price:number; + rentedBy?:{} +}; + +interface user { + name:string; + age:number +}; + +let avatar:video = { + name:"Avatar", + genre:"Fantasy", + ageRestriction:10, + price:20, +}; + +const mario:user = { + name:"Mario", + age:25 +}; +// 1) +function videoPrice(video:video){ + return `The price of the ${video.name} video caset is ${video.price}$`; +} +// 2) +function videoRent(video:video, user:user){ + if (user.age > video.ageRestriction){ + video.rentedBy = user; + console.log(`${user.name} is rented the ${video.name} video caset`) + return video; + } + else { + return "You're not old enough to rent this video"; + } +} +console.log("Task 1------------------------------------------"); +console.log(videoPrice(avatar)); +console.log("\nTask 2------------------------------------------"); +console.log(videoRent(avatar,mario)); + +console.log("\nTask 3------------------------------------------"); +// 3) +interface netflixMovie { + name:string; + genre:string; + ageRestriction:number; + viewedBy:object[] +}; + +let vikings:netflixMovie = { + name:"vikings", + genre:"History", + ageRestriction:18, + viewedBy:[] +}; + +let lego:netflixMovie = { + name:"lego", + genre:"History", + ageRestriction:18, + viewedBy:[] +}; + +interface netflixUser { + name:string; + age:number; + movieList:string[] +}; +let cloud:netflixUser = { + name:"cloud", + age:25, + movieList:[] +}; + +let nikita:netflixUser = { + name:"Nikita", + age:30, + movieList:[] +}; + +function movieList (netflixMovie:netflixMovie, netflixUser:netflixUser){ + if (netflixUser.age > netflixMovie.ageRestriction){ + if (netflixUser.movieList.includes(netflixMovie.name)){ //if the user already added the movie to the movie list don't add again and alert it to the user! + return `This movie is already in your list` + } + else{ + netflixUser.movieList?.push(netflixMovie.name); + return `Hello ${netflixUser.name} the movie ${netflixMovie.name} added to your movie list, you have now ${netflixUser.movieList} in the list`; + } + } else { + return "You're not old enough to movie list this video"; + } +} +console.log(movieList(vikings,nikita)); +console.log(movieList(lego,nikita)); + + +function watchMovie(netflixMovie:netflixMovie, netflixUser:netflixUser){ + if (netflixUser.age > netflixMovie.ageRestriction){ + if (netflixMovie.viewedBy.includes(netflixUser)){ //if the user watched the movie don't add the user again to the viewedBy list. + return `User ${netflixUser.name} is watching ${netflixMovie.name}` + }else { + netflixMovie.viewedBy?.push(netflixUser) + console.log(`User ${netflixUser.name} is watching ${netflixMovie.name}`) + return netflixMovie; + } + } else { + return "You're not old enough to view this video"; + } +} + +console.log(watchMovie(vikings,cloud)); +console.log(watchMovie(vikings,nikita)); + +console.log(watchMovie(lego,cloud)); +console.log(watchMovie(lego,nikita)); + +console.log(watchMovie(lego,nikita)); +console.log(watchMovie(lego,nikita)); +console.log(watchMovie(vikings,nikita)); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/dist/app.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/dist/app.js new file mode 100644 index 000000000..218ae7b57 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/dist/app.js @@ -0,0 +1,96 @@ +; +; +var avatar = { + name: "Avatar", + genre: "Fantasy", + ageRestriction: 10, + price: 20 +}; +var mario = { + name: "Mario", + age: 25 +}; +// 1) +function videoPrice(video) { + return "The price of the " + video.name + " video caset is " + video.price + "$"; +} +// 2) +function videoRent(video, user) { + if (user.age > video.ageRestriction) { + video.rentedBy = user; + console.log(user.name + " is rented the " + video.name + " video caset"); + return video; + } + else { + return "You're not old enough to rent this video"; + } +} +console.log("Task 1------------------------------------------"); +console.log(videoPrice(avatar)); +console.log("\nTask 2------------------------------------------"); +console.log(videoRent(avatar, mario)); +console.log("\nTask 3------------------------------------------"); +; +var vikings = { + name: "vikings", + genre: "History", + ageRestriction: 18, + viewedBy: [] +}; +var lego = { + name: "lego", + genre: "History", + ageRestriction: 18, + viewedBy: [] +}; +; +var cloud = { + name: "cloud", + age: 25, + movieList: [] +}; +var nikita = { + name: "Nikita", + age: 30, + movieList: [] +}; +function movieList(netflixMovie, netflixUser) { + var _a; + if (netflixUser.age > netflixMovie.ageRestriction) { + if (netflixUser.movieList.includes(netflixMovie.name)) { //if the user already added the movie to the movie list don't add again and alert it to the user! + return "This movie is already in your list"; + } + else { + (_a = netflixUser.movieList) === null || _a === void 0 ? void 0 : _a.push(netflixMovie.name); + return "Hello " + netflixUser.name + " the movie " + netflixMovie.name + " added to your movie list, you have now " + netflixUser.movieList + " in the list"; + } + } + else { + return "You're not old enough to movie list this video"; + } +} +console.log(movieList(vikings, nikita)); +console.log(movieList(lego, nikita)); +function watchMovie(netflixMovie, netflixUser) { + var _a; + if (netflixUser.age > netflixMovie.ageRestriction) { + if (netflixMovie.viewedBy.includes(netflixUser)) { //if the user watched the movie don't add the user again to the viewedBy list. + return "User " + netflixUser.name + " is watching " + netflixMovie.name; + } + else { + (_a = netflixMovie.viewedBy) === null || _a === void 0 ? void 0 : _a.push(netflixUser); + console.log("User " + netflixUser.name + " is watching " + netflixMovie.name); + return netflixMovie; + } + } + else { + return "You're not old enough to view this video"; + } +} +console.log(watchMovie(vikings, cloud)); +console.log(watchMovie(vikings, nikita)); +console.log(watchMovie(lego, cloud)); +console.log(watchMovie(lego, nikita)); +console.log(watchMovie(lego, nikita)); +console.log(watchMovie(lego, nikita)); +console.log(watchMovie(vikings, nikita)); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/index.html new file mode 100644 index 000000000..c54c017ec --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Nikita Rossenko/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/dist/index.js new file mode 100644 index 000000000..f423c306b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/dist/index.js @@ -0,0 +1,44 @@ +var omer = { + name: "Omer" +}; +var guy = { + name: "Guy" +}; +var dorit = { + name: "Dorit" +}; +var video = { + name: "Spiderman", + price: 5, + people: omer +}; +function toShekel(obj) { + return obj.price * 3.53; +} +console.log("The movie " + video.name + " will cost " + video.price + "$ in dollars and will cost " + toShekel(video) + " in nis"); +//didnt understand the problem +function whosRenting(obj) { + return obj.people; +} +console.log("The movie " + video.name + " is rented by " + whosRenting(video).name); +var vid = { + name: "Aladin", + people: [ + omer, + guy, + dorit + ] +}; +function whosRentingNetflix(obj) { + for (var key in vid) { + if (key == "people") { + for (var i in vid.people) { + console.log("The name of someone who's renting it: " + vid.people[i].name); + } + } + else { + console.log("The name of the movie is: " + vid[key]); + } + } +} +whosRentingNetflix(vid); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/index.ts new file mode 100644 index 000000000..75336a6cd --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/Omer.Viirshuvski/index.ts @@ -0,0 +1,68 @@ +interface Video { + name:string, + price:number, + people:People +} + +interface People { + name:string; +} + +const omer:People = { + name: "Omer", +} + +const guy:People = { + name: "Guy", +} + +const dorit:People = { + name: "Dorit", +} + +const video:Video = { + name: "Spiderman", + price: 5, + people: omer +} + +function toShekel(obj:Video):number { + return obj.price * 3.53; +} + +console.log(`The movie ${video.name} will cost ${video.price}$ in dollars and will cost ${toShekel(video)} in nis`); + +//didnt understand the problem +function whosRenting(obj:Video):People { + return obj.people; +} + +console.log(`The movie ${video.name} is rented by ${whosRenting(video).name}`); + +interface VideoForNetflix { + name:string, + people:People[], +} + +const vid:VideoForNetflix = { + name: "Aladin", + people: [ + omer, + guy, + dorit + ] +} + +function whosRentingNetflix(obj:VideoForNetflix) { + for(const key in vid) { + if(key == "people") { + for(const i in vid.people) { + console.log(`The name of someone who's renting it: ${vid.people[i].name}`) + } + } else { + console.log(`The name of the movie is: ${vid[key]}`) + } + } +} + +whosRentingNetflix(vid); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/app.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/app.ts new file mode 100644 index 000000000..a11c893aa --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/app.ts @@ -0,0 +1,252 @@ +// user template +interface NetflixUser { + userName: string; + videoList: {}; + checkIfMovieWasWatched: Function; + getUserName: Function; + addMovieToList: Function; + markMovieViewed: Function; +} + +// initiating a variable that will hold all the users +const netflixUsers: NetflixUser[] = []; +const viewedMovieList = {}; + +const userWatchedMovie = document.querySelector( + ".userWatchedMovie" +) as HTMLUListElement; +const creatUserName = document.querySelector( + ".creatUserName" +) as HTMLInputElement; +const addMovieToSelectedUserList = document.querySelector( + ".addMovieToSelectedUserList" +) as HTMLInputElement; +const userNameDisplayed = document.querySelector( + ".userPage__userName" +) as HTMLHeadElement; +const userPage = document.querySelector(".userPage") as HTMLDivElement; +const userMovieList = document.querySelector( + ".userPage__movieList" +) as HTMLUListElement; +const userBtnList = document.querySelector(".userBtnList") as HTMLUListElement; +const movieBtnList = document.querySelector( + ".movieBtnList" +) as HTMLUListElement; + +// catching clicks on buttons and displaying info accordingly +window.addEventListener("click", (e) => { + const target = e.target as Element; + const text = target.textContent as string; + // if clicked on movie button display users that watched it + if (target.className === "movie") { + userWatchedMovie.style.display = "block"; + userPage.style.display = "none"; + // clear list of movies besides first child of ul element which is a title (hX tag) + while (userWatchedMovie.childNodes.length > 2) { + userWatchedMovie.removeChild(userWatchedMovie.lastChild as Element); + } + // check if no one watched this movie and display message + if (!(text.toLowerCase() in viewedMovieList)) { + const li = document.createElement("li") as HTMLElement; + li.textContent = "No one watched this movie yet"; + userWatchedMovie.appendChild(li); + } else { + // text on button + // go through watched movies object + Object.entries(viewedMovieList).forEach(([key, value]) => { + const movieValues = value as []; + // display users who watched the movie that was clicked on + if (key.toLowerCase() == text.toLowerCase()) { + for (const i in movieValues) { + const li = document.createElement("li") as HTMLElement; + li.textContent = movieValues[i]; + userWatchedMovie.appendChild(li); + } + } + }); + } + } + // if clicked on user button display movies on his list + else if (target.className === "userName") { + userNameDisplayed.textContent = target.textContent; + userPage.style.display = "block"; + userWatchedMovie.style.display = "none"; + displayUserMovieList(); + } +}); + +function displayUserMovieList() { + netflixUsers.forEach((user) => { + if (user.userName === userNameDisplayed.textContent) { + //clear ul element + userMovieList.replaceChildren(); + // displaying list of movies of the user selected + Object.entries(user.videoList).forEach(([key]) => { + const li = document.createElement("li") as HTMLElement; + li.textContent = key; + userMovieList.appendChild(li); + }); + } + }); +} + +// listen for ENTER press +window.addEventListener("keydown", (e) => { + if (e.key == "Enter" && creatUserName.value.length > 5) { + const newUser: NetflixUser = new addUser(creatUserName.value, {}); + creatUserName.value = ""; + createUserButton(); + } + // making sure user is displayed and movie name is entered + else if ( + e.key == "Enter" && + userPage.style.display == "block" && + addMovieToSelectedUserList.value.length > 3 + ) { + netflixUsers.forEach((user) => { + // adding movie to list of user movies + if (user.userName == userNameDisplayed.textContent) { + user.videoList[addMovieToSelectedUserList.value] = false; + // display new movie on page as button + createMovieButton(); + displayUserMovieList(); + addMovieToSelectedUserList.value = ""; + } + }); + } +}); + +// function that will crate a user based on our interface template +function addUser(userName: string, videoList: {}) { + this.userName = userName; + this.videoList = videoList; + // Return true if user watched the movie + this.checkIfMovieWasWatched = (movie: string): boolean => + this.videoList[movie]; + // return users name + this.getUserName = () => { + return this.userName; + }; + // add a movie to users watch list + this.addMovieToList = (movie: string) => { + this.videoList[movie] = false; + }; + this.markMovieViewed = (movie: string) => (this.videoList[movie] = true); + //adding user to list of users on platform + netflixUsers.push(this); +} + +const userOne: NetflixUser = new addUser("Vladislav Bykanov", { + matrix: false, + avatar: false, + "the godfather": true, +}); + +const userTwo: NetflixUser = new addUser("John Doe", { + matrix: false, + avatar: false, + "the godfather": true, +}); + +const userThree: NetflixUser = new addUser("Jerry Smith", { + matrix: true, + avatar: false, + "the godfather": false, + armageddon: true, +}); + +userTwo.markMovieViewed("matrix"); +userOne.addMovieToList("titanic"); +userOne.markMovieViewed("titanic"); +userThree.markMovieViewed("titanic"); + +// adding the name of the user that watched the movie to viewedMovieList +function markFilmViewedForUsers() { + try { + //empty object before running + Object.keys(viewedMovieList).forEach((key) => { + delete viewedMovieList[key]; + }); + netflixUsers.forEach((user) => { + Object.entries(user.videoList).forEach(([key, value]) => { + if (value == true) { + if (!viewedMovieList[key]) { + viewedMovieList[key] = []; + } + viewedMovieList[key].push(user.userName); + // console.log(key, user.userName); + } + }); + }); + } catch (error) { + alert(error); + } +} + +function createUserButton() { + userBtnList.replaceChildren(); + netflixUsers.forEach((user) => { + const li = document.createElement("li") as HTMLElement; + const btn = document.createElement("button") as HTMLButtonElement; + btn.classList.add("userName"); + btn.textContent = user.userName; + li.append(btn); + userBtnList.append(li); + }); +} + +function createMovieButton() { + try { + movieBtnList.replaceChildren(); + const listOfMovies: string[] = []; + netflixUsers.forEach((user) => { + Object.entries(user.videoList).forEach(([key]) => { + let word = key; + let upperWord = + word.toLowerCase().charAt(0).toUpperCase() + word.slice(1); + if (listOfMovies.some((value) => value === key)) { + return false; + } else { + listOfMovies.push(key); + const li = document.createElement("li") as HTMLElement; + const btn = document.createElement("button") as HTMLButtonElement; + btn.classList.add("movie"); + btn.textContent = upperWord; + li.append(btn); + movieBtnList.append(li); + } + }); + }); + } catch (error) { + alert(error); + } +} + +createUserButton(); +createMovieButton(); +markFilmViewedForUsers(); + +console.log(viewedMovieList); +console.log(netflixUsers); + +// const account = { +// userName: "Vladi", +// videoList: { +// "The Matrix": ["Vladi", "John", "Jerry"], +// "Lord of the rings": ["Vladi", "Sara", "Michel"], +// }, +// checkIfMovieWasWatched(movie: string): string[] { +// return this.videoList[movie]; +// }, +// get getUserName() { +// return this.userName; +// }, +// set addNewMovie(movie: string) { +// this.videoList[movie] = []; +// }, +// }; + +// let word = "hello"; +// let upperWord = word.toLowerCase().charAt(0).toUpperCase() + word.slice(1); + +// console.log(upperWord); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/dist/app.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/dist/app.js new file mode 100644 index 000000000..d3374aace --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/dist/app.js @@ -0,0 +1,220 @@ +// initiating a variable that will hold all the users +var netflixUsers = []; +var viewedMovieList = {}; +var userWatchedMovie = document.querySelector(".userWatchedMovie"); +var creatUserName = document.querySelector(".creatUserName"); +var addMovieToSelectedUserList = document.querySelector(".addMovieToSelectedUserList"); +var userNameDisplayed = document.querySelector(".userPage__userName"); +var userPage = document.querySelector(".userPage"); +var userMovieList = document.querySelector(".userPage__movieList"); +var userBtnList = document.querySelector(".userBtnList"); +var movieBtnList = document.querySelector(".movieBtnList"); +// catching clicks on buttons and displaying info accordingly +window.addEventListener("click", function (e) { + var target = e.target; + var text = target.textContent; + // if clicked on movie button display users that watched it + if (target.className === "movie") { + userWatchedMovie.style.display = "block"; + userPage.style.display = "none"; + // clear list of movies besides first child of ul element which is a title (hX tag) + while (userWatchedMovie.childNodes.length > 2) { + userWatchedMovie.removeChild(userWatchedMovie.lastChild); + } + // check if no one watched this movie and display message + if (!(text.toLowerCase() in viewedMovieList)) { + var li = document.createElement("li"); + li.textContent = "No one watched this movie yet"; + userWatchedMovie.appendChild(li); + } + else { + // text on button + // go through watched movies object + Object.entries(viewedMovieList).forEach(function (_a) { + var key = _a[0], value = _a[1]; + var movieValues = value; + // display users who watched the movie that was clicked on + if (key.toLowerCase() == text.toLowerCase()) { + for (var i in movieValues) { + var li = document.createElement("li"); + li.textContent = movieValues[i]; + userWatchedMovie.appendChild(li); + } + } + }); + } + } + // if clicked on user button display movies on his list + else if (target.className === "userName") { + userNameDisplayed.textContent = target.textContent; + userPage.style.display = "block"; + userWatchedMovie.style.display = "none"; + displayUserMovieList(); + } +}); +function displayUserMovieList() { + netflixUsers.forEach(function (user) { + if (user.userName === userNameDisplayed.textContent) { + //clear ul element + userMovieList.replaceChildren(); + // displaying list of movies of the user selected + Object.entries(user.videoList).forEach(function (_a) { + var key = _a[0]; + var li = document.createElement("li"); + li.textContent = key; + userMovieList.appendChild(li); + }); + } + }); +} +// listen for ENTER press +window.addEventListener("keydown", function (e) { + if (e.key == "Enter" && creatUserName.value.length > 5) { + var newUser = new addUser(creatUserName.value, {}); + creatUserName.value = ""; + createUserButton(); + } + // making sure user is displayed and movie name is entered + else if (e.key == "Enter" && + userPage.style.display == "block" && + addMovieToSelectedUserList.value.length > 3) { + netflixUsers.forEach(function (user) { + // adding movie to list of user movies + if (user.userName == userNameDisplayed.textContent) { + user.videoList[addMovieToSelectedUserList.value] = false; + // display new movie on page as button + createMovieButton(); + displayUserMovieList(); + addMovieToSelectedUserList.value = ""; + } + }); + } +}); +// function that will crate a user based on our interface template +function addUser(userName, videoList) { + var _this = this; + this.userName = userName; + this.videoList = videoList; + // Return true if user watched the movie + this.checkIfMovieWasWatched = function (movie) { + return _this.videoList[movie]; + }; + // return users name + this.getUserName = function () { + return _this.userName; + }; + // add a movie to users watch list + this.addMovieToList = function (movie) { + _this.videoList[movie] = false; + }; + this.markMovieViewed = function (movie) { return (_this.videoList[movie] = true); }; + //adding user to list of users on platform + netflixUsers.push(this); +} +var userOne = new addUser("Vladislav Bykanov", { + matrix: false, + avatar: false, + "the godfather": true +}); +var userTwo = new addUser("John Doe", { + matrix: false, + avatar: false, + "the godfather": true +}); +var userThree = new addUser("Jerry Smith", { + matrix: true, + avatar: false, + "the godfather": false, + armageddon: true +}); +userTwo.markMovieViewed("matrix"); +userOne.addMovieToList("titanic"); +userOne.markMovieViewed("titanic"); +userThree.markMovieViewed("titanic"); +// adding the name of the user that watched the movie to viewedMovieList +function markFilmViewedForUsers() { + try { + //empty object before running + Object.keys(viewedMovieList).forEach(function (key) { + delete viewedMovieList[key]; + }); + netflixUsers.forEach(function (user) { + Object.entries(user.videoList).forEach(function (_a) { + var key = _a[0], value = _a[1]; + if (value == true) { + if (!viewedMovieList[key]) { + viewedMovieList[key] = []; + } + viewedMovieList[key].push(user.userName); + // console.log(key, user.userName); + } + }); + }); + } + catch (error) { + alert(error); + } +} +function createUserButton() { + userBtnList.replaceChildren(); + netflixUsers.forEach(function (user) { + var li = document.createElement("li"); + var btn = document.createElement("button"); + btn.classList.add("userName"); + btn.textContent = user.userName; + li.append(btn); + userBtnList.append(li); + }); +} +function createMovieButton() { + try { + movieBtnList.replaceChildren(); + var listOfMovies_1 = []; + netflixUsers.forEach(function (user) { + Object.entries(user.videoList).forEach(function (_a) { + var key = _a[0]; + var word = key; + var upperWord = word.toLowerCase().charAt(0).toUpperCase() + word.slice(1); + if (listOfMovies_1.some(function (value) { return value === key; })) { + return false; + } + else { + listOfMovies_1.push(key); + var li = document.createElement("li"); + var btn = document.createElement("button"); + btn.classList.add("movie"); + btn.textContent = upperWord; + li.append(btn); + movieBtnList.append(li); + } + }); + }); + } + catch (error) { + alert(error); + } +} +createUserButton(); +createMovieButton(); +markFilmViewedForUsers(); +console.log(viewedMovieList); +console.log(netflixUsers); +// const account = { +// userName: "Vladi", +// videoList: { +// "The Matrix": ["Vladi", "John", "Jerry"], +// "Lord of the rings": ["Vladi", "Sara", "Michel"], +// }, +// checkIfMovieWasWatched(movie: string): string[] { +// return this.videoList[movie]; +// }, +// get getUserName() { +// return this.userName; +// }, +// set addNewMovie(movie: string) { +// this.videoList[movie] = []; +// }, +// }; +// let word = "hello"; +// let upperWord = word.toLowerCase().charAt(0).toUpperCase() + word.slice(1); +// console.log(upperWord); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/dist/style.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/dist/style.css new file mode 100644 index 000000000..7c716469f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/dist/style.css @@ -0,0 +1,52 @@ +* { + margin: 0.5em 0; + padding: 0; +} + +body { + width: 90vw; + padding: 2em; +} + +ul li { + display: inline; +} +ul li button { + padding: 0.5em; + margin-right: 0.5em; +} + +.userPage { + display: none; + border: 2px solid black; + padding: 1em; +} +.userPage__movieList li { + display: block; +} +.userPage input { + padding: 0.5em; +} + +.userWatchedMovie { + display: none; + position: absolute; + top: 40vh; + left: 5vw; +} +.userWatchedMovie li { + display: flex; +} + +.creatUserPage input { + padding: 0.5em; +} + +.movieList li { + font-size: 1.2rem; +} + +#addMovieToUser { + padding: 0 0.5em; + font-size: 1.2em; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/index.html new file mode 100644 index 000000000..78e2667fe --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/index.html @@ -0,0 +1,52 @@ + + + + + + + Netflix + + + +

    Netflix Dev Page

    +

    Choose a user to see his movie list:

    +
      + +
    +

    Choose a movie to see who watched it:

    +
      + +
    +
      + People That watched this movie: +
    +
    +

    Create User

    + + +
    +
    +

    NAME

    +

    Movies available:

    +
      +
    + + +
    + + + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/style.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/style.css new file mode 100644 index 000000000..7c716469f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/style.css @@ -0,0 +1,52 @@ +* { + margin: 0.5em 0; + padding: 0; +} + +body { + width: 90vw; + padding: 2em; +} + +ul li { + display: inline; +} +ul li button { + padding: 0.5em; + margin-right: 0.5em; +} + +.userPage { + display: none; + border: 2px solid black; + padding: 1em; +} +.userPage__movieList li { + display: block; +} +.userPage input { + padding: 0.5em; +} + +.userWatchedMovie { + display: none; + position: absolute; + top: 40vh; + left: 5vw; +} +.userWatchedMovie li { + display: flex; +} + +.creatUserPage input { + padding: 0.5em; +} + +.movieList li { + font-size: 1.2rem; +} + +#addMovieToUser { + padding: 0 0.5em; + font-size: 1.2em; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/style.scss b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/style.scss new file mode 100644 index 000000000..6c8580e66 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/VladiBykanov/style.scss @@ -0,0 +1,64 @@ +* { + margin: 0.5em 0; + padding: 0; +} + +body { + width: 90vw; + // height: 100vh; + padding: 2em; +} + +ul{ + li { + display: inline; + button { + // width: 10vw; + padding: 0.5em; + margin-right: .5em; + } + } +} + + +.userPage{ + display: none; + border: 2px solid black; + padding: 1em; + &__movieList{ + li{ + display: block; + } + } + input{ + padding: .5em; + } + +} + +.userWatchedMovie{ + display: none; + position: absolute; + top: 40vh; + left: 5vw; + li{ + display: flex; + } +} + +.creatUserPage{ + input{ + padding: .5em; + } +} + +.movieList { + li { + font-size: 1.2rem; + } +} + +#addMovieToUser { + padding: 0 0.5em; + font-size: 1.2em; +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/dist/index.js new file mode 100644 index 000000000..6a825f826 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/dist/index.js @@ -0,0 +1,35 @@ +var train_to_busan = { + name: "train to busan", + price: 9.99 +}; +var fight_club = { + name: "fight club", + price: 14.99 +}; +var I_Am_Legend = { + name: "i Am Legend", + price: 5.50 +}; +var renter = ['john', 'amelia', 'luke', 'dan', 'lily', 'luna']; +function dollar_to_shekel(userInput) { + try { + switch (userInput) { + case "train to busan": return train_to_busan.price * 3.53; + case "fight club": return fight_club.price * 3.53; + case "i am legend": return I_Am_Legend.price * 3.53; + } + } + catch (error) { + console.error("error"); + } +} +var randomName = Math.floor(Math.random() * renter.length); +var wellcome = alert("wellcome to blockbuster"); +var userInput = prompt("current available movies are: train to busan,fight club,i am legend"); +if (userInput == " " || !userInput) { + var userInput_1 = alert("please enter a movie"); +} +else { + var dts = dollar_to_shekel(userInput); + var user = alert(userInput + " costs " + dts + ", also " + renter[randomName] + " rented it "); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/index.ts new file mode 100644 index 000000000..9ca6f240e --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/angela/index.ts @@ -0,0 +1,45 @@ +interface Movie { + name:string + price:number + +} + +const train_to_busan = { + name: "train to busan", + price: 9.99 +}; +const fight_club = { + name: "fight club", + price: 14.99 +}; +const I_Am_Legend = { + name: "i Am Legend", + price: 5.50 +}; + +const renter = ['john', 'amelia', 'luke', 'dan', 'lily', 'luna']; +function dollar_to_shekel(userInput) { + try { + switch (userInput) { + case "train to busan": return train_to_busan.price * 3.53; + case "fight club": return fight_club.price * 3.53; + case "i am legend": return I_Am_Legend.price * 3.53; + + } + } + catch (error) { + console.error("error"); + } +} +const randomName = Math.floor(Math.random() * renter.length); +let wellcome = alert("wellcome to blockbuster"); +let userInput = prompt("current available movies are: train to busan,fight club,i am legend"); +if (userInput == " " || !userInput) { + let userInput = alert("please enter a movie"); +} + +else { + const dts = dollar_to_shekel(userInput); + const user = alert(`${userInput} costs ${dts}, also ${renter[randomName]} rented it `) +} + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/dist/index.js new file mode 100644 index 000000000..486202618 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/dist/index.js @@ -0,0 +1,116 @@ +; +; +var numberOfMovies = 6; +var hesExpecting = { + name: "hes expecting, ", + viewers: "", + price: 10000, + numberOfViews: 0 +}; +var parasite = { + name: "parasite, ", + viewers: "", + price: 30, + numberOfViews: 0 +}; +var birdman = { + name: "birdman, ", + viewers: "", + price: 30, + numberOfViews: 0 +}; +var thereWillBeBlood = { + name: "there will be blood, ", + viewers: "", + price: 30, + numberOfViews: 0 +}; +var driveWithRyanGosling = { + name: "drive, ", + viewers: "", + price: 30, + numberOfViews: 0 +}; +var fightClub = { + name: "fight club, ", + viewers: "", + price: 30, + numberOfViews: 0 +}; +var realNetflixMovies = { + 0: fightClub, + 1: driveWithRyanGosling, + 2: hesExpecting, + 3: birdman, + 4: parasite, + 5: thereWillBeBlood +}; +main(); +function main() { + var _a; + //reasoning for forcing ", "; example: "movie" has a sequal named "movie 2" if someone watched movie 2 and not its prequal then when checking it using the function it will falsly mark the movie as watched by the person who only watched the sequal if a movie is called "movie, more movies" or something like that then it can falsify information however i cant be bothered to fix it as it will take too much time and effort so i guess ill deal with it not working if that happens + //can be fixed by making a function that checks how many times someone has watched a movie and if there is a movie that has another movies name inside of it if i have time i will add it in which case you wont see this + //movie doesnt exist not a problem just check the page to see which movies exist and which dont + //"netflix is a subscription based program" smh + try { + var caseThingIguess = true; + var joeBiden = { + name: "joeBiden", + videoList: "" + }; + var userName = prompt("enter name"); + if (userName) { + joeBiden.name = userName; + } + else { + main(); + } + while (caseThingIguess) { + var videos = (_a = prompt("enter watched videos if done press \"ok\" without writing anything")) === null || _a === void 0 ? void 0 : _a.replace("'", ""); + //videos?.replace(`'`, ``) doesnt work + if (userName && videos) { + joeBiden.videoList = joeBiden.videoList + (videos + ", "); + console.log(joeBiden); + //why does this let me change values evem though joeBiden is a const? i dont know i think it might be because of how generous javascript is i am not going to change it + } + else { + caseThingIguess = false; + } + } + for (var index = 0; index < numberOfMovies; index++) { + hasViewed(joeBiden, realNetflixMovies[index]); + console.log(realNetflixMovies); + } + main(); + } + catch (error) { + console.error(error); + } +} +function hasViewed(user, video) { + try { + if (user.videoList.indexOf(video.name) != -1) { + console.log(user.videoList.indexOf(video.name)); + if (video.viewers == "") { + video.viewers = user.name; + video.numberOfViews += 1; + } + else { + if (video.viewers.indexOf(video.name) == -1) { + video.viewers += ", " + user.name; + video.numberOfViews += 1; + } + else { + return false; + } + } + } + else { + return false; + } + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/index.html new file mode 100644 index 000000000..87a9ed9ff --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + +

    movies:

    +

    He's Expecting

    +

    Fight Club

    +

    There Will Be Blood

    +

    Parasite

    +

    Birdman

    +

    drive

    + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/index.ts new file mode 100644 index 000000000..ea4a6410e --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/idan/index.ts @@ -0,0 +1,150 @@ + + +interface video{ + name: string; + viewers: string; + price:number; //usd + numberOfViews:number; +}; +interface customer{ + name: string; + videoList: string; +}; +interface listOfVideos{ + 0:video; + 1:video; + 2:video; + 3:video; + 4:video; + 5:video; +} +const numberOfMovies:number = 6; + + + +const hesExpecting:video = { + name: `hes expecting, `, + viewers:"", + price:10000, + numberOfViews:0 +}; +const parasite:video = { + name: `parasite, `, + viewers:"", + price:30, + numberOfViews:0 +}; +const birdman:video = { + name: `birdman, `, + viewers:"", + price:30, + numberOfViews:0 +}; +const thereWillBeBlood:video = { + name: `there will be blood, `, + viewers:"", + price:30, + numberOfViews:0 +}; +const driveWithRyanGosling:video = { + name: `drive, `, + viewers:"", + price:30, + numberOfViews:0 +}; +const fightClub:video = { + name: `fight club, `, + viewers:"", + price:30, + numberOfViews:0 +}; +const realNetflixMovies:listOfVideos = { + 0: fightClub, + 1: driveWithRyanGosling, + 2: hesExpecting, + 3: birdman, + 4: parasite, + 5: thereWillBeBlood +} + +main() +function main():void{ + //reasoning for forcing ", "; example: "movie" has a sequal named "movie 2" if someone watched movie 2 and not its prequal then when checking it using the function it will falsly mark the movie as watched by the person who only watched the sequal if a movie is called "movie, more movies" or something like that then it can falsify information however i cant be bothered to fix it as it will take too much time and effort so i guess ill deal with it not working if that happens + //can be fixed by making a function that checks how many times someone has watched a movie and if there is a movie that has another movies name inside of it if i have time i will add it in which case you wont see this + //movie doesnt exist not a problem just check the page to see which movies exist and which dont + //"netflix is a subscription based program" smh + try{ + let caseThingIguess = true; + const joeBiden:customer={ + name: `joeBiden`, + videoList:"" + }; + const userName = prompt(`enter name`); + if(userName){ + joeBiden.name = userName; + } + else{ + main(); + } + while(caseThingIguess){ + + let videos = prompt(`enter watched videos if done press "ok" without writing anything`)?.replace("'", ""); + //videos?.replace(`'`, ``) doesnt work + if(userName && videos){ + joeBiden.videoList = joeBiden.videoList+`${videos}, `; + console.log(joeBiden); + //why does this let me change values evem though joeBiden is a const? i dont know i think it might be because of how generous javascript is i am not going to change it + + } + + else{ + caseThingIguess = false; + } + + + } + for (let index = 0; index < numberOfMovies; index++) { + hasViewed(joeBiden, realNetflixMovies[index]); + console.log(realNetflixMovies); + } + main(); + } + catch(error){ + console.error(error); + } + +} + + + + + + + +function hasViewed(user:customer,video:video):void|false{ + try { + if(user.videoList.indexOf(video.name)!=-1){ + console.log(user.videoList.indexOf(video.name)) + if(video.viewers == ""){ + video.viewers = user.name; + video.numberOfViews +=1; + }else{ + if(video.viewers.indexOf(video.name) == -1){ + video.viewers += ", "+user.name; + video.numberOfViews += 1 + } + else{ + return false + } + } + } + else{ + return false; + } + } catch (error) { + console.error(error) + return false + } +} + + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/instructions.md b/02-TypeScript/08-objects/01-basic/Home-puzzles/instructions.md new file mode 100644 index 000000000..61085ab07 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/instructions.md @@ -0,0 +1,7 @@ +Create data for Blockbuster: +Create an interface for videos and an interface for users. The video has a price property (in US dollars). It also has a property about who is the person that rented it. + +1. create a function that gets a video object and returns the price in shekels +2. create a function that gets a video and a person and returns the object of the video, with reference to the person that took it. +3. Blockbuster was busted. You are now a developer at Netflix. Think of a way to let a user to have many videos. And the video has a list of all the people that viewed it. + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/dist/index.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/dist/index.css new file mode 100644 index 000000000..3bd842023 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/dist/index.css @@ -0,0 +1,121 @@ +body { + margin: 0%; +} + +.wrapper { + width: auto; + height: 255vh; + background-color: antiquewhite; +} +.wrapper__head { + margin-top: -15px; + width: 100%; + height: 90px; + background-color: #0008ff; + padding: 0%; + font-size: 4rem; + text-align: center; + position: fixed; +} +.wrapper__head .outin { + width: 250px; + height: 250px; + display: inline; + background-color: #d5f105; + border: px1; + animation-name: pop-outin; + animation: 2s anim-popoutin ease infinite; +} +@keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + 25% { + color: red; + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } +} +.wrapper__container { + display: grid; + grid-template-columns: auto auto auto; + justify-content: center; + padding-top: 150px; + gap: 5px; +} +.wrapper__container .Black_Adam-img { + background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTNSOjcSmrXYIZ517jTKmCDxBwIJU4_ojFweUDLI1Dssn2UfTsx); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Spirited-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgMuW92w5HXqnmWuO4eGS6CpTKunPfQKSkoeojR-Ot2HSxY0yh); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Emancipation-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0oAkT3etqKxnnFmVkOdyg1KqhFovsdO7BZ7DkoV2SnAmvN8J9); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Nope-img { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIgJp_ZoMufqDS17oo_fxOplO6W34XXM_LTpjQGyxAXEdxXwpH); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .White_Noise-img { + background-image: url(https://m.media-amazon.com/images/M/MV5BMDdmYjc3Y2EtM2FjYS00NGI2LTliZjgtYmQxMzJiMmUxNmI4XkEyXkFqcGdeQXVyNjY1MTg4Mzc@._V1_.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Strange_World-img { + background-image: url(https://resizing.flixster.com/2xMkNqbnCcVFU3sEAhAblUFRJa8=/ems.cHJkLWVtcy1hc3NldHMvbW92aWVzLzk5ZjM1MDZlLWU4ZWEtNDRjMi05Y2ViLTk4ZmY1YmQ3NjU2MS5qcGc=); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container #Nope { + color: red; +} +.wrapper__container #White_Noise { + color: red; +} +.wrapper__container #Strange_World { + color: red; +} +.wrapper__container .index { + height: 5px; + width: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/dist/index.js new file mode 100644 index 000000000..c8aef2d5a --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/dist/index.js @@ -0,0 +1,134 @@ +var Black_Adam = { + name: 'Black_Adam', + parice: 44.99, + Last_rental: 25 - 4 - 2021, + rented: 'No', + type_of_movie: 'Action' +}; +var Spirited = { + name: 'Spirited', + parice: 34.99, + Last_rental: 20 - 11 - 2022, + rented: 'Yes', + type_of_movie: 'Musical/Comedy' +}; +var Emancipation = { + name: 'Emancipation', + parice: 69.99, + Last_rental: 31 - 11 - 2022, + rented: 'Yes', + type_of_movie: 'Drama/Action' +}; +var Nope = { + name: 'Nope', + parice: 39.99, + Last_rental: 5 - 4 - 2019, + rented: 'No', + type_of_movie: 'Horror' +}; +var tomer = { + name: 'Tomer', + age: 21, + Address: 'Rachel the poet, 65, Haifa', + phone: 5896523 +}; +var matan = { + name: 'Matan', + age: 46, + Address: 'Moses Nussbaum, 23, Tel Aviv', + phone: 2232325 +}; +var Welcome = prompt("Welcome to BLOCKBUSTER\nEnter a username and click OK"); +var enter = function () { + try { + if (Welcome == ' ' || !Welcome) { + alert("It is not possible to register without a username\n Please refresh the site and enter a username again"); + enter(); + } + else { + alert("Hi," + Welcome + ",\n thanks for signing up!"); + return Welcome; + } + } + catch (error) { } +}; +enter(); +console.log("A username has been entered: " + Welcome); +var dollarToShekel = function (dTS) { + try { + return dTS * 3.35; + } + catch (error) { + alert("Error"); + console.error(Error); + return false; + } +}; +var myButton1 = document.getElementById('Black_Adam'); +var clickedRent = myButton1.click; +myButton1.addEventListener("click", function (e) { + ; + +alert("this movie rent by " + matan.name + "\n is " + matan.age + " years old\n and is lives in " + matan.Address + "\n is phone number " + matan.phone); +}); +var myButton2 = document.getElementById('Spirited'); +var clickedNoRent = myButton2.click; +myButton2.addEventListener("click", function (e) { + alert("this move is no rent by nobody!\n You can rent the movie for " + Spirited.parice + " Dollars,\n (Enter OK to Continue to Rent)"); + if (myButton2) { + return alert("Thanks " + Welcome + " You rented the movie for " + Spirited.parice + ",\n by the way the price in shekels is " + dollarToShekel(Spirited.parice) + "."); + } +}); +var myButton3 = document.getElementById('Emancipation'); +var clickedRent2 = myButton3.click; +myButton3.addEventListener("click", function (e) { + ; + +alert("this movie rent by " + tomer.name + "\n is " + tomer.age + " years old\n and is lives in " + tomer.Address + "\n is phone number " + tomer.phone); +}); +var comingSoon = document.getElementById('Nope'); +var notArrived = comingSoon.click; +comingSoon.addEventListener("click", function (e) { + alert("this movie Not Arrived"); +}); +var comingSoon2 = document.getElementById('White_Noise'); +var notArrived2 = comingSoon2.click; +comingSoon2.addEventListener("click", function (e) { + alert("this movie Not Arrived"); +}); +var comingSoon3 = document.getElementById('Strange_World'); +var notArrived3 = comingSoon3.click; +comingSoon3.addEventListener("click", function (e) { + alert("this movie Not Arrived"); +}); +var checkMoney1 = document.getElementById('checkMoney1'); +var clicked1 = checkMoney1.click; +checkMoney1.addEventListener("click", function (e) { + alert("44.99 dollars,\n Click OK for the rental and the price in shekels "); + try { + if (myButton1) { + return alert("This movie is already rented by " + matan.name + ",\n by the way its price is " + dollarToShekel(Black_Adam.parice) + " Shekels"); + } + } + catch (error) { } +}); +var checkMoney2 = document.getElementById('checkMoney2'); +var clicked2 = checkMoney2.click; +checkMoney2.addEventListener("click", function (e) { + alert(Spirited.parice + " Dollars,\n Click OK for the rental and the price in shekels "); + try { + if (myButton1) { + return alert(dollarToShekel(Spirited.parice) + " in shekel"); + } + } + catch (error) { } +}); +var checkMoney3 = document.getElementById('checkMoney3'); +var clicked3 = checkMoney3.click; +checkMoney3.addEventListener("click", function (e) { + alert(Emancipation.parice + " Dollars,\n Click OK for the rental and the price in shekels "); + try { + if (myButton3) { + return alert("This movie is already rented by " + tomer.name + ",\n by the way its price is " + dollarToShekel(Emancipation.parice) + " Shekels"); + } + } + catch (error) { } +}); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/img/favicon.ico b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/img/favicon.ico new file mode 100644 index 000000000..aebe2b6e3 Binary files /dev/null and b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/img/favicon.ico differ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.css new file mode 100644 index 000000000..0475a8ae5 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.css @@ -0,0 +1,148 @@ +body { + margin: 0%; +} + +.wrapper { + width: auto; + height: 255vh; + background-color: antiquewhite; +} +.wrapper__head { + margin-top: -15px; + width: 100%; + height: 90px; + background-color: rgb(0, 8, 255); + padding: 0%; + font-size: 4rem; + text-align: center; + position: fixed; +} +.wrapper__head .outin { + width: 250px; + height: 250px; + display: inline; + background-color: rgb(213, 241, 5); + border: px1; + -webkit-animation-name: pop-outin; + animation-name: pop-outin; + -webkit-animation: 2s anim-popoutin ease infinite; + animation: 2s anim-popoutin ease infinite; +} +@-webkit-keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + 25% { + color: red; + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } +} +@keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + 25% { + color: red; + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } +} +.wrapper__container { + display: grid; + grid-template-columns: auto auto auto; + justify-content: center; + padding-top: 150px; + gap: 5px; +} +.wrapper__container .Black_Adam-img { + background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTNSOjcSmrXYIZ517jTKmCDxBwIJU4_ojFweUDLI1Dssn2UfTsx); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Spirited-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgMuW92w5HXqnmWuO4eGS6CpTKunPfQKSkoeojR-Ot2HSxY0yh); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Emancipation-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0oAkT3etqKxnnFmVkOdyg1KqhFovsdO7BZ7DkoV2SnAmvN8J9); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Nope-img { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIgJp_ZoMufqDS17oo_fxOplO6W34XXM_LTpjQGyxAXEdxXwpH); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .White_Noise-img { + background-image: url(https://m.media-amazon.com/images/M/MV5BMDdmYjc3Y2EtM2FjYS00NGI2LTliZjgtYmQxMzJiMmUxNmI4XkEyXkFqcGdeQXVyNjY1MTg4Mzc@._V1_.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Strange_World-img { + background-image: url(https://resizing.flixster.com/2xMkNqbnCcVFU3sEAhAblUFRJa8=/ems.cHJkLWVtcy1hc3NldHMvbW92aWVzLzk5ZjM1MDZlLWU4ZWEtNDRjMi05Y2ViLTk4ZmY1YmQ3NjU2MS5qcGc=); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container #Nope { + color: red; +} +.wrapper__container #White_Noise { + color: red; +} +.wrapper__container #Strange_World { + color: red; +} +.wrapper__container .index { + height: 5px; + width: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.html new file mode 100644 index 000000000..47466ca3f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.html @@ -0,0 +1,85 @@ + + + + + + + + Document + + + + + +
    +
    +
    BLOCKBUSTER
    +
    +
    +
    +
    +

    Black Adam

    +
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.     +
    +
    +
    +

    Spirited

    +
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.     +
    +
    +
    +

    Emancipation

    +
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.     +
    +
    +
    +

    Nope
    (Coming Soon)

    +
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.     +
    +
    +
    +

    White Noise
    (Coming Soon)

    +
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.     +
    +
    +
    +

    Strange_World
    (Coming Soon)

    +
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.
    + ipsum dolor sit amet consectetur
    adipisicibus enim
    eligendi odio pariatur + quibusdam,
    esse ratione quod ut.     +
    + + + +
    +
    + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.scss b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.scss new file mode 100644 index 000000000..fc69007e6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.scss @@ -0,0 +1,156 @@ +body { + margin: 0%; +} + +.wrapper { + width: auto; + height: 255vh; + background-color: antiquewhite; + + + &__head { + margin-top: -15px; + width: 100%; + height: 90px; + background-color: rgb(0, 8, 255); + padding: 0%; + font-size: 4rem; + text-align: center; + position: fixed; + + .outin { + width: 250px; + height: 250px; + display: inline; + background-color: rgb(213, 241, 5); + border: px1; + animation-name: pop-outin; + animation: 2s anim-popoutin ease infinite; + } + } + + + @keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + + 25% { + color: red; + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + } + + &__container { + display: grid; + grid-template-columns: auto auto auto; + justify-content: center; + padding-top: 150px; + gap: 5px; + + + + .Black_Adam-img { + background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTNSOjcSmrXYIZ517jTKmCDxBwIJU4_ojFweUDLI1Dssn2UfTsx); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + + } + .Spirited-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgMuW92w5HXqnmWuO4eGS6CpTKunPfQKSkoeojR-Ot2HSxY0yh); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + .Emancipation-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0oAkT3etqKxnnFmVkOdyg1KqhFovsdO7BZ7DkoV2SnAmvN8J9); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + .Nope-img { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIgJp_ZoMufqDS17oo_fxOplO6W34XXM_LTpjQGyxAXEdxXwpH); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + .White_Noise-img { + background-image: url(https://m.media-amazon.com/images/M/MV5BMDdmYjc3Y2EtM2FjYS00NGI2LTliZjgtYmQxMzJiMmUxNmI4XkEyXkFqcGdeQXVyNjY1MTg4Mzc@._V1_.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + .Strange_World-img { + background-image: url(https://resizing.flixster.com/2xMkNqbnCcVFU3sEAhAblUFRJa8=/ems.cHJkLWVtcy1hc3NldHMvbW92aWVzLzk5ZjM1MDZlLWU4ZWEtNDRjMi05Y2ViLTk4ZmY1YmQ3NjU2MS5qcGc=); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + +#Nope{ + color: red; +} +#White_Noise{ + color: red; +} +#Strange_World{ + color: red; +} + .index{ + height: 5px; + width: 5px; + } + + + + } + + + + +} + +// @media only screen and (min-width: 600px) { +// .container + +// } +// @media only screen and (min-width: 900px) { +// width: 100%; +// } \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.ts new file mode 100644 index 000000000..f95037978 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/itayAmosi/index.ts @@ -0,0 +1,160 @@ +interface Movies { + name: string + parice: Number + Last_rental: Number + rented: String + type_of_movie: string +} +interface Users { + name: string + age: Number + Address: string + phone: Number +} + +const Black_Adam: Movies = { + name: 'Black_Adam', + parice: 44.99, + Last_rental: 25 - 4 - 2021, + rented: 'No', + type_of_movie: 'Action', +} +const Spirited: Movies = { + name: 'Spirited', + parice: 34.99, + Last_rental: 20 - 11 - 2022, + rented: 'Yes', + type_of_movie: 'Musical/Comedy', +} +const Emancipation: Movies = { + name: 'Emancipation', + parice: 69.99, + Last_rental: 31 - 11 - 2022, + rented: 'Yes', + type_of_movie: 'Drama/Action', +} +const Nope: Movies = { + name: 'Nope', + parice: 39.99, + Last_rental: 5 - 4 - 2019, + rented: 'No', + type_of_movie: 'Horror', +} +const tomer: Users = { + name: 'Tomer', + age: 21, + Address: 'Rachel the poet, 65, Haifa', + phone: 5896523, +} +const matan: Users = { + name: 'Matan', + age: 46, + Address: 'Moses Nussbaum, 23, Tel Aviv', + phone: 2232325, +} +const Welcome =prompt(`Welcome to BLOCKBUSTER +Enter a username and click OK`) +const enter: Function = () => { + try { + + if (Welcome == ' ' || !Welcome) { + alert(`It is not possible to register without a username + Please refresh the site and enter a username again`) +enter() + } else { + alert(`Hi,${Welcome}, + thanks for signing up!`) + return Welcome + } + } catch (error) {} +} +enter() +console.log(`A username has been entered: ${Welcome}`) +const dollarToShekel: Function = (dTS: number): number | false => { + try { + return dTS * 3.35 + } catch (error) { + alert(`Error`) + console.error(Error) + return false + } +} +const myButton1: any = document.getElementById('Black_Adam') +const clickedRent = myButton1.click +myButton1.addEventListener(`click`, function (e) { + ;+alert(`this movie rent by ${matan.name} + is ${matan.age} years old + and is lives in ${matan.Address} + is phone number ${matan.phone}`) +}) +const myButton2: any = document.getElementById('Spirited') +const clickedNoRent = myButton2.click +myButton2.addEventListener(`click`, function (e) { + alert( + `this move is no rent by nobody! + You can rent the movie for ${Spirited.parice} Dollars, + (Enter OK to Continue to Rent)`, + ) + if (myButton2) { + return alert(`Thanks ${Welcome} You rented the movie for ${Spirited.parice}, + by the way the price in shekels is ${dollarToShekel(Spirited.parice)}.`) + } +}) +const myButton3: any = document.getElementById('Emancipation') +const clickedRent2 = myButton3.click +myButton3.addEventListener(`click`, function (e) { + ;+alert(`this movie rent by ${tomer.name} + is ${tomer.age} years old + and is lives in ${tomer.Address} + is phone number ${tomer.phone}`) +}) +const comingSoon: any = document.getElementById('Nope') +const notArrived = comingSoon.click +comingSoon.addEventListener(`click`, function (e) { + alert(`this movie Not Arrived`) +}) +const comingSoon2: any = document.getElementById('White_Noise') +const notArrived2 = comingSoon2.click +comingSoon2.addEventListener(`click`, function (e) { + alert(`this movie Not Arrived`) +}) +const comingSoon3: any = document.getElementById('Strange_World') +const notArrived3 = comingSoon3.click +comingSoon3.addEventListener(`click`, function (e) { + alert(`this movie Not Arrived`) +}) +const checkMoney1: any = document.getElementById('checkMoney1') +const clicked1 = checkMoney1.click +checkMoney1.addEventListener(`click`, function (e) { + alert(`44.99 dollars, + Click OK for the rental and the price in shekels `) + try { + if (myButton1) { + return alert(`This movie is already rented by ${matan.name}, + by the way its price is ${dollarToShekel(Black_Adam.parice)} Shekels`) + } + } catch (error) {} +}) +const checkMoney2: any = document.getElementById('checkMoney2') +const clicked2 = checkMoney2.click +checkMoney2.addEventListener(`click`, function (e) { + alert(`${Spirited.parice} Dollars, + Click OK for the rental and the price in shekels `) + try { + if (myButton1) { + return alert(`${dollarToShekel(Spirited.parice)} in shekel`) + } + } catch (error) {} +}) +const checkMoney3: any = document.getElementById('checkMoney3') +const clicked3 = checkMoney3.click +checkMoney3.addEventListener(`click`, function (e) { + alert(`${Emancipation.parice} Dollars, + Click OK for the rental and the price in shekels `) + try { + if (myButton3) { + return alert(`This movie is already rented by ${tomer.name}, + by the way its price is ${dollarToShekel(Emancipation.parice)} Shekels`) + } + } catch (error) {} +}) diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/app.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/app.ts new file mode 100644 index 000000000..42219fbfc --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/app.ts @@ -0,0 +1,50 @@ +interface Movies { + name: string; + price: number; + rented_by: String; + } + + interface user { + name:string; + nickname:string; + age:number; + phone:number; + } + +const avatar:Movies = { + name: 'avatar', + price: 10, + rented_by: 'john' +}; + +const Novembre:Movies = { + name: 'Novembre', + price: 20, + rented_by: 'salome' +}; + +function Shekels (video:Movies){ + try { + let new_price:number = video.price * 3.53 + return new_price; + } + catch(error){ + console.error("error") + } + } + + + +const movie:string| null= prompt("which movie do you want to rent?") +if (movie==" " || !movie){ + alert ("please enter a movie") +} + else if(movie == "avatar"){ + alert(`john take the movie`) + } + else if(movie == "Novembre"){ + alert(`the price for novembre is ${Shekels(Novembre)} shekels`) + } +else { + alert("enter a moovie that we have") +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/dist/app.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/dist/app.js new file mode 100644 index 000000000..ea440dcb0 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/dist/app.js @@ -0,0 +1,32 @@ +var avatar = { + name: 'avatar', + price: 10, + rented_by: 'john' +}; +var Novembre = { + name: 'Novembre', + price: 20, + rented_by: 'salome' +}; +function Shekels(video) { + try { + var new_price = video.price * 3.53; + return new_price; + } + catch (error) { + console.error("error"); + } +} +var movie = prompt("which movie do you want to rent?"); +if (movie == " " || !movie) { + alert("please enter a movie"); +} +else if (movie == "avatar") { + alert("john take the movie"); +} +else if (movie == "Novembre") { + alert("the price for novembre is " + Shekels(Novembre) + " shekels"); +} +else { + alert("enter a moovie that we have"); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/john-ben/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/dist/index.js new file mode 100644 index 000000000..85121b4bb --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/dist/index.js @@ -0,0 +1,33 @@ +var names = ['Matanel', 'Shalev', 'Johnson', 'David', 'Ori', 'Jorj', 'Madina', 'Drake', 'DaBaby', 'INT']; +var intervalId; +function onVideoClick(videoElement) { + resetNames(); +} +function toggleNames() { + var namesButton = document.getElementById('names-button'); + var namesList = document.getElementById('names-list'); + if (namesList.style.display === 'none') { + namesList.style.display = 'block'; + namesButton.textContent = 'Hide names'; + intervalId = setInterval(function () { + namesList.innerHTML = ''; + for (var _i = 0, names_1 = names; _i < names_1.length; _i++) { + var name = names_1[_i]; + var nameElement = document.createElement('p'); + nameElement.textContent = name + " has already watched this video."; + namesList.appendChild(nameElement); + } + }, 250); + } + else { + resetNames(); + } +} +function resetNames() { + var namesButton = document.getElementById('names-button'); + var namesList = document.getElementById('names-list'); + clearInterval(intervalId); + namesList.style.display = 'none'; + namesList.innerHTML = ''; + namesButton.textContent = 'Who watched?'; +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/dist/style.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/dist/style.css new file mode 100644 index 000000000..c2462a611 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/dist/style.css @@ -0,0 +1,43 @@ +.vid-list { + margin-top: 50px; + display: flex; + justify-content: center; +} + +.names-container { + display: flex; + align-items: center; + justify-content: center; +} + +.names-container button { + display: inline-block; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + background-color: #f8f8f8; + font-size: 16px; + margin-left: 15px; + cursor: pointer; +} + +.names-container button:hover { + background-color: #77b196; +} + +.names-container .names-list { + font-family: "Times New Roman", Times, serif; + display: none; + list-style-type: none; + padding: 0; + margin-left: 25px; +} + +.names-container .names-list li { + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + font-size: 16px; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/index.html new file mode 100644 index 000000000..25c3cc9a9 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/index.html @@ -0,0 +1,25 @@ + + + + + + + Catch Names - INT Version + + + + +
    + + +
    + +
      +
    +
    + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/index.ts new file mode 100644 index 000000000..d12676f4d --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/index.ts @@ -0,0 +1,37 @@ +const names = ['Matanel', 'Shalev', 'Johnson', 'David', 'Ori', 'Jorj', 'Madina', 'Drake', 'DaBaby', 'INT']; +let intervalId; + +function onVideoClick(videoElement) { + resetNames(); +} + +function toggleNames() { + const namesButton = document.getElementById('names-button'); + const namesList = document.getElementById('names-list'); + + if (namesList.style.display === 'none') { + namesList.style.display = 'block'; + namesButton.textContent = 'Hide names'; + + intervalId = setInterval(function() { + namesList.innerHTML = ''; + for (const name of names) { + const nameElement = document.createElement('p'); + nameElement.textContent = `${name} has already watched this video.`; + namesList.appendChild(nameElement); + } + }, 250); + } else { + resetNames(); + } +} + +function resetNames() { + const namesButton = document.getElementById('names-button'); + const namesList = document.getElementById('names-list'); + + clearInterval(intervalId); + namesList.style.display = 'none'; + namesList.innerHTML = ''; + namesButton.textContent = 'Who watched?'; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/style.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/style.css new file mode 100644 index 000000000..c2462a611 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/style.css @@ -0,0 +1,43 @@ +.vid-list { + margin-top: 50px; + display: flex; + justify-content: center; +} + +.names-container { + display: flex; + align-items: center; + justify-content: center; +} + +.names-container button { + display: inline-block; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + background-color: #f8f8f8; + font-size: 16px; + margin-left: 15px; + cursor: pointer; +} + +.names-container button:hover { + background-color: #77b196; +} + +.names-container .names-list { + font-family: "Times New Roman", Times, serif; + display: none; + list-style-type: none; + padding: 0; + margin-left: 25px; +} + +.names-container .names-list li { + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + font-size: 16px; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/style.scss b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/style.scss new file mode 100644 index 000000000..c18a003a4 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/style.scss @@ -0,0 +1,40 @@ +.vid-list{ + margin-top: 50px; + display: flex; + justify-content: center; +} + + +.names-container { + display: flex; + align-items: center; + justify-content: center; + } + .names-container button { + display: inline-block; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + background-color: #f8f8f8; + font-size: 16px; + margin-left: 15px; + cursor: pointer; + } + .names-container button:hover { + background-color: #77b196; + } + .names-container .names-list { + font-family: 'Times New Roman', Times, serif; + display: none; + list-style-type: none; + padding: 0; + margin-left: 25px; + } + .names-container .names-list li { + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + font-size: 16px; + } \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/vids/1.mp4 b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/vids/1.mp4 new file mode 100644 index 000000000..897823957 Binary files /dev/null and b/02-TypeScript/08-objects/01-basic/Home-puzzles/matanel harush/vids/1.mp4 differ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..5b4110d35 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/dist/index.js @@ -0,0 +1,90 @@ +var noa = { + userName: "Noa1806", + password: "123456", + videos: [] +}; +var avatar = { + name: "Avatar", + producer: "James Cameron", + price: 10.9 +}; +var zootropolis = { + name: "Zootropolis", + producer: "Walt Disney", + price: 10.9 +}; +var lalaland = { + name: "Lalaland", + producer: "Damien Chazelle", + price: 10.9 +}; +var price = prompt("enter the name of the movie you want to convert his price to shekel:"); +if (!price) { + alert("you need to enter a value"); +} +else if (price != "avatar") { + alert("this movie is not available"); +} +else { + alert(convertToShekels(avatar)); +} +function convertToShekels(video) { + try { + return video.price * 3.25; + } + catch (error) { + console.error(error); + return false; + } +} +/* +let movieArr:Video[] = [avatar, zootropolis,lalaland]; +setVideoToUser(noa,movieArr); + + +function setVideoToUser(user:User, movieArr:Video[]): void | false{ + try { + let getFromUser= prompt(`enter the movies you are going to watch from this list: avatar, zootropolis, lalaland.`,`To stop enter . or null`); + while (getFromUser != "." || !getFromUser){ + switch (getFromUser){ + case "avatar": + { + user.videos?.unshift(movieArr[0]); + setViewsToVideo (user, movieArr[0]); + } + break; + case "zootropolis": + { + user.videos?.unshift(movieArr[1]); + setViewsToVideo (user, movieArr[1]); + } + break; + case "lalaland": + { + user.videos?.unshift(movieArr[2]); + setViewsToVideo (user, movieArr[2]); + } + break; + default : + alert ("this movie is not available"); + } + } + console.log (user.videos?.toString); + } catch (error) { + console.error(error); + return false; + } +} + + +function setViewsToVideo(user:User, video:Video): void | false{ + try { + video.viewBy?.unshift(user); + console.log (video.viewBy?.toString); + } catch (error) { + console.error(error); + return false; + } +} + +*/ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..92f88abf1 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/noa-meillet/index.ts @@ -0,0 +1,109 @@ +interface User{ + userName: string; + password: string; + videos?: Video[]; + + +} + +interface Video{ + name: string; + producer: string; + price: number; + rentTo?: User; + viewBy?:User[]; +} + +const noa:User = { + userName: "Noa1806", + password: "123456", + videos: [] +} + +const avatar:Video = { + name:"Avatar", + producer:"James Cameron", + price: 10.9 +} + + +const zootropolis:Video = { + name:"Zootropolis", + producer:"Walt Disney", + price: 10.9 +} + +const lalaland:Video = { + name:"Lalaland", + producer:"Damien Chazelle", + price: 10.9 +} + +const price= prompt("enter the name of the movie you want to convert his price to shekel:") +if (!price){ + alert("you need to enter a value") +} else if (price!="avatar") { + alert("this movie is not available") +} else { + alert (convertToShekels(avatar)); +} + +function convertToShekels(video:Video):number | false{ + try { + return video.price*3.25; + } catch (error) { + console.error(error); + return false; + } +} +/* +let movieArr:Video[] = [avatar, zootropolis,lalaland]; +setVideoToUser(noa,movieArr); + + +function setVideoToUser(user:User, movieArr:Video[]): void | false{ + try { + let getFromUser= prompt(`enter the movies you are going to watch from this list: avatar, zootropolis, lalaland.`,`To stop enter . or null`); + while (getFromUser != "." || !getFromUser){ + switch (getFromUser){ + case "avatar": + { + user.videos?.unshift(movieArr[0]); + setViewsToVideo (user, movieArr[0]); + } + break; + case "zootropolis": + { + user.videos?.unshift(movieArr[1]); + setViewsToVideo (user, movieArr[1]); + } + break; + case "lalaland": + { + user.videos?.unshift(movieArr[2]); + setViewsToVideo (user, movieArr[2]); + } + break; + default : + alert ("this movie is not available"); + } + } + console.log (user.videos?.toString); + } catch (error) { + console.error(error); + return false; + } +} + + +function setViewsToVideo(user:User, video:Video): void | false{ + try { + video.viewBy?.unshift(user); + console.log (video.viewBy?.toString); + } catch (error) { + console.error(error); + return false; + } +} + +*/ \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/app.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/app.ts new file mode 100644 index 000000000..cc4f66703 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/app.ts @@ -0,0 +1,77 @@ +"use strict"; + +//Create data for Blockbuster: +//Create an interface for videos and an interface for users. +//The video has a price property (in US dollars). +//It also has a property about who is the person that rented it. + +interface User { + firstName: string; + lastName: string; + age: number; +} + +interface Video { + name: string; + price: number; + whoRent: string; +} + +const Dana: User = { + firstName: "Dana", + lastName: "cohen", + age: 22, +}; + +const Maya: User = { + firstName: "Maya", + lastName: "Levi", + age: 30, +}; + +const America: Video = { + name: "America", + price: 15, + whoRent: "Dana", +}; + +const Forest: Video = { + name: "Forest", + price: 10, + whoRent: "Maya", +}; + +//create a function that gets a video object and returns the price in shekels + +function usdToNis(Video: number): number | false { + try { + return 3.53 * Video; + } catch (error) { + console.error(error); + return false; + } +} + +const enter = prompt("Please enter your user name:"); +if (enter == " " || !enter) { + alert(`You cant rent without a user name`); +} +console.log(`username: ${enter}`); +const ThankYou = alert(`Hi ${enter}, thank you for coming`); + +const movie: string | null = prompt("What movie?"); +if (movie == "" || !movie) { + const movie = alert("You have to choose"); +} else if (movie == "America") { + const movie = alert( + `You chose to watch ${America.name}, please give me ${usdToNis( + America.price + )} NIS` + ); +} else if (movie == "Forest") { + const movie = alert( + `You chose to watch ${Forest.name}, please give me ${usdToNis( + Forest.price + )} NIS` + ); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/dist/app.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/dist/app.js new file mode 100644 index 000000000..95b7d9d4f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/dist/app.js @@ -0,0 +1,47 @@ +"use strict"; +var Dana = { + firstName: "Dana", + lastName: "cohen", + age: 22 +}; +var Maya = { + firstName: "Maya", + lastName: "Levi", + age: 30 +}; +var America = { + name: "America", + price: 15, + whoRent: "Dana" +}; +var Forest = { + name: "Forest", + price: 10, + whoRent: "Maya" +}; +//create a function that gets a video object and returns the price in shekels +function usdToNis(Video) { + try { + return 3.53 * Video; + } + catch (error) { + console.error(error); + return false; + } +} +var enter = prompt("Please enter your user name:"); +if (enter == " " || !enter) { + alert("You cant rent without a user name"); +} +console.log("username: " + enter); +var ThankYou = alert("Hi " + enter + ", thank you for coming"); +var movie = prompt("What movie?"); +if (movie == "" || !movie) { + var movie_1 = alert("You have to choose"); +} +else if (movie == "America") { + var movie_2 = alert("You chose to watch " + America.name + ", please give me " + usdToNis(America.price) + " NIS"); +} +else if (movie == "Forest") { + var movie_3 = alert("You chose to watch " + Forest.name + ", please give me " + usdToNis(Forest.price) + " NIS"); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/index.html new file mode 100644 index 000000000..64cbbf8b0 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/dist/index.js new file mode 100644 index 000000000..7c179f41a --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/dist/index.js @@ -0,0 +1,47 @@ +function pricOfVideo(obj) { + try { + console.log(obj.price * 3.5); + return obj.price * 3.5; + } + catch (error) { + console.error("error"); + return false; + } +} +const TheCurrier = { + name: "TheCurrier", + price: 50, +}; +const Lorem1 = { + name: "TheCurrier", + price: 20, +}; +const Lorem2 = { + name: "TheCurrier", + price: 30, +}; +const Lorem3 = { + name: "TheCurrier", + price: 40, +}; +const userSelection = prompt("please select a movie, the options are:TheCurrier,Lorem1,Lorem2,Lorem3"); +if (userSelection === null || userSelection === " ") { + console.log("Not movie in the list, null or space"); + console.log(userSelection); +} +else if (userSelection === "TheCurrier") { + const videoPrice = pricOfVideo(TheCurrier); +} +else if (userSelection === "Lorem2") { + const videoPrice = pricOfVideo(Lorem2); +} +else if (userSelection === "Lorem3") { + const videoPrice = pricOfVideo(Lorem3); +} +else if (userSelection === "Lorem1") { + const videoPrice = pricOfVideo(Lorem1); +} +else { + console.log("Not movie in the list"); + console.log(userSelection); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/index.ts new file mode 100644 index 000000000..fe6c6e958 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level1/index.ts @@ -0,0 +1,64 @@ +interface Video { + name:string, + price:number, + renter?:string, +} + +interface User { + name:string, + age:number, +} + +function pricOfVideo(obj:Video):number|false { + try { + console.log(obj.price*3.5) + return obj.price*3.5 + } + catch (error) { + console.error("error") + return false + } +} + +const TheCurrier:Video={ + name: "TheCurrier", + price:50, +} + +const Lorem1:Video={ + name: "TheCurrier", + price:20, +} + +const Lorem2:Video={ + name: "TheCurrier", + price:30, +} + +const Lorem3:Video={ + name: "TheCurrier", + price:40, +} + +const userSelection=prompt("please select a movie, the options are:TheCurrier,Lorem1,Lorem2,Lorem3") + +if (userSelection===null||userSelection===" ") { + console.log("Not movie in the list, null or space") + console.log(userSelection) +} +else if (userSelection==="TheCurrier") { + const videoPrice=pricOfVideo(TheCurrier); +} +else if (userSelection==="Lorem2") { + const videoPrice=pricOfVideo(Lorem2); +} +else if (userSelection==="Lorem3") { + const videoPrice=pricOfVideo(Lorem3); +} +else if (userSelection==="Lorem1") { + const videoPrice=pricOfVideo(Lorem1); +} +else{ + console.log("Not movie in the list") + console.log(userSelection) +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/dist/index.js new file mode 100644 index 000000000..5adb191b1 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/dist/index.js @@ -0,0 +1,75 @@ +function pricOfVideo(obj) { + try { + console.log(obj.price * 3.5); + return obj.price * 3.5; + } + catch (error) { + console.error("error"); + return false; + } +} +function videoRenter(videoObj, userObj) { + try { + videoObj.renter = userObj.name; + console.log(videoObj); + return videoObj; + } + catch (error) { + console.error("error"); + return false; + } +} +const TheCurrier = { + name: "TheCurrier", + price: 50, +}; +const Lorem1 = { + name: "TheCurrier", + price: 20, +}; +const Lorem2 = { + name: "TheCurrier", + price: 30, +}; +const Dudu = { + name: "Dudu", + age: 40, +}; +const Tom = { + name: "Tom", + age: 30, +}; +const userSelectionVideo = prompt("please select a movie, the options are:TheCurrier,Lorem1,Lorem2"); +const userSelectionUser = prompt("please select a movie, the options are:Dudu,Tom"); +if (userSelectionVideo === null || userSelectionUser === null || userSelectionVideo === " " || userSelectionUser === " ") { + console.log("Not movie/User in the list, null or space"); + console.log(userSelectionVideo); +} +else if (userSelectionVideo === "TheCurrier" && userSelectionUser === "Dudu") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Dudu); +} +else if (userSelectionVideo === "TheCurrier" && userSelectionUser === "Tom") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); +} +else if (userSelectionVideo === "Lorem1" && userSelectionUser === "Dudu") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); +} +else if (userSelectionVideo === "Lorem1" && userSelectionUser === "Tom") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); +} +else if (userSelectionVideo === "Lorem2" && userSelectionUser === "Dudu") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); +} +else if (userSelectionVideo === "Lorem2" && userSelectionUser === "Tom") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); +} +else { + console.log("Not movie in the list"); + console.log(userSelectionVideo); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/index.ts new file mode 100644 index 000000000..49569d4dc --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level2/index.ts @@ -0,0 +1,100 @@ +interface Video { + name:string, + price:number, + renter?:string, + listOfRenters?: string[], +} + +interface User { + name:string, + age:number, + listOfVideos?:string[], +} + +function pricOfVideo(obj:Video):number|false { + try { + console.log(obj.price*3.5) + return obj.price*3.5 + } + catch (error) { + console.error("error") + return false + } +} +function videoRenter (videoObj:Video, userObj:User):object|false { +try { + videoObj.renter=userObj.name + console.log(videoObj) + return videoObj +} + +catch (error) { + console.error("error") + return false +} + +} + +const TheCurrier:Video={ + name: "TheCurrier", + price:50, +} + +const Lorem1:Video={ + name: "TheCurrier", + price:20, +} + +const Lorem2:Video={ + name: "TheCurrier", + price:30, +} + + +const Dudu:User={ + name: "Dudu", + age:40, +} + +const Tom:User={ + name: "Tom", + age:30, +} + +const userSelectionVideo=prompt("please select a movie, the options are:TheCurrier,Lorem1,Lorem2") +const userSelectionUser=prompt("please select a movie, the options are:Dudu,Tom") + +if (userSelectionVideo===null||userSelectionUser===null||userSelectionVideo===" "||userSelectionUser===" ") { + console.log("Not movie/User in the list, null or space") + console.log(userSelectionVideo) +} +else if (userSelectionVideo==="TheCurrier" && userSelectionUser==="Dudu") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Dudu); +} +else if (userSelectionVideo==="TheCurrier" && userSelectionUser==="Tom") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); +} +else if (userSelectionVideo==="Lorem1" && userSelectionUser==="Dudu") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); +} +else if (userSelectionVideo==="Lorem1" && userSelectionUser==="Tom") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); +} +else if (userSelectionVideo==="Lorem2" && userSelectionUser==="Dudu") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); +} +else if (userSelectionVideo==="Lorem2" && userSelectionUser==="Tom") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); +} + +else{ + console.log("Not movie in the list") + console.log(userSelectionVideo) +} + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/dist/index.js new file mode 100644 index 000000000..df2d677a0 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/dist/index.js @@ -0,0 +1,83 @@ +function pricOfVideo(obj) { + try { + console.log(obj.price * 3.5); + return obj.price * 3.5; + } + catch (error) { + console.error("error"); + return false; + } +} +function videoRenter(videoObj, userObj) { + try { + videoObj.renter = userObj.name; + console.log(videoObj); + return videoObj; + } + catch (error) { + console.error("error"); + return false; + } +} +const TheCurrier = { + name: "TheCurrier", + price: 50, + listOfRenters: ["Tom", "Dudu"], +}; +const Lorem1 = { + name: "TheCurrier", + price: 20, + listOfRenters: ["Tom", "Dilan"], +}; +const Lorem2 = { + name: "TheCurrier", + price: 30, + listOfRenters: ["Tom", "Dave", "Dan", "Din"], +}; +const Dudu = { + name: "Dudu", + age: 40, + listOfVideos: ["Lorem1", "Lorem2"], +}; +const Tom = { + name: "Tom", + age: 30, + listOfVideos: ["Lorem1", "TheCurrier"], +}; +const userSelectionVideo = prompt("please select a movie, the options are:TheCurrier,Lorem1,Lorem2"); +const userSelectionUser = prompt("please select a user, the options are:Dudu,Tom"); +if (userSelectionVideo === null || userSelectionUser === null || userSelectionVideo === " " || userSelectionUser === " ") { + console.log("Not movie/User in the list, null or space"); + console.log(userSelectionVideo); +} +else if (TheCurrier.listOfRenters.includes(userSelectionUser) || Lorem1.listOfRenters.includes(userSelectionUser) || Lorem2.listOfRenters.includes(userSelectionUser) + && Dudu.listOfVideos.includes(userSelectionVideo) || Tom.listOfVideos.includes(userSelectionVideo)) { + if (userSelectionVideo === "TheCurrier" && userSelectionUser === "Dudu") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Dudu); + } + else if (userSelectionVideo === "TheCurrier" && userSelectionUser === "Tom") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); + } + else if (userSelectionVideo === "Lorem1" && userSelectionUser === "Dudu") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); + } + else if (userSelectionVideo === "Lorem1" && userSelectionUser === "Tom") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); + } + else if (userSelectionVideo === "Lorem2" && userSelectionUser === "Dudu") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); + } + else if (userSelectionVideo === "Lorem2" && userSelectionUser === "Tom") { + const videoPrice = pricOfVideo(TheCurrier); + const referenceObj = videoRenter(TheCurrier, Tom); + } +} +else { + console.log("Not movie in the list"); + console.log(userSelectionVideo); +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/index.ts new file mode 100644 index 000000000..cef705209 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomi.samai/Level3/index.ts @@ -0,0 +1,107 @@ +interface Video { + name:string, + price:number, + renter?:string, + listOfRenters: string[], +} + +interface User { + name:string, + age:number, + listOfVideos:string[], +} + +function pricOfVideo(obj:Video):number|false { + try { + console.log(obj.price*3.5) + return obj.price*3.5 + } + catch (error) { + console.error("error") + return false + } +} +function videoRenter (videoObj:Video, userObj:User):object|false { +try { + videoObj.renter=userObj.name + console.log(videoObj) + return videoObj +} + +catch (error) { + console.error("error") + return false +} + +} + +const TheCurrier:Video={ + name: "TheCurrier", + price:50, + listOfRenters:["Tom","Dudu"], +} + +const Lorem1:Video={ + name: "TheCurrier", + price:20, + listOfRenters:["Tom","Dilan"], +} + +const Lorem2:Video={ + name: "TheCurrier", + price:30, + listOfRenters:["Tom","Dave","Dan","Din"], +} + + +const Dudu:User={ + name: "Dudu", + age:40, + listOfVideos:["Lorem1","Lorem2"], +} + +const Tom:User={ + name: "Tom", + age:30, + listOfVideos:["Lorem1","TheCurrier"], +} + +const userSelectionVideo=prompt("please select a movie, the options are:TheCurrier,Lorem1,Lorem2") +const userSelectionUser=prompt("please select a user, the options are:Dudu,Tom") + +if (userSelectionVideo===null||userSelectionUser===null||userSelectionVideo===" "||userSelectionUser===" ") { + console.log("Not movie/User in the list, null or space") + console.log(userSelectionVideo) +} +else if (TheCurrier.listOfRenters.includes(userSelectionUser)||Lorem1.listOfRenters.includes(userSelectionUser)|| Lorem2.listOfRenters.includes(userSelectionUser) + && Dudu.listOfVideos.includes(userSelectionVideo)||Tom.listOfVideos.includes(userSelectionVideo) ){ + + if (userSelectionVideo==="TheCurrier" && userSelectionUser==="Dudu") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Dudu); + } + else if (userSelectionVideo==="TheCurrier" && userSelectionUser==="Tom") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); + } + else if (userSelectionVideo==="Lorem1" && userSelectionUser==="Dudu") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); + } + else if (userSelectionVideo==="Lorem1" && userSelectionUser==="Tom") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); + } + else if (userSelectionVideo==="Lorem2" && userSelectionUser==="Dudu") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); + } + else if (userSelectionVideo==="Lorem2" && userSelectionUser==="Tom") { + const videoPrice=pricOfVideo(TheCurrier); + const referenceObj=videoRenter(TheCurrier,Tom); + } + } +else{ + console.log("Not movie in the list") + console.log(userSelectionVideo) +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/.vscode/settings.json b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/app.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/app.ts new file mode 100644 index 000000000..9f0f5f0e5 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/app.ts @@ -0,0 +1,343 @@ + +interface Videos { + price: number; + name?: string; + users: string[]; + getVideoPriceInShekels(video: Videos): string; + whoWatchedMe(videos: Videos); + namesOfTheScouts(Videos:Videos,typeB:string); + + movieAndSpecificUsers:{ + batman: { + BatmansScouts: string[]; + }; + + superman: { + supermanScouts: string[]; + }; + + theAvengers: { + theAvengersScouts: string[]; + }; +} + +} + +interface User { + name: string; + id: number; + password: number; + videos?: string[] | undefined; +} + +const videos: Videos = { + //Price in dollars "100$" + price: 0 , + users: [], + movieAndSpecificUsers:{ + batman: { + BatmansScouts: ["avi","shlomi","jonny"] + }, + + superman: { + supermanScouts: ["Israel","Uncle","bob"] + }, + + + theAvengers: { + theAvengersScouts: ["Shiral","Uncle","praise"] + }, + }, + + getVideoPriceInShekels(video: Videos): string { + try { + let input1=(document.querySelector(".input1") as HTMLInputElement).value; + video.price=parseInt(input1); + video.price=(video.price)*3.51; + console.log(video.price); + let result =(video.price).toString(); + return result; + + } catch (error) { + return error + } + + }, + + + + whoWatchedMe(videos: Videos) { + try { + let input = document.querySelector(".input2") as HTMLInputElement; + let valueOfinput = input.value; + videos.users[ videos.users.length] = valueOfinput; + return videos.users; + } catch (error) { + console.log(error); + } + + + + }, + + + namesOfTheScouts(Videos:Videos,typeB: string){ + try { + if (typeB==="b") { + let input_b=document.querySelector(".inputB")as HTMLInputElement; + let value_b=input_b.value; + videos.movieAndSpecificUsers.batman.BatmansScouts[videos.movieAndSpecificUsers.batman.BatmansScouts.length]=value_b; + return videos.movieAndSpecificUsers.batman.BatmansScouts; + } + if (typeB==="s") { + let input_s=document.querySelector(".inputS")as HTMLInputElement; + let value_s=input_s.value; + videos.movieAndSpecificUsers.superman.supermanScouts[videos.movieAndSpecificUsers.superman.supermanScouts.length]=value_s; + return videos.movieAndSpecificUsers.superman.supermanScouts; + } + if (typeB==="h") { + let input_h=document.querySelector(".inputH")as HTMLInputElement; + let value_h=input_h.value; + videos.movieAndSpecificUsers.theAvengers.theAvengersScouts[videos.movieAndSpecificUsers.theAvengers.theAvengersScouts.length]=value_h; + return videos.movieAndSpecificUsers.theAvengers.theAvengersScouts; + } + + + } catch (error) { + console.log(error); + } + + + + + + + + + + + + // for(let i in videos.movieAndSpecificUsers.batman.BatmansScouts) { + // console.log(videos.movieAndSpecificUsers.batman.BatmansScouts[i]); + // } + // console.log(`-----------------`) + + // for(let i in videos.movieAndSpecificUsers.superman.supermanScouts) { + // console.log(videos.movieAndSpecificUsers.superman.supermanScouts[i]); + + // } + // console.log(`-----------------`) + + // for(let i in videos.movieAndSpecificUsers.theAvengers.theAvengersScouts) { + // console.log(videos.movieAndSpecificUsers.theAvengers.theAvengersScouts[i]); + // } + + } + + + +}; + + + + +const btn1 = document.querySelector(".button1") as HTMLButtonElement; +btn1.addEventListener("click", (e) =>{ + let t =document.querySelector(".span1") as HTMLSpanElement + t.textContent=videos.getVideoPriceInShekels(videos); +}); + +// span1= + +// ---------------------------------------------------- +let btn2 = document.querySelector(".button2") as HTMLButtonElement; +btn2.addEventListener("click", (e) => { + let addListUsers=videos.whoWatchedMe(videos); + let list =document.querySelector(".span3") as HTMLSpanElement + list.innerHTML=addListUsers; + + +}); + + + +// ------------------------------------------------- + + +let button_b = document.querySelector(".buttonB") as HTMLButtonElement; + +button_b.addEventListener("click", (e) => { + let result_b =videos.namesOfTheScouts(videos,"b"); + let spanB=document.querySelector(".listB") as HTMLSpanElement; + spanB.innerHTML=result_b; +}); + + + + + + +let button_s = document.querySelector(".buttonS") as HTMLButtonElement; + +button_s.addEventListener("click", (e) => { + let result_s =videos.namesOfTheScouts(videos,"s"); + let spanS=document.querySelector(".listS") as HTMLSpanElement; + spanS.innerHTML=result_s; + +}); + + + + +let button_h = document.querySelector(".buttonH") as HTMLButtonElement; + +button_h.addEventListener("click", (e) => { + let result_h =videos.namesOfTheScouts(videos,"h"); + let spanH=document.querySelector(".listH") as HTMLSpanElement; + spanH.innerHTML=result_h; + +}); + + + + +let div1 = document.querySelector(".div1") as HTMLDivElement; +let div2 = document.querySelector(".div2") as HTMLDivElement; +let div3 = document.querySelector(".div3") as HTMLDivElement; + +let currency_exchange= videos.getVideoPriceInShekels(videos) +div1.innerHTML=currency_exchange; + +div2.innerHTML="The viewers of the film are" +for(let i in videos.users ){ + div2.innerHTML=videos.users[i]; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +// pre objects + +// const urielName = "Oriel"; +// const urielAge = 27; +// const urielAddress = "Rishon"; + +// interface State { +// name: string; +// YearOfIndependice: number; +// population: number; +// capitalCity: string; +// armyName: string; +// continent: string; +// } + +// interface Person { +// name: string; +// yearOfBirth: number; +// address: string; +// nickanme?: string; +// citizenship?: string; +// currentAddress?: string; +// } + +// const uriel: Person = { yearOfBirth: 1995, address: "Rishon", name: "Uriel" }; +// // const object = {"key":"value", "key":"value"} +// // key:value is called "property" + +// const israel: State = { +// name: "Israel", +// YearOfIndependice: 1948, +// population: 9000020, +// capitalCity: "Jerusalem", +// armyName: "IDF", +// continent: "Asia", +// }; + +// const iossiReels = { +// creator: "Iossi", +// videoId: "dsgdfgdfgdfgdfgdfhbvx_fdhtd", +// timeOfCreation: "25-2-2022", +// }; + +// console.log( +// `The state of ${israel.name} has a population of about ${israel["population"]}, ${israel.population}, and its army is called ${israel["army"]}` +// ); + +// for (const key in israel) { +// console.log(key); //key +// console.log(israel[key]); //value +// } + +// const messi: Person = { +// name: "Messi", +// address: "Israel st. 525", +// yearOfBirth: 1987, +// nickanme: "The goat", +// citizenship: "Argntina", +// currentAddress: "Paris", +// }; + +// const itay: Person = { +// name: "Itay", +// yearOfBirth: 1993, +// address: "Jerusalem", +// }; + +// for (const key in messi) { +// console.log(`${messi.name} ${key} is ${messi[key]}`); +// } + +// function getAgeOfPerson(obj: Person,obj2: Person): number | false { +// try { +// const currentYear: number = new Date().getFullYear(); +// const age = currentYear - obj.yearOfBirth; +// return age; +// } catch (error) { +// console.error(error); +// return false; +// } +// } + +// function getCitizenship(person: Person): string { +// try { +// if (person.citizenship) { +// return person.citizenship; +// } else { +// return "Unknowun"; +// } +// } catch (error) { +// console.error(error); +// return "Unknowun"; +// } +// } + +// const age = getAgeOfPerson(itay); +// console.log(`The age is ${age}`); + +// const citizenship = getCitizenship(uriel); +// console.log(citizenship); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/app.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/app.js new file mode 100644 index 000000000..7750d169e --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/app.js @@ -0,0 +1,202 @@ +var videos = { + //Price in dollars "100$" + price: 0, + users: [], + movieAndSpecificUsers: { + batman: { + BatmansScouts: ["avi", "shlomi", "jonny"] + }, + superman: { + supermanScouts: ["Israel", "Uncle", "bob"] + }, + theAvengers: { + theAvengersScouts: ["Shiral", "Uncle", "praise"] + } + }, + getVideoPriceInShekels: function (video) { + try { + var input1 = document.querySelector(".input1").value; + video.price = parseInt(input1); + video.price = (video.price) * 3.51; + console.log(video.price); + var result = (video.price).toString(); + return result; + } + catch (error) { + return error; + } + }, + whoWatchedMe: function (videos) { + try { + var input = document.querySelector(".input2"); + var valueOfinput = input.value; + videos.users[videos.users.length] = valueOfinput; + return videos.users; + } + catch (error) { + console.log(error); + } + }, + namesOfTheScouts: function (Videos, typeB) { + try { + if (typeB === "b") { + var input_b = document.querySelector(".inputB"); + var value_b = input_b.value; + videos.movieAndSpecificUsers.batman.BatmansScouts[videos.movieAndSpecificUsers.batman.BatmansScouts.length] = value_b; + return videos.movieAndSpecificUsers.batman.BatmansScouts; + } + if (typeB === "s") { + var input_s = document.querySelector(".inputS"); + var value_s = input_s.value; + videos.movieAndSpecificUsers.superman.supermanScouts[videos.movieAndSpecificUsers.superman.supermanScouts.length] = value_s; + return videos.movieAndSpecificUsers.superman.supermanScouts; + } + if (typeB === "h") { + var input_h = document.querySelector(".inputH"); + var value_h = input_h.value; + videos.movieAndSpecificUsers.theAvengers.theAvengersScouts[videos.movieAndSpecificUsers.theAvengers.theAvengersScouts.length] = value_h; + return videos.movieAndSpecificUsers.theAvengers.theAvengersScouts; + } + } + catch (error) { + console.log(error); + } + // for(let i in videos.movieAndSpecificUsers.batman.BatmansScouts) { + // console.log(videos.movieAndSpecificUsers.batman.BatmansScouts[i]); + // } + // console.log(`-----------------`) + // for(let i in videos.movieAndSpecificUsers.superman.supermanScouts) { + // console.log(videos.movieAndSpecificUsers.superman.supermanScouts[i]); + // } + // console.log(`-----------------`) + // for(let i in videos.movieAndSpecificUsers.theAvengers.theAvengersScouts) { + // console.log(videos.movieAndSpecificUsers.theAvengers.theAvengersScouts[i]); + // } + } +}; +var btn1 = document.querySelector(".button1"); +btn1.addEventListener("click", function (e) { + var t = document.querySelector(".span1"); + t.textContent = videos.getVideoPriceInShekels(videos); +}); +// span1= +// ---------------------------------------------------- +var btn2 = document.querySelector(".button2"); +btn2.addEventListener("click", function (e) { + var addListUsers = videos.whoWatchedMe(videos); + var list = document.querySelector(".span3"); + list.innerHTML = addListUsers; +}); +// ------------------------------------------------- +var button_b = document.querySelector(".buttonB"); +button_b.addEventListener("click", function (e) { + var result_b = videos.namesOfTheScouts(videos, "b"); + var spanB = document.querySelector(".listB"); + spanB.innerHTML = result_b; +}); +var button_s = document.querySelector(".buttonS"); +button_s.addEventListener("click", function (e) { + var result_s = videos.namesOfTheScouts(videos, "s"); + var spanS = document.querySelector(".listS"); + spanS.innerHTML = result_s; +}); +var button_h = document.querySelector(".buttonH"); +button_h.addEventListener("click", function (e) { + var result_h = videos.namesOfTheScouts(videos, "h"); + var spanH = document.querySelector(".listH"); + spanH.innerHTML = result_h; +}); +var div1 = document.querySelector(".div1"); +var div2 = document.querySelector(".div2"); +var div3 = document.querySelector(".div3"); +var currency_exchange = videos.getVideoPriceInShekels(videos); +div1.innerHTML = currency_exchange; +div2.innerHTML = "The viewers of the film are"; +for (var i in videos.users) { + div2.innerHTML = videos.users[i]; +} +// pre objects +// const urielName = "Oriel"; +// const urielAge = 27; +// const urielAddress = "Rishon"; +// interface State { +// name: string; +// YearOfIndependice: number; +// population: number; +// capitalCity: string; +// armyName: string; +// continent: string; +// } +// interface Person { +// name: string; +// yearOfBirth: number; +// address: string; +// nickanme?: string; +// citizenship?: string; +// currentAddress?: string; +// } +// const uriel: Person = { yearOfBirth: 1995, address: "Rishon", name: "Uriel" }; +// // const object = {"key":"value", "key":"value"} +// // key:value is called "property" +// const israel: State = { +// name: "Israel", +// YearOfIndependice: 1948, +// population: 9000020, +// capitalCity: "Jerusalem", +// armyName: "IDF", +// continent: "Asia", +// }; +// const iossiReels = { +// creator: "Iossi", +// videoId: "dsgdfgdfgdfgdfgdfhbvx_fdhtd", +// timeOfCreation: "25-2-2022", +// }; +// console.log( +// `The state of ${israel.name} has a population of about ${israel["population"]}, ${israel.population}, and its army is called ${israel["army"]}` +// ); +// for (const key in israel) { +// console.log(key); //key +// console.log(israel[key]); //value +// } +// const messi: Person = { +// name: "Messi", +// address: "Israel st. 525", +// yearOfBirth: 1987, +// nickanme: "The goat", +// citizenship: "Argntina", +// currentAddress: "Paris", +// }; +// const itay: Person = { +// name: "Itay", +// yearOfBirth: 1993, +// address: "Jerusalem", +// }; +// for (const key in messi) { +// console.log(`${messi.name} ${key} is ${messi[key]}`); +// } +// function getAgeOfPerson(obj: Person,obj2: Person): number | false { +// try { +// const currentYear: number = new Date().getFullYear(); +// const age = currentYear - obj.yearOfBirth; +// return age; +// } catch (error) { +// console.error(error); +// return false; +// } +// } +// function getCitizenship(person: Person): string { +// try { +// if (person.citizenship) { +// return person.citizenship; +// } else { +// return "Unknowun"; +// } +// } catch (error) { +// console.error(error); +// return "Unknowun"; +// } +// } +// const age = getAgeOfPerson(itay); +// console.log(`The age is ${age}`); +// const citizenship = getCitizenship(uriel); +// console.log(citizenship); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/dist/app.dev.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/dist/app.dev.js new file mode 100644 index 000000000..55278fe79 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/dist/app.dev.js @@ -0,0 +1,148 @@ +"use strict"; + +var videos = { + //Price in dollars "100$" + price: 100, + users: [], + movieAndSpecificUsers: { + batman: { + BatmansScouts: ["avi", "shlomi", "jonny"] + }, + superman: { + supermanScouts: ["Israel", "Uncle", "bob"] + }, + theAvengers: { + theAvengersScouts: ["Shiral", "Uncle", "praise"] + } + }, + getVideoPriceInShekels: function getVideoPriceInShekels(video) { + try { + console.log("the price is"); + return video.price * 3.51; + } catch (error) { + return false; + } + }, + whoWatchedMe: function whoWatchedMe(videos) { + var btn = document.querySelector(".button2"); + var users = 0; + btn.addEventListener("click", function (e) { + var input = document.querySelector(".input2"); + var valueOfinput = input.value; + + if (input) { + videos.users[users] = valueOfinput; + users++; + console.log("The users who watched the movie are "); + } + + console.log(videos.users); + }); + }, + namesOfTheScouts: function namesOfTheScouts(Videos) { + for (var i in videos.movieAndSpecificUsers.batman.BatmansScouts) { + console.log(videos.movieAndSpecificUsers.batman.BatmansScouts[i]); + } + + console.log("-----------------"); + + for (var i in videos.movieAndSpecificUsers.superman.supermanScouts) { + console.log(videos.movieAndSpecificUsers.superman.supermanScouts[i]); + } + + console.log("-----------------"); + + for (var i in videos.movieAndSpecificUsers.theAvengers.theAvengersScouts) { + console.log(videos.movieAndSpecificUsers.theAvengers.theAvengersScouts[i]); + } + } +}; +var Shekel = videos.getVideoPriceInShekels(videos); // ---------------------------------------------------- + +console.log(videos.whoWatchedMe(videos)); // ------------------------------------------------- + +videos.namesOfTheScouts(videos); // pre objects +// const urielName = "Oriel"; +// const urielAge = 27; +// const urielAddress = "Rishon"; +// interface State { +// name: string; +// YearOfIndependice: number; +// population: number; +// capitalCity: string; +// armyName: string; +// continent: string; +// } +// interface Person { +// name: string; +// yearOfBirth: number; +// address: string; +// nickanme?: string; +// citizenship?: string; +// currentAddress?: string; +// } +// const uriel: Person = { yearOfBirth: 1995, address: "Rishon", name: "Uriel" }; +// // const object = {"key":"value", "key":"value"} +// // key:value is called "property" +// const israel: State = { +// name: "Israel", +// YearOfIndependice: 1948, +// population: 9000020, +// capitalCity: "Jerusalem", +// armyName: "IDF", +// continent: "Asia", +// }; +// const iossiReels = { +// creator: "Iossi", +// videoId: "dsgdfgdfgdfgdfgdfhbvx_fdhtd", +// timeOfCreation: "25-2-2022", +// }; +// console.log( +// `The state of ${israel.name} has a population of about ${israel["population"]}, ${israel.population}, and its army is called ${israel["army"]}` +// ); +// for (const key in israel) { +// console.log(key); //key +// console.log(israel[key]); //value +// } +// const messi: Person = { +// name: "Messi", +// address: "Israel st. 525", +// yearOfBirth: 1987, +// nickanme: "The goat", +// citizenship: "Argntina", +// currentAddress: "Paris", +// }; +// const itay: Person = { +// name: "Itay", +// yearOfBirth: 1993, +// address: "Jerusalem", +// }; +// for (const key in messi) { +// console.log(`${messi.name} ${key} is ${messi[key]}`); +// } +// function getAgeOfPerson(obj: Person,obj2: Person): number | false { +// try { +// const currentYear: number = new Date().getFullYear(); +// const age = currentYear - obj.yearOfBirth; +// return age; +// } catch (error) { +// console.error(error); +// return false; +// } +// } +// function getCitizenship(person: Person): string { +// try { +// if (person.citizenship) { +// return person.citizenship; +// } else { +// return "Unknowun"; +// } +// } catch (error) { +// console.error(error); +// return "Unknowun"; +// } +// } +// const age = getAgeOfPerson(itay); +// console.log(`The age is ${age}`); +// const citizenship = getCitizenship(uriel); +// console.log(citizenship); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/responsive.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/responsive.css new file mode 100644 index 000000000..4e1babc45 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/responsive.css @@ -0,0 +1,5 @@ +@media only screen and (min-width: 900px) { + body { + text-align: center; + } +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/style.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/style.css new file mode 100644 index 000000000..87bc668d3 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/dist/style.css @@ -0,0 +1,190 @@ +body { + overflow: hidden; + background-color: #f8e3e3; +} + +.input1 { + font-weight: bold; + margin-top: 40px; + padding-left: 10px; + background-color: #c5bfbf; + font-size: 30px; + color: black; + border-radius: 5px; + border: 2px solid black; +} + +.button1 { + color: white; + border-radius: 5px; + margin-left: 15px; + font-size: large; + background-color: #e30000; + font-weight: bold; +} + +.button1:hover { + background-color: #f54b4b; +} + +::placeholder { + color: #156100; + font-weight: bold; + font-size: large; + height: 200px; + padding-left: 10px; + /* Firefox */ +} + +hr { + font-size: 20px; +} + +.span1 { + color: #034e03; + font-size: 30px; + margin-left: 210px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.iconS { + font-size: 20px; + color: green; +} + +.img1 { + font-size: 200px; + border: solid 4px black; +} + +.span2 { + margin-left: 20px; + font-weight: bold; + position: absolute; + font-size: 38px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.span3 { + font-size: 28px; + position: absolute; + top: 200px; + margin-left: 20px; + margin-right: 200px; + font-weight: bold; +} + +.input2 { + font-weight: bolder; + position: relative; + top: -10px; + background-color: #cfc7c7; + margin-left: 20px; + font-size: 20px; + border-radius: 5px; + color: black; +} + +.button2 { + position: relative; + top: -10px; + margin-left: 10px; + font-size: 18px; + background-color: #8dc28d; + color: black; + font-weight: bold; + border-radius: 5px; +} + +.button2:hover { + background-color: #aef1ae; +} + +video { + width: 250px; + height: 100px; + margin-left: 20px; +} + +.inputB { + margin-left: 20px; + background-color: #bab8b8; + font-weight: bold; + border-radius: 3px; +} + +.inputS { + margin-left: 30px; + background-color: #bab8b8; + font-weight: bold; + border-radius: 3px; +} + +.inputH { + margin-left: 40px; + background-color: #bab8b8; + font-weight: bold; + border-radius: 3px; +} + +.buttonB { + background-color: #8dc28d; + color: black; + font-weight: bold; + border-radius: 5px; +} + +.buttonS { + background-color: #8dc28d; + color: black; + font-weight: bold; + border-radius: 5px; +} + +.buttonH { + background-color: #8dc28d; + color: black; + font-weight: bold; + border-radius: 5px; +} + +.btn:hover { + background-color: #aef1ae; +} + +.h4-1 { + font-size: 20px; + margin-left: 46px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.h4-2 { + font-size: 20px; + margin-left: 116px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.h4-3 { + font-size: 20px; + margin-left: 124px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.m1 { + position: relative; + margin-left: 36px; +} + +.m2 { + position: relative; + margin-left: 132px; +} + +.m3 { + position: relative; + margin-left: 133px; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/img/s1.jpg b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/img/s1.jpg new file mode 100644 index 000000000..f3ca3f66d Binary files /dev/null and b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/img/s1.jpg differ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/index.html new file mode 100644 index 000000000..486630fee --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/index.html @@ -0,0 +1,61 @@ + + + + + + + + + Document + + + + + 0 + +
    +
    +
    + + + List of movie viewers +
    + + +
    + + + + + +

    + list of batman + list of spiderman + list of heroes +

    + + + + +
    +
    + + + + + + + + + + + + + + + + + diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/responsive.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/responsive.css new file mode 100644 index 000000000..4e1babc45 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/responsive.css @@ -0,0 +1,5 @@ +@media only screen and (min-width: 900px) { + body { + text-align: center; + } +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/responsive.scss b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/responsive.scss new file mode 100644 index 000000000..be540de61 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/responsive.scss @@ -0,0 +1,5 @@ +@media only screen and (min-width:900px) { + body { + text-align: center; + } + } \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/style.css b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/style.css new file mode 100644 index 000000000..2a02b1b84 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/style.css @@ -0,0 +1,208 @@ +body { + overflow: hidden; + background-color: rgb(248, 227, 227); +} + +.input1 { + font-weight: bold; + margin-top: 40px; + padding-left: 10px; + background-color: rgb(197, 191, 191); + font-size: 30px; + color: rgb(0, 0, 0); + border-radius: 5px; + border: 2px solid black; +} + +.button1 { + color: rgb(255, 255, 255); + border-radius: 5px; + margin-left: 15px; + font-size: large; + background-color: rgb(227, 0, 0); + font-weight: bold; +} + +.button1:hover { + background-color: rgb(245, 75, 75); +} + +::-moz-placeholder { + color: rgb(21, 97, 0); + font-weight: bold; + font-size: large; + height: 200px; + padding-left: 10px; + /* Firefox */ +} + +:-ms-input-placeholder { + color: rgb(21, 97, 0); + font-weight: bold; + font-size: large; + height: 200px; + padding-left: 10px; + /* Firefox */ +} + +::placeholder { + color: rgb(21, 97, 0); + font-weight: bold; + font-size: large; + height: 200px; + padding-left: 10px; + /* Firefox */ +} + +hr { + font-size: 20px; +} + +.span1 { + color: rgb(3, 78, 3); + font-size: 30px; + margin-left: 210px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.iconS { + font-size: 20px; + color: green; +} + +.img1 { + font-size: 200px; + border: solid 4px black; +} + +.span2 { + margin-left: 20px; + font-weight: bold; + position: absolute; + font-size: 38px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.span3 { + font-size: 28px; + position: absolute; + top: 200px; + margin-left: 20px; + margin-right: 200px; + font-weight: bold; +} + +.input2 { + font-weight: bolder; + position: relative; + top: -10px; + background-color: rgb(207, 199, 199); + margin-left: 20px; + font-size: 20px; + border-radius: 5px; + color: black; +} + +.button2 { + position: relative; + top: -10px; + margin-left: 10px; + font-size: 18px; + background-color: rgb(141, 194, 141); + color: rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; +} + +.button2:hover { + background-color: rgb(174, 241, 174); +} + +video { + width: 250px; + height: 100px; + margin-left: 20px; +} + +.inputB { + margin-left: 20px; + background-color: rgb(186, 184, 184); + font-weight: bold; + border-radius: 3px; +} + +.inputS { + margin-left: 30px; + background-color: rgb(186, 184, 184); + font-weight: bold; + border-radius: 3px; +} + +.inputH { + margin-left: 40px; + background-color: rgb(186, 184, 184); + font-weight: bold; + border-radius: 3px; +} + +.buttonB { + background-color: rgb(141, 194, 141); + color: rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; +} + +.buttonS { + background-color: rgb(141, 194, 141); + color: rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; +} + +.buttonH { + background-color: rgb(141, 194, 141); + color: rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; +} + +.btn:hover { + background-color: rgb(174, 241, 174); +} + +.h4-1 { + font-size: 20px; + margin-left: 46px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.h4-2 { + font-size: 20px; + margin-left: 116px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.h4-3 { + font-size: 20px; + margin-left: 124px; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +.m1 { + position: relative; + margin-left: 36px; +} + +.m2 { + position: relative; + margin-left: 132px; +} + +.m3 { + position: relative; + margin-left: 133px; +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/style.scss b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/style.scss new file mode 100644 index 000000000..1f8ccd66d --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/style.scss @@ -0,0 +1,181 @@ +body{ + overflow: hidden; + background-color: rgb(248, 227, 227); + +} +.input1{ +font-weight: bold; + margin-top: 40px; + padding-left: 10px; +background-color: rgb(197, 191, 191); +font-size: 30px; +color: rgb(0, 0, 0); +border-radius: 5px; +border:2px solid black; + +} + +.button1{ + color: rgb(255, 255, 255); +border-radius: 5px; +margin-left: 15px; +font-size:large; +background-color: rgb(227, 0, 0); +font-weight: bold; +} +.button1:hover{ + background-color: rgb(245, 75, 75); +} +::placeholder { + color: rgb(21, 97, 0); + font-weight: bold; + font-size: large; + height: 200px; + padding-left: 10px; + /* Firefox */ + } + hr{ + font-size: 20px; + + } + .span1{ + color: rgb(3, 78, 3); + font-size: 30px; + margin-left:210px; + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + + } + .iconS{ + font-size: 20px; + color: green; + } + .img1{ + font-size: 200px; + border: solid 4px black; + } + .span2{ + margin-left: 20px; + font-weight: bold; + position: absolute; + font-size: 38px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + + .span3{ + font-size: 28px; + position: absolute; + top: 200px; + margin-left: 20px; + margin-right: 200px; + font-weight: bold; + } + .input2{ + font-weight: bolder; + position: relative; + top: -10px; + background-color: rgb(207, 199, 199); + margin-left: 20px; + font-size: 20px; + border-radius: 5px; + color: black; + } + .button2{ + position: relative; + top: -10px; + margin-left: 10px; + font-size: 18px; + background-color: rgb(141, 194, 141); + color:rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; + + + } + .button2:hover{ + background-color: rgb(174, 241, 174); + } + video{ + width: 250px; + height: 100px; + margin-left: 20px; + + } + + + + + + .inputB{ + margin-left: 20px; + background-color: rgb(186, 184, 184); + font-weight: bold; + border-radius: 3px; + } + .inputS{ + margin-left: 30px; + background-color: rgb(186, 184, 184); + font-weight: bold; + border-radius: 3px; + } + .inputH{ + margin-left: 40px; + background-color: rgb(186, 184, 184); + font-weight: bold; + border-radius: 3px; + } + + .buttonB{ + background-color: rgb(141, 194, 141); + color:rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; + + } + .buttonS{ + background-color: rgb(141, 194, 141); + color:rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; + + } + .buttonH{ + background-color: rgb(141, 194, 141); + color:rgb(0, 0, 0); + font-weight: bold; + border-radius: 5px; + + } + .btn:hover{ + background-color: rgb(174, 241, 174); + } + .h4-1{ + font-size: 20px; + margin-left: 46px; + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + .h4-2{ + font-size: 20px; + margin-left: 116px; + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + .h4-3{ + font-size: 20px; + margin-left: 124px; + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + .m1{ + position: relative; + margin-left: 36px; + } + .m2{ + position: relative; + margin-left: 132px; + } + .m3{ + position: relative; + margin-left: 133px; + } diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/b.mp4 b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/b.mp4 new file mode 100644 index 000000000..0caf07d18 Binary files /dev/null and b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/b.mp4 differ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/h.mp4 b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/h.mp4 new file mode 100644 index 000000000..32634e227 Binary files /dev/null and b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/h.mp4 differ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/s.mp4 b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/s.mp4 new file mode 100644 index 000000000..5fcb4c348 Binary files /dev/null and b/02-TypeScript/08-objects/01-basic/Home-puzzles/shlomiAzenkot/video/s.mp4 differ diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/dist/index.js new file mode 100644 index 000000000..1ef2071db --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/dist/index.js @@ -0,0 +1,63 @@ +var _a, _b; +var tomer = { + Name: "tomer6633", + userPassword: "tomer1" +}; +var noa = { + Name: "noa532", + userPassword: "noa1" +}; +var fastAndFurious9 = { + nameOfMovie: "fastAndFurious9", + price: 9.99, + rent: tomer +}; +var avengersEndaGame = { + nameOfMovie: "avengers EndaGame", + price: 24.99 +}; +var avatar2 = { + nameOfMovie: "Avatar 2", + price: 49.99, + rent: noa +}; +function dolarToShekel(video) { + try { + return 3.53 * video; + } + catch (error) { + console.error(error); + return false; + } +} +function videoPriceInDolars(priceDolar) { + var priceInShekel = dolarToShekel(priceDolar); + if (typeof priceInShekel === "number") { + return priceInShekel; + } + else { + return false; + } +} +var login = prompt("Welcome to my website\nEnter a username"); +if (login == " " || !login) { + alert("It is not possible to get to the website without a username\n "); +} +console.log("username: " + login); +var Thanks = alert("Hi " + login + ", thanks for signing up"); +var movieAllow = prompt("what movie do you want to rent? we have\nfastAndFurious9\navengersEndaGame\navatar2"); +if (movieAllow == " " || !movieAllow) { + var movieAllow_1 = alert("please enter a movie"); +} +else if (movieAllow == "fastAndFurious9") { + var movieAllow_2 = alert(((_a = fastAndFurious9.rent) === null || _a === void 0 ? void 0 : _a.Name) + " take the movie"); +} +else if (movieAllow == "avatar2") { + alert("the price for avatar 2 is " + avatar2.price + "in shekels is " + dolarToShekel(avatar2.price) + " but " + ((_b = avatar2.rent) === null || _b === void 0 ? void 0 : _b.Name) + " rent this one"); +} +else if (movieAllow == "avengersEndaGame") { + alert("the price for avengersEndaGame is " + avengersEndaGame.price + "in shekels is " + dolarToShekel(avengersEndaGame.price)); +} +else { + alert("Only For The Names In The Qustion (You Can Copy Paste)"); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/index.html new file mode 100644 index 000000000..7a84c2e8f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/index.ts new file mode 100644 index 000000000..ca118b999 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/tomer-cohen/index.ts @@ -0,0 +1,83 @@ +interface Video { + price: number; + nameOfMovie: string; + rent?: User; +} +interface User { + Name: string; + userPassword: string; +} +const tomer: User = { + Name: `tomer6633`, + userPassword: `tomer1`, +}; +const noa: User = { + Name: `noa532`, + userPassword: `noa1`, +}; +const fastAndFurious9: Video = { + nameOfMovie: `fastAndFurious9`, + price: 9.99, + rent: tomer, +}; + +const avengersEndaGame: Video = { + nameOfMovie: `avengers EndaGame`, + price: 24.99, +}; +const avatar2: Video = { + nameOfMovie: `Avatar 2`, + price: 49.99, + rent: noa, +}; +function dolarToShekel(video: number): number | false { + try { + return 3.53 * video; + } catch (error) { + console.error(error); + return false; + } +} + +function videoPriceInDolars(priceDolar: number): number | false { + const priceInShekel = dolarToShekel(priceDolar); + if (typeof priceInShekel === "number") { + return priceInShekel; + } else { + return false; + } +} + +const login = prompt(`Welcome to my website +Enter a username`); +if (login == " " || !login) { + alert(`It is not possible to get to the website without a username + `); +} +console.log(`username: ${login}`); +const Thanks = alert(`Hi ${login}, thanks for signing up`); + +const movieAllow: string | null = + prompt(`what movie do you want to rent? we have +fastAndFurious9 +avengersEndaGame +avatar2`); +if (movieAllow == " " || !movieAllow) { + const movieAllow = alert("please enter a movie"); +} else if (movieAllow == `fastAndFurious9`) { + const movieAllow = alert(`${fastAndFurious9.rent?.Name} take the movie`); +} else if (movieAllow == `avatar2`) { + alert( + `the price for avatar 2 is ${avatar2.price}in shekels is ${dolarToShekel( + avatar2.price + )} but ${avatar2.rent?.Name} rent this one` + ); +} else if (movieAllow == `avengersEndaGame`) { + alert( + `the price for avengersEndaGame is ${ + avengersEndaGame.price + }in shekels is ${dolarToShekel(avengersEndaGame.price)}` + ); +} else { + alert(`Only For The Names In The Qustion (You Can Copy Paste)`); +} diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/dist/index.js b/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/dist/index.js new file mode 100644 index 000000000..39413d895 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/dist/index.js @@ -0,0 +1,45 @@ +var Movies = [ + { + Title: "Virgins", + price: 30, + RentedBy: 1 + }, + { + Title: "BreakPoint", + price: 35, + RentedBy: 2 + } +]; +var Users = [ + { + id: 1, + FirstName: "Yuval", + LastName: "Partush" + }, + { + id: 2, + FirstName: "Cristiano", + LastName: "Ronaldo" + }, +]; +function usdToNis(Movies) { + return (Movies.price * 3.53).toFixed(2); +} +; +// const result = usdToNis(Movies[1]); +// console.log(result); +function movieTaken(Movies, id) { + if (Movies.RentedBy === id) { + for (var i = 0; i < Users.length; i++) { + var user = null; + if (Users[i].id === id) { + user = Users[i]; + console.log(id + " has the movie " + Movies.Title); + } + } + } + else { + console.log(" " + id + " does not have the movie " + Movies.Title); + } +} +movieTaken(Movies[0], 2); diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/index.html b/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/index.ts b/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/index.ts new file mode 100644 index 000000000..7045069b6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/Home-puzzles/yuval.p/index.ts @@ -0,0 +1,59 @@ +interface Movie { + Title: string, + price: number, + RentedBy:number, +} +interface User{ + id:number, + FirstName:string, + LastName:string, +} +const Movies:Array =[ + { + Title: "Virgins", + price: 30, + RentedBy:1 + }, + { + Title: "BreakPoint", + price: 35, + RentedBy: 2 + } +]; +const Users:Array = [ + { + id: 1, + FirstName:"Yuval", + LastName:"Partush" + }, + { + id:2, + FirstName:"Cristiano", + LastName:"Ronaldo" + }, +]; + +function usdToNis(Movies: Movie){ + return (Movies.price * 3.53).toFixed(2); +}; +// const result = usdToNis(Movies[1]); +// console.log(result); + +function movieTaken(Movies:Movie, id:number){ + if(Movies.RentedBy === id){ + for(let i = 0; i < Users.length; i++){ + let user: User | null = null; + if(Users[i].id === id){ + user = Users[i]; + console.log(`${id} has the movie ${Movies.Title}`); + } + + } + } + else + { + console.log(` ${id} does not have the movie ${Movies.Title}`) + } +} +movieTaken(Movies[0], 2) + diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/dist/index.js b/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/dist/index.js new file mode 100644 index 000000000..5b5842589 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/dist/index.js @@ -0,0 +1,29 @@ +var Israel = { + name: "Israel", + capitalCity: "jerusalem", + population: 90000000, + YearOfIndependice: 1948, + coinNane: "shekel", + launguage: "hebrow" +}; +var Indya = { + name: "Indya", + capitalCity: "NewDelhi", + population: 20000000000, + YearOfIndependice: 1900 +}; +function getTheOldestState(Israel, Indya) { + try { + if (Israel.YearOfIndependice > Indya.YearOfIndependice) { + return Indya.name; + } + else if (Israel.YearOfIndependice < Indya.YearOfIndependice) { + return Israel.name; + } + } + catch (error) { + console.error(error); + return undefined; + } +} +console.log("The bigest Stat is " + getTheOldestState(Israel, Indya)); diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/index.html b/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/index.html new file mode 100644 index 000000000..c13eba640 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/index.html @@ -0,0 +1,11 @@ + + + + + + + Document + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/index.ts b/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/index.ts new file mode 100644 index 000000000..63b9c78f6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/AVIVA-ELIAS/index.ts @@ -0,0 +1,45 @@ +interface state { + name: string; + capitalCity: string; + population: number; + YearOfIndependice: number; + coinNane?: string; + launguage?: string + + +} + + +const Israel: state = { + name: "Israel", + capitalCity: "jerusalem", + population: 90000000, + YearOfIndependice: 1948, + coinNane: "shekel", + launguage: "hebrow" + +} +const Indya: state = { + name: "Indya", + capitalCity: "NewDelhi", + population: 20000000000, + YearOfIndependice: 1900, + + +} +function getTheOldestState(Israel: state, Indya: State): string|undefined { + try { + if (Israel.YearOfIndependice > Indya.YearOfIndependice) { + return Indya.name + } + else if (Israel.YearOfIndependice < Indya.YearOfIndependice) { + return Israel.name} + + } catch (error) { + console.error(error) + return undefined + }} + + + + console.log ( `The bigest Stat is ${getTheOldestState(Israel,Indya )}`) \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/app.ts b/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/app.ts new file mode 100644 index 000000000..89e949c78 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/app.ts @@ -0,0 +1,29 @@ + +interface State { + country:string; + yearOfIndependentcy:number; +} + +const india:State = { + country:"india", + yearOfIndependentcy:1947 +} + +const israel:State = { + country:"israel", + yearOfIndependentcy:1948 +} + +function early(obj1:State, obj2:State):string{ + if (obj1.yearOfIndependentcy > obj2.yearOfIndependentcy){ + return obj2.country; + } + else if (obj1.yearOfIndependentcy < obj2.yearOfIndependentcy){ + return obj1.country; + } + else { + return "The independancy year is the same"; + } +} + +console.log(early(india,israel)); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/dist/app.js b/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/dist/app.js new file mode 100644 index 000000000..c6a82c7d0 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/dist/app.js @@ -0,0 +1,20 @@ +var india = { + country: "india", + yearOfIndependentcy: 1947 +}; +var israel = { + country: "israel", + yearOfIndependentcy: 1948 +}; +function early(obj1, obj2) { + if (obj1.yearOfIndependentcy > obj2.yearOfIndependentcy) { + return obj2.country; + } + else if (obj1.yearOfIndependentcy < obj2.yearOfIndependentcy) { + return obj1.country; + } + else { + return "The independancy year is the same"; + } +} +console.log(early(india, israel)); diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/index.html b/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/Room6-Shlomi-shalom-Nikita/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/dist/index.js b/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/dist/index.js new file mode 100644 index 000000000..b6cfb90e2 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/dist/index.js @@ -0,0 +1,33 @@ +var Israel = { + YearOfIndependence: 1948, + continent: "asia", + name: "israel" +}; +var Narniya = { + YearOfIndependence: 1950, + continent: "wardrobe", + name: "Narniya" +}; +var usa = { + YearOfIndependence: 1776, + continent: "amrica", + name: "USA" +}; +function Older(obj, obj2) { + try { + if (obj.YearOfIndependence < obj2.YearOfIndependence) { + return obj.name; + } + else if (obj.YearOfIndependence > obj2.YearOfIndependence) { + return obj2.name; + } + else { + return "even"; + } + } + catch (error) { + console.error("wrong waedrobe"); + } +} +var YearOfIndependence = Older(Israel, usa); +console.log(YearOfIndependence); diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/index.html b/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/index.ts b/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/index.ts new file mode 100644 index 000000000..1d485e6c6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/amit&tomer/index.ts @@ -0,0 +1,40 @@ +interface State { + YearOfIndependence: number; + continent: string; + name: string; +} +const Israel :State = { + YearOfIndependence: 1948, + continent: `asia`, + name: `israel`, +}; + +const Narniya : State= { + YearOfIndependence: 1950, + continent: `wardrobe`, + name: `Narniya`, +}; +const usa : State= { + YearOfIndependence: 1776, + continent: `amrica`, + name: `USA`, +}; +function Older(obj:State,obj2:State) { + try { + if(obj.YearOfIndependence < obj2.YearOfIndependence){ + + return obj.name; + }else if (obj.YearOfIndependence > obj2.YearOfIndependence){ + + return obj2.name; + }else{ + return`even`; + } + } catch (error) { + console.error(`wrong waedrobe`) + } +} + +const YearOfIndependence = Older(Israel,usa); +console.log(YearOfIndependence); + diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/dist/index.js b/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/dist/index.js new file mode 100644 index 000000000..025c046cb --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/dist/index.js @@ -0,0 +1,29 @@ +var japen = { + name: "japen", + yearOfIndetedice: 1941, + continent: "asia" +}; +var holand = { + name: "holand", + yearOfIndetedice: 1948, + continent: "asia", + captial: "jerusalem" +}; +function olderstate(state1, state2) { + try { + var yearOfIndetedice = state1.yearOfIndetedice; + var yearOfIndetedice2 = state2.yearOfIndetedice; + if (yearOfIndetedice < yearOfIndetedice2) { + return state1.name; + } + else { + return state2.name; + } + } + catch (error) { + console.error(error); + return "we have an error"; + } +} +var independice = olderstate(japen, holand); +console.log(independice); diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/index.html b/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/index.ts b/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/index.ts new file mode 100644 index 000000000..81323c975 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/room 3/index.ts @@ -0,0 +1,39 @@ +interface State{ + name:string; + yearOfIndetedice:number; + continent:string; + captial?:string; +} + +const japen:State={ + name:"japen", + yearOfIndetedice:1941, + continent:"asia", + +} + +const holand:State={ + name:"holand", + yearOfIndetedice:1948, + continent:"asia", + captial:"jerusalem" +} + +function olderstate (state1:State,state2:State):string { + try { + const yearOfIndetedice= state1.yearOfIndetedice + const yearOfIndetedice2=state2.yearOfIndetedice + if(yearOfIndetedice < yearOfIndetedice2){ + return state1.name + }else{ + return state2.name + } + + } catch (error) { + console.error(error) + return "we have an error" + } + +} +const independice = olderstate(japen,holand) +console.log(independice) \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/dist/index.js b/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/dist/index.js new file mode 100644 index 000000000..16aebecf9 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/dist/index.js @@ -0,0 +1,25 @@ +var israel = { name: "israel", + year: 1948, + population: 9000000 }; +var india = { name: "india", + year: 1947, + population: 10000000 }; +function whoIsOlder(object1, object2) { + try { + if (object1.year < object2.year) { + return object1.name; + } + else if (object1.year > object2.year) { + return object2.name; + } + else { + return "The states are established the same year."; + } + } + catch (error) { + console.error(error); + return false; + } +} +console.log("wich state established first?"); +console.log(whoIsOlder(israel, india)); diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/index.html b/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/index.ts b/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/index.ts new file mode 100644 index 000000000..903f249a2 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/class-puzzle/room-5/index.ts @@ -0,0 +1,33 @@ +interface State { + name: string; + year:number; + population:number; +} + +const israel:State= +{name:"israel", + year:1948, + population:9000000} + + const india:State= +{name:"india", + year:1947, + population:10000000} + +function whoIsOlder(object1:State, object2:State):string | false{ + try { + if (object1.year < object2.year){ + return object1.name; + } else if (object1.year > object2.year){ + return object2.name; + } else { + return "The states are established the same year." + } + } catch (error) { + console.error(error); + return false; + } +} + +console.log("wich state established first?") +console.log (whoIsOlder(israel,india)) diff --git a/02-TypeScript/08-objects/01-basic/class-puzzle/start.md b/02-TypeScript/08-objects/01-basic/class-puzzle/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/08-objects/01-basic/example/dist/index.js b/02-TypeScript/08-objects/01-basic/example/dist/index.js new file mode 100644 index 000000000..f3983f1ca --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/example/dist/index.js @@ -0,0 +1,70 @@ +//pre objects +var urielName = "Oriel"; +var urielAge = 27; +var urielAddress = "Rishon"; +var uriel = { yearOfBirth: 1995, address: "Rishon", name: "Uriel" }; +// const object = {"key":"value", "key":"value"} +// key:value is called "property" +var israel = { + name: "Israel", + YearOfIndependice: 1948, + population: 9000020, + capitalCity: "Jerusalem", + armyName: "IDF", + continent: "Asia" +}; +var iossiReels = { + creator: "Iossi", + videoId: "dsgdfgdfgdfgdfgdfhbvx_fdhtd", + timeOfCreation: "25-2-2022" +}; +console.log("The state of " + israel.name + " has a population of about " + israel["population"] + ", " + israel.population + ", and its army is called " + israel["army"]); +for (var key in israel) { + console.log(key); //key + console.log(israel[key]); //value +} +var messi = { + name: "Messi", + address: "Israel st. 525", + yearOfBirth: 1987, + nickanme: "The goat", + citizenship: "Argntina", + currentAddress: "Paris" +}; +var itay = { + name: "Itay", + yearOfBirth: 1993, + address: "Jerusalem" +}; +for (var key in messi) { + console.log(messi.name + " " + key + " is " + messi[key]); +} +function getAgeOfPerson(obj, obj2) { + try { + var currentYear = new Date().getFullYear(); + var age_1 = currentYear - obj.yearOfBirth; + return age_1; + } + catch (error) { + console.error(error); + return false; + } +} +function getCitizenship(person) { + try { + if (person.citizenship) { + return person.citizenship; + } + else { + return "Unknowun"; + } + } + catch (error) { + console.error(error); + return "Unknowun"; + } +} +var age = getAgeOfPerson(itay); +console.log("The age is " + age); +var citizenship = getCitizenship(uriel); +console.log(citizenship); diff --git a/02-TypeScript/08-objects/01-basic/example/index.html b/02-TypeScript/08-objects/01-basic/example/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/example/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/example/index.ts b/02-TypeScript/08-objects/01-basic/example/index.ts new file mode 100644 index 000000000..1c0b48420 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/example/index.ts @@ -0,0 +1,100 @@ +//pre objects + +const urielName = "Oriel"; +const urielAge = 27; +const urielAddress = "Rishon"; + +interface State { + name: string; + YearOfIndependice: number; + population: number; + capitalCity: string; + armyName: string; + continent: string; +} + +interface Person { + name: string; + yearOfBirth: number; + address: string; + nickanme?: string; + citizenship?: string; + currentAddress?: string; +} + +const uriel: Person = { yearOfBirth: 1995, address: "Rishon", name: "Uriel" }; +// const object = {"key":"value", "key":"value"} +// key:value is called "property" + +const israel: State = { + name: "Israel", + YearOfIndependice: 1948, + population: 9000020, + capitalCity: "Jerusalem", + armyName: "IDF", + continent: "Asia", +}; + +const iossiReels = { + creator: "Iossi", + videoId: "dsgdfgdfgdfgdfgdfhbvx_fdhtd", + timeOfCreation: "25-2-2022", +}; + +console.log( + `The state of ${israel.name} has a population of about ${israel["population"]}, ${israel.population}, and its army is called ${israel["army"]}` +); + +for (const key in israel) { + console.log(key); //key + console.log(israel[key]); //value +} + +const messi: Person = { + name: "Messi", + address: "Israel st. 525", + yearOfBirth: 1987, + nickanme: "The goat", + citizenship: "Argntina", + currentAddress: "Paris", +}; + +const itay: Person = { + name: "Itay", + yearOfBirth: 1993, + address: "Jerusalem", +}; + +for (const key in messi) { + console.log(`${messi.name} ${key} is ${messi[key]}`); +} + +function getAgeOfPerson(obj: Person,obj2: Person): number | false { + try { + const currentYear: number = new Date().getFullYear(); + const age = currentYear - obj.yearOfBirth; + return age; + } catch (error) { + console.error(error); + return false; + } +} + +function getCitizenship(person: Person): string { + try { + if (person.citizenship) { + return person.citizenship; + } else { + return "Unknowun"; + } + } catch (error) { + console.error(error); + return "Unknowun"; + } +} + +const age = getAgeOfPerson(itay); +console.log(`The age is ${age}`); + +const citizenship = getCitizenship(uriel); +console.log(citizenship); diff --git a/02-TypeScript/08-objects/01-basic/followup/Amit/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/Amit/dist/index.js new file mode 100644 index 000000000..40b8a64ca --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Amit/dist/index.js @@ -0,0 +1,9 @@ +var messi = { + name: "messi", + age: 27, + origin: "Argentina", + sport: "soccer", + nativeLanguage: "spanish", + worldCupsWon: 1 +}; +console.log("the " + messi.sport + " player " + messi.name + " was born in " + messi.origin + ". He speaks " + messi["nativeLanguage"] + "\nand he won " + messi["worldCupsWon"] + " World Cup."); diff --git a/02-TypeScript/08-objects/01-basic/followup/Amit/index.html b/02-TypeScript/08-objects/01-basic/followup/Amit/index.html new file mode 100644 index 000000000..41a9277de --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Amit/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/Amit/index.ts b/02-TypeScript/08-objects/01-basic/followup/Amit/index.ts new file mode 100644 index 000000000..ce332f532 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Amit/index.ts @@ -0,0 +1,11 @@ +const messi = { + name: "messi", + age: 27, + origin: "Argentina", + sport: "soccer", + nativeLanguage: "spanish", + worldCupsWon: 1 +} + +console.log(`the ${messi.sport} player ${messi.name} was born in ${messi.origin}. He speaks ${messi["nativeLanguage"]} +and he won ${messi["worldCupsWon"]} World Cup.`); \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/Ayala/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/Ayala/dist/index.js new file mode 100644 index 000000000..263ffc0c5 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Ayala/dist/index.js @@ -0,0 +1,15 @@ +var messsi = { + name: "Messi", + age: 35, + citizenship: "Argntina", + currentAddress: "Paris" +}; +var israel = { + name: "Israel", + age: 74, + population: 9000020, + capitalCity: "Jerusalem", + army: "IDF", + continent: "Asia" +}; +console.log("The state of " + israel.name + " has a population of about " + israel["population"] + ", " + israel.population + ", and its army is called " + israel["army"]); diff --git a/02-TypeScript/08-objects/01-basic/followup/Ayala/index.ts b/02-TypeScript/08-objects/01-basic/followup/Ayala/index.ts new file mode 100644 index 000000000..2546dd12b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Ayala/index.ts @@ -0,0 +1,22 @@ +const messsi = { + name: "Messi", + age: 35, + citizenship: "Argntina", + currentAddress: "Paris" +}; + + + +const israel = { + name: "Israel", + age: 74, + population: 9000020, + capitalCity: "Jerusalem", + army: "IDF", + continent: "Asia", +}; + +console.log( + + `The state of ${israel.name} has a population of about ${israel["population"]}, ${israel.population}, and its army is called ${israel["army"]}` +); diff --git a/02-TypeScript/08-objects/01-basic/followup/Ayala/inex.html b/02-TypeScript/08-objects/01-basic/followup/Ayala/inex.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Ayala/inex.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/Itai-G/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/Itai-G/dist/index.js new file mode 100644 index 000000000..8c2ff963c --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Itai-G/dist/index.js @@ -0,0 +1,14 @@ +var messi = { + age: 35, + nickname: "the Goat", + citizensip: "Argentina", + currentaddres: "paris" +}; +var israel = { + name: "israel", + age: 75, + population: 900000, + army: "idf", + continante: "asia" +}; +console.log("the state of " + israel.name + " has a population of " + israel.population); diff --git a/02-TypeScript/08-objects/01-basic/followup/Itai-G/index.html b/02-TypeScript/08-objects/01-basic/followup/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/Itai-G/index.ts b/02-TypeScript/08-objects/01-basic/followup/Itai-G/index.ts new file mode 100644 index 000000000..77485bf8c --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/Itai-G/index.ts @@ -0,0 +1,18 @@ +const messi = { + age: 35, + nickname: "the Goat", + citizensip: "Argentina", + currentaddres: "paris", +}; + +const israel = { + name: "israel", + age: 75, + population: 900000, + army: "idf", + continante: "asia", +}; + +console.log( + `the state of ${israel.name} has a population of ${israel.population}` +); diff --git a/02-TypeScript/08-objects/01-basic/followup/angela/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/angela/dist/index.js new file mode 100644 index 000000000..30b7a0196 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/angela/dist/index.js @@ -0,0 +1,6 @@ +var userData = { + name: "Angela", + age: 21, + location: "patch tiqwa" +}; +console.log("your name is " + userData.name + " you live in " + userData["location"] + " and you're " + userData.age); diff --git a/02-TypeScript/08-objects/01-basic/followup/angela/index.html b/02-TypeScript/08-objects/01-basic/followup/angela/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/angela/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/angela/index.ts b/02-TypeScript/08-objects/01-basic/followup/angela/index.ts new file mode 100644 index 000000000..402892d34 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/angela/index.ts @@ -0,0 +1,8 @@ +const userData = { + name:"Angela", + age:21, + location:"patch tiqwa" + +} + +console.log(`your name is ${userData.name} you live in ${userData["location"]} and you're ${userData.age}` ) \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/aviva-elias/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/aviva-elias/dist/index.js new file mode 100644 index 000000000..a3e2c4ad2 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/aviva-elias/dist/index.js @@ -0,0 +1,7 @@ +var Aviva = { + age: 46, + address: "krayot", + sitizenship: "israel", + kids: 4 +}; +console.log(" Aviva address is " + Aviva.address + " and she " + Aviva["age"] + " years old"); diff --git a/02-TypeScript/08-objects/01-basic/followup/aviva-elias/index.ts b/02-TypeScript/08-objects/01-basic/followup/aviva-elias/index.ts new file mode 100644 index 000000000..e1b0461c6 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/aviva-elias/index.ts @@ -0,0 +1,11 @@ +const Aviva={ + age:46, + address:"krayot", + sitizenship:"israel", + kids:4, +} + +console.log(` Aviva address is ${Aviva.address} and she ${Aviva["age"]} years old`) + + + diff --git a/02-TypeScript/08-objects/01-basic/followup/aviva-elias/insex.html b/02-TypeScript/08-objects/01-basic/followup/aviva-elias/insex.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/aviva-elias/insex.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/itayAmosi/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/itayAmosi/dist/index.js new file mode 100644 index 000000000..2d66ddd58 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/itayAmosi/dist/index.js @@ -0,0 +1,10 @@ +var uriel = { age: 27, address: 'Rishon', name: 'Uriel' }; +// const object = {"key":"value", "key":"value"} +// key:value is called "property" +var messi = { + age: 35, + nickanme: 'The goat', + citizenship: 'Argntina', + currentAddress: 'Paris' +}; +console.log("uriel is live in\n " + uriel.address + "\n and love messi and messi lives in \n " + messi["currentAddress"]); diff --git a/02-TypeScript/08-objects/01-basic/followup/itayAmosi/index.html b/02-TypeScript/08-objects/01-basic/followup/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/itayAmosi/index.ts b/02-TypeScript/08-objects/01-basic/followup/itayAmosi/index.ts new file mode 100644 index 000000000..6c43d2cd2 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/itayAmosi/index.ts @@ -0,0 +1,17 @@ +const uriel = { age: 27, address: 'Rishon', name: 'Uriel' } +// const object = {"key":"value", "key":"value"} +// key:value is called "property" + +const messi = { + age: 35, + nickanme: 'The goat', + citizenship: 'Argntina', + currentAddress: 'Paris', +} + +console.log( + `uriel is live in + ${uriel.address} + and love messi and messi lives in + ${messi[`currentAddress`]}`, +) diff --git a/02-TypeScript/08-objects/01-basic/followup/noa-meillet/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/noa-meillet/dist/index.js new file mode 100644 index 000000000..872b99ff3 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/noa-meillet/dist/index.js @@ -0,0 +1,5 @@ +var noa = { name: "Noa", + age: 21, + adress: "Ashdod" }; +console.log("My name is " + noa.name + ", I am " + noa.age + " years old, and I live in " + noa.adress); +console.log("My name is " + noa["name"] + ", I am " + noa["age"] + " years old, and I live in " + noa["adress"]); diff --git a/02-TypeScript/08-objects/01-basic/followup/noa-meillet/index.html b/02-TypeScript/08-objects/01-basic/followup/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/noa-meillet/index.ts b/02-TypeScript/08-objects/01-basic/followup/noa-meillet/index.ts new file mode 100644 index 000000000..d1fe2624f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/noa-meillet/index.ts @@ -0,0 +1,5 @@ +const noa= {name:"Noa", + age:21, + adress:"Ashdod"}; +console.log(`My name is ${noa.name}, I am ${noa.age} years old, and I live in ${noa.adress}`); +console.log(`My name is ${noa["name"]}, I am ${noa["age"]} years old, and I live in ${noa["adress"]}`); diff --git a/02-TypeScript/08-objects/01-basic/followup/shalomcop/app.ts b/02-TypeScript/08-objects/01-basic/followup/shalomcop/app.ts new file mode 100644 index 000000000..f17b88e75 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shalomcop/app.ts @@ -0,0 +1,6 @@ +const noteBook = { + name: "Shalom", + gender: "male", + age: 27, + phoneNo: "0528588220", +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/shalomcop/dist/app.js b/02-TypeScript/08-objects/01-basic/followup/shalomcop/dist/app.js new file mode 100644 index 000000000..eaf190f4d --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shalomcop/dist/app.js @@ -0,0 +1,6 @@ +var noteBook = { + name: "Shalom", + gender: "male", + age: 27, + phoneNo: "0528588220" +}; diff --git a/02-TypeScript/08-objects/01-basic/followup/shalomcop/index.html b/02-TypeScript/08-objects/01-basic/followup/shalomcop/index.html new file mode 100644 index 000000000..774177e06 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shalomcop/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/shlomi-A/controler.ts b/02-TypeScript/08-objects/01-basic/followup/shlomi-A/controler.ts new file mode 100644 index 000000000..31344483f --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shlomi-A/controler.ts @@ -0,0 +1,20 @@ +const userObject = { + userId: 331464621, + userName: 'shlomi', + age: 24, + }; + + const userObjectKeys = Object.keys(userObject); + + + // ["userId", "userName", "age"] + userObjectKeys.forEach((key) => { + console.log(`key: ${key}, value: ${userObject[key]}`); + }); + + for(let i in userObject){ + console.log(`key: ${i}, value: ${userObject[i]}`); + + } + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/shlomi-A/dist/controler.js b/02-TypeScript/08-objects/01-basic/followup/shlomi-A/dist/controler.js new file mode 100644 index 000000000..a3cf3edd5 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shlomi-A/dist/controler.js @@ -0,0 +1,13 @@ +var userObject = { + userId: 331464621, + userName: 'shlomi', + age: 24 +}; +var userObjectKeys = Object.keys(userObject); +// ["userId", "userName", "age"] +userObjectKeys.forEach(function (key) { + console.log("key: " + key + ", value: " + userObject[key]); +}); +for (var i in userObject) { + console.log("key: " + i + ", value: " + userObject[i]); +} diff --git a/02-TypeScript/08-objects/01-basic/followup/shlomi-A/index.html b/02-TypeScript/08-objects/01-basic/followup/shlomi-A/index.html new file mode 100644 index 000000000..4d9787247 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shlomi-A/index.html @@ -0,0 +1,14 @@ + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/dist/index.js new file mode 100644 index 000000000..680163329 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/dist/index.js @@ -0,0 +1,26 @@ +var Israel = { + name: "israel", + yearOfDecleration: 1948 +}; +var India = { + name: "India", + yearOfDecleration: 1948 +}; +function declerationSeniority(obj1, obj2) { + try { + if (obj1.yearOfDecleration > obj2.yearOfDecleration) { + return obj2.name; + } + else if (obj2.yearOfDecleration > obj1.yearOfDecleration) { + return obj1.name; + } + else { + return ("both seniority are the same"); + } + } + catch (error) { + console.error(error); + return "we have some error"; + } +} +console.log(declerationSeniority(India, Israel)); diff --git a/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/index.html b/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/index.html new file mode 100644 index 000000000..41a9277de --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/index.ts b/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/index.ts new file mode 100644 index 000000000..16d636da2 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/shlomi.samai/index.ts @@ -0,0 +1,35 @@ +interface Country { + name:string; + yearOfDecleration:number; +} + +const Israel:Country ={ + name:"israel", + yearOfDecleration:1948, +} + +const India:Country={ + name:"India", + yearOfDecleration:1948, +} + +function declerationSeniority(obj1:Country,obj2:Country):string{ + try{ + if(obj1.yearOfDecleration>obj2.yearOfDecleration){ + return obj2.name + } + else if (obj2.yearOfDecleration>obj1.yearOfDecleration){ + return obj1.name + } + else { + return ("both seniority are the same") + } + } + + catch(error){ + console.error(error); + return "we have some error" + } +} + +console.log(declerationSeniority(India,Israel)) diff --git a/02-TypeScript/08-objects/01-basic/followup/start.md b/02-TypeScript/08-objects/01-basic/followup/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/08-objects/01-basic/followup/tomer/dist/index.js b/02-TypeScript/08-objects/01-basic/followup/tomer/dist/index.js new file mode 100644 index 000000000..8c010c71a --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/tomer/dist/index.js @@ -0,0 +1,8 @@ +var tomer = { age: 21, address: "modiin", name: "tomer" }; +var messi = { + age: 35, + nickname: "goat", + currentAddress: "paris", + citizenship: "Argintina" +}; +console.log(tomer.name + " love messi when he was 10 years old now he is " + tomer.age + " and he steel this he is " + messi.nickname); diff --git a/02-TypeScript/08-objects/01-basic/followup/tomer/index.html b/02-TypeScript/08-objects/01-basic/followup/tomer/index.html new file mode 100644 index 000000000..41b67a3d3 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/tomer/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/01-basic/followup/tomer/index.ts b/02-TypeScript/08-objects/01-basic/followup/tomer/index.ts new file mode 100644 index 000000000..31d4a52f7 --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/followup/tomer/index.ts @@ -0,0 +1,10 @@ +const tomer = { age: 21, address: "modiin", name: `tomer` }; +const messi = { + age: 35, + nickname: `goat`, + currentAddress: `paris`, + citizenship: `Argintina`, +}; +console.log( + `${tomer.name} love messi when he was 10 years old now he is ${tomer.age} and he steel this he is ${messi.nickname}` +); diff --git a/02-TypeScript/08-objects/01-basic/info/info.md b/02-TypeScript/08-objects/01-basic/info/info.md new file mode 100644 index 000000000..3d2599d5a --- /dev/null +++ b/02-TypeScript/08-objects/01-basic/info/info.md @@ -0,0 +1,8 @@ +# Documentation # +https://www.w3schools.com/js/js_objects.asp + +# Video # + +INT video: https://youtu.be/pYiQ2GkbCMU + +https://www.youtube.com/watch?v=BRSg22VacUA diff --git a/02-TypeScript/08-objects/02-methods/example/dist/index.js b/02-TypeScript/08-objects/02-methods/example/dist/index.js new file mode 100644 index 000000000..fbaa0fdab --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/example/dist/index.js @@ -0,0 +1,21 @@ +var xMan = { + title: "x-man", + sn: "sdfgjkhsdkjghskdjghdkhgsdg", + price: 10, + toNIS: function () { + //method + console.dir(this); + return this.price * 3.45; + } +}; +function dollarToNis(dollar) { + try { + return 3.45 * dollar; + } + catch (error) { + console.error(error); + return false; + } +} +console.log(dollarToNis(xMan.price)); +console.log(xMan.toNIS()); diff --git a/02-TypeScript/08-objects/02-methods/example/index.html b/02-TypeScript/08-objects/02-methods/example/index.html new file mode 100644 index 000000000..ea519e328 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/example/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/example/index.ts b/02-TypeScript/08-objects/02-methods/example/index.ts new file mode 100644 index 000000000..d914bcc6c --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/example/index.ts @@ -0,0 +1,29 @@ +interface Video { + title: string; + sn: string; + price: number; + toNIS: Function; +} + +const xMan: Video = { + title: "x-man", //propery + sn: "sdfgjkhsdkjghskdjghdkhgsdg", //property + price: 10, //property + toNIS: function () { + //method + console.dir(this); + return this.price * 3.45; + }, +}; + +function dollarToNis(dollar: number): number | false { + try { + return 3.45 * dollar; + } catch (error) { + console.error(error); + return false; + } +} +console.log(dollarToNis(xMan.price)); + +console.log(xMan.toNIS()); diff --git a/02-TypeScript/08-objects/02-methods/example2/dist/index.js b/02-TypeScript/08-objects/02-methods/example2/dist/index.js new file mode 100644 index 000000000..9a83c2dbb --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/example2/dist/index.js @@ -0,0 +1,20 @@ +var yoval = { + name: "Yuval P", + yearOfBith: 2000, + age: function () { + return new Date().getFullYear() - this.yearOfBith; + }, + sayHello: function () { + return "Hello, my name is " + this.name; + }, + setGender: function (gender) { + this.gender = gender; + } +}; +yoval.name = "Yuval Partosh"; +yoval.address = 'Rechovot'; +yoval.setGender('male'); +console.dir(yoval); +console.log(yoval.age()); +console.log(yoval.sayHello()); +console.log(yoval.address); diff --git a/02-TypeScript/08-objects/02-methods/example2/index.html b/02-TypeScript/08-objects/02-methods/example2/index.html new file mode 100644 index 000000000..ea519e328 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/example2/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/example2/index.ts b/02-TypeScript/08-objects/02-methods/example2/index.ts new file mode 100644 index 000000000..f43bac505 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/example2/index.ts @@ -0,0 +1,34 @@ +interface Person { + name: string; + yearOfBith: number; + address?:string; + age: Function; + sayHello: Function; + setGender:Function; +} + +const yoval:Person = { + name: "Yuval P", + yearOfBith: 2000, + age: function () { + return new Date().getFullYear() - this.yearOfBith; + }, + sayHello: function () { + return `Hello, my name is ${this.name}`; + }, + + setGender:function(gender){ + this.gender = gender; + } +}; + +yoval.name = "Yuval Partosh"; + +yoval.address = 'Rechovot'; + +yoval.setGender('male'); + +console.dir(yoval) +console.log(yoval.age()); +console.log(yoval.sayHello()); +console.log(yoval.address) diff --git a/02-TypeScript/08-objects/02-methods/followups/Ayala/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/Ayala/dist/index.js new file mode 100644 index 000000000..af01fbfd1 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Ayala/dist/index.js @@ -0,0 +1,15 @@ +var xMan = { + title: "x-man", + sn: "sdfgjkhsdkjghskdjghdkhgsdg", + price: 10, + toNIS: function () { + //method + return this.price * 3.45; + } +}; +function priceInNis(video) { + console.log(video.price * 3.53); +} +//priceInNis(videos[0]); +console.log(priceInNis(xMan.price)); +console.log(xMan.toNIS()); diff --git a/02-TypeScript/08-objects/02-methods/followups/Ayala/index.html b/02-TypeScript/08-objects/02-methods/followups/Ayala/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Ayala/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/Ayala/index.ts b/02-TypeScript/08-objects/02-methods/followups/Ayala/index.ts new file mode 100644 index 000000000..bfbdfe9ab --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Ayala/index.ts @@ -0,0 +1,29 @@ + + + + +interface Video { + title: string, + price: number, + rentBy: string + toNIS: Function; +} +const xMan: Video = { + title: "x-man", //propery + sn: "sdfgjkhsdkjghskdjghdkhgsdg", //property + price: 10, //property + toNIS: function () { + //method + + return this.price * 3.45; + }, + }; + + function priceInNis(video: Video) { + console.log(video.price * 3.53); +} + +//priceInNis(videos[0]); +console.log(priceInNis(xMan.price)); + +console.log(xMan.toNIS()); \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/Itai-G/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/Itai-G/dist/index.js new file mode 100644 index 000000000..b78f0c860 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Itai-G/dist/index.js @@ -0,0 +1,10 @@ +var xMxan = { + tital: "x-men", + sn: "cscscscscdscfevg", + price: 10, + toNis: function () { + console.dir(this); + return this.price * 3.56; + } +}; +console.log(xMxan.toNis()); diff --git a/02-TypeScript/08-objects/02-methods/followups/Itai-G/index.html b/02-TypeScript/08-objects/02-methods/followups/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/Itai-G/index.ts b/02-TypeScript/08-objects/02-methods/followups/Itai-G/index.ts new file mode 100644 index 000000000..d00a5b8ac --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Itai-G/index.ts @@ -0,0 +1,19 @@ +interface Video { + tital:string; + sn:string; + price:number; + toNis:Function; +} + +const xMxan: Video = { + tital: "x-men", + sn: "cscscscscdscfevg", + price:10, + toNis: function(){ + console.dir(this); + return this.price * 3.56; + }, +}; + + +console.log(xMxan.toNis()); \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/Kseniya/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/Kseniya/dist/index.js new file mode 100644 index 000000000..8824940bd --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Kseniya/dist/index.js @@ -0,0 +1,38 @@ +var priceInUSD = function (price) { + return price * 3.52; +}; +var SHIRTS = [ + { + name: "shiret", + price: 6, + priceInUSD: priceInUSD + }, + { + name: "shiiiiit", + price: 7, + priceInUSD: priceInUSD + }, + { + name: "fuuuuck", + price: 4, + priceInUSD: priceInUSD + }, +]; +var avgShirtsPrice = function (shirts) { + var avgPrice = 0; + shirts.forEach(function (element) { + avgPrice += element.priceInUSD(element.price); + }); + return avgPrice / shirts.length; +}; +var lowerShirtsPrice = function (shirts, lowerPrice) { + var priceShirtsLow = shirts.map(function (element) { + if (element.price > lowerPrice) { + element.price = lowerPrice; + } + return element; + }); + console.log(priceShirtsLow); + return priceShirtsLow; +}; +lowerShirtsPrice(SHIRTS, 5); diff --git a/02-TypeScript/08-objects/02-methods/followups/Kseniya/index.html b/02-TypeScript/08-objects/02-methods/followups/Kseniya/index.html new file mode 100644 index 000000000..bc4c2d64f --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Kseniya/index.html @@ -0,0 +1,13 @@ + + + + + + + follow up + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/Kseniya/index.ts b/02-TypeScript/08-objects/02-methods/followups/Kseniya/index.ts new file mode 100644 index 000000000..36c93b39a --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/Kseniya/index.ts @@ -0,0 +1,48 @@ +interface IShirt { + name: string; + price: number; + priceInUSD: (ss: number) => number; +} + +const priceInUSD = (price: number): number => { + return price * 3.52; +}; + +const SHIRTS: IShirt[] = [ + { + name: "shiret", + price: 6, + priceInUSD, + }, + { + name: "shiiiiit", + price: 7, + priceInUSD, + }, + { + name: "fuuuuck", + price: 4, + priceInUSD, + }, +]; + +const avgShirtsPrice = (shirts: IShirt[]): number => { + let avgPrice = 0; + shirts.forEach((element) => { + avgPrice += element.priceInUSD(element.price); + }); + return avgPrice / shirts.length; +}; + +const lowerShirtsPrice = (shirts: IShirt[], lowerPrice: number): IShirt[] => { + let priceShirtsLow = shirts.map((element) => { + if (element.price > lowerPrice) { + element.price = lowerPrice; + } + return element; + }); + console.log(priceShirtsLow) + return priceShirtsLow; +}; + +lowerShirtsPrice(SHIRTS, 5); diff --git a/02-TypeScript/08-objects/02-methods/followups/amit/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/amit/dist/index.js new file mode 100644 index 000000000..9d7ca9895 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/amit/dist/index.js @@ -0,0 +1,9 @@ +var yellow = { + title: "yellow", + price: 100, + color: "yellow", + discount: function () { + return this.price * 0.80; + } +}; +console.dir("the price of " + yellow.title + " after discount " + yellow.discount() + " "); diff --git a/02-TypeScript/08-objects/02-methods/followups/amit/index.html b/02-TypeScript/08-objects/02-methods/followups/amit/index.html new file mode 100644 index 000000000..41a9277de --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/amit/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/amit/index.ts b/02-TypeScript/08-objects/02-methods/followups/amit/index.ts new file mode 100644 index 000000000..880ad8eca --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/amit/index.ts @@ -0,0 +1,20 @@ +interface MagicMarker { + title: string; + price: number; + color: string; + discount: Function +} + +const yellow: MagicMarker = { + title: "yellow", + price: 100, + color: "yellow", + discount: function (): number { + return this.price * 0.80; + } +} + +console.dir(`the price of ${yellow.title} after discount ${yellow.discount()} `); + + + diff --git a/02-TypeScript/08-objects/02-methods/followups/aviva-elias/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/aviva-elias/dist/index.js new file mode 100644 index 000000000..956d4a730 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/aviva-elias/dist/index.js @@ -0,0 +1,20 @@ +var spiderMan = { + title: "spiderman", + sn: "hjgsfgfhj", + price: 10, + toNis: function () { + console.dir(this.title); + return this.price * 3.45; + } +}; +var dollarNis = function (dollar) { + try { + return dollar * 3.45; + } + catch (error) { + console.error(error); + return false; + } +}; +console.log(dollarNis(spiderMan.price)); +console.log(spiderMan.toNis()); diff --git a/02-TypeScript/08-objects/02-methods/followups/aviva-elias/index.html b/02-TypeScript/08-objects/02-methods/followups/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/aviva-elias/index.ts b/02-TypeScript/08-objects/02-methods/followups/aviva-elias/index.ts new file mode 100644 index 000000000..ca44c0c56 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/aviva-elias/index.ts @@ -0,0 +1,32 @@ +interface Video{ + title:String; + sn:string; + price:number; + toNis:Function; + +} +const spiderMan: Video= { + title:"spiderman", + sn:"hjgsfgfhj", + price: 10, + toNis:function(){ + console.dir(this.title); + return this.price*3.45; + + }, + +}; + +const dollarNis:Function=(dollar:number):number|false=>{ + try { + + + return dollar*3.45; +} + catch (error) { + console.error(error); + return false + +}} +console.log(dollarNis(spiderMan.price)) +console.log(spiderMan.toNis()) \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/itayAmosi/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/itayAmosi/dist/index.js new file mode 100644 index 000000000..ff4392204 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/itayAmosi/dist/index.js @@ -0,0 +1,5 @@ +var Movie = /** @class */ (function () { + function Movie() { + } + return Movie; +}()); diff --git a/02-TypeScript/08-objects/02-methods/followups/itayAmosi/index.html b/02-TypeScript/08-objects/02-methods/followups/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/itayAmosi/index.ts b/02-TypeScript/08-objects/02-methods/followups/itayAmosi/index.ts new file mode 100644 index 000000000..359f8b287 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/itayAmosi/index.ts @@ -0,0 +1,10 @@ +class Movie { + name: string; + releaseDate : number; + typeOfMovie : string; + price : number; + + // constructor(name: string, releaseDate: number, typeOfMovie: string ,price:n) + } + + diff --git a/02-TypeScript/08-objects/02-methods/followups/noa-meillet/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/noa-meillet/dist/index.js new file mode 100644 index 000000000..0c0d78d3c --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/noa-meillet/dist/index.js @@ -0,0 +1,8 @@ +var noa = { + firstName: "Noa", + familyName: "Meillet", + fullName: function () { + return (this.firstName + " " + this.familyName); + } +}; +console.log(noa.fullName()); diff --git a/02-TypeScript/08-objects/02-methods/followups/noa-meillet/index.html b/02-TypeScript/08-objects/02-methods/followups/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/noa-meillet/index.ts b/02-TypeScript/08-objects/02-methods/followups/noa-meillet/index.ts new file mode 100644 index 000000000..410daf731 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/noa-meillet/index.ts @@ -0,0 +1,15 @@ +interface Name{ + firstName: string; + familyName: string; + fullName: Function; +} + +const noa:Name= { + firstName: "Noa", + familyName: "Meillet", + fullName: function () { + return (`${this.firstName} ${this.familyName}`); + } +} + +console.log(noa.fullName()); \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/shalomcop/app.ts b/02-TypeScript/08-objects/02-methods/followups/shalomcop/app.ts new file mode 100644 index 000000000..0d68e9bca --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/shalomcop/app.ts @@ -0,0 +1,17 @@ +interface Doit { + name: string; + cardType: string; + cardNo: number; + cardDate: string; + cardIncrypt: Function; +} + +const Go: Doit = { + name: "shalom", + cardType: "mastercard", + cardNo: 231, + cardDate: "12-07-1985", + cardIncrypt: function () { + return this.cardNo * 12; + }, +}; diff --git a/02-TypeScript/08-objects/02-methods/followups/shalomcop/dist/app.js b/02-TypeScript/08-objects/02-methods/followups/shalomcop/dist/app.js new file mode 100644 index 000000000..d9446e8f9 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/shalomcop/dist/app.js @@ -0,0 +1,9 @@ +var Go = { + name: "shalom", + cardType: "mastercard", + cardNo: 231, + cardDate: "12-07-1985", + cardIncrypt: function () { + return this.cardNo * 12; + } +}; diff --git a/02-TypeScript/08-objects/02-methods/followups/shalomcop/index.html b/02-TypeScript/08-objects/02-methods/followups/shalomcop/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/shalomcop/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/dist/index.js new file mode 100644 index 000000000..147d5c095 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/dist/index.js @@ -0,0 +1,15 @@ +var lorem3 = { + title: "lorem3", + year: 1990, + price: 100, + toShekels: function () { + return this.price * 3.5; + console.dir(this.price * 3.5); + } +}; +console.log(lorem3.toShekels()); +var Video = /** @class */ (function () { + function Video(neme, year, mainActor) { + } + return Video; +}()); diff --git a/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/index.html b/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/index.html new file mode 100644 index 000000000..59e874bee --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/index.ts b/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/index.ts new file mode 100644 index 000000000..8f3a5247d --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/shlomi.samai/index.ts @@ -0,0 +1,26 @@ +interface VideoInter { + title:string; + year:number; + price:number; + toShekels:Function; +} + +const lorem3:VideoInter= { + title:"lorem3", + year:1990, + price:100, + toShekels:function() { + return this.price*3.5 + console.dir(this.price*3.5) + }, +} +console.log(lorem3.toShekels()) + +class Video { + name:string; + year:number; + mainActor:string; + constructor (neme:string,year:number,mainActor:number){ + + } +} \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/start.md b/02-TypeScript/08-objects/02-methods/followups/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/dist/index.js b/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/dist/index.js new file mode 100644 index 000000000..cdf5735e4 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/dist/index.js @@ -0,0 +1,19 @@ +var avatar2 = { + title: "avatar2", + sn: "tomerwgewgd", + price: 29.99, + toNIS: function () { + return this.price * 3.45; + } +}; +function dollarToNis(dollar) { + try { + return 3.45 * dollar; + } + catch (error) { + console.error(error); + return false; + } +} +console.log(dollarToNis(avatar2.price)); +console.log(avatar2.toNIS()); diff --git a/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/index.html b/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/index.ts b/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/index.ts new file mode 100644 index 000000000..bf103f5c2 --- /dev/null +++ b/02-TypeScript/08-objects/02-methods/followups/tomercohen-followup/index.ts @@ -0,0 +1,27 @@ +interface Video{ + title: string; + sn: string; + price:number; + toNis:Function; +} +const avatar2: Video = { + title: `avatar2`, + sn:`tomerwgewgd`, + price:29.99, + toNIS: function(){ + return this.price*3.45; + + }, +} + +function dollarToNis(dollar: number):number | false{ + try { + return 3.45*dollar; + } catch (error) { + console.error(error); + return false; + } +} +console.log(dollarToNis(avatar2.price)); + +console.log(avatar2.toNIS()); \ No newline at end of file diff --git a/02-TypeScript/08-objects/Home-puzzles/Karin-levi/dist/index.js b/02-TypeScript/08-objects/Home-puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..063a26107 --- /dev/null +++ b/02-TypeScript/08-objects/Home-puzzles/Karin-levi/dist/index.js @@ -0,0 +1,60 @@ +var movies = [ + { + title: "Harry Potter", + price: 30, + rentedBy: 1 + }, + { + title: "Lord of the rings", + price: 20, + rentedBy: 2 + } +]; +var users = [ + { + id: 1, + firstName: "Lior", + lastName: "Grishin" + }, + { + id: 2, + firstName: "Itay", + lastName: "Gelberg" + }, + { + id: 3, + firstName: "Karin", + lastName: "Levi" + }, + { + id: 4, + firstName: "Ayala", + lastName: "Perolovich" + }, + { + id: 5, + firstName: "Uriel", + lastName: "Bargil" + } +]; +function usdToNis(movie) { + return (movie.price * 3.53).toFixed(2); +} +// exercise 2 +function haveMovie(movie, id) { + if (movie.rentedBy === id) { + for (var i = 0; i < users.length; i++) { + var user = null; + if (users[i].id === id) { + user = users[i]; + } + if (user !== null) { + console.log(user.firstName + " " + user.lastName + " have the movie " + movie.title); + } + } + } + else { + console.log("User with id: " + id + " doesn't have the movie " + movie.title); + } +} +haveMovie(movies[0], 1); diff --git a/02-TypeScript/08-objects/Home-puzzles/Karin-levi/index.html b/02-TypeScript/08-objects/Home-puzzles/Karin-levi/index.html new file mode 100644 index 000000000..2b98624fd --- /dev/null +++ b/02-TypeScript/08-objects/Home-puzzles/Karin-levi/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/Home-puzzles/Karin-levi/index.ts b/02-TypeScript/08-objects/Home-puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..a5582186b --- /dev/null +++ b/02-TypeScript/08-objects/Home-puzzles/Karin-levi/index.ts @@ -0,0 +1,82 @@ +// exercise 1 +interface Movie { + title: string, + price: number, + rentedBy: number +} + +interface User { + id: number, + firstName: string, + lastName: string +} + +const movies: Array = [ + { + title: "Harry Potter", + price: 30, + rentedBy: 1 + }, + { + title: "Lord of the rings", + price: 20, + rentedBy: 2 + } +]; + +const users: Array = [ + { + id: 1, + firstName: "Lior", + lastName: "Grishin" + }, + { + id: 2, + firstName: "Itay", + lastName: "Gelberg", + }, + { + id: 3, + firstName: "Karin", + lastName: "Levi", + }, + { + id: 4, + firstName: "Ayala", + lastName: "Perolovich", + }, + { + id: 5, + firstName: "Uriel", + lastName: "Bargil", + } +]; + +function usdToNis(movie: Movie) { + return (movie.price * 3.53).toFixed(2); +} + + + +// exercise 2 +function haveMovie(movie: Movie, id: number) { + + if (movie.rentedBy === id) { + + for (let i = 0; i < users.length; i++) { + let user: User | null = null; + if (users[i].id === id) { + user = users[i]; + } + + if (user !== null) { + console.log(`${user.firstName} ${user.lastName} have the movie ${movie.title}`); + } + } + + } else { + console.log(`User with id: ${id} doesn't have the movie ${movie.title}`); + } +} + +haveMovie(movies[0], 1); \ No newline at end of file diff --git a/02-TypeScript/08-objects/Home-puzzles/kseniya/app.html b/02-TypeScript/08-objects/Home-puzzles/kseniya/app.html new file mode 100644 index 000000000..32ed76d27 --- /dev/null +++ b/02-TypeScript/08-objects/Home-puzzles/kseniya/app.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/Home-puzzles/kseniya/app.ts b/02-TypeScript/08-objects/Home-puzzles/kseniya/app.ts new file mode 100644 index 000000000..0b1c23821 --- /dev/null +++ b/02-TypeScript/08-objects/Home-puzzles/kseniya/app.ts @@ -0,0 +1,54 @@ +interface IMovie { + name: string; + price: number; + availableForRent: boolean; + renter?: IUser + viewedBy?: IUser[] +} + +interface IUser { + name: string; + movies?: IMovie[] +} + +const movieList: IMovie[] = [ + { + name: "Home Alone", + price: 12.99, + availableForRent: true, + }, + { + name: "Avatar", + price: 9.99, + availableForRent: false, + }, + { + name: "The Avengers", + price: 14.99, + availableForRent: false, + }, + { + name: "Jurrasic Park", + price: 6.99, + availableForRent: false, + }, +]; + +const singleUser: IUser = { + name: 'Karen', + movies: movieList +} + +// let answer = prompt('Welcome to Blockbuster, we currently offer the following movies: Home Alone, Avatar, The Avengers, Jurrasic Park.') + +const moviePrice = (movie: IMovie): number => { + let priceInShekel = movie.price * 3.53; + return priceInShekel; +}; + +const movieRenter = (movie: IMovie, user: IUser):IMovie => { + +return {...movie, renter:user} +}; + +movieRenter(movieList[0], singleUser) \ No newline at end of file diff --git a/02-TypeScript/08-objects/Home-puzzles/kseniya/dist/app.js b/02-TypeScript/08-objects/Home-puzzles/kseniya/dist/app.js new file mode 100644 index 000000000..84467bdc8 --- /dev/null +++ b/02-TypeScript/08-objects/Home-puzzles/kseniya/dist/app.js @@ -0,0 +1,46 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var movieList = [ + { + name: "Home Alone", + price: 12.99, + availableForRent: true + }, + { + name: "Avatar", + price: 9.99, + availableForRent: false + }, + { + name: "The Avengers", + price: 14.99, + availableForRent: false + }, + { + name: "Jurrasic Park", + price: 6.99, + availableForRent: false + }, +]; +var singleUser = { + name: 'Karen', + movies: movieList +}; +// let answer = prompt('Welcome to Blockbuster, we currently offer the following movies: Home Alone, Avatar, The Avengers, Jurrasic Park.') +var moviePrice = function (movie) { + var priceInShekel = movie.price * 3.53; + return priceInShekel; +}; +var movieRenter = function (movie, user) { + return __assign(__assign({}, movie), { renter: user }); +}; +movieRenter(movieList[0], singleUser); diff --git a/02-TypeScript/08-objects/followup/Karin-levi/dist/index.js b/02-TypeScript/08-objects/followup/Karin-levi/dist/index.js new file mode 100644 index 000000000..e0108c346 --- /dev/null +++ b/02-TypeScript/08-objects/followup/Karin-levi/dist/index.js @@ -0,0 +1,10 @@ +// pre objects +var urielName = "Uriel"; +var urielAge = 27; +var urielAddress = "Rishon"; +var uriel = { age: 27, address: "Rishon", name: "Uriel" }; +// const object = {"key":"value", "key":"value"} +// key:value is called "property" +var messi = { age: 35, nickName: nickName, "The goat": , citizenship: "Argntina", currentAddress: "Paris" }; +var israel = { name: "Israel", age: 74, population: 9000000, capitalCity: "Jerusalem", army: "IDF", continent: "Asia" }; +console.log("The state of " + israel.name + " has a population of about " + israel["population"] + ", " + israel.population + ", and its army is called " + israel["army"]); diff --git a/02-TypeScript/08-objects/followup/Karin-levi/index.html b/02-TypeScript/08-objects/followup/Karin-levi/index.html new file mode 100644 index 000000000..74bf1eb91 --- /dev/null +++ b/02-TypeScript/08-objects/followup/Karin-levi/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/08-objects/followup/Karin-levi/index.ts b/02-TypeScript/08-objects/followup/Karin-levi/index.ts new file mode 100644 index 000000000..965564448 --- /dev/null +++ b/02-TypeScript/08-objects/followup/Karin-levi/index.ts @@ -0,0 +1,17 @@ +// pre objects + +const urielName = "Uriel"; +const urielAge = 27; +const urielAddress = "Rishon"; + +const uriel = { age: 27, address: "Rishon", name: "Uriel" }; +// const object = {"key":"value", "key":"value"} +// key:value is called "property" + +const messi = { age: 35; nickName; "The goat", citizenship: "Argntina", currentAddress: "Paris"}; + +const israel = { name: "Israel", age: 74, population:9000000, capitalCity: "Jerusalem", army: "IDF", continent: "Asia",}; + +console.log( + `The state of ${israel.name} has a population of about ${israel["population"]}, ${israel.population}, and its army is called ${israel["army"]}` + ); \ No newline at end of file diff --git a/02-TypeScript/09-classes/.vscode/settings.json b/02-TypeScript/09-classes/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/09-classes/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/.vscode/settings.json b/02-TypeScript/09-classes/Home-puzzles/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/dist/index.js new file mode 100644 index 000000000..38b843925 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/dist/index.js @@ -0,0 +1,48 @@ +var Celeb = /** @class */ (function () { + function Celeb(name, genre, instagramAccount, tiktokAccount, follower) { + this.name = name; + this.genre = genre; + this.instagramAccount = instagramAccount; + this.tiktokAccount = tiktokAccount; + this.follower = follower; + } + Celeb.prototype.setFollower = function (number) { + return this.follower = number; + }; + Celeb.prototype.getFollwer = function () { + return this.follower; + }; + Celeb.prototype.whoHasAccount = function () { + if (this.tiktokAccount !== "") { + return this.tiktokAccount; + } + else { + return "unknown"; + } + }; + return Celeb; +}()); +var messi = new Celeb("messi", "sport", "messi_num1", "messi_still-num1", 1000000); +var bibi = new Celeb("Benjamin Netanyahu ", "politics", "bibi_Still_rule", "bibi_123", 200000); +var rachel = new Celeb("rachel imenu", "holiness", "", "", 17000000); +console.log(messi.name + " have " + messi.getFollwer() + " followers"); +var newFollower = messi.setFollower(3000000); +console.log(messi.name + " update is followers and now they are " + newFollower + " "); +console.log("Tiktok acount of " + messi.name + " is: " + messi.whoHasAccount()); +console.log("Tiktok acount of " + rachel.name + " is: " + rachel.whoHasAccount()); +var celebsArray = [messi, bibi, rachel]; +function clebHightesFollowers() { + for (var i = 0; i < celebsArray.length; i++) { + if (celebsArray[0].follower > (celebsArray[1].follower) && celebsArray[0].follower > (celebsArray[2].follower)) { + return celebsArray[0].name; + } + else if (celebsArray[1].follower > (celebsArray[2].follower) && (celebsArray[1].follower > celebsArray[0].follower)) { + return celebsArray[1].name; + } + else { + return celebsArray[2].name; + } + } +} +var result = clebHightesFollowers(); +console.log(result + " have The hightes num of followers :" + celebsArray[2].follower); diff --git a/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/index.html b/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/index.ts b/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/index.ts new file mode 100644 index 000000000..682deeed2 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Aviva-Elias/index.ts @@ -0,0 +1,72 @@ +class Celeb { + name: string; + genre: string; + instagramAccount?: string; + tiktokAccount?: string; + follower: number; + + + constructor(name: string, genre: string, instagramAccount: string, tiktokAccount: string, follower: number) { + this.name = name; + this.genre = genre; + this.instagramAccount = instagramAccount; + this.tiktokAccount = tiktokAccount; + this.follower = follower + + } + setFollower(number: number): number { + return this.follower = number + } + + getFollwer() { + return this.follower + } + + whoHasAccount() { + + if (this.tiktokAccount !== "") { + return this.tiktokAccount + } + else { + return "unknown" + } + + } + + +} + + + + +const messi = new Celeb("messi", "sport", "messi_num1", "messi_still-num1", 1000000); +const bibi = new Celeb("Benjamin Netanyahu ", "politics", "bibi_Still_rule", "bibi_123", 200000); +const rachel = new Celeb("rachel imenu", "holiness", "", "", 17000000); + + +console.log(`${messi.name} have ${messi.getFollwer()} followers`) +const newFollower = messi.setFollower(3000000) +console.log(`${messi.name} update is followers and now they are ${newFollower} `) + + +console.log(`Tiktok acount of ${messi.name} is: ${messi.whoHasAccount()}`) +console.log(`Tiktok acount of ${rachel.name} is: ${rachel.whoHasAccount()}`) + +const celebsArray: Celeb[] = [messi, bibi, rachel]; + +function clebHightesFollowers() { + for (let i = 0; i < celebsArray.length; i++) { + + if (celebsArray[0].follower > (celebsArray[1].follower) && celebsArray[0].follower > (celebsArray[2].follower)) { + return celebsArray[0].name + } + else if (celebsArray[1].follower > (celebsArray[2].follower) && (celebsArray[1].follower > celebsArray[0].follower)) { + return celebsArray[1].name + } + else { return celebsArray[2].name } + } + +} + +const result = clebHightesFollowers() +console.log(`${result} have The hightes num of followers :${celebsArray[2].follower}`) \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Ayala/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..33d513692 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Ayala/dist/index.js @@ -0,0 +1,38 @@ +//1 2 +var celeb = /** @class */ (function () { + function celeb(nameOfGenre, followersOfTikTok, followersOfInstagram) { + this.nameOfGenre = nameOfGenre; + this.followersOfInstagram = followersOfInstagram; + this.followersOfTikTok = followersOfTikTok; + } + celeb.prototype.celebs = function () { + return "Name of the celebs and the genre " + this.nameOfGenre + " the number of followers on tiktok is " + this.followersOfTikTok + " the number of followers on instagram is " + this.followersOfInstagram; + }; + return celeb; +}()); +var NameKhabyLame = new celeb("Khaby Lame Sketches Gaming video creator", 147000000, 50000000); +var NameBellaPoarch = new celeb("Bella Poarch Artist", 91000000, 13000000); +var NameLorenGrayBeech = new celeb("Loren Gray Beech Artist", 54000000, 21000000); +var Namesakira = new celeb("sakira Artist", 27000000, 78000000); +console.log(NameKhabyLame.celebs()); +console.log(NameBellaPoarch.celebs()); +console.log(NameLorenGrayBeech.celebs()); +console.log(Namesakira.celebs()); +//3) +/* +let a=147000000; +let b =91000000; +let c =27000000; + let compareFunction =(a,b,c) =>*/ +var myNumbers = [147000000, 91000000, 27000000]; +myNumbers.sort(compareFunction); +console.log(myNumbers); +/*function miniMaxSum(arr) { + var _arr = arr.sort((a, b) = > a - b) + var minVals = _arr.slice(0, 4) + var maxVals = _arr.slice(1) + const arrSum = __arr = > __arr.reduce((a, b) = > a + b, 0) + var minSum = arrSum(minVals) + var maxSum = arrSum(maxVals) + console.log(minSum, maxSum) +}*/ diff --git a/02-TypeScript/09-classes/Home-puzzles/Ayala/index.html b/02-TypeScript/09-classes/Home-puzzles/Ayala/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Ayala/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Ayala/index.ts b/02-TypeScript/09-classes/Home-puzzles/Ayala/index.ts new file mode 100644 index 000000000..8dd9aa08d --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Ayala/index.ts @@ -0,0 +1,56 @@ +//1 2 + +class celeb { + nameOfGenre: string + genre: string; + followersOfTikTok: number; + followersOfInstagram: number; + + constructor(nameOfGenre: string, followersOfTikTok: number, followersOfInstagram: number) { + this.nameOfGenre = nameOfGenre; + + this.followersOfInstagram = followersOfInstagram; + this.followersOfTikTok = followersOfTikTok; + } + celebs() { + return `Name of the celebs and the genre ${this.nameOfGenre} the number of followers on tiktok is ${this.followersOfTikTok} the number of followers on instagram is ${this.followersOfInstagram}`; + } +} + + +const NameKhabyLame = new celeb("Khaby Lame Sketches Gaming video creator", 147000000, 50000000); +const NameBellaPoarch = new celeb("Bella Poarch Artist", 91000000, 13000000); +const NameLorenGrayBeech = new celeb("Loren Gray Beech Artist", 54000000, 21000000); +const Namesakira = new celeb("sakira Artist", 27000000, 78000000); + + +console.log(NameKhabyLame.celebs()); +console.log(NameBellaPoarch.celebs()); +console.log(NameLorenGrayBeech.celebs()); +console.log(Namesakira.celebs()); + + +//3) +/* +let a=147000000; +let b =91000000; +let c =27000000; + let compareFunction =(a,b,c) =>*/ + + let myNumbers = [147000000,91000000 ,27000000] ; + myNumbers.sort (compareFunction); + console.log(myNumbers) + + + + + +/*function miniMaxSum(arr) { + var _arr = arr.sort((a, b) = > a - b) + var minVals = _arr.slice(0, 4) + var maxVals = _arr.slice(1) + const arrSum = __arr = > __arr.reduce((a, b) = > a + b, 0) + var minSum = arrSum(minVals) + var maxSum = arrSum(maxVals) + console.log(minSum, maxSum) +}*/ diff --git a/02-TypeScript/09-classes/Home-puzzles/Itai-G/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/Itai-G/dist/index.js new file mode 100644 index 000000000..c593c35dc --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Itai-G/dist/index.js @@ -0,0 +1,28 @@ +// task 1-2 +var Celebs = /** @class */ (function () { + function Celebs(name, age, instagram, tiktok, followersIsntagram, followersTiktok, followers) { + this.name = name; + this.age = age; + this.instagram = instagram; + this.tiktok = tiktok; + this.followersIsntagram = followersIsntagram; + this.followersTiktok = followersTiktok; + this.followers = followers; + } + Celebs.prototype.setFollowers = function (followers) { + this.followers = followers; + }; + Celebs.prototype.getFollowers = function () { + return this.followers; + }; + return Celebs; +}()); +var yodaLevi = new Celebs("Yoda Levi", 43, true, false, 150000, 0, 234); +var fiftiCent = new Celebs("50cent", 47, true, true, 1500000, 3000000, 2346); +console.log(yodaLevi); +console.log(fiftiCent); +yodaLevi.setFollowers(2000); +console.log(yodaLevi.getFollowers()); //to invoke +var arrCelebs = [yodaLevi, fiftiCent]; +arrCelebs.sort(function (a, b) { return b.followers - a.followers; }); +console.log(arrCelebs); diff --git a/02-TypeScript/09-classes/Home-puzzles/Itai-G/index.html b/02-TypeScript/09-classes/Home-puzzles/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Itai-G/index.ts b/02-TypeScript/09-classes/Home-puzzles/Itai-G/index.ts new file mode 100644 index 000000000..4e15c52ac --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Itai-G/index.ts @@ -0,0 +1,49 @@ +// task 1-2 + +class Celebs { + name: string; + age: number; + instagram: boolean; + tiktok: boolean; + followersIsntagram: number; + followersTiktok: number; + followers:number; + + constructor( + name: string, + age: number, + instagram: boolean, + tiktok: boolean, + followersIsntagram: number, + followersTiktok: number, + followers: number + ) { + this.name = name; + this.age = age; + this.instagram = instagram; + this.tiktok = tiktok; + this.followersIsntagram = followersIsntagram; + this.followersTiktok = followersTiktok; + this.followers = followers; + + } + setFollowers(followers: number) { + this.followers = followers; + } + + getFollowers(): number | undefined { + return this.followers; + } + } + + const yodaLevi = new Celebs (`Yoda Levi`, 43, true, false, 150000, 0,234 ); + const fiftiCent = new Celebs (`50cent`, 47, true, true, 1500000, 3000000,2346 ); + console.log(yodaLevi); + console.log(fiftiCent); + + yodaLevi.setFollowers(2000); + console.log(yodaLevi.getFollowers()); //to invoke + const arrCelebs = [yodaLevi,fiftiCent]; + arrCelebs.sort((a, b) => b.followers - a.followers); + + console.log(arrCelebs) \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/app.ts b/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/app.ts new file mode 100644 index 000000000..f62248fa2 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/app.ts @@ -0,0 +1,38 @@ +// 1) +class influancer { + name:string; + genre:string; + tiktokUsername:string; + instagramUsername:string; + followers:number; + + constructor (name:string,genre:string,tiktokUsername:string,instagramUsername:string,followers:number){ + this.name = name; + this.genre = genre; + this.tiktokUsername = tiktokUsername; + this.instagramUsername = instagramUsername; + this.followers = followers; + } + +// 2) + addFollowers(setfollowers:number) { + this.followers = this.followers + setfollowers; + } + + getFollowers() { + return this.followers; + } + +} + +const sideman = new influancer ("Sideman", "Intertament","Sideman","Sideman",17500000); +const recrent = new influancer ("Recrent", "Gaming","Recrent","Recrent",570000); +const dudeperfect = new influancer ("Dude Perfect", "Intertament","DudePerfect","DudePerfect",58500000); + +recrent.addFollowers(10); +sideman.addFollowers(100); +dudeperfect.addFollowers(1000); + +console.log(`${recrent.name}'s TikTok username is ${recrent.tiktokUsername}`); +console.log(`${sideman.name}'s TikTok username is ${sideman.tiktokUsername}`); +console.log(`${dudeperfect.name}'s TikTok username is ${dudeperfect.tiktokUsername}`); diff --git a/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/dist/app.js b/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/dist/app.js new file mode 100644 index 000000000..544e4958d --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/dist/app.js @@ -0,0 +1,27 @@ +// 1) +var influancer = /** @class */ (function () { + function influancer(name, genre, tiktokUsername, instagramUsername, followers) { + this.name = name; + this.genre = genre; + this.tiktokUsername = tiktokUsername; + this.instagramUsername = instagramUsername; + this.followers = followers; + } + // 2) + influancer.prototype.addFollowers = function (setfollowers) { + this.followers = this.followers + setfollowers; + }; + influancer.prototype.getFollowers = function () { + return this.followers; + }; + return influancer; +}()); +var sideman = new influancer("Sideman", "Intertament", "Sideman", "Sideman", 17500000); +var recrent = new influancer("Recrent", "Gaming", "Recrent", "Recrent", 570000); +var dudeperfect = new influancer("Dude Perfect", "Intertament", "DudePerfect", "DudePerfect", 58500000); +recrent.addFollowers(10); +sideman.addFollowers(100); +dudeperfect.addFollowers(1000); +console.log(recrent.name + "'s TikTok username is " + recrent.tiktokUsername); +console.log(sideman.name + "'s TikTok username is " + sideman.tiktokUsername); +console.log(dudeperfect.name + "'s TikTok username is " + dudeperfect.tiktokUsername); diff --git a/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/index.html b/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Nikita Rossenko/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/dist/index.js new file mode 100644 index 000000000..4d339ec9d --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/dist/index.js @@ -0,0 +1,94 @@ +var Celebs = /** @class */ (function () { + function Celebs(name, genre, tikTokName, instagramName, numOfFollowers) { + this.name = name; + this.genre = genre; + this.tikTokName = tikTokName; + this.instagramName = instagramName; + this.numOfFollowers = numOfFollowers; + } + Celebs.prototype.setNumOfFollowers = function (num) { + this.numOfFollowers = num; + }; + Celebs.prototype.getNumOfFollowers = function () { + return this.numOfFollowers; + }; + Celebs.prototype.toString = function () { + return this.name + " Tiktok account is " + this.tikTokName + " and the account has " + this.numOfFollowers + " followers."; + }; + return Celebs; +}()); +var lebron = new Celebs("Lebron", "Basketball", "LBJ", "LBJ", 4000000); +var roi = new Celebs("Roi", "Soccer", "Roi", "Roi", 2309874); +var omer = new Celebs("Omer", "Dancing", "Omer", "Omer", 123454); +var guy = new Celebs("Guy", "Clothes", "Guy", "Guy", 56732); +var dorit = new Celebs("Dorit", "Clothes", "Dorit", "Dorit", 5643); +var rafi = new Celebs("Rafi", "Clothes", "Rafi", "Rafi", 8765432); +var ben = new Celebs("Ben", "Clothes", "Ben", "Ben", 23540500); +var arr = [lebron, roi, guy, omer, dorit, rafi, ben]; +function who(arr) { + for (var i in arr) { + console.log(arr[i].toString()); + } +} +who(arr); +function whoHasMost(arr) { + var newArr = arr; + for (var i = newArr.length - 1; i >= 0; i--) { + for (var j = 0; j < i; j++) { + if (newArr[j].numOfFollowers < newArr[j + 1].numOfFollowers) { + var temp = newArr[j]; + newArr[j] = newArr[j + 1]; + newArr[j + 1] = temp; + } + } + } + return newArr; +} +console.log("-------------"); +var celebWithMostFollowers = whoHasMost(arr)[0]; +console.log("The celeb with the most foolowers is " + celebWithMostFollowers.name + " with " + celebWithMostFollowers.numOfFollowers + " followers"); +console.log("-------------"); +var Datee = /** @class */ (function () { + function Datee(day, month, year, hours, minutes, seconds) { + this.day = day; + this.month = month; + this.year = year; + this.hours = hours; + this.minutes = minutes; + this.seconds = seconds; + } + Datee.prototype.addZero = function (num) { + var str = ""; + if (num < 10) { + str += "0" + num.toString(); + } + else { + str += num.toString(); + } + return str; + }; + Datee.prototype.toString = function () { + var day = this.addZero(this.day); + var month = this.addZero(this.month); + var year; + var hours = this.addZero(this.hours); + var minutes = this.addZero(this.minutes); + var seconds = this.addZero(this.seconds); + if (this.year < 1000) { + year = "0" + this.year.toString(); + } + else if (this.year < 100) { + year = "00" + this.year.toString(); + } + else if (this.year < 10) { + year = "000" + this.year.toString(); + } + else { + year = this.year.toString(); + } + return day + "/" + month + "/" + year + " and " + hours + "/" + minutes + "/" + seconds; + }; + return Datee; +}()); +var d1 = new Datee(1, 5, 1998, 2, 4, 7); +console.log(d1.toString()); diff --git a/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/index.html b/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/index.html new file mode 100644 index 000000000..0b13d2f2a --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/index.ts b/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/index.ts new file mode 100644 index 000000000..a1367936c --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/Omer.Virshuvski/index.ts @@ -0,0 +1,121 @@ +class Celebs{ + name:string; + genre:string; + tikTokName:string; + instagramName:string; + numOfFollowers:number; + + constructor(name:string, genre:string, tikTokName:string, instagramName:string, numOfFollowers:number) { + this.name = name; + this.genre = genre; + this.tikTokName = tikTokName; + this.instagramName = instagramName; + this.numOfFollowers = numOfFollowers; + } + + setNumOfFollowers(num:number) { + this.numOfFollowers = num; + } + + getNumOfFollowers():number { + return this.numOfFollowers; + } + + toString():string { + return `${this.name} Tiktok account is ${this.tikTokName} and the account has ${this.numOfFollowers} followers.` + } +} + +const lebron:Celebs = new Celebs("Lebron", "Basketball", "LBJ", "LBJ", 4000000); +const roi:Celebs = new Celebs("Roi", "Soccer", "Roi", "Roi", 2309874); +const omer:Celebs = new Celebs("Omer", "Dancing", "Omer", "Omer", 123454); +const guy:Celebs = new Celebs("Guy", "Clothes", "Guy", "Guy", 56732); +const dorit:Celebs = new Celebs("Dorit", "Clothes", "Dorit", "Dorit", 5643); +const rafi:Celebs = new Celebs("Rafi", "Clothes", "Rafi", "Rafi", 8765432); +const ben:Celebs = new Celebs("Ben", "Clothes", "Ben", "Ben", 23540500); + +const arr:Celebs[] = [lebron, roi, guy ,omer, dorit, rafi, ben]; + +function who(arr:Celebs[]) { + for(const i in arr) { + console.log(arr[i].toString()) + } +} + +who(arr); + +function whoHasMost(arr:Celebs[]):Celebs[] { + let newArr:Celebs[] = arr; + for(let i = newArr.length-1; i >= 0; i--) { + for(let j = 0; j < i; j++) { + if(newArr[j].numOfFollowers < newArr[j+1].numOfFollowers) { + let temp = newArr[j]; + newArr[j] = newArr[j+1]; + newArr[j+1] = temp; + } + } + } + return newArr; +} +console.log("-------------") +const celebWithMostFollowers = whoHasMost(arr)[0]; +console.log(`The celeb with the most foolowers is ${celebWithMostFollowers.name} with ${celebWithMostFollowers.numOfFollowers} followers`); + +console.log("-------------") + + + + + + +class Datee { + day:number; + month:number; + year:number; + hours:number; + minutes:number; + seconds:number; + + constructor(day:number, month:number, year:number, hours:number, minutes:number, seconds:number) { + this.day = day; + this.month = month; + this.year = year; + this.hours = hours; + this.minutes = minutes; + this.seconds = seconds; + } + + addZero(num:number):string { + let str:string = ""; + if(num<10) { + str += "0"+num.toString(); + } else { + str += num.toString(); + } + return str; + } + + toString(this:Datee):string { + let day:string = this.addZero(this.day); + let month:string = this.addZero(this.month); + let year:string; + let hours:string = this.addZero(this.hours); + let minutes:string = this.addZero(this.minutes); + let seconds:string = this.addZero(this.seconds); + if(this.year<1000) { + year = "0"+this.year.toString(); + } else if(this.year<100) { + year = "00"+this.year.toString(); + } else if(this.year<10) { + year = "000"+this.year.toString(); + } else { + year = this.year.toString(); + } + return `${day}/${month}/${year} and ${hours}/${minutes}/${seconds}` + } +} + +const d1:Datee = new Datee(1,5,1998, 2, 4, 7); + +console.log(d1.toString()); + diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/app.ts b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/app.ts new file mode 100644 index 000000000..591d0949a --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/app.ts @@ -0,0 +1,61 @@ +const celebrityList: Celebrity[] = []; + +class Celebrity { + name: string; + ganre: string; + tiktok: boolean; + instagram: boolean; + followersAmount: number; + + constructor( + name: string, + ganre: string, + tiktok: boolean, + instagram: boolean, + followersAmount: number = 0 + ) { + this.name = name; + this.ganre = ganre; + this.tiktok = tiktok; + this.instagram = instagram; + this.followersAmount = followersAmount; + } + + get NumberOffFollowers() { + return this.followersAmount; + } + + set NumberOffFollowers(num: number) { + this.followersAmount = num; + } +} + +const eminem = new Celebrity("Marshall Mathers", "Male", true, true); +const cristianoJr = new Celebrity("Cristiano Ronaldo", "Male", false, true); +const rihanna = new Celebrity("Rihanna", "Female", true, true); +const jenniferAni = new Celebrity("Jennifer Aniston", "Female", false, true); +const ryanRynolds = new Celebrity("Ryan Reynolds", "Male", true, true); + +eminem.NumberOffFollowers = 4200000 + 37700000; +cristianoJr.NumberOffFollowers = 529000000; +rihanna.NumberOffFollowers = 6900000 + 139000000; +jenniferAni.NumberOffFollowers = 41100000; +ryanRynolds.NumberOffFollowers = 4720000 + 21100000; + + + +const addCelebsToList = (celeb: Celebrity) => celebrityList.push(celeb); +addCelebsToList(eminem); +addCelebsToList(cristianoJr); +addCelebsToList(rihanna); +addCelebsToList(jenniferAni); +addCelebsToList(ryanRynolds); + +//sort celebrities from most followers to least followers +function rateCelebs() { + return [...celebrityList].sort((a, b) => b.followersAmount - a.followersAmount); +} + +console.log(celebrityList); //original list +console.log(rateCelebs()); //sorted list +console.log(celebrityList); //original list \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/dist/app.js b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/dist/app.js new file mode 100644 index 000000000..7af6ecf59 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/dist/app.js @@ -0,0 +1,52 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +var celebrityList = []; +var Celebrity = /** @class */ (function () { + function Celebrity(name, ganre, tiktok, instagram, followersAmount) { + if (followersAmount === void 0) { followersAmount = 0; } + this.name = name; + this.ganre = ganre; + this.tiktok = tiktok; + this.instagram = instagram; + this.followersAmount = followersAmount; + } + Object.defineProperty(Celebrity.prototype, "NumberOffFollowers", { + get: function () { + return this.followersAmount; + }, + set: function (num) { + this.followersAmount = num; + }, + enumerable: false, + configurable: true + }); + return Celebrity; +}()); +var eminem = new Celebrity("Marshall Mathers", "Male", true, true); +var cristianoJr = new Celebrity("Cristiano Ronaldo", "Male", false, true); +var rihanna = new Celebrity("Rihanna", "Female", true, true); +var jenniferAni = new Celebrity("Jennifer Aniston", "Female", false, true); +var ryanRynolds = new Celebrity("Ryan Reynolds", "Male", true, true); +eminem.NumberOffFollowers = 4200000 + 37700000; +cristianoJr.NumberOffFollowers = 529000000; +rihanna.NumberOffFollowers = 6900000 + 139000000; +jenniferAni.NumberOffFollowers = 41100000; +ryanRynolds.NumberOffFollowers = 4720000 + 21100000; +var addCelebsToList = function (celeb) { return celebrityList.push(celeb); }; +addCelebsToList(eminem); +addCelebsToList(cristianoJr); +addCelebsToList(rihanna); +addCelebsToList(jenniferAni); +addCelebsToList(ryanRynolds); +//sort celebrities from most followers to least followers +function rateCelebs() { + return __spreadArrays(celebrityList).sort(function (a, b) { return b.followersAmount - a.followersAmount; }); +} +console.log(celebrityList); //original list +console.log(rateCelebs()); //sorted list +console.log(celebrityList); //original list diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/index.html b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/index.html new file mode 100644 index 000000000..33a8955f8 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/first3Levels/index.html @@ -0,0 +1,12 @@ + + + + + + + HW level 1 -> 3 + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/app.ts b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/app.ts new file mode 100644 index 000000000..f640723f7 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/app.ts @@ -0,0 +1,104 @@ +class Dates { + date: Date; + hour: number; + minute: number; + seconds: number; + year: number; + month: number; + day: number; + + constructor(date: Date) { + this.date = date; + this.hour = date.getHours(); + this.minute = date.getMinutes(); + this.seconds = date.getSeconds(); + this.year = date.getFullYear(); + this.month = date.getMonth() + 1; + this.day = parseInt(JSON.stringify(date).slice(9, 11)); + } + + dateFormat(): string | false { + try { + const dateToString = JSON.stringify(this.date) + .replace(/[A-Z"]/g, " ") + .trim() + .split(" "); + const properDateFormat = `${this.day}/${this.month}/${this.year}`; + return `Date Entered: ${properDateFormat} at ${dateToString[1]}`; + } catch (error) { + console.log(error); + return false; + } + } + + timePassed(): string | false { + try { + const theTimeOfUserInput = this.date.getTime(); + const currentTime = new Date().getTime(); + const timePassed = (currentTime - theTimeOfUserInput) / 1000; + return `${timePassed} seconds passed since this date was created`; + } catch (error) { + console.log(error); + return false; + } + } +} + +const aDate = new Date(); +const newDate = new Dates(aDate); + +console.log(aDate); +console.log(newDate); +console.log(newDate.hour); +console.log(newDate.minute); +console.log(newDate.seconds); +console.log(newDate.year); +console.log(newDate.month); +console.log(newDate.day); +console.log(newDate.timePassed()); +console.log(newDate.dateFormat()); + +// created an app that will tell you how long have passed since your birth + +const userInput = document.querySelector("#userInput") as HTMLInputElement; +const ulEl = document.querySelector(".appContainer__output") as HTMLDivElement; +const miliToSeconds: number = 1000; +const miliToMinutes: number = 1000 * 60; +const miliToHours: number = 1000 * 60 * 60; +const miliToDays: number = 1000 * 60 * 60 * 24; +const miliToWeeks: number = 1000 * 60 * 60 * 24 * 7; +const miliToYears: number = 1000 * 60 * 60 * 24 * 365; + +window.addEventListener("keydown", (e) => { + if (e.key == "Enter" && userInput.value) { + // const currentTime = new Date().getTime() / (1000 * 60); + // const timeEntered = new Date(userInput.value); + // console.log(timeEntered.getFullYear()) + timePassed(miliToSeconds, "Seconds"); + timePassed(miliToMinutes, "Minutes"); + timePassed(miliToHours, "Hours"); + timePassed(miliToDays, "Days"); + timePassed(miliToWeeks, "Weeks"); + timePassed(miliToYears, "Years"); + } +}); + +function numberWithCommas(x: number): string { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); +} + +const timePassed = (convertRatio: number, timeName: string): void | false => { + try { + const currentTime: number = new Date().getTime() / convertRatio; + const timeEntered: number = Date.parse(userInput.value) / convertRatio; + const difference: number = currentTime - timeEntered; + const li = document.createElement("li") as HTMLElement; + li.textContent = `${timeName}: ${numberWithCommas(Math.floor(difference))}`; + ulEl.append(li); + } catch (error) { + console.error(error); + return false; + } +}; + +// output.textContent = numberWithCommas((currentTime - timeEntered).toFixed()); diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/dist/app.js b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/dist/app.js new file mode 100644 index 000000000..32fba255d --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/dist/app.js @@ -0,0 +1,90 @@ +var Dates = /** @class */ (function () { + function Dates(date) { + this.date = date; + this.hour = date.getHours(); + this.minute = date.getMinutes(); + this.seconds = date.getSeconds(); + this.year = date.getFullYear(); + this.month = date.getMonth() + 1; + this.day = parseInt(JSON.stringify(date).slice(9, 11)); + } + Dates.prototype.dateFormat = function () { + try { + var dateToString = JSON.stringify(this.date) + .replace(/[A-Z"]/g, " ") + .trim() + .split(" "); + var properDateFormat = this.day + "/" + this.month + "/" + this.year; + return "Date Entered: " + properDateFormat + " at " + dateToString[1]; + } + catch (error) { + console.log(error); + return false; + } + }; + Dates.prototype.timePassed = function () { + try { + var theTimeOfUserInput = this.date.getTime(); + var currentTime = new Date().getTime(); + var timePassed_1 = (currentTime - theTimeOfUserInput) / 1000; + return timePassed_1 + " seconds passed since this date was created"; + } + catch (error) { + console.log(error); + return false; + } + }; + return Dates; +}()); +var aDate = new Date(); +var newDate = new Dates(aDate); +console.log(aDate); +console.log(newDate); +console.log(newDate.hour); +console.log(newDate.minute); +console.log(newDate.seconds); +console.log(newDate.year); +console.log(newDate.month); +console.log(newDate.day); +console.log(newDate.timePassed()); +console.log(newDate.dateFormat()); +// created an app that will tell you how long have passed since your birth +var userInput = document.querySelector("#userInput"); +var ulEl = document.querySelector(".appContainer__output"); +var miliToSeconds = 1000; +var miliToMinutes = 1000 * 60; +var miliToHours = 1000 * 60 * 60; +var miliToDays = 1000 * 60 * 60 * 24; +var miliToWeeks = 1000 * 60 * 60 * 24 * 7; +var miliToYears = 1000 * 60 * 60 * 24 * 365; +window.addEventListener("keydown", function (e) { + if (e.key == "Enter" && userInput.value) { + // const currentTime = new Date().getTime() / (1000 * 60); + // const timeEntered = new Date(userInput.value); + // console.log(timeEntered.getFullYear()) + timePassed(miliToSeconds, "Seconds"); + timePassed(miliToMinutes, "Minutes"); + timePassed(miliToHours, "Hours"); + timePassed(miliToDays, "Days"); + timePassed(miliToWeeks, "Weeks"); + timePassed(miliToYears, "Years"); + } +}); +function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); +} +var timePassed = function (convertRatio, timeName) { + try { + var currentTime = new Date().getTime() / convertRatio; + var timeEntered = Date.parse(userInput.value) / convertRatio; + var difference = currentTime - timeEntered; + var li = document.createElement("li"); + li.textContent = timeName + ": " + numberWithCommas(Math.floor(difference)); + ulEl.append(li); + } + catch (error) { + console.error(error); + return false; + } +}; +// output.textContent = numberWithCommas((currentTime - timeEntered).toFixed()); diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/dist/style.css b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/dist/style.css new file mode 100644 index 000000000..8299b332f --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/dist/style.css @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +.appContainer { + font-family: "Akaya Kanadaka", sans-serif; + font-size: 1.2rem; + margin: auto; + padding: 2em; + background-color: darkblue; + color: whitesmoke; + width: 30%; + height: 70%; + display: flex; + flex-direction: column; + justify-content: space-around; + border-radius: 20px; + box-shadow: 0 0 100px black; +} +.appContainer__title { + text-align: center; + font-size: 1rem; + font-family: "Times New Roman", Times, serif; +} +.appContainer__dateInput { + margin: 1em 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} +.appContainer__dateInput input { + width: 10vw; + min-width: 150px; + margin: 1em 0; +} +.appContainer__output { + height: 50%; + padding: 2em; + display: flex; + flex-direction: column; + justify-content: space-around; + margin-right: auto; +} \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/index.html b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/index.html new file mode 100644 index 000000000..6c0130f17 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/index.html @@ -0,0 +1,30 @@ + + + + + + + HW Classes level 4 + + + + +
    +
    +

    + Find out how much time have passed since your birth +

    +
    +
    + + + (press enter) +
    +
      +
      + + + diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/style.css b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/style.css new file mode 100644 index 000000000..8299b332f --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/style.css @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +.appContainer { + font-family: "Akaya Kanadaka", sans-serif; + font-size: 1.2rem; + margin: auto; + padding: 2em; + background-color: darkblue; + color: whitesmoke; + width: 30%; + height: 70%; + display: flex; + flex-direction: column; + justify-content: space-around; + border-radius: 20px; + box-shadow: 0 0 100px black; +} +.appContainer__title { + text-align: center; + font-size: 1rem; + font-family: "Times New Roman", Times, serif; +} +.appContainer__dateInput { + margin: 1em 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} +.appContainer__dateInput input { + width: 10vw; + min-width: 150px; + margin: 1em 0; +} +.appContainer__output { + height: 50%; + padding: 2em; + display: flex; + flex-direction: column; + justify-content: space-around; + margin-right: auto; +} \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/style.scss b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/style.scss new file mode 100644 index 000000000..28bd96b0f --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/VladiBykanovHW/level4/style.scss @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +.appContainer{ + font-family: "Akaya Kanadaka", sans-serif; + font-size: 1.2rem; + margin: auto; + padding: 2em; + background-color: darkblue; + color: whitesmoke; + width: 30%; + height: 70%; + display: flex; + flex-direction: column; + justify-content: space-around; + border-radius: 20px; + box-shadow: 0 0 100px black; + &__title{ + text-align: center; + font-size: 1rem; + font-family: 'Times New Roman', Times, serif; + } + &__dateInput{ + margin: 1em 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + input{ + width: 10vw; + min-width: 150px; + margin: 1em 0; + } + } + &__output{ + height: 50%; + padding: 2em; + display: flex; + flex-direction: column; + justify-content: space-around; + margin-right: auto; + } +} \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/amit/celebs.html b/02-TypeScript/09-classes/Home-puzzles/amit/celebs.html new file mode 100644 index 000000000..3dc20e8a2 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/amit/celebs.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/amit/celebs.ts b/02-TypeScript/09-classes/Home-puzzles/amit/celebs.ts new file mode 100644 index 000000000..cb5efff96 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/amit/celebs.ts @@ -0,0 +1,62 @@ +// 1. create a class of celebs (influencers) with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. + + +class Celeb { + name: string; + genre: string; + tikTokAccount: string; + instagramAccount: string; + numberOfFollowers: number; + + + constructor(name: string, genre: string, tikTokAccount: string, instagramAccount: string, numberOfFollowers: number) { + this.name = name, + this.genre = genre, + this.tikTokAccount = tikTokAccount, + this.instagramAccount = instagramAccount, + this.numberOfFollowers = numberOfFollowers + } +} + + const deadpool = new Celeb(`deadpool`, `comics`, `tikpool`, `deadgram`, 1); + + console.dir(deadpool); + +// 3. create a function that gets all the celebs and returns the celeb with the most followers. +// Even better, return a list of celebs, ordered by their number of followers. + +///WIP/// + +// const wolverine = new Celeb(`wolverine`, `comics`, `wolvetok`, `instarine`, 2); +// const xavier = new Celeb(`xavier`, `comics`, `profex`, `px2023`, 3) + +// const celebsList: Celeb[] = [deadpool, wolverine, xavier] + + +// function mostFollowers(obj: Celeb[]) { +// try { +// let most = Math.max(obj.numberOfFollowers[]); +// for (let i=0; i< arguments.length; i++){ +// if (arguments[i].length > max) + +// } + + +// } + +// catch (error) { + +// } +// } + + +// function longestString() { +// let longest = ''; +// for (let i = 0; i < arguments.length; i++) { +// if (arguments[i].length > longest.length) { +// longest = arguments[i]; +// } +// } +// return longest; +// } + diff --git a/02-TypeScript/09-classes/Home-puzzles/amit/dist/celebs.js b/02-TypeScript/09-classes/Home-puzzles/amit/dist/celebs.js new file mode 100644 index 000000000..8180d463b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/amit/dist/celebs.js @@ -0,0 +1,38 @@ +// 1. create a class of celebs (influencers) with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. +var Celeb = /** @class */ (function () { + function Celeb(name, genre, tikTokAccount, instagramAccount, numberOfFollowers) { + this.name = name, + this.genre = genre, + this.tikTokAccount = tikTokAccount, + this.instagramAccount = instagramAccount, + this.numberOfFollowers = numberOfFollowers; + } + return Celeb; +}()); +var deadpool = new Celeb("deadpool", "comics", "tikpool", "deadgram", 1); +console.dir(deadpool); +// 3. create a function that gets all the celebs and returns the celeb with the most followers. +// Even better, return a list of celebs, ordered by their number of followers. +///WIP/// +// const wolverine = new Celeb(`wolverine`, `comics`, `wolvetok`, `instarine`, 2); +// const xavier = new Celeb(`xavier`, `comics`, `profex`, `px2023`, 3) +// const celebsList: Celeb[] = [deadpool, wolverine, xavier] +// function mostFollowers(obj: Celeb[]) { +// try { +// let most = Math.max(obj.numberOfFollowers[]); +// for (let i=0; i< arguments.length; i++){ +// if (arguments[i].length > max) +// } +// } +// catch (error) { +// } +// } +// function longestString() { +// let longest = ''; +// for (let i = 0; i < arguments.length; i++) { +// if (arguments[i].length > longest.length) { +// longest = arguments[i]; +// } +// } +// return longest; +// } diff --git a/02-TypeScript/09-classes/Home-puzzles/angela/dist/puzzle.js b/02-TypeScript/09-classes/Home-puzzles/angela/dist/puzzle.js new file mode 100644 index 000000000..e896d98ab --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/angela/dist/puzzle.js @@ -0,0 +1,38 @@ +var celeb = /** @class */ (function () { + function celeb(name, genre, tiktokAccount, instagramAccount, follower) { + this.name = name; + this.genre = genre; + this.tiktokAccount = tiktokAccount; + this.instagramAccount = instagramAccount; + this.follower = follower; + } + celeb.prototype.setTiktokFollowerCount = function (num) { + this.follower = num; + }; + celeb.prototype.getTiktokFollowerCount = function () { + return this.follower; + }; + celeb.prototype.setinstagramFollowerCount = function (num) { + return this.follower = num; + }; + ; + celeb.prototype.getinstagramFollowerCount = function () { + return this.follower; + }; + celeb.prototype.tostring = function () { + return this.name + " have " + this.follower + " on tiktok "; + }; + return celeb; +}()); +var bradPitt = new celeb("Brad Pitt", "actor", "none", 'none', 0); +var janeDoe = new celeb("jane doe", "singer", "jane_dow123", 'janie', 10005); +var personMini = new celeb("person mini", "author", "miniperson", 'none', 41000); +var celebs = [bradPitt, janeDoe, personMini]; +function addedConsole(celebs) { + for (var x in celebs) { + console.log(celebs[x].tostring()); + } +} +addedConsole(celebs); +var mostFollowers = celebs.sort(function (a, b) { return a.follower - b.follower; })[celebs.length - 1]; +console.log(mostFollowers.name + " has the most followers on tiktok ,they have " + mostFollowers.follower); diff --git a/02-TypeScript/09-classes/Home-puzzles/angela/puzzle.html b/02-TypeScript/09-classes/Home-puzzles/angela/puzzle.html new file mode 100644 index 000000000..9dbfe71ec --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/angela/puzzle.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/angela/puzzle.ts b/02-TypeScript/09-classes/Home-puzzles/angela/puzzle.ts new file mode 100644 index 000000000..cd025059b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/angela/puzzle.ts @@ -0,0 +1,55 @@ +class celeb { + name:string; + genre:string; + tiktokAccount:string; + instagramAccount:string; + follower:number; + + constructor(name:string,genre:string,tiktokAccount:string,instagramAccount:string,follower:number){ + this.name=name; + this.genre=genre; + this.tiktokAccount=tiktokAccount; + this.instagramAccount=instagramAccount; + this.follower=follower; + + } + + setTiktokFollowerCount(num:number){ + this.follower=num; + } + getTiktokFollowerCount(){ + return this.follower; + } + + setinstagramFollowerCount(num:number){ + return this.follower=num; + + }; + getinstagramFollowerCount(){ + return this.follower; + } + tostring(){ + return `${this.name} have ${this.follower} on tiktok ` + + } + } + + + + +const bradPitt = new celeb ("Brad Pitt","actor","none",'none',0); +const janeDoe = new celeb ("jane doe","singer","jane_dow123",'janie',10005); +const personMini = new celeb ("person mini","author","miniperson",'none',41000); + + +const celebs:celeb[] = [bradPitt,janeDoe,personMini]; +function addedConsole(celebs:celeb[]){ + for(const x in celebs){ + console.log(celebs[x].tostring()) + } +} +addedConsole(celebs) + +const mostFollowers= celebs.sort((a, b) => a.follower - b.follower)[celebs.length-1]; +console.log(`${mostFollowers.name} has the most followers on tiktok ,they have ${mostFollowers.follower}`); + diff --git a/02-TypeScript/09-classes/Home-puzzles/idan/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/idan/dist/index.js new file mode 100644 index 000000000..2f2f8d4fd --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/idan/dist/index.js @@ -0,0 +1,28 @@ +var Dates = /** @class */ (function () { + function Dates(day, month, year, hour, minute, second) { + this.day = day; + this.month = month; + this.year = year; + this.hour = hour; + this.minute = minute; + this.second = second; + this.date = function findDate() { + return this.day + "/" + this.month + "/" + this.year + " " + this.hour + ":" + this.minute + ":" + this.second; + }; + this.secondsFromDate = function timeElapsed() { + var inputDate = new Date(this.year, this.month, this.day, this.hour, this.minute, this.second); + var secondsElapsed = (clientDate.getFullYear() - inputDate.getFullYear()) * 365 * 24 * 3600 + (clientDate.getMonth() - inputDate.getMonth()) * 30 * 24 * 3600 + (clientDate.getDay() - inputDate.getDay()) * 24 * 3600 + (clientDate.getHours() - inputDate.getHours()) * 3600 + (clientDate.getMinutes() - inputDate.getMinutes()) * 60 + clientDate.getSeconds() - inputDate.getSeconds(); + if (secondsElapsed < 0) { + return "the date is in " + secondsElapsed * -1; + } + else { + return secondsElapsed + " seconds have passed since that date"; + } + }; + } + return Dates; +}()); +var clientDate = new Date(); +var joeDay = new Dates(20, 1, 2021, 4, 23, 12); +console.log(joeDay.date()); +console.log(joeDay.secondsFromDate()); diff --git a/02-TypeScript/09-classes/Home-puzzles/idan/index.html b/02-TypeScript/09-classes/Home-puzzles/idan/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/idan/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/idan/index.ts b/02-TypeScript/09-classes/Home-puzzles/idan/index.ts new file mode 100644 index 000000000..29b2c8ff1 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/idan/index.ts @@ -0,0 +1,23 @@ + + +class Dates { + constructor(public day:number, public month:number, public year:number, public hour:number, public minute:number, public second:number){} + date = function findDate(){ + return `${this.day}/${this.month}/${this.year} ${this.hour}:${this.minute}:${this.second}` + } + secondsFromDate = function timeElapsed(){ + const inputDate = new Date(this.year, this.month, this.day, this.hour, this.minute, this.second) + const secondsElapsed = (clientDate.getFullYear()-inputDate.getFullYear())*365*24*3600+ (clientDate.getMonth()- inputDate.getMonth())*30*24*3600 +(clientDate.getDay()- inputDate.getDay())*24*3600 + (clientDate.getHours()-inputDate.getHours())*3600 + (clientDate.getMinutes()-inputDate.getMinutes())*60 + clientDate.getSeconds()- inputDate.getSeconds(); + if(secondsElapsed<0){ + return `the date is in ${secondsElapsed*-1}` + } + else{ + return `${secondsElapsed} seconds have passed since that date` + } + } +} +const clientDate = new Date(); +const joeDay = new Dates(20, 1, 2021, 4, 23, 12); +console.log(joeDay.date()); +console.log(joeDay.secondsFromDate()); + diff --git a/02-TypeScript/09-classes/Home-puzzles/instructions.md b/02-TypeScript/09-classes/Home-puzzles/instructions.md new file mode 100644 index 000000000..1f2845bb8 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/instructions.md @@ -0,0 +1,8 @@ +1. create a class of celebs (influencers) with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. + +2. based on question number one, create a method to set the number of followers and another method to get the number of followers. + Create a few celebs-objects, and set the number of followers. Write to the console each celeb TikTok account. + +3. create a function that gets all the celebs and returns the celeb with the most followers. Even better, return a list of celebs, ordered by their number of followers. + +4. Create a class for dates. the instnce(object) gets a date and one method returns the date in the format: "dd/mm/yyyy, hh:mm:ss" for instance, gets a date (new Date ())returns "12/1/2023 17:56:12". And another method return in the following format "2 seconds past from that date" diff --git a/02-TypeScript/09-classes/Home-puzzles/itayAmosi/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/itayAmosi/dist/index.js new file mode 100644 index 000000000..84c9b0f44 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/itayAmosi/dist/index.js @@ -0,0 +1,34 @@ +// task 1 +var Celebs = /** @class */ (function () { + function Celebs(name, age, instagram, tiktok, followersIsntagram, followersTiktok, followers) { + this.name = name; + this.age = age; + this.instagram = instagram; + this.tiktok = tiktok; + this.followersIsntagram = followersIsntagram; + this.followersTiktok = followersTiktok; + this.followers = followers; + } + // task 2 + Celebs.prototype.setFollowers = function (followers) { + this.followers = followers; + }; + Celebs.prototype.getFollowers = function () { + return this.followers; + }; + return Celebs; +}()); +var yodaLevi = new Celebs("Yoda Levi", 43, true, false, 150000, 0, 148); +var fiftiCent = new Celebs("50cent", 47, true, true, 1500000, 3000000, 100); +var barrefaeli = new Celebs("Bar Refaeli", 33, true, true, 2500000, 15000000, 1875); +var bibi = new Celebs("Bibi netanyaho", 74, true, true, 35000000, 12000000, 12000); +var persons = [yodaLevi, fiftiCent, barrefaeli, bibi]; +console.log(yodaLevi); +console.log(fiftiCent); +// console.log(`we add new ${yodaLevi.followers} follwers to ${yodaLevi.name}`); +yodaLevi.followers = 100 + 500; +console.log(yodaLevi.followers); +"--"; +// task 3 +persons.sort(function (a, b) { return b.followers - a.followers; }); +console.log(persons); diff --git a/02-TypeScript/09-classes/Home-puzzles/itayAmosi/index.html b/02-TypeScript/09-classes/Home-puzzles/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/itayAmosi/index.ts b/02-TypeScript/09-classes/Home-puzzles/itayAmosi/index.ts new file mode 100644 index 000000000..079af6d76 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/itayAmosi/index.ts @@ -0,0 +1,58 @@ +// task 1 +class Celebs { + name: string; + age: number; + instagram: boolean; + tiktok: boolean; + followersIsntagram: number; + followersTiktok: number; + followers: number; + + constructor( + name: string, + age: number, + instagram: boolean, + tiktok: boolean, + followersIsntagram: number, + followersTiktok: number, + followers: number + ) { + this.name = name; + this.age = age; + this.instagram = instagram; + this.tiktok = tiktok; + this.followersIsntagram = followersIsntagram; + this.followersTiktok = followersTiktok; + this.followers = followers; + + } + + // task 2 + setFollowers(followers: number) { + this.followers = followers; + } + + getFollowers(): number | undefined { + return this.followers; + } + +} + +const yodaLevi = new Celebs (`Yoda Levi`, 43, true, false, 150000, 0, 148); +const fiftiCent = new Celebs (`50cent`, 47, true, true, 1500000, 3000000, 100); +const barrefaeli = new Celebs (`Bar Refaeli`, 33, true, true, 2500000, 15000000, 1875); +const bibi = new Celebs (`Bibi netanyaho`, 74, true, true, 35000000, 12000000, 12000); +const persons: Celebs[] = [yodaLevi, fiftiCent, barrefaeli, bibi]; + +console.log(yodaLevi); +console.log(fiftiCent); +// console.log(`we add new ${yodaLevi.followers} follwers to ${yodaLevi.name}`); +yodaLevi.followers=100+500; +console.log(yodaLevi.followers); + +`--` +// task 3 + +persons.sort((a, b) => b.followers - a.followers); +console.log(persons); + diff --git a/02-TypeScript/09-classes/Home-puzzles/john-ben/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..4b526156d --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/john-ben/dist/index.js @@ -0,0 +1,36 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +var Celebs = /** @class */ (function () { + function Celebs(name, genre, account_tiktok, account_instagram, followers) { + this.name = name; + this.genre = genre; + this.account_tiktok = account_tiktok; + this.account_instagram = account_instagram; + this.followers = followers; + } + Celebs.prototype.setFollowers = function (num) { + this.followers = num; + }; + Celebs.prototype.getFollowers = function () { + return this.followers; + }; + return Celebs; +}()); +var messi = new Celebs("Messi", "male", "leo10", "leomessi", 248000000); +var neymar = new Celebs("Neymar", "male", "ney_jr", "neymarjr", 168000000); +var ronaldo = new Celebs("Ronaldo", "male", "cr7", "cristiano", 368000000); +console.log(neymar); +console.log(neymar.followers); +neymar.setFollowers(10); +console.log(neymar.followers); +var CelebsList = [neymar, messi, ronaldo]; +function rateCelebs() { + return __spreadArrays(CelebsList).sort(function (a, b) { return b.followers - a.followers; }); +} +console.log(CelebsList); +console.log(rateCelebs()); diff --git a/02-TypeScript/09-classes/Home-puzzles/john-ben/index.html b/02-TypeScript/09-classes/Home-puzzles/john-ben/index.html new file mode 100644 index 000000000..e7587c7e7 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/john-ben/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/john-ben/index.ts b/02-TypeScript/09-classes/Home-puzzles/john-ben/index.ts new file mode 100644 index 000000000..83a109534 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/john-ben/index.ts @@ -0,0 +1,45 @@ +class Celebs { + name :string; + genre:string; + account_tiktok:string; + account_instagram:string; + followers:number + + + constructor(name:string,genre:string,account_tiktok:string,account_instagram:string,followers:number) { + this.name = name; + this.genre = genre; + this.account_tiktok = account_tiktok; + this.account_instagram = account_instagram; + this.followers = followers + + } + + setFollowers(num:number){ + this.followers=num; + } + getFollowers(){ + return this.followers; + } + +} +const messi = new Celebs ("Messi","male","leo10","leomessi",248000000) +const neymar = new Celebs ("Neymar","male","ney_jr","neymarjr",168000000) +const ronaldo = new Celebs ("Ronaldo","male","cr7","cristiano",368000000) + + +console.log(neymar) +console.log(neymar.followers) +neymar.setFollowers(10) +console.log(neymar.followers) + + + +const CelebsList = [neymar,messi,ronaldo] + +function rateCelebs() { + return [...CelebsList].sort((a, b) => b.followers - a.followers); + } + + console.log(CelebsList) + console.log(rateCelebs()) diff --git a/02-TypeScript/09-classes/Home-puzzles/karin-levi/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/karin-levi/dist/index.js new file mode 100644 index 000000000..4f9b71927 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/karin-levi/dist/index.js @@ -0,0 +1,43 @@ +var celeb = /** @class */ (function () { + function celeb(name, gender, tikTokAccount, instagramAccount, numberOfFollowers) { + this.name = name; + this.gender = gender; + this.tikTokAccount = tikTokAccount; + this.instagramAccount = instagramAccount; + this.numberOfFollowers = numberOfFollowers; + } + celeb.prototype.setFollowers = function (numberOfFollowers) { + this.numberOfFollowers = numberOfFollowers; + }; + celeb.prototype.getFollowers = function () { + return this.numberOfFollowers; + }; + celeb.prototype.getName = function () { + return this.name; + }; + return celeb; +}()); +var karin = new celeb("karin", "female", "karinLevi.tiktok", "karinLevi@instagram", 123666); +var nir = new celeb("nir", "male", "nirLevi.tiktok", "nirLevi@instagram", 137866); +var romi = new celeb("romi", "female", "romiLevi.tiktok", "romiLevi@instagram", 3666); +var or = new celeb("or", "male", "orLevi.tiktok", "orLevi@instagram", 47566); +var celebs = [karin, nir, romi, or]; +function mostFollowers(celebs) { + var celebWithMostFollowers = 0; + var mostFollowers = 0; + for (var i = 0; i < celebs.length; i++) { + if (celebs[i].getFollowers() > mostFollowers) { + mostFollowers = celebs[i].getFollowers(); + celebWithMostFollowers = i; + } + } + return celebs[celebWithMostFollowers].getName(); +} +function sortByFollowers(celebs) { + var a = celebs.sort(function (a, b) { return b.getFollowers() - a.getFollowers(); }); + //console.log(a) + return a; +} +console.log("Here are all the celebrities: ", celebs); +console.log("The celebrity with the most followers is " + mostFollowers(celebs)); +console.log("The celebrities sorted by the number of followers:", sortByFollowers(celebs)); diff --git a/02-TypeScript/09-classes/Home-puzzles/karin-levi/index.html b/02-TypeScript/09-classes/Home-puzzles/karin-levi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/karin-levi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/karin-levi/index.ts b/02-TypeScript/09-classes/Home-puzzles/karin-levi/index.ts new file mode 100644 index 000000000..41ecc32c5 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/karin-levi/index.ts @@ -0,0 +1,64 @@ +class celeb { + name: string; + gender: string; + tikTokAccount: string; + instagramAccount: string; + numberOfFollowers: number; + + constructor(name: string, gender: string, tikTokAccount: string, instagramAccount: string, numberOfFollowers: number) { + this.name = name; + this.gender = gender; + this.tikTokAccount = tikTokAccount; + this.instagramAccount = instagramAccount; + this.numberOfFollowers = numberOfFollowers; + } + + setFollowers(numberOfFollowers: number) { + this.numberOfFollowers = numberOfFollowers; + } + + getFollowers(): number { + return this.numberOfFollowers; + } + + getName(): string { + return this.name; + } + +} + +const karin = new celeb("karin", "female", "karinLevi.tiktok", "karinLevi@instagram", 123666) +const nir = new celeb("nir", "male", "nirLevi.tiktok", "nirLevi@instagram", 137866) +const romi = new celeb("romi", "female", "romiLevi.tiktok", "romiLevi@instagram", 3666) +const or = new celeb("or", "male", "orLevi.tiktok", "orLevi@instagram", 47566) + +const celebs = [karin, nir, romi, or] + +function mostFollowers(celebs: celeb[]): string { + let celebWithMostFollowers = 0; + let mostFollowers = 0; + for (let i = 0; i < celebs.length; i++) { + if (celebs[i].getFollowers() > mostFollowers) { + mostFollowers = celebs[i].getFollowers(); + celebWithMostFollowers = i; + } + } + + return celebs[celebWithMostFollowers].getName() +} + +function sortByFollowers(celebs: celeb[]): celeb[] { + let a = celebs.sort((a, b) => b.getFollowers() - a.getFollowers()); + //console.log(a) + return a; +} + +console.log(`Here are all the celebrities: `, celebs); +console.log(`The celebrity with the most followers is ${mostFollowers(celebs)}`); +console.log(`The celebrities sorted by the number of followers:`, sortByFollowers(celebs)); + + + + + + diff --git a/02-TypeScript/09-classes/Home-puzzles/noa-meillet/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..c35b64229 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/noa-meillet/dist/index.js @@ -0,0 +1,94 @@ +/* +1. create a class of celebs (influencers) with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. + +2. based on question number one, create a method to set the number of followers and another method to get the number of followers. + Create a few celebs-objects, and set the number of followers. Write to the console each celeb TikTok account. + +3. create a function that gets all the celebs and returns the celeb with the most followers. Even better, return a list of celebs, ordered by + their number of followers. + +4. Create a class for dates. the instnce(object) gets a date and one method returns the date in the format: "dd/mm/yyyy, hh:mm:ss" for + instance, gets a date (new Date ())returns "12/1/2023 17:56:12". And another method return in the following format + "2 seconds past from that date" +*/ +var Celebs = /** @class */ (function () { + function Celebs(name, genre, accountInTiktok, accountInInstagram, numberOfFollowers) { + this.name = name; + this.genre = genre; + this.accountInTiktok = accountInTiktok; + this.accountInInstagram = accountInInstagram; + this.numberOfFollowers = numberOfFollowers; + } + Celebs.prototype.setNumOfFollowers = function () { + var numberOfFollower; + while (!numberOfFollower || isNaN(this.numberOfFollowers)) { + numberOfFollower = prompt("enter the number of follower of this celeb:"); + this.numberOfFollowers = parseInt(numberOfFollower); + } + return this.numberOfFollowers; + }; + Celebs.prototype.getNumOfFollowers = function () { + return this.numberOfFollowers; + }; + return Celebs; +}()); +var shlomiShabat = new Celebs("shlomi Shabat", "singer", "shlomi123", "shlomi123", 400); +var NoaKirel = new Celebs("noa kirel", "singer", "noa123", "noa123", 400000); +var hananBenAri = new Celebs("hanan ben ari", "singer", "hba123", "hba123", 2000); +shlomiShabat.getNumOfFollowers(); +shlomiShabat.setNumOfFollowers(); +var celebsArr = [shlomiShabat, NoaKirel, hananBenAri]; +var ishayRibo = createCeleb(); +if (ishayRibo) { + celebsArr.unshift(ishayRibo); +} +alert(whoHasTheMostFolowers(celebsArr)); +function whoHasTheMostFolowers(celebsArr) { + try { + if (celebsArr.length == 0) { + throw new Error("there is no celebs in the list"); + } + var maxFollowers = celebsArr[0]; + for (var i = 1; i < celebsArr.length; i++) { + if (maxFollowers.getNumOfFollowers() < celebsArr[i].getNumOfFollowers()) { + maxFollowers = celebsArr[i]; + } + } + return maxFollowers.name; + } + catch (error) { + console.error(error); + return false; + } +} +function createCeleb() { + try { + var name = void 0; + var genre = void 0; + var accountInTiktok = void 0; + var accountInInstagram = void 0; + var numberOfFollowers = void 0; + while (!name) { + name = prompt("What is the celeb name?"); + } + while (!genre) { + genre = prompt("enter the genre of the celeb?"); + } + while (!accountInTiktok) { + accountInTiktok = prompt("enter the name of the account of the celeb on Tiktok :"); + } + while (!accountInInstagram) { + accountInInstagram = prompt("enter the name of the account of the celeb on Instagram :"); + } + while (!numberOfFollowers || isNaN(numberOfFollowers)) { + numberOfFollowers = prompt("enter the amount of the followers of the celeb on social media :"); + numberOfFollowers = parseInt(numberOfFollowers); + } + var celeb = new Celebs(name, genre, accountInTiktok, accountInInstagram, numberOfFollowers); + return celeb; + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/09-classes/Home-puzzles/noa-meillet/index.html b/02-TypeScript/09-classes/Home-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/noa-meillet/index.ts b/02-TypeScript/09-classes/Home-puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..9b4feb851 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/noa-meillet/index.ts @@ -0,0 +1,116 @@ +/* +1. create a class of celebs (influencers) with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. + +2. based on question number one, create a method to set the number of followers and another method to get the number of followers. + Create a few celebs-objects, and set the number of followers. Write to the console each celeb TikTok account. + +3. create a function that gets all the celebs and returns the celeb with the most followers. Even better, return a list of celebs, ordered by + their number of followers. + +4. Create a class for dates. the instnce(object) gets a date and one method returns the date in the format: "dd/mm/yyyy, hh:mm:ss" for + instance, gets a date (new Date ())returns "12/1/2023 17:56:12". And another method return in the following format + "2 seconds past from that date" +*/ + +class Celebs{ + name: string; + genre: string; + accountInTiktok: string; + accountInInstagram: string; + numberOfFollowers: number; + + constructor(name: string, genre: string, accountInTiktok: string, accountInInstagram: string, numberOfFollowers: number,){ + this.name= name; + this.genre= genre; + this.accountInTiktok= accountInTiktok ; + this.accountInInstagram= accountInInstagram; + this.numberOfFollowers= numberOfFollowers + } + + setNumOfFollowers(){ + let numberOfFollower; + while(!numberOfFollower || isNaN(this.numberOfFollowers)){ + numberOfFollower= prompt(`enter the number of follower of this celeb:`) + this.numberOfFollowers= parseInt(numberOfFollower); + } + return this.numberOfFollowers; + } + + getNumOfFollowers(){ + return this.numberOfFollowers; + } +} + +let shlomiShabat = new Celebs("shlomi Shabat","singer","shlomi123","shlomi123",400); +let NoaKirel = new Celebs("noa kirel","singer","noa123","noa123",400000); +let hananBenAri = new Celebs("hanan ben ari","singer","hba123","hba123",2000); + +shlomiShabat.getNumOfFollowers(); +shlomiShabat.setNumOfFollowers(); + +let celebsArr:Celebs[]= [shlomiShabat, NoaKirel, hananBenAri]; + +let ishayRibo = createCeleb(); +if (ishayRibo){ + celebsArr.unshift(ishayRibo); +} + +alert(whoHasTheMostFolowers(celebsArr)); + +function whoHasTheMostFolowers(celebsArr:Celebs[]): string | false{ + try { + if (celebsArr.length==0){ + throw new Error(`there is no celebs in the list`); + } + let maxFollowers= celebsArr[0]; + for (let i=1; i< celebsArr.length; i++){ + if (maxFollowers.getNumOfFollowers() < celebsArr[i].getNumOfFollowers()){ + maxFollowers= celebsArr[i]; + } + } + return maxFollowers.name; + } catch (error) { + console.error(error); + return false; + } +} + +function createCeleb(): Celebs | false { + try { + let name; + let genre; + let accountInTiktok; + let accountInInstagram; + let numberOfFollowers; + + while (!name) { + name = prompt("What is the celeb name?"); + } + + while (!genre) { + genre = prompt("enter the genre of the celeb?"); + } + + while (!accountInTiktok) { + accountInTiktok = prompt("enter the name of the account of the celeb on Tiktok :"); + } + + while (!accountInInstagram) { + accountInInstagram = prompt("enter the name of the account of the celeb on Instagram :"); + } + + while (!numberOfFollowers || isNaN(numberOfFollowers)){ + numberOfFollowers = prompt("enter the amount of the followers of the celeb on social media :"); + numberOfFollowers= parseInt(numberOfFollowers); + } + + const celeb = new Celebs(name, genre, accountInTiktok, accountInInstagram, numberOfFollowers); + + return celeb; + } catch (error) { + console.error(error); + return false; + } + } + + diff --git a/02-TypeScript/09-classes/Home-puzzles/shai-li/app.ts b/02-TypeScript/09-classes/Home-puzzles/shai-li/app.ts new file mode 100644 index 000000000..3a84b8439 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/shai-li/app.ts @@ -0,0 +1,50 @@ +"use strict"; + +//1. create a class of celebs +//with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. + +class Celeb { + name: string; + genre: string; + tiktokAccount?: string; + instagramAccount: string; + followers: number; + + constructor( + name: string, + genre: string, + tiktokAccount: string, + instagramAccount: string, + followers: number + ) { + this.name = name; + this.genre = genre; + this.tiktokAccount = tiktokAccount; + this.instagramAccount = instagramAccount; + this.followers = followers; + } + + //2: + + setFollowers(followers: number) { + this.followers = followers; + } + + getFollowers(): number | undefined { + return this.followers; + } +} + +const noaKirel = new Celeb("Noa Kirel", "singer", "NoaK", "noakirel", 1300000); +const annazak = new Celeb("Anna Zak", "singer", "AnnaZ", "annazak", 900000); +const ninetTayeb = new Celeb("Ninet Tayeb", "singer", "", "ninettayeb", 600000); +const harelSkaat = new Celeb( + "Harel Skaat", + "singer", + "HarelS", + "harelskaat", + 400000 +); + +noaKirel.setFollowers(800); +console.log(noaKirel.getFollowers()); diff --git a/02-TypeScript/09-classes/Home-puzzles/shai-li/dist/app.js b/02-TypeScript/09-classes/Home-puzzles/shai-li/dist/app.js new file mode 100644 index 000000000..692921630 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/shai-li/dist/app.js @@ -0,0 +1,26 @@ +"use strict"; +//1. create a class of celebs +//with properties: name, genre, account in TikTok, account in Instagram, and the number of followers. +var Celeb = /** @class */ (function () { + function Celeb(name, genre, tiktokAccount, instagramAccount, followers) { + this.name = name; + this.genre = genre; + this.tiktokAccount = tiktokAccount; + this.instagramAccount = instagramAccount; + this.followers = followers; + } + //2: + Celeb.prototype.setFollowers = function (followers) { + this.followers = followers; + }; + Celeb.prototype.getFollowers = function () { + return this.followers; + }; + return Celeb; +}()); +var noaKirel = new Celeb("Noa Kirel", "singer", "NoaK", "noakirel", 1300000); +var annazak = new Celeb("Anna Zak", "singer", "AnnaZ", "annazak", 900000); +var ninetTayeb = new Celeb("Ninet Tayeb", "singer", "", "ninettayeb", 600000); +var harelSkaat = new Celeb("Harel Skaat", "singer", "HarelS", "harelskaat", 400000); +noaKirel.setFollowers(800); +console.log(noaKirel.getFollowers()); diff --git a/02-TypeScript/09-classes/Home-puzzles/shai-li/index.html b/02-TypeScript/09-classes/Home-puzzles/shai-li/index.html new file mode 100644 index 000000000..deafb963d --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/dist/index.js new file mode 100644 index 000000000..253b2bf02 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/dist/index.js @@ -0,0 +1,49 @@ +var Celeb = /** @class */ (function () { + function Celeb(name, genre, tiktokAccount, instagramAccount, numberOfFollowers) { + this.name = name; + this.genre = genre; + this.tiktokAccount = tiktokAccount; + this.instagramAccount = instagramAccount; + this.numberOfFollowers = numberOfFollowers; + } + Celeb.prototype.getFollowers = function () { + console.log(this.numberOfFollowers); + return this.numberOfFollowers; + }; + Celeb.prototype.serFollowers = function (newFolloers) { + this.numberOfFollowers = newFolloers; + console.log(this.numberOfFollowers); + }; + return Celeb; +}()); +var brad = new Celeb("Brad", "Action", 123, 456, 789); +var james = new Celeb("james", "Drama", 741, 5852, 2000000); +var bill = new Celeb("bill", "PF", 321654, 456789, 789); +var joan = new Celeb("joan", "horror", 962156, 468, 8742); +brad.getFollowers(); +brad.serFollowers(1000000); +var celebsArray = [brad, james, bill, joan]; +function sortArray(array) { + var i = 0; + var j = 0; + var newArray = []; + for (i = 0; i <= array.length - 1; i++) { + newArray[i] = array[i].numberOfFollowers; + } + var sortedArray = newArray.sort(function (a, b) { + return b - a; + }); + console.log(sortedArray); + var sortedClasses = []; + for (i = 0; i <= sortedArray.length - 1; i++) { + // console.log(i) + for (j = 0; j <= sortedArray.length - 1; j++) { + //console.log(j) + if (sortedArray[i] === array[j].numberOfFollowers) { + sortedClasses[i] = array[j]; + } + } + } + return sortedClasses; +} +console.log(sortArray(celebsArray)); diff --git a/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/index.html b/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/index.ts b/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/index.ts new file mode 100644 index 000000000..6c4e0a67f --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/shlomi.samai/Level 3/index.ts @@ -0,0 +1,67 @@ +class Celeb { + name: string; + genre: string; + tiktokAccount: number; + instagramAccount: number; + numberOfFollowers: number; + + constructor( + name: string, + genre: string, + tiktokAccount: number, + instagramAccount: number, + numberOfFollowers: number + ) { + this.name = name; + this.genre = genre; + this.tiktokAccount = tiktokAccount; + this.instagramAccount = instagramAccount; + this.numberOfFollowers = numberOfFollowers; + } + getFollowers() { + console.log(this.numberOfFollowers); + return this.numberOfFollowers; + } + serFollowers(newFolloers: number) { + this.numberOfFollowers = newFolloers; + console.log(this.numberOfFollowers); + } +} + +const brad = new Celeb("Brad", "Action", 123, 456, 789); +const james = new Celeb("james", "Drama", 741, 5852, 2000000); +const bill = new Celeb("bill", "PF", 321654, 456789, 789); +const joan = new Celeb("joan", "horror", 962156, 468, 8742); + +brad.getFollowers(); +brad.serFollowers(1000000); + +const celebsArray: Celeb[] = [brad, james, bill, joan]; + +function sortArray(array: Celeb[]): Celeb[] { + let i = 0; + let j = 0; + let newArray: number[] = []; + for (i = 0; i <= array.length - 1; i++) { + newArray[i] = array[i].numberOfFollowers; + } + const sortedArray: number[] = newArray.sort(function (a, b) { + return b - a; + }); + console.log(sortedArray); + + let sortedClasses: Celeb[] = []; + + for (i = 0; i <= sortedArray.length - 1; i++) { + // console.log(i) + for (j = 0; j <= sortedArray.length - 1; j++) { + //console.log(j) + if (sortedArray[i] === array[j].numberOfFollowers) { + sortedClasses[i] = array[j]; + } + } + } + return sortedClasses; +} + +console.log(sortArray(celebsArray)); diff --git a/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/dist/index.js new file mode 100644 index 000000000..c75dacc6e --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/dist/index.js @@ -0,0 +1,40 @@ +var Celeb = /** @class */ (function () { + function Celeb(name, genre, tiktok, insta, numberFollowers) { + this.name = name; + this.genre = genre; + this.tiktok = tiktok; + this.insta = insta; + this.numberFollowers = numberFollowers; + } + Celeb.prototype.setNumFollowers = function (number) { + return (this.numberFollowers = number); + }; + Celeb.prototype.getNumFollowers = function () { + return this.numberFollowers; + }; + return Celeb; +}()); +var kendalljenner = new Celeb("kendall jenner", "model", "kendalljenner", "kendalljenner", 269000000); +var tomer = new Celeb("Tomer", "Male", "TomerTiktok", "tomerInsta", 1000000); +var messi = new Celeb("messi", "male", "leomessi", "leomessi", 460000000); +var r9 = new Celeb("ronaldo", "male", "r9", "r9", 11000000); +console.log(tomer); +console.dir(kendalljenner); +console.dir(messi); +console.dir(r9); +var sortby = [tomer, messi, kendalljenner, r9]; +var lol = [tomer, kendalljenner, r9]; +console.log(sortby[0].numberFollowers); +function sortfollowers(arry) { + var mostfollowers = 0; + var celebrty; + for (var i = 0; i < arry.length; i++) { + if (arry[i].numberFollowers > mostfollowers) { + mostfollowers = arry[i].numberFollowers; + celebrty = arry[i].name; + } + } + return celebrty; +} +console.log(sortfollowers(sortby)); +console.log(sortfollowers(lol)); diff --git a/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/index.html b/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/index.ts b/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/index.ts new file mode 100644 index 000000000..d20bbe782 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/tomer-cohen/index.ts @@ -0,0 +1,65 @@ +class Celeb { + name: string; + genre: string; + tiktok: string; + insta: string; + numberFollowers: number; + constructor( + name: string, + genre: string, + tiktok: string, + insta: string, + numberFollowers: number + ) { + this.name = name; + this.genre = genre; + this.tiktok = tiktok; + this.insta = insta; + this.numberFollowers = numberFollowers; + } + + setNumFollowers(number: number) { + return (this.numberFollowers = number); + } + + getNumFollowers() { + return this.numberFollowers; + } +} + +const kendalljenner = new Celeb( + `kendall jenner`, + `model`, + `kendalljenner`, + `kendalljenner`, + 269000000 +); + +const tomer = new Celeb("Tomer", "Male", "TomerTiktok", "tomerInsta", 1000000); +const messi = new Celeb(`messi`, `male`, `leomessi`, `leomessi`, 460000000); +const r9 = new Celeb(`ronaldo`, `male`, `r9`, `r9`, 11000000); + +console.log(tomer); +console.dir(kendalljenner); +console.dir(messi); +console.dir(r9); + +const sortby = [tomer, messi, kendalljenner, r9]; +const lol = [tomer, kendalljenner, r9]; + +console.log(sortby[0].numberFollowers); + +function sortfollowers(arry) { + let mostfollowers = 0; + let celebrty; + for (let i = 0; i < arry.length; i++) { + if (arry[i].numberFollowers > mostfollowers) { + mostfollowers = arry[i].numberFollowers; + celebrty = arry[i].name; + } + } + return celebrty; +} + +console.log(sortfollowers(sortby)); +console.log(sortfollowers(lol)); diff --git a/02-TypeScript/09-classes/Home-puzzles/uriel bargil/dist/index.js b/02-TypeScript/09-classes/Home-puzzles/uriel bargil/dist/index.js new file mode 100644 index 000000000..100c96a80 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/uriel bargil/dist/index.js @@ -0,0 +1,17 @@ +var Influencer = /** @class */ (function () { + function Influencer(name, genre, tikTokAccount, instagramAccount, followers) { + this.name = name; + this.genre = genre; + this.tikTokAccount = tikTokAccount; + this.instagramAccount = instagramAccount; + this.followers = followers; + } + return Influencer; +}()); +var influencer1 = new Influencer('Influencer 1', 'Music', '@influencer1', '@influencer1', 1000000); +var influencer2 = new Influencer('Influencer 2', 'Fashion', '@influencer2', '@influencer2', 2000000); +console.log(influencer1.name); +console.log(influencer1.genre); +console.log(influencer1.tikTokAccount); +console.log(influencer1.instagramAccount); +console.log(influencer1.followers); diff --git a/02-TypeScript/09-classes/Home-puzzles/uriel bargil/index.html b/02-TypeScript/09-classes/Home-puzzles/uriel bargil/index.html new file mode 100644 index 000000000..0e547c5bf --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/uriel bargil/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/Home-puzzles/uriel bargil/index.ts b/02-TypeScript/09-classes/Home-puzzles/uriel bargil/index.ts new file mode 100644 index 000000000..3aa15e7c1 --- /dev/null +++ b/02-TypeScript/09-classes/Home-puzzles/uriel bargil/index.ts @@ -0,0 +1,24 @@ +class Influencer { + name: string; + genre: string; + tikTokAccount: string; + instagramAccount: string; + followers: number; + + constructor(name: string, genre: string, tikTokAccount: string, instagramAccount: string, followers: number) { + this.name = name; + this.genre = genre; + this.tikTokAccount = tikTokAccount; + this.instagramAccount = instagramAccount; + this.followers = followers; + } +} + +const influencer1 = new Influencer('Influencer 1', 'Music', '@influencer1', '@influencer1', 1000000); +const influencer2 = new Influencer('Influencer 2', 'Fashion', '@influencer2', '@influencer2', 2000000); + +console.log(influencer1.name); +console.log(influencer1.genre); +console.log(influencer1.tikTokAccount); +console.log(influencer1.instagramAccount); +console.log(influencer1.followers); \ No newline at end of file diff --git a/02-TypeScript/09-classes/example/dist/index.js b/02-TypeScript/09-classes/example/dist/index.js new file mode 100644 index 000000000..208074ed5 --- /dev/null +++ b/02-TypeScript/09-classes/example/dist/index.js @@ -0,0 +1,11 @@ +var Person = /** @class */ (function () { + //constructor + function Person(name, yearOfBirth) { + this.name = name; + this.yearOfBirth = yearOfBirth; + } + Person.prototype.age = function () { + return new Date().getFullYear() - this.yearOfBirth; + }; + return Person; +}()); diff --git a/02-TypeScript/09-classes/example/index.html b/02-TypeScript/09-classes/example/index.html new file mode 100644 index 000000000..92828ee78 --- /dev/null +++ b/02-TypeScript/09-classes/example/index.html @@ -0,0 +1,17 @@ + + + + + + + + Document + + + +

      Classes are factories to objects

      +

      Classes are a template for creating objects. They encapsulate data with code to work on that data.

      + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/example/index.ts b/02-TypeScript/09-classes/example/index.ts new file mode 100644 index 000000000..4264c71df --- /dev/null +++ b/02-TypeScript/09-classes/example/index.ts @@ -0,0 +1,50 @@ +class Person { + name: string; + yearOfBirth: number; + + //constructor + constructor(name: string, yearOfBirth: number) { + this.name = name; + this.yearOfBirth = yearOfBirth; + } + + age() { + return new Date().getFullYear() - this.yearOfBirth; + } + +// sayHello() { +// return `Hi, my name is ${this.name} and my age is ${this.age()}`; +// } +// } + +// const uriel = new Person("uriel", 1995); +// const noa = new Person("Noa", 2001); +// const ayala = new Person("Ayala", 2000); + +// function createUser(): Person | false { +// try { +// let name: string | null = null; +// let yearOfBirth: string | null = null; + +// while (!name) { +// name = prompt("What is your name?"); +// } + +// while (!yearOfBirth) { +// yearOfBirth = prompt("What is your year of birth"); +// } + +// const user = new Person(name, parseInt(yearOfBirth)); + +// return user; +// } catch (error) { +// console.error(error); +// return false; +// } +// } + +// const user = createUser(); +// console.log(user); +// if (user) { +// document.write(user.sayHello()); +} diff --git a/02-TypeScript/09-classes/followup/Room 2/dist/index.js b/02-TypeScript/09-classes/followup/Room 2/dist/index.js new file mode 100644 index 000000000..2b8af901a --- /dev/null +++ b/02-TypeScript/09-classes/followup/Room 2/dist/index.js @@ -0,0 +1,15 @@ +//create classes for video, with method which convert price from dollars to NIS +//create several video object +var Video = /** @class */ (function () { + function Video(name, price, dateOfCreation) { + this.name = name; + this.price = price; + this.dateOfCreation = dateOfCreation; + } + Video.prototype.dollarToShekel = function () { + return this.price * 3.56; + }; + return Video; +}()); +var avatar = new Video("avatar", 20, 2008); +console.log(avatar.dollarToShekel()); diff --git a/02-TypeScript/09-classes/followup/Room 2/index.html b/02-TypeScript/09-classes/followup/Room 2/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/followup/Room 2/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/Room 2/index.ts b/02-TypeScript/09-classes/followup/Room 2/index.ts new file mode 100644 index 000000000..58099b4a6 --- /dev/null +++ b/02-TypeScript/09-classes/followup/Room 2/index.ts @@ -0,0 +1,21 @@ +//create classes for video, with method which convert price from dollars to NIS +//create several video object + + +class Video { + name:string; + price:number; + dateOfCreation:number; + + +constructor (name:string , price:number , dateOfCreation:number){ +this.name = name +this.price = price +this.dateOfCreation = dateOfCreation +} +dollarToShekel () { + return this.price * 3.56; +} +} +const avatar = new Video ("avatar" , 20, 2008) +console.log(avatar.dollarToShekel()) diff --git a/02-TypeScript/09-classes/followup/aviva-elias/dist/index.js b/02-TypeScript/09-classes/followup/aviva-elias/dist/index.js new file mode 100644 index 000000000..8210db337 --- /dev/null +++ b/02-TypeScript/09-classes/followup/aviva-elias/dist/index.js @@ -0,0 +1,16 @@ +var Video = /** @class */ (function () { + function Video(movieName, price) { + this.movieName = movieName; + this.price = price; + } + Video.prototype.toNIS = function () { + return this.price * 3.45; + }; + return Video; +}()); +; +var Xman = new Video("Xman", 5); +var piterpan = new Video("piterpan", 6); +var ironman = new Video("ironman", 5); +console.log(Xman.toNIS()); +console.log(piterpan.movieName); diff --git a/02-TypeScript/09-classes/followup/aviva-elias/index.html b/02-TypeScript/09-classes/followup/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/followup/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/aviva-elias/index.ts b/02-TypeScript/09-classes/followup/aviva-elias/index.ts new file mode 100644 index 000000000..3f4e15168 --- /dev/null +++ b/02-TypeScript/09-classes/followup/aviva-elias/index.ts @@ -0,0 +1,17 @@ +class Video{ + movieName:string; + price:number; + constructor(movieName:string,price:number){ + this.movieName=movieName; + this.price=price; + } + toNIS(){ + return this.price*3.45 + } +}; + const Xman=new Video("Xman",5) + const piterpan=new Video("piterpan",6) + const ironman=new Video("ironman",5) + console.log( Xman.toNIS()) +console.log(piterpan.movieName) + \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/group3/dist/index.js b/02-TypeScript/09-classes/followup/group3/dist/index.js new file mode 100644 index 000000000..39a699729 --- /dev/null +++ b/02-TypeScript/09-classes/followup/group3/dist/index.js @@ -0,0 +1,16 @@ +var movie = /** @class */ (function () { + function movie(name, price) { + this.name = name; + this.price = price; + } + movie.prototype.priceToNIS = function () { + return this.price * 3.5; + }; + return movie; +}()); +var shrek = new movie('shrek', 10); +var ironMan = new movie('Iron Man', 7); +var tired = new movie('tired', 666); +console.log(shrek.priceToNIS()); +console.log(ironMan.priceToNIS()); +console.log(tired.priceToNIS()); diff --git a/02-TypeScript/09-classes/followup/group3/index.html b/02-TypeScript/09-classes/followup/group3/index.html new file mode 100644 index 000000000..3531e918b --- /dev/null +++ b/02-TypeScript/09-classes/followup/group3/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/group3/index.ts b/02-TypeScript/09-classes/followup/group3/index.ts new file mode 100644 index 000000000..ba5cb777a --- /dev/null +++ b/02-TypeScript/09-classes/followup/group3/index.ts @@ -0,0 +1,21 @@ +class movie { + name: string; + price: number; + + constructor (name: string, price: number) { + this.name = name; + this.price = price; + } + + priceToNIS() { + return this.price*3.5; + } +} + +const shrek = new movie('shrek', 10) +const ironMan = new movie ('Iron Man' , 7) +const tired = new movie ('tired', 666) + +console.log(shrek.priceToNIS()) +console.log(ironMan.priceToNIS()) +console.log(tired.priceToNIS()) diff --git a/02-TypeScript/09-classes/followup/instructions.md b/02-TypeScript/09-classes/followup/instructions.md new file mode 100644 index 000000000..6a7a52d2a --- /dev/null +++ b/02-TypeScript/09-classes/followup/instructions.md @@ -0,0 +1,4 @@ +create classes for video, with method which convert price from dollars to NIS +create several video object + +no \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/itayAmosi/dist/index.js b/02-TypeScript/09-classes/followup/itayAmosi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/09-classes/followup/itayAmosi/index.html b/02-TypeScript/09-classes/followup/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/09-classes/followup/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/itayAmosi/index.ts b/02-TypeScript/09-classes/followup/itayAmosi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/09-classes/followup/room4/app.ts b/02-TypeScript/09-classes/followup/room4/app.ts new file mode 100644 index 000000000..ba76087c6 --- /dev/null +++ b/02-TypeScript/09-classes/followup/room4/app.ts @@ -0,0 +1,26 @@ +class Video { + name: string; + price: number; + yearOfRelease: number; + + constructor (name: string, price: number, yearOfRelease : number = 2000) { + this.name = name; + this.price = price; + this.yearOfRelease = yearOfRelease; + } + + priceNis () { + return this.price*3.5; + } + + age () { + return new Date().getFullYear() - this.yearOfRelease; + } +} + +const jamesBond = new Video ("james", 5.8, 1985); +const lordOfTheRings = new Video ("lord of the rings", 3.5, 2005); +const matrix = new Video ("matrix", 6.2, 2021); +console.log (jamesBond.age()) +console.log (lordOfTheRings.age()); +console.log (matrix.age()) \ No newline at end of file diff --git a/02-TypeScript/09-classes/followup/room4/dist/app.js b/02-TypeScript/09-classes/followup/room4/dist/app.js new file mode 100644 index 000000000..65e955ad0 --- /dev/null +++ b/02-TypeScript/09-classes/followup/room4/dist/app.js @@ -0,0 +1,21 @@ +var Video = /** @class */ (function () { + function Video(name, price, yearOfRelease) { + if (yearOfRelease === void 0) { yearOfRelease = 2000; } + this.name = name; + this.price = price; + this.yearOfRelease = yearOfRelease; + } + Video.prototype.priceNis = function () { + return this.price * 3.5; + }; + Video.prototype.age = function () { + return new Date().getFullYear() - this.yearOfRelease; + }; + return Video; +}()); +var jamesBond = new Video("james", 5.8, 1985); +var lordOfTheRings = new Video("lord of the rings", 3.5, 2005); +var matrix = new Video("matrix", 6.2, 2021); +console.log(jamesBond.age()); +console.log(lordOfTheRings.age()); +console.log(matrix.age()); diff --git a/02-TypeScript/09-classes/followup/room4/index.html b/02-TypeScript/09-classes/followup/room4/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/09-classes/followup/room4/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/09-classes/info/info.md b/02-TypeScript/09-classes/info/info.md new file mode 100644 index 000000000..2c77c5ad7 --- /dev/null +++ b/02-TypeScript/09-classes/info/info.md @@ -0,0 +1,6 @@ +# Documentation + +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_Classes + +https://www.typescriptlang.org/docs/handbook/2/classes.html#generic-classes +https://www.w3schools.com/js/js_classes.asp diff --git a/02-TypeScript/10-arrays/Info/info.md b/02-TypeScript/10-arrays/Info/info.md new file mode 100644 index 000000000..b610c9e71 --- /dev/null +++ b/02-TypeScript/10-arrays/Info/info.md @@ -0,0 +1,3 @@ +## Documents ## + +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array \ No newline at end of file diff --git a/02-TypeScript/10-arrays/OOP-arrays/example/dist/index.js b/02-TypeScript/10-arrays/OOP-arrays/example/dist/index.js new file mode 100644 index 000000000..6d4e364df --- /dev/null +++ b/02-TypeScript/10-arrays/OOP-arrays/example/dist/index.js @@ -0,0 +1,46 @@ +var Buyer = /** @class */ (function () { + function Buyer(id, name) { + this.id = id; + this.name = name; + this.cart = []; + this.owned = []; + } + return Buyer; +}()); +var Product = /** @class */ (function () { + function Product() { + } + return Product; +}()); +var Cart = /** @class */ (function () { + function Cart(buyer) { + this.buyer = buyer; + this.created = new Date(); + } + return Cart; +}()); +var productsInStore = []; +//collections +var carts = []; //store all users that has products in a cart. +var buyers = []; +//give all the new carts from last 24 hours +var lastDay = new Date().getTime() - 24 * 60 * 60 * 1000; +var lastDayCarts = carts.filter(function (cart) { return cart.created.getTime() > lastDay; }); +//give me the cart of user with spesific ID +var id = "3423534"; +var buyerCart = carts.find(function (cart) { return cart.buyer.id === id; }); +//localstorage +var tal = new Buyer("1234", "Tal"); +buyers.push(tal); +carts.push(new Cart(tal)); +//save to local storage; +localStorage.setItem("buyers", JSON.stringify(buyers)); +localStorage.setItem("carts", JSON.stringify(carts)); +//add buyer +buyers.push(new Buyer("2334", "nikita")); +localStorage.setItem("buyers", JSON.stringify(buyers)); +var _buyers = localStorage.getItem("buyers"); +if (_buyers) { + _buyers = JSON.parse(_buyers); + console.log(_buyers); +} diff --git a/02-TypeScript/10-arrays/OOP-arrays/example/index.html b/02-TypeScript/10-arrays/OOP-arrays/example/index.html new file mode 100644 index 000000000..ea519e328 --- /dev/null +++ b/02-TypeScript/10-arrays/OOP-arrays/example/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/OOP-arrays/example/index.ts b/02-TypeScript/10-arrays/OOP-arrays/example/index.ts new file mode 100644 index 000000000..7d3f5346b --- /dev/null +++ b/02-TypeScript/10-arrays/OOP-arrays/example/index.ts @@ -0,0 +1,52 @@ +class Buyer { + cart: Product[] = []; + owned: Product[] = []; + constructor(public id: string, public name: string) {} +} + +class Product { + buyer: Buyer; +} + +class Cart { + created: Date; + update: Date; + purchsed: Date; + constructor(public buyer: Buyer) { + this.created = new Date(); + } +} + +const productsInStore: Product[] = []; + +//collections +const carts: Cart[] = []; //store all users that has products in a cart. +const buyers: Buyer[] = []; + +//give all the new carts from last 24 hours +const lastDay = new Date().getTime() - 24 * 60 * 60 * 1000; +const lastDayCarts = carts.filter((cart) => cart.created.getTime() > lastDay); + +//give me the cart of user with spesific ID +const id = "3423534"; +const buyerCart: Cart | undefined = carts.find((cart) => cart.buyer.id === id); + +//localstorage +const tal = new Buyer("1234", "Tal"); +buyers.push(tal); +carts.push(new Cart(tal)); + +//save to local storage; +localStorage.setItem("buyers", JSON.stringify(buyers)); +localStorage.setItem("carts", JSON.stringify(carts)); + +//add buyer +buyers.push(new Buyer("2334", "nikita")); + +localStorage.setItem("buyers",JSON.stringify( buyers)); + +let _buyers = localStorage.getItem("buyers"); +if (_buyers) { + _buyers = JSON.parse(_buyers); + console.log(_buyers) +} diff --git a/02-TypeScript/10-arrays/class-puzzle/Itai-G/dist/index.js b/02-TypeScript/10-arrays/class-puzzle/Itai-G/dist/index.js new file mode 100644 index 000000000..485479448 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Itai-G/dist/index.js @@ -0,0 +1,12 @@ +var Pepole = /** @class */ (function () { + function Pepole(name) { + this.name = name; + } + return Pepole; +}()); +var lior = new Pepole("lior oil"); +var ori = new Pepole("ori shyui"); +var yosi = new Pepole("yosi oriel"); +var pepole = [lior, ori, yosi, 44, 34]; +var oti = pepole.sort(); +console.log(oti); diff --git a/02-TypeScript/10-arrays/class-puzzle/Itai-G/index.html b/02-TypeScript/10-arrays/class-puzzle/Itai-G/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Itai-G/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/Itai-G/index.ts b/02-TypeScript/10-arrays/class-puzzle/Itai-G/index.ts new file mode 100644 index 000000000..6651ae8a8 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Itai-G/index.ts @@ -0,0 +1,13 @@ +class Pepole{ + constructor(private name:string){} +} + +const lior = new Pepole ("lior oil"); +const ori = new Pepole("ori shyui"); +const yosi = new Pepole("yosi oriel"); + +const pepole:any [] = [lior,ori,yosi,44,34]; + + +const oti = pepole.sort(); +console.log(oti); \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/Room 1/dist/index.js b/02-TypeScript/10-arrays/class-puzzle/Room 1/dist/index.js new file mode 100644 index 000000000..6ed9a0de8 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Room 1/dist/index.js @@ -0,0 +1,32 @@ +// class Devs { +// constructor (private salary:number , private profession:string){ +// } +// setSalary(number:number){this.salary = number} +// setProfession(type:string){this.profession = type} +// getprofession () {return this.profession} +// getsalary(){return this.salary} +// } +// const arryOfDevs:Devs[] = [] +// const logTenDevs = () => { +// for (let i = 0; arryOfDevs.length < 3; i++){ +// const salary = prompt (`whats your salary?`); +// const typeOfPro = prompt (`what is your profession? (full-stack/devops/qa)`); +// if (salary !== null && typeOfPro !== null){ +// const newDev = new Devs(parseInt(salary),typeOfPro); +// arryOfDevs.push(newDev); +// console.log(arryOfDevs) +// } +// } +// } +// logTenDevs() +// console.log(arryOfDevs) +// const avrgDevSalary = () => { +// const arryQa = arryOfDevs.filter(dev => dev.getprofession() == "qa").map(a => a.getsalary()).reduce( +// (accumulator, currentValue) => accumulator + currentValue, +// 0,); +// const arryFs = arryOfDevs.filter(dev => dev.getprofession() == "full-stack") +// const arryDo = arryOfDevs.filter(dev => dev.getprofession() == "devops") +// } +// 1) create array of Persons. each person has an age. calculate the average age in the array. +// 2) create an array of 10 devlopers. ask each devloper with prompt, what is her salary, and her perofession +// (full-stack, devops, qa) (with prompt). then, calculate the average of each perofession diff --git a/02-TypeScript/10-arrays/class-puzzle/Room 1/index.html b/02-TypeScript/10-arrays/class-puzzle/Room 1/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Room 1/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/Room 1/index.ts b/02-TypeScript/10-arrays/class-puzzle/Room 1/index.ts new file mode 100644 index 000000000..684ec4348 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Room 1/index.ts @@ -0,0 +1,38 @@ +// class Devs { +// constructor (private salary:number , private profession:string){ +// } +// setSalary(number:number){this.salary = number} +// setProfession(type:string){this.profession = type} +// getprofession () {return this.profession} +// getsalary(){return this.salary} +// } +// const arryOfDevs:Devs[] = [] +// const logTenDevs = () => { +// for (let i = 0; arryOfDevs.length < 3; i++){ +// const salary = prompt (`whats your salary?`); +// const typeOfPro = prompt (`what is your profession? (full-stack/devops/qa)`); +// if (salary !== null && typeOfPro !== null){ +// const newDev = new Devs(parseInt(salary),typeOfPro); +// arryOfDevs.push(newDev); +// console.log(arryOfDevs) +// } +// } +// } +// logTenDevs() +// console.log(arryOfDevs) + +// const avrgDevSalary = () => { +// const arryQa = arryOfDevs.filter(dev => dev.getprofession() == "qa").map(a => a.getsalary()).reduce( +// (accumulator, currentValue) => accumulator + currentValue, +// 0,); +// const arryFs = arryOfDevs.filter(dev => dev.getprofession() == "full-stack") +// const arryDo = arryOfDevs.filter(dev => dev.getprofession() == "devops") + +// } + +// 1) create array of Persons. each person has an age. calculate the average age in the array. +// 2) create an array of 10 devlopers. ask each devloper with prompt, what is her salary, and her perofession +// (full-stack, devops, qa) (with prompt). then, calculate the average of each perofession + + + diff --git a/02-TypeScript/10-arrays/class-puzzle/Room 3/dist/index.js b/02-TypeScript/10-arrays/class-puzzle/Room 3/dist/index.js new file mode 100644 index 000000000..7acdf2a99 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Room 3/dist/index.js @@ -0,0 +1,77 @@ +var Developers = /** @class */ (function () { + function Developers(name, salary, profession) { + this.name = name; + this.salary = salary; + this.profession = profession; + } + return Developers; +}()); +function pushToArray() { + var devsArray = []; + while (devsArray.length < 6) { + var name = prompt("Please enter your name"); + var slaraySTR = prompt("Please enter your salaray"); + var profession = prompt("Please enter your Profession"); + if (name && slaraySTR && profession) { + var slaray = parseInt(slaraySTR); + var dev = new Developers(name, slaray, profession); + devsArray.push(dev); + } + } + var allFullStackDevs = devsArray.filter(function (dev) { return dev.profession == "full-stack"; }); + var devopsDevs = devsArray.filter(function (dev) { return dev.profession == "devops"; }); + var qaDevs = devsArray.filter(function (dev) { return dev.profession == "qa"; }); + function devsAvg(arr) { + var sum = 0; + for (var i = 0; i < arr.length; i++) { + sum += arr[i].salary; + } + return sum / arr.length; + } + var fullStackAvg = devsAvg(allFullStackDevs); + var devopsAvg = devsAvg(devopsDevs); + var qaAvg = devsAvg(qaDevs); + console.log("The average Salary of Full-stack: " + fullStackAvg + ", devops: " + devopsAvg + ", qa: " + qaAvg); +} +pushToArray(); +// class Developers { +// constructor(public name:string, public salary:number, public profession:string){} +// } +// function pushToArray(){ +// const devsArray:Array = []; +// while (devsArray.length < 6){ +// let name = prompt("Please enter your name") +// let slaraySTR:string | null= prompt("Please enter your salaray") +// let profession = prompt("Please enter your Profession") +// if (name && slaraySTR && profession){ +// let slaray = parseInt(slaraySTR); +// const dev = new Developers(name,slaray,profession) +// devsArray.push(dev) +// } +// } +// let fullStackSum:number = 0; +// let devopsSum:number = 0; +// let qaSum:number = 0; +// let fullStackIndex:number = 0; +// let devopsIndex:number = 0; +// let qaIndex:number = 0; +// devsArray.forEach(dev => { +// if (dev.profession === "full-stack"){ +// fullStackSum += dev.salary; +// fullStackIndex++; +// } +// if (dev.profession === "devops"){ +// devopsSum += dev.salary; +// devopsIndex++; +// } +// if (dev.profession === "qa"){ +// qaSum += dev.salary; +// qaIndex++; +// } +// }) +// const fullStackAvg = fullStackSum/fullStackIndex; +// const devopsAvg = devopsSum/devopsIndex; +// const qaAvg = qaSum/qaIndex; +// console.log(`The average Salary of Full-stack: ${fullStackAvg}, devops: ${devopsAvg}, qa: ${qaAvg}`); +// } +// pushToArray(); diff --git a/02-TypeScript/10-arrays/class-puzzle/Room 3/index.html b/02-TypeScript/10-arrays/class-puzzle/Room 3/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Room 3/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/Room 3/index.ts b/02-TypeScript/10-arrays/class-puzzle/Room 3/index.ts new file mode 100644 index 000000000..3070ae5a8 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/Room 3/index.ts @@ -0,0 +1,104 @@ +class Developers { + constructor(public name:string, public salary:number, public profession:string){} +} + + +function pushToArray(){ + const devsArray:Array = []; + while (devsArray.length < 6){ + + let name = prompt("Please enter your name") + let slaraySTR:string | null= prompt("Please enter your salaray") + let profession = prompt("Please enter your Profession") + + if (name && slaraySTR && profession){ + let slaray = parseInt(slaraySTR); + const dev = new Developers(name,slaray,profession) + devsArray.push(dev) + } + } + + const allFullStackDevs: Developers[] = devsArray.filter(dev => dev.profession == "full-stack"); + const devopsDevs: Developers[] = devsArray.filter(dev => dev.profession == "devops"); + const qaDevs: Developers[] = devsArray.filter(dev => dev.profession == "qa"); + + function devsAvg(arr:Array){ + let sum:number = 0; + + for (let i = 0 ; i = []; +// while (devsArray.length < 6){ + +// let name = prompt("Please enter your name") +// let slaraySTR:string | null= prompt("Please enter your salaray") +// let profession = prompt("Please enter your Profession") + +// if (name && slaraySTR && profession){ +// let slaray = parseInt(slaraySTR); +// const dev = new Developers(name,slaray,profession) +// devsArray.push(dev) +// } +// } +// let fullStackSum:number = 0; +// let devopsSum:number = 0; +// let qaSum:number = 0; +// let fullStackIndex:number = 0; +// let devopsIndex:number = 0; +// let qaIndex:number = 0; + +// devsArray.forEach(dev => { +// if (dev.profession === "full-stack"){ +// fullStackSum += dev.salary; +// fullStackIndex++; +// } +// if (dev.profession === "devops"){ +// devopsSum += dev.salary; +// devopsIndex++; +// } +// if (dev.profession === "qa"){ +// qaSum += dev.salary; +// qaIndex++; +// } +// }) +// const fullStackAvg = fullStackSum/fullStackIndex; +// const devopsAvg = devopsSum/devopsIndex; +// const qaAvg = qaSum/qaIndex; + + + +// console.log(`The average Salary of Full-stack: ${fullStackAvg}, devops: ${devopsAvg}, qa: ${qaAvg}`); +// } + +// pushToArray(); + + + + + + + + diff --git a/02-TypeScript/10-arrays/class-puzzle/instructions.md b/02-TypeScript/10-arrays/class-puzzle/instructions.md new file mode 100644 index 000000000..a2501f4f3 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/instructions.md @@ -0,0 +1,2 @@ +1) create array of Persons. each person has an age. calculate the average age in the array. +2) create an array of 10 devlopers. ask each devloper with prompt, what is her salary, and her perofession (full-stack, devops, qa) (with prompt). then, calculate the average of each perofession \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/itayAmosi/dist/index.js b/02-TypeScript/10-arrays/class-puzzle/itayAmosi/dist/index.js new file mode 100644 index 000000000..ac9d797dd --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/itayAmosi/dist/index.js @@ -0,0 +1,30 @@ +var Devlopers = /** @class */ (function () { + function Devlopers(salary, perofession) { + this.salary = salary; + this.perofession = perofession; + } + return Devlopers; +}()); +var avg = 0; +for (var i = 0; i < 2; i++) { + var salary = prompt("enster ur salary:"); + var perofession = prompt("what profession are you? "); + console.log(perofession, "--", salary); + if (salary && perofession) { + var devloper = new Devlopers(parseInt(salary), perofession); + console.log(devloper); + } + var salarys = []; + if (salary) { + salarys[i] = parseInt(salary); + } + var perofessions = []; + if (perofession) { + perofessions[i] == perofession; + } + avg += salarys[i]; + avg = avg / salarys.length; + // const average = salarys.reduce((a, b) => a + b, 0) / salarys.length + // console.log(`average`,average) +} +console.log(avg); diff --git a/02-TypeScript/10-arrays/class-puzzle/itayAmosi/index.html b/02-TypeScript/10-arrays/class-puzzle/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/itayAmosi/index.ts b/02-TypeScript/10-arrays/class-puzzle/itayAmosi/index.ts new file mode 100644 index 000000000..f3bae7ce8 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/itayAmosi/index.ts @@ -0,0 +1,36 @@ +class Devlopers { + constructor(public salary: number, public perofession: string) {} +} +let avg:number =0; +for (let i = 0; i < 2; i++) { + const salary = prompt(`enster ur salary:`) + const perofession = prompt(`what profession are you? `) + console.log(perofession, `--`, salary) + if (salary && perofession) { + const devloper = new Devlopers(parseInt(salary), perofession) + console.log(devloper) + } + const salarys: number[] = [] + if (salary) { + salarys[i] = parseInt(salary) + } + + const perofessions: string[] = [] + if (perofession) { + perofessions[i] == perofession + } + +avg += salarys[i]; +avg=avg/salarys.length; + + +// const average = salarys.reduce((a, b) => a + b, 0) / salarys.length +// console.log(`average`,average) +} + + +console.log(avg); + + + + diff --git a/02-TypeScript/10-arrays/class-puzzle/noa-meillet/dist/index.js b/02-TypeScript/10-arrays/class-puzzle/noa-meillet/dist/index.js new file mode 100644 index 000000000..a61848b37 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/noa-meillet/dist/index.js @@ -0,0 +1,75 @@ +/* +1) create array of Persons. each person has an age. calculate the average age in the array. +2) create an array of 10 devlopers. ask each devloper with prompt, what is her salary, and her perofession (full-stack, devops, qa) (with prompt). then, calculate the average of each perofession */ +var Developer = /** @class */ (function () { + function Developer(name, profession, salary) { + this.name = name; + this.profession = profession; + this.salary = salary; + } + return Developer; +}()); +var noa = new Developer("Noa"); +var amit = new Developer("Amit"); +var uriel = new Developer("Uriel"); +var tomer = new Developer("Tomer"); +var dan = new Developer("Dan"); +var ruth = new Developer("Ruth"); +var noam = new Developer("Noam"); +var shira = new Developer("Shira"); +var daniel = new Developer("Daniel"); +var gershon = new Developer("Gershon"); +var developersArr = [ + noa, + amit, + uriel, + tomer, + dan, + ruth, + noam, + shira, + daniel, + gershon, +]; +console.log(developersArr.length); +getProfessionAndSalary(developersArr); +console.log(developersArr); +salaryAverage(developersArr); +function getProfessionAndSalary(developersArr) { + try { + var getFromUser = void 0; + for (var i = 0; i < developersArr.length; i++) { + while (!getFromUser) { + getFromUser = prompt(developersArr[i].name + " enter your profession:"); + } + developersArr[i].profession = getFromUser; + getFromUser = null; + while (!getFromUser) { + getFromUser = prompt(developersArr[i].name + " enter your salary:"); + } + developersArr[i].salary = parseInt(getFromUser); + getFromUser = null; + } + } + catch (error) { + console.error(error); + return error; + } +} +function salaryAverage(developersArr) { + try { + var fullstackDevelopers = developersArr.filter(function (developer) { return developer.profession === "fullstack"; }); + var sumFS = fullstackDevelopers.reduce(function (sum, current) { return sum + current.salary; }, 0); + console.log("the average salary of fullstack developper is " + sumFS / fullstackDevelopers.length); + var qaDevelopers = developersArr.filter(function (developer) { return developer.profession === "qa"; }); + var sumQA = qaDevelopers.reduce(function (sum, current) { return sum + current.salary; }, 0); + console.log("the average salary of qa developper is " + sumQA / qaDevelopers.length); + var devopsDevelopers = developersArr.filter(function (developer) { return developer.profession === "devops"; }); + var sumDevops = devopsDevelopers.reduce(function (sum, current) { return sum + current.salary; }, 0); + console.log("the average salary of devops developper is " + sumDevops / devopsDevelopers.length); + } + catch (error) { + console.error(error); + return error; + } +} diff --git a/02-TypeScript/10-arrays/class-puzzle/noa-meillet/index.html b/02-TypeScript/10-arrays/class-puzzle/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/noa-meillet/index.ts b/02-TypeScript/10-arrays/class-puzzle/noa-meillet/index.ts new file mode 100644 index 000000000..dc4a777d1 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/noa-meillet/index.ts @@ -0,0 +1,82 @@ +/* +1) create array of Persons. each person has an age. calculate the average age in the array. +2) create an array of 10 devlopers. ask each devloper with prompt, what is her salary, and her perofession (full-stack, devops, qa) (with prompt). then, calculate the average of each perofession */ + +class Developer { + public constructor( + public name: string, + public profession?: string, + public salary?: number + ) {} +} + +const noa = new Developer("Noa"); +const amit = new Developer("Amit"); +const uriel = new Developer("Uriel"); +const tomer = new Developer("Tomer"); +const dan = new Developer("Dan"); +const ruth = new Developer("Ruth"); +const noam = new Developer("Noam"); +const shira = new Developer("Shira"); +const daniel = new Developer("Daniel"); +const gershon = new Developer("Gershon"); + +const developersArr: Developer[] = [ + noa, + amit, + uriel, + tomer, + dan, + ruth, + noam, + shira, + daniel, + gershon, +]; +console.log(developersArr.length); +getProfessionAndSalary(developersArr); +console.log(developersArr); +salaryAverage(developersArr); + +function getProfessionAndSalary(developersArr: Developer[]) { + try { + let getFromUser; + for (let i = 0; i < developersArr.length; i++) { + while (!getFromUser) { + getFromUser = prompt(`${developersArr[i].name} enter your profession:`); + } + developersArr[i].profession = getFromUser; + getFromUser=null; + while (!getFromUser) { + getFromUser = prompt(`${developersArr[i].name} enter your salary:`); + } + developersArr[i].salary = parseInt(getFromUser); + getFromUser=null; + } + } catch (error) { + console.error(error); + return error; + } +} + +function salaryAverage (developersArr:Developer[]){ + try { + const fullstackDevelopers = developersArr.filter(developer => developer.profession === "fullstack"); + const sumFS = fullstackDevelopers.reduce((sum, current) => sum + current.salary, 0); + console.log (`the average salary of fullstack developper is ${sumFS/fullstackDevelopers.length}`); + + const qaDevelopers = developersArr.filter(developer => developer.profession === "qa"); + const sumQA = qaDevelopers.reduce((sum, current) => sum + current.salary, 0); + console.log (`the average salary of qa developper is ${sumQA/qaDevelopers.length}`); + + const devopsDevelopers = developersArr.filter(developer => developer.profession === "devops"); + const sumDevops = devopsDevelopers.reduce((sum, current) => sum + current.salary, 0); + console.log (`the average salary of devops developper is ${sumDevops/devopsDevelopers.length}`); + + } catch (error) { + console.error(error); + return error; + } +} + + diff --git a/02-TypeScript/10-arrays/class-puzzle/room-5/dist/index.js b/02-TypeScript/10-arrays/class-puzzle/room-5/dist/index.js new file mode 100644 index 000000000..2263c6b8c --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/room-5/dist/index.js @@ -0,0 +1,88 @@ +var proffession; +(function (proffession) { + proffession["FULL_STACK"] = "FULL_STACK"; + proffession["BACK_END"] = "Back-End"; + proffession["FRONT_END"] = "FRONT_END"; +})(proffession || (proffession = {})); +var developers = [ + { + name: "Gili", + age: 24, + salary: 34000, + profession: "FULL_STACK" + }, + { + name: "Shahar", + age: 23, + salary: 40000, + profession: "FULL_STACK" + }, + { + name: "Tal", + age: 30, + salary: 44000, + profession: "FRONT_END" + }, + { + name: "Bill", + age: 80, + salary: 100000, + profession: "BACK_END" + }, + { + name: "Amit", + age: 22, + salary: 20000, + profession: "FRONT_END" + }, + { + name: "Katia", + age: 35, + salary: 29000, + profession: "BACK_END" + }, + { + name: "Omer", + age: 28, + salary: 36000, + profession: "FULL_STACK" + }, + { + name: "Muhammad", + age: 25, + salary: 11000, + profession: "FULL_STACK" + }, + { + name: "Ovad", + age: 37, + salary: 39000, + profession: "BACK_END" + }, + { + name: "Alex", + age: 20, + salary: 12000, + profession: "FRONT_END" + }, +]; +var avgSalaryPerProffesion = function (developers) { + var salaryMap = new Map(); + developers.forEach(function (element) { + if (salaryMap.has(element.profession)) { + var value = salaryMap.get(element.profession); + value.amount++; + value.sum += element.salary; + value.avg = value.sum / value.amount; + } + else { + salaryMap.set(element.profession, { + amount: 1, + sum: element.salary, + avg: element.salary + }); + } + }); + console.log(salaryMap); +}; +avgSalaryPerProffesion(developers); diff --git a/02-TypeScript/10-arrays/class-puzzle/room-5/index.html b/02-TypeScript/10-arrays/class-puzzle/room-5/index.html new file mode 100644 index 000000000..8d2ce10bf --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/room-5/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/room-5/index.ts b/02-TypeScript/10-arrays/class-puzzle/room-5/index.ts new file mode 100644 index 000000000..1ded8cf94 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/room-5/index.ts @@ -0,0 +1,105 @@ +enum proffession { + FULL_STACK = "FULL_STACK", + BACK_END = "Back-End", + FRONT_END = "FRONT_END", +} + +type PROFFESSION_LITERALS = keyof typeof proffession; + +interface IDevelopers { + name: string; + age: number; + salary: number; + profession: PROFFESSION_LITERALS; +} + +const developers: IDevelopers[] = [ + { + name: "Gili", + age: 24, + salary: 34000, + profession: "FULL_STACK", + }, + { + name: "Shahar", + age: 23, + salary: 40000, + profession: "FULL_STACK", + }, + { + name: "Tal", + age: 30, + salary: 44000, + profession: "FRONT_END", + }, + { + name: "Bill", + age: 80, + salary: 100000, + profession: "BACK_END", + }, + { + name: "Amit", + age: 22, + salary: 20000, + profession: "FRONT_END", + }, + { + name: "Katia", + age: 35, + salary: 29000, + profession: "BACK_END", + }, + { + name: "Omer", + age: 28, + salary: 36000, + profession: "FULL_STACK", + }, + { + name: "Muhammad", + age: 25, + salary: 11000, + profession: "FULL_STACK", + }, + { + name: "Ovad", + age: 37, + salary: 39000, + profession: "BACK_END", + }, + { + name: "Alex", + age: 20, + salary: 12000, + profession: "FRONT_END", + }, +]; + +interface ISalaryPerProffession { + amount: number; + sum: number; + avg: number; +} + +const avgSalaryPerProffesion = (developers: IDevelopers[]) => { + let salaryMap = new Map(); + + developers.forEach((element) => { + if (salaryMap.has(element.profession)) { + let value = salaryMap.get(element.profession)!; + value.amount++; + value.sum += element.salary; + value.avg = value.sum / value.amount; + } else { + salaryMap.set(element.profession, { + amount: 1, + sum: element.salary, + avg: element.salary, + }); + } + }); + console.log(salaryMap); +}; + +avgSalaryPerProffesion(developers); diff --git a/02-TypeScript/10-arrays/class-puzzle/room6/arr.html b/02-TypeScript/10-arrays/class-puzzle/room6/arr.html new file mode 100644 index 000000000..05adfe747 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/room6/arr.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/room6/arr.ts b/02-TypeScript/10-arrays/class-puzzle/room6/arr.ts new file mode 100644 index 000000000..6dcdedb1d --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/room6/arr.ts @@ -0,0 +1,58 @@ +// level 1 + +class people{ + public constructor(public name:string,public age:number){} +} +const ayala = new people('ayala',37); +const shlomi =new people ('shlomi',35); +const angela = new people('angela',21); +const tal = new people('tal',52); +const moshe = new people('moshe',78); + +const avrg:people[]=[ayala,shlomi,angela,tal,moshe]; + +const averageAge= avrg.reduce((a,b)=> a + b.age,0 )/avrg.length; +console.log(`the average age is ${averageAge}`); + +// level 2 + +class Devlopers{ + public constructor(public salary:number,public jobTitle:string){} +} +const per1 = new Devlopers(10000, "qa"); +const per2 = new Devlopers(17000,"senior devloper"); +const per3 = new Devlopers(9700,"IT") + +const allDevlopers:Devlopers[]=[per1,per2,per3] + +function input ():Devlopers | false{ + try { + let i = 0 + while(i <=10){ + const userJob = prompt("what is your job title?"); + const userSalary = prompt("what is your salary?"); + const pushInput = allDevlopers[i].salary; + i++ + + } + return + } catch (error) { + console.error(error); + return false; + } +} + +console.log(input()) + + +// const animals = ['pigs', 'goats', 'sheep']; + +// const count = animals.push('cows'); +// console.log(count); +// // expected output: 4 +// console.log(animals); +// // expected output: Array ["pigs", "goats", "sheep", "cows"] + +// animals.push('chickens', 'cats', 'dogs'); +// console.log(animals); +// // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"] \ No newline at end of file diff --git a/02-TypeScript/10-arrays/class-puzzle/room6/dist/arr.js b/02-TypeScript/10-arrays/class-puzzle/room6/dist/arr.js new file mode 100644 index 000000000..949579491 --- /dev/null +++ b/02-TypeScript/10-arrays/class-puzzle/room6/dist/arr.js @@ -0,0 +1,54 @@ +// level 1 +var people = /** @class */ (function () { + function people(name, age) { + this.name = name; + this.age = age; + } + return people; +}()); +var ayala = new people('ayala', 37); +var shlomi = new people('shlomi', 35); +var angela = new people('angela', 21); +var tal = new people('tal', 52); +var moshe = new people('moshe', 78); +var avrg = [ayala, shlomi, angela, tal, moshe]; +var averageAge = avrg.reduce(function (a, b) { return a + b.age; }, 0) / avrg.length; +console.log("the average age is " + averageAge); +// level 2 +var Devlopers = /** @class */ (function () { + function Devlopers(salary, jobTitle) { + this.salary = salary; + this.jobTitle = jobTitle; + } + return Devlopers; +}()); +var per1 = new Devlopers(10000, "qa"); +var per2 = new Devlopers(17000, "senior devloper"); +var per3 = new Devlopers(9700, "IT"); +var allDevlopers = [per1, per2, per3]; +function input() { + try { + var i = 0; + while (i <= 10) { + var userJob = prompt("what is your job title?"); + var userSalary = prompt("what is your salary?"); + var pushInput = allDevlopers[i].salary; + i++; + } + return; + } + catch (error) { + console.error(error); + return false; + } +} +console.log(input()); +// const animals = ['pigs', 'goats', 'sheep']; +// const count = animals.push('cows'); +// console.log(count); +// // expected output: 4 +// console.log(animals); +// // expected output: Array ["pigs", "goats", "sheep", "cows"] +// animals.push('chickens', 'cats', 'dogs'); +// console.log(animals); +// // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"] diff --git a/02-TypeScript/10-arrays/example/dist/index.js b/02-TypeScript/10-arrays/example/dist/index.js new file mode 100644 index 000000000..5744202bb --- /dev/null +++ b/02-TypeScript/10-arrays/example/dist/index.js @@ -0,0 +1,31 @@ +var Person = /** @class */ (function () { + function Person(name, age, gender) { + this.name = name; + this.age = age; + this.gender = gender; + } + return Person; +}()); +var noam = new Person("noam", 33, "male"); +var ruth = new Person("Ruth", 27, "female"); +var dan = new Person("Dan", 14, "male"); +/// we use lists to hold togther many elements +var persons = [noam, ruth, dan]; +console.log(persons); +console.log(persons[1]); +// console.log(persons.length); +//sort +// persons.sort((a, b) => a.age - b.age); +console.log(persons); +//filter +var personsAbove30 = persons.filter(function (person) { return person.age; }); +console.log(personsAbove30); +// //callback +// function logPerson(person: Person) { +// console.log(person.name, person.age); +// } +// persons.forEach(logPerson); +// persons.forEach(function (person: Person) { +// console.log(person.name, person.age); +// }); +// console.log(persons.filter((person) => person.gender === "female")); diff --git a/02-TypeScript/10-arrays/example/index.html b/02-TypeScript/10-arrays/example/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/example/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/example/index.ts b/02-TypeScript/10-arrays/example/index.ts new file mode 100644 index 000000000..4dbcc4bd8 --- /dev/null +++ b/02-TypeScript/10-arrays/example/index.ts @@ -0,0 +1,33 @@ +class Person { + constructor(public name: string, public age: number, public gender: string) {} +} + +const noam = new Person("noam", 33, "male"); +const ruth = new Person("Ruth", 27, "female"); +const dan = new Person("Dan", 14, "male"); +/// we use lists to hold togther many elements +const persons: Person[] = [noam, ruth, dan]; +console.log(persons); +console.log(persons[1]); + +// console.log(persons.length); +//sort +// persons.sort((a, b) => a.age - b.age); + +console.log(persons); +//filter +const personsAbove30: Person[] = persons.filter((person) => person.age); +console.log(personsAbove30); + +// //callback +// function logPerson(person: Person) { +// console.log(person.name, person.age); +// } + +// persons.forEach(logPerson); + +// persons.forEach(function (person: Person) { +// console.log(person.name, person.age); +// }); + +// console.log(persons.filter((person) => person.gender === "female")); diff --git a/02-TypeScript/10-arrays/followups/Ayala/dist/index.js b/02-TypeScript/10-arrays/followups/Ayala/dist/index.js new file mode 100644 index 000000000..50f8f43ca --- /dev/null +++ b/02-TypeScript/10-arrays/followups/Ayala/dist/index.js @@ -0,0 +1,11 @@ +var Person = /** @class */ (function () { + function Person(name) { + this.name = name; + } + return Person; +}()); +var david = new Person("david"); +var uri = new Person("uri"); +var persons = [david, uri]; +console.log(persons); +console.log(persons[1]); diff --git a/02-TypeScript/10-arrays/followups/Ayala/index.html b/02-TypeScript/10-arrays/followups/Ayala/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/followups/Ayala/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/Ayala/index.ts b/02-TypeScript/10-arrays/followups/Ayala/index.ts new file mode 100644 index 000000000..e38952c63 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/Ayala/index.ts @@ -0,0 +1,13 @@ + + +class Person{ + constructor(private name:string){} +} + +const david = new Person("david"); +const uri = new Person("uri"); + +const persons :Person[] =[david,uri] +console.log(persons) +console.log(persons[1]) + diff --git a/02-TypeScript/10-arrays/followups/Karin-levi/dist/index.js b/02-TypeScript/10-arrays/followups/Karin-levi/dist/index.js new file mode 100644 index 000000000..f09113bf1 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/Karin-levi/dist/index.js @@ -0,0 +1,12 @@ +var Person = /** @class */ (function () { + function Person(name) { + this.name = name; + } + return Person; +}()); +var noam = new Person("noam"); +var ruth = new Person("Ruth"); +var dan = new Person("Dan"); +var persons = [noam, ruth, dan]; +console.log(persons); +console.log(persons[-1]); diff --git a/02-TypeScript/10-arrays/followups/Karin-levi/index.html b/02-TypeScript/10-arrays/followups/Karin-levi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/followups/Karin-levi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/Karin-levi/index.ts b/02-TypeScript/10-arrays/followups/Karin-levi/index.ts new file mode 100644 index 000000000..ce77cd3ca --- /dev/null +++ b/02-TypeScript/10-arrays/followups/Karin-levi/index.ts @@ -0,0 +1,13 @@ +class Person{ + constructor(private name:string){} +} + + +const noam = new Person("noam"); +const ruth = new Person("Ruth"); +const dan = new Person("Dan"); + + +const persons:Person[] = [noam,ruth,dan]; +console.log(persons) +console.log(persons[-1]) diff --git a/02-TypeScript/10-arrays/followups/amit/dist/index.js b/02-TypeScript/10-arrays/followups/amit/dist/index.js new file mode 100644 index 000000000..dd19b44af --- /dev/null +++ b/02-TypeScript/10-arrays/followups/amit/dist/index.js @@ -0,0 +1,18 @@ +var Color = /** @class */ (function () { + function Color(name) { + this.name = name; + } + return Color; +}()); +var yellow = new Color("yellow"); +var blue = new Color("blue"); +var white = new Color("white"); +var red = new Color("red"); +var pink = new Color("pink"); +var purple = new Color("purple"); +var green = new Color("green"); +var black = new Color("black"); +var colorsArray = [yellow, blue, white, red, pink, purple, green, black]; +console.log("the length of the array is " + colorsArray.length); +console.log("in number 0 of the array we have " + colorsArray[0].name); +console.log("in number 0 of the array we have " + colorsArray[-1]); diff --git a/02-TypeScript/10-arrays/followups/amit/index.html b/02-TypeScript/10-arrays/followups/amit/index.html new file mode 100644 index 000000000..aea9610f0 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/amit/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/amit/index.ts b/02-TypeScript/10-arrays/followups/amit/index.ts new file mode 100644 index 000000000..8673aea79 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/amit/index.ts @@ -0,0 +1,18 @@ +class Color { + public constructor(public name: string) { } +} + +const yellow = new Color("yellow"); +const blue = new Color("blue"); +const white = new Color("white"); +const red = new Color("red"); +const pink = new Color("pink"); +const purple = new Color("purple"); +const green = new Color("green"); +const black = new Color("black"); + +const colorsArray: Color[] = [yellow, blue, white, red, pink, purple, green, black]; + +console.log(`the length of the array is ${colorsArray.length}`); +console.log(`in number 0 of the array we have ${colorsArray[0].name}`); +console.log(`in number 0 of the array we have ${colorsArray[-1]}`); diff --git a/02-TypeScript/10-arrays/followups/angela/arr.html b/02-TypeScript/10-arrays/followups/angela/arr.html new file mode 100644 index 000000000..05adfe747 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/angela/arr.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/angela/arr.ts b/02-TypeScript/10-arrays/followups/angela/arr.ts new file mode 100644 index 000000000..8ded135fe --- /dev/null +++ b/02-TypeScript/10-arrays/followups/angela/arr.ts @@ -0,0 +1,15 @@ +class people{ + public constructor(public name:string,public age:number, public gender:string){} +} +const luna = new people ('luna', 21,'female'); +const mike = new people ('mike',30,'male'); +const bob = new people ('bob',14,'male'); + +const arr:people[]=[luna,mike,bob]; +arr.sort((a,b)=> a.age - b.age); +console.log(arr) +// filter op1 +const gender:people[] = arr.filter((people)=>people.gender === "male"); +console.log(gender) +// filter op2 -- without a variable-- +console.log(arr.filter((people)=>people.gender === "female")) \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/angela/dist/arr.js b/02-TypeScript/10-arrays/followups/angela/dist/arr.js new file mode 100644 index 000000000..91f93312d --- /dev/null +++ b/02-TypeScript/10-arrays/followups/angela/dist/arr.js @@ -0,0 +1,19 @@ +var people = /** @class */ (function () { + function people(name, age, gender) { + this.name = name; + this.age = age; + this.gender = gender; + } + return people; +}()); +var luna = new people('luna', 21, 'female'); +var mike = new people('mike', 30, 'male'); +var bob = new people('bob', 14, 'male'); +var arr = [luna, mike, bob]; +arr.sort(function (a, b) { return a.age - b.age; }); +console.log(arr); +// filter op1 +var gender = arr.filter(function (people) { return people.gender === "male"; }); +console.log(gender); +// filter op2 -- without a variable-- +console.log(arr.filter(function (people) { return people.gender === "female"; })); diff --git a/02-TypeScript/10-arrays/followups/itayAmosi/dist/index.js b/02-TypeScript/10-arrays/followups/itayAmosi/dist/index.js new file mode 100644 index 000000000..77e9f5af8 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/itayAmosi/dist/index.js @@ -0,0 +1,12 @@ +var Person = /** @class */ (function () { + function Person(name) { + this.name = name; + } + return Person; +}()); +var moshe = new Person("Moshe"); +var david = new Person("David"); +var yoda = new Person("Yoda"); +var people = [moshe, david, yoda]; +console.log(people); +console.log(people[1]); diff --git a/02-TypeScript/10-arrays/followups/itayAmosi/index.html b/02-TypeScript/10-arrays/followups/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/followups/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/itayAmosi/index.ts b/02-TypeScript/10-arrays/followups/itayAmosi/index.ts new file mode 100644 index 000000000..5cb176426 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/itayAmosi/index.ts @@ -0,0 +1,12 @@ +class Person{ + constructor(private name:string){} +} + + +const moshe = new Person("Moshe"); +const david = new Person("David"); +const yoda = new Person("Yoda"); + +const people:Person[] = [moshe,david,yoda]; +console.log(people); +console.log(people[1]); \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/noa-meillet/dist/index.js b/02-TypeScript/10-arrays/followups/noa-meillet/dist/index.js new file mode 100644 index 000000000..2e6acde8f --- /dev/null +++ b/02-TypeScript/10-arrays/followups/noa-meillet/dist/index.js @@ -0,0 +1,61 @@ +var Celebs = /** @class */ (function () { + function Celebs(name, genre, accountInTiktok, accountInInstagram, numberOfFollowers) { + this.name = name; + this.genre = genre; + this.accountInTiktok = accountInTiktok; + this.accountInInstagram = accountInInstagram; + this.numberOfFollowers = numberOfFollowers; + } + return Celebs; +}()); +var shlomiShabat = new Celebs("shlomi Shabat", "singer", "shlomi123", "shlomi123", 400); +var NoaKirel = new Celebs("noa kirel", "singer", "noa123", "noa123", 400000); +var hananBenAri = new Celebs("hanan ben ari", "singer", "hba123", "hba123", 2000); +var celebsArr = [shlomiShabat, NoaKirel, hananBenAri]; +console.log(celebsArr[-1].name); +/* +let ishayRibo = createCeleb(); +if (ishayRibo){ + celebsArr.unshift(ishayRibo); +} + + +function createCeleb(): Celebs | false { + try { + let name; + let genre; + let accountInTiktok; + let accountInInstagram; + let numberOfFollowers; + + while (!name) { + name = prompt("What is the celeb name?"); + } + + while (!genre) { + genre = prompt("enter the genre of the celeb?"); + } + + while (!accountInTiktok) { + accountInTiktok = prompt("enter the name of the account of the celeb on Tiktok :"); + } + + while (!accountInInstagram) { + accountInInstagram = prompt("enter the name of the account of the celeb on Instagram :"); + } + + while (!numberOfFollowers || isNaN(numberOfFollowers)){ + numberOfFollowers = prompt("enter the amount of the followers of the celeb on social media :"); + numberOfFollowers= parseInt(numberOfFollowers); + } + + const celeb = new Celebs(name, genre, accountInTiktok, accountInInstagram, numberOfFollowers); + + return celeb; + } catch (error) { + console.error(error); + return false; + } + } + +*/ diff --git a/02-TypeScript/10-arrays/followups/noa-meillet/index.html b/02-TypeScript/10-arrays/followups/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/followups/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/noa-meillet/index.ts b/02-TypeScript/10-arrays/followups/noa-meillet/index.ts new file mode 100644 index 000000000..15c00c8aa --- /dev/null +++ b/02-TypeScript/10-arrays/followups/noa-meillet/index.ts @@ -0,0 +1,63 @@ +class Celebs{ + public constructor( + public name: string, + public genre: string, + public accountInTiktok: string, + public accountInInstagram: string, + public numberOfFollowers: number + ){} +} + +let shlomiShabat = new Celebs("shlomi Shabat","singer","shlomi123","shlomi123",400); +let NoaKirel = new Celebs("noa kirel","singer","noa123","noa123",400000); +let hananBenAri = new Celebs("hanan ben ari","singer","hba123","hba123",2000); + +let celebsArr:Celebs[]= [shlomiShabat, NoaKirel, hananBenAri]; +console.log (celebsArr[-1].name); + +/* +let ishayRibo = createCeleb(); +if (ishayRibo){ + celebsArr.unshift(ishayRibo); +} + + +function createCeleb(): Celebs | false { + try { + let name; + let genre; + let accountInTiktok; + let accountInInstagram; + let numberOfFollowers; + + while (!name) { + name = prompt("What is the celeb name?"); + } + + while (!genre) { + genre = prompt("enter the genre of the celeb?"); + } + + while (!accountInTiktok) { + accountInTiktok = prompt("enter the name of the account of the celeb on Tiktok :"); + } + + while (!accountInInstagram) { + accountInInstagram = prompt("enter the name of the account of the celeb on Instagram :"); + } + + while (!numberOfFollowers || isNaN(numberOfFollowers)){ + numberOfFollowers = prompt("enter the amount of the followers of the celeb on social media :"); + numberOfFollowers= parseInt(numberOfFollowers); + } + + const celeb = new Celebs(name, genre, accountInTiktok, accountInInstagram, numberOfFollowers); + + return celeb; + } catch (error) { + console.error(error); + return false; + } + } + +*/ diff --git a/02-TypeScript/10-arrays/followups/shai-li/app.ts b/02-TypeScript/10-arrays/followups/shai-li/app.ts new file mode 100644 index 000000000..c3841d8da --- /dev/null +++ b/02-TypeScript/10-arrays/followups/shai-li/app.ts @@ -0,0 +1,15 @@ +"use strict"; + +class Person { + constructor(private name: string) {} +} + +const maya = new Person("Maya"); +const ruth = new Person("Ruth"); +const dan = new Person("Dan"); +const rona = new Person("Rona"); +const david = new Person("23") + +const persons: Person[] = [maya, ruth, dan, rona, david]; +console.log(persons); +console.log(persons[4]); diff --git a/02-TypeScript/10-arrays/followups/shai-li/dist/app.js b/02-TypeScript/10-arrays/followups/shai-li/dist/app.js new file mode 100644 index 000000000..29da52307 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/shai-li/dist/app.js @@ -0,0 +1,15 @@ +"use strict"; +var Person = /** @class */ (function () { + function Person(name) { + this.name = name; + } + return Person; +}()); +var maya = new Person("Maya"); +var ruth = new Person("Ruth"); +var dan = new Person("Dan"); +var rona = new Person("Rona"); +var david = new Person("23"); +var persons = [maya, ruth, dan, rona, david]; +console.log(persons); +console.log(persons[4]); diff --git a/02-TypeScript/10-arrays/followups/shai-li/index.html b/02-TypeScript/10-arrays/followups/shai-li/index.html new file mode 100644 index 000000000..deafb963d --- /dev/null +++ b/02-TypeScript/10-arrays/followups/shai-li/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/shalomcop/app.ts b/02-TypeScript/10-arrays/followups/shalomcop/app.ts new file mode 100644 index 000000000..4c9e8bbc0 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/shalomcop/app.ts @@ -0,0 +1,21 @@ +class Stockshare { + constructor ( + private name: string, + private price: number, + private type: string, + private market: string, + ) {} +} + +const teva = new Stockshare ("teva",23,"share","israel"); +console.log(teva); +let i=0; +while (true) { + i =+1; + const Stockshare.name[i] = prompt ("enter the name"); + let stockSharePricestr = prompt ("enter the price"); + let stockShare = prompt ("enter the name"); + let stockShare = prompt ("enter the name"); + +} + i =+ 1; diff --git a/02-TypeScript/10-arrays/followups/shalomcop/dist/app.js b/02-TypeScript/10-arrays/followups/shalomcop/dist/app.js new file mode 100644 index 000000000..e500a0a76 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/shalomcop/dist/app.js @@ -0,0 +1,20 @@ +var Stockshare = /** @class */ (function () { + function Stockshare(name, price, type, market) { + this.name = name; + this.price = price; + this.type = type; + this.market = market; + } + return Stockshare; +}()); +var teva = new Stockshare("teva", 23, "share", "israel"); +console.log(teva); +var i = 0; +while (true) { + i_1 = +1; + var Stockshare_1, name, i_1 = prompt("enter the name")[0]; + var stockSharePricestr = prompt("enter the price"); + var stockShare = prompt("enter the name"); + var stockShare = prompt("enter the name"); +} +i = +1; diff --git a/02-TypeScript/10-arrays/followups/shalomcop/index.html b/02-TypeScript/10-arrays/followups/shalomcop/index.html new file mode 100644 index 000000000..f7de32751 --- /dev/null +++ b/02-TypeScript/10-arrays/followups/shalomcop/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/followups/start.md b/02-TypeScript/10-arrays/followups/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/10-arrays/home-puzzles/Amit/bookshook.html b/02-TypeScript/10-arrays/home-puzzles/Amit/bookshook.html new file mode 100644 index 000000000..2906491d0 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Amit/bookshook.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Amit/bookshook.ts b/02-TypeScript/10-arrays/home-puzzles/Amit/bookshook.ts new file mode 100644 index 000000000..6d86ce947 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Amit/bookshook.ts @@ -0,0 +1,61 @@ +class Book { + public constructor( + public title: string, + public price: number, + public genre: string, + public language: string, + public sn: number + ) { } +} + +const theLordOfTheRings = new Book("The Lord Of The Rings", 130, "fiction", "english", 4120); +const gameOfThrones = new Book("Game Of Thrones", 120, "fiction", "english", 4130); +const aPigeonAndABoy = new Book("A Pigeon and A Boy", 90, "fiction", "hebrew", 4150); +const fontanelle = new Book("Fontanelle", 90, "fiction", "hebrew", 4274); +const nehamaTheLouse = new Book("Nehama the Louse", 20, "children", "hebrew", 1050); +const myRussianGrandmotherAndHerAmericanVacuum = new Book("My Russian Grandmother and Her American Vacuum", 90, "fiction", "hebrew", 3730); +const lesMiserables = new Book("Les Miserables", 100, "historical", "french", 4285); +const doNotRaiseAHandAgainstTheBoy = new Book("Do Not Raise a Hand Against the Boy", 70, "memoir", "hebrew", 3030); +const fromTheKitchenWithLove = new Book("From The Kitchen With Love", 50, "cooking", "hebrew", 4700); +const aTaleOfFiveBalloons = new Book("A Tale of Five Balloons", 20, "fiction", "hebrew", 2010); + +const allBooksArray: Book[] = [theLordOfTheRings, gameOfThrones, aPigeonAndABoy, fontanelle, nehamaTheLouse, myRussianGrandmotherAndHerAmericanVacuum, lesMiserables, doNotRaiseAHandAgainstTheBoy, fromTheKitchenWithLove, aTaleOfFiveBalloons]; + +const allBooksTitlesArray: string[] = []; +for (let i = 0; i < allBooksArray.length; i++) { + allBooksTitlesArray.push(allBooksArray[i].title) +} + +function search(userSearch: string): void { + try { + const matches = allBooksTitlesArray.filter(search => search.includes(userSearch)); + alert(`${matches.length} results: ${matches}`); + } + catch (error) { + console.error(error); + return error; + } +} + +function main() { + try { + let userSearch: string | null | undefined = null; + while (!userSearch) { + userSearch = prompt("search a book by it's title:"); + if ((userSearch !== "") && (userSearch !== null)) { + search(userSearch); + } else if (userSearch === "") { + alert("you didn't enter anything"); + } else if (userSearch === null) { + userSearch = "the user clicked on cancel"; + alert("bye bye"); + } + } + } + catch (error) { + console.error(error); + return error; + } +} + +main(); \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Amit/dist/bookshook.js b/02-TypeScript/10-arrays/home-puzzles/Amit/dist/bookshook.js new file mode 100644 index 000000000..9790e21a9 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Amit/dist/bookshook.js @@ -0,0 +1,58 @@ +var Book = /** @class */ (function () { + function Book(title, price, genre, language, sn) { + this.title = title; + this.price = price; + this.genre = genre; + this.language = language; + this.sn = sn; + } + return Book; +}()); +var theLordOfTheRings = new Book("The Lord Of The Rings", 130, "fiction", "english", 4120); +var gameOfThrones = new Book("Game Of Thrones", 120, "fiction", "english", 4130); +var aPigeonAndABoy = new Book("A Pigeon and A Boy", 90, "fiction", "hebrew", 4150); +var fontanelle = new Book("Fontanelle", 90, "fiction", "hebrew", 4274); +var nehamaTheLouse = new Book("Nehama the Louse", 20, "children", "hebrew", 1050); +var myRussianGrandmotherAndHerAmericanVacuum = new Book("My Russian Grandmother and Her American Vacuum", 90, "fiction", "hebrew", 3730); +var lesMiserables = new Book("Les Miserables", 100, "historical", "french", 4285); +var doNotRaiseAHandAgainstTheBoy = new Book("Do Not Raise a Hand Against the Boy", 70, "memoir", "hebrew", 3030); +var fromTheKitchenWithLove = new Book("From The Kitchen With Love", 50, "cooking", "hebrew", 4700); +var aTaleOfFiveBalloons = new Book("A Tale of Five Balloons", 20, "fiction", "hebrew", 2010); +var allBooksArray = [theLordOfTheRings, gameOfThrones, aPigeonAndABoy, fontanelle, nehamaTheLouse, myRussianGrandmotherAndHerAmericanVacuum, lesMiserables, doNotRaiseAHandAgainstTheBoy, fromTheKitchenWithLove, aTaleOfFiveBalloons]; +var allBooksTitlesArray = []; +for (var i = 0; i < allBooksArray.length; i++) { + allBooksTitlesArray.push(allBooksArray[i].title); +} +function search(userSearch) { + try { + var matches = allBooksTitlesArray.filter(function (search) { return search.includes(userSearch); }); + alert(matches.length + " results: " + matches); + } + catch (error) { + console.error(error); + return error; + } +} +function main() { + try { + var userSearch = null; + while (!userSearch) { + userSearch = prompt("search a book by it's title:"); + if ((userSearch !== "") && (userSearch !== null)) { + search(userSearch); + } + else if (userSearch === "") { + alert("you didn't enter anything"); + } + else if (userSearch === null) { + userSearch = "the user clicked on cancel"; + alert("bye bye"); + } + } + } + catch (error) { + console.error(error); + return error; + } +} +main(); diff --git a/02-TypeScript/10-arrays/home-puzzles/Ayala/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..86475ed4c --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Ayala/dist/index.js @@ -0,0 +1,54 @@ +var Product = /** @class */ (function () { + // name: string; + // price: number; + // department: string; + // type: string; + function Product(name, price, department, type) { + this.name = name; + this.price = price; + this.department = department; + this.type = type; + // this.name = name; + // this.price=price; + // this.department=department; + // this.type =type; + } + return Product; +}()); +var p1 = new Product("Levies Jeans", 200, "women", "jeans"); +var p2 = new Product("abc", 250, "women", "shirts"); +var p3 = new Product("pp", 180, "men", "lk"); +var p4 = new Product("xx", 189, "men", "shirts"); +var products = [p1, p2, p3, p4]; +console.log("products", products); +/*)1/*/ +var allShirts = products.filter(function (p) { return p.type == "shirts"; }); +console.log("allShirts", allShirts); +// const allWomen = products.filter((p)=>p.department == "women") +// const abovePrice = products.filter((p)=>p.price >=70 ) +// )2 reduce- נותנת איבר מהמערך מינימום מקסימום עפי ההגדרה שנגדיר בתוכה-הפונקציה שנגדיר +var cheapestItem = products.reduce(function (x, z) { return x.price < z.price ? x : z; }); +console.log("cheapestItem", cheapestItem); +// function getCheapestItem(a: Product,b: Product){ +// if(a.price > b.price){ +// return b; +// } else{ +// return a; +// } +// } +// const _getCheapestItem = (a: Product, b: Product) => { +// if(a.price > b.price){ +// return b; +// } else{ +// return a; +// } +// } +// const __getCheapestItem = (a: Product, b: Product) => {a.price>b.price? a:b} +// const _cheapestItem = products.reduce(getCheapestItem); +//(3 sort all items והזול מבינהם +//const allDepartment1 = products.reduce((x, z) => x.price < z.price ? x : z); +//console.log("department", allDepartment1) +var allDepartment = products.filter(function (p) { return p.department < "women,men"; }); +console.log("allDepartment", allDepartment); +var allDepartment2 = products.sort(function (a, b) { return a.price - b.price; }); +console.log("allDepartment2", allDepartment2); diff --git a/02-TypeScript/10-arrays/home-puzzles/Ayala/index.html b/02-TypeScript/10-arrays/home-puzzles/Ayala/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Ayala/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Ayala/index.ts b/02-TypeScript/10-arrays/home-puzzles/Ayala/index.ts new file mode 100644 index 000000000..4857296b6 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Ayala/index.ts @@ -0,0 +1,67 @@ + +class Product { + // name: string; + // price: number; + // department: string; + // type: string; + + constructor(public name: string, public price: number, public department: string, public type: string) { + // this.name = name; + // this.price=price; + // this.department=department; + // this.type =type; + } +} + +const p1 = new Product("Levies Jeans", 200, "women", "jeans"); +const p2 = new Product("abc", 250, "women", "shirts"); +const p3 = new Product("pp", 180, "men", "lk"); +const p4 = new Product("xx", 189, "men", "shirts"); + +const products: Product[] = [p1, p2, p3, p4]; +console.log("products", products) + +/*)1/*/ +const allShirts = products.filter((p) => p.type == "shirts") +console.log("allShirts", allShirts) + + +// const allWomen = products.filter((p)=>p.department == "women") +// const abovePrice = products.filter((p)=>p.price >=70 ) + +// )2 reduce- נותנת איבר מהמערך מינימום מקסימום עפי ההגדרה שנגדיר בתוכה-הפונקציה שנגדיר +const cheapestItem = products.reduce((x, z) => x.price < z.price ? x : z); +console.log("cheapestItem", cheapestItem) + +// function getCheapestItem(a: Product,b: Product){ +// if(a.price > b.price){ +// return b; +// } else{ +// return a; +// } +// } + +// const _getCheapestItem = (a: Product, b: Product) => { +// if(a.price > b.price){ +// return b; +// } else{ +// return a; +// } +// } + +// const __getCheapestItem = (a: Product, b: Product) => {a.price>b.price? a:b} + +// const _cheapestItem = products.reduce(getCheapestItem); + + + +//(3 sort all items והזול מבינהם + +//const allDepartment1 = products.reduce((x, z) => x.price < z.price ? x : z); +//console.log("department", allDepartment1) + + const allDepartment = products.filter((p) => p.department < "women,men") + console.log("allDepartment", allDepartment); + +const allDepartment2=products.sort((a, b) => a.price - b.price); +console.log("allDepartment2",allDepartment2) \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Itai-G/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/Itai-G/dist/index.js new file mode 100644 index 000000000..b27edd34a --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Itai-G/dist/index.js @@ -0,0 +1,60 @@ +var GameShop = /** @class */ (function () { + function GameShop(name, price, department, types, productImg) { + this.name = name; + this.price = price; + this.department = department; + this.types = types; + this.productImg = productImg; + } + return GameShop; +}()); +var uncharted = new GameShop("uncharted", 60.9, "adventure-game", "Game", "https://image.api.playstation.com/vulcan/img/rnd/202011/1101/zC3kulm2Ho3ZE38ZUYHW7WMK.png"); +var watchdogs = new GameShop("watchdogs", 29.9, "hacking-game", "Game", "https://m.media-amazon.com/images/I/51QV1B5NK5L.jpg"); +var godOfWar2 = new GameShop("god of War 2", 80.9, "action-game", "Game", "https://d3m9l0v76dty0.cloudfront.net/system/photos/10645636/original/471318c7705d25f278bcc2c3917a94db.jpg"); +var xboxcontroller = new GameShop("Xbox sieris x controller", 88.9, "Controller", "computer", "https://assets.xboxservices.com/assets/55/83/55836945-e141-4d47-9dad-21d902948816.jpg?n=111101_Gallery-0_1_1350x759.jpg"); +var wirelessmuose = new GameShop("logitech gameing mouse", 10.9, "Kits", "computer", "data:image/jpeg;base64,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"); +var ps5controller = new GameShop("playstation 5 controller", 85.9, "Controller", "consoles", "https://d3m9l0v76dty0.cloudfront.net/system/photos/6826234/original/b9b95cbadca40aa7cf1233522f276896.jpg"); +var headphones = new GameShop("headphones", 120.9, "Kits", "audio", "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYVFRgWFRUYGBgaHBoYGhgYGBgYGBoYGBkaHBgYGBgcIS4lHB4rIRkZJjgmKy8xNTU1HCU7QDs0Py40NTEBDAwMDw8PGBERGDQhGB00PzQ0NDExNDQ0NTQxNDQ0NDQ/NDQxNDQ0MTQ0NDQxNDE0MTQ0NDQxNDQ0NDQxNDE0Mf/AABEIAQ4AuwMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAwQFBgcCAQj/xABJEAACAQIDBAcEBwUECAcAAAABAgADEQQSIQUxQVEGByJhcYGREzJCoVJicoKxwdEUI5Ki4bLC0vAkMzRDU4Oj8Rdkc5Ozw9P/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAgH/xAAbEQEAAgIDAAAAAAAAAAAAAAAAARECYRIxQf/aAAwDAQACEQMRAD8A2aEIQCEIQCEIQCEIQCEIQCNsZi0pKXqMqKN7MQB3DvPdIbpP0np4RbaNVIuqXtYfTc/CvzPDjbLNp7Uq4l89ZyTw0sFHKmh0Qd5uTx5wLptjrBA0w6LbcKla6g/YpizN5keEqeN6RYmt7+Ir2PCmDSXwGXKT53kM2IVfdGvEnVj4kxJ8YYDypUbea2IB5s9X8QxtOqe08bSGajjKpHAGoai+jXEYDGGdJXBN/dbmOPiNzDxgTuC6z8bTOWstOoPrJlb1UgfKW7ZXWjhnsKyPRPMfvE9VAb+WZliKK1BYgBt+m496/pwkFWplDaB9ObP2lRrrno1EqLzRg1u4gag9xj2fLOE2g9Jw6OyMNzIxVvUTRui/Wm6EJjRnXd7VF7a97qNGHeLHuMDYIRvhMUlVFemwdGF1ZTdSDxBEcQCEIQCEIQCEIQCEIQCEIQCVTpf0sTCKUQhq5Gi7wgO53t8l3nw1jrpb0hTB0s2hqPcU05nix+qLi/kOMw/G453dndi7OSxY/S5+lrcrQHWKxrMzPUYs7HMSxuSebd/IbhuEYVcXfjGlSsTG7vAcviIma8avUiD1rQJEYiKJiZL7F6vtoYlQwpCkp3NXYoSOYUAt6gSwf+EGKt/tNG/LLUt/F/SBUqVfv7weR5xTGUw65gNeI7/04yR2n0C2hhgWNIVUG9qDFyBzyEBz5AyLwOIB8D2T48Pnp5wId0iJknjqNmjJkgWnoH00fA1MjkthmPbQalCf94g581G8d9pv1CstRVdGDKwDKwNwykXBB4gifKbLNT6nukxBOBqNcG70CTuI1qUx3b3Hg3dA1+EIQCEIQCEIQCEIQCNMfjEo02qubKgLE/kO87h4x3Mn6zOkWd/2dG7FM3qEfFU+j4L+N+UCpdJttviazVn43VU4InwqPz7yZV8RimD6js8/xjivVLGcWgeN/kRF2tFmE8RXYhEBZmIVVFyWZjYADmSYHOz8BVxFVaNFC7ueyotw3kk6KBxJm59COr6jggtSqFq4nfnIutM8qQPH6x1PcNI56AdERgaOapZsRUANRt4UbxTT6o4nideQFwgEIQgEoHT/AKGLWVsTh1y11BLqo/1yjfoPjA3HjuPAi/wgfNVdc6Bu4nxtvIkayS5dPNmDDbQIUWp1VFRR8K5yyVFHgQT3ZhKm6WJEBs1OGFxD0nSpTOV6bK6Hkym4vzHMcReLFZ4RffA+ldh7TXE0KddPdqKGt9E/Ep7wbjykhMu6m9q9irhCT2SatO9tFYgOo8Gs33zNRgEIQgEIQgEIQgQPS7bQwmHZx77dimPrnj4AXPl3zANoYgknW5JuSd5J3ky4dY+3fb4hlU3p0rovIt8beot4L3yhjU3gCrFLQAiipASJImo9U/Re4GOrC97jDqb6LuarbmdQvdc/EJS+iWwDjcSlLX2a9uqw4ID7oP0mPZHiTwn0JSpqqhVACqAAALAACwAHAQFYQhAIQhAIQhAzTrmwN6WHrgao7Uyfq1Fza/epqPvTMMYO2T9KzfxC82/rKw2fZ1fmgWoP+W6sf5Q0xKtqqH6tvQkflAbWh4j8p3lnmWBP9Acb7HH0GvYO3smvxFQZVF/tZD5T6AnzHTcoyuvvKQw8VNx8xPpfD1Q6qw3MAw8CLiArCEIBCEIBIHpjtf8AZsK7g2c9hPttx8hdvKT0x7rW2zmxAoqezSXXvqPqfRco8zAz7HVcxtE0WJ0xc3jlVgeos6qHKLxWmksPQTYv7XjUDC9Ojaq/IkH92h8WF+8IwgaV1d9H/wBkwoLi1arapUvvW47CfdG/vLc5boQgEIQgEIQgEIQgRXSbD+0weJp/So1VHiyMAfWfPqa00PiPnf8AOfSVenmVl5gj1Fp82YDXDp4/3Vgc5Z6FneWdKsBMJN96I18+Cw5O/wBmoPioyn8JhiJNa6FY9VwVJTvGcf8AUe3ygXSEIQCEIQGm0MYtGk9VvdRWc+Ci9p817YxjVXZ3N2di7eLG5myda21PZ4ZaIPaqtr9inZm/mKD1mIHtPAXoppHKJOaSR1TpwOX7K3mxdWWxv2fBq7Cz1z7Vr7wpH7tfJbG3NmmV7K2Z+1Ymjh/hdv3ndTXtP4XUEX5kT6DRQBYCwGgA5QO4QhAIQhAIQhAIQhA8M+bsCv7n75/sifR7mwPhPnHZZvh1PMg+q/0gFp2iwtFkWB3TSXHYmJyUUXlm+bMZVqKSw4BP3a+f4mBrkIQgEIRKtVCKzNoFBJPcBcwMV61dpe0xbID2aSqg+0e0/wCIH3ZSMInGONtYs1aju293Zz4uxP5zyiMq35C8BUVkGhYC3PT5x9QsVzAgjmCCPURCjTBABAPOJ1cKlN863XssWAOh3AXHHj6QNF6pNm5nxGKYbrUEPebPUI/6Y8jNSle6DbN/Z8DQQizFfaOOIep22B8M1vKWGAQhCAQhCAQhCAQhCA02lUyUajfRR29FJnz9gEth0HO/yuJt/TWrlwGLN7H2FRQe9kKj5mYtRW1JB3X9bfoYCdotTE4tF6SwHFIS57Eo3op97+00qFJZqHRTBg4Wmft//I0CyQhCASt9Psb7LAViDYsopj75Cn5EyySh9bj2wa8vaKfMK35X9IGJV3Ga53DX0nVLFM9hksNN7Dgb7o0Z8zhQLlju5gaxz7QITmNu7eYErhqwGrKQOYFx8tY82Zh1xWIpUlIZalRENtQaa9qp8vaSHTbFlyhCd41IUa313Hn8ov0S24MFiv2g0faaMFXPkyswylr5TfQsLW+KZF+wvLHGIjjN33p9Mwme7M618G5tVWrRPNlDr6oS3qol12ftKjiFz0ai1F5owax5G249xmoPYQhAIQhAIQhAIQhAp/WjiMmzqg4u1NB51FJ+QMy0iyqOSj56/nL51v4n93haV9Wqs5HNaaWPzqLKNWFjblp6C0BDdJPF4BqLlG3ixB4MCL3Hdw8jGWFp5nRfpMq7iT2iBoBvlixu2Kbo1KlQVEGlNiSz5c+dgWJ0UkA5RutAjqImu9HaeXDUR9QH11/OZPRWbJhqeRFX6KhfQAQFoQhAJUOszDo+BcO6oykPTzkDM637K8yylhpzjLpp1hJhGNCgoq4gaG9/Z0yd2e2rNxygjvImNba2vWxNQtWqNUfUFjuUHeiKNFXw32gRq9l8yHXUXG4X32naUL67zFqVGPEp2gNkw0VGHjlVnrMBvNoDRsNO8FXq0HFSi7o43MhsbcjzHcdJ37decVQqd0DSeinWYHIpY0BG3CuuiH/1F+D7Q0+zNMRgQCDcHUEa3vxnzNVoy49AOm5wpXD4hicOTZXOpok//XzHw7914G1wnCMCLg3B1BHKdwCEIQCEIQMi6ysTn2hTp7xSpAn7VRiWH8KpK45jjaOK9vjcVW4F2RT9VLIpHcQt/ONXgP8AYGHepiKa0yA+bMGYdlcoLZiONraDnaTXSGtcons2GW4NV0FOpVYWzMVCiy66XEhNkJTAepWzlFypkQ5S7OGOUtwUBCT5R9tC2ZQrO1PIroHN2RXGfIx42JIgOtiUc9aklt7pfwzAn5AzXJm/QmhmxCn6Cs3yyj+1NIgEpHWP0r/Y6QpUmtiKoOU7/ZpuNTx3hb8bnXKRLfjcStKm9RzZUUsx5KoufwnzttjaD4vEPWfe7XA+gg0VB3BbDxueMCIqMVF7ku5NiTc6+8xJ1J13985oUp05zMW4Dsr4D/JMcUUgKUkihnW4RvWeAlisVkH4SIbGXOpvPMQS7XO7cB+cSbDcoDtKwMc03I3GQwJU6yQw9W8Cbo1s2h3zmtSvGNN7ax21Undp3n8hA0fq86bJRpNh8XUCCkuak7XN0Ghp6akrcZQN40+GO9rda6C64bDs/wBeqci+IQXYjxyzK8gG+cPXAgWbH9PdoVT/ALR7MfRpIqj+JgW/mkLX27im97FYg/8AOqf4pFvWJiDsecCRG2MQpuMTWB5irUH96SWB6c7QpEBMU7Dk+WoD5uCR5ESrMZ7hT21v7uYA+BgXHZVLJTA8Pl/3M7cwD9keH9Yi7wLN0cwrsjA0Er06nayGp7N1NMlQ4bgCWZdN5uOBjRq5dyxAW9gFUWVVUBVRRyAAHlH2C2rRFFFViHVabOGU2Y4cE06aMt9DUOck29ZG0DA0Hq+w/ZqVOZVB90Xb+0vpLlIbothfZ4WmLasM58X7Q+RA8pMwKH1rbRyYZaKntVn1+xTszfzFB5mZHV7CMeNrDxOgl76zcRnxgS+lOmotyZyWPyKeko+PXRV5sPkCfygMlp2Cjzjqms8qr2gOQigEDioZGY2pp8vWSFcyIxR1EBFROp4J1ASqU7zjCU2LZQPPgPGO6FEubDzPKSaU1QWEBOnQtv1nr1QJxUqE7t0RtA9dyZxadWilHDu+iqT4boCBWclJOUNhMdXYDuGseLsemu+58TAq/sxynLUGO4SzvRRdyL+MY4pyRbh3aQF8PiMyA91j4ieF5D0ajUydLqd45d4j2nXDbiIErhjJ7YeBOIrJSG5j2iOCDVz3aX87St4V7kAanlxmo9WzUx7RSP3xsbnimnZXlY7+dxygXxRbdunUIQMR6V1M+NxDfXK/wAJ/dlcxK3dB4/h/WTO1GviMQf8AzGIHpWcSIxWlVPEj1U/pARxI/eeQnVp1jFtUHhOmEBhiJEVz2pL4kSHr+9A8EUpUy5yjf/nWJrJzCYfIlz7x1Pd3QPEQIth595iTAnU+kcJSv2ju4D85xW+cBq4niUyxsBFkp33x5RW0DzCbOXe2vdwk1QpgCwFo2oCPacDuIVmntWuq6Ei53DeT4AamIV1qEXWi9ubgIPRtflAZYh4zqTvE+1HwKPvE/gIyd6g+AH+L9ICpS88XCA8I2/bivvIfKPcLjkb4rHkdID3BYaxFpadmYpkZHU2dDdTz5q3MEXHnIHDLJegdIGx7Pxi1qa1F3MN3EHcVPeDcR3KJ1f4456lEnQgVF7iCFb1BT0MvcDCttJkxOKXlXqn+Ny/9+QW0nylH+iyn1OX+9LZ0/wAP7PH1dLColOqPHL7NvnTHrKjjRnUrzBt48PnaApjz2laKZdIwWvnQc7D1j3CvmXwgMsXTkNX3yx4lLiQGMp2MBfZGGzvmO5dfPhJr2Wdvqjf+QiWzKeSkvNtT57vlJKilhb18YDavoCeUjHb+p5/0i21sTcELuWxJ55SCfkDGoMBVY5pRqpnCYkucqbuL/wCH9YEylUAhQCzHcq6nxPADvNhJrDYFLZsTVKj/AIVLVz9p+HlbxkJgKeQabzvPEnmTvMfAwJc7XSkCuGoJTHFyMznvLH87yBx+PdzdnJ87D0Gk6rPI2u8BGo8QJnrmc3gKLE62zUf6rcCv6TnCqQuu83J8Sb28t0e0jAjsPi6uGcK/aQ7jwPnwP+e+W/DYhXUMpuD/AJt4yLeitRCji4Py5Ed8YbDqtTd6Dm9tQefIjxH4QNE6DVf9OQDijg+GW/4gTVplPVpRL4t34U6Z/iqMAvyV5q0DOetvZxNOliVH+rY06n2KpXKx8HVR98zK3efRu08AmIpPRqC6VFKMONmFrg8CN4PMT5z2tgHw1Z6FX36bZSbWDrvVx3Mtj6jhAYO2RyPhbtDz94escYPEZW7jEHTOuXiNVPfy84ySoeOhECzsQZF4ujee4XGXFjFar3BgOqD3IHACK43E5VsN5+Q5yN2bUuJ5iauZifTw4QE7xtdk0Cl04W95e63ERcmF4DYl6mmUonG+89x/SSeHQKLCNwYtSNzAk6DxWvi0QdptfojU+nDzkPWx2XRDrxb/AA/rGBN98CSxG1S3uqAOZ1P6Ri2Jc72Plp+EShA7znmfWAc85xPYCyVjxj2jUB3SMndNypuIE3TeMscbVqbjiGU+Vrfi0USppeK7N2c2LxVDDrftscxHwoAM7+S387QNf6sdm+zwntSO1XbP35B2aY8LAt96XOJUKSoqqoAVQFUDcABYAeQisAlF6yeiJxlMVqI/0ikNBu9pT1Jpk8xcle8kaZiZeoQPlQt4gg2IIsQRvBB3EHhOMRTz9pfeG8fSHMd82XrB6v8A9oLYnCqBX3vT0C1bfEL6LU79x42OsxpwyMVYFWUkMrAqysN4ZTqD3GA0SraO0xV4nWph9R2W+R/Qxk+ZTYixgS2Fewb09T/3nrcDGWDq3BjnNAUvPLzjNPbwFAZ1Wewyj7x/LwidNrXPLd4ndODA8hCEAhPJ7AIQhA9hCEB1RfszXOqjo77NGxlQdusAtMH4aIN7j7ZsfBVlL6A9FzjKoLg+xTtOfpckHe34X7pu6KAAAAANABoABuAEDuEIQCEIQCVTpd0Iw+OGZh7OsBZayDtdwddzr46jgRLXCB819JehmLwRJqU89Mf76mCyW5vxT7wt3mVz2txY2Yd+vpPraVLbXV7gMSSzUBTc73on2Zud5Kjsk95BgfOa5VuVuCeB1HrFKVW+8WPyms43qVUm9HGMByqUgx/iVl/CU3pj0Jr7PCM7CrSOntVUqFf6Lgk2vwN7HdAruae5ogHnV4DlDp5wiNJ+EWgeTyewgeQhCAT2eT2ASS2Bsepi66UaYuW1J4Io95mPAD+kT2Psmtiqq0qClnO/6KrxZ2+FRz9LnSb50Q6L08BSyL2qjWNSoRqx5Dko4D8zAkNibKp4WitGmNF3nix4se/+gknCEAhCEAhCEAhCEAhCEAiGIw6VEZHUOjAhlYAqwO8EHQiLwgZF0p6o75nwDhb6+wqE5R3U33jwa/iJl21dk4jCtlxFF6R3AspCn7Ljst5Ez6uiNakrqQ6hlO8MAwPiDvgfJQeOadYHfvm+bW6sdnV72omix+KgxQeSG6D+GVXF9SwP+pxjDuqUwf5lYfhAzKeS91OqHGr7mIw7D6xqJ+CNPE6p9of8TCf+5W//ACgUWE0vD9UFcke0xVJRxyU3b0uyyd2f1S4RdatWtV+rdaa/yjN/NAxhFJIUAljoFAJYnkANSZeOjXVricRZ8RfD0zr2h++YfVQ+59/UfRM2HZGwMNhRbD0KdM7iwF3P2nN2bzMlIEVsTYNDB0/Z0ECjex3s7fSdt7H8OFpKwhAIQhAIQhA//9k="); +var hdmiCable = new GameShop("hdmi 2.1 120 Hz cable", 16.9, "cable", "Multimedia", "https://www.digital-master.co.il/images/itempics/C137W_09062021100919_large.jpg"); +var lgTv = new GameShop("Lg Tv", 3000.9, "screens", "multimedia", "https://www.lg.com/il/images/tv/MD05940284/gallery/medium02.jpg"); +var samsungTv = new GameShop("Samsung TV", 1359.9, "screens", "multimedia", "data:image/jpeg;base64,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"); +var items = [ + uncharted, + watchdogs, + godOfWar2, + xboxcontroller, + wirelessmuose, + ps5controller, + headphones, + hdmiCable, + lgTv, + samsungTv, +]; +// task 1 +function getTypes(item) { + console.log(item.types); +} +items.forEach(getTypes); +// task 2 +var min = Math.min.apply(Math, items.map(function (item) { return item.price; })); +// task 3 +items.sort(function (a, b) { return a.price - b.price; }); +// UPADTE +var searchBox = document.getElementById("searchFild"); +searchBox.addEventListener("keyup", function () { + var searchValue = searchBox.value; + var filteredArray = items.filter(function (item) { return item.name.includes(searchValue); }); + updateUI(filteredArray); +}); +function updateUI(filteredArray) { + var searchResultContainer = document.getElementById("productsCards"); + searchResultContainer.innerHTML = ""; + filteredArray.forEach(function (item) { + var div = document.createElement("div"); + var imge = document.createElement("img"); + imge.src = item.productImg; + div.innerHTML = item.name + " " + item.price + "$"; + div.append(imge); + searchResultContainer.appendChild(div); + }); +} diff --git a/02-TypeScript/10-arrays/home-puzzles/Itai-G/dist/style.css b/02-TypeScript/10-arrays/home-puzzles/Itai-G/dist/style.css new file mode 100644 index 000000000..45e09d34a --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Itai-G/dist/style.css @@ -0,0 +1,38 @@ +.searchWapper { + display: flex; + flex-direction: column; + gap: 0.25; +} + +input { + font-size: 1rem; +} + +#productsCards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.25; + flex-wrap: wrap; +} + +.card { + border: 1px solid black; + background-color: white; + padding: 0.5rem; +} + +.card > .productName { + margin-bottom: 0.25rem; +} + +.card > .body { + font-size: 0.8rem; + color: #777; +} + +img { + width: 85px; + height: 70px; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Itai-G/index.html b/02-TypeScript/10-arrays/home-puzzles/Itai-G/index.html new file mode 100644 index 000000000..ec4515bbd --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Itai-G/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + + + +
      + + + +
      +
      +
      + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Itai-G/index.ts b/02-TypeScript/10-arrays/home-puzzles/Itai-G/index.ts new file mode 100644 index 000000000..fcba3cdd3 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Itai-G/index.ts @@ -0,0 +1,73 @@ +class GameShop { + constructor( + public name: string, + public price: number, + public department: string, + public types: string, + public productImg:string + ) {} + } + + const uncharted = new GameShop(`uncharted`, 60.9, `adventure-game`, `Game`,"https://image.api.playstation.com/vulcan/img/rnd/202011/1101/zC3kulm2Ho3ZE38ZUYHW7WMK.png") + const watchdogs = new GameShop(`watchdogs`, 29.9, `hacking-game`, `Game`, "https://m.media-amazon.com/images/I/51QV1B5NK5L.jpg") + const godOfWar2 = new GameShop(`god of War 2`, 80.9, `action-game`, `Game`,"https://d3m9l0v76dty0.cloudfront.net/system/photos/10645636/original/471318c7705d25f278bcc2c3917a94db.jpg") + const xboxcontroller = new GameShop(`Xbox sieris x controller`, 88.9, `Controller`, `computer`,"https://assets.xboxservices.com/assets/55/83/55836945-e141-4d47-9dad-21d902948816.jpg?n=111101_Gallery-0_1_1350x759.jpg") + const wirelessmuose = new GameShop(`logitech gameing mouse`, 10.9, `Kits`, `computer`,"data:image/jpeg;base64,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") + const ps5controller = new GameShop(`playstation 5 controller`, 85.9, `Controller`, `consoles`,"https://d3m9l0v76dty0.cloudfront.net/system/photos/6826234/original/b9b95cbadca40aa7cf1233522f276896.jpg") + const headphones = new GameShop(`headphones`, 120.9, `Kits`, `audio`,"data:image/jpeg;base64,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") + const hdmiCable = new GameShop(`hdmi 2.1 120 Hz cable`, 16.9, `cable`, `Multimedia`,"https://www.digital-master.co.il/images/itempics/C137W_09062021100919_large.jpg") + const lgTv = new GameShop(`Lg Tv`, 3000.9, `screens`, `multimedia`,"https://www.lg.com/il/images/tv/MD05940284/gallery/medium02.jpg") + const samsungTv = new GameShop(`Samsung TV`, 1359.9, `screens`, `multimedia`,"data:image/jpeg;base64,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") + + const items: GameShop[] = [ + uncharted, + watchdogs, + godOfWar2, + xboxcontroller, + wirelessmuose, + ps5controller, + headphones, + hdmiCable, + lgTv, + samsungTv, + ] + + // task 1 + function getTypes(item: GameShop) { + console.log(item.types); + } + items.forEach(getTypes) + + // task 2 + const min = Math.min(...items.map((item) => item.price)) + + + // task 3 + items.sort((a, b) => a.price - b.price) + + + + // UPADTE + const searchBox = document.getElementById("searchFild") as HTMLInputElement; + + searchBox.addEventListener("keyup", () => { + const searchValue = searchBox.value; + + const filteredArray = items.filter(item => item.name.includes(searchValue)); + + updateUI(filteredArray); + }); + + function updateUI(filteredArray: GameShop[]) { + let searchResultContainer = document.getElementById("productsCards")as HTMLDivElement; + searchResultContainer.innerHTML = ""; + + filteredArray.forEach(item => { + let div = document.createElement("div"); + let imge = document.createElement("img")as HTMLImageElement; + imge.src = item.productImg + div.innerHTML = `${item.name} ${item.price}$`; + div.append(imge); + searchResultContainer.appendChild(div); + }); + } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Itai-G/style.css b/02-TypeScript/10-arrays/home-puzzles/Itai-G/style.css new file mode 100644 index 000000000..45e09d34a --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Itai-G/style.css @@ -0,0 +1,38 @@ +.searchWapper { + display: flex; + flex-direction: column; + gap: 0.25; +} + +input { + font-size: 1rem; +} + +#productsCards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.25; + flex-wrap: wrap; +} + +.card { + border: 1px solid black; + background-color: white; + padding: 0.5rem; +} + +.card > .productName { + margin-bottom: 0.25rem; +} + +.card > .body { + font-size: 0.8rem; + color: #777; +} + +img { + width: 85px; + height: 70px; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Itai-G/style.scss b/02-TypeScript/10-arrays/home-puzzles/Itai-G/style.scss new file mode 100644 index 000000000..2ff7f4cec --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Itai-G/style.scss @@ -0,0 +1,42 @@ + +.searchWapper { + display: flex; + flex-direction: column; + gap: .25; +} + +input { + font-size: 1rem; +} + +#productsCards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: .25; + flex-wrap: wrap; +} + +.card { + border: 1px solid black; + background-color: white; + padding: .5rem; +} + +.card > .productName { + margin-bottom: .25rem; +} + +.card > .body { + font-size: .8rem; + color: #777; +} +img { + width: 85px; + height: 70px; +} + +// .hide { +// display: none; +// } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Karin-levi/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..a67df662f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Karin-levi/dist/index.js @@ -0,0 +1,39 @@ +var Product = /** @class */ (function () { + function Product(price, name, department, type) { + this.price = price; + this.name = name; + this.department = department; + this.type = type; + } + return Product; +}()); +var Shop = /** @class */ (function () { + function Shop(products) { + this.products = products; + } + Shop.prototype.getProductByType = function (type) { + return products.filter(function (product) { return product.type === type; }); + }; + Shop.prototype.cheepestItem = function () { + return products.reduce(function (prev, current) { return (prev.price > current.price) ? current : prev; }); + }; + Shop.prototype.sortByPriceAsc = function () { + return products.sort(function (a, b) { return a.price - b.price; }); + }; + Shop.prototype.findProduct = function (searchTerm) { + return products.filter(function (product) { return product.name.includes(searchTerm); }); + }; + return Shop; +}()); +var shirt = new Product(50, "TShirt", "men", "men shirts"); +var skirt = new Product(60, "white", "female", "womens skirts"); +var sweater = new Product(70, "blue", "men", "men sweaters"); +var womentop = new Product(570, "sport-top", "female", "womens tops"); +var underwear = new Product(560, "black", "men", "men underwear"); +var pants = new Product(550, "skini", "female", "womens pants"); +var products = [shirt, skirt, sweater, womentop, underwear, pants]; +var shop = new Shop(products); +console.log("here are all the products: ", products); +console.log("cheepest product is: ", shop.cheepestItem()); +console.log("sorted by price ascending: ", shop.sortByPriceAsc()); +console.log("products that contain \"rt\": ", shop.findProduct("rt")); diff --git a/02-TypeScript/10-arrays/home-puzzles/Karin-levi/index.html b/02-TypeScript/10-arrays/home-puzzles/Karin-levi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Karin-levi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Karin-levi/index.ts b/02-TypeScript/10-arrays/home-puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..093b9e7b3 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Karin-levi/index.ts @@ -0,0 +1,38 @@ +class Product { + constructor(public price: number, public name: string, public department: string, public type: string) { } +} +class Shop { + constructor(public products: Product[]) { } + + getProductByType(type: string): Product[] { + return products.filter(product => product.type === type); + } + + cheepestItem(): Product { + return products.reduce((prev, current) => (prev.price > current.price) ? current : prev) + } + + sortByPriceAsc(): Product[] { + return products.sort((a, b) => a.price - b.price); + } + + findProduct(searchTerm: string): Product[] { + return products.filter(product => product.name.includes(searchTerm)); + } +} + +const shirt = new Product(50, `TShirt`, `men`, `men shirts`); +const skirt = new Product(60, `white`, `female`, `womens skirts`); +const sweater = new Product(70, `blue`, `men`, `men sweaters`); +const womentop = new Product(570, `sport-top`, `female`, `womens tops`); +const underwear = new Product(560, `black`, `men`, `men underwear`); +const pants = new Product(550, `skini`, `female`, `womens pants`); + +const products: Product[] = [shirt, skirt, sweater, womentop, underwear, pants]; +const shop: Shop = new Shop(products) + +console.log(`here are all the products: `, products); +console.log(`cheepest product is: `, shop.cheepestItem()); +console.log(`sorted by price ascending: `, shop.sortByPriceAsc()); +console.log(`products that contain "rt": `, shop.findProduct("rt")) + diff --git a/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..ca9695d4f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/public/scripts/index.js @@ -0,0 +1,52 @@ +var product = /** @class */ (function () { + function product(name, category, price) { + this.name = name; + this.category = category; + this.price = price; + } + return product; +}()); +var spongeBobShirt = new product('spongeBobShirt', 'shirts', 30); +var spongeBob2Shirt = new product('spongeBob2Shirt', 'shirts', 10); +var patrickPants = new product('patrickPants', 'pants', 25); +var squidwardUnderware = new product('squidwardUnderware', "Men's underware", 20); +var products = [spongeBobShirt, spongeBob2Shirt, patrickPants, squidwardUnderware]; +// 1) +function getItemOfCategory(arr) { + var shirts = []; + for (var product_1 in arr) { + if (arr[product_1].category == 'shirts') { + shirts.push(arr[product_1]); + } + } + return shirts; +} +console.log(getItemOfCategory(products)); +// 2) +function cheapestOffAll(arr) { + var cheapest = arr[0].price; + for (var product_2 in arr) { + if (arr[product_2].price < cheapest) + cheapest = arr[product_2].price; + } + return cheapest; +} +console.log(cheapestOffAll(products)); +// 3) +function sortByPrice(arr) { + return arr.sort(function (a, b) { + return a.price - b.price; + }); +} +console.log(sortByPrice(products)); +// 4) +function searchProduct(arr, keyword) { + var newArr = []; + for (var product_3 in arr) { + if (arr[product_3].name.indexOf(keyword) != -1) { + newArr.push(arr[product_3]); + } + } + return newArr; +} +console.log(searchProduct(products, 'Bob')); diff --git a/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..7f94c2a98 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..f5395f3fa --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Nikita Rossenko/src/index.ts @@ -0,0 +1,62 @@ +class product { + constructor( + public name: string, + public category: string, + public price: number + ) {} +} + +const spongeBobShirt:product = new product('spongeBobShirt','shirts',30); +const spongeBob2Shirt:product = new product('spongeBob2Shirt','shirts',10); +const patrickPants:product = new product('patrickPants','pants',25); +const squidwardUnderware:product = new product('squidwardUnderware',"Men's underware",20); + +const products:Array = [spongeBobShirt,spongeBob2Shirt,patrickPants,squidwardUnderware]; + +// 1) +function getItemOfCategory(arr:Array){ + const shirts:Array = []; + for (const product in arr){ + if(arr[product].category == 'shirts'){ + shirts.push(arr[product]); + } + } + return shirts; +} + +console.log(getItemOfCategory(products)); + +// 2) +function cheapestOffAll(arr:Array){ + let cheapest:number = arr[0].price; + for (const product in arr){ + if (arr[product].price < cheapest) + cheapest = arr[product].price; + } + return cheapest; +} + +console.log(cheapestOffAll(products)); + +// 3) +function sortByPrice(arr:Array){ + return arr.sort((a:product,b:product) => { + return a.price - b.price; + }) +} + +console.log(sortByPrice(products)); + +// 4) +function searchProduct(arr:Array,keyword:string){ + let newArr:Array=[]; + for (let product in arr){ + if (arr[product].name.indexOf(keyword) != -1){ + newArr.push(arr[product]) + } + } + return newArr; +} + +console.log(searchProduct(products,'Bob')); + diff --git a/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/dist/index.js new file mode 100644 index 000000000..ea9c6fb51 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/dist/index.js @@ -0,0 +1,38 @@ +var Clothes = /** @class */ (function () { + function Clothes(name, price, department, type) { + this.department = department; + this.name = name; + this.price = price; + this.type = type; + } + Clothes.prototype.getName = function () { + return this.name; + }; + Clothes.prototype.getPrice = function () { + return this.price; + }; + Clothes.prototype.getDepartment = function () { + return this.department; + }; + Clothes.prototype.getType = function () { + return this.type; + }; + return Clothes; +}()); +var shirt1 = new Clothes("shirt", 10, "man's shirt", "shirt"); +var shirt2 = new Clothes("shirt", 20, "man's shirt", "shirt"); +var shirt3 = new Clothes("shirt", 30, "man's shirt", "shirt"); +var shirt4 = new Clothes("shirt", 70, "man's shirt", "shirt"); +var shirt5 = new Clothes("shirt", 25, "man's shirt", "shirt"); +var shirt6 = new Clothes("shirt", 4, "man's shirt", "shirt"); +var pants1 = new Clothes("pants", 50, "man's pants", "pants"); +var arr1 = [shirt1, shirt2, shirt3, shirt4, shirt5, shirt6, pants1]; +//Only shirts +var allShirts = arr1.filter(function (person) { + return person.getType() == "shirt"; +}); +//Cheapest item +arr1.sort(function (person1, person2) { + return person1.getPrice() - person2.getPrice(); +}); +console.log("Cheapest item is " + arr1[0].getName() + " and it costs " + arr1[0].getPrice() + "$"); diff --git a/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/index.html b/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/index.ts b/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/index.ts new file mode 100644 index 000000000..9c477ec9a --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Omer.Virshuvski/index.ts @@ -0,0 +1,52 @@ +class Clothes{ + private name:string; + private price:number; + private department:string; + private type:string; + constructor(name:string, price:number, department:string, type:string) { + this.department = department; + this.name = name; + this.price = price; + this.type = type; + } + + getName():string { + return this.name; + } + + getPrice():number { + return this.price; + } + + getDepartment():string { + return this.department; + } + + getType():string { + return this.type; + } +} + +const shirt1 = new Clothes("shirt", 10, "man's shirt", "shirt"); +const shirt2 = new Clothes("shirt", 20, "man's shirt", "shirt"); +const shirt3 = new Clothes("shirt", 30, "man's shirt", "shirt"); +const shirt4 = new Clothes("shirt", 70, "man's shirt", "shirt"); +const shirt5 = new Clothes("shirt", 25, "man's shirt", "shirt"); +const shirt6 = new Clothes("shirt", 4, "man's shirt", "shirt"); +const pants1 = new Clothes("pants", 50, "man's pants", "pants"); + +const arr1:Clothes[] = [shirt1, shirt2, shirt3, shirt4, shirt5, shirt6, pants1]; + + +//Only shirts +const allShirts:Clothes[] = arr1.filter((person)=> { + return person.getType() == "shirt"; +}) + + +//Cheapest item +arr1.sort((person1, person2)=> { + return person1.getPrice() - person2.getPrice(); +}) + +console.log(`Cheapest item is ${arr1[0].getName()} and it costs ${arr1[0].getPrice()}$`); \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/.vscode/settings.json b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/.vscode/settings.json new file mode 100644 index 000000000..bf76cb69b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/dist/login.css b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/dist/login.css new file mode 100644 index 000000000..db6b1f438 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/dist/login.css @@ -0,0 +1,58 @@ +body { + background-color: aliceblue; +} + +.container { + position: relative; + margin: auto; + margin-top: 15vh; + background-color: #dfe1e8; + width: 50vw; + height: 50vh; + border-radius: 20px; + box-shadow: 5px 10px 20px 5px black; +} +.container__input { + position: relative; + height: 30%; +} + +label { + margin-left: 10%; + color: black; + font-size: larger; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +input { + margin-left: 10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: aliceblue; + box-shadow: 2px 5px 10px #fefefe; +} + +button { + background-color: #71b609; + font-size: larger; + color: white; + font-weight: bold; + border-radius: 5px; + margin-top: 10px; + margin-left: 40%; +} + +button:hover { + background-color: #426d02; +} + +span { + position: relative; + left: 45px; + color: red; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-weight: bold; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/dist/login.js b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/dist/login.js new file mode 100644 index 000000000..85846904a --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/dist/login.js @@ -0,0 +1,54 @@ +var btn = document.querySelector(".enter"); +btn.addEventListener("click", function (e) { + var inputName = document.querySelector(".input_name").value; + var errorName = document.querySelector(".error_name"); + var errorPassword = document.querySelector(".error_password"); + var errorEmail = document.querySelector(".error_email"); + var regularExpressionName_0 = /[0-9]+/; + var testnumber = regularExpressionName_0.test(inputName); + if (inputName) { + if (testnumber === true) { + errorName.innerHTML = "** Enter name without numbers "; + } + } + var regularExpressionName_1 = /\s/; + var testnumber_1 = regularExpressionName_1.test(inputName); + if (inputName) { + if (testnumber_1 === false && testnumber === false) { + errorName.innerHTML = "** Please enter full name "; + } + } + var regularExpressionName_2 = /[\W\S_]/; + var testnumber_2 = regularExpressionName_2.test(inputName); + if (inputName) { + if (testnumber_2 === false && testnumber === false && testnumber_1 === true) { + errorName.innerHTML = "** These characters are not valid for a username "; + } + } + // --------------------------------------------- + var inputPassword = document.querySelector(".input_password").value; + if (inputPassword.length < 5 && inputPassword.length > 20) { + errorPassword.innerHTML = "** The password must be between 5 and 20 characters"; + } + var regularExpressionName_3 = /[A-Z]+/; + var testnumber_3 = regularExpressionName_3.test(inputPassword); + if (testnumber_3 === false && inputPassword.length > 5 && inputPassword.length < 20) { + errorPassword.innerHTML = "** The password must contain capital letters"; + } + var regularExpressionName_4 = /\s/; + var testnumber_4 = regularExpressionName_4.test(inputPassword); + if (testnumber_4 === true && inputPassword.length > 5 && inputPassword.length < 20 && testnumber_3 === true) { + errorPassword.innerHTML = "** Password cannot contain the space character"; + } + // ------------------------------------------------ + var inputEmail = document.querySelector(".input_emaul").value; + var regularExpressionEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + var testnumber_5 = regularExpressionEmail.test(inputEmail); + if (testnumber_5 === false) { + errorEmail.innerHTML = "**The email is invalid"; + } + if (testnumber === false && testnumber_1 === true && testnumber_2 === true && inputPassword.length > 5 && inputPassword.length < 20 && testnumber_3 === true && testnumber_4 === false && testnumber_5 === true) { + window.open("./shop/index.html"); + window.parent.close(); + } +}); diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/dist/login.css b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/dist/login.css new file mode 100644 index 000000000..83999c572 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/dist/login.css @@ -0,0 +1,69 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +body { + background-color: black; +} + +.login { + position: absolute; + left: 25%; + top: 10%; + font-size: 60px; + text-align: center; + color: #f30303; + font-family: "Lilita One", cursive; +} + +.container { + position: relative; + margin: auto; + margin-top: 15vh; + background-color: #fcf9d8; + width: 380px; + height: 420px; + border-radius: 20px; + box-shadow: 5px 10px 20px 5px #979797; +} +.container__input { + position: relative; + height: 30%; +} + +label { + margin-left: 10%; + color: black; + font-size: larger; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +input { + margin-left: 10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: white; + box-shadow: 2px 5px 10px #fefefe; +} + +button { + background-color: #71b609; + font-size: larger; + color: white; + font-weight: bold; + border-radius: 5px; + margin-top: 10px; + margin-left: 40%; +} + +button:hover { + background-color: #426d02; +} + +span { + position: relative; + left: 45px; + color: red; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-weight: bold; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/dist/login.js b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/dist/login.js new file mode 100644 index 000000000..4cbdb73c9 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/dist/login.js @@ -0,0 +1,70 @@ +var btn = document.querySelector(".enter"); +btn.addEventListener("click", function (e) { + var inputName = document.querySelector(".input_name") + .value; + var errorName = document.querySelector(".error_name"); + var errorPassword = document.querySelector(".error_password"); + var errorEmail = document.querySelector(".error_email"); + var regularExpressionName_0 = /[0-9]+/; + var testnumber = regularExpressionName_0.test(inputName); + if (inputName) { + if (testnumber === true) { + errorName.innerHTML = "** Enter name without numbers "; + } + } + var regularExpressionName_1 = /\s/; + var testnumber_1 = regularExpressionName_1.test(inputName); + if (inputName) { + if (testnumber_1 === false && testnumber === false) { + errorName.innerHTML = "** Please enter full name "; + } + } + var regularExpressionName_2 = /[\W\S_]/; + var testnumber_2 = regularExpressionName_2.test(inputName); + if (inputName) { + if (testnumber_2 === false && + testnumber === false && + testnumber_1 === true) { + errorName.innerHTML = "** These characters are not valid for a username "; + } + } + // --------------------------------------------- + var inputPassword = document.querySelector(".input_password").value; + if (inputPassword.length < 5 || inputPassword.length > 20) { + errorPassword.innerHTML = "** The password must be between
      5 and 20 characters"; + } + var regularExpressionName_3 = /[A-Z]+/; + var testnumber_3 = regularExpressionName_3.test(inputPassword); + if (testnumber_3 === false && + inputPassword.length > 5 && + inputPassword.length < 20) { + errorPassword.innerHTML = "** The password must contain capital letters"; + } + var regularExpressionName_4 = /\s/; + var testnumber_4 = regularExpressionName_4.test(inputPassword); + if (testnumber_4 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true) { + errorPassword.innerHTML = "** Password cannot contain the space character"; + } + // ------------------------------------------------ + var inputEmail = document.querySelector(".input_emaul") + .value; + var regularExpressionEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + var testnumber_5 = regularExpressionEmail.test(inputEmail); + if (testnumber_5 === false) { + errorEmail.innerHTML = "**The email is invalid"; + } + if (testnumber === false && + testnumber_1 === true && + testnumber_2 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true && + testnumber_4 === false && + testnumber_5 === true) { + window.open("../shop/index.html"); + window.parent.close(); + } +}); diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.css b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.css new file mode 100644 index 000000000..d2c888ed8 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.css @@ -0,0 +1,69 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +body { + background-color: rgb(0, 0, 0); +} + +.login { + position: absolute; + left: 25%; + top: 10%; + font-size: 60px; + text-align: center; + color: rgb(243, 3, 3); + font-family: "Lilita One", cursive; +} + +.container { + position: relative; + margin: auto; + margin-top: 15vh; + background-color: rgb(252, 249, 216); + width: 380px; + height: 420px; + border-radius: 20px; + box-shadow: 5px 10px 20px 5px rgb(151, 151, 151); +} +.container__input { + position: relative; + height: 30%; +} + +label { + margin-left: 10%; + color: rgb(0, 0, 0); + font-size: larger; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +input { + margin-left: 10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: rgb(255, 255, 255); + box-shadow: 2px 5px 10px rgb(254, 254, 254); +} + +button { + background-color: rgb(113, 182, 9); + font-size: larger; + color: white; + font-weight: bold; + border-radius: 5px; + margin-top: 10px; + margin-left: 40%; +} + +button:hover { + background-color: rgb(66, 109, 2); +} + +span { + position: relative; + left: 45px; + color: red; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-weight: bold; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.html b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.html new file mode 100644 index 000000000..92d463727 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.html @@ -0,0 +1,41 @@ + + + + + + + Document + + + + + + +
      + + +
      + +
      +
      +
      + +
      +
      +
      + +
      +
      +
      + + +
      + + + + + diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.scss b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.scss new file mode 100644 index 000000000..8abbf1373 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.scss @@ -0,0 +1,83 @@ +@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap'); + +body{ + background-color: rgb(0, 0, 0); + +} +.login{ + position: absolute; + left: 25%; + top: 10%; + font-size: 60px; + text-align: center; + color: rgb(243, 3, 3); + font-family: 'Lilita One', cursive; +} + +.container{ + + position: relative; + margin: auto; + margin-top: 15vh; + background-color: rgb(252, 249, 216); + width: 380px; + height: 420px; + border-radius: 20px; + box-shadow: 5px 10px 20px 5px rgb(151, 151, 151) ; + + +&__input{ +position:relative ; + height: 30%; + + + +} + +} + + +label{ + + margin-left: 10%; + color: rgb(0, 0, 0); + font-size: larger; + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + + + +} + +input{ + margin-left:10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: rgb(255, 255, 255); + box-shadow: 2px 5px 10px rgb(254, 254, 254) ; +} + +button{ + +background-color: rgb(113, 182, 9); +font-size: larger; +color: white; +font-weight: bold; +border-radius: 5px; +margin-top: 10px; +margin-left: 40%; +} +button:hover{ + background-color: rgb(66, 109, 2); +} +span{ + position: relative; + left: 45px; + color: red; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: bold; + + +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.ts b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.ts new file mode 100644 index 000000000..7f146a427 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/login/login.ts @@ -0,0 +1,96 @@ +let btn = document.querySelector(".enter") as HTMLButtonElement; + +btn.addEventListener("click", (e) => { + let inputName = (document.querySelector(".input_name") as HTMLInputElement) + .value; + + let errorName = document.querySelector(".error_name") as HTMLSpanElement; + let errorPassword = document.querySelector( + ".error_password" + ) as HTMLSpanElement; + let errorEmail = document.querySelector(".error_email") as HTMLSpanElement; + + let regularExpressionName_0 = /[0-9]+/; + let testnumber = regularExpressionName_0.test(inputName); + if (inputName) { + if (testnumber === true) { + errorName.innerHTML = "** Enter name without numbers "; + } + } + + let regularExpressionName_1 = /\s/; + let testnumber_1 = regularExpressionName_1.test(inputName); + if (inputName) { + if (testnumber_1 === false && testnumber === false) { + errorName.innerHTML = "** Please enter full name "; + } + } + + let regularExpressionName_2 = /[\W\S_]/; + let testnumber_2 = regularExpressionName_2.test(inputName); + if (inputName) { + if ( + testnumber_2 === false && + testnumber === false && + testnumber_1 === true + ) { + errorName.innerHTML = "** These characters are not valid for a username "; + } + } + + // --------------------------------------------- + + let inputPassword = ( + document.querySelector(".input_password") as HTMLInputElement + ).value; + + if (inputPassword.length < 5 || inputPassword.length > 20) { + errorPassword.innerHTML = `** The password must be between
      5 and 20 characters`; + } + + let regularExpressionName_3 = /[A-Z]+/; + let testnumber_3 = regularExpressionName_3.test(inputPassword); + if ( + testnumber_3 === false && + inputPassword.length > 5 && + inputPassword.length < 20 + ) { + errorPassword.innerHTML = "** The password must contain capital letters"; + } + + let regularExpressionName_4 = /\s/; + let testnumber_4 = regularExpressionName_4.test(inputPassword); + if ( + testnumber_4 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true + ) { + errorPassword.innerHTML = "** Password cannot contain the space character"; + } + + // ------------------------------------------------ + + let inputEmail = (document.querySelector(".input_emaul") as HTMLInputElement) + .value; + let regularExpressionEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + let testnumber_5 = regularExpressionEmail.test(inputEmail); + if (testnumber_5 === false) { + errorEmail.innerHTML = "**The email is invalid"; + } + + if ( + testnumber === false && + testnumber_1 === true && + testnumber_2 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true && + testnumber_4 === false && + testnumber_5 === true + ) { + window.open("../shop/index.html"); + window.parent.close(); + } +}); + diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/cothingStore.ts b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/cothingStore.ts new file mode 100644 index 000000000..cb11d5a6d --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/cothingStore.ts @@ -0,0 +1,137 @@ +class MensShirts { + constructor(public type: string, public price: number) {} +} + +class Shoes { + constructor(public type: string, public price: number) {} +} + +class MensPants { + constructor(public type: string, public price: number) {} +} + +let buttonedShirt = new MensShirts("buttoned shirt", 200); +let t_Shirt = new MensShirts("t-shirt", 100); +let leansShirt = new MensShirts("jeans shirt", 250); + +let boots = new Shoes("boots", 350); +let moccasin = new Shoes("moccasin", 450); +let peko = new Shoes("peko", 450); + +let elegant = new MensPants("elegant", 200); +let jeans = new MensPants("jeans", 600); +let shortPants = new MensPants("short pants", 800); + +let cothingStore = [ + buttonedShirt, + t_Shirt, + leansShirt, + boots, + moccasin, + peko, + elegant, + jeans, + shortPants, +]; + +let t_shirt = document.querySelector(".img_t") as HTMLImageElement; +let shoes = document.querySelector(".img_s") as HTMLImageElement; +let pants = document.querySelector(".img_p") as HTMLImageElement; + +let count = 0; +t_shirt.addEventListener("click", (e) => { + count++; + if (count === 1) { + let ul_shirt = document.querySelector(".Shirt_list") as HTMLUListElement; + + for (let i = 0; i < 3; i++) { + const List_shirt = document.createElement("li"); + List_shirt.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; + ul_shirt.appendChild(List_shirt); + } + } +}); +let count1 = 0; +shoes.addEventListener("click", (e) => { + count1++; + if (count1 === 1) { + let ul_shoes = document.querySelector(".shoes_list") as HTMLUListElement; + + for (let i = 3; i < 6; i++) { + const shoes = document.createElement("li"); + shoes.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; + ul_shoes.appendChild(shoes); + } + } +}); + +let count2 = 0; +pants.addEventListener("click", (e) => { + count2++; + if (count2 === 1) { + let ul_pants = document.querySelector(".pans_list") as HTMLUListElement; + for (let i = 6; i < 9; i++) { + const pants = document.createElement("li"); + pants.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; + ul_pants.appendChild(pants); + } + } +}); + +const Item_search = document.querySelector(".Item_search") as HTMLInputElement; +let ul_search = document.querySelector(".search_list") as HTMLUListElement; + +Item_search.addEventListener("keyup", (e) => { + ul_search.replaceChildren(); + if (Item_search.value != "") { + for (let i in cothingStore) { + debugger; + if ( + cothingStore[i].type.includes(Item_search.value.toLowerCase()) || + cothingStore[i].price.toString().includes(Item_search.value) + ) { + const li_search = document.createElement("li"); + li_search.innerHTML = `${cothingStore[i].type} : ${cothingStore[i].price}`; + ul_search.appendChild(li_search); + } + } + } else { + ul_search.replaceChildren(); + } +}); + +// } + +// class Person { +// constructor(public name: string, public age: number, public gender: string) {} +// } + +// const noam = new Person("noam", 33, "male"); +// const ruth = new Person("Ruth", 27, "female"); +// const dan = new Person("Dan", 41, "male"); +// /// we use lists to hold togther many elements +// const persons: Person[] = [noam, ruth, dan]; +// console.log(persons); +// console.log(persons[1]); + +// console.log(persons.length); +// //sort +// persons.sort((a, b) => a.age - b.age); + +// console.log(persons); +// //filter +// const personsAbove30: Person[] = persons.filter((person) => person.age > 30); +// console.log(personsAbove30); + +// //callback +// function logPerson(person: Person) { +// console.log(person.name, person.age); +// } + +// persons.forEach(logPerson); + +// persons.forEach(function (person: Person) { +// console.log(person.name, person.age); +// }); + +// console.log(persons.filter((person) => person.gender === "female")); diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/MensShirts.js b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/MensShirts.js new file mode 100644 index 000000000..7829c165e --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/MensShirts.js @@ -0,0 +1,3 @@ +// class MensShirts { +// constructor(public type: string, public price: number) {} +// } diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/cothingStore.js b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/cothingStore.js new file mode 100644 index 000000000..72c998c26 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/cothingStore.js @@ -0,0 +1,126 @@ +var MensShirts = /** @class */ (function () { + function MensShirts(type, price) { + this.type = type; + this.price = price; + } + return MensShirts; +}()); +var Shoes = /** @class */ (function () { + function Shoes(type, price) { + this.type = type; + this.price = price; + } + return Shoes; +}()); +var MensPants = /** @class */ (function () { + function MensPants(type, price) { + this.type = type; + this.price = price; + } + return MensPants; +}()); +var buttonedShirt = new MensShirts("buttoned shirt", 200); +var t_Shirt = new MensShirts("t-shirt", 100); +var leansShirt = new MensShirts("jeans shirt", 250); +var boots = new Shoes("boots", 350); +var moccasin = new Shoes("moccasin", 450); +var peko = new Shoes("peko", 450); +var elegant = new MensPants("elegant", 200); +var jeans = new MensPants("jeans", 600); +var shortPants = new MensPants("short pants", 800); +var cothingStore = [ + buttonedShirt, + t_Shirt, + leansShirt, + boots, + moccasin, + peko, + elegant, + jeans, + shortPants, +]; +var t_shirt = document.querySelector(".img_t"); +var shoes = document.querySelector(".img_s"); +var pants = document.querySelector(".img_p"); +var count = 0; +t_shirt.addEventListener("click", function (e) { + count++; + if (count === 1) { + var ul_shirt = document.querySelector(".Shirt_list"); + for (var i = 0; i < 3; i++) { + var List_shirt = document.createElement("li"); + List_shirt.innerHTML = cothingStore[i].type + " The price is : " + cothingStore[i].price + " "; + ul_shirt.appendChild(List_shirt); + } + } +}); +var count1 = 0; +shoes.addEventListener("click", function (e) { + count1++; + if (count1 === 1) { + var ul_shoes = document.querySelector(".shoes_list"); + for (var i = 3; i < 6; i++) { + var shoes_1 = document.createElement("li"); + shoes_1.innerHTML = cothingStore[i].type + " The price is : " + cothingStore[i].price + " "; + ul_shoes.appendChild(shoes_1); + } + } +}); +var count2 = 0; +pants.addEventListener("click", function (e) { + count2++; + if (count2 === 1) { + var ul_pants = document.querySelector(".pans_list"); + for (var i = 6; i < 9; i++) { + var pants_1 = document.createElement("li"); + pants_1.innerHTML = cothingStore[i].type + " The price is : " + cothingStore[i].price + " "; + ul_pants.appendChild(pants_1); + } + } +}); +var Item_search = document.querySelector(".Item_search"); +var ul_search = document.querySelector(".search_list"); +Item_search.addEventListener("keyup", function (e) { + ul_search.replaceChildren(); + if (Item_search.value != "") { + for (var i in cothingStore) { + debugger; + if (cothingStore[i].type.includes(Item_search.value.toLowerCase()) || + cothingStore[i].price.toString().includes(Item_search.value)) { + var li_search = document.createElement("li"); + li_search.innerHTML = cothingStore[i].type + " : " + cothingStore[i].price; + ul_search.appendChild(li_search); + } + } + } + else { + ul_search.replaceChildren(); + } +}); +// } +// class Person { +// constructor(public name: string, public age: number, public gender: string) {} +// } +// const noam = new Person("noam", 33, "male"); +// const ruth = new Person("Ruth", 27, "female"); +// const dan = new Person("Dan", 41, "male"); +// /// we use lists to hold togther many elements +// const persons: Person[] = [noam, ruth, dan]; +// console.log(persons); +// console.log(persons[1]); +// console.log(persons.length); +// //sort +// persons.sort((a, b) => a.age - b.age); +// console.log(persons); +// //filter +// const personsAbove30: Person[] = persons.filter((person) => person.age > 30); +// console.log(personsAbove30); +// //callback +// function logPerson(person: Person) { +// console.log(person.name, person.age); +// } +// persons.forEach(logPerson); +// persons.forEach(function (person: Person) { +// console.log(person.name, person.age); +// }); +// console.log(persons.filter((person) => person.gender === "female")); diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/mensPants.js b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/mensPants.js new file mode 100644 index 000000000..25c13e566 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/mensPants.js @@ -0,0 +1,3 @@ +// class MensPants { +// constructor(public type: string, public price: number) {} +// } diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/shoes.js b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/shoes.js new file mode 100644 index 000000000..d41837626 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/shoes.js @@ -0,0 +1,3 @@ +// class Shoes{ +// constructor(public type: string ,public price:number){} +// } diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/style.css b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/style.css new file mode 100644 index 000000000..8c32a9ed7 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/dist/style.css @@ -0,0 +1,69 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +body { + background-color: black; +} + +h1 { + border: none; + font-size: 45px; + text-align: center; + color: #f7b3b3; + font-family: "Lilita One", cursive; +} + +.hello { + color: #c1f9f9; +} + +.wraps_pictures { + display: flex; + justify-content: space-evenly; +} + +img { + width: 200px; + height: 200px; + border-radius: 10px; + filter: drop-shadow(8px 8px 10px gray); +} + +img:hover { + filter: opacity(20%); +} + +.ul { + display: flex; + justify-content: space-evenly; + margin-right: 80px; + margin-left: 40px; +} +.ul li { + color: yellow; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +li { + color: yellow; + font-family: "Lilita One", cursive; +} + +label { + box-shadow: 5px 5px 2px #565555; + margin-left: 40%; + color: #53e931; + font-family: "Lilita One", cursive; +} + +input { + margin-left: 28%; + font-weight: bold; + font-size: larger; + border-radius: 5px; + border: none; + box-shadow: 8px 8px 10px gray; + background-color: #f4f4f4; +} + +.search_list { + margin-left: 27%; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/MensShirts.ts b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/MensShirts.ts new file mode 100644 index 000000000..7829c165e --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/MensShirts.ts @@ -0,0 +1,3 @@ +// class MensShirts { +// constructor(public type: string, public price: number) {} +// } diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/mensPants.ts b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/mensPants.ts new file mode 100644 index 000000000..25c13e566 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/mensPants.ts @@ -0,0 +1,3 @@ +// class MensPants { +// constructor(public type: string, public price: number) {} +// } diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/shoes.ts b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/shoes.ts new file mode 100644 index 000000000..966866fe9 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/eroor/shoes.ts @@ -0,0 +1,3 @@ +// class Shoes{ +// constructor(public type: string ,public price:number){} +// } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/p.jpeg b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/p.jpeg new file mode 100644 index 000000000..35913f739 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/p.jpeg differ diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/s.jpeg b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/s.jpeg new file mode 100644 index 000000000..53771b5ac Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/s.jpeg differ diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/t.jpeg b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/t.jpeg new file mode 100644 index 000000000..cb16ea139 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/img/t.jpeg differ diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/index.html b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/index.html new file mode 100644 index 000000000..3cc4313ae --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + Document + + +

      Welcome to the clothing store

      +

      Select a category

      +
      + +
      + + + +
      +
      +
      +
        +
        +
          +
          +
            +
            + +



            +
            +

            + +
            +
              + + + + + diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/style.css b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/style.css new file mode 100644 index 000000000..cd042a8a2 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/style.css @@ -0,0 +1,69 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +body { + background-color: rgb(0, 0, 0); +} + +h1 { + border: none; + font-size: 45px; + text-align: center; + color: rgb(247, 179, 179); + font-family: "Lilita One", cursive; +} + +.hello { + color: rgb(193, 249, 249); +} + +.wraps_pictures { + display: flex; + justify-content: space-evenly; +} + +img { + width: 200px; + height: 200px; + border-radius: 10px; + filter: drop-shadow(8px 8px 10px gray); +} + +img:hover { + filter: opacity(20%); +} + +.ul { + display: flex; + justify-content: space-evenly; + margin-right: 80px; + margin-left: 40px; +} +.ul li { + color: yellow; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +li { + color: yellow; + font-family: "Lilita One", cursive; +} + +label { + box-shadow: 5px 5px 2px rgb(86, 85, 85); + margin-left: 40%; + color: rgb(83, 233, 49); + font-family: "Lilita One", cursive; +} + +input { + margin-left: 28%; + font-weight: bold; + font-size: larger; + border-radius: 5px; + border: none; + box-shadow: 8px 8px 10px gray; + background-color: rgb(244, 244, 244); +} + +.search_list { + margin-left: 27%; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/style.scss b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/style.scss new file mode 100644 index 000000000..93fc43f48 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/Shlomo Azenkot/shop/style.scss @@ -0,0 +1,83 @@ + +@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap'); + +body{ + background-color: rgb(0, 0, 0); + +} +h1{ + + border: none; + font-size: 45px; + text-align: center; + color: rgb(247, 179, 179); + font-family: 'Lilita One', cursive; +} +.hello{ + color: rgb(193, 249, 249); +} +.wraps_pictures{ + + display: flex; + justify-content: space-evenly; + + + + + + +} +img{ + width: 200px; + height: 200px; + border-radius: 10px; + filter: drop-shadow(8px 8px 10px gray); + +} + + img:hover{ + filter: opacity(20%); + } + + .ul{ + display: flex; + justify-content: space-evenly; + margin-right: 80px; + margin-left: 40px; + li{ + color: yellow; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + + } + li{ + color: yellow; + font-family: 'Lilita One', cursive; + } +// .Search{ +// display: flex; + +// } + + label{ + box-shadow: 5px 5px 2px rgb(86, 85, 85); + margin-left: 40%; + color: rgb(83, 233, 49); + font-family: 'Lilita One', cursive; + + } + input{ + margin-left: 28%; + font-weight: bold; + font-size: larger; + border-radius: 5px; + border: none ; + box-shadow:8px 8px 10px gray ; + background-color: rgb(244, 244, 244); + } + .search_list{ + margin-left: 27%; + } + + + diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/control.ts b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/control.ts new file mode 100644 index 000000000..7ec16d8b5 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/control.ts @@ -0,0 +1,119 @@ +const boardGame = document.getElementById("boardGame")! +const boardGameChild = boardGame.querySelectorAll("input")! +const scorePlayer1 = document.querySelector(".score-player1")! as HTMLSpanElement +const scorePlayer2 = document.querySelector(".score-player2")! as HTMLSpanElement + +let turn = true; +let score1 = 0, score2 = 0 + +function resetBoard() { + const boardGame = document.getElementById("boardGame")! + + const boardGameChild = boardGame.querySelectorAll("input")! + for (let i = 0; i < 9; i++) { + boardGameChild[i].value = '' + } +} + +function resetGame() { + resetBoard() + score1 = 0; score2 = 0 + turn = true; +} + +function gamesRules() { + scorePlayer2.style.backgroundColor = "rgb(177, 190, 196)" + scorePlayer1.style.backgroundColor = "green" + boardGameChild.forEach((ceil) => { + ceil.addEventListener('click', () => { + if (ceil.textContent === '') { + if (turn === true) { + player1Sound.play() + ceil.value! = "x"; + scorePlayer1!.style.backgroundColor = "" + scorePlayer2!.style.backgroundColor = "green" + turn = false + } else if (turn === false) { + player2Sound.play() + ceil.value! = "o"; + scorePlayer2.style.backgroundColor = "" + scorePlayer1.style.backgroundColor = "green" + turn = true + } + else { + + } + winOrNot(opinionToWin) + } else { + console.log("no good"); + } + }) + }) +} + +function winOrNot(opinionToWin: number[][]) { + for (let i = 0; i < opinionToWin.length; i++) { + if ( + boardGameChild[opinionToWin[i][0]].value === "x" && + boardGameChild[opinionToWin[i][1]].value === "x" && + boardGameChild[opinionToWin[i][2]].value === "x" + ) { + winGame(1) + } else if ( + boardGameChild[opinionToWin[i][0]].value === "o" && + boardGameChild[opinionToWin[i][1]].value === "o" && + boardGameChild[opinionToWin[i][2]].value === "o" + ) { + winGame(2) + } + } +} + +function winGame(playerWin: number) { + const fireWorks = document.getElementById("fireWorks") as HTMLDivElement + const playerWinsH1 = document.getElementById("playerWinsH1") as HTMLSpanElement + const scorePlayer1score = document.getElementById("player1Score")! as HTMLSpanElement + const scorePlayer2score = document.getElementById("player2Score")! as HTMLSpanElement + if (playerWin === 1) { + score1++ + scorePlayer1score.textContent = score1.toString() + fireWorks!.style.display = "flex" + playerWinsH1!.textContent = "player 1" + } else + if (playerWin === 2) { + score2++ + scorePlayer2score.textContent = score2.toString(); + fireWorks!.style.display = "flex" + playerWinsH1!.textContent = "player 2" + + } + gameOver.play() + + setTimeout(() => { + fireWorks!.style.display = "none" + },2500); + + resetBoard() + +} + +function resetScore() { + const resetBtnScore = document.querySelector(".btn-reset-score")! as HTMLButtonElement + const scorePlayer1score = document.getElementById("player1Score")! as HTMLSpanElement + const scorePlayer2score = document.getElementById("player2Score")! as HTMLSpanElement + + resetBtnScore.addEventListener('click', () => { + score1 = 0 + score2 = 0 + + scorePlayer1score.textContent = score1.toString() + scorePlayer2score.textContent = score2.toString() + + }) +} + +function resetButton() { + const resetBtn = document.querySelector('.btn-reset')! as HTMLButtonElement + resetBtn.addEventListener('click', resetGame) + console.log("ResetButton"); +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/control.js b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/control.js new file mode 100644 index 000000000..744dd9b10 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/control.js @@ -0,0 +1,103 @@ +"use strict"; +const boardGame = document.getElementById("boardGame"); +const boardGameChild = boardGame.querySelectorAll("input"); +const scorePlayer1 = document.querySelector(".score-player1"); +const scorePlayer2 = document.querySelector(".score-player2"); +let turn = true; +let score1 = 0, score2 = 0; +function resetBoard() { + const boardGame = document.getElementById("boardGame"); + const boardGameChild = boardGame.querySelectorAll("input"); + for (let i = 0; i < 9; i++) { + boardGameChild[i].value = ''; + } +} +function resetGame() { + resetBoard(); + score1 = 0; + score2 = 0; + turn = true; +} +function gamesRules() { + scorePlayer2.style.backgroundColor = "rgb(177, 190, 196)"; + scorePlayer1.style.backgroundColor = "green"; + boardGameChild.forEach((ceil) => { + ceil.addEventListener('click', () => { + if (ceil.textContent === '') { + if (turn === true) { + player1Sound.play(); + ceil.value = "x"; + scorePlayer1.style.backgroundColor = ""; + scorePlayer2.style.backgroundColor = "green"; + turn = false; + } + else if (turn === false) { + player2Sound.play(); + ceil.value = "o"; + scorePlayer2.style.backgroundColor = ""; + scorePlayer1.style.backgroundColor = "green"; + turn = true; + } + else { + } + winOrNot(opinionToWin); + } + else { + console.log("no good"); + } + }); + }); +} +function winOrNot(opinionToWin) { + for (let i = 0; i < opinionToWin.length; i++) { + if (boardGameChild[opinionToWin[i][0]].value === "x" && + boardGameChild[opinionToWin[i][1]].value === "x" && + boardGameChild[opinionToWin[i][2]].value === "x") { + winGame(1); + } + else if (boardGameChild[opinionToWin[i][0]].value === "o" && + boardGameChild[opinionToWin[i][1]].value === "o" && + boardGameChild[opinionToWin[i][2]].value === "o") { + winGame(2); + } + } +} +function winGame(playerWin) { + const fireWorks = document.getElementById("fireWorks"); + const playerWinsH1 = document.getElementById("playerWinsH1"); + const scorePlayer1score = document.getElementById("player1Score"); + const scorePlayer2score = document.getElementById("player2Score"); + if (playerWin === 1) { + score1++; + scorePlayer1score.textContent = score1.toString(); + fireWorks.style.display = "flex"; + playerWinsH1.textContent = "player 1"; + } + else if (playerWin === 2) { + score2++; + scorePlayer2score.textContent = score2.toString(); + fireWorks.style.display = "flex"; + playerWinsH1.textContent = "player 2"; + } + gameOver.play(); + setTimeout(() => { + fireWorks.style.display = "none"; + }, 2500); + resetBoard(); +} +function resetScore() { + const resetBtnScore = document.querySelector(".btn-reset-score"); + const scorePlayer1score = document.getElementById("player1Score"); + const scorePlayer2score = document.getElementById("player2Score"); + resetBtnScore.addEventListener('click', () => { + score1 = 0; + score2 = 0; + scorePlayer1score.textContent = score1.toString(); + scorePlayer2score.textContent = score2.toString(); + }); +} +function resetButton() { + const resetBtn = document.querySelector('.btn-reset'); + resetBtn.addEventListener('click', resetGame); + console.log("ResetButton"); +} diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/helper.js b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/helper.js new file mode 100644 index 000000000..60d1da543 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/helper.js @@ -0,0 +1,13 @@ +"use strict"; +const opinionToWin = [ + [0, 1, 2], [3, 4, 5], + [6, 7, 8], [0, 3, 6], + [1, 4, 7], [2, 5, 8], + [2, 4, 6], [0, 4, 8] +]; +const player1Sound = new Audio(); +player1Sound.src = "./sound/player1.mp3"; +const player2Sound = new Audio(); +player2Sound.src = "./sound/player2.mp3"; +const gameOver = new Audio(); +gameOver.src = "./sound/gameOver.mp3"; diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/index.js new file mode 100644 index 000000000..883854665 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/index.js @@ -0,0 +1,12 @@ +"use strict"; +function startGame() { + btnStart.addEventListener('click', () => { + gameStart.style.display = "none"; + resetGame(); + gamesRules(); + resetButton(); + resetScore(); + }); +} +// getNameFromPlayers() +startGame(); diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/view.js b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/view.js new file mode 100644 index 000000000..930972de9 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/dist/view.js @@ -0,0 +1,16 @@ +"use strict"; +const btnStart = document.getElementById("btnStart"); +const gameStart = document.getElementById("startGameContainer"); +const player1Name = document.getElementById("player1Name"); +const player2Name = document.getElementById("player2Name"); +const formPlayerName = document.getElementById("formPlayerName"); +// function getNameFromPlayers() :void{ +// btnStart!.addEventListener("click", (e: Event) => { +// if (player1Name.value === "" || player2Name.value === "") { +// console.log("no fill names"); +// } else { +// scorePlayer1.innerHTML = `${player1Name.value} :
              0` +// scorePlayer2.innerHTML = `${player2Name.value} :
              0` +// } +// }) +// } diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/helper.ts b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/helper.ts new file mode 100644 index 000000000..5772775f3 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/helper.ts @@ -0,0 +1,13 @@ +const opinionToWin = [ + [0, 1, 2], [3, 4, 5], + [6, 7, 8], [0, 3, 6], + [1, 4, 7], [2, 5, 8], + [2, 4, 6], [0, 4, 8] +]; + +const player1Sound = new Audio(); +player1Sound.src = "./sound/player1.mp3" +const player2Sound = new Audio(); +player2Sound.src = "./sound/player2.mp3" +const gameOver = new Audio(); +gameOver.src = "./sound/gameOver.mp3" diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/LDPlayer9_ens_com.mobile.legends_35339114_ld.exe b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/LDPlayer9_ens_com.mobile.legends_35339114_ld.exe new file mode 100644 index 000000000..c1fe7fc11 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/LDPlayer9_ens_com.mobile.legends_35339114_ld.exe differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/background.jpg b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/background.jpg new file mode 100644 index 000000000..1fdf51809 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/background.jpg differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/fireworks.gif b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/fireworks.gif new file mode 100644 index 000000000..a1bf59469 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/fireworks.gif differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/winzip27-p003.exe b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/winzip27-p003.exe new file mode 100644 index 000000000..5ebcb2566 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/imgs/winzip27-p003.exe differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/index.html b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/index.html new file mode 100644 index 000000000..116b84a76 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/index.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + tic-tac Game + + +
              +
              +

              Tic Tac Game

              +
              +
              Player1
              0
              +
              Player2
              0
              +
              + +
              + +
              + + + + + + + + + +
              + + + +
              + +
              +

              Player 2

              +

              Wins !

              +
              + +
              +
              + +
              +

              Welcome to Tic Tac Game

              +
              + + +
              + +
              + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/index.ts b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/index.ts new file mode 100644 index 000000000..4d16a298f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/index.ts @@ -0,0 +1,12 @@ +function startGame() { + btnStart!.addEventListener('click', () => { + gameStart.style.display = "none" + resetGame() + gamesRules() + resetButton() + resetScore() + }) +} + +// getNameFromPlayers() +startGame() diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/gameOver.mp3 b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/gameOver.mp3 new file mode 100644 index 000000000..414bf6514 Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/gameOver.mp3 differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/player1.mp3 b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/player1.mp3 new file mode 100644 index 000000000..03533a07a Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/player1.mp3 differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/player2.mp3 b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/player2.mp3 new file mode 100644 index 000000000..4d3d245db Binary files /dev/null and b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/sound/player2.mp3 differ diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/style.css b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/style.css new file mode 100644 index 000000000..e4ce029d5 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/style.css @@ -0,0 +1,161 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: "Anton", sans-serif; + color: rgba(255, 255, 255, 0.849); + overflow-x: hidden; +} + +section.container { + width: 100vw; + min-height: 100vh; + background: url(./imgs/background.jpg); + background-size: cover; + background-repeat: no-repeat; + text-align: center; + padding: 16px 32px; +} +section.container header { + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; +} +section.container header .score-player { + display: flex; + width: 250px; + margin-right: 2px; + justify-content: space-around; +} +section.container header .score-player .score-player1, +section.container header .score-player .score-player2 { + color: black; + background-color: rgb(177, 190, 196); + font-size: 1.1rem; + border: 2px solid black; + padding: 8px; +} +section.container header button.btn-reset { + font-family: initial; + font-size: 1rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 70px; + border-radius: 25px; + background-color: rgba(240, 255, 255, 0.644); + outline: none; + cursor: pointer; +} +section.container div.board-game { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + text-align: center; + margin: 25px auto; + width: 450px; + height: 450px; + background-color: rgba(240, 248, 255, 0.747); + color: black; +} +section.container div.board-game input { + cursor: pointer; + font-size: 5rem; + background: linear-gradient(rgba(121, 77, 91, 0.2), #753a88); + display: grid; + place-items: center; + border: 2px solid black; +} +section.container div.board-game input:hover { + background: linear-gradient(rgba(26, 20, 22, 0.4509803922), rgba(116, 58, 136, 0.337254902)); + border: 3px solid rgba(0, 0, 0, 0.432); +} + +section.starting-game { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + padding: 16px 32px; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: calc(100% + 50px); + background-color: rgba(54, 54, 80, 0.918); +} +section.starting-game h1 { + color: #fff; + font-size: 3rem; +} +section.starting-game button { + font-weight: bold; + cursor: pointer; + margin-top: 15px; + padding: 16px 32px; + font-size: 1.5rem; + border-radius: 10px; + background-color: rgb(133, 196, 196); + transition: 0.1s ease; +} +section.starting-game button:hover { + background-color: rgb(49, 116, 116); +} +section.starting-game button:active { + transform: scale(1.1); +} +section.starting-game .form-player-name input { + display: none; + padding: 5px; + width: 250px; + font-size: 1.5rem; +} +section.starting-game ::-moz-placeholder { + font-size: 1.5rem; +} +section.starting-game :-ms-input-placeholder { + font-size: 1.5rem; +} +section.starting-game ::placeholder { + font-size: 1.5rem; +} + +.btn-reset-score { + font-family: initial; + font-size: 1.2rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 50px; + border-radius: 25px; + background-color: rgba(24, 102, 102, 0.877); + outline: none; + cursor: pointer; +} + +.fireworks { + display: none; + text-align: center; + align-items: center; + width: 470px; + height: 470px; + background-color: rgba(12, 12, 6, 0.61); + border-radius: 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.fireworks h1 { + color: rgb(233, 227, 227); + font-size: 2rem; +} +.fireworks img { + width: 200px; + height: 200px; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/style.scss b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/style.scss new file mode 100644 index 000000000..25ce0b0bd --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/style.scss @@ -0,0 +1,178 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + +} + +body { + font-family: 'Anton', sans-serif; + color: rgba(255, 255, 255, 0.849); + overflow-x: hidden; +} + +section.container { + width: 100vw; + min-height: 100vh; + background: url(./imgs/background.jpg); + background-size: cover; + background-repeat: no-repeat; + text-align: center; + padding: 16px 32px; + + + header { + + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; + + .score-player { + display: flex; + width: 250px; + margin-right: 2px; + justify-content: space-around; + + + .score-player1, + .score-player2 { + color: black; + background-color: rgb(177, 190, 196); + font-size: 1.1rem; + border: 2px solid black; + padding: 8px; + } + + + + } + + button.btn-reset { + font-family: initial; + font-size: 1rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 70px; + border-radius: 25px; + background-color: rgba(240, 255, 255, 0.644); + outline: none; + cursor: pointer; + + } + } + + div.board-game { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + text-align: center; + margin: 25px auto; + width: 450px; + height: 450px; + background-color: rgba(240, 248, 255, 0.747); + color: black; + + input { + cursor: pointer; + font-size: 5rem; + background: linear-gradient(#794d5b33 , #753a88); + display: grid; + place-items: center; + border: 2px solid black; + + &:hover { + background: linear-gradient(#1a141673 , #743a8856); + border: 3px solid rgba(0, 0, 0, 0.432); + } + + } + } +} + +section.starting-game { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + padding: 16px 32px; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: calc(100% + 50px); + background-color: rgba(54, 54, 80, 0.918); + + h1 { + color: #fff; + font-size: 3rem; + } + + button { + font-weight: bold; + cursor: pointer; + margin-top: 15px; + padding: 16px 32px; + font-size: 1.5rem; + border-radius: 10px; + background-color: rgb(133, 196, 196); + transition: 0.1s ease; + + &:hover { + background-color: rgb(49, 116, 116); + } + + &:active { + transform: scale(1.1); + } + } + + .form-player-name input { + display: none; + padding: 5px; + width: 250px; + font-size: 1.5rem; + } + + ::placeholder { + font-size: 1.5rem; + } +} + +.btn-reset-score { + + font-family: initial; + font-size: 1.2rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 50px; + border-radius: 25px; + background-color: rgba(24, 102, 102, 0.877); + outline: none; + cursor: pointer; +} +.fireworks{ + display: none; + text-align: center; + align-items: center; + width: 470px; + height: 470px; + background-color: rgba(12, 12, 6, 0.61); + border-radius: 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50% ,-50%); + + h1{ + color: rgb(233, 227, 227); + font-size: 2rem; + } + img{ + width: 200px; + height: 200px; + } +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/tsconfig.json b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/tsconfig.json new file mode 100644 index 000000000..37809f2ba --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/tsconfig.json @@ -0,0 +1,103 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ES6", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist/", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} diff --git a/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/view.ts b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/view.ts new file mode 100644 index 000000000..6dc221658 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/TicTacToe OrelKarako/view.ts @@ -0,0 +1,20 @@ +const btnStart = document.getElementById("btnStart"); +const gameStart = document.getElementById("startGameContainer")! + +const player1Name = document.getElementById("player1Name") as HTMLInputElement +const player2Name = document.getElementById("player2Name") as HTMLInputElement +const formPlayerName = document.getElementById("formPlayerName") as HTMLFormElement + + + +// function getNameFromPlayers() :void{ +// btnStart!.addEventListener("click", (e: Event) => { +// if (player1Name.value === "" || player2Name.value === "") { +// console.log("no fill names"); +// } else { +// scorePlayer1.innerHTML = `${player1Name.value} :
              0` +// scorePlayer2.innerHTML = `${player2Name.value} :
              0` +// } + +// }) +// } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/app.ts b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/app.ts new file mode 100644 index 000000000..966e076c3 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/app.ts @@ -0,0 +1,222 @@ +class Product { + private name: string; + private price: number; + private department: string; + private type: string; + private imageLink: string; + + constructor( + price: number, + name: string, + department: string, + type: string, + imageLink: string + ) { + this.price = price; + this.name = name; + this.department = department; + this.type = type; + this.imageLink = imageLink; + } + + get getPrice() { + return this.price; + } + get getName() { + return this.name; + } + get getDepartment() { + return this.department; + } + get getType() { + return this.type; + } + get getImg() { + return this.imageLink; + } +} + +const products: Product[] = []; +const jordanShoes = new Product( + 389, + "Nike - Air Jordan 1", + "Shoes", + "Sneakers", + "https://media.restocks.net/products/DZ5485-612/jordan-1-retro-high-og-lost-and-found-1-1000.png" +); +const airmaxShoes = new Product( + 125, + "Nike - Air Max 91", + "Shoes", + "Sneakers", + "https://media.s-bol.com/J6JlELlBz2xl/1200x629.jpg" +); +const adidasShoes = new Product( + 75, + "Adidas - Stan Smith", + "Shoes", + "Sneakers", + "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/b47d77eba6f945ea8dabac210127b11e_9366/Stan_Smith_Schoenen_Wit_FX5501_01_standard.jpg" +); +const drMarten = new Product( + 150, + "Dr. Martens - 1460", + "Shoes", + "Boots", + "https://i1.adis.ws/i/drmartens/11822006.80.jpg?$medium$" +); +const timberland = new Product( + 220, + "Timberland - 6 Inch Premium", + "Shoes", + "Boots", + "https://images.timberland.com/is/image/TimberlandEU/10061713-hero?wid=720&hei=720&fit=constrain,1&qlt=85,1&op_usm=1,1,6,0" +); +const leviesJeans = new Product( + 85, + "Levi's - 511", + "Clothing", + "Jeans", + "https://img01.ztat.net/article/spp-media-p1/3dd6fc1c3d263f209ef9d81e2bfb6116/8865a86f997f47729d56c2244b206301.jpg?imwidth=1800&filter=packshot" +); +const jackAndJonesJeans = new Product( + 32, + "Jack & Jones - JJILIAM JJORIGINAL", + "Clothing", + "Jeans", + "https://img01.ztat.net/article/spp-media-p1/bc5317870cb84632b8db5ba16b6de51b/aefcfeb467fe4200bad48bc31bd585f3.jpg?imwidth=1800&filter=packshot" +); +const bershakaJeans = new Product( + 30, + "Bershaka - Vintage", + "Clothing", + "Jeans", + "https://img01.ztat.net/article/spp-media-p1/d06e3f7598754a6b92849caf976c11ad/19db75dbf2534f42b5ab879bc65c1d2e.jpg?imwidth=1800&filter=packshot" +); +const gStarShirt = new Product( + 40, + "G Star - Dunda", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/b988173c979739d6a7b56f9baa28a64d/688f149c136746a1b309a6ebe6b81ebc.jpg?imwidth=1800&filter=packshot" +); +const forsbergShirt = new Product( + 20, + "Forsberg - Stoltson", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/ee297c1e0c3f45f5807f5103937b80d8/104f8962e2f44417828e8ff8492227b9.jpg?imwidth=1800&filter=packshot" +); +const leviesShirt = new Product( + 22, + "Levi's - Original Tee", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/01c276157f394da5ab43da3d9256f8e4/b526407ff60e490f8e318812063f6b51.jpg?imwidth=1800&filter=packshot" +); +const tommyHilShirt = new Product( + 60, + "Tommy Hilfiger - Regular", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/25fba27a171632689b1e9b0723884732/7a14e2a8b5c945059d7ae8c2051fae41.jpg?imwidth=1800&filter=packshot" +); + +products.push( + tommyHilShirt, + leviesShirt, + forsbergShirt, + gStarShirt, + bershakaJeans, + jackAndJonesJeans, + leviesJeans, + timberland, + drMarten, + adidasShoes, + jordanShoes, + airmaxShoes +); + +const filteredByType = (type: string, arr: Product[]): Product[] | false => { + try { + return arr.filter((ele) => ele.getType == type); + } catch (error) { + console.log(error); + return false; + } +}; + +const findCheapestItem = (arr: Product[]): Product | false => { + try { + return arr.reduce((prev, current) => + prev.getPrice < current.getPrice ? prev : current + ); + } catch (error) { + console.log(error); + return false; + } +}; + +const sortProductsByPrice = (arr: Product[]): Product[] | false => { + try { + return [...arr].sort((a, b) => a.getPrice - b.getPrice); + } catch (error) { + console.log(error); + return false; + } +}; + +const findProductName = (input: string, arr: Product[]): Product[] | false => { + try { + // I would use peoduct, instead of ele. this will help others to understand easly what is it taht you are passing + const filteredByString = arr.filter((ele) => + ele.getName.toLowerCase().includes(input) + ); + return filteredByString; + } catch (error) { + console.log(error); + return false; + } +}; + +// HW level 1 - filter list by type "Sneakers" +console.log(filteredByType("Sneakers", products)); + +// HW level 2 - Finding cheapest product on list +console.log(findCheapestItem(products)); + +// HW level 3 - Sorting all products from cheapest to most exepensive +console.log(sortProductsByPrice(products)); + +// HW level 4 - Finding product based on String +console.log(findProductName("da", products)); +console.log(findProductName("6", products)); +console.log(findProductName("bsrge", products)); + +//Tal: Created search app that displayes related products in real time +const searchInput = document.querySelector("#search") as HTMLInputElement; +const ulEl = document.querySelector(".displayedList") as HTMLUListElement; + +window.addEventListener("keyup", () => { + if (searchInput.value != "") { + //Tal: I would use ulElement instead of ulEl --> much more easy to undersant. + ulEl.replaceChildren(); + const listToDisplay: Product[] | boolean = findProductName( + searchInput.value, + products + ); + if (listToDisplay !== false) { + listToDisplay.forEach((ele) => { + //Tal: Using innerHTMl gives you better control on the apperance, and it is much more easy to understand + const li = document.createElement("li") as HTMLElement; + const img = document.createElement("img") as HTMLImageElement; + img.src = ele.getImg; + li.textContent = ele.getName; + li.append(img); + ulEl.append(li); + }); + } + } else { + ulEl.replaceChildren(); + } +}); diff --git a/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/dist/app.js b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/dist/app.js new file mode 100644 index 000000000..0c5dfa1b8 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/dist/app.js @@ -0,0 +1,142 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +var Product = /** @class */ (function () { + function Product(price, name, department, type, imageLink) { + this.price = price; + this.name = name; + this.department = department; + this.type = type; + this.imageLink = imageLink; + } + Object.defineProperty(Product.prototype, "getPrice", { + get: function () { + return this.price; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getName", { + get: function () { + return this.name; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getDepartment", { + get: function () { + return this.department; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getType", { + get: function () { + return this.type; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getImg", { + get: function () { + return this.imageLink; + }, + enumerable: false, + configurable: true + }); + return Product; +}()); +var products = []; +var jordanShoes = new Product(389, "Nike - Air Jordan 1", "Shoes", "Sneakers", "https://media.restocks.net/products/DZ5485-612/jordan-1-retro-high-og-lost-and-found-1-1000.png"); +var airmaxShoes = new Product(125, "Nike - Air Max 91", "Shoes", "Sneakers", "https://media.s-bol.com/J6JlELlBz2xl/1200x629.jpg"); +var adidasShoes = new Product(75, "Adidas - Stan Smith", "Shoes", "Sneakers", "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/b47d77eba6f945ea8dabac210127b11e_9366/Stan_Smith_Schoenen_Wit_FX5501_01_standard.jpg"); +var drMarten = new Product(150, "Dr. Martens - 1460", "Shoes", "Boots", "https://i1.adis.ws/i/drmartens/11822006.80.jpg?$medium$"); +var timberland = new Product(220, "Timberland - 6 Inch Premium", "Shoes", "Boots", "https://images.timberland.com/is/image/TimberlandEU/10061713-hero?wid=720&hei=720&fit=constrain,1&qlt=85,1&op_usm=1,1,6,0"); +var leviesJeans = new Product(85, "Levi's - 511", "Clothing", "Jeans", "https://img01.ztat.net/article/spp-media-p1/3dd6fc1c3d263f209ef9d81e2bfb6116/8865a86f997f47729d56c2244b206301.jpg?imwidth=1800&filter=packshot"); +var jackAndJonesJeans = new Product(32, "Jack & Jones - JJILIAM JJORIGINAL", "Clothing", "Jeans", "https://img01.ztat.net/article/spp-media-p1/bc5317870cb84632b8db5ba16b6de51b/aefcfeb467fe4200bad48bc31bd585f3.jpg?imwidth=1800&filter=packshot"); +var bershakaJeans = new Product(30, "Bershaka - Vintage", "Clothing", "Jeans", "https://img01.ztat.net/article/spp-media-p1/d06e3f7598754a6b92849caf976c11ad/19db75dbf2534f42b5ab879bc65c1d2e.jpg?imwidth=1800&filter=packshot"); +var gStarShirt = new Product(40, "G Star - Dunda", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/b988173c979739d6a7b56f9baa28a64d/688f149c136746a1b309a6ebe6b81ebc.jpg?imwidth=1800&filter=packshot"); +var forsbergShirt = new Product(20, "Forsberg - Stoltson", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/ee297c1e0c3f45f5807f5103937b80d8/104f8962e2f44417828e8ff8492227b9.jpg?imwidth=1800&filter=packshot"); +var leviesShirt = new Product(22, "Levi's - Original Tee", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/01c276157f394da5ab43da3d9256f8e4/b526407ff60e490f8e318812063f6b51.jpg?imwidth=1800&filter=packshot"); +var tommyHilShirt = new Product(60, "Tommy Hilfiger - Regular", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/25fba27a171632689b1e9b0723884732/7a14e2a8b5c945059d7ae8c2051fae41.jpg?imwidth=1800&filter=packshot"); +products.push(tommyHilShirt, leviesShirt, forsbergShirt, gStarShirt, bershakaJeans, jackAndJonesJeans, leviesJeans, timberland, drMarten, adidasShoes, jordanShoes, airmaxShoes); +var filteredByType = function (type, arr) { + try { + return arr.filter(function (ele) { return ele.getType == type; }); + } + catch (error) { + console.log(error); + return false; + } +}; +var findCheapestItem = function (arr) { + try { + return arr.reduce(function (prev, current) { + return prev.getPrice < current.getPrice ? prev : current; + }); + } + catch (error) { + console.log(error); + return false; + } +}; +var sortProductsByPrice = function (arr) { + try { + return __spreadArrays(arr).sort(function (a, b) { return a.getPrice - b.getPrice; }); + } + catch (error) { + console.log(error); + return false; + } +}; +var findProductName = function (input, arr) { + try { + // I would use peoduct, instead of ele. this will help others to understand easly what is it taht you are passing + var filteredByString = arr.filter(function (ele) { + return ele.getName.toLowerCase().includes(input); + }); + return filteredByString; + } + catch (error) { + console.log(error); + return false; + } +}; +// HW level 1 - filter list by type "Sneakers" +console.log(filteredByType("Sneakers", products)); +// HW level 2 - Finding cheapest product on list +console.log(findCheapestItem(products)); +// HW level 3 - Sorting all products from cheapest to most exepensive +console.log(sortProductsByPrice(products)); +// HW level 4 - Finding product based on String +console.log(findProductName("da", products)); +console.log(findProductName("6", products)); +console.log(findProductName("bsrge", products)); +//Tal: Created search app that displayes related products in real time +var searchInput = document.querySelector("#search"); +var ulEl = document.querySelector(".displayedList"); +window.addEventListener("keyup", function () { + if (searchInput.value != "") { + //Tal: I would use ulElement instead of ulEl --> much more easy to undersant. + ulEl.replaceChildren(); + var listToDisplay = findProductName(searchInput.value, products); + if (listToDisplay !== false) { + listToDisplay.forEach(function (ele) { + //Tal: Using innerHTMl gives you better control on the apperance, and it is much more easy to understand + var li = document.createElement("li"); + var img = document.createElement("img"); + img.src = ele.getImg; + li.textContent = ele.getName; + li.append(img); + ulEl.append(li); + }); + } + } + else { + ulEl.replaceChildren(); + } +}); diff --git a/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/dist/style.css b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/dist/style.css new file mode 100644 index 000000000..d97932771 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/dist/style.css @@ -0,0 +1,36 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 50vh; + display: flex; + flex-direction: column; + align-items: center; + font-size: 1.2rem; +} + +label { + margin-top: 10vh; +} + +input { + padding: 0.2em; + font-size: 1.5rem; + border: 1px solid rgba(0, 0, 0, 0.165); +} + +.displayedList { + margin-top: 5vh; +} +.displayedList li { + display: flex; + align-items: center; + margin-top: 2em; +} +.displayedList li img { + width: 15vw; + margin-left: 5vw; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/index.html b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/index.html new file mode 100644 index 000000000..1a4d02437 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/index.html @@ -0,0 +1,17 @@ + + + + + + + Product List + + + + + +
                +
              + + + diff --git a/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/style.css b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/style.css new file mode 100644 index 000000000..d97932771 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/style.css @@ -0,0 +1,36 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 50vh; + display: flex; + flex-direction: column; + align-items: center; + font-size: 1.2rem; +} + +label { + margin-top: 10vh; +} + +input { + padding: 0.2em; + font-size: 1.5rem; + border: 1px solid rgba(0, 0, 0, 0.165); +} + +.displayedList { + margin-top: 5vh; +} +.displayedList li { + display: flex; + align-items: center; + margin-top: 2em; +} +.displayedList li img { + width: 15vw; + margin-left: 5vw; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/style.scss b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/style.scss new file mode 100644 index 000000000..43f1c5a41 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/VladiBykanov/style.scss @@ -0,0 +1,38 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 50vh; + display: flex; + flex-direction: column; + align-items: center; + // justify-content: center; + font-size: 1.2rem; +} + +label{ + margin-top: 10vh; +} + +input{ + padding: .2em; + font-size: 1.5rem; + border: 1px solid rgba(0, 0, 0, 0.165); +} + +.displayedList{ + margin-top: 5vh; + li{ + // border: 5px solid black; + display: flex; + align-items: center; + margin-top: 2em; + img{ + width: 15vw; + margin-left: 5vw; + } + } +} diff --git a/02-TypeScript/10-arrays/home-puzzles/aviva-elias/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/aviva-elias/dist/index.js new file mode 100644 index 000000000..0dce919e3 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/aviva-elias/dist/index.js @@ -0,0 +1,41 @@ +var ClothingStore = /** @class */ (function () { + function ClothingStore(name, price, department, type) { + this.name = name; + this.price = price; + this.department = department; + this.type = type; + } + return ClothingStore; +}()); +var Raincoat = new ClothingStore("pink raincoat", 50, "girls", "coat"); +var highBoots = new ClothingStore("blue high boots", 100, "women shoes", "shoe"); +var sweatSuit = new ClothingStore("adidas black sweat suit", 70, "sport", "suit"); +var tShirt = new ClothingStore("superman T-shirt", 40, "boys", "shirt"); +var longShirt = new ClothingStore("yello long shirt", 40, "men", "shirt"); +var jeans = new ClothingStore("levis jeans 501", 80, "men", "trousers"); +var leatherJacket = new ClothingStore("leather jacket", 120, "men", "jacket"); +var clothing = [Raincoat, highBoots, sweatSuit, tShirt, longShirt, jeans, leatherJacket]; +//task 1: +var allShirts = clothing.filter(function (item) { return item.type === "shirt"; }); +function listOfShirt(type) { + console.log(type.name, type.price); +} +console.log("list of shirts in the store:"); +allShirts.forEach(listOfShirt); +//task 2: +clothing.sort(function (a, b) { return a.price - b.price; }); +function chipestItem() { + return clothing[0].name; +} +console.log("the chipest item in the store is " + chipestItem()); +//task 3: +var menDipartment = clothing.filter(function (dip) { return dip.department === "men"; }); +menDipartment.sort(function (a, b) { return a.price - b.price; }); +function dipartmentList(index) { + console.log(index.name, index.price); +} +console.log("list of clothing in men dipartment:"); +menDipartment.forEach(dipartmentList); +//task 4: +var Name = clothing.map(function (item) { return item.name; }); +console.log(Name); diff --git a/02-TypeScript/10-arrays/home-puzzles/aviva-elias/index.html b/02-TypeScript/10-arrays/home-puzzles/aviva-elias/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/aviva-elias/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/aviva-elias/index.ts b/02-TypeScript/10-arrays/home-puzzles/aviva-elias/index.ts new file mode 100644 index 000000000..3369c5107 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/aviva-elias/index.ts @@ -0,0 +1,50 @@ +class ClothingStore{ + constructor(public name:string,public price:number,public department:string,public type :string){} +} +const Raincoat=new ClothingStore("pink raincoat" ,50,"girls","coat"); +const highBoots=new ClothingStore("blue high boots" ,100, "women shoes" ,"shoe") +const sweatSuit=new ClothingStore("adidas black sweat suit",70,"sport","suit") +const tShirt=new ClothingStore("superman T-shirt",40,"boys","shirt") +const longShirt=new ClothingStore("yello long shirt",40,"men","shirt") +const jeans=new ClothingStore("levis jeans 501",80,"men","trousers") +const leatherJacket=new ClothingStore("leather jacket",120,"men","jacket") + +const clothing:ClothingStore[]=[Raincoat,highBoots,sweatSuit,tShirt,longShirt,jeans,leatherJacket] + +//task 1: +const allShirts:ClothingStore[]=clothing.filter((item)=>item.type==="shirt") + + + function listOfShirt(type:ClothingStore){ + console.log(type.name,type.price) + } + console.log(`list of shirts in the store:`) + allShirts.forEach(listOfShirt) + + + + //task 2: + + clothing.sort((a,b)=> a.price-b.price) +function chipestItem(){ + return clothing[0].name + +} + + console.log(`the chipest item in the store is ${chipestItem()}`) + +//task 3: + const menDipartment:ClothingStore[]=clothing.filter((dip)=>dip.department==="men") + menDipartment.sort((a,b)=>a.price-b.price) + + function dipartmentList(index:ClothingStore){ + console.log(index.name,index.price) + } +console.log(`list of clothing in men dipartment:`) + menDipartment.forEach(dipartmentList) + + //task 4: + + const Name = clothing.map((item) => item.name) + + console.log(Name) diff --git a/02-TypeScript/10-arrays/home-puzzles/idan/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/idan/dist/index.js new file mode 100644 index 000000000..ed12f4a2c --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/idan/dist/index.js @@ -0,0 +1,18 @@ +var things = ["joe biden", "joe rogen", "michael", "nicolas", "zaho sheng hao jung wo shenzai wo yo bing chilling wo hanchiwen bing chilling deshu sudjujijincho b'bing chilling wo sudju-sudjujijincho wo zweishiwan"]; +while (true) { + var userInput = prompt("search for somethin"); + if (userInput) { + search(things, userInput); + } +} +function search(listOfNames, searchedItem) { + try { + for (var index = 0; index < listOfNames.length; index++) { + if (listOfNames[index].indexOf(searchedItem) != -1) { + console.log("" + listOfNames[index]); + } + } + } + catch (error) { + } +} diff --git a/02-TypeScript/10-arrays/home-puzzles/idan/index.html b/02-TypeScript/10-arrays/home-puzzles/idan/index.html new file mode 100644 index 000000000..2d628b868 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/idan/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/idan/index.ts b/02-TypeScript/10-arrays/home-puzzles/idan/index.ts new file mode 100644 index 000000000..0e9c28d34 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/idan/index.ts @@ -0,0 +1,25 @@ +const things :string[] = [`joe biden`,`joe rogen`, `michael`, `nicolas`, `zaho sheng hao jung wo shenzai wo yo bing chilling wo hanchiwen bing chilling deshu sudjujijincho b'bing chilling wo sudju-sudjujijincho wo zweishiwan` ] +while(true){ + const userInput = prompt(`search for somethin`); + if(userInput){ + search(things, userInput); + } +} + + +function search(listOfNames:string[], searchedItem:string):void{ + try { + for (let index = 0; index < listOfNames.length; index++) { + if(listOfNames[index].indexOf(searchedItem)!= -1){ + console.log(`${listOfNames[index]}`); + } + + } + + + + } catch (error) { + + } + +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/instructions.md b/02-TypeScript/10-arrays/home-puzzles/instructions.md new file mode 100644 index 000000000..750c88cc1 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/instructions.md @@ -0,0 +1,8 @@ +Create an array of products in a shop (for instance, a clothes shop). +In the array, put several items. Each item has price, name, and department (for example, "women's tops," "man underwear," etc.), and type (for example, "shirt," "trousers"). + + +1. get all the items in a type (all "shirts") +2. find the cheapest item. +3. sort all items in a department by price. Show the cheapest on the top of the array. +4. find an item in the array by its name, using part of the name. for instance, the user will search for "je" and will get "Dizzle jeans.", "Levies Jeans", etc. diff --git a/02-TypeScript/10-arrays/home-puzzles/itayAmosi/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/itayAmosi/dist/index.js new file mode 100644 index 000000000..fdfa14f73 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/itayAmosi/dist/index.js @@ -0,0 +1,55 @@ +var GameShop = /** @class */ (function () { + function GameShop(name, price, department, types) { + this.name = name; + this.price = price; + this.department = department; + this.types = types; + } + return GameShop; +}()); +var fifa2022 = new GameShop("Fifa2022", 159.9, "sport-game", "game"); +var fortnite = new GameShop("Fortnite", 29.9, "survival-game", "game"); +var godOfWar = new GameShop("God of War", 199.9, "action-game", "game"); +var keyboard = new GameShop("Keyboard", 15.9, "Kits", "computer"); +var muose = new GameShop("Muose", 10.9, "Kits", "computer"); +var controller = new GameShop("Controller", 99.9, "Kits", "consoles"); +var headphones = new GameShop("Headphones", 99.9, "Kits", "computer"); +var hdmiCable = new GameShop("HDMI cable", 6.9, "cable", "Multimedia"); +var lgTv = new GameShop("LG TV", 1259.9, "screens", "multimedia"); +var samsungTv = new GameShop("Samsung TV", 1359.9, "screens", "multimedia"); +var items = [ + fifa2022, + fortnite, + godOfWar, + keyboard, + muose, + controller, + headphones, + hdmiCable, + lgTv, + samsungTv, +]; +// task 1 +console.log(items); // To delete! +function getTypes(item) { + console.log(item.name, item.types); // To delete! +} +items.forEach(getTypes); +// task 2 +function getPrices(item) { + console.log(item.price); // To delete! +} +items.forEach(getPrices); +var min = Math.min.apply(Math, items.map(function (item) { return item.price; })); +console.log(min); +// task 3 +items.sort(function (a, b) { return a.price - b.price; }); +console.log(items); // To delete! +// task 4 +var names = items.map(function (items) { return items.name; }); +function findName(partOf) { + if (partOf) { + return names.find(function (name) { return name.includes(partOf); }); + } +} +console.log(names); diff --git a/02-TypeScript/10-arrays/home-puzzles/itayAmosi/index.html b/02-TypeScript/10-arrays/home-puzzles/itayAmosi/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/itayAmosi/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/itayAmosi/index.ts b/02-TypeScript/10-arrays/home-puzzles/itayAmosi/index.ts new file mode 100644 index 000000000..6b8dc5400 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/itayAmosi/index.ts @@ -0,0 +1,63 @@ +class GameShop { + constructor( + public name: string, + public price: number, + public department: string, + public types: string, + ) {} +} + +const fifa2022 = new GameShop(`Fifa2022`, 159.9, `sport-game`, `game`) +const fortnite = new GameShop(`Fortnite`, 29.9, `survival-game`, `game`) +const godOfWar = new GameShop(`God of War`, 199.9, `action-game`, `game`) +const keyboard = new GameShop(`Keyboard`, 15.9, `Kits`, `computer`) +const muose = new GameShop(`Muose`, 10.9, `Kits`, `computer`) +const controller = new GameShop(`Controller`, 99.9, `Kits`, `consoles`) +const headphones = new GameShop(`Headphones`, 99.9, `Kits`, `computer`) +const hdmiCable = new GameShop(`HDMI cable`, 6.9, `cable`, `Multimedia`) +const lgTv = new GameShop(`LG TV`, 1259.9, `screens`, `multimedia`) +const samsungTv = new GameShop(`Samsung TV`, 1359.9, `screens`, `multimedia`) + +const items: GameShop[] = [ + fifa2022, + fortnite, + godOfWar, + keyboard, + muose, + controller, + headphones, + hdmiCable, + lgTv, + samsungTv, +] + +// task 1 +console.log(items) // To delete! +function getTypes(item: GameShop) { + console.log(item.name, item.types); // To delete! +} +items.forEach(getTypes) + +// task 2 + +function getPrices(item: GameShop) { + console.log(item.price) // To delete! +} +items.forEach(getPrices) + +const min = Math.min(...items.map((item) => item.price)) +console.log(min) + +// task 3 +items.sort((a, b) => a.price - b.price) + +console.log(items) // To delete! + +// task 4 +const names = items.map((items) => items.name) +function findName(partOf:string){ +if (partOf){ +return names.find(name=> name.includes(partOf)) +} +} +console.log(names) \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/john-ben/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..f59d391fb --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/john-ben/dist/index.js @@ -0,0 +1,47 @@ +var Cars = /** @class */ (function () { + function Cars(name, price, model) { + this.name = name; + this.price = price; + this.model = model; + } + return Cars; +}()); +var tesla_model_s = new Cars("Tesla", 170000, "3"); +var tesla_model_3 = new Cars("Tesla", 370000, "s"); +var tesla_model_x = new Cars("Tesla", 270000, "x"); +var tesla_model_y = new Cars("Tesla", 470000, "y"); +var myCars = [ + tesla_model_s, + tesla_model_3, + tesla_model_x, + tesla_model_y, +]; +var companyCars = []; +function cheapest_price(items) { + try { + if (!Array.isArray(items)) + throw new Error("Items is not an array"); + if (items.length === 0) + throw new Error("array is empty"); + var minPrice = items[0].price; + var minIndex = 0; + for (var i = 0; i < items.length; i++) { + if (items[i].price < minPrice) { + minPrice = items[i].price; + minIndex = i; + } + } + return items[minIndex]; + } + catch (error) { + console.error(error); + return false; + } +} +var cheapestCar = cheapest_price(myCars); +console.log(cheapestCar); +console.log('hi'); +// function rateCars() { +// return [...items].sort((a, b) => a.price - b.price); +// } +// console.log(rateCars()); diff --git a/02-TypeScript/10-arrays/home-puzzles/john-ben/index.html b/02-TypeScript/10-arrays/home-puzzles/john-ben/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/john-ben/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/john-ben/index.ts b/02-TypeScript/10-arrays/home-puzzles/john-ben/index.ts new file mode 100644 index 000000000..d2fe8692b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/john-ben/index.ts @@ -0,0 +1,52 @@ +class Cars { + constructor( + public name: string, + public price: number, + public model: string + ) {} +} + +const tesla_model_s = new Cars("Tesla", 170000, "3"); +const tesla_model_3 = new Cars("Tesla", 370000, "s"); +const tesla_model_x = new Cars("Tesla", 270000, "x"); +const tesla_model_y = new Cars("Tesla", 470000, "y"); + +const myCars: Cars[] = [ + tesla_model_s, + tesla_model_3, + tesla_model_x, + tesla_model_y, +]; + +const companyCars: Cars[] = []; + +function cheapest_price(items: Cars[]): Cars | false { + try { + if (!Array.isArray(items)) throw new Error("Items is not an array"); + if (items.length === 0) throw new Error("array is empty"); + + let minPrice = items[0].price; + let minIndex = 0; + for (let i = 0; i < items.length; i++) { + if (items[i].price < minPrice) { + minPrice = items[i].price; + minIndex = i; + } + } + return items[minIndex]; + } + catch (error) { + console.error(error); + return false; + } +} + +const cheapestCar = cheapest_price(myCars); +console.log(cheapestCar) +console.log('hi') + +// function rateCars() { +// return [...items].sort((a, b) => a.price - b.price); +// } + +// console.log(rateCars()); diff --git a/02-TypeScript/10-arrays/home-puzzles/matanel-harush/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/dist/index.js new file mode 100644 index 000000000..0f3baa8ff --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/dist/index.js @@ -0,0 +1,61 @@ +var products = [ + { + price: 1290.00, + name: "Off-White Vulcanized", + department: "Off-White", + type: "Shoes-MEN" + }, + { + price: 849.99, + name: "Calvin Klein Hoodie", + department: "Calvin-Klein", + type: "Hoodies-MEN" + }, + { + price: 990.00, + name: "Moncler Scarf", + department: "Moncler", + type: "Scarfs" + }, + { + price: 6990.00, + name: "Saint Laurent Hobo Bag", + department: "Saint Laurent", + type: "Bags-WOMEN" + }, + { + price: 1390.00, + name: "Ganni Stripes Cardigan", + department: "Ganni", + type: "Cardigans-WOMEN" + }, + { + price: 99.00, + name: "BOSS Boxers", + department: "BOSS", + type: "Underwear-MEN" + }, + { + price: 799.00, + name: "Tommy Hilfiger T-Shirt", + department: "Tommy Hilfiger", + type: "T-Shirt-WOMEN" + }, + { + price: 799.00, + name: "Tommy Hilfiger T-Shirt", + department: "Tommy Hilfiger", + type: "T-Shirt-MEN" + } +]; +var searchBtn = document.getElementById("search-btn"); +var searchBox = document.getElementById("search-box"); +var resultsEl = document.getElementById("results"); +searchBtn.addEventListener("click", function () { + var foundProducts = []; + var search = searchBox.value; + for (var i = 0; i < products.length; i++) { + if (products[i].) + ; + } +}); diff --git a/02-TypeScript/10-arrays/home-puzzles/matanel-harush/dist/style.css b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/dist/style.css new file mode 100644 index 000000000..77ccf9d4f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/dist/style.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +#search-container { + width: 100%; + padding: 20px; + text-align: center; + background-color: #f1f1f1; +} + +#search-box { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; +} + +#search-btn { + width: 20%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#search-btn:hover { + background-color: #45a049; +} + +#results { + width: 100%; + padding: 20px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/matanel-harush/index.html b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/index.html new file mode 100644 index 000000000..7db6acb56 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/index.html @@ -0,0 +1,21 @@ + + + + + + + Shop - INT Matanel + + + + +
              +

              Product Search

              + + +
              +
              + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/matanel-harush/index.ts b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/index.ts new file mode 100644 index 000000000..f292741c6 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/index.ts @@ -0,0 +1,68 @@ +interface Product { + price: number; + name: string; + department: string; + type: string; +} + +const products: Product[] = [ + { + price: 1290.00, + name: "Off-White Vulcanized", + department: "Off-White", + type: "Shoes-MEN" + }, + { + price: 849.99, + name: "Calvin Klein Hoodie", + department: "Calvin-Klein", + type: "Hoodies-MEN" + }, + { + price: 990.00, + name: "Moncler Scarf", + department: "Moncler", + type: "Scarfs" + }, + { + price: 6990.00, + name: "Saint Laurent Hobo Bag", + department: "Saint Laurent", + type: "Bags-WOMEN" + }, + { + price: 1390.00, + name: "Ganni Stripes Cardigan", + department: "Ganni", + type: "Cardigans-WOMEN" + }, + { + price: 99.00, + name: "BOSS Boxers", + department: "BOSS", + type: "Underwear-MEN" + }, + { + price: 799.00, + name: "Tommy Hilfiger T-Shirt", + department: "Tommy Hilfiger", + type: "T-Shirt-WOMEN" + }, + { + price: 799.00, + name: "Tommy Hilfiger T-Shirt", + department: "Tommy Hilfiger", + type: "T-Shirt-MEN" + } +]; + + const searchBtn = document.getElementById("search-btn"); + const searchBox = document.getElementById("search-box"); + const resultsEl = document.getElementById("results"); + + searchBtn.addEventListener("click", () => { + let foundProducts: Product[] = []; + const search = searchBox.value; + + for (let i = 0; i < products.length; i++) { + if (products[i]. \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/matanel-harush/style.css b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/style.css new file mode 100644 index 000000000..77ccf9d4f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/style.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +#search-container { + width: 100%; + padding: 20px; + text-align: center; + background-color: #f1f1f1; +} + +#search-box { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; +} + +#search-btn { + width: 20%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#search-btn:hover { + background-color: #45a049; +} + +#results { + width: 100%; + padding: 20px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/matanel-harush/style.scss b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/style.scss new file mode 100644 index 000000000..62a6989f4 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/matanel-harush/style.scss @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + } + + #search-container { + width: 100%; + padding: 20px; + text-align: center; + background-color: #f1f1f1; + } + + #search-box { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + } + + #search-btn { + width: 20%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + } + + #search-btn:hover { + background-color: #45a049; + } + + #results { + width: 100%; + padding: 20px; + text-align: center; + } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/noa-meillet/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..335dd6f3e --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/noa-meillet/dist/index.js @@ -0,0 +1,118 @@ +/* +Create an array of products in a shop (for instance, a clothes shop). +In the array, put several items. Each item has price, name, and department (for example, "women's tops," "man underwear," etc.), and type (for example, "shirt," "trousers"). + + +1. get all the items in a type (all "shirts") +2. find the cheapest item. +3. sort all items in a department by price. Show the cheapest on the top of the array. +4. find an item in the array by its name, using part of the name. for instance, the user will search for "je" and will get "Dizzle jeans.", "Levies Jeans", etc. +*/ +//בניית מחלקה לאובייקט שלנו- הדרך כתיבה היא אותה דרך בכל מחלקה שנבנה, רק שם המחלקה וה"ערכים" שנשים בתוכה משתנים +var Item = /** @class */ (function () { + function Item(name, department, type, price) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + } + return Item; +}()); +//בניית אובייקטים חדשים (ע"פ הפורמט שבנינו במחלקה) +var shirtLevisW = new Item("shirt-Levis-white", "women", "shirt", 19.9); +var shirtLevisM = new Item("shirt-Levis-blue", "men", "shirt", 19.9); +var skirtW = new Item("skirt-black", "women", "skirt", 29.9); +var jeansDizzleM = new Item("jeans-Dizzle-deepBlue", "men", "pants", 59.9); +var shirtPackB = new Item("shirts-pack-grey", "baby", "shirt", 9.9); +var blouseW = new Item("blouse-black", "women", "shirt", 15.9); +var sweatshirtNikeK = new Item("sweatshirt-Nike-white", "kids", "sweatshirt", 49.9); +var dressW = new Item("dress-pink", "women", "dress", 39.9); +var denimJacketM = new Item("denimJacket-Levis", "men", "outwear", 79.9); +var activeSetNikeW = new Item("activeSet-Nike", "women", "pants", 19.9); +var coatGapB = new Item("coat-Gap-purple", "baby", "outwear", 49.9); +//בניית מערך/רשימה שמכילה את כל האובייקטים שיצרנו +var clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + sweatshirtNikeK, + denimJacketM, + activeSetNikeW, + coatGapB, +]; +console.log(getAllItemInType(clothesShopArr)); // הפעלת פונקציה א +var sortedArr = sortArrByPrice(clothesShopArr); // הפעלת פונקצית המיון מהזול ליקר +if (sortedArr) // אם הפונקציה חזרה ללא שגיאה והתקבל מערך תקין אשר ממויין מהזול ליקר + console.log(getTheCheapestItem(sortedArr)); // הפעלת פונקציה שתדפיס לי מערך של הפריטים הזולים ביותר בחנות +// פונקציה שמחזירה מערך עם כל הבגדים מסוג מסויים לפי בקשת המשתמש. לדוגמא כל הפריטים שהם חולצות +// שם הפונקציה שמקבלת כפרמטר רשימה/מערך של פריטים בחנות ומחזירה ערך שהוא מסוג רשימת בגדים או שגיאה +function getAllItemInType(clothesArr) { + //TYCATCH- משמש אותנו למניעת באגים בקוד שלנו + try { + // תנאי למניעת שגיאה ייחודית- אם המערך שקיבלנו בפונקציה הוא ריק- הפונקציה לא תמשיך לרוץ + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); // אם התנאי מתקיים הפונקציה תסיים לרוץ ותחזיר למשתמש שגיאה + var typeGetFromUser_1; // הגדרת מתשנה שיקבל את סוג הבגד שהמשתמש רוצה לקבל + // ללואה אשר תרוץ עד שהמשתנה יקבל ערך (אם המשתמש לא יכניס ערך, הלולאה הבקשה תמשיך להופיע על המסך עד שיכניסו משהו לשדה הריק) + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); // הופעת ההודעה על המסך המבקשת מהמשתמש להכניס סוג של בגד שהוא ירצה לראות/לקנות + } + // הגדרת משתנה חדש שיקבל אליו את המערך עם הפריטים מהסוג הספציפי שהמשתמש הכניס מקודם + // השורה בנויה כך שאנחנו מביאים למשתנה את המערך שקיבלנו כפרמטר (המערך עם כל הפריטים ש שקיימים בחנות) + // ואנו עושים עליו פעולה שנקרטת "פילטר" אשר מוגדרת מראש במחשב + //בתוך הסוגריים נגדיר שכל פריט שנמצא ברשימה, נשווה את סוגו למה שהמשתמש הכניס- במידה והתנאי מתקיים, אותו פריט נכנס למערך החדש שהגדרנו + var chosenItemsArr = clothesArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + // אם המערך החדש שהתקבל לאחר סינון הפריטים לפי סוג ריק (אורכו שווה ל0) + if (chosenItemsArr.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); // הפונקציה תחזיר למשתמש שהתרחשה שגיאה והסוג פריט שהזין לנו בשורת קליטה מהמשתמש לא קיים בחנות + // אם הפונקציה לא החזירה שגיאה עד עכשיו, סביר להניח שהרשימה החדשה מוכנה ומכילה פריטים לפי בקשת המשתמש, ולכן נחזיר אותה + return chosenItemsArr; + } + // אם התוכנה תתקל בבאג היא תגיע לכאן ויוחזר למשתמש שיש שגיאה באחת הפונקציות + catch (error) { + console.error(error); //מחזיר שגיאה למשתמש + return false; // מחזיר לפונקציה ערך של "שקר" מכיוון שלא קיבלנו את מה שרצינו ממנה + } +} +// פונקציה שמחזירה מערך עם כל הבגדים מהזול ביותר ליקר ביותר +// שם הפונקציה שמקבלת כפרמטר רשימה/מערך של פריטים בחנות ומחזירה ערך שהוא מסוג רשימת בגדים או שגיאה +function sortArrByPrice(clothesArr) { + //TYCATCH- משמש אותנו למניעת באגים בקוד שלנו + try { + // תנאי למניעת שגיאה ייחודית- אם המערך שקיבלנו בפונקציה הוא ריק- הפונקציה לא תמשיך לרוץ + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); // אם התנאי מתקיים הפונקציה תסיים לרוץ ותחזיר למשתמש שגיאה + // הגדרת משתנה חדש שיקבל אליו את המערך עם הפריטים הקיימים בחנות לפי מחיר- מהזול ליקר + // השורה בנויה כך שאנחנו מביאים למשתנה את המערך שקיבלנו כפרמטר (המערך עם כל הפריטים ש שקיימים בחנות) + // ואנו עושים עליו פעולה שנקרטת "סורט" אשר מוגדרת מראש במחשב + //בתוך הסוגריים נגדיר שכל שני פיריטים צריכים להיות במערך כאשאר המחיר של הראשון קטן יותר מהמחיר של השני (העתקתי ממש אתה השורה מהאינטרנט ושיניתי לשמות שקיימים לי במחלקה שבניתי) + var sortedArr_1 = clothesArr.sort(function (a, b) { return a.price - b.price; }); + // אם הפונקציה לא החזירה שגיאה עד עכשיו, סביר להניח שהרשימה החדשה מוכנה ומכילה פריטים לפי בקשת המשתמש, ולכן נחזיר אותה + return sortedArr_1; + } + // אם התוכנה תתקל בבאג היא תגיע לכאן ויוחזר למשתמש שיש שגיאה באחת הפונקציות + catch (error) { + console.error(error); //מחזיר שגיאה למשתמש + return false; // מחזיר לפונקציה ערך של "שקר" מכיוון שלא קיבלנו את מה שרצינו ממנה + } +} +// פונקציה שמחזירה מערך עם כל הבגדים שיש להם את המחיר הזול ביותר בחנות +// שם הפונקציה שמקבלת כפרמטר רשימה/מערך של פריטים בחנות (מערך חדש עם הפריטים שממויינים מהזול ליקר) ומחזירה ערך שהוא מסוג רשימת בגדים או שגיאה +// יצרתי פפונקציה שמקבלת רשימת של פריטים שממויינים כבר לפי מחיר- מהזול ליקר +// והגדרתי שהסינון שלי- ה"פילטר", יכניס לי למערך חדש רק פריטים שיש להם מחיר שהוא זהה למחיר של הפריט הראשון- שהוא הזול ביותר כי המערך שנתתי לפונקציה כבר ממויין +function getTheCheapestItem(sortedArr) { + //TYCATCH- משמש אותנו למניעת באגים בקוד שלנו + try { + var chosenItemsArr = clothesShopArr.filter(function (item) { return item.price == sortedArr[0].price; }); // אותו קונספט כמו בפונקציה הראשונה ( לגבי פעולת הפילטר) + return sortedArr; + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/10-arrays/home-puzzles/noa-meillet/index.html b/02-TypeScript/10-arrays/home-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/noa-meillet/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/noa-meillet/index.ts b/02-TypeScript/10-arrays/home-puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..4feef85a8 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/noa-meillet/index.ts @@ -0,0 +1,129 @@ +/* +Create an array of products in a shop (for instance, a clothes shop). +In the array, put several items. Each item has price, name, and department (for example, "women's tops," "man underwear," etc.), and type (for example, "shirt," "trousers"). + + +1. get all the items in a type (all "shirts") +2. find the cheapest item. +3. sort all items in a department by price. Show the cheapest on the top of the array. +4. find an item in the array by its name, using part of the name. for instance, the user will search for "je" and will get "Dizzle jeans.", "Levies Jeans", etc. +*/ + + +//בניית מחלקה לאובייקט שלנו- הדרך כתיבה היא אותה דרך בכל מחלקה שנבנה, רק שם המחלקה וה"ערכים" שנשים בתוכה משתנים +class Item { + public constructor( + public name: string, + public department: string, + public type: string, + public price: number + ) {} +} + +//בניית אובייקטים חדשים (ע"פ הפורמט שבנינו במחלקה) +const shirtLevisW = new Item("shirt-Levis-white", "women", "shirt", 19.9); +const shirtLevisM = new Item("shirt-Levis-blue", "men", "shirt", 19.9); +const skirtW = new Item("skirt-black", "women", "skirt", 29.9); +const jeansDizzleM = new Item("jeans-Dizzle-deepBlue", "men", "pants", 59.9); +const shirtPackB = new Item("shirts-pack-grey", "baby", "shirt", 9.9); +const blouseW = new Item("blouse-black", "women", "shirt", 15.9); +const sweatshirtNikeK = new Item("sweatshirt-Nike-white", "kids", "sweatshirt", 49.9); +const dressW = new Item("dress-pink", "women", "dress", 39.9); +const denimJacketM = new Item("denimJacket-Levis", "men", "outwear", 79.9); +const activeSetNikeW = new Item("activeSet-Nike", "women", "pants", 19.9); +const coatGapB = new Item("coat-Gap-purple", "baby", "outwear", 49.9); + + +//בניית מערך/רשימה שמכילה את כל האובייקטים שיצרנו +const clothesShopArr: Item[] = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + sweatshirtNikeK, + denimJacketM, + activeSetNikeW, + coatGapB, +]; + +console.log (getAllItemInType(clothesShopArr)); // הפעלת פונקציה א +const sortedArr= sortArrByPrice(clothesShopArr); // הפעלת פונקצית המיון מהזול ליקר +if (sortedArr) // אם הפונקציה חזרה ללא שגיאה והתקבל מערך תקין אשר ממויין מהזול ליקר + console.log (getTheCheapestItem(sortedArr)); // הפעלת פונקציה שתדפיס לי מערך של הפריטים הזולים ביותר בחנות + + +// פונקציה שמחזירה מערך עם כל הבגדים מסוג מסויים לפי בקשת המשתמש. לדוגמא כל הפריטים שהם חולצות + +// שם הפונקציה שמקבלת כפרמטר רשימה/מערך של פריטים בחנות ומחזירה ערך שהוא מסוג רשימת בגדים או שגיאה +function getAllItemInType(clothesArr:Item[]):Item[] | false{ + //TYCATCH- משמש אותנו למניעת באגים בקוד שלנו + try { + // תנאי למניעת שגיאה ייחודית- אם המערך שקיבלנו בפונקציה הוא ריק- הפונקציה לא תמשיך לרוץ + if (clothesArr.length==0) + throw new Error(`there is no item in the store`);// אם התנאי מתקיים הפונקציה תסיים לרוץ ותחזיר למשתמש שגיאה + let typeGetFromUser; // הגדרת מתשנה שיקבל את סוג הבגד שהמשתמש רוצה לקבל + // ללואה אשר תרוץ עד שהמשתנה יקבל ערך (אם המשתמש לא יכניס ערך, הלולאה הבקשה תמשיך להופיע על המסך עד שיכניסו משהו לשדה הריק) + while (!typeGetFromUser){ + typeGetFromUser = prompt (`Enter the type of item you will want to buy:`)// הופעת ההודעה על המסך המבקשת מהמשתמש להכניס סוג של בגד שהוא ירצה לראות/לקנות + } + // הגדרת משתנה חדש שיקבל אליו את המערך עם הפריטים מהסוג הספציפי שהמשתמש הכניס מקודם + // השורה בנויה כך שאנחנו מביאים למשתנה את המערך שקיבלנו כפרמטר (המערך עם כל הפריטים ש שקיימים בחנות) + // ואנו עושים עליו פעולה שנקרטת "פילטר" אשר מוגדרת מראש במחשב + //בתוך הסוגריים נגדיר שכל פריט שנמצא ברשימה, נשווה את סוגו למה שהמשתמש הכניס- במידה והתנאי מתקיים, אותו פריט נכנס למערך החדש שהגדרנו + const chosenItemsArr = clothesArr.filter(item => item.type== typeGetFromUser) + // אם המערך החדש שהתקבל לאחר סינון הפריטים לפי סוג ריק (אורכו שווה ל0) + if (chosenItemsArr.length==0) + throw new Error(`items from type ${typeGetFromUser} is availble in our store`);// הפונקציה תחזיר למשתמש שהתרחשה שגיאה והסוג פריט שהזין לנו בשורת קליטה מהמשתמש לא קיים בחנות + // אם הפונקציה לא החזירה שגיאה עד עכשיו, סביר להניח שהרשימה החדשה מוכנה ומכילה פריטים לפי בקשת המשתמש, ולכן נחזיר אותה + return chosenItemsArr; + } + // אם התוכנה תתקל בבאג היא תגיע לכאן ויוחזר למשתמש שיש שגיאה באחת הפונקציות + catch (error) { + console.error(error); //מחזיר שגיאה למשתמש + return false; // מחזיר לפונקציה ערך של "שקר" מכיוון שלא קיבלנו את מה שרצינו ממנה + } +} + + +// פונקציה שמחזירה מערך עם כל הבגדים מהזול ביותר ליקר ביותר + +// שם הפונקציה שמקבלת כפרמטר רשימה/מערך של פריטים בחנות ומחזירה ערך שהוא מסוג רשימת בגדים או שגיאה +function sortArrByPrice (clothesArr:Item[]): Item[] | false{ + //TYCATCH- משמש אותנו למניעת באגים בקוד שלנו + try { + // תנאי למניעת שגיאה ייחודית- אם המערך שקיבלנו בפונקציה הוא ריק- הפונקציה לא תמשיך לרוץ + if (clothesArr.length==0) + throw new Error(`there is no item in the store`);// אם התנאי מתקיים הפונקציה תסיים לרוץ ותחזיר למשתמש שגיאה + // הגדרת משתנה חדש שיקבל אליו את המערך עם הפריטים הקיימים בחנות לפי מחיר- מהזול ליקר + // השורה בנויה כך שאנחנו מביאים למשתנה את המערך שקיבלנו כפרמטר (המערך עם כל הפריטים ש שקיימים בחנות) + // ואנו עושים עליו פעולה שנקרטת "סורט" אשר מוגדרת מראש במחשב + //בתוך הסוגריים נגדיר שכל שני פיריטים צריכים להיות במערך כאשאר המחיר של הראשון קטן יותר מהמחיר של השני (העתקתי ממש אתה השורה מהאינטרנט ושיניתי לשמות שקיימים לי במחלקה שבניתי) + const sortedArr = clothesArr.sort((a, b) => a.price - b.price); + // אם הפונקציה לא החזירה שגיאה עד עכשיו, סביר להניח שהרשימה החדשה מוכנה ומכילה פריטים לפי בקשת המשתמש, ולכן נחזיר אותה + return sortedArr; + } + // אם התוכנה תתקל בבאג היא תגיע לכאן ויוחזר למשתמש שיש שגיאה באחת הפונקציות + catch (error) { + console.error(error); //מחזיר שגיאה למשתמש + return false; // מחזיר לפונקציה ערך של "שקר" מכיוון שלא קיבלנו את מה שרצינו ממנה + } +} + +// פונקציה שמחזירה מערך עם כל הבגדים שיש להם את המחיר הזול ביותר בחנות +// שם הפונקציה שמקבלת כפרמטר רשימה/מערך של פריטים בחנות (מערך חדש עם הפריטים שממויינים מהזול ליקר) ומחזירה ערך שהוא מסוג רשימת בגדים או שגיאה +// יצרתי פפונקציה שמקבלת רשימת של פריטים שממויינים כבר לפי מחיר- מהזול ליקר +// והגדרתי שהסינון שלי- ה"פילטר", יכניס לי למערך חדש רק פריטים שיש להם מחיר שהוא זהה למחיר של הפריט הראשון- שהוא הזול ביותר כי המערך שנתתי לפונקציה כבר ממויין +function getTheCheapestItem (sortedArr:Item[]): Item[] | false{ + //TYCATCH- משמש אותנו למניעת באגים בקוד שלנו + try { + const chosenItemsArr = clothesShopArr.filter(item => item.price== sortedArr[0].price); // אותו קונספט כמו בפונקציה הראשונה ( לגבי פעולת הפילטר) + return sortedArr; + } catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/10-arrays/home-puzzles/shaili/app.ts b/02-TypeScript/10-arrays/home-puzzles/shaili/app.ts new file mode 100644 index 000000000..b86d69e76 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shaili/app.ts @@ -0,0 +1,70 @@ +"use strict"; + +class Product { + constructor( + private department: string, + private name: string, + public price: number, + private type: string + ) {} +} + +const pants = new Product("mans bottoms", "blue pants", 30, "clothes"); +const shirt = new Product("womans tops", "black top", 25, "clothes"); +const neckless = new Product( + "womans jewelry", + "pearl neckless", + 50, + "accessories" +); +const underwear = new Product( + "mans underwear", + "gray underwear", + 13, + "clothes" +); +const shoes = new Product("womans shoes", "high hills", 50, "shoes"); +const bracelet = new Product( + "mans jewelry", + "nice bracelet", + 27, + "accessories" +); +const hat = new Product("mans hat", "green hat", 17, "accessories"); + +const products: Product[] = [ + pants, + shirt, + neckless, + underwear, + shoes, + bracelet, + hat, +]; +console.log(products); + +// 1. get all the items in a type (all "shirts") + +console.log(products.filter((Product) => Product.type === "accessories")); + +// 2. find the cheapest item. + +const products: Product[] = [ + pants.price, + shirt.price, + neckless.price, + underwear.price, + shoes.price, + bracelet.price, + hat.price, +]; +console.log(products); +var cheapest = products[0]; +// console.log(cheapest); + +for (var i = 0; i < products.length; i++) { + if (cheapest > products[i]) { + cheapest = products[i]; + } +} +console.log(`The cheapest price is: ${cheapest}`); diff --git a/02-TypeScript/10-arrays/home-puzzles/shaili/dist/app.js b/02-TypeScript/10-arrays/home-puzzles/shaili/dist/app.js new file mode 100644 index 000000000..1c3c04202 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shaili/dist/app.js @@ -0,0 +1,48 @@ +"use strict"; +var Product = /** @class */ (function () { + function Product(department, name, price, type) { + this.department = department; + this.name = name; + this.price = price; + this.type = type; + } + return Product; +}()); +var pants = new Product("mans bottoms", "blue pants", 30, "clothes"); +var shirt = new Product("womans tops", "black top", 25, "clothes"); +var neckless = new Product("womans jewelry", "pearl neckless", 50, "accessories"); +var underwear = new Product("mans underwear", "gray underwear", 13, "clothes"); +var shoes = new Product("womans shoes", "high hills", 50, "shoes"); +var bracelet = new Product("mans jewelry", "nice bracelet", 27, "accessories"); +var hat = new Product("mans hat", "green hat", 17, "accessories"); +var products = [ + pants, + shirt, + neckless, + underwear, + shoes, + bracelet, + hat, +]; +console.log(products); +// 1. get all the items in a type (all "shirts") +console.log(products.filter(function (Product) { return Product.type === "accessories"; })); +// 2. find the cheapest item. +var products = [ + pants.price, + shirt.price, + neckless.price, + underwear.price, + shoes.price, + bracelet.price, + hat.price, +]; +console.log(products); +var cheapest = products[0]; +// console.log(cheapest); +for (var i = 0; i < products.length; i++) { + if (cheapest > products[i]) { + cheapest = products[i]; + } +} +console.log("The cheapest price is: " + cheapest); diff --git a/02-TypeScript/10-arrays/home-puzzles/shaili/index.html b/02-TypeScript/10-arrays/home-puzzles/shaili/index.html new file mode 100644 index 000000000..879e050ff --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shaili/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/02-TypeScript/10-arrays/home-puzzles/shalom copperman/app.ts b/02-TypeScript/10-arrays/home-puzzles/shalom copperman/app.ts new file mode 100644 index 000000000..30a931b3f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shalom copperman/app.ts @@ -0,0 +1,47 @@ +class products { + constructor ( + public name:string, + public brand: string, + public department: string, + public price: number + ){} + + } + +const zaraShirts new products ("shirt","zara","man",120); +const markPants new products ('pants','mark','women',170); +const sheinCoats new products ('coat', 'shein','unisex',249); + +const mystore: products [] = [ + zaraShirts, + markPants, + sheinCoats +]; + +function cheapestProductIndex (items: products[]) : number | false { + try { + if (!Array.isArray(items)) throw new Error('the array is invalid'); + if (itemns.length===0) throw new Error ('the list is empty'); + let minIndex = 0; + let minprice = items[0]; + for (let i=0; i < items.length; i++) { + if (items[i]< minprice) { + minprice=items[i]; + minIndex=i; + } + } + return minIndex; + + } catch (error) { + console.log (error) ; + return false; + } +} + +const index = cheapestProductIndex(mystore); +if (index) { + console.log(`the cheapest item is ${mystore[index]}`) +} else { + console.log ('there was an error during running time') +} + diff --git a/02-TypeScript/10-arrays/home-puzzles/shalom copperman/dist/app.js b/02-TypeScript/10-arrays/home-puzzles/shalom copperman/dist/app.js new file mode 100644 index 000000000..74f8ae211 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shalom copperman/dist/app.js @@ -0,0 +1,48 @@ +var products = /** @class */ (function () { + function products(name, brand, department, price) { + this.name = name; + this.brand = brand; + this.department = department; + this.price = price; + } + return products; +}()); +var zaraShirts; +new products("shirt", "zara", "man", 120); +var markPants; +new products('pants', 'mark', 'women', 170); +var sheinCoats; +new products('coat', 'shein', 'unisex', 249); +var mystore = [ + zaraShirts, + markPants, + sheinCoats +]; +function cheapestProductIndex(items) { + try { + if (!Array.isArray(items)) + throw new Error('the array is invalid'); + if (itemns.length === 0) + throw new Error('the list is empty'); + var minIndex = 0; + var minprice = items[0]; + for (var i = 0; i < items.length; i++) { + if (items[i] < minprice) { + minprice = items[i]; + minIndex = i; + } + } + return minIndex; + } + catch (error) { + console.log(error); + return false; + } +} +var index = cheapestProductIndex(mystore); +if (index) { + console.log("the cheapest item is " + mystore[index]); +} +else { + console.log('there was an error during running time'); +} diff --git a/02-TypeScript/10-arrays/home-puzzles/shalom copperman/index.html b/02-TypeScript/10-arrays/home-puzzles/shalom copperman/index.html new file mode 100644 index 000000000..b6a070f4f --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shalom copperman/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/dist/index.js new file mode 100644 index 000000000..464a41672 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/dist/index.js @@ -0,0 +1,43 @@ +class Product { + constructor(price, name, department) { + this.price = price; + this.name = name; + this.department = department; + } +} +const shirt = new Product(150, "shirt", "man"); +const pants = new Product(50, "pants", "woman"); +const hat = new Product(70, "hat", "man"); +const dress = new Product(125, "dress", "woman"); +const products = [shirt, pants, hat, dress]; +const filteredProducts = products.filter(checkType); +const sortedArray = products.sort(function (a, b) { return a.price - b.price; }); +function checkType(product) { + return product.department === "man"; +} +console.log(filteredProducts); +console.log(sortedArray); +console.log(sortedArray[0]); +function checkString(input, text) { + try { + let i = 0; + let filteredProductsByText = []; + for (i = 0; i <= input.length - 1; i++) { + if (input[i].name.includes(text)) { + filteredProductsByText.push(input[i]); + } + } + return filteredProductsByText; + } + catch (Error) { + console.error(Error); + return false; + } +} +let userInput = prompt("enter your search:"); +if (userInput !== null) { + console.log(checkString(products, userInput)); +} +// while (userInput!==null) { +// console.log(checkString(products,userInput)) +// } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/index.html b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/index.ts b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/index.ts new file mode 100644 index 000000000..25e31f435 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/HW/index.ts @@ -0,0 +1,52 @@ +class Product { + public constructor( + public price: number, + public name: string, + public department: string, + ) { } +} + +const shirt = new Product(150, "shirt", "man") +const pants = new Product(50, "pants", "woman") +const hat = new Product(70, "hat", "man") +const dress = new Product(125, "dress", "woman") + + +const products: Product[] = [shirt, pants, hat, dress] + +const filteredProducts: Product[] = products.filter(checkType); +const sortedArray: Product[] = products.sort(function (a, b) { return a.price - b.price }) + +function checkType(product: Product) { + return product.department === "man" +} + +console.log(filteredProducts) +console.log(sortedArray) +console.log(sortedArray[0]) + +function checkString(input: Product[], text: string) { + + try { + let i = 0 + let filteredProductsByText: Product[] = [] + for (i = 0; i <= input.length-1; i++) { + if (input[i].name.includes(text)) { + filteredProductsByText.push(input[i]) + } + } + return filteredProductsByText + } + catch (Error) { + console.error(Error); + return false; + } +} + +let userInput = prompt("enter your search:") +if (userInput!==null) { + console.log(checkString(products,userInput)) + } +// while (userInput!==null) { +// console.log(checkString(products,userInput)) +// } \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/dist/index.js new file mode 100644 index 000000000..e280c291c --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/dist/index.js @@ -0,0 +1,42 @@ +class Product { + constructor(price, name, department, searchString) { + this.price = price; + this.name = name; + this.department = department; + this.searchString = searchString; + } +} +const shirt = new Product(150, "shirt", "man", "test"); +const pants = new Product(50, "pants", "woman", "test"); +const hat = new Product(70, "hat", "man", "test"); +const dress = new Product(125, "dress", "woman", "test"); +const products = [shirt, pants, hat, dress]; +const filteredProducts = products.filter(checkType); +const sortedArray = products.sort(function (a, b) { return a.price - b.price; }); +function checkType(product) { + return product.department === "man"; +} +//console.log(filteredProducts) +// console.log(sortedArray) +//console.log(sortedArray[0]) +const filteredProductsTest = products.filter(checkString); +const userInput = prompt("enter your search:"); +let i = 0; +while (i <= products.length - 1 && userInput !== null) { + products[i].searchString = userInput; + //console.log(products[i].searchString) + i++; +} +function checkString(input) { + try { + while (input.searchString !== null) { + return input.name.includes(input.searchString); + } + return false; + } + catch (Error) { + console.error(Error); + return false; + } +} +console.log(filteredProductsTest); \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/index.html b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/index.ts b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/index.ts new file mode 100644 index 000000000..d9e2f5fd7 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/shlomi.samai/Test/index.ts @@ -0,0 +1,54 @@ +class Product { + public constructor ( + public price:number, + public name:string, + public department:string, + public searchString:string, + ) + {} + } + + const shirt= new Product(150,"shirt","man","test") + const pants= new Product(50,"pants","woman","test") + const hat= new Product(70,"hat","man","test") + const dress= new Product(125,"dress","woman","test") + + + const products:Product[]=[shirt,pants,hat,dress] + + const filteredProducts:Product[]=products.filter(checkType); + const sortedArray:Product[]=products.sort(function(a,b){return a.price-b.price}) + + function checkType(product:Product) { + return product.department==="man" + } + + //console.log(filteredProducts) + // console.log(sortedArray) + //console.log(sortedArray[0]) + + const filteredProductsTest:Product[]=products.filter(checkString); + const userInput=prompt("enter your search:") + let i=0 + while (i<=products.length-1&& userInput!==null){ + products[i].searchString=userInput + //console.log(products[i].searchString) + i++ + } + + function checkString(input:Product) { + try { + while (input.searchString!==null){ + return input.name.includes(input.searchString) + + } + return false + } + catch (Error) { + console.error(Error); + return false; + } + } + console.log(filteredProductsTest) + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/dist/index.js new file mode 100644 index 000000000..97ca749c4 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/dist/index.js @@ -0,0 +1,73 @@ +var tomershop = /** @class */ (function () { + function tomershop(name, department, type, price) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + } + return tomershop; +}()); +var airPods3 = new tomershop("airpods3", "headphone", "apple", 199); +var airPodsPro = new tomershop("airpods pro", "headphone", "apple", 299); +var airPodsMax = new tomershop("airpods max", "headphone", "apple", 499); +var iphone12 = new tomershop("iphone 12", "phones", "apple", 599); +var iphone13 = new tomershop("iphone 13", "phones", "apple", 699); +var iphone14 = new tomershop("iphone 14", "phones", "apple", 799); +var S21 = new tomershop("S21", "phones", "samsung", 399); +var S22 = new tomershop("S22", "phones", "samsung", 799); +var S20 = new tomershop("S20", "phones", "samsung", 299); +var products = [ + airPods3, + airPodsPro, + airPodsMax, + iphone12, + iphone13, + iphone14, + S20, + S21, + S22 +]; +console.log(getAllItemInType(products)); +var sortedArr = sortArrByPrice(products); +if (sortedArr) + console.log(cheapestItem(sortedArr)); +function getAllItemInType(productsArr) { + try { + if (productsArr.length == 0) + throw new Error("there is no item in the store"); + var typeGetFromUser_1; + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); + } + var selectproductarry = productsArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + if (selectproductarry.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); + return selectproductarry; + } + catch (error) { + console.error(error); + return false; + } +} +function sortArrByPrice(productsArr) { + try { + if (productsArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr_1 = productsArr.sort(function (a, b) { return a.price - b.price; }); + return sortedArr_1; + } + catch (error) { + console.error(error); + return false; + } +} +function cheapestItem(sortedArr) { + try { + var lowItem = products.filter(function (tomershop) { return tomershop.price == sortedArr[0]; }); + return sortedArr; + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/index.html b/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/index.ts b/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/index.ts new file mode 100644 index 000000000..31e5a9f1b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/tomer-cohen/index.ts @@ -0,0 +1,76 @@ +class tomershop { + public constructor( + public name:string, + public department:string, + public type:string, + public price:number + ) {} +} +const airPods3= new tomershop(`airpods3`,`headphone`,`apple`,199); +const airPodsPro= new tomershop(`airpods pro`,`headphone`,`apple`,299); +const airPodsMax= new tomershop(`airpods max`,`headphone`,`apple`,499); +const iphone12= new tomershop(`iphone 12`,`phones`,`apple`,599); +const iphone13= new tomershop(`iphone 13`,`phones`,`apple`,699); +const iphone14= new tomershop(`iphone 14`,`phones`,`apple`,799); +const S21= new tomershop(`S21`,`phones`,`samsung`,399); +const S22= new tomershop(`S22`,`phones`,`samsung`,799); +const S20= new tomershop(`S20`,`phones`,`samsung`,299); + +const products:tomershop[]= [ + airPods3, + airPodsPro, + airPodsMax, + iphone12, + iphone13, + iphone14, + S20, + S21, + S22 +]; +console.log(getAllItemInType(products)); +const sortedArr= sortArrByPrice(products); +if(sortedArr) +console.log(cheapestItem(sortedArr)); + + +function getAllItemInType(productsArr:tomershop[]){ + try { + if(productsArr.length==0) + throw new Error(`there is no item in the store`); + let typeGetFromUser; + while (!typeGetFromUser){ + typeGetFromUser = prompt (`Enter the type of item you will want to buy:`) + } + const selectproductarry = productsArr.filter(item => item.type== typeGetFromUser) + if(selectproductarry.length==0) + throw new Error(`items from type ${typeGetFromUser} is availble in our store`) + return selectproductarry; + } catch (error) { + console.error(error); + return false; + } + +} + +function sortArrByPrice(productsArr:tomershop[]): tomershop[] | false{ + try { + if (productsArr.length==0) + throw new Error(`there is no item in the store`); + const sortedArr = productsArr.sort((a, b) => a.price - b.price); + return sortedArr; + } catch (error) { + console.error(error); + return false; + } + } + +function cheapestItem(sortedArr:tomershop){ + try { + const lowItem= products.filter(tomershop => tomershop.price== sortedArr[0]) + return sortedArr; + } catch (error) { + console.error(error); + return false; + } + +} diff --git a/02-TypeScript/10-arrays/home-puzzles/yuval.p/dist/index.js b/02-TypeScript/10-arrays/home-puzzles/yuval.p/dist/index.js new file mode 100644 index 000000000..015ead78d --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/yuval.p/dist/index.js @@ -0,0 +1,32 @@ +var product = /** @class */ (function () { + function product(name, department, type, price) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + } + return product; +}()); +var cbr650 = new product("CBR650", "Motorcycle", "Honda", 100); +var cbr500 = new product("CBR650", "Motorcycle", "Honda", 80); +var cbr1000 = new product("CBR650", "Motorcycle", "Honda", 200); +var cbr250 = new product("CBR650", "Motorcycle", "Honda", 30); +var ninja650 = new product("CBR650", "Motorcycle", "kawasaki", 100); +var ninja500 = new product("CBR650", "Motorcycle", "kawasaki", 80); +var ninja1000 = new product("CBR650", "Motorcycle", "kawasaki", 200); +var ninja250 = new product("CBR650", "Motorcycle", "kawasaki", 30); +var PartushMotors = [ + cbr1000, cbr250, cbr500, cbr650, ninja1000, ninja650, ninja500, ninja250, +]; +// Exercise #1 +var kawasaki = PartushMotors.filter(function (product) { return product.type === "kawasaki"; }); +console.log(kawasaki); +// Exercise #2 +var cheapest = PartushMotors.filter(function (motorcycle) { + return motorcycle.price <= 30; +}); +console.log(cheapest); +// Exercise #3 - I did Type instead of department +var sortedbyprice = PartushMotors.filter(function (motorcycle) { return motorcycle.type === "Honda"; }) + .sort(function (a, b) { return a.price - b.price; }); +console.log(sortedbyprice); diff --git a/02-TypeScript/10-arrays/home-puzzles/yuval.p/index.html b/02-TypeScript/10-arrays/home-puzzles/yuval.p/index.html new file mode 100644 index 000000000..07909776b --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/yuval.p/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/10-arrays/home-puzzles/yuval.p/index.ts b/02-TypeScript/10-arrays/home-puzzles/yuval.p/index.ts new file mode 100644 index 000000000..851b95500 --- /dev/null +++ b/02-TypeScript/10-arrays/home-puzzles/yuval.p/index.ts @@ -0,0 +1,42 @@ +class product { + public constructor( + public name:string, + public department:string, + public type:string, + public price:number + ){} +} + +const cbr650 = new product("CBR650", "Motorcycle", "Honda", 100); +const cbr500 = new product("CBR650", "Motorcycle", "Honda", 80); +const cbr1000 = new product("CBR650", "Motorcycle", "Honda", 200); +const cbr250 = new product("CBR650", "Motorcycle", "Honda", 30); +const ninja650 = new product("CBR650", "Motorcycle", "kawasaki", 100); +const ninja500 = new product("CBR650", "Motorcycle", "kawasaki", 80); +const ninja1000 = new product("CBR650", "Motorcycle", "kawasaki", 200); +const ninja250 = new product("CBR650", "Motorcycle", "kawasaki", 30); + +const PartushMotors:product[] = [ + cbr1000,cbr250,cbr500,cbr650,ninja1000,ninja650,ninja500,ninja250, +]; + +// Exercise #1 +const kawasaki = PartushMotors.filter(product => product.type === "kawasaki"); +console.log(kawasaki); + +// Exercise #2 +const cheapest = PartushMotors.filter((motorcycle) => { + return motorcycle.price <= 30 +}); +console.log(cheapest); + +// Exercise #3 - I did Type instead of department +const sortedbyprice = PartushMotors.filter(motorcycle => motorcycle.type === "Honda") + .sort((a, b) => a.price - b.price); +console.log(sortedbyprice); + + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/Info/info.md b/02-TypeScript/11-DOM Manipulations/Info/info.md new file mode 100644 index 000000000..96c1b6a80 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/Info/info.md @@ -0,0 +1,9 @@ +## Documentation + +(Please read the whole chapter) +https://www.w3schools.com/js/js_htmldom.asp + +## Video + +INT video: https://youtu.be/ErLdpPnb63M + diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.css new file mode 100644 index 000000000..0d9f69c65 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.css @@ -0,0 +1,118 @@ +body { + margin: 0; + position: relative; + background-color: wheat; +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: rgb(56, 17, 186); + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: rgb(42, 41, 41); + color: white; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__book { + width: 40rem; + height: 25rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__book__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: white; + font-weight: 600; + gap: 1rem; +} +.results__book__image--theLordOfTheRings { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.midjourney.com/538c1d13-f86a-43ea-bde9-20f2666e562c/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--theNeverEndingStory { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.midjourney.com/39ab6f17-9154-43ef-a041-6361c16cf8a9/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aPigeonAndABoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.shopify.com/s/files/1/0423/2721/2193/products/20608PeaceBoy_grande.jpg?v=1594329742); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--fontanelle { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://www.philipjuras.com/wp-content/uploads/2017031107wiregrass.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--nehamaTheLouse { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.shopify.com/s/files/1/0561/5642/2335/products/detail8_58491d97-6202-4a68-a095-544b6ea5b79e_1200x.jpg?v=1627560676); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--myRussianGrandmotherAndHerAmericanVacuum { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://render.fineartamerica.com/images/rendered/search/print/6.5/8/break/images/artworkimages/medium/2/woman-cleaning-with-a-canister-vacuum-csa-images.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--lesMiserables { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://mir-s3-cdn-cf.behance.net/projects/404/20332039.543440efd96e7.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--doNotRaiseAHandAgainstTheBoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://www.kipa.co.il/userFiles/735-415/701091d37ad185c1b22e57003352ad83.jpg); + background-size: cover; + background-repeat: no-repeat; +} +.results__book__image--fromTheKitchenWithLove { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.pixabay.com/photo/2021/09/20/06/55/spaghetti-6639970__340.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aTaleOfFiveBalloons { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://www.pqpq2.co.il/productImages2/135/2017/08/27/image1503826593.jpg); + background-size: 100%; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.html new file mode 100644 index 000000000..bb28b8fcd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.html @@ -0,0 +1,19 @@ + + + + + + + + BookShook + + +
              Book-Shook
              + + +
              +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.scss new file mode 100644 index 000000000..a64107b29 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.scss @@ -0,0 +1,120 @@ +body{ + margin:0; + position: relative; + background-color: wheat; +} + +.header{ + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: rgb(56, 17, 186); + font-weight: 800; + +} + +.searchBox{ + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: rgb(42, 41, 41); + color: white; +} + +.results{ + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + + &__book{ + width: 40rem; + height: 25rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; ; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + &__wrapper{ + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: white; + font-weight: 600; + gap: 1rem; + } + &__image--theLordOfTheRings{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.midjourney.com/538c1d13-f86a-43ea-bde9-20f2666e562c/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--theNeverEndingStory{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.midjourney.com/39ab6f17-9154-43ef-a041-6361c16cf8a9/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--aPigeonAndABoy{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.shopify.com/s/files/1/0423/2721/2193/products/20608PeaceBoy_grande.jpg?v=1594329742); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--fontanelle{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://www.philipjuras.com/wp-content/uploads/2017031107wiregrass.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--nehamaTheLouse{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.shopify.com/s/files/1/0561/5642/2335/products/detail8_58491d97-6202-4a68-a095-544b6ea5b79e_1200x.jpg?v=1627560676); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--myRussianGrandmotherAndHerAmericanVacuum{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://render.fineartamerica.com/images/rendered/search/print/6.5/8/break/images/artworkimages/medium/2/woman-cleaning-with-a-canister-vacuum-csa-images.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--lesMiserables{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://mir-s3-cdn-cf.behance.net/projects/404/20332039.543440efd96e7.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--doNotRaiseAHandAgainstTheBoy{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://www.kipa.co.il/userFiles/735-415/701091d37ad185c1b22e57003352ad83.jpg); + background-size: cover; + background-repeat: no-repeat; + } + &__image--fromTheKitchenWithLove{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.pixabay.com/photo/2021/09/20/06/55/spaghetti-6639970__340.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--aTaleOfFiveBalloons{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://www.pqpq2.co.il/productImages2/135/2017/08/27/image1503826593.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.ts new file mode 100644 index 000000000..af9cb7666 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/bookshook.ts @@ -0,0 +1,68 @@ +class Book { + public constructor( + public title: string, + public price: number, + public genre: string, + public language: string, + public sn: number, + public camelCaseTitle: string + ) { } +} + +const theLordOfTheRings = new Book("The Lord Of The Rings", 130, "Fiction", "English", 4120, "theLordOfTheRings"); +const theNeverEndingStory = new Book("The Never Ending Story", 120, "Fiction", "English", 4130, "theNeverEndingStory"); +const aPigeonAndABoy = new Book("A Pigeon and A Boy", 90, "Fiction", "Hebrew", 4150, "aPigeonAndABoy"); +const fontanelle = new Book("Fontanelle", 90, "Fiction", "Hebrew", 4274, "fontanelle"); +const nehamaTheLouse = new Book("Nehama the Louse", 20, "Children", "Hebrew", 1050, "nehamaTheLouse"); +const myRussianGrandmotherAndHerAmericanVacuum = new Book("My Russian Grandmother and Her American Vacuum", 90, "Auto-biography", "Hebrew", 3730, "myRussianGrandmotherAndHerAmericanVacuum"); +const lesMiserables = new Book("Les Miserables", 100, "Historical", "French", 4285, "lesMiserables"); +const doNotRaiseAHandAgainstTheBoy = new Book("Do Not Raise a Hand Against the Boy", 70, "Memoir", "Hebrew", 3030, "doNotRaiseAHandAgainstTheBoy"); +const fromTheKitchenWithLove = new Book("From The Kitchen With Love", 50, "Cooking", "Hebrew", 4700, "fromTheKitchenWithLove"); +const aTaleOfFiveBalloons = new Book("A Tale of Five Balloons", 20, "Children", "Hebrew", 2010, "aTaleOfFiveBalloons"); + +const allBooksArray: Book[] = [theLordOfTheRings, theNeverEndingStory, aPigeonAndABoy, fontanelle, nehamaTheLouse, myRussianGrandmotherAndHerAmericanVacuum, lesMiserables, doNotRaiseAHandAgainstTheBoy, fromTheKitchenWithLove, aTaleOfFiveBalloons]; + + +const bookData: HTMLDivElement | null = document.querySelector("#bookData"); +if (bookData) { + for (let i = 0; i < allBooksArray.length; i++) { + const book = document.createElement("div"); + book.innerHTML = ` +
              +
              + Title: ${allBooksArray[i].title} + Price: ${allBooksArray[i].price} NIS + Genre: ${allBooksArray[i].genre} + Language: ${allBooksArray[i].language} + sn: ${allBooksArray[i].sn} +
              +
              + ` + document.querySelector("#bookData")?.appendChild(book); + } +} + +function search(): void { + try { + const userInput: HTMLInputElement | null | any= document.querySelector("#userInput"); + userInput?.addEventListener("input", search => { + let userInputValue = search.target?.value; + userInputValue = userInputValue.toLocaleLowerCase(); + + let results = document.querySelectorAll(".results__book"); + + for (let i = 0; i < results.length; i++) { + if (results[i].innerHTML.toLocaleLowerCase().includes(userInputValue)) { + results[i].style.display = ""; + } else { + results[i].style.display = "none"; + } + } + }) + } + + catch (error) { + console.error(error); + return error; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/dist/bookshook.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/dist/bookshook.css new file mode 100644 index 000000000..e611f0e62 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/dist/bookshook.css @@ -0,0 +1,118 @@ +body { + margin: 0; + position: relative; + background-color: wheat; +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: #3811ba; + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: #2a2929; + color: white; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__book { + width: 40rem; + height: 25rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__book__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: white; + font-weight: 600; + gap: 1rem; +} +.results__book__image--theLordOfTheRings { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.midjourney.com/538c1d13-f86a-43ea-bde9-20f2666e562c/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--theNeverEndingStory { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.midjourney.com/39ab6f17-9154-43ef-a041-6361c16cf8a9/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aPigeonAndABoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.shopify.com/s/files/1/0423/2721/2193/products/20608PeaceBoy_grande.jpg?v=1594329742); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--fontanelle { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://www.philipjuras.com/wp-content/uploads/2017031107wiregrass.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--nehamaTheLouse { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.shopify.com/s/files/1/0561/5642/2335/products/detail8_58491d97-6202-4a68-a095-544b6ea5b79e_1200x.jpg?v=1627560676); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--myRussianGrandmotherAndHerAmericanVacuum { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://render.fineartamerica.com/images/rendered/search/print/6.5/8/break/images/artworkimages/medium/2/woman-cleaning-with-a-canister-vacuum-csa-images.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--lesMiserables { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://mir-s3-cdn-cf.behance.net/projects/404/20332039.543440efd96e7.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--doNotRaiseAHandAgainstTheBoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://www.kipa.co.il/userFiles/735-415/701091d37ad185c1b22e57003352ad83.jpg); + background-size: cover; + background-repeat: no-repeat; +} +.results__book__image--fromTheKitchenWithLove { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.pixabay.com/photo/2021/09/20/06/55/spaghetti-6639970__340.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aTaleOfFiveBalloons { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://www.pqpq2.co.il/productImages2/135/2017/08/27/image1503826593.jpg); + background-size: 100%; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/dist/bookshook.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/dist/bookshook.js new file mode 100644 index 000000000..b2a6dc458 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Amit/dist/bookshook.js @@ -0,0 +1,54 @@ +var _a; +var Book = /** @class */ (function () { + function Book(title, price, genre, language, sn, camelCaseTitle) { + this.title = title; + this.price = price; + this.genre = genre; + this.language = language; + this.sn = sn; + this.camelCaseTitle = camelCaseTitle; + } + return Book; +}()); +var theLordOfTheRings = new Book("The Lord Of The Rings", 130, "Fiction", "English", 4120, "theLordOfTheRings"); +var theNeverEndingStory = new Book("The Never Ending Story", 120, "Fiction", "English", 4130, "theNeverEndingStory"); +var aPigeonAndABoy = new Book("A Pigeon and A Boy", 90, "Fiction", "Hebrew", 4150, "aPigeonAndABoy"); +var fontanelle = new Book("Fontanelle", 90, "Fiction", "Hebrew", 4274, "fontanelle"); +var nehamaTheLouse = new Book("Nehama the Louse", 20, "Children", "Hebrew", 1050, "nehamaTheLouse"); +var myRussianGrandmotherAndHerAmericanVacuum = new Book("My Russian Grandmother and Her American Vacuum", 90, "Auto-biography", "Hebrew", 3730, "myRussianGrandmotherAndHerAmericanVacuum"); +var lesMiserables = new Book("Les Miserables", 100, "Historical", "French", 4285, "lesMiserables"); +var doNotRaiseAHandAgainstTheBoy = new Book("Do Not Raise a Hand Against the Boy", 70, "Memoir", "Hebrew", 3030, "doNotRaiseAHandAgainstTheBoy"); +var fromTheKitchenWithLove = new Book("From The Kitchen With Love", 50, "Cooking", "Hebrew", 4700, "fromTheKitchenWithLove"); +var aTaleOfFiveBalloons = new Book("A Tale of Five Balloons", 20, "Children", "Hebrew", 2010, "aTaleOfFiveBalloons"); +var allBooksArray = [theLordOfTheRings, theNeverEndingStory, aPigeonAndABoy, fontanelle, nehamaTheLouse, myRussianGrandmotherAndHerAmericanVacuum, lesMiserables, doNotRaiseAHandAgainstTheBoy, fromTheKitchenWithLove, aTaleOfFiveBalloons]; +var bookData = document.querySelector("#bookData"); +if (bookData) { + for (var i = 0; i < allBooksArray.length; i++) { + var book = document.createElement("div"); + book.innerHTML = "\n
              \n
              \n Title: " + allBooksArray[i].title + " \n Price: " + allBooksArray[i].price + " NIS \n Genre: " + allBooksArray[i].genre + " \n Language: " + allBooksArray[i].language + " \n sn: " + allBooksArray[i].sn + " \n
              \n
              \n "; + (_a = document.querySelector("#bookData")) === null || _a === void 0 ? void 0 : _a.appendChild(book); + } +} +function search() { + try { + var userInput = document.querySelector("#userInput"); + userInput === null || userInput === void 0 ? void 0 : userInput.addEventListener("input", function (search) { + var _a; + var userInputValue = (_a = search.target) === null || _a === void 0 ? void 0 : _a.value; + userInputValue = userInputValue.toLocaleLowerCase(); + var results = document.querySelectorAll(".results__book"); + for (var i = 0; i < results.length; i++) { + if (results[i].innerHTML.toLocaleLowerCase().includes(userInputValue)) { + results[i].style.display = ""; + } + else { + results[i].style.display = "none"; + } + } + }); + } + catch (error) { + console.error(error); + return error; + } +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/dist/index.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/dist/index.js new file mode 100644 index 000000000..39b52b5d4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/dist/index.js @@ -0,0 +1,35 @@ +var dice = function () { + return Math.floor(Math.random() * 6); +}; +var dice1 = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Dice-1-b.svg/836px-Dice-1-b.svg.png?20121130115708"; +var dice2 = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Dice-2-b.svg/836px-Dice-2-b.svg.png?20121130115708"; +var dice3 = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Dice-3-b.svg/836px-Dice-3-b.svg.png?20121130115712"; +var dice4 = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Dice-4-b.svg/836px-Dice-4-b.svg.png?20121130115712"; +var dice5 = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Dice-5-b.svg/836px-Dice-5-b.svg.png?20121130115716"; +var dice6 = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Dice-6-b.svg/836px-Dice-6-b.svg.png?20121130115716"; +var diceArr = [ + dice1, + dice2, + dice3, + dice4, + dice5, + dice6 +]; +var rollRandomDice = document.querySelector("#dice"); +if (rollRandomDice && rollRandomDice != null) { + rollRandomDice.innerHTML = ""; +} +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var dices = document.querySelector("#dice"); +if (dices) { + console.dir(dices); + dices.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/dist/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/dist/style.css new file mode 100644 index 000000000..0d81e075a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/dist/style.css @@ -0,0 +1,15 @@ +#dice { + width: 836px; + height: 836px; + border-radius: 15%; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + margin-left: 19rem; +} + +button { + height: 150px; + width: 350px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/index.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/index.html new file mode 100644 index 000000000..0374bd735 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + +
              + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/index.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/index.ts new file mode 100644 index 000000000..3bf6a6173 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/index.ts @@ -0,0 +1,42 @@ +const dice = () =>{ + return Math.floor(Math.random() * 6) +}; + + +const dice1 = `https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Dice-1-b.svg/836px-Dice-1-b.svg.png?20121130115708` +const dice2 = `https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Dice-2-b.svg/836px-Dice-2-b.svg.png?20121130115708` +const dice3 = `https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Dice-3-b.svg/836px-Dice-3-b.svg.png?20121130115712` +const dice4 = `https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Dice-4-b.svg/836px-Dice-4-b.svg.png?20121130115712` +const dice5 = `https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Dice-5-b.svg/836px-Dice-5-b.svg.png?20121130115716` +const dice6 = `https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Dice-6-b.svg/836px-Dice-6-b.svg.png?20121130115716` + +const diceArr =[ + dice1, + dice2, + dice3, + dice4, + dice5, + dice6 +]; + +const rollRandomDice:HTMLDivElement | null = document.querySelector(`#dice`); +if (rollRandomDice && rollRandomDice != null){ + rollRandomDice.innerHTML= ``; +} + + +function getRandomColor() { + const letters = "0123456789ABCDEF"; + let color = `#`; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + const dices: HTMLDivElement | null = document.querySelector("#dice"); + +if (dices) { + console.dir(dices); + dices.style.backgroundColor = getRandomColor(); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/style.css new file mode 100644 index 000000000..0d81e075a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/style.css @@ -0,0 +1,15 @@ +#dice { + width: 836px; + height: 836px; + border-radius: 15%; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; + margin-left: 19rem; +} + +button { + height: 150px; + width: 350px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/style.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/style.scss new file mode 100644 index 000000000..30bb7127d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 4/style.scss @@ -0,0 +1,21 @@ +#dice{ + width: 836px; + height: 836px; + border-radius: 15%; + + + background-repeat: no-repeat; + background-position: center; + background-size:cover; + position: relative; + margin-left: 19rem; + +} + +button{ +height: 150px; +width: 350px; +} + + + diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/dist/index.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/dist/index.js new file mode 100644 index 000000000..6b4446276 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/dist/index.js @@ -0,0 +1,15 @@ +var throwDice = function () { + return Math.floor(Math.random() * 5); +}; +var dice1 = 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Dice-1-b.svg'; +var dice2 = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Dice-2-b.svg/557px-Dice-2-b.svg.png'; +var dice3 = 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Dice-3-b.svg'; +var dice4 = 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Dice-4-b.svg'; +var dice5 = 'https://upload.wikimedia.org/wikipedia/commons/0/08/Dice-5-b.svg'; +var dice6 = 'https://upload.wikimedia.org/wikipedia/commons/2/26/Dice-6-b.svg'; +var diceArray = [dice1, dice2, dice3, dice4, dice5, dice6]; +var randomDice = document.querySelector("#randomDice"); +if (randomDice != null) { + randomDice.innerHTML = ""; + // randomDice.innerHTML = +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/dist/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/dist/style.css new file mode 100644 index 000000000..b870700f8 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/dist/style.css @@ -0,0 +1,7 @@ +#randomDice { + width: 100px; + height: 100px; +} +#randomDice img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/index.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/index.html new file mode 100644 index 000000000..b8273f2a3 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/index.html @@ -0,0 +1,14 @@ + + + + + + + + Document + + +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/index.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/index.ts new file mode 100644 index 000000000..aef88f714 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/index.ts @@ -0,0 +1,18 @@ +let throwDice = () => { + return Math.floor(Math.random() * 5) +}; +const dice1:string = 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Dice-1-b.svg' +const dice2:string = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Dice-2-b.svg/557px-Dice-2-b.svg.png' +const dice3:string = 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Dice-3-b.svg' +const dice4:string = 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Dice-4-b.svg' +const dice5:string = 'https://upload.wikimedia.org/wikipedia/commons/0/08/Dice-5-b.svg' +const dice6:string = 'https://upload.wikimedia.org/wikipedia/commons/2/26/Dice-6-b.svg' + +const diceArray = [dice1,dice2,dice3,dice4,dice5,dice6] + +const randomDice:HTMLDivElement | null = document.querySelector("#randomDice"); + +if (randomDice != null){ + randomDice.innerHTML = ``; +// randomDice.innerHTML = +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/style.css new file mode 100644 index 000000000..b870700f8 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/style.css @@ -0,0 +1,7 @@ +#randomDice { + width: 100px; + height: 100px; +} +#randomDice img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/style.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/style.scss new file mode 100644 index 000000000..eef0e4494 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/Room 5/style.scss @@ -0,0 +1,10 @@ +#randomDice { + width: 100px; + height: 100px; + + img { + width: 100%; + } + + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/dist/index.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/dist/index.js new file mode 100644 index 000000000..d6dcc59ac --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/dist/index.js @@ -0,0 +1,10 @@ +var Card = document.querySelectorAll(".Card"); +console.log(Card); +var userName = prompt("what is your name"); +var userAddress = prompt("what is your address?"); +var usrerMail = prompt("what is your email?"); +var imagUrl = prompt("inter imag url"); +debugger; +if (Card) { + Card.innerHTML = "

              This is " + userName + "'s card

              \n \n

              Addres: " + userAddress + "

              \n

              mail:" + usrerMail + "

              "; +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/dist/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/dist/style.css new file mode 100644 index 000000000..3ec062b79 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/dist/style.css @@ -0,0 +1,9 @@ +.Card { + width: 300px; + height: 200px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); +} +.Card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/index.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/index.html new file mode 100644 index 000000000..0acd11121 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
              my buseness card
              + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/index.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/index.ts new file mode 100644 index 000000000..e60a1061f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/index.ts @@ -0,0 +1,17 @@ +const Card:HTMLDivElement = document.querySelectorAll(".Card") +console.log(Card) + + +const userName: string | null = prompt("what is your name") +const userAddress: string | null = prompt("what is your address?") +const usrerMail: string | null = prompt("what is your email?") +const imagUrl: string | null = prompt("inter imag url") + + +if ( Card&& userName && userAddress && usrerMail && imagUrl) { + + Card.innerHTML = `

              This is ${userName}'s card

              + +

              Addres: ${userAddress}

              +

              mail:${usrerMail}

              `; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/style.css new file mode 100644 index 000000000..3ec062b79 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/style.css @@ -0,0 +1,9 @@ +.Card { + width: 300px; + height: 200px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); +} +.Card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/style.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/style.scss new file mode 100644 index 000000000..0fe2fb80e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/aviva-elias/style.scss @@ -0,0 +1,10 @@ +.Card{ + width: 300px; + height: 200px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0,0,0,0.394); + + img{ + width: 100%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/dist/index.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/dist/index.js new file mode 100644 index 000000000..434e0a9db --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/dist/index.js @@ -0,0 +1,29 @@ +function getRandomInt(max) { + return Math.floor(Math.random() * max); +} +var diceGen = document.querySelector("#diceGen"); +var randomNumber = getRandomInt(6); +var imgURL = "a"; +switch (randomNumber) { + case 0: + imgURL = "data:image/jpeg;base64,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"; + break; + case 1: + imgURL = "data:image/jpeg;base64,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"; + break; + case 2: + imgURL = "data:image/jpeg;base64,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"; + break; + case 3: + imgURL = "data:image/jpeg;base64,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"; + break; + case 4: + imgURL = "data:image/jpeg;base64,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"; + break; + case 5: + imgURL = "data:image/jpeg;base64,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"; + break; +} +if (diceGen && imgURL) { + diceGen.innerHTML = "
              "; +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/dist/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/dist/style.css new file mode 100644 index 000000000..7c7fba772 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/dist/style.css @@ -0,0 +1,15 @@ +.die { + margin: auto; + width: 100px; + height: 100px; + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + display: flex; + align-items: center; + justify-content: center; +} +.die img { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/index.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/index.html new file mode 100644 index 000000000..ffad3d23c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + +
              + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/index.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/index.ts new file mode 100644 index 000000000..45bd3ae73 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/index.ts @@ -0,0 +1,32 @@ +function getRandomInt(max) { + return Math.floor(Math.random() * max); +} + +const diceGen:HTMLHeadingElement|null = document.querySelector("#diceGen") +const randomNumber = getRandomInt(6); + + +let imgURL:string = `a`; +switch (randomNumber){ + case 0: + imgURL = `data:image/jpeg;base64,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` + break; + case 1: + imgURL = `data:image/jpeg;base64,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` + break; + case 2: + imgURL = `data:image/jpeg;base64,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` + break; + case 3: + imgURL = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBEREhESERIYEhgRGBERERgRERIRERERGBgZGhgYGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHxISGjQrJSU0NDQ0NDQ0NDQ0NDY0NDQxNDQ0NDE0NDQxNDQ0NDQ0MTQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIALcBEwMBIgACEQEDEQH/xAAcAAACAwEBAQEAAAAAAAAAAAAAAQIEBQMGBwj/xABAEAABAwIEBAQDBQUFCQAAAAABAAIRAyEEBRIxQVFhcQYigaETkcEycrHR8EJSYuHxByNTorIUFRYzQ4KSwsP/xAAYAQEAAwEAAAAAAAAAAAAAAAAAAQIDBP/EACURAQEBAAIDAAEDBQEAAAAAAAABAgMREiExQQQicTJRYZGhE//aAAwDAQACEQMRAD8AywpBJNAIQkoDUgoBSCCYQEgmEDCaSYQSCYCQUggApQkFIBAoThAThAoThSQgjCIUlCUAknBXdmFeeHaBugrlRWgzK6h4W7xZd2ZTzI9yVHcOmQGpLeOUNJ+0fmFwqZNH2Xp5RPTJCkFYxGCewSRPUbKspQacJBNAoShNOEECFEhTKSCEJohCkV0JwmggUKRCUKAgpBACkAgYQEAKQCACYCYCYCAAUgEAKQCAAQgBSQCaEIBIpqJQEEq1g8E6oduMDup4bCOdcDULTY/Jeloup0wP2ieHKSI/AKLSTtwwmUBgPlB6kfgrhwzG7np+a4V8we6wESLDZUn13km8TJjfcbLLXJmNs8Wq0HsYN3b3HK26qmvTaATBmCd+JPJUjUm5Mx1XB75sfltA7ql5o1nBWucxpgDyA8791A5hQduC2edgF5+rUdfp2KrGtw35WuEnN2i8HT1TXN3nUOHGVSxeSteC+hY3lpIieixG4h7bgxPDqtDLc1e13b5Fa51GOsWMxzC0kOEEWIO4SC9NmeFZiqZq0x523LbeaPrH4LzULSVmEICcKRFCZCCEEEJwhBXhEJwnCCMJQpQnCBAJgJgKYCgRAUgFIBMBAoTATAThAgE4TAThAoTCIThAk04QgipUWy4BRKs5dQL6gCUaFKoRy5ACLdSugeTt6kqVWlB0t+e/dd34cgiBvtbZcvLq31HVw5k91xe48+8WXFxH813ewjfhysFJlMGwEA+yx8bXT5SKj2fz5wuT2nlvtIlaL6IA32ue11XMQ7+HfhA6qPEmmTiLb8IBgb9lm1akSJjuIWljKZcb242Fo9d/ZZbgSTe26T6jVbeEDDRZTawOfUIfL92xIAniCIuPXZUX0XU3w6W3LTBtI/FdMtcRcb/sxuOrR3PrxHA88ye52lxAPAm4vaCPY+u5sV1ZvqOXX2tXLcQ+m5rgZFgeC7Z/gh/zqYs6A4cnfkVk4OtccQfx5FemZVa+loIkERdaS9MdR5QBOF2r0SxxHyUAFoqgQokLrCRCDlCFPShBVhOE4ThBGEwFKEwECAUgEwEwFAQCkAmApAIIgKUJwnCkRhEKcIhBGEQpQiEChBClCIQcnLX8PMGu8fVZTgr+WVNBHQyVXSY05OtwG/mA/X1Xb4pgFwgxEdf1xVfMHxVBad/Nbn+gpNcTwBNpPC305Lk1f3WOrHyHUDgOXOx26SqtM6ZMzcq5WeCbkmbQefYKrWqsYHahYSTI2Va1ntYY9rmzMwbyeC44mJIO0SfTmqtPF06bxeWVBB7QSD7BcsXmGo6RYXY48SP5qO09OVe4kDfaNx+pVAUyLkRO9tloHENLo1hsb6y1t+JHFVsRXYw+ZwcObCHgegv+tlaYqmtz44lxbHAA6gRx6ytCvgviUnVG9zz1cR7qgzEscRTkAmb7jUFdwGJewPp3h4LSI8voVtmMdXuK2GpxfeQD3H5jb0WxhXeSb2n+iq5XSD3Fv3hB/dvb0uPkthuD0B4BsAJ6tI39j8leT0y19Y2ObeewP0KqgK3iReL2kX9lXAV58UqMJFq6QkQrDlpQukIQUU4TThAoTARCkgQCkEgpBQGApBIKQQACaaFIIRCcIhAoThEIhAQiEQnCCDgumFNz6fioEIpkhwUancTGyy7WONiCWnsRZWmFvH9cyfbuSkyl/dS7oR2lVcTTgNdcdRy7rl1Oq6M39rjmuZihTkQCbyd2/kV5DGeIH1RpZTIH7RiAVTzzMatSo5tMQ1jtBJGotPmj1MH2XTLstxRZrOokkN0vBZqbbaTAifbdLnud/hbOur1+XocopnEYZzCINO12zLeF/b0WJjqLoDA9zYMG5+cr2mVYE06TxIJttsTF/kvL5gyKjw7YyCsuvbb7GK+m9utuHAeWNNSo97dToHLpf2PJc8AzGvc4tuAC6XMaxhvEFwkX35r22WAA/EFNjXENBe0Q5zQNiu1egXmXOEG9y7+a1msydWMrm999vK0nawHOs9ph2nzC0XngFu5fWlwLtzxPE8AulTCjYDlcx9FBuGlzWt34cPRRnV7Ll0pVPh1C4Wk6hFvNw+ZlaGfY8tayox0BxkDkSASOi6/ApNaC+HE7sv5XDnN5+S81mmJ0mpQdq0P89M2kAk6Rv3BW1vUY9eWlrL8yZiGvLZDmHS8OESeBA9PZWYWVldPTU1/4jXtd99hbPzBB+a2IV+O95U5MzOvTnCUKcJFXUQhCaEQowiE4ThEkEwE4TQATCAFIBQGEwgJhSGEICaBJwnCcIEiE4ThBGEQpQiEECFDiupC5uCD09N7TTDZs5ontB+qrvY4sAHmHEAgH3tHdZeDxri5zAyPhhhDgftB0+9itnAVA4OaecD81y8l7+OnGbJ7cGYM0qYYxrJcXPc7UQ8ucSTMC+/RV8JlHm+JUdq5TIaD05+q23tgW4xfmqOZYwUm73vb81W+o0zLVpmluoNMbyOItefmvJ5k1pqaSJHGABPP+qsuzmlh2a31Gl9Qa9JMF2qIHWwFl5HMvEznPDw0DTMeXf0SfY0+StfIcxaSWvBYQbA3svQtAIsR33K+cUs1qVHN1M0RAB0gGOsL1eDqu0A3IKjc6pm9xbxVUglVjVI8w3bfuOP1XLF1Z24wVDD4gAgnseCjH1HIuPqOf5pJm5lxPO9+3sszxPhHOpUXMkvpFxeLjVT3gc4mfmtvJHzVDOEmBOxO34BS8ZPDBT0jclojjIIPoI36rfruOeXrUYeQP1wJsCHdrEH/Ut4hefyWl8OoxszrD3GNhbb5wvQuVuL+lTl+oqJUyolasUUJoQUoTAThOESUJwnCYCBAKQCcIAQEJgJgJgIEApQgBShAgEQpQnCCMIhShEIEhOEQgjCg4LrCiQgs4CoxjarnidLQffZQyrFSGuNtYcRBmLkfRQw4Bdpds+Wn12Uwx1MU6bhHwy5rTFnNkm3OxXJy5606+K95/hpYjHmABaI5n9fyWNWpuxFQMJ8s+a/Diutd87dVzwT4kzEmPksu+77bTqT0r47wnRr1WveHEMAGnVDCBz4jsDwWdiPCtBtQBoLeMNMtHYFeorZk1oiY9eCwcT4gosfLZeRtoj5LSa/sddqtTJ2s4zzld6T9HlOx+iwsd4jeLuY1uo2Dn3N+W6zW5zUeYZTcT0B+qXOqi6k/L1z7i2xuOyoVLdjZPKq73wXtLCLQfpwPorGMpbjlfuFSfUW9x1wmJ0PB3NuV11zyr8Q0rm2o8BJhvLus6m7a+3KFqYTDUsTLajZ0tLhBLS24kyLrbPv0x11L3UMqpydXBmoDuYstIrtUaxoaym0Na0AADnxPUnmuJW+c9TphrXlewVEqSirKEhNCCoApBIKQQEJgJhACJEJgJwmAgAEwEAKQQEJgJgIAQEIhOE4QRhEKUIhBGEQpQlCIKEEJwiEEYWxSaKtMQRImxvoPGFkwmxzmmWmCFTefKNMa8ahiKcOPSfRZ2JpVBT8m5k/NabnOdqLzqLpJMR7IY+AGnsuLWbm9V2Z1NT08S/LcxrtcGhsAkaXOcHOjoBstPKPCOnz4t1R/NlJ/wWBvEEyHH2Xq6VMNZ5dzPv/NZuY1Kht+cLSb6nUh4S/VWpgcLSGllNlPcHSA6o4TxdEz1VCsWTFNvUnn3PFdKODc9x+0/jvA/mtHD5fAl2/ADgVGratMyfIr4ZkDflPLdc8fWbrbHH2XTEu0zHD6LGxNbU4f1Vcz2jVnSy928LZ8KVBNRxuD5e4gz/q9l5mrUMQNzYfUrf8PPDYYNy0+rtTYW+fVc+/ca9UAEwZC5ldHrmuhzhIplIohFCEIK4UgkCmEDAUgkEwiTCaEwgYTSCkEAE0lIIBNCaBITQiChCaEChEJoQKEQpQhBEhVMQSLH06q7ChUYHAgie6z5MTUaY3c1Yy6u1wAO458l2xNBrjO8eq87XZUou1U5e3lPmC41M/iR5geIIK5erHZNR6BxYxrocBwEbrHxOYtEtYS6+54LAxea1HExPSRA91nMxVSfMZ91bx1U3kkauOx3mI9d5Wewlxn1PZc3HVc277lAfAPVWmemV15O2q/sOgXo/CNA1K7T+zT0uceFrtHcn2BXm8Lh31HspsEueYA5DmeQX0nKMGzDU202Xi73cXv4n8lfGe72z3rqdKHjnF1MCWV20fi0qpioQ7SadQ7AiDZ14PO3JZ+T5zSxbSactc37THRqHXqF6bxC1lbB1aTxIeAD6G3rML4zgnPwmJLWuvTJbPMdR2XTnPfpzvqJCRCz8tzmnWhjvI/kfsu+6fotMtUWWeqOMIXXSkoFIKQUQmEEgVIKKYKJTCkFAFSCCQUlEJhAwmkE0DTSCaINCE0AhCEAhNCAQhNAkJwkUSr4gRc7G3Y9V53NqOq8X6LdwWYgZpgsMYcyp8VlZrhLXh9J+lpHcA/JbOf+ESJfhwajNyzerT+7+8PfuseTjub5T8tsblnjXzT/AHcHsltnDf8AiC4GnoFwvV08KGmBczHIg9VjZ1Ta2pp4OAPrxWU1218WawE7LsyhsTeSA0C5e7YW/UroQIE9IA3J5Rx7L1uRZOacVqw88f3bT/0h1/i/BXzm2q61Mx3yLKxh2anialQec/uN/cH15n0Ww0qChUfyXRmdOe3v245hWkaRtx6lfHs0qasTWcD+28D0MfRfVsdVDKb6jtqbH1D2aCfovjuokydzc9Sd1pmKrjMQ8cfkt3LvF1WmQ2oPitFr2qAfe4+q8y565q99j6D/AMaYbiyoDxEMMf5kL5/qHJCeGR9YCaiFJYAUguamESkFMKAUwgkE0gmEDCaSaINMJBNA00kIGmkhAygIQgacICk0IFC44qs2mxz3mA0SfyWdm/iKjh5a3+8qfutNm/ePBeRxWZ1sS6ajrC7WtsxvpxW3Hw61/CLeksNm2nM8PiXWDa1In+GnqDT/AJSV+hWgG6/L+KbJPXkv0N4IzE4vA4aq4y4sayp99nld7gq3NnqkWcyyGjiSXFul/wC+yzj97971XyzxPk9ZldlGmKdeo4uawU3t1iASdQP2LA7ngeS+ieOPEZy+g0Um6q1dwZTAE6GCNbyOQBgdSOq+aeIcOW4r4dOoar3Fgc4ENJrOiWtM8CYklV/T/pc82rNXr1b/AI9f3X/9NZnpmY/C4nL6jdbmNe4B4NNzajmDkCRDT6Hfcr1OW+P8JLGYhjwHW+J8Nss2gvaz7Q3u0DbZeJznBvp4htOuBTBgvdTf8QEcYIm/Dotzw54ew9ao6pJfSb5aQeZ1PjzGYFgdlbWeHxzJ7vVvc+X/AB+UW67tv/X00UWPY17HNex4DmOYQ5rmniCLFUsVhYEx8l3y7AmkA2k7y7u1Ahjv+36q1UDXuNMOGrfTN46c1gh4fxs8UsBU4Gq6nSb11Olw/wDFrl8pc1fTP7Wanw/9jwwIsKmIeOphjP8A6L5wV0cef29otcAkSuz6c7Li/dNZsSEI0oUdUfVGvU9aELnBrTDkIQSD1NrkIRKQcnqQhEGHp6kIQPUnrQhA9aNaSED1p6kIQGpPUhCCpmObU8M3VUJ6BoJM/gvHZp4mr1paw/DbyafNHV35JoXVw4l9orFpq3qhqELtz8UqnUcvsv8AY7iNWCqM/wAOs8Ds4Nd/7FCFy8/xeKWd4PEZhi61VjQWUooU9Tw2zSdZjhJleTz7B1cIyg9zmtc9jKlP4ZcXNLdi4kfa2MyfZJCp+j5tY5pmfNd9/wClrJ0x8PSr46q3W4SRJMNb5DvtxuB/RfYMlyVlCmwHzGDH7rYiwHqhCz5ZJrwnqRH2tWu8MYTyErFysCo9z3gG8iRMEcRyKaFmPl39o2M+JmVcXik2lSbJLrBged+r3Ly8oQurH9MRTlc3tnihCtpDn8Ac0IQq+ES//9k=` + break; + case 4: + imgURL = `data:image/jpeg;base64,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` + break; + case 5: + imgURL = `data:image/jpeg;base64,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` + break; +} +if(diceGen&& imgURL){ + diceGen.innerHTML = `
              ` +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/style.css new file mode 100644 index 000000000..7c7fba772 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/style.css @@ -0,0 +1,15 @@ +.die { + margin: auto; + width: 100px; + height: 100px; + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + display: flex; + align-items: center; + justify-content: center; +} +.die img { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/style.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/style.scss new file mode 100644 index 000000000..d86d9ac27 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/idan/style.scss @@ -0,0 +1,16 @@ + +.die{ + margin :auto; + width : 100px; + height: 100px; + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + display: flex ; + align-items: center; + justify-content: center; + img{ + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/instrucrtions.md b/02-TypeScript/11-DOM Manipulations/class-puzzle/instrucrtions.md new file mode 100644 index 000000000..e682803e5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/instrucrtions.md @@ -0,0 +1,2 @@ +1. create a business card. get user address, name email and photo, and render to DOM +2. every time you relod the page show random number. make it like a dice. diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/dist/index.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/dist/index.js new file mode 100644 index 000000000..950566a21 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/dist/index.js @@ -0,0 +1,9 @@ +//create a business card. get user address, name email and photo, and render to DOM +var card = document.querySelector(".card"); +var userName = prompt('Enter your name:'); +var adress = prompt('Enter your adress:'); +var email = prompt('Enter your email:'); +var image = prompt('Enter the image url:'); +if (userName && adress && image && email && card) { + card.innerHTML = "

              " + userName + "

              \n
              " + adress + "
              \n
              " + email + "
              \n \"image\"/"; +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/dist/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/dist/style.css new file mode 100644 index 000000000..9d51548b5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/dist/style.css @@ -0,0 +1,16 @@ +body { + background-color: azure; +} + +.card { + border: black solid 3px; + width: 200px; + height: 200px; + background-color: white; + -webkit-box-shadow: 5px 5px 15px 5px #000000; + box-shadow: 5px 5px 15px 5px #000000; +} + +.details { + border: gray 1px solid; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/index.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/index.html new file mode 100644 index 000000000..490ca7ed4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/index.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/index.ts new file mode 100644 index 000000000..a0295bbc4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/index.ts @@ -0,0 +1,18 @@ +//create a business card. get user address, name email and photo, and render to DOM + +const card:HTMLHeadingElement | null = document.querySelector(".card"); + +const userName:string | null = prompt('Enter your name:') +const adress:string | null = prompt('Enter your adress:') +const email:string | null = prompt('Enter your email:') +const image:string | null = prompt('Enter the image url:') + + + + +if(userName && adress && image && email&& card){ + card.innerHTML = `

              ${userName}

              +
              ${adress}
              +
              ${email}
              + image`; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/style.css new file mode 100644 index 000000000..b9eb29100 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/style.css @@ -0,0 +1,15 @@ +body { + background-color: azure; +} + +.card { + border: black solid 3px; + width: 200px; + height: 200px; + background-color: white; + box-shadow: 5px 5px 15px 5px #000000; +} + +.details { + border: gray 1px solid; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/style.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/style.scss new file mode 100644 index 000000000..3ecf870fa --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room-2/style.scss @@ -0,0 +1,16 @@ +body{ + background-color: azure; +} + +.card{ + border: black solid 3px; + width: 200px; + height: 200px; + background-color: white; + -webkit-box-shadow: 5px 5px 15px 5px #000000; + box-shadow: 5px 5px 15px 5px #000000; +} + +.details{ + border: gray 1px solid; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/app.ts b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/app.ts new file mode 100644 index 000000000..767edcffc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/app.ts @@ -0,0 +1,14 @@ +const root:HTMLElement | null= document.querySelector("#root"); +const userfName:string | null = prompt ('what is your name?'); +const userAdress:string | null = prompt ('what is your address?'); +const UserEmail: string | null = prompt ('what is your Email?'); +const Userphoto: string | null = prompt ('what is your photo?'); + +if (userfName && userAdress && UserEmail && Userphoto && root) { + root.innerHTML = `
              +

              Name: ${userfName}

              +

              Adress: ${userAdress}

              +

              Email: ${UserEmail}

              + + `; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/dist/app.js b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/dist/app.js new file mode 100644 index 000000000..37e0851fd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/dist/app.js @@ -0,0 +1,8 @@ +var root = document.querySelector("#root"); +var userfName = prompt('what is your name?'); +var userAdress = prompt('what is your address?'); +var UserEmail = prompt('what is your Email?'); +var Userphoto = prompt('what is your photo?'); +if (userfName && userAdress && UserEmail && Userphoto && root) { + root.innerHTML = "
              \n

              Name: " + userfName + "

              \n

              Adress: " + userAdress + "

              \n

              Email: " + UserEmail + "

              \n \n "; +} diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/dist/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/dist/style.css new file mode 100644 index 000000000..b0ca10cda --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/dist/style.css @@ -0,0 +1,7 @@ +.usercard { + background-color: antiquewhite; + height: 100px; + width: 200px; + border-radius: 25px; + box-shadow: 2px 2px 6px #b1a7a7; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/index.html b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/index.html new file mode 100644 index 000000000..5a73a0f27 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + +
              start
              + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/style.css b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/style.css new file mode 100644 index 000000000..078982923 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/style.css @@ -0,0 +1,7 @@ +.usercard { + background-color: antiquewhite; + height: 100px; + width: 200px; + border-radius: 25px; + box-shadow: 2px 2px 6px rgb(177, 167, 167); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/style.scss b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/style.scss new file mode 100644 index 000000000..ac988d7ff --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/class-puzzle/room1/style.scss @@ -0,0 +1,7 @@ +.usercard { + background-color: antiquewhite; + height: 100px; + width: 200px; + border-radius: 25px; + box-shadow: 2px 2px 6px rgb(177, 167, 167); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example-innerHTML/dist/index.js b/02-TypeScript/11-DOM Manipulations/example-innerHTML/dist/index.js new file mode 100644 index 000000000..359d37e8d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example-innerHTML/dist/index.js @@ -0,0 +1,7 @@ +var title = document.querySelector("#title"); +console.dir(title); +var userName = prompt("What is you name"); +var imageUrl = prompt('Enter image url'); +if (userName && title && imageUrl) { + title.innerHTML = "
              \n

              This is " + userName + "'s site

              \n \n

              This is the best site ever

              \n
              "; +} diff --git a/02-TypeScript/11-DOM Manipulations/example-innerHTML/dist/style.css b/02-TypeScript/11-DOM Manipulations/example-innerHTML/dist/style.css new file mode 100644 index 000000000..43286bc10 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example-innerHTML/dist/style.css @@ -0,0 +1,13 @@ +.green { + background-color: #51c451; +} + +.card { + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + max-width: 300px; +} +.card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example-innerHTML/index.html b/02-TypeScript/11-DOM Manipulations/example-innerHTML/index.html new file mode 100644 index 000000000..b0c8ccc7e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example-innerHTML/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + +
              My Site
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example-innerHTML/index.ts b/02-TypeScript/11-DOM Manipulations/example-innerHTML/index.ts new file mode 100644 index 000000000..14b3f78b7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example-innerHTML/index.ts @@ -0,0 +1,14 @@ +const title:HTMLHeadingElement|null = document.querySelector("#title") + +console.dir(title); +const userName:string | null = prompt("What is you name"); + +const imageUrl: string | null = prompt('Enter image url') + +if(userName && title && imageUrl){ + title.innerHTML = `
              +

              This is ${userName}'s site

              + +

              This is the best site ever

              +
              `; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example-innerHTML/style.css b/02-TypeScript/11-DOM Manipulations/example-innerHTML/style.css new file mode 100644 index 000000000..88e93c8a0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example-innerHTML/style.css @@ -0,0 +1,13 @@ +.green { + background-color: rgb(81, 196, 81); +} + +.card { + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + max-width: 300px; +} +.card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example-innerHTML/style.scss b/02-TypeScript/11-DOM Manipulations/example-innerHTML/style.scss new file mode 100644 index 000000000..50709d105 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example-innerHTML/style.scss @@ -0,0 +1,14 @@ +.green{ + background-color: rgb(81, 196, 81); +} + +.card{ + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + max-width: 300px; + + img{ + width: 100%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example/dist/index.js b/02-TypeScript/11-DOM Manipulations/example/dist/index.js new file mode 100644 index 000000000..06f0d3a4a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example/dist/index.js @@ -0,0 +1,16 @@ +console.dir(document); +document.body.style.backgroundColor = "wheat"; +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var root = document.querySelector("#root"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/example/dist/style.css b/02-TypeScript/11-DOM Manipulations/example/dist/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example/dist/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example/index.html b/02-TypeScript/11-DOM Manipulations/example/index.html new file mode 100644 index 000000000..80b7d12a1 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example/index.ts b/02-TypeScript/11-DOM Manipulations/example/index.ts new file mode 100644 index 000000000..1969c8a39 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example/index.ts @@ -0,0 +1,21 @@ +console.dir(document); + +document.body.style.backgroundColor = "wheat"; + + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} + +const root: HTMLDivElement | null = document.querySelector("#root"); + +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/example/style.css b/02-TypeScript/11-DOM Manipulations/example/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/example/style.scss b/02-TypeScript/11-DOM Manipulations/example/style.scss new file mode 100644 index 000000000..1cf5f137e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/example/style.scss @@ -0,0 +1,11 @@ +#root{ + height: 100px; + width: 100px; + background-color: pink; +} + +.box{ + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Ayala/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/Ayala/dist/index.js new file mode 100644 index 000000000..5714c0435 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Ayala/dist/index.js @@ -0,0 +1,13 @@ +console.dir(document); +var btn = document.querySelector("#btn"); +function generateColor() { + var hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; + var code = ""; + for (var i = 0; i < 6; i++) { + code += hexArray[Math.floor(Math.random() * 15)]; + } + return "#" + code; +} +btn.addEventListener('click', function () { + document.body.style.backgroundColor = generateColor(); +}); diff --git a/02-TypeScript/11-DOM Manipulations/followups/Ayala/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/Ayala/dist/style.css new file mode 100644 index 000000000..15adf64ef --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Ayala/dist/style.css @@ -0,0 +1,14 @@ +body { + display: flex; + min-height: 100vh; + justify-content: center; + align-items: center; +} + +#btn { + width: 200px; + height: 50px; + border-radius: 5px; + border: black solid 1px; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Ayala/index.html b/02-TypeScript/11-DOM Manipulations/followups/Ayala/index.html new file mode 100644 index 000000000..bd044985e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Ayala/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Ayala/index.ts b/02-TypeScript/11-DOM Manipulations/followups/Ayala/index.ts new file mode 100644 index 000000000..31a0c07d2 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Ayala/index.ts @@ -0,0 +1,26 @@ +console.dir(document); +const btn = document.querySelector("#btn"); +function generateColor(){ + const hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F']; + let code = ""; + for(let i=0; i<6; i++){ + code += hexArray[Math.floor(Math.random()*15)]; + } + return `#${code}` +} + + + btn.addEventListener('click', () => { + document.body.style.backgroundColor = generateColor(); +}) + + + + + + + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/followups/Ayala/style.css b/02-TypeScript/11-DOM Manipulations/followups/Ayala/style.css new file mode 100644 index 000000000..15adf64ef --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Ayala/style.css @@ -0,0 +1,14 @@ +body { + display: flex; + min-height: 100vh; + justify-content: center; + align-items: center; +} + +#btn { + width: 200px; + height: 50px; + border-radius: 5px; + border: black solid 1px; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Ayala/style.scss b/02-TypeScript/11-DOM Manipulations/followups/Ayala/style.scss new file mode 100644 index 000000000..f8b9d78fd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Ayala/style.scss @@ -0,0 +1,17 @@ + + + + +body{ + display:flex; + min-height:100vh; + justify-content:center; + align-items:center; + } + #btn{ + width:200px; + height:50px; + border-radius:5px; + border:black solid 1px; + cursor:pointer; + } \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/index.js new file mode 100644 index 000000000..4197281ad --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/index.js @@ -0,0 +1,17 @@ +console.dir(document); +document.body.style.backgroundColor = "red"; +console.log(navigator.onLine); +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var root = document.querySelector("#root"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/styl.e.css b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/styl.e.css new file mode 100644 index 000000000..609253955 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/styl.e.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/style.css new file mode 100644 index 000000000..290f2db93 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/dist/style.css @@ -0,0 +1,11 @@ +#root { + width: 100px; + height: 100px; + background-color: blue; +} + +.boxes { + width: 100px; + height: 100px; + background-color: blue; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/index.html b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/index.html new file mode 100644 index 000000000..1f012928f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/index.ts b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/index.ts new file mode 100644 index 000000000..879486a71 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/index.ts @@ -0,0 +1,22 @@ +console.dir(document) + + +document.body.style.backgroundColor = "red"; +console.log(navigator.onLine); + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + + const root: HTMLDivElement | null = document.querySelector("#root"); + if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); + } + diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/style.css b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/style.css new file mode 100644 index 000000000..290f2db93 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/style.css @@ -0,0 +1,11 @@ +#root { + width: 100px; + height: 100px; + background-color: blue; +} + +.boxes { + width: 100px; + height: 100px; + background-color: blue; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Itai-G/style.scss b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/style.scss new file mode 100644 index 000000000..feaeba6ab --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Itai-G/style.scss @@ -0,0 +1,11 @@ +#root{ + width: 100px; + height: 100px; + background-color: blue; + +} +.boxes{ + width: 100px; + height: 100px; + background-color: blue; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/dist/index.js new file mode 100644 index 000000000..83858cac9 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/dist/index.js @@ -0,0 +1,22 @@ +console.dir(document); +document.body.style.backgroundColor = "pink"; +console.log(navigator.onLine); +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var root = document.querySelector("#root"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} +var box = document.querySelector(".box"); +if (box) { + console.dir(box); + box.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/dist/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/dist/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/index.html b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/index.html new file mode 100644 index 000000000..c82ba684e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + +
              +
              + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/index.ts b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/index.ts new file mode 100644 index 000000000..5ec7aeb4b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/index.ts @@ -0,0 +1,27 @@ +console.dir(document); + + +document.body.style.backgroundColor = "pink"; +console.log(navigator.onLine); + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + + const root: HTMLDivElement | null = document.querySelector("#root"); + if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); + } + + const box: HTMLDivElement | null = document.querySelector(".box"); + if (box) { + console.dir(box); + box.style.backgroundColor = getRandomColor(); + } \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/style.css b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/style.scss b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/style.scss new file mode 100644 index 000000000..1cf5f137e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/Karin-levi/style.scss @@ -0,0 +1,11 @@ +#root{ + height: 100px; + width: 100px; + background-color: pink; +} + +.box{ + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/amit/dist/index.css b/02-TypeScript/11-DOM Manipulations/followups/amit/dist/index.css new file mode 100644 index 000000000..179f785bf --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/amit/dist/index.css @@ -0,0 +1,11 @@ +.box { + border: 0.1rem solid black; + height: 10rem; + width: 10rem; +} + +#root { + border: 0.1rem solid black; + height: 10rem; + width: 10rem; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/amit/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/amit/dist/index.js new file mode 100644 index 000000000..a2dcb59e2 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/amit/dist/index.js @@ -0,0 +1,26 @@ +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var root = document.querySelector("#root"); +if (root) { + root.style.backgroundColor = getRandomColor(); +} +var box = document.querySelector(".box"); +if (box && root) { + box.style.backgroundColor = root.style.backgroundColor; + // box.style.backgroundColor = getRandomColor(); +} +function printToElement(element) { + if (element) { + for (var i = 0; i < 10; i++) { + element.innerText += i; + } + } +} +printToElement(box); diff --git a/02-TypeScript/11-DOM Manipulations/followups/amit/index.css b/02-TypeScript/11-DOM Manipulations/followups/amit/index.css new file mode 100644 index 000000000..179f785bf --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/amit/index.css @@ -0,0 +1,11 @@ +.box { + border: 0.1rem solid black; + height: 10rem; + width: 10rem; +} + +#root { + border: 0.1rem solid black; + height: 10rem; + width: 10rem; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/amit/index.html b/02-TypeScript/11-DOM Manipulations/followups/amit/index.html new file mode 100644 index 000000000..d65cf5323 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/amit/index.html @@ -0,0 +1,16 @@ + + + + + + + + Document + + +
              +
              + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/amit/index.scss b/02-TypeScript/11-DOM Manipulations/followups/amit/index.scss new file mode 100644 index 000000000..0ce6675cd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/amit/index.scss @@ -0,0 +1,11 @@ +.box{ + border: 0.1rem solid black; + height: 10rem; + width: 10rem; +} + +#root{ + border: 0.1rem solid black; + height: 10rem; + width: 10rem; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/amit/index.ts b/02-TypeScript/11-DOM Manipulations/followups/amit/index.ts new file mode 100644 index 000000000..0c1ebb9dc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/amit/index.ts @@ -0,0 +1,31 @@ + +function getRandomColor() { + const letters = "0123456789ABCDEF"; + let color = "#"; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} + +const root: HTMLDivElement | null = document.querySelector("#root"); +if (root) { + root.style.backgroundColor = getRandomColor(); +} + +const box: HTMLDivElement | null = document.querySelector(".box"); +if (box && root) { + box.style.backgroundColor = root.style.backgroundColor; + // box.style.backgroundColor = getRandomColor(); +} + +function printToElement(element: HTMLElement | null) { + if (element) { + for (let i = 0; i < 10; i++) { + element.innerText += i; + } + } +} + +printToElement(box); \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/angela/dist/dom.css b/02-TypeScript/11-DOM Manipulations/followups/angela/dist/dom.css new file mode 100644 index 000000000..2e0d2a5e4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/angela/dist/dom.css @@ -0,0 +1,6 @@ +#btn { + margin-left: 2rem; + background: pink; + height: 5rem; + width: 5rem; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/angela/dist/dom.js b/02-TypeScript/11-DOM Manipulations/followups/angela/dist/dom.js new file mode 100644 index 000000000..5ac5fe0d9 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/angela/dist/dom.js @@ -0,0 +1,15 @@ +var btn = document.querySelector("#btn"); +if (btn) { + btn.addEventListener('click', function onClick() { + function RandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + btn.style.backgroundColor = RandomColor(); + }); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/angela/dom.css b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.css new file mode 100644 index 000000000..2e0d2a5e4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.css @@ -0,0 +1,6 @@ +#btn { + margin-left: 2rem; + background: pink; + height: 5rem; + width: 5rem; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/angela/dom.html b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.html new file mode 100644 index 000000000..b2ff1c398 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
              click on me
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/angela/dom.scss b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.scss new file mode 100644 index 000000000..a5c559e87 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.scss @@ -0,0 +1,7 @@ +#btn{ + margin-left: 2rem; + background: pink; + height: 5rem; + width: 5rem; + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/angela/dom.ts b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.ts new file mode 100644 index 000000000..ec9318568 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/angela/dom.ts @@ -0,0 +1,23 @@ +const btn:HTMLDivElement | null = document.querySelector("#btn"); +if (btn){ + + btn.addEventListener('click', function onClick() { + function RandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + btn.style.backgroundColor = RandomColor(); +}); +} + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/dist/index.js new file mode 100644 index 000000000..10cfcbbb0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/dist/index.js @@ -0,0 +1,25 @@ +console.dir(document); +document.body.style.backgroundColor = "wheat"; +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var box = document.querySelector(".box"); +debugger; +if (box) { + box.addEventListener('click', function onClick() { + console.dir(box); + box.style.backgroundColor = getRandomColor(); + }); +} +var box1 = document.querySelector(".box1"); +if (box1 && box) { + box.addEventListener('click', function onClick() { + box1.style.backgroundColor = box.style.backgroundColor; + }); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/dist/style.css new file mode 100644 index 000000000..6583e1748 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/dist/style.css @@ -0,0 +1,11 @@ +.box { + height: 100px; + width: 100px; + background-color: pink; +} + +.box1 { + height: 100px; + width: 100px; + background-color: #2b0a68; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/index.html b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/index.html new file mode 100644 index 000000000..b5c340eee --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + +
              click on me
              + +
              + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/index.ts b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/index.ts new file mode 100644 index 000000000..516ad8e67 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/index.ts @@ -0,0 +1,29 @@ +console.dir(document); + +document.body.style.backgroundColor = "wheat"; + + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} + +const box: HTMLDivElement | null = document.querySelector(".box"); +debugger; +if (box) { + box.addEventListener('click',function onClick(){ + console.dir(box); + box.style.backgroundColor = getRandomColor(); +})} + +const box1:HTMLDivElement|null=document.querySelector(".box1") +if(box1&&box){ + box.addEventListener('click',function onClick(){ + box1.style.backgroundColor=box.style.backgroundColor + } )} + diff --git a/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/style.css b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/style.css new file mode 100644 index 000000000..f82a01770 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/style.css @@ -0,0 +1,11 @@ +.box { + height: 100px; + width: 100px; + background-color: pink; +} + +.box1 { + height: 100px; + width: 100px; + background-color: rgb(43, 10, 104); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/style.scss b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/style.scss new file mode 100644 index 000000000..66fcf0eb7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/aviva-elias/style.scss @@ -0,0 +1,12 @@ +.box{ + height: 100px; + width: 100px; + background-color:pink; + +} +.box1{ + height: 100px; + width: 100px; + background-color:rgb(43, 10, 104); + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/dist/index.js new file mode 100644 index 000000000..116ab3296 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/dist/index.js @@ -0,0 +1,14 @@ +var root = document.querySelector("#root"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} +function getRandomDice() { + var randomImage = Math.floor(Math.random() * arr.length); + document.querySelector("#dice") = myPix[randomImage]; + var box = document.querySelector(".box"); + if (box) { + console.dir(box); + box.style.backgroundColor = "black"; + } +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/dist/style.css new file mode 100644 index 000000000..07035c18f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/dist/style.css @@ -0,0 +1,11 @@ +#root { + width: 100px; + height: 100px; + background-color: yellow; +} + +.box { + width: 100px; + height: 100px; + background-color: red; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/index.html b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/index.html new file mode 100644 index 000000000..80b7d12a1 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/index.ts b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/index.ts new file mode 100644 index 000000000..ea06ad668 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/index.ts @@ -0,0 +1,23 @@ + + +const root: HTMLDivElement|null= document.querySelector(`#root`); + +if (root){ + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} + + + +function getRandomDice() { + const randomImage = Math.floor(Math.random() * arr.length); + document.querySelector("#dice") = myPix[randomImage]; + + + +const box: HTMLDivElement|null= document.querySelector(`.box`); + +if (box){ + console.dir(box); + box.style.backgroundColor = `black`; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/style.css b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/style.css new file mode 100644 index 000000000..07035c18f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/style.css @@ -0,0 +1,11 @@ +#root { + width: 100px; + height: 100px; + background-color: yellow; +} + +.box { + width: 100px; + height: 100px; + background-color: red; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/style.scss b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/style.scss new file mode 100644 index 000000000..1d2dfae34 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/itayAmosi/style.scss @@ -0,0 +1,12 @@ +#root{ + width: 100px; + height: 100px; + background-color: yellow; + +} +.box{ + width: 100px; + height: 100px; + background-color: red; + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/dist/index.js new file mode 100644 index 000000000..7db0c1a33 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/dist/index.js @@ -0,0 +1,24 @@ +console.dir(document); +var root = document.querySelector("#root"); +if (root) { + var id_1 = 0; + var pos_1 = 0; + clearInterval(id_1); + id_1 = setInterval(frame, 50); + function frame() { + try { + if (pos_1 == 100) { + clearInterval(id_1); + } + else { + pos_1++; + if (root != null) + root.style.borderRadius = pos_1 + "px"; + } + } + catch (error) { + console.error(error); + return false; + } + } +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/dist/style.css new file mode 100644 index 000000000..e83c672b2 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/dist/style.css @@ -0,0 +1,30 @@ +body { + background-color: beige; +} + +#root { + display: flex; + flex-direction: column; + margin: 20px auto; + height: 100px; + width: 100px; + border: black solid 3px; + animation-name: myMove; + animation-duration: 2.5s; + animation-iteration-count: 2; +} + +@keyframes myMove { + 0% { + background-color: coral; + border-color: black; + } + 50% { + background-color: black; + border-color: coral; + } + 100% { + background-color: coral; + border-color: black; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/index.html b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/index.html new file mode 100644 index 000000000..37a47db6c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + +
              + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/index.ts b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/index.ts new file mode 100644 index 000000000..3eeee5321 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/index.ts @@ -0,0 +1,25 @@ +console.dir(document); +const root: HTMLDivElement | null = document.querySelector("#root"); +if(root){ + let id = 0; + let pos = 0; + clearInterval(id); + id = setInterval(frame, 50); + + function frame() { + try { + if (pos==100) { + clearInterval(id); + } else { + pos++; + if (root!=null) + root.style.borderRadius= pos + "px"; + } + } catch (error) { + console.error(error) + return false; + } + } +} + + diff --git a/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/style.css b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/style.css new file mode 100644 index 000000000..f82e83384 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/style.css @@ -0,0 +1,48 @@ +body { + background-color: beige; +} + +#root { + display: flex; + flex-direction: column; + margin: 20px auto; + height: 100px; + width: 100px; + border: black solid 3px; + -webkit-animation-name: myMove; + animation-name: myMove; + -webkit-animation-duration: 2.5s; + animation-duration: 2.5s; + -webkit-animation-iteration-count: 2; + animation-iteration-count: 2; +} + +@-webkit-keyframes myMove { + 0% { + background-color: coral; + border-color: black; + } + 50% { + background-color: black; + border-color: coral; + } + 100% { + background-color: coral; + border-color: black; + } +} + +@keyframes myMove { + 0% { + background-color: coral; + border-color: black; + } + 50% { + background-color: black; + border-color: coral; + } + 100% { + background-color: coral; + border-color: black; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/style.scss b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/style.scss new file mode 100644 index 000000000..de22d55b6 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/noa-meillet/style.scss @@ -0,0 +1,24 @@ +body{ + background-color: beige; +} + +#root{ + display: flex; + flex-direction:column; + margin: 20px auto; + height: 100px; + width: 100px; + border: black solid 3px; + animation-name: myMove; + animation-duration: 2.5s; + animation-iteration-count: 2; +} + +@keyframes myMove { + 0% {background-color:coral; + border-color: black;} + 50% {background-color:black; + border-color: coral;} + 100% {background-color: coral; + border-color: black;} +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shai-li/app.ts b/02-TypeScript/11-DOM Manipulations/followups/shai-li/app.ts new file mode 100644 index 000000000..8949a0423 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shai-li/app.ts @@ -0,0 +1,22 @@ +"use strict"; + +console.dir(document); + +document.body.style.backgroundColor = "wheat"; +console.log(navigator.onLine); + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} + +const root: HTMLDivElement | null = document.querySelector("#shmulik"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/shai-li/dist/app.js b/02-TypeScript/11-DOM Manipulations/followups/shai-li/dist/app.js new file mode 100644 index 000000000..7626f697b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shai-li/dist/app.js @@ -0,0 +1,18 @@ +"use strict"; +console.dir(document); +document.body.style.backgroundColor = "wheat"; +console.log(navigator.onLine); +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var root = document.querySelector("#shmulik"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/shai-li/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/shai-li/dist/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shai-li/dist/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shai-li/index.html b/02-TypeScript/11-DOM Manipulations/followups/shai-li/index.html new file mode 100644 index 000000000..9cd6fc8ab --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shai-li/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shai-li/style.css b/02-TypeScript/11-DOM Manipulations/followups/shai-li/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shai-li/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shai-li/style.scss b/02-TypeScript/11-DOM Manipulations/followups/shai-li/style.scss new file mode 100644 index 000000000..c798596af --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shai-li/style.scss @@ -0,0 +1,11 @@ +#root{ + height: 100px; + width: 100px; + background-color: pink; +} + +.box{ + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shalomcop/app.ts b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/app.ts new file mode 100644 index 000000000..6ab4b5ce4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/app.ts @@ -0,0 +1,26 @@ +console.dir(document); + +document.body.style.backgroundColor = "wheat"; +console.log(navigator.onLine); + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} + +// const root: HTMLDivElement | null = document.querySelector("#root"); +// if (root) { +// console.dir(root); +// root.style.backgroundColor = getRandomColor(); +// } + +const root:HTMLDivElement | null = document.querySelector ("#root"); +if (root) { + console.dir (root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/shalomcop/dist/app.js b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/dist/app.js new file mode 100644 index 000000000..972e86824 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/dist/app.js @@ -0,0 +1,22 @@ +console.dir(document); +document.body.style.backgroundColor = "wheat"; +console.log(navigator.onLine); +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +// const root: HTMLDivElement | null = document.querySelector("#root"); +// if (root) { +// console.dir(root); +// root.style.backgroundColor = getRandomColor(); +// } +var root = document.querySelector("#root"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/shalomcop/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/dist/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/dist/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shalomcop/index.html b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/index.html new file mode 100644 index 000000000..9d17b4a7c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/index.html @@ -0,0 +1,17 @@ + + + + + + + Document + + + + +
              +
              ; + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shalomcop/style.css b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shalomcop/style.scss b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/style.scss new file mode 100644 index 000000000..1cf5f137e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shalomcop/style.scss @@ -0,0 +1,11 @@ +#root{ + height: 100px; + width: 100px; + background-color: pink; +} + +.box{ + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/dist/index.css b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/dist/index.css new file mode 100644 index 000000000..d4d472b41 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/dist/index.css @@ -0,0 +1,5 @@ +#box { + background-color: blueviolet; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/dist/index.js new file mode 100644 index 000000000..2dd842795 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/dist/index.js @@ -0,0 +1,17 @@ +console.dir(document); +document.body.style.backgroundColor = "red"; +console.log(navigator.onLine); +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var test = document.querySelector("#box"); +if (test) { + console.dir(test); + test.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.css b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.css new file mode 100644 index 000000000..d4d472b41 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.css @@ -0,0 +1,5 @@ +#box { + background-color: blueviolet; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.html b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.html new file mode 100644 index 000000000..a511da2e5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.scss b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.scss new file mode 100644 index 000000000..3f3f01777 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.scss @@ -0,0 +1,5 @@ +#box { + background-color: blueviolet; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.ts b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.ts new file mode 100644 index 000000000..b5dfd975d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/shlomi.samai/index.ts @@ -0,0 +1,20 @@ +console.dir(document); + +document.body.style.backgroundColor= "red" +console.log(navigator.onLine); + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + +const test:HTMLDivElement|null= document.querySelector("#box"); +if (test) { + console.dir(test); +test.style.backgroundColor=getRandomColor(); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/start.md b/02-TypeScript/11-DOM Manipulations/followups/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/dist/index.js b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/dist/index.js new file mode 100644 index 000000000..17ca8b0d3 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/dist/index.js @@ -0,0 +1,17 @@ +console.dir(document); +document.body.style.backgroundColor = "wheat"; +console.log(navigator.onLine); +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} +var root = document.querySelector("#shmulik"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/dist/style.css b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/dist/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/dist/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/index.html b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/index.html new file mode 100644 index 000000000..0fa34ab0a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/index.ts b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/index.ts new file mode 100644 index 000000000..2f02f9063 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/index.ts @@ -0,0 +1,20 @@ +console.dir(document); + +document.body.style.backgroundColor = "wheat"; +console.log(navigator.onLine); + +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} + +const root: HTMLDivElement | null = document.querySelector("#shmulik"); +if (root) { + console.dir(root); + root.style.backgroundColor = getRandomColor(); +} diff --git a/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/style.css b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/style.css new file mode 100644 index 000000000..4b7522689 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/style.css @@ -0,0 +1,11 @@ +#root { + height: 100px; + width: 100px; + background-color: pink; +} + +.box { + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/style.scss b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/style.scss new file mode 100644 index 000000000..1cf5f137e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/followups/uriel bargil/style.scss @@ -0,0 +1,11 @@ +#root{ + height: 100px; + width: 100px; + background-color: pink; +} + +.box{ + border: 2px solid yellow; + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/.vscode/settings.json b/02-TypeScript/11-DOM Manipulations/home puzzles/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.css new file mode 100644 index 000000000..0d9f69c65 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.css @@ -0,0 +1,118 @@ +body { + margin: 0; + position: relative; + background-color: wheat; +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: rgb(56, 17, 186); + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: rgb(42, 41, 41); + color: white; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__book { + width: 40rem; + height: 25rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__book__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: white; + font-weight: 600; + gap: 1rem; +} +.results__book__image--theLordOfTheRings { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.midjourney.com/538c1d13-f86a-43ea-bde9-20f2666e562c/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--theNeverEndingStory { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.midjourney.com/39ab6f17-9154-43ef-a041-6361c16cf8a9/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aPigeonAndABoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.shopify.com/s/files/1/0423/2721/2193/products/20608PeaceBoy_grande.jpg?v=1594329742); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--fontanelle { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://www.philipjuras.com/wp-content/uploads/2017031107wiregrass.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--nehamaTheLouse { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.shopify.com/s/files/1/0561/5642/2335/products/detail8_58491d97-6202-4a68-a095-544b6ea5b79e_1200x.jpg?v=1627560676); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--myRussianGrandmotherAndHerAmericanVacuum { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://render.fineartamerica.com/images/rendered/search/print/6.5/8/break/images/artworkimages/medium/2/woman-cleaning-with-a-canister-vacuum-csa-images.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--lesMiserables { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://mir-s3-cdn-cf.behance.net/projects/404/20332039.543440efd96e7.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--doNotRaiseAHandAgainstTheBoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://www.kipa.co.il/userFiles/735-415/701091d37ad185c1b22e57003352ad83.jpg); + background-size: cover; + background-repeat: no-repeat; +} +.results__book__image--fromTheKitchenWithLove { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://cdn.pixabay.com/photo/2021/09/20/06/55/spaghetti-6639970__340.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aTaleOfFiveBalloons { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), url(https://www.pqpq2.co.il/productImages2/135/2017/08/27/image1503826593.jpg); + background-size: 100%; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.html new file mode 100644 index 000000000..5914b7dc0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.html @@ -0,0 +1,23 @@ + + + + + + + + + BookShook + + +
              Book-Shook
              + + +
              +
              +
              +
              + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.scss new file mode 100644 index 000000000..a64107b29 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.scss @@ -0,0 +1,120 @@ +body{ + margin:0; + position: relative; + background-color: wheat; +} + +.header{ + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: rgb(56, 17, 186); + font-weight: 800; + +} + +.searchBox{ + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: rgb(42, 41, 41); + color: white; +} + +.results{ + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + + &__book{ + width: 40rem; + height: 25rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; ; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + &__wrapper{ + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: white; + font-weight: 600; + gap: 1rem; + } + &__image--theLordOfTheRings{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.midjourney.com/538c1d13-f86a-43ea-bde9-20f2666e562c/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--theNeverEndingStory{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.midjourney.com/39ab6f17-9154-43ef-a041-6361c16cf8a9/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--aPigeonAndABoy{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.shopify.com/s/files/1/0423/2721/2193/products/20608PeaceBoy_grande.jpg?v=1594329742); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--fontanelle{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://www.philipjuras.com/wp-content/uploads/2017031107wiregrass.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--nehamaTheLouse{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.shopify.com/s/files/1/0561/5642/2335/products/detail8_58491d97-6202-4a68-a095-544b6ea5b79e_1200x.jpg?v=1627560676); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--myRussianGrandmotherAndHerAmericanVacuum{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://render.fineartamerica.com/images/rendered/search/print/6.5/8/break/images/artworkimages/medium/2/woman-cleaning-with-a-canister-vacuum-csa-images.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--lesMiserables{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://mir-s3-cdn-cf.behance.net/projects/404/20332039.543440efd96e7.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--doNotRaiseAHandAgainstTheBoy{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://www.kipa.co.il/userFiles/735-415/701091d37ad185c1b22e57003352ad83.jpg); + background-size: cover; + background-repeat: no-repeat; + } + &__image--fromTheKitchenWithLove{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://cdn.pixabay.com/photo/2021/09/20/06/55/spaghetti-6639970__340.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + &__image--aTaleOfFiveBalloons{ + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0)0%, rgb(0, 0, 0, 1)100%), url(https://www.pqpq2.co.il/productImages2/135/2017/08/27/image1503826593.jpg); + background-size: 100%; + background-repeat: no-repeat; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.ts new file mode 100644 index 000000000..9b7182223 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/bookshook.ts @@ -0,0 +1,158 @@ +class Book { + public constructor( + public title: string, + public price: number, + public genre: string, + public language: string, + public sn: number, + public camelCaseTitle: string + ) { } +} + +const theLordOfTheRings = new Book( + "The Lord Of The Rings", + 130, + "Fiction", + "English", + 4120, + "theLordOfTheRings" +); +const theNeverEndingStory = new Book( + "The Never Ending Story", + 120, + "Fiction", + "English", + 4130, + "theNeverEndingStory" +); +const aPigeonAndABoy = new Book( + "A Pigeon and A Boy", + 90, + "Fiction", + "Hebrew", + 4150, + "aPigeonAndABoy" +); +const fontanelle = new Book( + "Fontanelle", + 90, + "Fiction", + "Hebrew", + 4274, + "fontanelle" +); +const nehamaTheLouse = new Book( + "Nehama the Louse", + 20, + "Children", + "Hebrew", + 1050, + "nehamaTheLouse" +); +const myRussianGrandmotherAndHerAmericanVacuum = new Book( + "My Russian Grandmother and Her American Vacuum", + 90, + "Auto-biography", + "Hebrew", + 3730, + "myRussianGrandmotherAndHerAmericanVacuum" +); +const lesMiserables = new Book( + "Les Miserables", + 100, + "Historical", + "French", + 4285, + "lesMiserables" +); +const doNotRaiseAHandAgainstTheBoy = new Book( + "Do Not Raise a Hand Against the Boy", + 70, + "Memoir", + "Hebrew", + 3030, + "doNotRaiseAHandAgainstTheBoy" +); +const fromTheKitchenWithLove = new Book( + "From The Kitchen With Love", + 50, + "Cooking", + "Hebrew", + 4700, + "fromTheKitchenWithLove" +); +const aTaleOfFiveBalloons = new Book( + "A Tale of Five Balloons", + 20, + "Children", + "Hebrew", + 2010, + "aTaleOfFiveBalloons" +); + +const allBooksArray: Book[] = [ + theLordOfTheRings, + theNeverEndingStory, + aPigeonAndABoy, + fontanelle, + nehamaTheLouse, + myRussianGrandmotherAndHerAmericanVacuum, + lesMiserables, + doNotRaiseAHandAgainstTheBoy, + fromTheKitchenWithLove, + aTaleOfFiveBalloons, +]; + +function renderBooks() { + const bookData: HTMLDivElement | null = document.querySelector("#bookData"); + if (bookData) { + for (let i = 0; i < allBooksArray.length; i++) { + const book = document.createElement("div"); + book.innerHTML = ` +
              +
              + Title: ${allBooksArray[i].title} + Price: ${allBooksArray[i].price} NIS + Genre: ${allBooksArray[i].genre} + Language: ${allBooksArray[i].language} + sn: ${allBooksArray[i].sn} +
              +
              `; + document.querySelector("#bookData")?.appendChild(book); + } + } +} + +function search(): void { + try { + const userInput: Element | null = document.querySelector("#userInput"); + const noResults: HTMLDivElement | null = document.querySelector("#noResults"); + + userInput?.addEventListener("input", (search) => { + let userInputValue = (search.target as HTMLInputElement).value + userInputValue = userInputValue.toLocaleLowerCase(); + + let results = document.querySelectorAll(".results__book"); + for (let i = 0; i < results.length; i++) { + if (results[i].innerText.toLowerCase().includes(userInputValue) && noResults) { + results[i].style.display = ""; + noResults.style.display = "none"; + } else { + results[i].style.display = "none"; + } + } + + let allBooks = document.querySelectorAll(".results"); + for (let i = 0; i < results.length; i++) { + if (!allBooks[i].innerText.toLowerCase().includes(userInputValue) && noResults) { + noResults.style.display = ""; + noResults.innerHTML = `Sorry, there isn't a book that icludes ${userInputValue} on our store...`; + } + } + } + ); + } catch (error) { + console.error(error); + return error; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/dist/bookshook.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/dist/bookshook.css new file mode 100644 index 000000000..e611f0e62 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/dist/bookshook.css @@ -0,0 +1,118 @@ +body { + margin: 0; + position: relative; + background-color: wheat; +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: #3811ba; + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: #2a2929; + color: white; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__book { + width: 40rem; + height: 25rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__book__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: white; + font-weight: 600; + gap: 1rem; +} +.results__book__image--theLordOfTheRings { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.midjourney.com/538c1d13-f86a-43ea-bde9-20f2666e562c/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--theNeverEndingStory { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.midjourney.com/39ab6f17-9154-43ef-a041-6361c16cf8a9/grid_0.png); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aPigeonAndABoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.shopify.com/s/files/1/0423/2721/2193/products/20608PeaceBoy_grande.jpg?v=1594329742); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--fontanelle { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://www.philipjuras.com/wp-content/uploads/2017031107wiregrass.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--nehamaTheLouse { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.shopify.com/s/files/1/0561/5642/2335/products/detail8_58491d97-6202-4a68-a095-544b6ea5b79e_1200x.jpg?v=1627560676); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--myRussianGrandmotherAndHerAmericanVacuum { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://render.fineartamerica.com/images/rendered/search/print/6.5/8/break/images/artworkimages/medium/2/woman-cleaning-with-a-canister-vacuum-csa-images.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--lesMiserables { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://mir-s3-cdn-cf.behance.net/projects/404/20332039.543440efd96e7.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--doNotRaiseAHandAgainstTheBoy { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://www.kipa.co.il/userFiles/735-415/701091d37ad185c1b22e57003352ad83.jpg); + background-size: cover; + background-repeat: no-repeat; +} +.results__book__image--fromTheKitchenWithLove { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://cdn.pixabay.com/photo/2021/09/20/06/55/spaghetti-6639970__340.jpg); + background-size: 100%; + background-repeat: no-repeat; +} +.results__book__image--aTaleOfFiveBalloons { + background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, black 100%), url(https://www.pqpq2.co.il/productImages2/135/2017/08/27/image1503826593.jpg); + background-size: 100%; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/dist/bookshook.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/dist/bookshook.js new file mode 100644 index 000000000..80d84c071 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Amit/dist/bookshook.js @@ -0,0 +1,75 @@ +var Book = /** @class */ (function () { + function Book(title, price, genre, language, sn, camelCaseTitle) { + this.title = title; + this.price = price; + this.genre = genre; + this.language = language; + this.sn = sn; + this.camelCaseTitle = camelCaseTitle; + } + return Book; +}()); +var theLordOfTheRings = new Book("The Lord Of The Rings", 130, "Fiction", "English", 4120, "theLordOfTheRings"); +var theNeverEndingStory = new Book("The Never Ending Story", 120, "Fiction", "English", 4130, "theNeverEndingStory"); +var aPigeonAndABoy = new Book("A Pigeon and A Boy", 90, "Fiction", "Hebrew", 4150, "aPigeonAndABoy"); +var fontanelle = new Book("Fontanelle", 90, "Fiction", "Hebrew", 4274, "fontanelle"); +var nehamaTheLouse = new Book("Nehama the Louse", 20, "Children", "Hebrew", 1050, "nehamaTheLouse"); +var myRussianGrandmotherAndHerAmericanVacuum = new Book("My Russian Grandmother and Her American Vacuum", 90, "Auto-biography", "Hebrew", 3730, "myRussianGrandmotherAndHerAmericanVacuum"); +var lesMiserables = new Book("Les Miserables", 100, "Historical", "French", 4285, "lesMiserables"); +var doNotRaiseAHandAgainstTheBoy = new Book("Do Not Raise a Hand Against the Boy", 70, "Memoir", "Hebrew", 3030, "doNotRaiseAHandAgainstTheBoy"); +var fromTheKitchenWithLove = new Book("From The Kitchen With Love", 50, "Cooking", "Hebrew", 4700, "fromTheKitchenWithLove"); +var aTaleOfFiveBalloons = new Book("A Tale of Five Balloons", 20, "Children", "Hebrew", 2010, "aTaleOfFiveBalloons"); +var allBooksArray = [ + theLordOfTheRings, + theNeverEndingStory, + aPigeonAndABoy, + fontanelle, + nehamaTheLouse, + myRussianGrandmotherAndHerAmericanVacuum, + lesMiserables, + doNotRaiseAHandAgainstTheBoy, + fromTheKitchenWithLove, + aTaleOfFiveBalloons, +]; +function renderBooks() { + var _a; + var bookData = document.querySelector("#bookData"); + if (bookData) { + for (var i = 0; i < allBooksArray.length; i++) { + var book = document.createElement("div"); + book.innerHTML = "\n
              \n
              \n Title: " + allBooksArray[i].title + " \n Price: " + allBooksArray[i].price + " NIS \n Genre: " + allBooksArray[i].genre + " \n Language: " + allBooksArray[i].language + " \n sn: " + allBooksArray[i].sn + " \n
              \n
              "; + (_a = document.querySelector("#bookData")) === null || _a === void 0 ? void 0 : _a.appendChild(book); + } + } +} +function search() { + try { + var userInput = document.querySelector("#userInput"); + var noResults_1 = document.querySelector("#noResults"); + userInput === null || userInput === void 0 ? void 0 : userInput.addEventListener("input", function (search) { + var userInputValue = search.target.value; + userInputValue = userInputValue.toLocaleLowerCase(); + var results = document.querySelectorAll(".results__book"); + for (var i = 0; i < results.length; i++) { + if (results[i].innerText.toLowerCase().includes(userInputValue) && noResults_1) { + results[i].style.display = ""; + noResults_1.style.display = "none"; + } + else { + results[i].style.display = "none"; + } + } + var allBooks = document.querySelectorAll(".results"); + for (var i = 0; i < results.length; i++) { + if (!allBooks[i].innerText.toLowerCase().includes(userInputValue) && noResults_1) { + noResults_1.style.display = ""; + noResults_1.innerHTML = "Sorry, there isn't a book that icludes " + userInputValue + " on our store..."; + } + } + }); + } + catch (error) { + console.error(error); + return error; + } +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..d05d55df7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/dist/index.js @@ -0,0 +1,25 @@ +// //1) get an image URL from the user, and add the image to the DOM. Do it five times (with a loop) +// https://www.yo-yoo.co.il/coolpics/images/uploads/puppy-1207818_640.jpg +var title = document.querySelector("#title"); +console.dir(title); +var NameOfPicture = prompt("what is the name of the picture"); +console.dir("name of the picture", name); +// const NameOfPicture: string | null = "puppy"; +var imageUrl = prompt('Enter image url'); +for (var i = 0; i < 5; i++) { + // יוצר בזכרון אלמנט של img + var imge = document.createElement("img"); + imge.src = imageUrl; + imge.alt = NameOfPicture; + title === null || title === void 0 ? void 0 : title.appendChild(imge); // id מוסיף אלמנט ל +} +// 2) get five image URLs from the user and print five images on the DOM. +for (var i = 0; i < 5; i++) { + var imageUrl1 = prompt('Enter image url'); + // יוצר בזכרון אלמנט של img + var imge = document.createElement("img"); + imge.src = imageUrl1; + imge.alt = NameOfPicture; + title === null || title === void 0 ? void 0 : title.appendChild(imge); // id מוסיף אלמנט ל +} +// 3) use the previous puzzle on store items, and show them on the items on the DOM diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/dist/style.css new file mode 100644 index 000000000..283bed1b7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/dist/style.css @@ -0,0 +1,21 @@ +#title { + padding: 20px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +#title img { + border-radius: 15px; + padding: 2px 2px; + width: 50vh; + border: 2px solid grey; + margin: 5px, 5px; +} + +h2 { + font-size: xx-large; + text-align: center; + color: darksalmon; + font-weight: bold; + text-decoration: underline; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/index.html new file mode 100644 index 000000000..9bbd46ab4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/index.html @@ -0,0 +1,21 @@ + + + + + + + + Document + + + + +

              My Pictures

              + +
              + + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/index.ts new file mode 100644 index 000000000..8b6fc13b5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/index.ts @@ -0,0 +1,48 @@ +// //1) get an image URL from the user, and add the image to the DOM. Do it five times (with a loop) + +// https://www.yo-yoo.co.il/coolpics/images/uploads/puppy-1207818_640.jpg + +const title: HTMLDivElement | null = document.querySelector("#title"); +console.dir(title); + +const NameOfPicture: string | null = prompt("what is the name of the picture"); +console.dir("name of the picture" , name) +// const NameOfPicture: string | null = "puppy"; + +const imageUrl: string | null = prompt('Enter image url') +for (let i = 0; i < 5; i++) { + // יוצר בזכרון אלמנט של img + const imge = document.createElement("img") + imge.src = imageUrl!; + imge.alt = NameOfPicture!; + title?.appendChild(imge) // id מוסיף אלמנט ל +} + + + + + + + +// 2) get five image URLs from the user and print five images on the DOM. + + + +for (let i = 0; i < 5; i++) { + const imageUrl1: string | null = prompt('Enter image url') + // יוצר בזכרון אלמנט של img + const imge = document.createElement("img") + imge.src = imageUrl1!; + imge.alt = NameOfPicture!; + title?.appendChild(imge) // id מוסיף אלמנט ל +} + + + + +// 3) use the previous puzzle on store items, and show them on the items on the DOM + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/style.css new file mode 100644 index 000000000..283bed1b7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/style.css @@ -0,0 +1,21 @@ +#title { + padding: 20px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +#title img { + border-radius: 15px; + padding: 2px 2px; + width: 50vh; + border: 2px solid grey; + margin: 5px, 5px; +} + +h2 { + font-size: xx-large; + text-align: center; + color: darksalmon; + font-weight: bold; + text-decoration: underline; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/style.scss new file mode 100644 index 000000000..4e3f3b2c3 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Ayala/style.scss @@ -0,0 +1,26 @@ +#title { + padding: 20px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + + img { + + border-radius: 15px; + padding: 2px 2px; + width: 50vh; + border: 2px solid grey; + margin: 5px, 5px; + + } + + +} +h2{ + font-size:xx-large; + text-align: center; + color: darksalmon; + font-weight: bold; + text-decoration: underline; + } \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/dist/index.js new file mode 100644 index 000000000..bc27ef080 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/dist/index.js @@ -0,0 +1,11 @@ +var imageUrls = []; +for (var i = 0; i < 5; i++) { + var imageUrl = prompt("Enter an image URL:"); + imageUrls.push("" + imageUrl); +} +var container = document.getElementById("container"); +for (var i = 0; i < imageUrls.length; i++) { + var img = document.createElement("img"); + img.src = imageUrls[i]; + container.appendChild(img); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/dist/style.css new file mode 100644 index 000000000..79d72502f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/dist/style.css @@ -0,0 +1,11 @@ +#container { + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +img { + width: 100px; + height: 100px; + margin: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/index.html new file mode 100644 index 000000000..ad101f024 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/index.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + +
              +
              + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/index.ts new file mode 100644 index 000000000..1e6c7c7c5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/index.ts @@ -0,0 +1,15 @@ + +let imageUrls: string[] = []; + +for (let i = 0; i < 5; i++) { + let imageUrl = prompt("Enter an image URL:"); + imageUrls.push(`${imageUrl}`); +} + +let container = document.getElementById("container") as HTMLDivElement; + +for (let i = 0; i < imageUrls.length; i++) { + let img = document.createElement("img"); + img.src = imageUrls[i]; + container.appendChild(img); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/style.css new file mode 100644 index 000000000..79d72502f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/style.css @@ -0,0 +1,11 @@ +#container { + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +img { + width: 100px; + height: 100px; + margin: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/style.scss new file mode 100644 index 000000000..e7f7e3f14 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 1/style.scss @@ -0,0 +1,11 @@ +#container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + + img { + width: 100px; + height: 100px; + margin: 10px; + } \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/dist/index.js new file mode 100644 index 000000000..677a7fb1f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/dist/index.js @@ -0,0 +1,51 @@ +var GameShop = /** @class */ (function () { + function GameShop(name, price, department, types, productImg) { + this.name = name; + this.price = price; + this.department = department; + this.types = types; + this.productImg = productImg; + } + return GameShop; +}()); +var uncharted = new GameShop("uncharted", 60.9, "adventure-game", "Game", "https://image.api.playstation.com/vulcan/img/rnd/202011/1101/zC3kulm2Ho3ZE38ZUYHW7WMK.png"); +var watchdogs = new GameShop("watchdogs", 29.9, "hacking-game", "Game", "https://m.media-amazon.com/images/I/51QV1B5NK5L.jpg"); +var godOfWar2 = new GameShop("god of War 2", 80.9, "action-game", "Game", "https://d3m9l0v76dty0.cloudfront.net/system/photos/10645636/original/471318c7705d25f278bcc2c3917a94db.jpg"); +var xboxcontroller = new GameShop("xbox sieris x controller", 88.9, "Controller", "computer", "https://assets.xboxservices.com/assets/55/83/55836945-e141-4d47-9dad-21d902948816.jpg?n=111101_Gallery-0_1_1350x759.jpg"); +var wirelessmuose = new GameShop("logitech gameing mouse", 10.9, "Kits", "computer", "data:image/jpeg;base64,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"); +var ps5controller = new GameShop("playstation 5 controller", 85.9, "Controller", "consoles", "https://d3m9l0v76dty0.cloudfront.net/system/photos/6826234/original/b9b95cbadca40aa7cf1233522f276896.jpg"); +var headphones = new GameShop("headphones", 120.9, "Kits", "audio", "data:image/jpeg;base64,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"); +var hdmiCable = new GameShop("hdmi 2.1 120 Hz cable", 16.9, "cable", "Multimedia", "https://www.digital-master.co.il/images/itempics/C137W_09062021100919_large.jpg"); +var lgTv = new GameShop("Lg Tv", 3000.9, "screens", "multimedia", "https://www.lg.com/il/images/tv/MD05940284/gallery/medium02.jpg"); +var samsungTv = new GameShop("Samsung TV", 1359.9, "screens", "multimedia", "data:image/jpeg;base64,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"); +var items = [ + uncharted, + watchdogs, + godOfWar2, + xboxcontroller, + wirelessmuose, + ps5controller, + headphones, + hdmiCable, + lgTv, + samsungTv, +]; +items.sort(function (a, b) { return a.price - b.price; }); +var searchBox = document.getElementById("searchFild"); +searchBox.addEventListener("keyup", function () { + var searchValue = searchBox.value; + var filteredArray = items.filter(function (item) { return item.name.includes(searchValue); }); + updateUI(filteredArray); +}); +function updateUI(filteredArray) { + var searchResultContainer = document.getElementById("productsCards"); + searchResultContainer.innerHTML = ""; + filteredArray.forEach(function (item) { + var div = document.createElement("div"); + var imge = document.createElement("img"); + imge.src = item.productImg; + div.innerHTML = item.name + " " + item.price + "$"; + div.append(imge); + searchResultContainer.appendChild(div); + }); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/dist/style.css new file mode 100644 index 000000000..45e09d34a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/dist/style.css @@ -0,0 +1,38 @@ +.searchWapper { + display: flex; + flex-direction: column; + gap: 0.25; +} + +input { + font-size: 1rem; +} + +#productsCards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.25; + flex-wrap: wrap; +} + +.card { + border: 1px solid black; + background-color: white; + padding: 0.5rem; +} + +.card > .productName { + margin-bottom: 0.25rem; +} + +.card > .body { + font-size: 0.8rem; + color: #777; +} + +img { + width: 85px; + height: 70px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/index.html new file mode 100644 index 000000000..335248f01 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + +
              + + + +
              +
              +
              + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/index.ts new file mode 100644 index 000000000..c23f8b612 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/index.ts @@ -0,0 +1,60 @@ +class GameShop { + constructor( + public name: string, + public price: number, + public department: string, + public types: string, + public productImg:string + ) {} + } + + const uncharted = new GameShop(`uncharted`, 60.9, `adventure-game`, `Game`,"https://image.api.playstation.com/vulcan/img/rnd/202011/1101/zC3kulm2Ho3ZE38ZUYHW7WMK.png") + const watchdogs = new GameShop(`watchdogs`, 29.9, `hacking-game`, `Game`, "https://m.media-amazon.com/images/I/51QV1B5NK5L.jpg") + const godOfWar2 = new GameShop(`god of War 2`, 80.9, `action-game`, `Game`,"https://d3m9l0v76dty0.cloudfront.net/system/photos/10645636/original/471318c7705d25f278bcc2c3917a94db.jpg") + const xboxcontroller = new GameShop(`xbox sieris x controller`, 88.9, `Controller`, `computer`,"https://assets.xboxservices.com/assets/55/83/55836945-e141-4d47-9dad-21d902948816.jpg?n=111101_Gallery-0_1_1350x759.jpg") + const wirelessmuose = new GameShop(`logitech gameing mouse`, 10.9, `Kits`, `computer`,"data:image/jpeg;base64,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") + const ps5controller = new GameShop(`playstation 5 controller`, 85.9, `Controller`, `consoles`,"https://d3m9l0v76dty0.cloudfront.net/system/photos/6826234/original/b9b95cbadca40aa7cf1233522f276896.jpg") + const headphones = new GameShop(`headphones`, 120.9, `Kits`, `audio`,"data:image/jpeg;base64,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") + const hdmiCable = new GameShop(`hdmi 2.1 120 Hz cable`, 16.9, `cable`, `Multimedia`,"https://www.digital-master.co.il/images/itempics/C137W_09062021100919_large.jpg") + const lgTv = new GameShop(`Lg Tv`, 3000.9, `screens`, `multimedia`,"https://www.lg.com/il/images/tv/MD05940284/gallery/medium02.jpg") + const samsungTv = new GameShop(`Samsung TV`, 1359.9, `screens`, `multimedia`,"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBIVEhISERIPERISEREREhEREREPEhEPGBQZGRgVGBgcIS4lHB4rHxYYJjgmKy8xNTU1GiQ7QDs0Py40NT8BDAwMEA8QHhISGjQhISExNDQ0NDQ0MTQ0NDQ0NDU0NDE0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIAMkA+wMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAAAwQCBQYBB//EAE8QAAEDAgIEBgkODAcAAAAAAAABAgMEEQUhBhIxQRNRdJPS0yJVYXGRkrGztBQyNVJUZHOBg6HBw9HwBxUWIyUzNEJFYnKiJESCo7LC8f/EABoBAAIDAQEAAAAAAAAAAAAAAAADAQIEBQb/xAAtEQACAgECBAQFBQEAAAAAAAAAAQIRAyExEhNBUQQiMlIzcaGx0RRCYYHBkf/aAAwDAQACEQMRAD8A+zAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAByulmkUtLJGyNsTkexzlV6OVUVFRMrOQlK9ASs6oHz2PTOrX9yl8WXpky6WVntKTxJemDTRfly7HeA4JNK63ZqUfH6ybpE7NIq5d1Enyc3TBqtyeVPsdsDinaQ1yfu0XNzdMgTSivvbUovEm6ZW0HJn2O8BxC6RV/taLm5umet0gr13UXNz9Mq8kV1Lrw2V/t+35O2ByLMVxBd9CnyM6/WEn4yxD21DzM/WEc2Hcq8GRftOqBybsTxBP3qDmZ+sIX4ziCb6HmZ+sI5+PuSvD5XtE7IHDrjuIe8ean6w8dj+IJvoOZn6wj9Ri9xf9Hn9v1X5O5B8/fpRiCe4eZn6wjXS7EOKh5mfrCVnx9/uT+iz+z6r8n0QHzj8sMR9rQ81P1hNFpTiLvcCfJT9YTzYdyj8LmW8ft+T6CD5+/SjEE9wczUdYYJpViPFQczP1gc2HcryMntPoYPn35U4j7w5mfrDz8qsR94czP1pPMj3K8ufY+hA+ft0oxFe1/M1HWGbdI8RX3BzNR1hPGu5Wnsd6DiocaxJd9AnyFQv1pjNjuIt/eoF+QqE+tLLXYpKSi6Z24OBdpLiKb8P5mo6wq1WmVfGjXOShc1ZIWKjY52rZ8jGKqKr12a9/iLcLIWSL0TPpAAKlwfO/wj/r6f4J/wDzQ+iHz78ITb1NP8BIv97S+P1ItD1I52labKJl1RPD3ilSs3m7oYOxv7bL4i+XTU3wiY09Pdb2/wDC82GxYp4EQmdEY55LGqKTNdOzK3H5CKCnuty6+O6/fYStZZBLlSL0rsqOhz7xLFBYstYZI0zymWc+x5G0m1T1jSdGEpiJSKUiFSVpfqEKTmmXJkpjsbK7mEUrS6rStMgvmD4y1NdLHcrvjNi5pE6O46EjRZQbCTRorUUttYiEVQvEMU70FuNlV63U9RDxGkiNHJWZMlIw1TLUM0aTsjGGOexHBGbCCmFJTXW67Daxx7ijnb4UVjFJOTIGR2Q19SmZt6hLIauoS508caSRw8+TzNs1z0Ofxx+TE98UvpEZ0FU6yKcrijr6nKKX0iMc9icKbaZ91ABmN4OB09S9VTp73l84w744TTX9sp+Sz+djL4/WhmJXNGnporqjU3+Q6Gni2ImxMkNdhzNrviQ3kDMu8V8RLodJOiWNh5ITEEy7jElZVO2RsZvM7HuwXFyRYIh6iGKKetUzyWpBNGTqQRkr1yLx2YqW5SqHZqVySRSJxzsjtmqKpGD3EDkJVI3C71HR0IHIRqWFaeKw1Reg1SK5Xel1LT0MNQ0QJk9CFIwiFhYyBy8XhNMTBleplGy6mwhguQUkRtI22JnaRjbUpUZxx2LsMdkuR08d1LkiWQjw2P8AcxfiMlLhRqqx2ZQchenS6qVXIdZeWNnnsnnyUabEGZHM4nHZGL74pPSIzsa+PI5TGG9izlFJ6TGK5mp1cKXBp0PtgAKjQcHpuv8Ajabks/nYjvDhNMv2+l7lJUL8fDQp9JaHqQ3B8RGWHsyTuJ8+828eRrqBuSdw2CCcrtnQaJNYiXaZXPH5IKS0KmF95iqhVI1UrKIxEtzJqkKOM2qZZbktFmEyqHZGEKmFU66hJ1AVVyKziJ6kj3WK6uOdI0xQuYbQqmTG3+0olbGbaixg4ntxGOoaYoEyu2PjM0jTapOjUTNfAesZrKasasiWTQqSMVe4hA2LM2kzLFdsZsxrocvPke5LC2yFqJCuhcp2bCcitiIaF+kZZLntQpMxLIVp3jI6aCpeZ2a+pKL3FupcaySTMbky0uEyYvCuc3MzqEu05THWWa3lFJ6TGdPwmRzukDewbyij9KjEqWqNmHHwpo+wAAcAOF0wT9IUvco6nw8NCd0cTpQy+I03Iqlf9+AlbjvD/FiT0bbNTu5lpqleN2RLrCmrN8iRu09eYIp69ciEirIlInuM5FsV3PKT2GY9yRFJEcVkcTMTepimNaov06byCpfmTxOyvuNfUyZkZtIITBXJkcjiNQpna23bxGCStmrY8bHvXZ5SRufcQxRL5qSNz2bC8Y6FZMyTueEwe5G913FxGT32SzfD9hWco+MX1IirM2rdbrmpdpmb1KsEe82FM02wg2rFeImkqIp4rkDmWQ2k7OxNdINjocx+amYRtNlRM3lOJptIG2QuVaJJX2QoSPJqh5QmksEXWpPDaoq1rzUTPLdTJtNVNIIcrepux4KVEzZTX49nG1ffFJ6TGZrIV8UfeJvKKT0qMtF+ZfMmeJKLf8M+xAA1nMBxmkvsjT8hqfPwHZnFaTutiMHIKnz8BKVsbg+IjNj/AL90naVI1+/dJkdb77yGjoUTo7MycpW187Ej3kVSCiKV5Wc4ymcV3SomSbeMTMbFFptkzXbxcRmj7rn4Cgknh8hNA/NDDJajq6m2V9mGvsqqWJnZIhBf4k8pGfVpdhWJUm+57rImzbxmNxcxvbb4DM4jUiRONckPUkvkmSeXvkDn3++wkiHYsdshqlbM5XEcTLqeuS6l2nislxkmkyHLhietaiWLMK2VCu5CaDaa4PymLLG9S3Ur2JrLXUu1L8rFRpaOxn4dCenZmXHPshXgQwq5dxDYKNsikkvma2qm3E8smRqaqYXknWiN2DBbtkFRKa+RxI95C7MpE1yjRhcrYg7821PfFH6TGWHIVa/9WnKKP0mMZH1L5mfN6JfJ/Y+2AA2HFBw+lfsjT8hqfPwHcHEaVeyNPyCp8/AWhuNwfERgx3zZJ3z1rt5HxISWvluLtHTPWuJHPyIXGEsmQuQEU83EU3PzJJVKcjjOx6iWkf4S5RJmhrKe6m5oEEqOpGSVRJ6hdnkI2pczmS6nidwTkjcisHUTxcu+QudvM5X2KjnLe6iXEdDUzRVVfoLi5NK9My6ktYtksacMai2LzSuSiiWmS5sYskNRh6rc267BXBcxOXcxchlCm88YlzNXWNUI0tRE30D8zxrDNrd4dkMQlvoZI7VaqmukkutyaqlsljWzzWQXKVKzRgxcTMKuY1Mz7mdRNdSs5xkbtnXjjUYmCninqqeKOQmZG4qV6dg3lFH6VGXlaU8Rb2DeUUfpMQyHqXzM+b4cvk/sfaQAbDhg4jSlf0jT8gqfPwHbnD6VeyVPyCp8/AWh6kNwfERE0kR2RAjvv3D1XZDWjpmMkhg9+RE52Zg9+QqSLJEUzyrrXUlkU8iZmZ2OWiLdOw2VIhWp4y5HkVSp2JnK1RM5pC93ESqt0InIVnCykJEb2kCtLbm5EEbbuM84a0PhLQuUkWVyOoZdS7G2zSFW3U0vyxoyRk5SbFNDbMtPXceRpZDy91Kwj1ZEpakqKeKhiimSKMFHqvMXP+YxepXqZLIQ9SYx1K9XNtU90lpWRJFqa35xH62st9mpbyqa2rm295TbabLlTf0y/ViZNOMv4o6GOLjlxLo+L6Iosw+NaF9QqO4RrrIusqNtwiN2d5RpNhkcDo2xo5Ec1VXWcrs0VES3hLsCfoqT+r61ptsfbSK5nqlXI7Vdq21/W3S/rSeWnDotI6/9KSzzjl1tpTyKlrokq07I5uiwyN9FPO5HcIxzkausqNsjWql0+NTZ1WFUEKM4V0rVkbdtuEdeyJfY1beuTaWJGweoKlKZVVln3vr317Nvtz2WKmmKdjTf0yeRgxJRjsnov9M7nLJlq5RTlLTZqkmUMVwJrYuHp5OGiTNfWq5qb3XTJUTfkiocriC9g34ek9JiO40Ub+Zqkf8AqlRL32X1F1/7dX5jisQZaNOPhqT0mMElcWupPFLhyQk74Vv/AEfZgAaTlg4bSxf0jByCp8/CdycPplS1K1cE0FLLUsSlmidwbo2q17pY3JfWVNzVLQdSVjMUlGabKzVuYyPKqLXW9jKzx6fpGD21y/w2s8eDpD+KPc6CzY/cZvcRTPyNLjGPrTPbHVU80D3t1mte+JXK29tbsb2S6Lt4jZPpMQVPY2q8en6QqddC/Pxe49bmXIGFOOkr024dV+PT9ItRtrU/hlZzlP0hHDqEvEYqpSNnHZEPdYoI+t7WVvOU/SPeEre1lbzlP0iXEXzsfuNojsjBXGv4et7V1vOU3SHDVvaus5ym6RVxZCy4/cbJVyPaWO63Nb6ore1dbzlL0yeGuq2/wmvXvSUnTKrG7TaKSzxUWkzcvyMENW/Eqxf4TX85SdMjXFKpFsuF4gi8SJG752qqfORkhJvTYXDJGK3N0r8jBshqnV1YuzC622676ZPmV10MW1dZ2rrecpumWUGX5mOtzco4zVxqErKztXW85TdM9Wsq+1dbzlN0y/CJc1e5snPNXX1G08dU1lssNq0XuyU/SNZUUte9f2CoT/XD9oqcZdEafDzxKVylRDLLdVOigximmijjrGuR0aIiPRHLeyWvduaKqJmlrfRziYbXe4Kjx4vtMvxbXe4Kjx4vtFRx5I7R3N+TP4XIleSmtmrTX0N7iuLRLE2npmq2JLKqqiprWW6IiLntzVVzyMtI6+KZ0axuVyNa5Fu1zc1VLbUNA3Dq/wBw1HjxfaTspK3fQVPjxfaDjld6b19BSyeFi04z2vvre96G5o62NtHNCqqj3q9Wt1XKiorWpttZNimxrK2ilRnCq9VY1UREbK3aiX2J/KhwmJ436me2Opgkhke1Hta97Lq1VVEXJVS10XwG0WnrF2UFRnv14V/7F4xyJU4mbLPBKXEpu7b003/o2+JYuxY+Ap2cHFscq2RXJvS3Eu9VzU5bFG/m0+HpfSYy86jrl/yFR48XSIajC656NZ6inYnCwOVznRqiNZKx67F4mqWUZuSbQvmY1Bxi90z6uAB5hAAAAc3pppVFh9OsjrPmfdsEN85H93iam9fi2qhvp3ORjlY3XcjVVrNZG6zrZN1l2XXecTgWiM8lY/EsVdFLUItqaCNznw0zEzaqXRLuS+Xdu66qqWAOIw3RmonxOifiS681VwlbUQuT9VTR2SNr03azrN1dyJbbc+5kfBpra1k1rW1rJfVve1+IkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+efhXwaOSOmqFsxWzx08ktrqyGR1kcvHqvVMv5lMdEMdmpZvxViPYuZZtNMq9i9mxqI5drVt2PF61eJPoL2IqWVEVMslRFTLPYaTSrRuKuh1H9hKy7oZkS7o3/Si70+lEUkDfg0Wi7K1kPB13Bukjs1ssb1fwjP5roi6yce/v3N6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/9k=") + + const items: GameShop[] = [ + uncharted, + watchdogs, + godOfWar2, + xboxcontroller, + wirelessmuose, + ps5controller, + headphones, + hdmiCable, + lgTv, + samsungTv, + ] + + items.sort((a, b) => a.price - b.price) + + +const searchBox = document.getElementById("searchFild") as HTMLInputElement; + +searchBox.addEventListener("keyup", () => { + const searchValue = searchBox.value; + + const filteredArray = items.filter(item => item.name.includes(searchValue)); + + updateUI(filteredArray); +}); + +function updateUI(filteredArray: GameShop[]) { + let searchResultContainer = document.getElementById("productsCards")as HTMLDivElement; + searchResultContainer.innerHTML = ""; + + filteredArray.forEach(item => { + let div = document.createElement("div"); + let imge = document.createElement("img")as HTMLImageElement; + imge.src = item.productImg + div.innerHTML = `${item.name} ${item.price}$`; + div.append(imge); + searchResultContainer.appendChild(div); + }); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/style.css new file mode 100644 index 000000000..45e09d34a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/style.css @@ -0,0 +1,38 @@ +.searchWapper { + display: flex; + flex-direction: column; + gap: 0.25; +} + +input { + font-size: 1rem; +} + +#productsCards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.25; + flex-wrap: wrap; +} + +.card { + border: 1px solid black; + background-color: white; + padding: 0.5rem; +} + +.card > .productName { + margin-bottom: 0.25rem; +} + +.card > .body { + font-size: 0.8rem; + color: #777; +} + +img { + width: 85px; + height: 70px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/style.scss new file mode 100644 index 000000000..c76ae650f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Itai-G/task 3/style.scss @@ -0,0 +1,37 @@ +.searchWapper { + display: flex; + flex-direction: column; + gap: .25; +} + +input { + font-size: 1rem; +} + +#productsCards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: .25; + flex-wrap: wrap; +} + +.card { + border: 1px solid black; + background-color: white; + padding: .5rem; +} + +.card > .productName { + margin-bottom: .25rem; +} + +.card > .body { + font-size: .8rem; + color: #777; +} +img { + width: 85px; + height: 70px; +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..8208a5ca9 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/dist/index.js @@ -0,0 +1,15 @@ +var box = document.querySelector("#box"); +console.dir(box); +for (var i = 0; i < 5; i++) { + var img = document.createElement('img'); + var imageUrl = prompt('Enter image URL'); + if (imageUrl && box) { + img.src = imageUrl; + box.appendChild(img); + } +} +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdTuHDykLTCD8eL-PdWTkTdUHf7eSfESUa9C88Oa05fvs58cE06JPZGQZP3136qoLwtIk&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3unyHF03qwWebb8u3c_K456JP6fvMIm1zmIKbrVKIrqQSXUjmJKUYUCKdC4jCq0CLxWA&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRl3ScpAoCxMoKqXK-FsaT3B4ZOYOKIBhUmZEpWVEREv7jo5RrJwj0M9ck6z2iMrDt82zs&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXT-T5i_-We1MbFSpYES0UNfcldOhPwtD_4UbjmspdI4xgWdPZ-4cCarGUUkcpply6JEc&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOjFQ90ekTT9p86GBs_Q134CPED7mQGHXZ0hcy2FHKC7Dn4pNhycxwor8foGe3ZhAvQ3o&usqp=CAU diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/dist/style.css new file mode 100644 index 000000000..9a02798b2 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/dist/style.css @@ -0,0 +1,9 @@ +.myPicture { + border-radius: 10px; + box-shadow: 2px 2px 6px black; + max-width: 300px; + max-height: 300px; +} +.myPicture img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/index.html new file mode 100644 index 000000000..b12f91c32 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + + +
              + +
              + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..1975087db --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/index.ts @@ -0,0 +1,19 @@ +const box: HTMLImageElement | null = document.querySelector("#box") +console.dir(box) + + +for (let i = 0; i < 5; i++) { + let img = document.createElement('img'); + const imageUrl: string | null = prompt('Enter image URL'); + if (imageUrl && box) { + img.src = imageUrl; + box.appendChild(img); + } +} + + +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdTuHDykLTCD8eL-PdWTkTdUHf7eSfESUa9C88Oa05fvs58cE06JPZGQZP3136qoLwtIk&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3unyHF03qwWebb8u3c_K456JP6fvMIm1zmIKbrVKIrqQSXUjmJKUYUCKdC4jCq0CLxWA&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRl3ScpAoCxMoKqXK-FsaT3B4ZOYOKIBhUmZEpWVEREv7jo5RrJwj0M9ck6z2iMrDt82zs&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXT-T5i_-We1MbFSpYES0UNfcldOhPwtD_4UbjmspdI4xgWdPZ-4cCarGUUkcpply6JEc&usqp=CAU +// https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOjFQ90ekTT9p86GBs_Q134CPED7mQGHXZ0hcy2FHKC7Dn4pNhycxwor8foGe3ZhAvQ3o&usqp=CAU \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/style.css new file mode 100644 index 000000000..9a02798b2 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/style.css @@ -0,0 +1,9 @@ +.myPicture { + border-radius: 10px; + box-shadow: 2px 2px 6px black; + max-width: 300px; + max-height: 300px; +} +.myPicture img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/style.scss new file mode 100644 index 000000000..487568352 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Karin-levi/style.scss @@ -0,0 +1,10 @@ +.myPicture{ + border-radius: 10px; + box-shadow: 2px 2px 6px black; + max-width: 300px; + max-height: 300px; + + img{ + width: 100%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/dist/levelOne.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/dist/levelOne.js new file mode 100644 index 000000000..5e44370ca --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/dist/levelOne.js @@ -0,0 +1,2 @@ +// level 1 +var imgUrl = []; diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/levelOne.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/levelOne.html new file mode 100644 index 000000000..a30eab7aa --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/levelOne.html @@ -0,0 +1,12 @@ + + + + + + + level 1 + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/levelOne.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/levelOne.ts new file mode 100644 index 000000000..c8f2345bc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_1/levelOne.ts @@ -0,0 +1,2 @@ +// level 1 + let imgUrl : string[] = [] \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/app.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/app.ts new file mode 100644 index 000000000..95c968e2b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/app.ts @@ -0,0 +1,15 @@ +// level 2 +let imageUrlList: string[] = []; + +for (let i = 0; i < 5; i++) { + let getImage = prompt("Enter an image URL:"); + imageUrlList.push(`${getImage}`); +} + +let wrapper = document.getElementById("wrapper") as HTMLDivElement; + +for (let i = 0; i < imageUrlList.length; i++) { + let img = document.createElement("img"); + img.src = imageUrlList[i]; + wrapper.appendChild(img); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/dist/app.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/dist/app.js new file mode 100644 index 000000000..42c7a847d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/dist/app.js @@ -0,0 +1,12 @@ +// level 2 +var imageUrlList = []; +for (var i = 0; i < 5; i++) { + var getImage = prompt("Enter an image URL:"); + imageUrlList.push("" + getImage); +} +var wrapper = document.getElementById("wrapper"); +for (var i = 0; i < imageUrlList.length; i++) { + var img = document.createElement("img"); + img.src = imageUrlList[i]; + wrapper.appendChild(img); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/index.html new file mode 100644 index 000000000..297e3b064 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Kseniya/level_2/index.html @@ -0,0 +1,13 @@ + + + + + + + level 2 + + + +
              + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..a69559d83 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/public/scripts/index.js @@ -0,0 +1,47 @@ +// 2) +function addImages() { + var imageArr = []; + while (imageArr.length < 5) { + var userImage = prompt("Please enter 5 URL's of an image one by one: " + imageArr.length + "/5"); + if (userImage) { + imageArr.push("\n"); + } + } + var imageContainer = document.querySelector(".imageContainer__imageGallery"); + if (imageContainer != null) { + imageContainer.innerHTML = imageArr.join(""); + } +} +addImages(); +// 3) +var product = /** @class */ (function () { + function product(name, category, price, image) { + this.name = name; + this.category = category; + this.price = price; + this.image = image; + } + return product; +}()); +var spongeBobShirt = new product("SpongeBob's Shirt", "T-Shirt", 30, "https://www.pngkey.com/png/full/612-6120757_spongebob-man-graphic-t-shirt-bft4044-1-.png"); +var spongeBob2Shirt = new product("SpongeBob's Shirt", "T-Shirt", 10, "https://www.seekpng.com/png/full/280-2809911_shocked-spongebob-t-shirt-maglietta-gucci-bugs-bunny.png"); +var patrickPants = new product("Spongebob's Hat", "Hats", 25, "https://cdn.shopify.com/s/files/1/0197/1303/2254/products/12711550_SPONGEBOB_A_400x.png?v=1620726871"); +var squidwardUnderware = new product("SpongeBob's Hoodie", "Hoodies", 20, "https://cdn.shopify.com/s/files/1/0150/0643/3380/products/SB-OICM_Viacom_Spongebob_Delta97200_HeatherOatmeal_1024x1024.png?v=1588254646"); +var products = [ + spongeBobShirt, + spongeBob2Shirt, + patrickPants, + squidwardUnderware, +]; +function addProductsToDOM(arr) { + var productsContainer = document.querySelector(".productsContainer__productsGrid"); + var productsStore = ""; + for (var product_1 in products) { + productsStore = productsStore + + ("
              \n

              " + products[product_1].name + "

              \n\n

              Product Category: " + products[product_1].category + "

              \n\n

              Product price: " + products[product_1].price + "$

              \n\n \n\n \n
              \n"); + } + if (productsContainer != null) { + productsContainer.innerHTML = productsStore; + } +} +addProductsToDOM(products); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/public/styles/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..0e6ee8a81 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,85 @@ +body { + width: 100vw; + height: 100vh; + padding: 0; + margin: 0; +} + +.imageContainer { + width: 100%; + height: 900px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + border-bottom: 1px solid #fff4f4; +} +.imageContainer h1 { + margin: 0; + padding: 0; +} +.imageContainer__imageGallery { + width: 800px; + height: 800px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + grid-auto-columns: 300px 100px; +} +.imageContainer__imageGallery img { + border-radius: 20px; + transition: 350ms; + object-fit: cover; + box-shadow: 5px 5px 15px -7px #000000; + width: 100%; +} +.imageContainer__imageGallery img:hover { + border-radius: 30px; +} + +.productsContainer { + width: 100vw; + height: 100vh; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; +} +.productsContainer h1 { + padding: 0; + margin: 0; +} +.productsContainer__productsGrid { + width: 700px; + height: 1100px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + grid-auto-columns: 50px 50px; + margin: 0; +} +.productsContainer__productsGrid div { + background-color: #fff1df; + width: 300px; + height: 500px; + border-radius: 20px; + padding: 15px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + box-shadow: 5px 5px 15px -7px #000000; +} +.productsContainer__productsGrid div h1 { + padding: 0; + margin: 0; +} +.productsContainer__productsGrid div p { + font-weight: 800; + padding: 0; + margin: 0; +} +.productsContainer__productsGrid div img { + object-fit: cover; + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..afc2adf0d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,22 @@ + + + + + + + + Document + + +
              +

              Image Gallery

              +
              +
              +
              +
              +

              Products Store

              +
              +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..715b5ac7b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/index.ts @@ -0,0 +1,68 @@ +// 2) +function addImages() { + const imageArr: Array = []; + while (imageArr.length < 5) { + let userImage: string | null = prompt( + `Please enter 5 URL's of an image one by one: ${imageArr.length}/5` + ); + if (userImage) { + imageArr.push( + `\n` + ); + } + } + const imageContainer: HTMLDivElement | null = + document.querySelector(".imageContainer__imageGallery"); + if (imageContainer != null) { + imageContainer.innerHTML = imageArr.join(""); + } +} + +addImages(); + +// 3) +class product { + constructor( + public name: string, + public category: string, + public price: number, + public image:string + ) {} +} + +const spongeBobShirt: product = new product("SpongeBob's Shirt", "T-Shirt", 30,"https://www.pngkey.com/png/full/612-6120757_spongebob-man-graphic-t-shirt-bft4044-1-.png"); +const spongeBob2Shirt: product = new product("SpongeBob's Shirt", "T-Shirt", 10,"https://www.seekpng.com/png/full/280-2809911_shocked-spongebob-t-shirt-maglietta-gucci-bugs-bunny.png"); +const patrickPants: product = new product("Spongebob's Hat", "Hats", 25,"https://cdn.shopify.com/s/files/1/0197/1303/2254/products/12711550_SPONGEBOB_A_400x.png?v=1620726871"); +const squidwardUnderware: product = new product( + "SpongeBob's Hoodie", + "Hoodies", + 20,"https://cdn.shopify.com/s/files/1/0150/0643/3380/products/SB-OICM_Viacom_Spongebob_Delta97200_HeatherOatmeal_1024x1024.png?v=1588254646" +); + +const products: Array = [ + spongeBobShirt, + spongeBob2Shirt, + patrickPants, + squidwardUnderware, +]; + +function addProductsToDOM(arr:Array){ + const productsContainer: HTMLDivElement | null = document.querySelector(".productsContainer__productsGrid"); + let productsStore: string = ""; + + for (let product in products) { + productsStore = productsStore + + `
              +

              ${products[product].name}

              \n +

              Product Category: ${products[product].category}

              \n +

              Product price: ${products[product].price}$

              \n + \n + +
              \n`; + } + if (productsContainer != null) { + productsContainer.innerHTML = productsStore; + } +} + +addProductsToDOM(products); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/style.css new file mode 100644 index 000000000..2ffb2432f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/style.css @@ -0,0 +1,87 @@ +body { + width: 100vw; + height: 100vh; + padding: 0; + margin: 0; +} + +.imageContainer { + width: 100%; + height: 900px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + border-bottom: 1px solid rgb(255, 244, 244); +} +.imageContainer h1 { + margin: 0; + padding: 0; +} +.imageContainer__imageGallery { + width: 800px; + height: 800px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + grid-auto-columns: 300px 100px; +} +.imageContainer__imageGallery img { + border-radius: 20px; + transition: 350ms; + -o-object-fit: cover; + object-fit: cover; + box-shadow: 5px 5px 15px -7px #000000; + width: 100%; +} +.imageContainer__imageGallery img:hover { + border-radius: 30px; +} + +.productsContainer { + width: 100vw; + height: 100vh; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; +} +.productsContainer h1 { + padding: 0; + margin: 0; +} +.productsContainer__productsGrid { + width: 700px; + height: 1100px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + grid-auto-columns: 50px 50px; + margin: 0; +} +.productsContainer__productsGrid div { + background-color: rgb(255, 241, 223); + width: 300px; + height: 500px; + border-radius: 20px; + padding: 15px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + box-shadow: 5px 5px 15px -7px #000000; +} +.productsContainer__productsGrid div h1 { + padding: 0; + margin: 0; +} +.productsContainer__productsGrid div p { + font-weight: 800; + padding: 0; + margin: 0; +} +.productsContainer__productsGrid div img { + -o-object-fit: cover; + object-fit: cover; + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..4d626d0e6 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Nikita Rossenko/src/style.scss @@ -0,0 +1,88 @@ +body { + width: 100vw; + height: 100vh; + padding: 0; + margin: 0; +} +.imageContainer{ + width: 100%; + height: 900px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + border-bottom: 1px solid rgb(255, 244, 244); + h1 { + margin: 0; + padding: 0; + } + &__imageGallery{ + width: 800px; + height: 800px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + grid-auto-columns: 300px 100px; + + + img { + border-radius: 20px; + transition: 350ms; + object-fit: cover; + box-shadow: 5px 5px 15px -7px #000000; + width: 100% + } + img:hover { + border-radius: 30px; + } + } + +} + +.productsContainer { + width: 100vw; + height: 100vh; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + h1 { + padding: 0; + margin: 0; + } + + &__productsGrid{ + width: 700px; + height: 1100px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + grid-auto-columns: 50px 50px; + margin: 0; + div{ + background-color: rgb(255, 241, 223); + width: 300px; + height: 500px; + border-radius: 20px; + padding: 15px; + display: flex; + justify-content: space-around; + align-items: center; + flex-direction: column; + box-shadow: 5px 5px 15px -7px #000000; + h1 { + padding: 0; + margin: 0; + } + p { + font-weight: 800; + padding: 0; + margin: 0; + } + img { + object-fit:cover; + width: 100% + } + } + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/dist/index.js new file mode 100644 index 000000000..b2260ed82 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/dist/index.js @@ -0,0 +1,32 @@ +var i = 5; +var count = 1; +var imageArr = []; +while (i > 0) { + var imageUrl = prompt("Enter image URL " + count); + if (imageUrl) { + imageArr.push(imageUrl); + i--; + count++; + } +} +var cards = document.querySelector(".cards"); +for (var i_1 = 0; i_1 < imageArr.length; i_1++) { + if (cards) { + var card = document.createElement('div'); + card.className = 'cards__card'; + var h2 = document.createElement('h2'); + h2.innerText = "Picture " + (i_1 + 1); + card.appendChild(h2); + console.log("Card " + i_1); + cards.appendChild(card); + var img = document.createElement('img'); + img.setAttribute('src', "" + imageArr[i_1]); + card.appendChild(img); + } +} +//Photos URLs +//https://i.pinimg.com/originals/63/bd/3d/63bd3d308c09adf9298521746a228594.jpg +//https://images.unsplash.com/photo-1536536982624-06c1776e0ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBzY3JlZW4lMjBzYXZlcnxlbnwwfHwwfHw%3D&w=1000&q=80 +//https://t4.ftcdn.net/jpg/03/42/22/21/360_F_342222107_e3nK2GiuXC9lgKXOxl6DQTZqAbxSKvVo.jpg +//https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77701907192.jpg +//https://t3.ftcdn.net/jpg/02/88/85/40/360_F_288854085_UgTZlBB6cawdncsWnnHwMUnPthshtSKD.jpg diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/dist/style.css new file mode 100644 index 000000000..98e3b8c4d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/dist/style.css @@ -0,0 +1,36 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + background-color: #d9d9d9; +} + +.cards { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.cards__card { + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + width: 300px; + border-radius: 10px; + box-shadow: 0px 0px 10px 5px #565656; + background-color: white; +} +.cards__card h2 { + padding: 20px; +} +.cards__card img { + width: 100%; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/index.html new file mode 100644 index 000000000..6abb45925 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
              + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/index.ts new file mode 100644 index 000000000..17f10e565 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/index.ts @@ -0,0 +1,33 @@ +let i = 5; +let count = 1; +let imageArr:any[] = []; +while(i > 0) { + const imageUrl = prompt(`Enter image URL ${count}`); + if(imageUrl) { + imageArr.push(imageUrl); + i--; + count++; + } +} +const cards = document.querySelector(".cards"); +for(let i = 0; i < imageArr.length; i++) { + if(cards) { + const card = document.createElement('div'); + card.className = 'cards__card'; + const h2 = document.createElement('h2'); + h2.innerText = `Picture ${i+1}`; + card.appendChild(h2); + console.log(`Card ${i}`) + cards.appendChild(card); + const img = document.createElement('img'); + img.setAttribute('src', `${imageArr[i]}`); + card.appendChild(img); + } +} + +//Photos URLs +//https://i.pinimg.com/originals/63/bd/3d/63bd3d308c09adf9298521746a228594.jpg +//https://images.unsplash.com/photo-1536536982624-06c1776e0ca8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBzY3JlZW4lMjBzYXZlcnxlbnwwfHwwfHw%3D&w=1000&q=80 +//https://t4.ftcdn.net/jpg/03/42/22/21/360_F_342222107_e3nK2GiuXC9lgKXOxl6DQTZqAbxSKvVo.jpg +//https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77701907192.jpg +//https://t3.ftcdn.net/jpg/02/88/85/40/360_F_288854085_UgTZlBB6cawdncsWnnHwMUnPthshtSKD.jpg \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/style.css new file mode 100644 index 000000000..453d6aad3 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/style.css @@ -0,0 +1,36 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + background-color: rgb(217, 217, 217); +} + +.cards { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.cards__card { + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + width: 300px; + border-radius: 10px; + box-shadow: 0px 0px 10px 5px rgb(86, 86, 86); + background-color: white; +} +.cards__card h2 { + padding: 20px; +} +.cards__card img { + width: 100%; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/style.scss new file mode 100644 index 000000000..391841a27 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Omer.Virshuvski/style.scss @@ -0,0 +1,34 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +body { + background-color: rgb(217, 217, 217); +} +.cards { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &__card { + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + width: 300px; + border-radius: 10px; + box-shadow: 0px 0px 10px 5px rgb(86, 86, 86); + background-color: white; + h2 { + padding: 20px; + } + img { + width: 100%; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/.vscode/settings.json b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/.vscode/settings.json new file mode 100644 index 000000000..bf76cb69b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/dist/login.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/dist/login.css new file mode 100644 index 000000000..db6b1f438 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/dist/login.css @@ -0,0 +1,58 @@ +body { + background-color: aliceblue; +} + +.container { + position: relative; + margin: auto; + margin-top: 15vh; + background-color: #dfe1e8; + width: 50vw; + height: 50vh; + border-radius: 20px; + box-shadow: 5px 10px 20px 5px black; +} +.container__input { + position: relative; + height: 30%; +} + +label { + margin-left: 10%; + color: black; + font-size: larger; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +input { + margin-left: 10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: aliceblue; + box-shadow: 2px 5px 10px #fefefe; +} + +button { + background-color: #71b609; + font-size: larger; + color: white; + font-weight: bold; + border-radius: 5px; + margin-top: 10px; + margin-left: 40%; +} + +button:hover { + background-color: #426d02; +} + +span { + position: relative; + left: 45px; + color: red; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-weight: bold; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/dist/login.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/dist/login.js new file mode 100644 index 000000000..85846904a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/dist/login.js @@ -0,0 +1,54 @@ +var btn = document.querySelector(".enter"); +btn.addEventListener("click", function (e) { + var inputName = document.querySelector(".input_name").value; + var errorName = document.querySelector(".error_name"); + var errorPassword = document.querySelector(".error_password"); + var errorEmail = document.querySelector(".error_email"); + var regularExpressionName_0 = /[0-9]+/; + var testnumber = regularExpressionName_0.test(inputName); + if (inputName) { + if (testnumber === true) { + errorName.innerHTML = "** Enter name without numbers "; + } + } + var regularExpressionName_1 = /\s/; + var testnumber_1 = regularExpressionName_1.test(inputName); + if (inputName) { + if (testnumber_1 === false && testnumber === false) { + errorName.innerHTML = "** Please enter full name "; + } + } + var regularExpressionName_2 = /[\W\S_]/; + var testnumber_2 = regularExpressionName_2.test(inputName); + if (inputName) { + if (testnumber_2 === false && testnumber === false && testnumber_1 === true) { + errorName.innerHTML = "** These characters are not valid for a username "; + } + } + // --------------------------------------------- + var inputPassword = document.querySelector(".input_password").value; + if (inputPassword.length < 5 && inputPassword.length > 20) { + errorPassword.innerHTML = "** The password must be between 5 and 20 characters"; + } + var regularExpressionName_3 = /[A-Z]+/; + var testnumber_3 = regularExpressionName_3.test(inputPassword); + if (testnumber_3 === false && inputPassword.length > 5 && inputPassword.length < 20) { + errorPassword.innerHTML = "** The password must contain capital letters"; + } + var regularExpressionName_4 = /\s/; + var testnumber_4 = regularExpressionName_4.test(inputPassword); + if (testnumber_4 === true && inputPassword.length > 5 && inputPassword.length < 20 && testnumber_3 === true) { + errorPassword.innerHTML = "** Password cannot contain the space character"; + } + // ------------------------------------------------ + var inputEmail = document.querySelector(".input_emaul").value; + var regularExpressionEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + var testnumber_5 = regularExpressionEmail.test(inputEmail); + if (testnumber_5 === false) { + errorEmail.innerHTML = "**The email is invalid"; + } + if (testnumber === false && testnumber_1 === true && testnumber_2 === true && inputPassword.length > 5 && inputPassword.length < 20 && testnumber_3 === true && testnumber_4 === false && testnumber_5 === true) { + window.open("./shop/index.html"); + window.parent.close(); + } +}); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/dist/login.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/dist/login.css new file mode 100644 index 000000000..208d617dd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/dist/login.css @@ -0,0 +1,104 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Lato:300"); +body { + background-color: #a44b4b; +} + +.login { + position: absolute; + left: 25%; + top: 10%; + font-size: 60px; + text-align: center; + color: #f30303; + font-family: "Lilita One", cursive; +} + +.container { + position: relative; + margin: auto; + margin-top: 15vh; + background-color: #d5d4d4; + width: 380px; + height: 420px; + box-shadow: 5px 10px 20px 10px black; +} +.container__input { + position: relative; + height: 30%; +} + +label { + margin-left: 10%; + color: white; + font-size: medium; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +input { + margin-left: 10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: white; + box-shadow: 2px 5px 10px #515151; +} + +button { + background-color: #fb0000; + font-size: larger; + color: white; + font-weight: bold; + border-radius: 5px; + margin-top: 10px; + margin-left: 40%; +} + +button:hover { + background-color: #810101; +} + +span { + position: relative; + left: 45px; + color: red; + font-weight: lighter; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-size: 15px; +} + +.gradient-border { + --border-width: 3px; + position: relative; + border-radius: 20px; + width: 380px; + height: 420px; + font-family: Lato, sans-serif; + font-size: 1rem; + text-transform: uppercase; + color: white; + background: #222; + border-radius: var(--border-width); +} +.gradient-border::after { + position: absolute; + content: ""; + top: calc(-1 * var(--border-width)); + left: calc(-1 * var(--border-width)); + z-index: -1; + width: calc(100% + var(--border-width) * 2); + height: calc(100% + var(--border-width) * 2); + background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0); + background-size: 300% 300%; + background-position: 0 50%; + border-radius: calc(2 * var(--border-width)); + animation: moveGradient 4s alternate infinite; +} + +@keyframes moveGradient { + 50% { + background-position: 100% 50%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/dist/login.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/dist/login.js new file mode 100644 index 000000000..2adf1a49c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/dist/login.js @@ -0,0 +1,76 @@ +var btn = document.querySelector(".enter"); +btn.addEventListener("click", function (e) { + try { + var inputName = document.querySelector(".input_name") + .value; + localStorage.setItem("input_name", inputName); + var errorName = document.querySelector(".error_name"); + var errorPassword = document.querySelector(".error_password"); + var errorEmail = document.querySelector(".error_email"); + var regularExpressionName_0 = /[0-9]+/; + var testnumber = regularExpressionName_0.test(inputName); + if (inputName) { + if (testnumber === true) { + errorName.innerHTML = "** Enter name without numbers "; + } + } + var regularExpressionName_1 = /\s/; + var testnumber_1 = regularExpressionName_1.test(inputName); + if (inputName) { + if (testnumber_1 === false && testnumber === false) { + errorName.innerHTML = "** Please enter full name "; + } + } + var regularExpressionName_2 = /[\W\S_]/; + var testnumber_2 = regularExpressionName_2.test(inputName); + if (inputName) { + if (testnumber_2 === false && + testnumber === false && + testnumber_1 === true) { + errorName.innerHTML = "** These characters are not valid for a username "; + } + } + // --------------------------------------------- + var inputPassword = document.querySelector(".input_password").value; + if (inputPassword.length < 5 || inputPassword.length > 20) { + errorPassword.innerHTML = "** The password must be between
              5 and 20 characters"; + } + var regularExpressionName_3 = /[A-Z]+/; + var testnumber_3 = regularExpressionName_3.test(inputPassword); + if (testnumber_3 === false && + inputPassword.length > 5 && + inputPassword.length < 20) { + errorPassword.innerHTML = "** The password must contain capital letters"; + } + var regularExpressionName_4 = /\s/; + var testnumber_4 = regularExpressionName_4.test(inputPassword); + if (testnumber_4 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true) { + errorPassword.innerHTML = "** Password cannot contain the space character"; + } + // ------------------------------------------------ + var inputEmail = document.querySelector(".input_emaul") + .value; + var regularExpressionEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + var testnumber_5 = regularExpressionEmail.test(inputEmail); + if (testnumber_5 === false) { + errorEmail.innerHTML = "**The email is invalid"; + } + if (testnumber === false && + testnumber_1 === true && + testnumber_2 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true && + testnumber_4 === false && + testnumber_5 === true) { + window.open("../shop/index.html"); + window.parent.close(); + } + } + catch (error) { + throw new Error(error); + } +}); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.css new file mode 100644 index 000000000..11399e5dc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.css @@ -0,0 +1,111 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Lato:300"); +body { + background-color: rgb(164, 75, 75); +} + +.login { + position: absolute; + left: 25%; + top: 10%; + font-size: 60px; + text-align: center; + color: rgb(243, 3, 3); + font-family: "Lilita One", cursive; +} + +.container { + position: relative; + margin: auto; + margin-top: 15vh; + background-color: rgb(213, 212, 212); + width: 380px; + height: 420px; + box-shadow: 5px 10px 20px 10px rgb(0, 0, 0); +} +.container__input { + position: relative; + height: 30%; +} + +label { + margin-left: 10%; + color: rgb(255, 255, 255); + font-size: medium; + font-weight: bold; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +input { + margin-left: 10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: rgb(255, 255, 255); + box-shadow: 2px 5px 10px rgb(81, 81, 81); +} + +button { + background-color: rgb(251, 0, 0); + font-size: larger; + color: white; + font-weight: bold; + border-radius: 5px; + margin-top: 10px; + margin-left: 40%; +} + +button:hover { + background-color: rgb(129, 1, 1); +} + +span { + position: relative; + left: 45px; + color: red; + font-weight: lighter; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-size: 15px; +} + +.gradient-border { + --border-width: 3px; + position: relative; + border-radius: 20px; + width: 380px; + height: 420px; + font-family: Lato, sans-serif; + font-size: 1rem; + text-transform: uppercase; + color: white; + background: #222; + border-radius: var(--border-width); +} +.gradient-border::after { + position: absolute; + content: ""; + top: calc(-1 * var(--border-width)); + left: calc(-1 * var(--border-width)); + z-index: -1; + width: calc(100% + var(--border-width) * 2); + height: calc(100% + var(--border-width) * 2); + background: linear-gradient(60deg, hsl(224deg, 85%, 66%), hsl(269deg, 85%, 66%), hsl(314deg, 85%, 66%), hsl(359deg, 85%, 66%), hsl(44deg, 85%, 66%), hsl(89deg, 85%, 66%), hsl(134deg, 85%, 66%), hsl(179deg, 85%, 66%)); + background-size: 300% 300%; + background-position: 0 50%; + border-radius: calc(2 * var(--border-width)); + -webkit-animation: moveGradient 4s alternate infinite; + animation: moveGradient 4s alternate infinite; +} + +@-webkit-keyframes moveGradient { + 50% { + background-position: 100% 50%; + } +} + +@keyframes moveGradient { + 50% { + background-position: 100% 50%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.html new file mode 100644 index 000000000..092d8f6e3 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.html @@ -0,0 +1,42 @@ + + + + + + + Document + + + + + + +
              + + +
              + +
              +
              +
              + +
              +
              +
              + +
              +
              +
              + + +
              + + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.scss new file mode 100644 index 000000000..3244c2f41 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.scss @@ -0,0 +1,135 @@ +@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap'); +@import url("https://fonts.googleapis.com/css?family=Lato:300"); +body{ + background-color:rgb(164, 75, 75); + +} +.login{ + position: absolute; + left: 25%; + top: 10%; + font-size: 60px; + text-align: center; + color: rgb(243, 3, 3); + font-family: 'Lilita One', cursive; + +} + +.container{ + + position: relative; + margin: auto; + margin-top: 15vh; + background-color: rgb(213, 212, 212); + width: 380px; + height: 420px; + + box-shadow: 5px 10px 20px 10px rgb(0, 0, 0) ; + + +&__input{ +position:relative ; + height: 30%; + + + +} + +} + + +label{ + + margin-left: 10%; + color: rgb(255, 255, 255); + font-size: medium; + font-weight: bold; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + + + + +} + +input{ + margin-left:10%; + color: black; + font-weight: bold; + font-size: larger; + border-radius: 5px; + background-color: rgb(255, 255, 255); + box-shadow: 2px 5px 10px rgb(81, 81, 81) ; +} + +button{ + +background-color: rgb(251, 0, 0); +font-size: larger; +color: white; +font-weight: bold; +border-radius: 5px; +margin-top: 10px; +margin-left: 40%; +} +button:hover{ + background-color: rgb(129, 1, 1); +} +span{ + position: relative; + left: 45px; + color: red; + font-weight: lighter; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 15px + + + +} + + + +.gradient-border { + --border-width: 3px; + + position: relative; + border-radius: 20px; + width: 380px; + height: 420px; + font-family: Lato, sans-serif; + font-size: 1.0rem; + text-transform: uppercase; + color: white; + background: #222; + border-radius: var(--border-width); + + &::after { + position: absolute; + content: ""; + top: calc(-1 * var(--border-width)); + left: calc(-1 * var(--border-width)); + z-index: -1; + width: calc(100% + var(--border-width) * 2); + height: calc(100% + var(--border-width) * 2); + background: linear-gradient( + 60deg, + hsl(224, 85%, 66%), + hsl(269, 85%, 66%), + hsl(314, 85%, 66%), + hsl(359, 85%, 66%), + hsl(44, 85%, 66%), + hsl(89, 85%, 66%), + hsl(134, 85%, 66%), + hsl(179, 85%, 66%) + ); + background-size: 300% 300%; + background-position: 0 50%; + border-radius: calc(2 * var(--border-width)); + animation: moveGradient 4s alternate infinite; + } +} + +@keyframes moveGradient { + 50% { + background-position: 100% 50%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.ts new file mode 100644 index 000000000..83dd0ffdb --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/login/login.ts @@ -0,0 +1,106 @@ +let btn = document.querySelector(".enter") as HTMLButtonElement; + +btn.addEventListener("click", (e) => { + try { + + + let inputName = (document.querySelector(".input_name") as HTMLInputElement) + .value; + + localStorage.setItem("input_name", inputName); + + + let errorName = document.querySelector(".error_name") as HTMLSpanElement; + let errorPassword = document.querySelector( + ".error_password" + ) as HTMLSpanElement; + let errorEmail = document.querySelector(".error_email") as HTMLSpanElement; + + let regularExpressionName_0 = /[0-9]+/; + let testnumber = regularExpressionName_0.test(inputName); + if (inputName) { + if (testnumber === true) { + errorName.innerHTML = "** Enter name without numbers "; + } + } + + let regularExpressionName_1 = /\s/; + let testnumber_1 = regularExpressionName_1.test(inputName); + if (inputName) { + if (testnumber_1 === false && testnumber === false) { + errorName.innerHTML = "** Please enter full name "; + } + } + + let regularExpressionName_2 = /[\W\S_]/; + let testnumber_2 = regularExpressionName_2.test(inputName); + if (inputName) { + if ( + testnumber_2 === false && + testnumber === false && + testnumber_1 === true + ) { + errorName.innerHTML = "** These characters are not valid for a username "; + } + } + + // --------------------------------------------- + + let inputPassword = ( + document.querySelector(".input_password") as HTMLInputElement + ).value; + + if (inputPassword.length < 5 || inputPassword.length > 20) { + errorPassword.innerHTML = `** The password must be between
              5 and 20 characters`; + } + + let regularExpressionName_3 = /[A-Z]+/; + let testnumber_3 = regularExpressionName_3.test(inputPassword); + if ( + testnumber_3 === false && + inputPassword.length > 5 && + inputPassword.length < 20 + ) { + errorPassword.innerHTML = "** The password must contain capital letters"; + } + + let regularExpressionName_4 = /\s/; + let testnumber_4 = regularExpressionName_4.test(inputPassword); + if ( + testnumber_4 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true + ) { + errorPassword.innerHTML = "** Password cannot contain the space character"; + } + + // ------------------------------------------------ + + let inputEmail = (document.querySelector(".input_emaul") as HTMLInputElement) + .value; + let regularExpressionEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + let testnumber_5 = regularExpressionEmail.test(inputEmail); + if (testnumber_5 === false) { + errorEmail.innerHTML = "**The email is invalid"; + } + + if ( + testnumber === false && + testnumber_1 === true && + testnumber_2 === true && + inputPassword.length > 5 && + inputPassword.length < 20 && + testnumber_3 === true && + testnumber_4 === false && + testnumber_5 === true + ) { + window.open("../shop/index.html"); + window.parent.close(); + } + + +} catch (error) { + throw new Error(error); +} +}); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/cothingStore.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/cothingStore.ts new file mode 100644 index 000000000..04e69327c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/cothingStore.ts @@ -0,0 +1,346 @@ +class CothingStore { + private _gender: string; + private _type: string; + private _price: number; + private _imgLink: string; + + constructor(gender: string, type: string, price: number, imgLink: string) { + this._gender = gender; + this._type = type; + this._price = price; + this._imgLink = imgLink; + } + get getCategory() { + return this._gender; + } + get getType() { + return this._type; + } + get getPrice() { + return this._price; + } + get getimgLink() { + return this._imgLink; + } + + // ----------------------------------- + + set setPrice(value: number) { + if (value < 50) { + throw new Error("The price should be greater than fifty"); + } + this._price = value; + } +} + +const nikeShoes = new CothingStore( + "man", + "Nike shoes", + 400, + "https://cdn.shopify.com/s/files/1/0659/0713/0614/products/jd_554531_a_1000x.jpg?v=1667998952" +); +const buttonedShirt = new CothingStore( + "man", + "Tommy shirt", + 600, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXursVvHsRx7sgGcB6UnhLgfvVsC8nNFNKdewtwcKudb8sFzpphZ-9vAoEdJwJ_W4NFPw&usqp=CAU" +); +const woolCoat = new CothingStore( + "man", + "long woolen coat", + 900, + "https://litb-cgis.rightinthebox.com/images/640x853/202212/bps/product/inc/opttrx1671504674432.jpg" +); +const slippers = new CothingStore( + "man", + "slippers", + 150, + "https://www.ikea.com/il/he/images/products/obegraensad-slippers-black__1115563_pe872129_s5.jpg?f=xs" +); +const belt = new CothingStore( + "man", + "Leather belt", + 250, + "https://nappa.co.il/wp-content/uploads/2020/10/%D7%97%D7%92%D7%95%D7%A8%D7%94-%D7%9C%D7%92%D7%91%D7%A8-%D7%9C%D7%92%D7%99%D7%A0%D7%A1-%D7%A2%D7%95%D7%A8-%D7%97%D7%95%D7%9D-%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA..jpg" +); +const Jeans = new CothingStore( + "man", + "Black Guinness", + 750, + "https://d3thqe68ymbqps.cloudfront.net/1015600-home_default/%D7%92%D7%99%D7%A0%D7%A1-%D7%A9%D7%97%D7%95%D7%A8-%D7%92%D7%91%D7%A8%D7%99%D7%9D-%D7%A6%D7%91%D7%A2-%D7%98%D7%94%D7%95%D7%A8-%D7%A1%D7%A7%D7%99%D7%A0%D7%99-%D7%A1%D7%98%D7%A8%D7%A5-%D7%92%D7%99.jpg" +); + +const Sunglasses = new CothingStore( + "man", + "Sunglasses", + 400, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrIPqb_otDK480LArYZ8DX0rbXakOY7gHHbg&usqp=CAU" +); +const clothes = new CothingStore( + "man", + "clothes", + 120, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaG1wfyhVv0jT1LyyYRNRZP4-kxzbzGf-MzDOIvm02yIBPzzW97gHFdkctN9DAsBiMPw4&usqp=CAU" +); +const hat = new CothingStore( + "female", + "big hat", + 180, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9JUqv8TPvOllTGwzId8kvMhaCNPvKfY9HUg&usqp=CAU" +); + +const cothingStore: CothingStore[] = [ + nikeShoes, + buttonedShirt, + woolCoat, + slippers, + belt, + Jeans, + Sunglasses, + clothes, + hat, +]; + +const Welcome = document.querySelector(".hello") as HTMLHRElement; +const username = localStorage.getItem("input_name"); +Welcome.innerHTML = ` Welcome "${username}" ,glad you chose Shlomi Fashion `; + +const wraps_pictures = document.querySelector( + ".wraps_pictures" +) as HTMLDivElement; + +let divAdd = document.createElement("div"); +divAdd.style.backgroundColor = "white"; +divAdd.innerHTML = ``; +wraps_pictures.append(divAdd); + +const AddItem = document.querySelector(".AddItem") as HTMLInputElement; +divAdd.addEventListener("click", (e) => { + AddItem.style.display = "block"; +}); + +// -------------------------------------------------------------- + +for (let i in cothingStore) { + try { + const div = document.createElement("div"); + const img = document.createElement("img"); + const price = document.createElement("p"); + const type = document.createElement("h2"); + type.innerHTML = cothingStore[i].getType.toString(); + price.innerHTML = `${cothingStore[ + i + ].getPrice.toString()} `; + img.src = cothingStore[i].getimgLink; + wraps_pictures.appendChild(div); + div.appendChild(img); + div.appendChild(price); + div.appendChild(type); + } catch (error) { + throw new Error(error); + } +} + + +const add = document.querySelector(".add") as HTMLButtonElement; +add.addEventListener("click", (e) => { + try { + const gender = (document.querySelector(".gender") as HTMLInputElement) + .value; + const type = (document.querySelector(".type ") as HTMLInputElement).value; + const price = (document.querySelector(".price") as HTMLInputElement).value; + const imgLink = (document.querySelector(".imgLink ") as HTMLInputElement) + .value; + if ( + gender && + gender != "" && + type && + type != "" && + price && + price != "" && + imgLink && + imgLink != "" + ) { + let div = document.createElement("div"); + let img = document.createElement("img"); + let price2 = document.createElement("p"); + let type2 = document.createElement("h2"); + img.src = imgLink; + div.append(img); + price2.innerHTML = `${price} `; + div.appendChild(price2); + type2.innerHTML = type; + div.appendChild(type2); + + wraps_pictures.append(div); + } + + if (gender && type && price && imgLink) { + AddItem.style.display = "none"; + const add = new CothingStore(gender, type, parseInt(price), imgLink); + cothingStore.push(add); + } + } catch (error) { + throw new Error(error); + } +}); + +const searchItem = document.querySelector(".search") as HTMLInputElement; +searchItem.addEventListener("keyup", (e) => { + try { + wraps_pictures.replaceChildren(); + divAdd = document.createElement("div"); + divAdd.style.backgroundColor = "white"; + divAdd.innerHTML = ``; + wraps_pictures.append(divAdd); + + if (searchItem.value != "") { + for (let i in cothingStore) { + if ( + cothingStore[i].getType.includes(searchItem.value.toLowerCase()) || + cothingStore[i].getPrice.toString().includes(searchItem.value) + ) { + const div = document.createElement("div"); + const img = document.createElement("img"); + const price = document.createElement("p"); + const type = document.createElement("h2"); + type.innerHTML = cothingStore[i].getType.toString(); + price.innerHTML = `${cothingStore[ + i + ].getPrice.toString()} `; + img.src = cothingStore[i].getimgLink; + wraps_pictures.appendChild(div); + div.appendChild(img); + div.appendChild(price); + div.appendChild(type); + } + } + } else { + for (let i in cothingStore) { + const div = document.createElement("div"); + const img = document.createElement("img"); + const price = document.createElement("p"); + const type = document.createElement("h2"); + type.innerHTML = cothingStore[i].getType.toString(); + price.innerHTML = `${cothingStore[ + i + ].getPrice.toString()} `; + img.src = cothingStore[i].getimgLink; + wraps_pictures.appendChild(div); + div.appendChild(img); + div.appendChild(price); + div.appendChild(type); + } + } + } catch (error) { + throw new Error(error); + } +}); + +// let t_shirt = document.querySelector(".img_t") as HTMLImageElement; +// let shoes = document.querySelector(".img_s") as HTMLImageElement; +// let pants = document.querySelector(".img_p") as HTMLImageElement; + +// const username = document.querySelector(".hello") as HTMLHeadElement; +// let usernameV = localStorage.getItem("input_name"); +// if (usernameV){ +// username.innerHTML =` Welcome ${usernameV} , how fun that you chose Shlomi clothes` ; +// } + +// let count = 0; +// t_shirt.addEventListener("click", (e) => { +// count++; +// if (count === 1) { +// let ul_shirt = document.querySelector(".Shirt_list") as HTMLUListElement; + +// for (let i = 0; i < 3; i++) { +// const List_shirt = document.createElement("li"); +// List_shirt.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; +// ul_shirt.appendChild(List_shirt); +// } +// } +// }); +// let count1 = 0; +// shoes.addEventListener("click", (e) => { +// count1++; +// if (count1 === 1) { +// let ul_shoes = document.querySelector(".shoes_list") as HTMLUListElement; + +// for (let i = 3; i < 6; i++) { +// const shoes = document.createElement("li"); +// shoes.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; +// ul_shoes.appendChild(shoes); +// } +// } +// }); + +// let count2 = 0; +// pants.addEventListener("click", (e) => { +// count2++; +// if (count2 === 1) { +// let ul_pants = document.querySelector(".pans_list") as HTMLUListElement; +// for (let i = 6; i < 9; i++) { +// const pants = document.createElement("li"); +// pants.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; +// ul_pants.appendChild(pants); +// } +// } +// }); + +// const Item_search = document.querySelector(".Item_search") as HTMLInputElement; +// let ul_search = document.querySelector(".search_list") as HTMLUListElement; + +// Item_search.addEventListener("keyup", (e) => { +// ul_search.replaceChildren(); +// if (Item_search.value != "") { +// for (let i in cothingStore) { +// debugger; +// if ( +// cothingStore[i].type.includes(Item_search.value.toLowerCase()) || +// cothingStore[i].price.toString().includes(Item_search.value) +// ) { +// const li_search = document.createElement("li"); +// li_search.innerHTML = `${cothingStore[i].type} : ${cothingStore[i].price}`; +// ul_search.appendChild(li_search); +// } +// } +// } else { +// ul_search.replaceChildren(); +// } +// }); + +// } + +// class Person { +// constructor(public name: string, public age: number, public gender: string) {} +// } + +// const noam = new Person("noam", 33, "male"); +// const ruth = new Person("Ruth", 27, "female"); +// const dan = new Person("Dan", 41, "male"); +// /// we use lists to hold togther many elements +// const persons: Person[] = [noam, ruth, dan]; +// console.log(persons); +// console.log(persons[1]); + +// console.log(persons.length); +// //sort +// persons.sort((a, b) => a.age - b.age); + +// console.log(persons); +// //filter +// const personsAbove30: Person[] = persons.filter((person) => person.age > 30); +// console.log(personsAbove30); + +// //callback +// function logPerson(person: Person) { +// console.log(person.name, person.age); +// } + +// persons.forEach(logPerson); + +// persons.forEach(function (person: Person) { +// console.log(person.name, person.age); +// }); + +// console.log(persons.filter((person) => person.gender === "female")); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/MensShirts.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/MensShirts.js new file mode 100644 index 000000000..7829c165e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/MensShirts.js @@ -0,0 +1,3 @@ +// class MensShirts { +// constructor(public type: string, public price: number) {} +// } diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/cothingStore.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/cothingStore.js new file mode 100644 index 000000000..9a03769f0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/cothingStore.js @@ -0,0 +1,275 @@ +var CothingStore = /** @class */ (function () { + function CothingStore(gender, type, price, imgLink) { + this._gender = gender; + this._type = type; + this._price = price; + this._imgLink = imgLink; + } + Object.defineProperty(CothingStore.prototype, "getCategory", { + get: function () { + return this._gender; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(CothingStore.prototype, "getType", { + get: function () { + return this._type; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(CothingStore.prototype, "getPrice", { + get: function () { + return this._price; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(CothingStore.prototype, "getimgLink", { + get: function () { + return this._imgLink; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(CothingStore.prototype, "setPrice", { + // ----------------------------------- + set: function (value) { + if (value < 50) { + throw new Error("The price should be greater than fifty"); + } + this._price = value; + }, + enumerable: false, + configurable: true + }); + return CothingStore; +}()); +var nikeShoes = new CothingStore("man", "Nike shoes", 400, "https://cdn.shopify.com/s/files/1/0659/0713/0614/products/jd_554531_a_1000x.jpg?v=1667998952"); +var buttonedShirt = new CothingStore("man", "Tommy shirt", 600, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXursVvHsRx7sgGcB6UnhLgfvVsC8nNFNKdewtwcKudb8sFzpphZ-9vAoEdJwJ_W4NFPw&usqp=CAU"); +var woolCoat = new CothingStore("man", "long woolen coat", 900, "https://litb-cgis.rightinthebox.com/images/640x853/202212/bps/product/inc/opttrx1671504674432.jpg"); +var slippers = new CothingStore("man", "slippers", 150, "https://www.ikea.com/il/he/images/products/obegraensad-slippers-black__1115563_pe872129_s5.jpg?f=xs"); +var belt = new CothingStore("man", "Leather belt", 250, "https://nappa.co.il/wp-content/uploads/2020/10/%D7%97%D7%92%D7%95%D7%A8%D7%94-%D7%9C%D7%92%D7%91%D7%A8-%D7%9C%D7%92%D7%99%D7%A0%D7%A1-%D7%A2%D7%95%D7%A8-%D7%97%D7%95%D7%9D-%D7%97%D7%92%D7%95%D7%A8%D7%95%D7%AA..jpg"); +var Jeans = new CothingStore("man", "Black Guinness", 750, "https://d3thqe68ymbqps.cloudfront.net/1015600-home_default/%D7%92%D7%99%D7%A0%D7%A1-%D7%A9%D7%97%D7%95%D7%A8-%D7%92%D7%91%D7%A8%D7%99%D7%9D-%D7%A6%D7%91%D7%A2-%D7%98%D7%94%D7%95%D7%A8-%D7%A1%D7%A7%D7%99%D7%A0%D7%99-%D7%A1%D7%98%D7%A8%D7%A5-%D7%92%D7%99.jpg"); +var Sunglasses = new CothingStore("man", "Sunglasses", 400, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrIPqb_otDK480LArYZ8DX0rbXakOY7gHHbg&usqp=CAU"); +var clothes = new CothingStore("man", "clothes", 120, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaG1wfyhVv0jT1LyyYRNRZP4-kxzbzGf-MzDOIvm02yIBPzzW97gHFdkctN9DAsBiMPw4&usqp=CAU"); +var hat = new CothingStore("female", "big hat", 180, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9JUqv8TPvOllTGwzId8kvMhaCNPvKfY9HUg&usqp=CAU"); +var cothingStore = [ + nikeShoes, + buttonedShirt, + woolCoat, + slippers, + belt, + Jeans, + Sunglasses, + clothes, + hat, +]; +var Welcome = document.querySelector(".hello"); +var username = localStorage.getItem("input_name"); +Welcome.innerHTML = " Welcome \"" + username + "\" ,glad you chose Shlomi Fashion "; +var wraps_pictures = document.querySelector(".wraps_pictures"); +var divAdd = document.createElement("div"); +divAdd.style.backgroundColor = "white"; +divAdd.innerHTML = ""; +wraps_pictures.append(divAdd); +var AddItem = document.querySelector(".AddItem"); +divAdd.addEventListener("click", function (e) { + AddItem.style.display = "block"; +}); +// -------------------------------------------------------------- +for (var i in cothingStore) { + try { + var div = document.createElement("div"); + var img = document.createElement("img"); + var price = document.createElement("p"); + var type = document.createElement("h2"); + type.innerHTML = cothingStore[i].getType.toString(); + price.innerHTML = cothingStore[i].getPrice.toString() + " "; + img.src = cothingStore[i].getimgLink; + wraps_pictures.appendChild(div); + div.appendChild(img); + div.appendChild(price); + div.appendChild(type); + } + catch (error) { + throw new Error(error); + } +} +var add = document.querySelector(".add"); +add.addEventListener("click", function (e) { + try { + var gender = document.querySelector(".gender") + .value; + var type = document.querySelector(".type ").value; + var price = document.querySelector(".price").value; + var imgLink = document.querySelector(".imgLink ") + .value; + if (gender && + gender != "" && + type && + type != "" && + price && + price != "" && + imgLink && + imgLink != "") { + var div = document.createElement("div"); + var img = document.createElement("img"); + var price2 = document.createElement("p"); + var type2 = document.createElement("h2"); + img.src = imgLink; + div.append(img); + price2.innerHTML = price + " "; + div.appendChild(price2); + type2.innerHTML = type; + div.appendChild(type2); + wraps_pictures.append(div); + } + if (gender && type && price && imgLink) { + AddItem.style.display = "none"; + var add_1 = new CothingStore(gender, type, parseInt(price), imgLink); + cothingStore.push(add_1); + } + } + catch (error) { + throw new Error(error); + } +}); +var searchItem = document.querySelector(".search"); +searchItem.addEventListener("keyup", function (e) { + try { + wraps_pictures.replaceChildren(); + divAdd = document.createElement("div"); + divAdd.style.backgroundColor = "white"; + divAdd.innerHTML = ""; + wraps_pictures.append(divAdd); + if (searchItem.value != "") { + for (var i in cothingStore) { + if (cothingStore[i].getType.includes(searchItem.value.toLowerCase()) || + cothingStore[i].getPrice.toString().includes(searchItem.value)) { + var div = document.createElement("div"); + var img = document.createElement("img"); + var price = document.createElement("p"); + var type = document.createElement("h2"); + type.innerHTML = cothingStore[i].getType.toString(); + price.innerHTML = cothingStore[i].getPrice.toString() + " "; + img.src = cothingStore[i].getimgLink; + wraps_pictures.appendChild(div); + div.appendChild(img); + div.appendChild(price); + div.appendChild(type); + } + } + } + else { + for (var i in cothingStore) { + var div = document.createElement("div"); + var img = document.createElement("img"); + var price = document.createElement("p"); + var type = document.createElement("h2"); + type.innerHTML = cothingStore[i].getType.toString(); + price.innerHTML = cothingStore[i].getPrice.toString() + " "; + img.src = cothingStore[i].getimgLink; + wraps_pictures.appendChild(div); + div.appendChild(img); + div.appendChild(price); + div.appendChild(type); + } + } + } + catch (error) { + throw new Error(error); + } +}); +// let t_shirt = document.querySelector(".img_t") as HTMLImageElement; +// let shoes = document.querySelector(".img_s") as HTMLImageElement; +// let pants = document.querySelector(".img_p") as HTMLImageElement; +// const username = document.querySelector(".hello") as HTMLHeadElement; +// let usernameV = localStorage.getItem("input_name"); +// if (usernameV){ +// username.innerHTML =` Welcome ${usernameV} , how fun that you chose Shlomi clothes` ; +// } +// let count = 0; +// t_shirt.addEventListener("click", (e) => { +// count++; +// if (count === 1) { +// let ul_shirt = document.querySelector(".Shirt_list") as HTMLUListElement; +// for (let i = 0; i < 3; i++) { +// const List_shirt = document.createElement("li"); +// List_shirt.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; +// ul_shirt.appendChild(List_shirt); +// } +// } +// }); +// let count1 = 0; +// shoes.addEventListener("click", (e) => { +// count1++; +// if (count1 === 1) { +// let ul_shoes = document.querySelector(".shoes_list") as HTMLUListElement; +// for (let i = 3; i < 6; i++) { +// const shoes = document.createElement("li"); +// shoes.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; +// ul_shoes.appendChild(shoes); +// } +// } +// }); +// let count2 = 0; +// pants.addEventListener("click", (e) => { +// count2++; +// if (count2 === 1) { +// let ul_pants = document.querySelector(".pans_list") as HTMLUListElement; +// for (let i = 6; i < 9; i++) { +// const pants = document.createElement("li"); +// pants.innerHTML = `${cothingStore[i].type} The price is : ${cothingStore[i].price} `; +// ul_pants.appendChild(pants); +// } +// } +// }); +// const Item_search = document.querySelector(".Item_search") as HTMLInputElement; +// let ul_search = document.querySelector(".search_list") as HTMLUListElement; +// Item_search.addEventListener("keyup", (e) => { +// ul_search.replaceChildren(); +// if (Item_search.value != "") { +// for (let i in cothingStore) { +// debugger; +// if ( +// cothingStore[i].type.includes(Item_search.value.toLowerCase()) || +// cothingStore[i].price.toString().includes(Item_search.value) +// ) { +// const li_search = document.createElement("li"); +// li_search.innerHTML = `${cothingStore[i].type} : ${cothingStore[i].price}`; +// ul_search.appendChild(li_search); +// } +// } +// } else { +// ul_search.replaceChildren(); +// } +// }); +// } +// class Person { +// constructor(public name: string, public age: number, public gender: string) {} +// } +// const noam = new Person("noam", 33, "male"); +// const ruth = new Person("Ruth", 27, "female"); +// const dan = new Person("Dan", 41, "male"); +// /// we use lists to hold togther many elements +// const persons: Person[] = [noam, ruth, dan]; +// console.log(persons); +// console.log(persons[1]); +// console.log(persons.length); +// //sort +// persons.sort((a, b) => a.age - b.age); +// console.log(persons); +// //filter +// const personsAbove30: Person[] = persons.filter((person) => person.age > 30); +// console.log(personsAbove30); +// //callback +// function logPerson(person: Person) { +// console.log(person.name, person.age); +// } +// persons.forEach(logPerson); +// persons.forEach(function (person: Person) { +// console.log(person.name, person.age); +// }); +// console.log(persons.filter((person) => person.gender === "female")); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/mensPants.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/mensPants.js new file mode 100644 index 000000000..25c13e566 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/mensPants.js @@ -0,0 +1,3 @@ +// class MensPants { +// constructor(public type: string, public price: number) {} +// } diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/shoes.js b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/shoes.js new file mode 100644 index 000000000..d41837626 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/shoes.js @@ -0,0 +1,3 @@ +// class Shoes{ +// constructor(public type: string ,public price:number){} +// } diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/style.css new file mode 100644 index 000000000..dc1b17644 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/dist/style.css @@ -0,0 +1,121 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +body { + background-color: black; + margin-left: 100px; +} + +.inputWraps { + text-align: center; + position: relative; +} +.inputWraps input { + text-align: center; + font-size: 25px; + border-radius: 10px; + background-color: #aeaeae; + border: 2px white solid; + font-weight: bold; +} + +h1 { + border: none; + font-size: 45px; + text-align: center; + color: #f7b3b3; + font-family: "Lilita One", cursive; +} + +.userName { + border: none; + font-size: 45px; + text-align: center; + color: #f41e1e; + font-family: "Lilita One", cursive; +} + +.hello { + color: #c1f9f9; +} + +.wraps_pictures { + position: relative; + display: grid; + grid-template-columns: repeat(3, 0.5fr); + align-items: center; + gap: 20px; +} +.wraps_pictures div { + width: 400px; + height: 200px; + background-color: #a94343; + box-shadow: 8px 8px 10px #737373; +} +.wraps_pictures div p { + font-weight: bold; + font-size: xx-large; + color: white; + position: relative; + top: 120px; + left: 240px; +} +.wraps_pictures div a { + font-size: xx-large; + color: white; +} +.wraps_pictures div h2 { + font-weight: bold; + font-size: x-large; + color: white; + position: relative; + left: 220px; +} +.wraps_pictures div img { + position: absolute; + width: 200px; + height: 200px; + border-radius: 10px; + filter: drop-shadow(8px 8px 10px #030202); +} +.wraps_pictures div img:hover { + filter: opacity(20%); + border-color: black 2px solid; +} + +#a { + background-color: #9a9a9a; + border-radius: 30%; + color: white; + font-size: 100px; + position: relative; + left: 40%; + top: 30%; +} + +#a:hover { + background-color: brown; +} + +.AddItem { + width: 300px; + height: 300px; + text-align: center; + background-color: #080808; + border-radius: 10px; + position: absolute; + top: 30%; + left: 40%; + box-shadow: 8px 8px 10px #8b8989; + display: none; +} +.AddItem input { + margin-bottom: 28px; + border-radius: 5px; +} +.AddItem h3 { + text-align: center; + margin-top: 10px; + color: white; +} +.AddItem button:hover { + background-color: azure; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/index.html new file mode 100644 index 000000000..6f3c27934 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + Document + + +

              +

              Search for a product

              + +
              + +
              +


              + +
              +
              + +
              +
              +

              add item

              + + + +
              + +
              + ` + + + + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/style.css new file mode 100644 index 000000000..d51dada4f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/style.css @@ -0,0 +1,121 @@ +@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); +body { + background-color: rgb(0, 0, 0); + margin-left: 100px; +} + +.inputWraps { + text-align: center; + position: relative; +} +.inputWraps input { + text-align: center; + font-size: 25px; + border-radius: 10px; + background-color: rgb(174, 174, 174); + border: 2px white solid; + font-weight: bold; +} + +h1 { + border: none; + font-size: 45px; + text-align: center; + color: rgb(247, 179, 179); + font-family: "Lilita One", cursive; +} + +.userName { + border: none; + font-size: 45px; + text-align: center; + color: rgb(244, 30, 30); + font-family: "Lilita One", cursive; +} + +.hello { + color: rgb(193, 249, 249); +} + +.wraps_pictures { + position: relative; + display: grid; + grid-template-columns: repeat(3, 0.5fr); + align-items: center; + gap: 20px; +} +.wraps_pictures div { + width: 400px; + height: 200px; + background-color: rgb(169, 67, 67); + box-shadow: 8px 8px 10px rgb(115, 115, 115); +} +.wraps_pictures div p { + font-weight: bold; + font-size: xx-large; + color: white; + position: relative; + top: 120px; + left: 240px; +} +.wraps_pictures div a { + font-size: xx-large; + color: white; +} +.wraps_pictures div h2 { + font-weight: bold; + font-size: x-large; + color: white; + position: relative; + left: 220px; +} +.wraps_pictures div img { + position: absolute; + width: 200px; + height: 200px; + border-radius: 10px; + filter: drop-shadow(8px 8px 10px rgb(3, 2, 2)); +} +.wraps_pictures div img:hover { + filter: opacity(20%); + border-color: black 2px solid; +} + +#a { + background-color: rgb(154, 154, 154); + border-radius: 30%; + color: white; + font-size: 100px; + position: relative; + left: 40%; + top: 30%; +} + +#a:hover { + background-color: brown; +} + +.AddItem { + width: 300px; + height: 300px; + text-align: center; + background-color: rgb(8, 8, 8); + border-radius: 10px; + position: absolute; + top: 30%; + left: 40%; + box-shadow: 8px 8px 10px rgb(139, 137, 137); + display: none; +} +.AddItem input { + margin-bottom: 28px; + border-radius: 5px; +} +.AddItem h3 { + text-align: center; + margin-top: 10px; + color: white; +} +.AddItem button:hover { + background-color: azure; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/style.scss new file mode 100644 index 000000000..254fd405b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/Shlomo Azenkot/shop/style.scss @@ -0,0 +1,203 @@ + +@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap'); + +body{ + background-color: rgb(0, 0, 0); +margin-left: 100px; + +} +.inputWraps{ + text-align: center; + position: relative; + input{ + + text-align: center; + font-size: 25px; + border-radius: 10px; + background-color: rgb(174, 174, 174); + border: 2px white solid; + font-weight: bold; + + } +} + + +h1{ + + border: none; + font-size: 45px; + text-align: center; + color: rgb(247, 179, 179); + font-family: 'Lilita One', cursive; +} + +.userName{ + border: none; + font-size: 45px; + text-align: center; + color: rgb(244, 30, 30); + font-family: 'Lilita One', cursive; + +} + + +.hello{ + color: rgb(193, 249, 249); +} +.wraps_pictures{ +position: relative; + display: grid; + grid-template-columns: repeat(3, 0.5fr); + align-items: center; + gap:20px; + div{ + width: 400px; + height: 200px; + background-color: rgb(169, 67, 67); + box-shadow: (8px 8px 10px rgb(115, 115, 115)); + p{ + font-weight: bold; + font-size: xx-large; + color: white; + position: relative; + top: 120px; + left: 240px; + } + a{ + font-size: xx-large; + color: white; + } + + h2{ + font-weight: bold; + font-size: x-large; + color: white; + position: relative; + left: 220px; + } + img{ + + position: absolute; + width: 200px; + height: 200px; + border-radius: 10px; + filter: drop-shadow(8px 8px 10px rgb(3, 2, 2)); + // filter: opacity(20%); + } + + img:hover{ + filter: opacity(20%); + border-color: black 2px solid; + + + } + } + + + +} +#a{ +background-color: rgb(154, 154, 154); +border-radius: 30%; +color: white; +font-size:100px; +position: relative; +left: 40%; +top: 30%; +} +#a:hover{ +background-color:brown; +} + +.AddItem{ + width: 300px ; + height: 300px; + + text-align: center; + background-color: rgb(8, 8, 8); + border-radius: 10px; + position: absolute; + top: 30%; + left: 40%; + box-shadow: 8px 8px 10px rgb(139, 137, 137); + display: none; + + input{ + margin-bottom: 28px; + border-radius: 5px; + + } + h3{ + text-align: center; + margin-top: 10px; + color: white; + } + button:hover{ + background-color: azure; + + } + +} + + + + +// } +// img{ +// width: 200px; +// height: 200px; +// border-radius: 10px; +// filter: drop-shadow(8px 8px 10px gray); + +// } + +// + +// .ul{ +// display: flex; +// justify-content: space-evenly; +// margin-right: 80px; +// margin-left: 40px; +// li{ +// color: yellow; +// font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +// } + +// } +// li{ +// color: yellow; +// font-family: 'Lilita One', cursive; +// } +// // .Search{ +// // display: flex; + +// // } + + +// input{ +// margin-left: 28%; +// font-weight: bold; +// font-size: larger; +// border-radius: 5px; +// border: none ; +// box-shadow:8px 8px 10px gray ; +// background-color: rgb(244, 244, 244); +// } + +// .Search{ +// margin-left: 20%; +// label{ +// box-shadow: 5px 5px 2px rgb(86, 85, 85); +// margin-left: 40%; +// color: rgb(83, 233, 49); +// font-family: 'Lilita One', cursive; + +// } +// } + +// .search_list{ +// margin-left: 27%; +// } + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/app.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/app.ts new file mode 100644 index 000000000..ab1253a57 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/app.ts @@ -0,0 +1,304 @@ +class Product { + private name: string; + private price: number; + private department: string; + private type: string; + private imageLink: string; + + constructor( + price: number, + name: string, + department: string, + type: string, + imageLink: string + ) { + this.price = price; + this.name = name; + this.department = department; + this.type = type; + this.imageLink = imageLink; + } + + get getPrice() { + return this.price; + } + get getName() { + return this.name; + } + get getDepartment() { + return this.department; + } + get getType() { + return this.type; + } + get getImg() { + return this.imageLink; + } +} + +const products: Product[] = []; +const jordanShoes = new Product( + 389, + "Nike - Air Jordan 1", + "Shoes", + "Sneakers", + "https://media.restocks.net/products/DZ5485-612/jordan-1-retro-high-og-lost-and-found-1-1000.png" +); +const airmaxShoes = new Product( + 125, + "Nike - Air Max 91", + "Shoes", + "Sneakers", + "https://media.s-bol.com/J6JlELlBz2xl/1200x629.jpg" +); +const adidasShoes = new Product( + 75, + "Adidas - Stan Smith", + "Shoes", + "Sneakers", + "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/b47d77eba6f945ea8dabac210127b11e_9366/Stan_Smith_Schoenen_Wit_FX5501_01_standard.jpg" +); +const drMarten = new Product( + 150, + "Dr. Martens - 1460", + "Shoes", + "Boots", + "https://i1.adis.ws/i/drmartens/11822006.80.jpg?$medium$" +); +const timberland = new Product( + 220, + "Timberland - 6 Inch Premium", + "Shoes", + "Boots", + "https://images.timberland.com/is/image/TimberlandEU/10061713-hero?wid=720&hei=720&fit=constrain,1&qlt=85,1&op_usm=1,1,6,0" +); +const leviesJeans = new Product( + 85, + "Levi's - 511", + "Clothing", + "Jeans", + "https://img01.ztat.net/article/spp-media-p1/3dd6fc1c3d263f209ef9d81e2bfb6116/8865a86f997f47729d56c2244b206301.jpg?imwidth=1800&filter=packshot" +); +const jackAndJonesJeans = new Product( + 32, + "Jack & Jones - JJILIAM JJORIGINAL", + "Clothing", + "Jeans", + "https://img01.ztat.net/article/spp-media-p1/bc5317870cb84632b8db5ba16b6de51b/aefcfeb467fe4200bad48bc31bd585f3.jpg?imwidth=1800&filter=packshot" +); +const bershakaJeans = new Product( + 30, + "Bershaka - Vintage", + "Clothing", + "Jeans", + "https://img01.ztat.net/article/spp-media-p1/d06e3f7598754a6b92849caf976c11ad/19db75dbf2534f42b5ab879bc65c1d2e.jpg?imwidth=1800&filter=packshot" +); +const gStarShirt = new Product( + 40, + "G Star - Dunda", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/b988173c979739d6a7b56f9baa28a64d/688f149c136746a1b309a6ebe6b81ebc.jpg?imwidth=1800&filter=packshot" +); +const forsbergShirt = new Product( + 20, + "Forsberg - Stoltson", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/ee297c1e0c3f45f5807f5103937b80d8/104f8962e2f44417828e8ff8492227b9.jpg?imwidth=1800&filter=packshot" +); +const leviesShirt = new Product( + 22, + "Levi's - Original Tee", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/01c276157f394da5ab43da3d9256f8e4/b526407ff60e490f8e318812063f6b51.jpg?imwidth=1800&filter=packshot" +); +const tommyHilShirt = new Product( + 60, + "Tommy Hilfiger - Regular", + "Clothing", + "Shirt", + "https://img01.ztat.net/article/spp-media-p1/25fba27a171632689b1e9b0723884732/7a14e2a8b5c945059d7ae8c2051fae41.jpg?imwidth=1800&filter=packshot" +); + +products.push( + tommyHilShirt, + leviesShirt, + forsbergShirt, + gStarShirt, + bershakaJeans, + jackAndJonesJeans, + leviesJeans, + timberland, + drMarten, + adidasShoes, + jordanShoes, + airmaxShoes +); + +const filteredByType = (type: string, arr: Product[]): Product[] | false => { + try { + return arr.filter((ele) => ele.getType == type); + } catch (error) { + console.log(error); + return false; + } +}; + +const findCheapestItem = (arr: Product[]): Product | false => { + try { + return arr.reduce((prev, current) => + prev.getPrice < current.getPrice ? prev : current + ); + } catch (error) { + console.log(error); + return false; + } +}; + +const sortProductsByPrice = (arr: Product[]): Product[] | false => { + try { + return [...arr].sort((a, b) => a.getPrice - b.getPrice); + } catch (error) { + console.log(error); + return false; + } +}; + +const findProductName = (input: string, arr: Product[]): Product[] | false => { + try { + const filteredByString = arr.filter((ele) => + ele.getName.toLowerCase().includes(input) + ); + return filteredByString; + } catch (error) { + console.log(error); + return false; + } +}; + +// Created search app that displayes related products in real time +const searchInput = document.querySelector("#search") as HTMLInputElement; +const ulEl = document.querySelector(".displayedList") as HTMLUListElement; +const openFormBtn = document.querySelector( + ".addNewItemForm" +) as HTMLButtonElement; + +const newItemPrice = document.querySelector( + ".newItemPrice" +) as HTMLInputElement; +const newItemName = document.querySelector(".newItemName") as HTMLInputElement; +const newItemDepartment = document.querySelector( + ".newItemDepartment" +) as HTMLInputElement; +const newItemType = document.querySelector(".newItemType") as HTMLInputElement; +const newItemLink = document.querySelector(".newItemLink") as HTMLInputElement; + +const urlRegex = new RegExp( + /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/ +); +const addItemForm = document.querySelector(".addItemForm") as HTMLFormElement; + +// render items to screen when page is loaded for the first time +displayItems(products); + +searchInput.addEventListener("keyup", () => { + try { + if (searchInput.value != "") { + ulEl.replaceChildren(); + const listToDisplay: Product[] | boolean = findProductName( + searchInput.value, + products + ); + if (listToDisplay !== false) { + displayItems(listToDisplay); + } + } else { + displayItems(products); + } + } catch (error) { + console.log(error); + } +}); + +openFormBtn.addEventListener("click", () => { + try { + addItemForm.style.transform = "translateY(0)"; + } catch (error) { + console.log(error); + } +}); + +addItemForm.addEventListener("submit", submitForm); + +function displayItems(arr: Product[]) { + try { + ulEl.replaceChildren(); + arr.forEach((ele) => { + const li = document.createElement("li") as HTMLElement; + const img = document.createElement("img") as HTMLImageElement; + img.src = ele.getImg; + li.textContent = ele.getName; + li.append(img); + ulEl.append(li); + }); + } catch (error) { + console.log(error); + } +} + +function submitForm(e: Event) { + //Preventing page from refrashing affter submiting form + e.preventDefault(); + + const priceValue = parseFloat(newItemPrice.value); + const nameValue = newItemName.value; + const departmentValue = newItemDepartment.value; + const typeValue = newItemType.value; + const linkValue = newItemLink.value; + doesImageExist(linkValue) + .then((res) => { + if ( + nameValue.length > 6 && + res && + priceValue && + departmentValue && + typeValue + ) { + const newItem = new Product( + priceValue, + nameValue, + departmentValue, + typeValue, + linkValue + ); + products.unshift(newItem); + displayItems(products); + addItemForm.style.transform = "translateY(-100vh)"; + newItemPrice.value = ""; + newItemName.value = ""; + newItemDepartment.value = ""; + newItemType.value = ""; + newItemLink.value = ""; + } else { + alert("Fill in all the info correctly."); + } + }) + .catch(() => console.log('not real img')); +} + +// trying something (not working yet) +const doesImageExist = (url: string) => { + return new Promise((resolve, reject) => { + const img = new Image(); + + img.src = url; + img.onerror = () => resolve(false); + img.onload = () => resolve(true); + }); +}; + +// doesImageExist( +// "https://img01.ztat.net/article/spp-media-p1/d5e1e146adfb350dbd5165d561870b55/b3085171bfa240aba35322de6f8a1e66.jpg?imwidth=1800&filter=packshot" +// ); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/dist/app.js b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/dist/app.js new file mode 100644 index 000000000..620250275 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/dist/app.js @@ -0,0 +1,204 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +var Product = /** @class */ (function () { + function Product(price, name, department, type, imageLink) { + this.price = price; + this.name = name; + this.department = department; + this.type = type; + this.imageLink = imageLink; + } + Object.defineProperty(Product.prototype, "getPrice", { + get: function () { + return this.price; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getName", { + get: function () { + return this.name; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getDepartment", { + get: function () { + return this.department; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getType", { + get: function () { + return this.type; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(Product.prototype, "getImg", { + get: function () { + return this.imageLink; + }, + enumerable: false, + configurable: true + }); + return Product; +}()); +var products = []; +var jordanShoes = new Product(389, "Nike - Air Jordan 1", "Shoes", "Sneakers", "https://media.restocks.net/products/DZ5485-612/jordan-1-retro-high-og-lost-and-found-1-1000.png"); +var airmaxShoes = new Product(125, "Nike - Air Max 91", "Shoes", "Sneakers", "https://media.s-bol.com/J6JlELlBz2xl/1200x629.jpg"); +var adidasShoes = new Product(75, "Adidas - Stan Smith", "Shoes", "Sneakers", "https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/b47d77eba6f945ea8dabac210127b11e_9366/Stan_Smith_Schoenen_Wit_FX5501_01_standard.jpg"); +var drMarten = new Product(150, "Dr. Martens - 1460", "Shoes", "Boots", "https://i1.adis.ws/i/drmartens/11822006.80.jpg?$medium$"); +var timberland = new Product(220, "Timberland - 6 Inch Premium", "Shoes", "Boots", "https://images.timberland.com/is/image/TimberlandEU/10061713-hero?wid=720&hei=720&fit=constrain,1&qlt=85,1&op_usm=1,1,6,0"); +var leviesJeans = new Product(85, "Levi's - 511", "Clothing", "Jeans", "https://img01.ztat.net/article/spp-media-p1/3dd6fc1c3d263f209ef9d81e2bfb6116/8865a86f997f47729d56c2244b206301.jpg?imwidth=1800&filter=packshot"); +var jackAndJonesJeans = new Product(32, "Jack & Jones - JJILIAM JJORIGINAL", "Clothing", "Jeans", "https://img01.ztat.net/article/spp-media-p1/bc5317870cb84632b8db5ba16b6de51b/aefcfeb467fe4200bad48bc31bd585f3.jpg?imwidth=1800&filter=packshot"); +var bershakaJeans = new Product(30, "Bershaka - Vintage", "Clothing", "Jeans", "https://img01.ztat.net/article/spp-media-p1/d06e3f7598754a6b92849caf976c11ad/19db75dbf2534f42b5ab879bc65c1d2e.jpg?imwidth=1800&filter=packshot"); +var gStarShirt = new Product(40, "G Star - Dunda", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/b988173c979739d6a7b56f9baa28a64d/688f149c136746a1b309a6ebe6b81ebc.jpg?imwidth=1800&filter=packshot"); +var forsbergShirt = new Product(20, "Forsberg - Stoltson", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/ee297c1e0c3f45f5807f5103937b80d8/104f8962e2f44417828e8ff8492227b9.jpg?imwidth=1800&filter=packshot"); +var leviesShirt = new Product(22, "Levi's - Original Tee", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/01c276157f394da5ab43da3d9256f8e4/b526407ff60e490f8e318812063f6b51.jpg?imwidth=1800&filter=packshot"); +var tommyHilShirt = new Product(60, "Tommy Hilfiger - Regular", "Clothing", "Shirt", "https://img01.ztat.net/article/spp-media-p1/25fba27a171632689b1e9b0723884732/7a14e2a8b5c945059d7ae8c2051fae41.jpg?imwidth=1800&filter=packshot"); +products.push(tommyHilShirt, leviesShirt, forsbergShirt, gStarShirt, bershakaJeans, jackAndJonesJeans, leviesJeans, timberland, drMarten, adidasShoes, jordanShoes, airmaxShoes); +var filteredByType = function (type, arr) { + try { + return arr.filter(function (ele) { return ele.getType == type; }); + } + catch (error) { + console.log(error); + return false; + } +}; +var findCheapestItem = function (arr) { + try { + return arr.reduce(function (prev, current) { + return prev.getPrice < current.getPrice ? prev : current; + }); + } + catch (error) { + console.log(error); + return false; + } +}; +var sortProductsByPrice = function (arr) { + try { + return __spreadArrays(arr).sort(function (a, b) { return a.getPrice - b.getPrice; }); + } + catch (error) { + console.log(error); + return false; + } +}; +var findProductName = function (input, arr) { + try { + var filteredByString = arr.filter(function (ele) { + return ele.getName.toLowerCase().includes(input); + }); + return filteredByString; + } + catch (error) { + console.log(error); + return false; + } +}; +// Created search app that displayes related products in real time +var searchInput = document.querySelector("#search"); +var ulEl = document.querySelector(".displayedList"); +var openFormBtn = document.querySelector(".addNewItemForm"); +var newItemPrice = document.querySelector(".newItemPrice"); +var newItemName = document.querySelector(".newItemName"); +var newItemDepartment = document.querySelector(".newItemDepartment"); +var newItemType = document.querySelector(".newItemType"); +var newItemLink = document.querySelector(".newItemLink"); +var urlRegex = new RegExp(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/); +var addItemForm = document.querySelector(".addItemForm"); +// render items to screen when page is loaded for the first time +displayItems(products); +searchInput.addEventListener("keyup", function () { + try { + if (searchInput.value != "") { + ulEl.replaceChildren(); + var listToDisplay = findProductName(searchInput.value, products); + if (listToDisplay !== false) { + displayItems(listToDisplay); + } + } + else { + displayItems(products); + } + } + catch (error) { + console.log(error); + } +}); +openFormBtn.addEventListener("click", function () { + try { + addItemForm.style.transform = "translateY(0)"; + } + catch (error) { + console.log(error); + } +}); +addItemForm.addEventListener("submit", submitForm); +function displayItems(arr) { + try { + ulEl.replaceChildren(); + arr.forEach(function (ele) { + var li = document.createElement("li"); + var img = document.createElement("img"); + img.src = ele.getImg; + li.textContent = ele.getName; + li.append(img); + ulEl.append(li); + }); + } + catch (error) { + console.log(error); + } +} +function submitForm(e) { + //Preventing page from refrashing affter submiting form + e.preventDefault(); + var priceValue = parseFloat(newItemPrice.value); + var nameValue = newItemName.value; + var departmentValue = newItemDepartment.value; + var typeValue = newItemType.value; + var linkValue = newItemLink.value; + doesImageExist(linkValue) + .then(function (res) { + if (nameValue.length > 6 && + res && + priceValue && + departmentValue && + typeValue) { + var newItem = new Product(priceValue, nameValue, departmentValue, typeValue, linkValue); + products.unshift(newItem); + displayItems(products); + addItemForm.style.transform = "translateY(-100vh)"; + newItemPrice.value = ""; + newItemName.value = ""; + newItemDepartment.value = ""; + newItemType.value = ""; + newItemLink.value = ""; + } + else { + alert("Fill in all the info correctly."); + } + })["catch"](function () { return console.log('not real img'); }); +} +// trying something (not working yet) +var doesImageExist = function (url) { + return new Promise(function (resolve, reject) { + var img = new Image(); + img.src = url; + img.onerror = function () { return resolve(false); }; + img.onload = function () { return resolve(true); }; + }); +}; +// doesImageExist( +// "https://img01.ztat.net/article/spp-media-p1/d5e1e146adfb350dbd5165d561870b55/b3085171bfa240aba35322de6f8a1e66.jpg?imwidth=1800&filter=packshot" +// ); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/dist/style.css new file mode 100644 index 000000000..e239bc954 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/dist/style.css @@ -0,0 +1,83 @@ +* { + margin: 0; + padding: 0; +} + +body { + max-width: 100vw; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + font-size: 1.2rem; +} + +.inputArea { + width: 95%; + height: 3rem; + display: flex; + justify-content: center; + align-items: center; +} +.inputArea input { + padding: 0.2em; + width: 15vw; + min-width: 200px; + font-size: 1.1rem; + border: 1px solid rgba(0, 0, 0, 0.165); + margin-right: 20vw; +} +.inputArea .addNewItemForm { + padding: 0.5em; + background-color: darkorange; + border: 1px solid rgba(0, 0, 0, 0.634); + border-radius: 5px; +} +.inputArea .addNewItemForm:hover { + cursor: pointer; +} +.inputArea .addNewItemForm:active { + transform: scale(0.9); +} + +.displayedList { + margin-top: 2rem; + max-width: 80%; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} +.displayedList li { + border: 1px solid rgba(0, 0, 0, 0.386); + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px; + height: 20vh; +} +.displayedList li img { + width: 30%; +} + +.addItemForm { + position: absolute; + transform: translateY(-500vh); + transition: all 0.5s; + top: 10%; + padding: 2em; + background-color: darkorange; + border-radius: 20px; + box-shadow: 0 0 100px black; + display: flex; + flex-direction: column; +} +.addItemForm h2 { + margin-bottom: 1em; + text-align: center; +} +.addItemForm input { + margin-bottom: 1em; + outline: none; + width: 20vw; + min-width: 250px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/index.html new file mode 100644 index 000000000..1a93449cc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/index.html @@ -0,0 +1,63 @@ + + + + + + + Product List + + + +
              + + + +
              +
              +

              Add new Item

              + + + + + + + + + + + +
              +
                + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/style.css new file mode 100644 index 000000000..e239bc954 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/style.css @@ -0,0 +1,83 @@ +* { + margin: 0; + padding: 0; +} + +body { + max-width: 100vw; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + font-size: 1.2rem; +} + +.inputArea { + width: 95%; + height: 3rem; + display: flex; + justify-content: center; + align-items: center; +} +.inputArea input { + padding: 0.2em; + width: 15vw; + min-width: 200px; + font-size: 1.1rem; + border: 1px solid rgba(0, 0, 0, 0.165); + margin-right: 20vw; +} +.inputArea .addNewItemForm { + padding: 0.5em; + background-color: darkorange; + border: 1px solid rgba(0, 0, 0, 0.634); + border-radius: 5px; +} +.inputArea .addNewItemForm:hover { + cursor: pointer; +} +.inputArea .addNewItemForm:active { + transform: scale(0.9); +} + +.displayedList { + margin-top: 2rem; + max-width: 80%; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} +.displayedList li { + border: 1px solid rgba(0, 0, 0, 0.386); + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px; + height: 20vh; +} +.displayedList li img { + width: 30%; +} + +.addItemForm { + position: absolute; + transform: translateY(-500vh); + transition: all 0.5s; + top: 10%; + padding: 2em; + background-color: darkorange; + border-radius: 20px; + box-shadow: 0 0 100px black; + display: flex; + flex-direction: column; +} +.addItemForm h2 { + margin-bottom: 1em; + text-align: center; +} +.addItemForm input { + margin-bottom: 1em; + outline: none; + width: 20vw; + min-width: 250px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/style.scss new file mode 100644 index 000000000..e4e33daaa --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/VladiBykanovHW/style.scss @@ -0,0 +1,85 @@ +* { + margin: 0; + padding: 0; +} + +body { + max-width: 100vw; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + // justify-content: space-around; + font-size: 1.2rem; +} + +.inputArea { + width: 95%; + height: 3rem; + display: flex; + justify-content: center; + align-items: center; + input { + padding: 0.2em; + width: 15vw; + min-width: 200px; + font-size: 1.1rem; + border: 1px solid rgba(0, 0, 0, 0.165); + margin-right: 20vw; + } + .addNewItemForm { + padding: 0.5em; + background-color: darkorange; + border: 1px solid rgba(0, 0, 0, 0.634); + border-radius: 5px; + } + .addNewItemForm:hover { + cursor: pointer; + } + .addNewItemForm:active { + // background-color: red; + transform: scale(0.9); + } +} + +.displayedList { + margin-top: 2rem; + max-width: 80%; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + li { + border: 1px solid rgba(0, 0, 0, 0.386); + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px; + height: 20vh; + img { + width: 30%; + } + } +} + +.addItemForm { + position: absolute; + transform: translateY(-500vh); + transition: all .5s; + top: 10%; + padding: 2em; + background-color: darkorange; + border-radius: 20px; + box-shadow: 0 0 100px black; + display: flex; + flex-direction: column; + h2 { + margin-bottom: 1em; + text-align: center; + } + input { + margin-bottom: 1em; + outline: none; + width: 20vw; + min-width: 250px; + } +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/dist/index.css b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/dist/index.css new file mode 100644 index 000000000..9235d4b1d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/dist/index.css @@ -0,0 +1,118 @@ +body { + margin: 0; +} + +.header { + width: 100vw; + height: 6rem; + background-color: #9e9ed6; + position: sticky; + top: 0; + display: flex; + align-items: center; +} +.header__icon { + height: 70%; + color: white; + width: 10rem; + display: flex; + justify-content: center; + align-items: center; + font-size: x-large; + margin-left: 2rem; + font-family: "Lobster", cursive; +} +.header__icon--img { + height: 100%; + width: 50%; + margin-right: 1rem; +} +.header__icon--img img { + height: 100%; + width: 100%; +} +.header__searchBar { + height: 30%; + width: 60%; +} +.header__searchBar input { + height: 100%; + width: 100%; + padding-left: 2rem; +} +.header__searchBar i { + position: absolute; + bottom: 2rem; + font-size: x-large; + margin-left: 0.5rem; +} +.header__rightBar { + width: 20%; + height: 40%; + display: flex; + margin-left: 3rem; + display: flex; + align-items: baseline; + color: white; + justify-content: space-around; +} +.header__rightBar button { + background-color: navy; + color: white; + border-radius: 20%; + border: none; + height: 120%; + position: relative; + bottom: 0.2rem; + cursor: pointer; +} +.header__rightBar i { + color: #b30000; + margin-right: -0.5rem; + font-size: larger; + font-weight: bolder; +} +.header__rightBar p { + border-right: 1px solid grey; +} +.header__rightBar--popup { + width: 50rem; + background-color: #f4d4d4; + border-radius: 20px; + position: absolute; + top: 0; + left: 45rem; + transform: translate(-50%, -50%) scale(0.1); + padding: 1rem 1rem 1rem 1rem; + visibility: hidden; + transition: transform 0.4s, top 0.4s; +} +.header__rightBar--popup input { + padding: 0.2rem; +} +.header__rightBar--popup span { + position: relative; + bottom: 1.2rem; + right: 11rem; + padding: 0.2rem; + pointer-events: none; + color: black; +} +.header__rightBar--popup h2 { + margin-top: 0; +} +.header__rightBar--popup p { + border: none; +} +.header__rightBar--popup button { + width: 5rem; + height: 2rem; + border-radius: 10px; + font-size: larger; +} + +.open-popup { + visibility: visible; + top: 12rem; + transform: translate(-50%, -50%) scale(1); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/dist/index.js new file mode 100644 index 000000000..1de97a210 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/dist/index.js @@ -0,0 +1,22 @@ +var popUp = document.querySelector("#popup"); +function openPopup() { + popUp === null || popUp === void 0 ? void 0 : popUp.classList.add("open-popup"); +} +function closePopup() { + popUp === null || popUp === void 0 ? void 0 : popUp.classList.remove("open-popup"); +} +openPopup(); +closePopup(); +var books = /** @class */ (function () { + function books(bookTitle, price, catagory, auther, image) { + this.bookTitle = bookTitle; + this.price = price; + this.catagory = catagory; + this.auther = auther; + this.image = image; + } + return books; +}()); +var items = []; +var you = new items("You", 46.21, "crime", " Caroline Kepnes", "https://d1w7fb2mkkr3kw.cloudfront.net/assets/images/book/lrg/9781/4711/9781471137372.jpg"); +console.log(items); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.css b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.css new file mode 100644 index 000000000..e154a0097 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.css @@ -0,0 +1,119 @@ +body { + margin: 0; +} + +.header { + width: 100vw; + height: 6rem; + background-color: rgb(158, 158, 214); + position: -webkit-sticky; + position: sticky; + top: 0; + display: flex; + align-items: center; +} +.header__icon { + height: 70%; + color: white; + width: 10rem; + display: flex; + justify-content: center; + align-items: center; + font-size: x-large; + margin-left: 2rem; + font-family: "Lobster", cursive; +} +.header__icon--img { + height: 100%; + width: 50%; + margin-right: 1rem; +} +.header__icon--img img { + height: 100%; + width: 100%; +} +.header__searchBar { + height: 30%; + width: 60%; +} +.header__searchBar input { + height: 100%; + width: 100%; + padding-left: 2rem; +} +.header__searchBar i { + position: absolute; + bottom: 2rem; + font-size: x-large; + margin-left: 0.5rem; +} +.header__rightBar { + width: 20%; + height: 40%; + display: flex; + margin-left: 3rem; + display: flex; + align-items: baseline; + color: white; + justify-content: space-around; +} +.header__rightBar button { + background-color: navy; + color: white; + border-radius: 20%; + border: none; + height: 120%; + position: relative; + bottom: 0.2rem; + cursor: pointer; +} +.header__rightBar i { + color: rgb(179, 0, 0); + margin-right: -0.5rem; + font-size: larger; + font-weight: bolder; +} +.header__rightBar p { + border-right: 1px solid grey; +} +.header__rightBar--popup { + width: 50rem; + background-color: rgb(244, 212, 212); + border-radius: 20px; + position: absolute; + top: 0; + left: 45rem; + transform: translate(-50%, -50%) scale(0.1); + padding: 1rem 1rem 1rem 1rem; + visibility: hidden; + transition: transform 0.4s, top 0.4s; +} +.header__rightBar--popup input { + padding: 0.2rem; +} +.header__rightBar--popup span { + position: relative; + bottom: 1.2rem; + right: 11rem; + padding: 0.2rem; + pointer-events: none; + color: black; +} +.header__rightBar--popup h2 { + margin-top: 0; +} +.header__rightBar--popup p { + border: none; +} +.header__rightBar--popup button { + width: 5rem; + height: 2rem; + border-radius: 10px; + font-size: larger; +} + +.open-popup { + visibility: visible; + top: 12rem; + transform: translate(-50%, -50%) scale(1); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.html new file mode 100644 index 000000000..b04811a37 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.html @@ -0,0 +1,49 @@ + + + + + + + book nook + + + + + + + + +
                +
                +
                + +
                + book nook +
                +
                + + +
                +
                + +
                +

                Advance search

                +

                please enter one of the field below to start a search

                + + Category + + Author + + price + +
                +

                wishlist

                +

                sign out

                +

                my account

                +
                + +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.scss new file mode 100644 index 000000000..3d60f384a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.scss @@ -0,0 +1,127 @@ +body{ + margin: 0; +} +.header{ + width: 100vw; + height: 6rem; + background-color: rgb(158, 158, 214); + position: sticky; + top: 0; + display: flex; + align-items: center; + + &__icon{ + height: 70%; + color: white; + width: 10rem; + display: flex; + justify-content: center; + align-items: center; + font-size: x-large; + margin-left: 2rem; + font-family: 'Lobster', cursive; + + &--img{ + height: 100%; + width: 50%; + margin-right: 1rem; + + img{ + height: 100%; + width: 100%; + } + } + } + &__searchBar{ + height: 30%; + width: 60%; + + input{ + height: 100%; + width: 100%; + + padding-left: 2rem; + + } + i{ + position: absolute; + bottom:2rem; + font-size: x-large; + margin-left: 0.5rem; + } + } + + &__rightBar{ + width: 20%; + height:40%; + display: flex; + margin-left: 3rem; + display: flex; + align-items: baseline; + color: white; + justify-content: space-around; + button{ + background-color: navy; + color: white; + border-radius: 20%; + border: none; + height: 120%; + position: relative; + bottom: 0.2rem; + cursor: pointer; + } + i{ + color: rgb(179, 0, 0); + margin-right: -0.5rem; + font-size: larger; + font-weight: bolder; + } + p{ + border-right:1px solid grey ; + } + + &--popup{ + width: 50rem; + background-color: rgb(244, 212, 212); + border-radius: 20px; + position:absolute; + top: 0; + left: 45rem; + transform: translate(-50%,-50%) scale(0.1); + padding: 1rem 1rem 1rem 1rem; + visibility: hidden; + transition: transform 0.4s , top 0.4s; + + input{ + padding: 0.2rem; + } + span{ + position: relative; + bottom:1.2rem; + right: 11rem; + padding:0.2rem; + pointer-events: none; + color: black; + } + h2{ + margin-top:0; + } + p{ + border: none; + } + button{ + width: 5rem; + height: 2rem; + border-radius: 10px; + font-size: larger; + } + } + } + } + + +.open-popup{ + visibility: visible; + top: 12rem; + transform: translate(-50%,-50%) scale(1); +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.ts new file mode 100644 index 000000000..07a98411f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/index.ts @@ -0,0 +1,33 @@ +let popUp:HTMLDivElement | null = document.querySelector("#popup"); + +function openPopup(){ + popUp?.classList.add("open-popup"); + +} +function closePopup(){ + popUp?.classList.remove("open-popup"); + +} +openPopup(); +closePopup(); + +class books{ + + constructor( + public bookTitle:string, + public price:number, + public catagory:string, + public auther:string, + public image:string, + ){} +} +const items:books[]=[]; +const you = new items( + "You", + 46.21, + "crime", + " Caroline Kepnes", + "https://d1w7fb2mkkr3kw.cloudfront.net/assets/images/book/lrg/9781/4711/9781471137372.jpg" +) + +console.log(items); \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/angela/task.txt b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/task.txt new file mode 100644 index 000000000..46b23e81a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/angela/task.txt @@ -0,0 +1,22 @@ +const img:HTMLDivElement | null = document.querySelector(".imgBox"); + +const addImg=[]; + + +function addPrompt(){ + for(let a = 0 ; a < 5; a++){ + let pr = prompt("enter an url"); + + if (!pr || pr=== null) { + alert("please enter a vail url"); + } else { + img?.innerHTML=`
                + +
                `; + const count =addImg.push(pr); + + } + } +} +addPrompt() +console.log(addImg) \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/dist/index.js new file mode 100644 index 000000000..367bf38dc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/dist/index.js @@ -0,0 +1,28 @@ +var imag = document.querySelector(".imag"); +var UsersPhoto = /** @class */ (function () { + function UsersPhoto(PhotoAddress) { + this.PhotoAddress = PhotoAddress; + } + return UsersPhoto; +}()); +function pushToArrayPhoto() { + try { + var arrayPhoto = []; + for (var i = 0; i < 5; i++) { + var PhotoAddress = prompt("enter a photo address please"); + if (PhotoAddress && imag) { + var userPhoto = new UsersPhoto(PhotoAddress); + arrayPhoto.push(userPhoto); + imag.innerHTML += ""; + } + else { + alert("you did not enter a photo address"); + } + } + } + catch (error) { + console.error(error); + return false; + } +} +pushToArrayPhoto(); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/dist/style.css new file mode 100644 index 000000000..3da1df8bd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/dist/style.css @@ -0,0 +1,15 @@ +body { + margin: 0; +} + +.imag { + width: 400px; + height: 300px; + padding: 25px; + display: flex; + flex-direction: column; + gap: 25px; +} +.imag img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/index.html new file mode 100644 index 000000000..f69d2b230 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + + + + + +

                your photos + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/index.ts new file mode 100644 index 000000000..7896bd3ee --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/index.ts @@ -0,0 +1,42 @@ + + + const imag: HTMLDivElement |null = document.querySelector(".imag"); +class UsersPhoto{ + constructor(public PhotoAddress:String){} +} + + +function pushToArrayPhoto(){ + try { + const arrayPhoto:Array =[]; + for(let i=0; i< 5 ;i++){ + let PhotoAddress=prompt("enter a photo address please") + if(PhotoAddress&&imag){ + const userPhoto=new UsersPhoto(PhotoAddress) + arrayPhoto.push(userPhoto) + imag.innerHTML+=`` + + } + else{ + alert("you did not enter a photo address") + } + } + } catch (error) { + console.error(error) + return false + + } + } +pushToArrayPhoto() + + + + + + + + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/style.css new file mode 100644 index 000000000..3da1df8bd --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/style.css @@ -0,0 +1,15 @@ +body { + margin: 0; +} + +.imag { + width: 400px; + height: 300px; + padding: 25px; + display: flex; + flex-direction: column; + gap: 25px; +} +.imag img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/style.scss new file mode 100644 index 000000000..40d594389 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task -2/style.scss @@ -0,0 +1,20 @@ +body{ + margin: 0; +} + +.imag{ + width: 400px; + height: 300px; + padding: 25px; + display:flex; + flex-direction: column; + gap: 25px; + + + img{ + width: 100%; + + + } +} + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/dist/index.js new file mode 100644 index 000000000..06d43aef6 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/dist/index.js @@ -0,0 +1,71 @@ +var ClothingShope = /** @class */ (function () { + function ClothingShope(title, price, department, type, photoAddress) { + this.title = title; + this.price = price; + this.department = department; + this.type = type; + this.photoAddress = photoAddress; + } + return ClothingShope; +}()); +var Raincoat = new ClothingShope("pink raincoat", 50, "women", "coat", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxeycsZzI9Rvq4FF6nLk0vPPrrX6TbSUtVGw&usqp=CAU"); +var highBoots = new ClothingShope("blue high boots", 100, "women", "shoe", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM1opv1rUC3uW386asrH_hBipjt_yAs17H7rqVTQkxqlW2JveeavLgtuF91ATRAT8aD-Y&usqp=CAU"); +var sweatSuit = new ClothingShope("adidas black sweat suit", 70, "men", "suit", "data:image/jpeg;base64,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"); +var tShirt = new ClothingShope("red T-shirt", 40, "women", "shirt", "data:image/jpeg;base64,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"); +var longShirt = new ClothingShope("yello long shirt", 40, "men", "shirt", "data:image/jpeg;base64,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"); +var jeans = new ClothingShope("levis jeans 501", 80, "men", "trousers", "data:image/jpeg;base64,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"); +var leatherJacket = new ClothingShope("leather jacket", 120, "men", "jacket", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjjU9tn0RZF34detVQYwv5yrKOvXaUM2bV33mWHyCRBQCgUvQuAoKWsYnJxNLsqsLADp4&usqp=CAU"); +var clothing = [Raincoat, highBoots, sweatSuit, tShirt, longShirt, jeans, leatherJacket]; +var menDipartment = clothing.filter(function (cloth) { return cloth.department === "men"; }); +menDipartment.sort(function (a, b) { return a.price - b.price; }); +var womenDipartment = clothing.filter(function (cloths) { return cloths.department === "women"; }); +womenDipartment.sort(function (a, b) { return a.price - b.price; }); +function getItem(item) { + alert(item.title + " cost " + item.price); +} +//function whatIsPrice(items:ClothingShope){ +//alert(`${items.price}`) +//} +var womenChoose; +function getPhoto(womenChoose) { + for (var i = 0; i < womenDipartment.length; i++) { + if (womenChoose === womenDipartment[i].title) { + return womenDipartment[i].photoAddress; + } + } +} +console.log(getPhoto("blue high boots")); +function ChooseItem() { + try { + alert('welcome to the clothig shope'); + var userChoose = prompt('please enter department:women or men '); + if (userChoose === "women") { + alert("those are the item we have"); + womenDipartment.forEach(getItem); + var womenChoose_1 = prompt('what item would you like?'); + if (womenChoose_1) { + var clothingItems = document.querySelector("clothing-items"); + if (clothingItems) { + clothingItems.innerHTML = ""; + } + } + } + else if (userChoose === "men") { + alert("those are the item we have"); + var manChoose = prompt('what item would you like?'); + if (manChoose) { + alert("those are the item we have"); + menDipartment.forEach(getItem); + var menCoose = prompt('what item would you like?'); + for (var i = 0; i < menDipartment.length; i++) { + return menDipartment[i].price; + } + } + } + } + catch (error) { + console.error(error); + return false; + } +} +ChooseItem(); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/dist/style.css new file mode 100644 index 000000000..0ce40ef90 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/dist/style.css @@ -0,0 +1,9 @@ +.clothing-items { + height: 250px; + width: 1000px; + display: flex; + flex-direction: row; + gap: 25px; + justify-content: space-between; + padding: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/index.html new file mode 100644 index 000000000..2a30a26dc --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/index.ts new file mode 100644 index 000000000..16059f4d0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/index.ts @@ -0,0 +1,79 @@ +class ClothingShope { + constructor(public title: string, public price: number, public department: string, public type: string, public photoAddress:string) { } + + + +} + + + +const Raincoat = new ClothingShope("pink raincoat", 50, "women", "coat","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxeycsZzI9Rvq4FF6nLk0vPPrrX6TbSUtVGw&usqp=CAU"); +const highBoots = new ClothingShope("blue high boots", 100, "women", "shoe","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM1opv1rUC3uW386asrH_hBipjt_yAs17H7rqVTQkxqlW2JveeavLgtuF91ATRAT8aD-Y&usqp=CAU") +const sweatSuit = new ClothingShope("adidas black sweat suit", 70, "men", "suit","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYVFRIVFRUYFRUaEhgSHBgYGBgRFBUaGBgZGhgYGBocIS4lHB4rIxgZJjonKy8xNTU1HCQ7QDs0Py40NTEBDAwMEA8QGBERGjEdGCE0NDE/MUAxMTExMTQxNDQ0PzExMTExPz80MTE0NjE0NDQ0MTExMT8xNDE1MTE0MTExMf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAAAQIDBQYHBAj/xABFEAACAQIDBAcDCAcHBQEAAAABAgADEQQSIQUGMUEHEyJRYXGBkaGxFDJygpKiwfAjQlJTYrLhJDNDc8LR8VRVdJOzNP/EABkBAQEBAQEBAAAAAAAAAAAAAAABAgQDBf/EABwRAQEBAQADAQEAAAAAAAAAAAABAhEDITESIv/aAAwDAQACEQMRAD8A6xERKhERAREQEREBERATT96sAEcV1GjnK/g4GjeoFvTxm4TBb602OCrlBmZMlXLa5ZUdWcL45Q1vGY1nsemNfnUrStj4kLiGZ2CgqRcm1724TaMHilcGzA624jWaItIVslVSHvYqD80A87DifObDgsCGsbgEW0RAnDhrxE5q7vs6z1VZ4qe9OHwbrSxDFBVLMr2ui5cqkMRw4jXhLtavl+kdAJz7pRphjhVvqoqZu+xyH3lZrx3+nj5fea7cpB1BuDqCNQR3iTPFsRMuGwy91CmPuCe2dTjIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICJSzAAkkAAXJOgA7yZrO1d7UQHqV6wXy9awKUL8gmmasxvYBARfmIGy1qyopZ2CKOJYhQPUzSN6ekOjRpVPk6tXf+7zAZKSMwPzmPEjjYDXvE1nbW8Ku39pxNPP+7y1K+TvBp0SEU+DO3jNW23tvCujKi1Kz5MiM6pQo0OGtOmmt9OcivNu5vAaDFXu1NmLGw1VidSAOR7hN6p794ZBZXPC/zWsPPScmpseFwPSXUUgNfUkEX7tLcPWY145b1658upON+xu/iXJpoXe2jNoB5AXmpYnGvVcvUbMzHmb/APA8JjkUW1l5E52AlzmZ+M63dfXdNzd9VxSsKlPqWD9WhXM1J7KDYMRYMNez3azcVNwCNQdQRqD5TjmxdsYEU1RKxwjlQr066Ni8JWK27bWsUbxUrbTum07K2g6m9B0qA6laVVcXTPjkJFVfvmbY43uJhcBt9HOV1NNra3vlH0gwDJ9YCZlTfUajvGohExEQEREBERAREQEREBERAREQEREBKKjhVLMQFAJJOgAHEyuab0i7Z6mkqDi16jDgSqlQF9WdB5Xga9vjvUCwDu60z2kooqtUca2d8/ZVe7Nm4aLpeaNtTeZmVhTpFGbs9c9V8RXCnQhC1lp34dkCYvEV2d2d2zOW1PiPgLW08JaYds9wUQ08bJawtK1p98vumYw9M8oFjq7eIlaHl6eMkUzL6Uwtu+4v7RAimnhcy51d+PskCVhfGURkUcpAYAgroQbgjQjyIlVogZzAb3YlAq1D8pQcFq3Z1+hVHbQ+IM3Xd7egVSFoO6VOPUuVZm0ucnBKo8LI9gTcm1+VtcyqndSGUkMCGBGhBHAg98g+jtj7TWunIOoGZRe2t7Mt9cpseOosQeEyM55urtnOcPiDYFyaVUDQByVV28MzNSf6zmdDhkiIgIiICIiAiIgIiICIiAiIgJyPpFxGepize600Wmo/iRCzfeq0/ZOtM1gTyAJ9k4nvMSaAqk3NZa+KP0amKoil9xBIsaKGs/gwuPMf0jPq3mP5QfxlT078PMTyO97DgS3wlVkFGg8ZSJURoPK0iBKDWS34j4yEhoE2lQkW0l/Ai70+yr/pF7LHKr6jsseQPC8CzaTlm8bc2dhlwysmGfMlNyCh0UuQwas4BzhOA1/GaLa3OBUqyhzwHefcJW3AzzIxMDcdyK2Y4ijcgGmKwN7Zcp6t2vyIWrm+oO6ds2fiespU3IsWpqxHCzW7Q9Dcek4DufVC4ugG+ZUc4dvFKilD/MD6Tt261UtQCt89XdX+nmOe3hnD+yErMxEQhERAREQEREBERAREQEREDGby4gphcU44ii4H0mGVfeROYb1UAKOOI0ShSwuz6a/xKFd/ivsnSN5wHSjSvbrMTTU/Rpt1zg+GWkR6zle9WLJwdE31xOOxWM80DlE9MrLCxpNF7jTiO+eOp/ee+eu2Vs3I6GePEm1SFZAnh5SkmUqYvArWGMhDD84FxTJWUJwEqECsG3DTy0kGU3iBRWbskeEoRxpaWsSDe/LgZFM8IHtpVijoycUIqD6SkFfhO6bvYxflNdVPYqinil7gK1MkW+tSqnzM4OnDxM6VuftMNSwz37VINh37yKbfKafoUFZPPSEdYiQDJhCIiAiIgIiICIiAiIgIiIGr76Yzqkd/3eFrMvf1lQpTS3j2mHrOW78jq2wWG/cYKlTb/MYXf4CdF3xUVMRhaJ1V8Vh0YeFMVq7emiXnJN6Maa2LxVTiDiHCn+FWyr7lEKxxGlp4cavbXy+E95PtnirjtqD3XhV68kSgS5aBIkmQJKnj+fzwgVKNBJ5xykmBDSbSDKxApTCNULoilmFN3sNSQiF2077KZjsM/C86D0SKrY+7C56ioU7r9kH7paePpT2BSwmLQ0AVWqjVSlrIrBspyHuPHLy9RCNVZ78NB8Zt24DG9YD9vCvblk+VJTc/ZqP6GaUpv85h5DhNo3SZ0da2Rnw+bqKzAHIqVLK125EZgw8QIV3TYOJ6zD0WvfsZDfjdCUa/jdTMhNa3IxKPTrBXDEYh7gaEWdkzEcs5RntyzzZYZIiICIiAiIgIiICIiAiJDuACTwAJPprA0DadfNjXcf4dHF4keDIi4ZSPsVPbONu5sDx01vznUMLiM3X1W/7LUqHzq1qjn3kzl4Sw14Q0Bh/TnLG0cudMt9aVNjc37ToHa3gM1vSXDTtqvnbl6SnaiWen/k0T6NTQj4wJQyqUIDK7wJBgHj6fjEpP4iBeXhKpCnnAgSRIfgdeOkhmt58pabmOJtqfGBt/RlVy7QoAcCrp9xpnOmqrSdsLTDE16YdmUDsqlQC2Y8mJQWHdeaTuptlMHiqVd1Z1pq+ijV2ZCoFzoBc8Z7dmbKrbTxFas7ZELNUq1nsaVMWuFFyLkLYAd1iYHk3Y3cfF1VREPVKy9Y9wopoTqSTzsDw7pvpGHYfo0VNmYarYILucdiDoqAcXGYr33IlrDJR+TtTpsaGzabDr65utXHuBbJTHEqbW048BK8Xi3V8PlpBK5DLg8EigdQHGUYiuf27XIHKx8TCNl3MxTvWxSvcvTCZzoEFSqqs1NFHzVQAL3k5jz12+YrdrYy4SglIHM5Jd3PGpUfV2PfxsPACZWEIiICIiAiIgIiICIiAnh22+XDYpgbEYeqwPcQjET3TBb518mDrfxmnR/wDZURD/ADQNEUWoY7w2JhwPrmsT75zUDTiJ0vF9mhtM8LbMwVLyup09r++c1ItxPrDSLeHs5zLdI2zBhsTRQf8AQ4a/mqdWf5JXutgeuxeFp8mrIT4qpzuPYpEjpMxJq7SxZv2UZKQ8AiKCPtZj6wNcwx09ZfEs0BYCXhaBMW1EBuEqy/CBWo/PdBOlzIB8JDC8CgGwLHieEhE5e/nrLrJeVFbQK8IEV6ZdM6B1ZkvbOoIzKT4gWvOj4nFo6UquIZVw72ehs7C9p61tFNUqLngNNALTmt+cyuydo1VQ0MNTtiKlUWqpf5Qy2H6NSNVW+pIPnA27bm1zReiayCpi8qtQwiL/AGfCZtELKNalTS3d5CbfuVuy9DPicSTUxtXV2Y5jTU27AtoD328ANBLW525gw5XE4lmrYsi93Y1RSuOClvnNbTN5gTcoZIiICIiAiIgIiICIiAiIgJqHSbVK4NAP1sXR9iPnP8gm3zS+kymXpYNBwbGKh+sjr+MDWNvtlw22tf8AGwVEcvm06JK/Gc5zAd/xm/b11B8kxdj/AH+1nt5UUCH3p75oFwp1H9ZWm+dEWz8+LerawpUifrPdF92eaVvJVz4vGPyOKrW8QHYD3ATrnRJgWXCVahGU1apCHnkRQqn7Rf2Ti+JVkd0OrLUdSe8hiCfbeRFCfnlKwJQGk2hVwW/CXM0sBrSovAvCSGtLKPJMD0ZxLDvKS9pAP5OkDYdydlU8Vi6dCuWCMj6IcrFgpIGbkND7J3HYu7+Gwi5cPRVNLFvnO30nOpnCtya5TH4JidDiFQ2uPn3Qe9hPomEpERCEREBERAREQEREBERAREQE1HpCcinhbcRiSw81pVCPfabdNL6TMUKVChVIuErmw72NNwgPgTYeF4Ggb4EjDYVCLf2zGvfvtXYfjNOzqLnj3c5kdpbVeuqq2iLUqVETjk61y7DNxYXPOeXDYV6jolNS7uQiqNczHgIad+3NuNm4MqO18kRgO9il/eT7587YkEPUD9lxUYOp4q4Y5x7bz6ewdJaFGmh0WnSVSeQCKLn3T5mxdQPUqvxD1XcHvDuWB98I82cd4gv3CXCBAhVrKTzkAHzl60KPz6CBaDytX7iPbLhAkafkQAI7vfK0TwAhRKw8D2bIrdXXoVP3denU9EdWPwn0oDPmBCTfTS3PSfRm7OLWrhcO6vn/AESqWtlJZRla45G44QlZSIiEIiICIiAiIgIiICIiAiIgJid6dmLiMJiaTKGJpOUv+q6qSjDxDWMy0sY6iXp1EVijPTdA41KFlIDDxF7+kD5z2TsatiB+jUWHFmOVfK/frNgwe5uLpvTqpUpK6OtRe0/FTcAnLw0tNl2bSWkoRAAq3X2Af7TKviMqFzwAv6Tnvk07c+GcZnbu3TS2fVxRUo/UnKjcVqOcijTj2iNZ88CnOr9IOKJ2dk5HFUz5ghmHvWcrAntm9nXLrP51Yp6vxMGnbn8JXeRmmkW7H8iEVtOfjLl5Up4QKMmv9JITXiZckQKQglwC3M/GJMCVM3/on2uUxD4Zm7FVS6jkKiC+nmoP2RNAMyW7eK6vF4R+7E0x6M4VvcxgfRcQYhkiIgIiICIiAiIgIiICIiAkMNDbjaTEK5bg9TUQ/ON9PEGxHtHvmf2MiVlRWsyOLEHuZTb1vaYjadFsPiXJWw65nU8mR+Y+taTszENSqZeAzdYl+BXNmAHlcAzl+X2+hO6z6Yfe9mGCyNqRVRSfFGKm3vnPhOp9JKImEzrYrWxC2HBkfV3F+Y7J00+dOVXnvicjl8upq9TaQRILxmm3kiVLKTJUGBdvAlIlQECRKgZElYEkScO2V0bmrq3sIMgSpL3v3WPl3X9YH0yrXAPeAfbJnnwFbPTpP+1TR/tKD+M9EMkREBERAREQEREBERAREQEREDyY/Z1OsAKiBrXseDLfjYzV8burVtkVldA+ZDcpVT14H8e6bnEzrMr0z5NZ+OQ9ImBejg8Irk5ji2JBtypuAdOdpzgzuHSzhM+AZ7XNOqlQeAZsje55xC0snPSa1dXtRaLSomQZUQTLNTEgcZdmQ2FhhUxeCQqGzYqipB1BXrFzA+FrwPNUw7plDoyEorgOpQlWF1YA8jIE+hN6t26WOolHUK4B6upbtI3Lh+qeYnAcbhHou9KqpWojFWU945g8weIPMQi1KhKAZUDCqjNl3ZxCijilK00JS3WuwHEqyplJ1sUzAqpPETWbyVgfQm6L5sFgze/9np+5APwMzE1Xo0xOfAUb8UZ6foHJHuYTaoZIiICIiAiIgIiICIiAiIgIiICIiBht8MPnwONTvwtQjzVCw+E+dBPqDE086Oh/WRk+0CPxny/ky3U8VJT1U2PwhYEykyuUse+FB/x/uZsvR/Qz4/Bi17VC/wBhGa/tAmtINZ0HoiwWfF1KnKlRI+tUOUe5XhHZJyHppweSrhMQF0dHosfFCGW/o7eydemndKuzOv2fVYC70SuIHklw/wBxm9kDhyteVCeTDPbT1E9UKrkqZQJUpgdj6I6l8LWX9nEt95EM3uc26HK3Yxid1SnU+0rL/oE6TDJERAREQEREBERAREQEREBERAREQJXiPOfMW0P76v8A59T+dpMQseYSl+URCq14idX6Gvm436VL/XEQOmTH7wf/AJcX/wCNV/8Am0RDL5gw/BZ7YiGlYkiIgdM6HPn4z6FL4vOpREIREQhERAREQERED//Z") +const tShirt = new ClothingShope("red T-shirt", 40, "women", "shirt","data:image/jpeg;base64,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") +const longShirt = new ClothingShope("yello long shirt", 40, "men", "shirt","data:image/jpeg;base64,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") +const jeans = new ClothingShope("levis jeans 501", 80, "men", "trousers","data:image/jpeg;base64,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") +const leatherJacket = new ClothingShope("leather jacket", 120, "men", "jacket","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjjU9tn0RZF34detVQYwv5yrKOvXaUM2bV33mWHyCRBQCgUvQuAoKWsYnJxNLsqsLADp4&usqp=CAU") + +const clothing: ClothingShope[] = [Raincoat, highBoots, sweatSuit, tShirt, longShirt, jeans, leatherJacket] + +const menDipartment: ClothingShope[] = + clothing.filter((cloth) => cloth.department === "men") +menDipartment.sort((a, b) => a.price - b.price) + + +const womenDipartment: ClothingShope[] = + clothing.filter((cloths) => cloths.department === "women") +womenDipartment.sort((a, b) => a.price - b.price) + +function getItem(item:ClothingShope){ + alert(`${item.title} cost ${item.price}`) +} + +//function whatIsPrice(items:ClothingShope){ + //alert(`${items.price}`) +//} +let womenChoose +function getPhoto(womenChoose:String){ + for(let i=0;i`} + }} + else if (userChoose === "men") { + alert(`those are the item we have`) + + const manChoose = prompt('what item would you like?') + if (manChoose) { + alert(`those are the item we have`) + menDipartment.forEach(getItem) + const menCoose = prompt('what item would you like?') + for (let i = 0; i < menDipartment.length; i++) { + return menDipartment[i].price + } + } + } + } catch (error) { + console.error(error) + return false + }} + +ChooseItem() \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/style.css new file mode 100644 index 000000000..0ce40ef90 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/style.css @@ -0,0 +1,9 @@ +.clothing-items { + height: 250px; + width: 1000px; + display: flex; + flex-direction: row; + gap: 25px; + justify-content: space-between; + padding: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/style.scss new file mode 100644 index 000000000..cdabef025 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/aviva-elias/task-3/style.scss @@ -0,0 +1,11 @@ +.clothing-items{ +height: 250px; +width: 1000px; +display: flex; +flex-direction: row; +gap: 25px; +justify-content: space-between; +padding: 50px; + + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/idan/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/dist/index.js new file mode 100644 index 000000000..e0cab05c6 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/dist/index.js @@ -0,0 +1,34 @@ +//i did not do the thing with the sorting algorithm so i guess ill settle with 2 +var images = document.querySelector("#imgs"); +var numberOfProducts = 5; +var imgURL = []; +while (imgURL.length < numberOfProducts) { + var userInput = prompt("please paste the url of an image"); + if (isValidUrl(userInput) && userInput) { + //i added "&& userInput" because i dont like the red line there but i am fine with the other red line on the other place because of the try catch + imgURL.push(userInput); + } + else { + alert("not a url"); + } +} +if (images) { + for (var index = 0; index < numberOfProducts; index++) { + images.innerHTML += "
                "; + } +} +//amazed this worked^ +//i like copying from the internet also good enough for me +function isValidUrl(string) { + var url; + try { + url = new URL(string); + } + catch (_) { + return false; + } + return true; +} +//was the alt way i wanted to do it keeping to myself +//// i do not know why i decided to save the images in an array and not just placed them on screen however i am now commited and i will keep working with what i did even though i dont like it +////i.e for length is the numberOfImgs and each time check if its a url and then attempt to paste it on screen ill just do it diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/idan/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/dist/style.css new file mode 100644 index 000000000..eab383598 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/dist/style.css @@ -0,0 +1,16 @@ +#imgs { + position: absolute; + left: 0px; + top: 0px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 5%; + width: 100vw; + height: 100vh; +} +#imgs img { + width: 15%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/idan/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/index.html new file mode 100644 index 000000000..f4832188a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/idan/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/index.ts new file mode 100644 index 000000000..8b07703c4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/index.ts @@ -0,0 +1,75 @@ +//i did not do the thing with the sorting algorithm so i guess ill settle with 2 +const images:HTMLHeadingElement|null = document.querySelector(`#imgs`) +const numberOfProducts = 5; +const imgURL:string[] = []; + + + + +while(imgURL.length < numberOfProducts) { + const userInput = prompt (`please paste the url of an image`); + if(isValidUrl(userInput) && userInput){ + //i added "&& userInput" because i dont like the red line there but i am fine with the other red line on the other place because of the try catch + imgURL.push(userInput) + } + else{ + alert(`not a url`) + } +} + +if(images){ + for (let index = 0; index < numberOfProducts; index++) { + images.innerHTML += `
                ` + } +} +//amazed this worked^ + + + + +//i like copying from the internet also good enough for me +function isValidUrl(string:string|null):boolean { + let url; + try { + url = new URL(string); + } catch (_) { + return false; + } + return true; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +//was the alt way i wanted to do it keeping to myself + +//// i do not know why i decided to save the images in an array and not just placed them on screen however i am now commited and i will keep working with what i did even though i dont like it +////i.e for length is the numberOfImgs and each time check if its a url and then attempt to paste it on screen ill just do it diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/idan/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/style.css new file mode 100644 index 000000000..eab383598 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/style.css @@ -0,0 +1,16 @@ +#imgs { + position: absolute; + left: 0px; + top: 0px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 5%; + width: 100vw; + height: 100vh; +} +#imgs img { + width: 15%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/idan/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/style.scss new file mode 100644 index 000000000..ee84b62e0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/idan/style.scss @@ -0,0 +1,19 @@ + +#imgs{ + position: absolute; + left: 0px; + top: 0px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 5%; + width: 100vw; + height: 100vh; + + img{ + width: 15%; + } + +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/instructions.md b/02-TypeScript/11-DOM Manipulations/home puzzles/instructions.md new file mode 100644 index 000000000..11b80d892 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/instructions.md @@ -0,0 +1,3 @@ +1) get an image URL from the user, and add the image to the DOM. Do it five times (with a loop) +2) get five image URLs from the user and print five images on the DOM. +3) use the previous puzzle on store items, and show them on the items on the DOM \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/dist/index.js new file mode 100644 index 000000000..98ab16229 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/dist/index.js @@ -0,0 +1,19 @@ +function addImage() { + try { + var picture = document.querySelector('#picture'); + console.dir(picture); + var urlImage = prompt("Enter image please"); + if (picture && urlImage) + for (var i = 0; i < 5; i++) { + var img = document.createElement("img"); + img.src = urlImage; + document.body.appendChild(img); + } + } + catch (error) { + console.error(error); + return false; + } +} +addImage(); +console.log(addImage); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/dist/style.css new file mode 100644 index 000000000..8d9c7a54c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/dist/style.css @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/index.html new file mode 100644 index 000000000..cf3fcb4d4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +

                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/index.ts new file mode 100644 index 000000000..47d5eb8f1 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/index.ts @@ -0,0 +1,22 @@ +function addImage() { + try { + const picture: HTMLHeadingElement | null = document.querySelector( + '#picture', + ) + console.dir(picture) + let urlImage: any = prompt(`Enter image please`) + if (picture && urlImage) + for (let i = 0; i < 5; i++) { + const img = document.createElement("img"); + img.src = urlImage; + document.body.appendChild(img); + } + + + } catch (error) { + console.error(error) + return false + } +} +addImage() +console.log(addImage) diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/style.css new file mode 100644 index 000000000..8d9c7a54c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/style.css @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/style.scss new file mode 100644 index 000000000..b353b5c26 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task1/style.scss @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/dist/index.js new file mode 100644 index 000000000..636bc448e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/dist/index.js @@ -0,0 +1,20 @@ +// task2 +function addImage() { + try { + var picture = document.querySelector('#picture'); + console.dir(picture); + if (picture) + for (var i = 0; i < 5; i++) { + var urlImage = prompt("Enter image please"); + var img = document.createElement('img'); + img.src = urlImage; + document.body.appendChild(img); + } + } + catch (error) { + console.error(error); + return false; + } +} +addImage(); +console.log(addImage); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/dist/style.css new file mode 100644 index 000000000..8d9c7a54c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/dist/style.css @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/index.html new file mode 100644 index 000000000..1c2149006 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +

                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/index.ts new file mode 100644 index 000000000..10410229d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/index.ts @@ -0,0 +1,22 @@ +// task2 + +function addImage() { + try { + const picture: HTMLHeadingElement | null = document.querySelector( + '#picture', + ) + console.dir(picture) + if (picture) + for (let i = 0; i < 5; i++) { + let urlImage: any = prompt(`Enter image please`) + const img = document.createElement('img') + img.src = urlImage + document.body.appendChild(img) + } + } catch (error) { + console.error(error) + return false + } +} +addImage() +console.log(addImage) diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/style.css new file mode 100644 index 000000000..8d9c7a54c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/style.css @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/style.scss new file mode 100644 index 000000000..b353b5c26 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task2/style.scss @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/dist/index.js new file mode 100644 index 000000000..f468dbe3d --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/dist/index.js @@ -0,0 +1,43 @@ +var GameShop = /** @class */ (function () { + function GameShop(name, price, department, types, imageLink) { + this.name = name; + this.price = price; + this.department = department; + this.types = types; + this.imageLink = imageLink; + } + return GameShop; +}()); +var fifa2022 = new GameShop("fifa2022", 159.9, "sport-game", "game", "https://cdn.shopify.com/s/files/1/0272/6084/6180/products/ps5-fifa2022-11_1000x.jpg?v=1633429984"); +var fortnite = new GameShop("fortnite", 29.9, "survival-game", "game", "https://www.cjs-cdkeys.com/product_images/img/o/6649.jpg"); +var godOfWar = new GameShop("god of war", 199.9, "action-game", "game", "https://i5.walmartimages.com/asr/80d588ee-f05e-4727-998a-bf05c743117a.5930d31ee72baf4b40f776aada31ceeb.png"); +var controller = new GameShop("controller", 99.9, "Kits", "consoles", "https://scufgaming.com/media/prismic/5d36ce27-565c-4dae-866b-1fda40cc8e0a_pro_fps_light_gray_playstation_4_controller_850x600.png"); +var hdmiCable = new GameShop("hdmi cable", 6.9, "cable", "Multimedia", "https://piitel.co.il/wp-content/uploads/2018/03/6451.jpg"); +var lgTv = new GameShop("lg tv", 1259.9, "screens", "multimedia", "https://tidal-cms.s3.amazonaws.com/assets/696752e0-7b3e-11eb-a264-df2c48b80ec3/LGTV-product.jpg"); +var items = [ + fifa2022, + fortnite, + godOfWar, + controller, + hdmiCable, + lgTv, +]; +// UPADTE +var searchBox = document.getElementById("query"); +searchBox.addEventListener("keyup", function () { + var searchValue = searchBox.value; + var filteredArray = items.filter(function (item) { return item.name.includes(searchValue); }); + updateUI(filteredArray); +}); +function updateUI(filteredArray) { + var searchResultContainer = document.getElementById("productsCards"); + searchResultContainer.innerHTML = ""; + filteredArray.forEach(function (item) { + var div = document.createElement("div"); + var imge = document.createElement("img"); + imge.src = item.imageLink; + div.innerHTML = item.name + " " + item.price + "$"; + div.append(imge); + searchResultContainer.appendChild(div); + }); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/dist/style.css new file mode 100644 index 000000000..284ba6f05 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/dist/style.css @@ -0,0 +1,169 @@ +body { + margin: 0%; +} + +.wrapper { + width: auto; + height: 255vh; + background-color: antiquewhite; +} +.wrapper__head { + margin-top: -15px; + width: 100%; + height: 90px; + background-color: #fbff00; + padding: 0%; + font-size: 4rem; + text-align: center; + position: fixed; +} +.wrapper__head .outin { + width: 250px; + height: 250px; + display: inline; + background-color: #f105be; + border: px1; + animation-name: pop-outin; + animation: 2s anim-popoutin ease infinite; +} +@keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + 25% { + color: #08bb08; + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } +} +.wrapper #query { + margin-top: 190px; + margin-left: 450px; + width: 550px; + height: 50px; +} +.wrapper #btn_search { + padding: 15px; +} +.wrapper #productsCards { + display: flex; + gap: 25; + align-items: center; + margin-top: 1rem; + justify-content: center; +} +.wrapper .card { + border: 1px solid black; + background-color: white; + padding: 0.5rem; +} +.wrapper .searchWapper { + display: flex; + flex-direction: column; + gap: 0.25; +} +.wrapper input { + font-size: 1rem; +} +.wrapper .card > .productName { + margin-bottom: 0.25rem; +} +.wrapper .card > .body { + font-size: 0.8rem; + color: #777; +} +.wrapper img { + width: 85px; + height: 70px; +} +.wrapper__container { + display: grid; + grid-template-columns: auto auto auto; + justify-content: center; + padding-top: 150px; + gap: 5px; +} +.wrapper__container .Fifa2022-img { + background-image: url(https://cdn.shopify.com/s/files/1/0272/6084/6180/products/ps5-fifa2022-11_1000x.jpg?v=1633429984); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Fortnite-img { + background-image: url(https://www.cjs-cdkeys.com/product_images/img/o/6649.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Emancipation-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0oAkT3etqKxnnFmVkOdyg1KqhFovsdO7BZ7DkoV2SnAmvN8J9); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .God_of_War-img { + background-image: url(https://i5.walmartimages.com/asr/80d588ee-f05e-4727-998a-bf05c743117a.5930d31ee72baf4b40f776aada31ceeb.png); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .controller-img { + background-image: url(https://scufgaming.com/media/prismic/5d36ce27-565c-4dae-866b-1fda40cc8e0a_pro_fps_light_gray_playstation_4_controller_850x600.png); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .lgTv-img { + background-image: url(https://tidal-cms.s3.amazonaws.com/assets/696752e0-7b3e-11eb-a264-df2c48b80ec3/LGTV-product.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .HDMI_cable-img { + background-image: url(data:image/jpeg;base64,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); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container #Nope { + color: red; +} +.wrapper__container #White_Noise { + color: red; +} +.wrapper__container #Strange_World { + color: red; +} +.wrapper__container .index { + height: 5px; + width: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/index.html new file mode 100644 index 000000000..aec95989e --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/index.html @@ -0,0 +1,84 @@ + + + + + + + + Document + + + + + +
                +
                +
                GameShop
                +
                + + +

                +
                +
                +
                +

                FiFa 2022

                +
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.                 +
                +
                +
                +

                Fortnite

                +
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.                 +
                +
                +
                +

                God of War

                +
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.                 +
                +
                +
                +

                controller

                +
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.                 +
                +
                +
                +

                lgTv

                +
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.                 +
                +
                +
                +

                HDMI cable

                +
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.
                + ipsum dolor sit amet consectetur
                adipisicibus enim
                eligendi odio pariatur + quibusdam,
                esse ratione quod ut.                 +
                + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/index.ts new file mode 100644 index 000000000..9c130d237 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/index.ts @@ -0,0 +1,55 @@ +class GameShop { + constructor( + public name: string, + public price: number, + public department: string, + public types: string, + public imageLink: string + ) {} + } + + const fifa2022 = new GameShop(`fifa2022`, 159.9, `sport-game`, `game` , `https://cdn.shopify.com/s/files/1/0272/6084/6180/products/ps5-fifa2022-11_1000x.jpg?v=1633429984`) + const fortnite = new GameShop(`fortnite`, 29.9, `survival-game`, `game` , `https://www.cjs-cdkeys.com/product_images/img/o/6649.jpg`) + const godOfWar = new GameShop(`god of war`, 199.9, `action-game`, `game`, `https://i5.walmartimages.com/asr/80d588ee-f05e-4727-998a-bf05c743117a.5930d31ee72baf4b40f776aada31ceeb.png` ) + const controller = new GameShop(`controller`, 99.9, `Kits`, `consoles`, `https://scufgaming.com/media/prismic/5d36ce27-565c-4dae-866b-1fda40cc8e0a_pro_fps_light_gray_playstation_4_controller_850x600.png`) + const hdmiCable = new GameShop(`hdmi cable`, 6.9, `cable`, `Multimedia`, `https://piitel.co.il/wp-content/uploads/2018/03/6451.jpg`) + const lgTv = new GameShop(`lg tv`, 1259.9, `screens`, `multimedia`, `https://tidal-cms.s3.amazonaws.com/assets/696752e0-7b3e-11eb-a264-df2c48b80ec3/LGTV-product.jpg`) + + + const items: GameShop[] = [ + fifa2022, + fortnite, + godOfWar, + controller, + hdmiCable, + lgTv, + ] + + + + + + // UPADTE + const searchBox = document.getElementById("query") as HTMLInputElement; + + searchBox.addEventListener("keyup", () => { + const searchValue = searchBox.value; + + const filteredArray = items.filter(item => item.name.includes(searchValue)); + + updateUI(filteredArray); + }); + + function updateUI(filteredArray: GameShop[]) { + let searchResultContainer = document.getElementById("productsCards")as HTMLDivElement; + searchResultContainer.innerHTML = ""; + + filteredArray.forEach(item => { + let div = document.createElement("div"); + let imge = document.createElement("img")as HTMLImageElement; + imge.src = item.imageLink + div.innerHTML = `${item.name} ${item.price}$`; + div.append(imge); + searchResultContainer.appendChild(div); + }); + } \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/style.css new file mode 100644 index 000000000..55c9cad40 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/style.css @@ -0,0 +1,196 @@ +body { + margin: 0%; +} + +.wrapper { + width: auto; + height: 255vh; + background-color: antiquewhite; +} +.wrapper__head { + margin-top: -15px; + width: 100%; + height: 90px; + background-color: rgb(251, 255, 0); + padding: 0%; + font-size: 4rem; + text-align: center; + position: fixed; +} +.wrapper__head .outin { + width: 250px; + height: 250px; + display: inline; + background-color: rgb(241, 5, 190); + border: px1; + -webkit-animation-name: pop-outin; + animation-name: pop-outin; + -webkit-animation: 2s anim-popoutin ease infinite; + animation: 2s anim-popoutin ease infinite; +} +@-webkit-keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + 25% { + color: rgb(8, 187, 8); + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } +} +@keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + 25% { + color: rgb(8, 187, 8); + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } +} +.wrapper #query { + margin-top: 190px; + margin-left: 450px; + width: 550px; + height: 50px; +} +.wrapper #btn_search { + padding: 15px; +} +.wrapper #productsCards { + display: flex; + gap: 25; + align-items: center; + margin-top: 1rem; + justify-content: center; +} +.wrapper .card { + border: 1px solid black; + background-color: white; + padding: 0.5rem; +} +.wrapper .searchWapper { + display: flex; + flex-direction: column; + gap: 0.25; +} +.wrapper input { + font-size: 1rem; +} +.wrapper .card > .productName { + margin-bottom: 0.25rem; +} +.wrapper .card > .body { + font-size: 0.8rem; + color: #777; +} +.wrapper img { + width: 85px; + height: 70px; +} +.wrapper__container { + display: grid; + grid-template-columns: auto auto auto; + justify-content: center; + padding-top: 150px; + gap: 5px; +} +.wrapper__container .Fifa2022-img { + background-image: url(https://cdn.shopify.com/s/files/1/0272/6084/6180/products/ps5-fifa2022-11_1000x.jpg?v=1633429984); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Fortnite-img { + background-image: url(https://www.cjs-cdkeys.com/product_images/img/o/6649.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .Emancipation-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0oAkT3etqKxnnFmVkOdyg1KqhFovsdO7BZ7DkoV2SnAmvN8J9); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .God_of_War-img { + background-image: url(https://i5.walmartimages.com/asr/80d588ee-f05e-4727-998a-bf05c743117a.5930d31ee72baf4b40f776aada31ceeb.png); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .controller-img { + background-image: url(https://scufgaming.com/media/prismic/5d36ce27-565c-4dae-866b-1fda40cc8e0a_pro_fps_light_gray_playstation_4_controller_850x600.png); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .lgTv-img { + background-image: url(https://tidal-cms.s3.amazonaws.com/assets/696752e0-7b3e-11eb-a264-df2c48b80ec3/LGTV-product.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container .HDMI_cable-img { + background-image: url(data:image/jpeg;base64,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); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.wrapper__container #Nope { + color: red; +} +.wrapper__container #White_Noise { + color: red; +} +.wrapper__container #Strange_World { + color: red; +} +.wrapper__container .index { + height: 5px; + width: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/style.scss new file mode 100644 index 000000000..6314f13c1 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/itayAmosi/task3/style.scss @@ -0,0 +1,226 @@ +body { + margin: 0%; +} + +.wrapper { + width: auto; + height: 255vh; + background-color: antiquewhite; + + + &__head { + margin-top: -15px; + width: 100%; + height: 90px; + background-color: rgb(251, 255, 0); + padding: 0%; + font-size: 4rem; + text-align: center; + position: fixed; + + .outin { + width: 250px; + height: 250px; + display: inline; + background-color: rgb(241, 5, 190); + border: px1; + animation-name: pop-outin; + animation: 2s anim-popoutin ease infinite; + } + } + + + @keyframes anim-popoutin { + 0% { + color: black; + transform: scale(0); + opacity: 0; + text-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + + 25% { + color: rgb(8, 187, 8); + transform: scale(2); + opacity: 1; + text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5); + } + + 50% { + color: black; + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(1); + opacity: 1; + text-shadow: 1px 0 0 rgba(0, 0, 0, 0); + } + + } + + #query { + margin-top: 190px; + margin-left: 450px; + width: 550px; + height: 50px; + + } + + #btn_search { + padding: 15px; + } + #productsCards { + display: flex; + // grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); + gap: 25; + align-items: center; + margin-top: 1rem; + justify-content: center; + + } + + .card { + border: 1px solid black; + background-color: white; + padding: .5rem; + } + +.searchWapper { + display: flex; + flex-direction: column; + gap: .25; +} + +input { + font-size: 1rem; +} +.card > .productName { + margin-bottom: .25rem; +} + +.card > .body { + font-size: .8rem; + color: #777; +} +img { + width: 85px; + height: 70px; +} + + &__container { + display: grid; + grid-template-columns: auto auto auto; + justify-content: center; + padding-top: 150px; + gap: 5px; + + + + + + .Fifa2022-img { + background-image: url(https://cdn.shopify.com/s/files/1/0272/6084/6180/products/ps5-fifa2022-11_1000x.jpg?v=1633429984); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + + } + + .Fortnite-img { + background-image: url(https://www.cjs-cdkeys.com/product_images/img/o/6649.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + + .Emancipation-img { + background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0oAkT3etqKxnnFmVkOdyg1KqhFovsdO7BZ7DkoV2SnAmvN8J9); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + + .God_of_War-img { + background-image: url(https://i5.walmartimages.com/asr/80d588ee-f05e-4727-998a-bf05c743117a.5930d31ee72baf4b40f776aada31ceeb.png); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + + .controller-img { + background-image: url(https://scufgaming.com/media/prismic/5d36ce27-565c-4dae-866b-1fda40cc8e0a_pro_fps_light_gray_playstation_4_controller_850x600.png); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + + .lgTv-img { + background-image: url(https://tidal-cms.s3.amazonaws.com/assets/696752e0-7b3e-11eb-a264-df2c48b80ec3/LGTV-product.jpg); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + + .HDMI_cable-img { + background-image: url(data:image/jpeg;base64,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); + width: 200px; + height: 190px; + border: 2px solid black; + background-repeat: no-repeat; + background-size: 100% 100%; + + } + + #Nope { + color: red; + } + + #White_Noise { + color: red; + } + + #Strange_World { + color: red; + } + + .index { + height: 5px; + width: 5px; + } + + + + } + + + + +} + +// @media only screen and (min-width: 600px) { +// .container + +// } +// @media only screen and (min-width: 900px) { +// width: 100%; +// } \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/dist/index.css b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/dist/index.css new file mode 100644 index 000000000..a174ffe65 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/dist/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; +} + +#image { + width: 600px; + height: 600px; + padding: 25px; + display: flex; + flex-direction: column; + gap: 25px; + margin: auto; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..abcdfb5b2 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/dist/index.js @@ -0,0 +1,20 @@ +var image = document.querySelector("#image"); +function addPhoto() { + try { + var userPhoto = prompt("Enter your photo please"); + for (var i = 0; i < 5; i++) { + if (userPhoto == null || image == null) { + alert('you did not enter a Photo address'); + console.error("you did not enter a Photo address"); + } + else { + image.innerHTML += ""; + } + } + } + catch (error) { + console.error(error); + return false; + } +} +addPhoto(); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.css b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.css new file mode 100644 index 000000000..a174ffe65 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; +} + +#image { + width: 600px; + height: 600px; + padding: 25px; + display: flex; + flex-direction: column; + gap: 25px; + margin: auto; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.html new file mode 100644 index 000000000..ab63994d3 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + +
                + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.scss new file mode 100644 index 000000000..0169b859c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.scss @@ -0,0 +1,14 @@ +body { + margin: 0; +} + +#image { + width: 600px; + height: 600px; + padding: 25px; + display: flex; + flex-direction: column; + gap: 25px; + margin: auto; + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.ts new file mode 100644 index 000000000..956032303 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/john-ben/index.ts @@ -0,0 +1,29 @@ + +const image: HTMLDivElement | null = document.querySelector("#image"); + +function addPhoto() { + try { + + let userPhoto: string | null = prompt("Enter your photo please"); + for (let i = 0; i < 5; i++) { + + + if (userPhoto == null || image == null) { + alert('you did not enter a Photo address') + console.error("you did not enter a Photo address") + + } + + else { + image.innerHTML += `` + } + + } + } catch (error) { + console.error(error) + return false + } +} + + +addPhoto() diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..97c679ac0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/dist/index.js @@ -0,0 +1,116 @@ +var Item = /** @class */ (function () { + function Item(name, department, type, price, image) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + this.image = image; + } + return Item; +}()); +var shirtLevisW = new Item("Levis-Shirt", "women", "shirt", 19.9, "data:image/jpeg;base64,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"); +var shirtLevisM = new Item("Levis-Shirt", "men", "shirt", 19.9, "data:image/jpeg;base64,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"); +var skirtW = new Item("Green-Skirt", "women", "skirt", 29.9, "data:image/jpeg;base64,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"); +var jeansDizzleM = new Item("Dizzle-Jean", "men", "pants", 59.9, "data:image/jpeg;base64,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"); +var shirtPackB = new Item("Shirts-Pack", "baby", "shirt", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU"); +var blouseW = new Item("White-Blouse", "women", "shirt", 15.9, "data:image/jpeg;base64,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"); +var sweatshirtNikeK = new Item("Nike-Sweatshirt", "kids", "sweatshirt", 49.9, "data:image/jpeg;base64,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"); +var dressW = new Item("Pink-Dress", "women", "dress", 39.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU"); +var denimJacketM = new Item("DenimJacket", "men", "outwear", 79.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU"); +var activeSetNikeW = new Item("Nike-ActiveSet", "women", "pants", 19.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU"); +var coatGapB = new Item("Yellow-Coat", "baby", "outwear", 49.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU"); +var hairAccesories = new Item("Hair-Clips", "women", "accesories", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU"); +var clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories +]; +var store = document.querySelector(".store"); +if (store) { + for (var i = 0; i < clothesShopArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + clothesShopArr[i].name + "

                \n
                " + clothesShopArr[i].department + "
                \n
                " + clothesShopArr[i].type + "
                \n

                " + clothesShopArr[i].price + "

                \n
                "; + } +} +function getAllItemInType(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var typeGetFromUser_1; + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); + } + var chosenItemsArr = clothesArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + if (chosenItemsArr.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); + else { + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n
                "; + } + } + } + return chosenItemsArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} +function sortArrByPrice(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr = clothesArr.sort(function (a, b) { return a.price - b.price; }); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < sortedArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + sortedArr[i].name + "

                \n
                " + sortedArr[i].department + "
                \n
                " + sortedArr[i].type + "
                \n

                " + sortedArr[i].price + "

                \n
                "; + } + } + return sortedArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} +function getTheCheapestItem(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr_1 = sortArrByPrice(clothesArr); + var chosenItemsArr = void 0; + if (sortedArr_1) { + chosenItemsArr = sortedArr_1.filter(function (item) { return item.price == sortedArr_1[0].price; }); + if (chosenItemsArr.length == 0) + throw new Error("there is no item in the store"); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n
                "; + } + } + } + return chosenItemsArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/dist/style.css new file mode 100644 index 000000000..94b21cfba --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/dist/style.css @@ -0,0 +1,68 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/index.html new file mode 100644 index 000000000..51cf88f98 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/index.html @@ -0,0 +1,24 @@ + + + + + + + + Document + + +
                +

                Noa Store

                +
                +
                + + + +
                +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..f554d9a06 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/index.ts @@ -0,0 +1,142 @@ +class Item { + public constructor( + public name: string, + public department: string, + public type: string, + public price: number, + public image: string + ) {} +} + +const shirtLevisW = new Item("Levis-Shirt", "women", "shirt", 19.9, "data:image/jpeg;base64,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"); +const shirtLevisM = new Item("Levis-Shirt", "men", "shirt", 19.9, "data:image/jpeg;base64,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"); +const skirtW = new Item("Green-Skirt", "women", "skirt", 29.9, "data:image/jpeg;base64,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"); +const jeansDizzleM = new Item("Dizzle-Jean", "men", "pants", 59.9, "data:image/jpeg;base64,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"); +const shirtPackB = new Item("Shirts-Pack", "baby", "shirt", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU"); +const blouseW = new Item("White-Blouse", "women", "shirt", 15.9, "data:image/jpeg;base64,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"); +const sweatshirtNikeK = new Item("Nike-Sweatshirt", "kids", "sweatshirt", 49.9, "data:image/jpeg;base64,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"); +const dressW = new Item("Pink-Dress", "women", "dress", 39.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU"); +const denimJacketM = new Item("DenimJacket", "men", "outwear", 79.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU"); +const activeSetNikeW = new Item("Nike-ActiveSet", "women", "pants", 19.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU"); +const coatGapB = new Item("Yellow-Coat", "baby", "outwear", 49.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU"); +const hairAccesories = new Item("Hair-Clips", "women", "accesories", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU"); + +const clothesShopArr: Item[] = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories +]; + +const store:HTMLHeadingElement | null = document.querySelector(".store"); +if (store){ + for (let i=0; i + image +

                ${clothesShopArr[i].name}

                +
                ${clothesShopArr[i].department}
                +
                ${clothesShopArr[i].type}
                +

                ${clothesShopArr[i].price}

                +

                `; + } +} + +function getAllItemInType(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + let typeGetFromUser; + while (!typeGetFromUser) { + typeGetFromUser = prompt(`Enter the type of item you will want to buy:`); + } + const chosenItemsArr = clothesArr.filter((item) => item.type == typeGetFromUser); + if (chosenItemsArr.length == 0) + throw new Error(`items from type ${typeGetFromUser} is availble in our store`); + else { + if (store){ + store.innerHTML=` `; + for (let i=0; i + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                +
                `; + } + } + } + return chosenItemsArr; + } catch (error) { + console.error(error); + if (store) + store.innerHTML=`

                We did not find item for you

                `; + return false; + } +} + +function sortArrByPrice(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = clothesArr.sort((a, b) => a.price - b.price); + if (store){ + store.innerHTML=` `; + for (let i=0; i + image +

                ${sortedArr[i].name}

                +
                ${sortedArr[i].department}
                +
                ${sortedArr[i].type}
                +

                ${sortedArr[i].price}

                +
                `; + } + } + return sortedArr; + } catch (error) { + console.error(error); + if (store) + store.innerHTML=`

                We did not find item for you

                `; + return false; + } +} + +function getTheCheapestItem(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr= sortArrByPrice(clothesArr); + let chosenItemsArr; + if (sortedArr){ + chosenItemsArr = sortedArr.filter((item) => item.price == sortedArr[0].price); + if (chosenItemsArr.length == 0) + throw new Error(`there is no item in the store`); + if (store){ + store.innerHTML=` `; + for (let i=0; i + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                +
                `; + } + } + } + return chosenItemsArr; + } catch (error) { + console.error(error); + if (store) + store.innerHTML=`

                We did not find item for you

                `; + return false; + } +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/style.css new file mode 100644 index 000000000..cb2f98ea9 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/style.css @@ -0,0 +1,72 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/style.scss new file mode 100644 index 000000000..9ac3129e0 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/noa-meillet/style.scss @@ -0,0 +1,70 @@ +body{ + margin: 0; +} +.tittle{ + padding: 5px; + background-color: black; + + h2{ + color: azure; + margin: auto; + width: max-content; + } +} + +.function{ + display: flex; + flex-direction:row; + justify-content: space-around; + + button{ + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; + } +} + +.store{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__item{ + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__detail{ + padding: 0 5px; + margin: 0; + } + } +} +#image{ + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName{ + width: 100%; +} + +#itemDepartment{ + color: grey; +} + +#itemType{ + color: grey; +} + +#itemPrice{ + width: 100%; +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/app.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/app.ts new file mode 100644 index 000000000..c86d89ea1 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/app.ts @@ -0,0 +1,15 @@ +"use strict"; +//1. + +const img: HTMLHeadingElement | null = document.querySelector("#img"); + +function getPic() { + for (let i = 0; i < 5; i++) { + const image: string | null = prompt("Enter URL address"); + if (image) { + img?.innerHTML = ``; + } + } +} + +getPic(); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/dist/app.js b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/dist/app.js new file mode 100644 index 000000000..dfddac8b4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/dist/app.js @@ -0,0 +1,12 @@ +"use strict"; +//1. +var img = document.querySelector("#img"); +function getPic() { + for (var i = 0; i < 5; i++) { + var image = prompt("Enter URL address"); + if (image) { + img === null || img === void 0 ? void 0 : img.innerHTML = ""; + } + } +} +getPic(); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/dist/style.css new file mode 100644 index 000000000..016c80ab7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/dist/style.css @@ -0,0 +1,9 @@ +body { + margin: 0; +} + +img { + height: 100px; + width: 100px; + margin: 100px 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/index.html new file mode 100644 index 000000000..c176afd2f --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + +
                image here
                + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/style.css new file mode 100644 index 000000000..016c80ab7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/style.css @@ -0,0 +1,9 @@ +body { + margin: 0; +} + +img { + height: 100px; + width: 100px; + margin: 100px 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/style.scss new file mode 100644 index 000000000..143dfba21 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shaili/style.scss @@ -0,0 +1,9 @@ +body{ + margin: 0; +} + +img { + height: 100px; + width: 100px; + margin: 100px 100px; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shalom copperman/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/shalom copperman/index.html new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/Dom style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/Dom style.scss new file mode 100644 index 000000000..c05da0077 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/Dom style.scss @@ -0,0 +1,19 @@ +#myFirstDOM { + height: 100px; + width: 100px; + background-color: aqua; + img{ + width: 100%; + } +} + +.myFirstDOM { + height: 100px; + width: 100px; + background-color: rgb(255, 0, 149); + display: flex + img{ + width: 100%; + } + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/dist/CSS DOM.css b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/dist/CSS DOM.css new file mode 100644 index 000000000..bcf7479e1 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/dist/CSS DOM.css @@ -0,0 +1,14 @@ +#myFirstDOM { + height: 100px; + width: 100px; + background-color: aqua; +} +#myFirstDOM img { + width: 100%; +} +.myFirstDOM { + height: 100px; + width: 100px; + background-color: #ff0095; + display: flex img; +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/dist/DOM JS.js b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/dist/DOM JS.js new file mode 100644 index 000000000..ff25ee293 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/dist/DOM JS.js @@ -0,0 +1,10 @@ +"use strict"; +console.dir(document); +const imgInput = prompt("what is your URL?"); +const test = document.querySelector("#myFirstDOM"); +if (imgInput !== null && test) { + console.dir(test); + test.innerHTML = `
                + +
                `; +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/Dom style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/Dom style.css new file mode 100644 index 000000000..a1e9cd327 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/Dom style.css @@ -0,0 +1,28 @@ +.body { + width: 500px; +} + +#myFirstDOM { + height: 200px; + width: 200px; + background-color: aqua; +} +#myFirstDOM img { + width: 100%; +} + +.myFirstDOM { + height: 200px; + width: 400px; + background-color: rgb(255, 0, 149); + display: flex img; + display-width: 100%; +} + +.newElement { + height: 200px; + width: 400px; + background-color: rgb(255, 0, 149); + display: flex img; + display-width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/Dom style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/Dom style.scss new file mode 100644 index 000000000..3cd6eebda --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/Dom style.scss @@ -0,0 +1,34 @@ + +.body { + width: 500px; +} +#myFirstDOM { + height: 200px; + width: 200px; + background-color: aqua; + img{ + width: 100%; + } +} + +.myFirstDOM { + height: 200px; + width: 400px; + background-color: rgb(255, 0, 149); + display: flex + img{ + width: 100%; + } + +} + +.newElement { + height: 200px; + width: 400px; + background-color: rgb(255, 0, 149); + display: flex + img{ + width: 100%; + } + +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/dist/Dom style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/dist/Dom style.css new file mode 100644 index 000000000..b45b53085 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/dist/Dom style.css @@ -0,0 +1,25 @@ +.body { + width: 500px; +} +#myFirstDOM { + height: 200px; + width: 200px; + background-color: aqua; +} +#myFirstDOM img { + width: 100%; +} +.myFirstDOM { + height: 200px; + width: 400px; + background-color: #ff0095; + display: flex img; + display-width: 100%; +} +.newElement { + height: 200px; + width: 400px; + background-color: #ff0095; + display: flex img; + display-width: 100%; +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/dist/index TS.js b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/dist/index TS.js new file mode 100644 index 000000000..ccd2ad545 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/dist/index TS.js @@ -0,0 +1,14 @@ +"use strict"; +console.dir(document); +const imgInput = prompt("what is your URL?"); +const test = document.querySelector("#myFirstDOM"); +if (imgInput !== null && test) { + //console.dir(test); + test.innerHTML = `
                + +
                `; + const newElement = document.createElement('div'); + newElement.innerHTML = `
                + +
                `; +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/index TS.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/index TS.ts new file mode 100644 index 000000000..f0877c731 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/index TS.ts @@ -0,0 +1,23 @@ +console.dir(document) + +const imgInput=prompt("what is your URL?"); + +const test:HTMLDivElement|null=document.querySelector("#myFirstDOM"); + +if (imgInput!==null && test ) { + //console.dir(test); + test.innerHTML=`
                + +
                `; + + + + const newElement= document.createElement('div'); + newElement.innerHTML=`
                + +
                `; + + if (newElement!==null){ + document.getElementById("myFirstDOM").appendChild(newElement); + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/index-DOM.html b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/index-DOM.html new file mode 100644 index 000000000..5a82e344b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/first try/index-DOM.html @@ -0,0 +1,15 @@ + + + + + + + Shlomi DOM HW + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/index TS.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/index TS.ts new file mode 100644 index 000000000..4011d0ebf --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/index TS.ts @@ -0,0 +1,16 @@ +console.dir(document) + +const imgInput=prompt("what is your URL?"); + +const test:HTMLDivElement|null=document.querySelector("#myFirstDOM"); + +if (imgInput!==null && test ) { + console.dir(test); + test.innerHTML=`
                + +
                `; + console.dir(test); + test.innerHTML=`
                + +
                `; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/index-DOM.html b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/index-DOM.html new file mode 100644 index 000000000..5548c500a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/index-DOM.html @@ -0,0 +1,14 @@ + + + + + + + Shlomi DOM HW + + + + +
                + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/Controller.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/Controller.ts new file mode 100644 index 000000000..fcdd6a320 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/Controller.ts @@ -0,0 +1,29 @@ + +function getProduct(){ + try { + const shirt = new Product("shirt1", "summer", 1996, "https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2015/10/image-dpi.jpg?q=50&fit=crop&w=660&h=340&dpr=1.5"); + products.push(shirt) + console.log(products) + return products + + } catch (error) { + console.error(error) + return false + } +} + +console.log(products) +getProduct() + +const inputURL:string=products[0].pictureURL +const html:HTMLDivElement|null=document.querySelector("#list") +if (html!==null){ + + html.innerHTML= `
                + + +
                ` + +} +console.log(html) + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/MVC.pptx b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/MVC.pptx new file mode 100644 index 000000000..04d32147d Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/MVC.pptx differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/Model.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/Model.ts new file mode 100644 index 000000000..8a80fb26b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/Model.ts @@ -0,0 +1,11 @@ +class Product { + constructor( + public name:string, + public department:string, + public year:number, + public pictureURL:string + + ) {} +} + + const products:Product[]=[] \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/View.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/View.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/data.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/data.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/controller.js b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/controller.js new file mode 100644 index 000000000..1b8f8dc37 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/controller.js @@ -0,0 +1,24 @@ +"use strict"; +function getProduct() { + try { + const shirt = new Product("shirt1", "summer", 1996, "https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2015/10/image-dpi.jpg?q=50&fit=crop&w=660&h=340&dpr=1.5"); + products.push(shirt); + console.log(products); + return products; + } + catch (error) { + console.error(error); + return false; + } +} +console.log(products); +getProduct(); +const inputURL = products[0].pictureURL; +const html = document.querySelector("#list"); +if (html !== null) { + html.innerHTML = `
                + + +
                `; +} +console.log(html); \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/model.js b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/model.js new file mode 100644 index 000000000..89e056bc5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/model.js @@ -0,0 +1,9 @@ +class Product { + constructor(name, department, year, pictureURL) { + this.name = name; + this.department = department; + this.year = year; + this.pictureURL = pictureURL; + } +} +const products = []; diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/view.js b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/view.js new file mode 100644 index 000000000..a30099784 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/dist/view.js @@ -0,0 +1 @@ +const listSelector = document.querySelector("#list"); \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/main.html b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/main.html new file mode 100644 index 000000000..a345e6071 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/main.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + +
                + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/scss.css b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/scss.css new file mode 100644 index 000000000..fbb42324c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/scss.css @@ -0,0 +1,11 @@ +.body { + margin: 0%; +} + +.list { + height: 100px; + width: 100px; +} +.list img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/scss.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/scss.scss new file mode 100644 index 000000000..80e801186 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/shlomi.samai/second try/scss.scss @@ -0,0 +1,11 @@ +.body { + margin: 0%; +} +.list { + + height: 100px; + width: 100px; + img { + width: 100%; + } +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/dist/index.js new file mode 100644 index 000000000..37c11d2d6 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/dist/index.js @@ -0,0 +1,20 @@ +//tesk 1 +function addImage() { + try { + var picture = document.querySelector('#picture'); + console.dir(picture); + var urlImage = prompt("Enter image please"); + if (picture && urlImage) + for (var i = 0; i < 5; i++) { + var img = document.createElement("img"); + img.src = urlImage; + document.body.appendChild(img); + } + } + catch (error) { + console.error(error); + return false; + } +} +addImage(); +console.log(addImage); diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/dist/style.css new file mode 100644 index 000000000..8d9c7a54c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/dist/style.css @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/index.html new file mode 100644 index 000000000..cf3fcb4d4 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + +

                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/index.ts new file mode 100644 index 000000000..62a7d96b5 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/index.ts @@ -0,0 +1,29 @@ +//tesk 1 + +function addImage() { + try { + const picture: HTMLHeadingElement | null = document.querySelector( + '#picture', + ) + console.dir(picture) + let urlImage: any = prompt(`Enter image please`) + + + if (picture && urlImage) + for (let i = 0; i < 5; i++) { + var img = document.createElement("img"); + img.src = urlImage; + document.body.appendChild(img); + } + + + } catch (error) { + console.error(error) + return false + } + } + addImage() + console.log(addImage) + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/style.css new file mode 100644 index 000000000..8d9c7a54c --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/style.css @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/style.scss new file mode 100644 index 000000000..b353b5c26 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/tomer-cohen/dist/style.scss @@ -0,0 +1,8 @@ +img { + padding: 15px; + width: 400px; + height: 300px; + margin-left: 25%; + display: grid; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/dist/index.js new file mode 100644 index 000000000..41a0c748a --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/dist/index.js @@ -0,0 +1,17 @@ +// 1. +// for(let i = 0; i < 5; i++){ +// let imageURL = prompt('Please enter an image URL'); +// let imgElement = document.createElement('img'); +// imgElement.src = imageURL; +// document.body.appendChild(imgElement); +// } +// 2. +// let imageURLs: string[] = []; +// for (let i = 0; i < 5; i++) { +// imageURLs.push(prompt("Please enter an image URL")); +// } +// for (let i = 0; i < 5; i++) { +// let img = document.createElement("img"); +// img.src = imageURLs[i]; +// document.body.appendChild(img); +// } diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/index.html new file mode 100644 index 000000000..6b626f84b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/index.ts new file mode 100644 index 000000000..e1cac4b79 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/uriel bargil/index.ts @@ -0,0 +1,27 @@ +// 1. + +// for(let i = 0; i < 5; i++){ +// let imageURL = prompt('Please enter an image URL'); +// let imgElement = document.createElement('img'); +// imgElement.src = imageURL; +// document.body.appendChild(imgElement); +// } + + + +// 2. + +// let imageURLs: string[] = []; +// for (let i = 0; i < 5; i++) { +// imageURLs.push(prompt("Please enter an image URL")); +// } + +// for (let i = 0; i < 5; i++) { +// let img = document.createElement("img"); +// img.src = imageURLs[i]; +// document.body.appendChild(img); +// } + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/dist/index.js b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/dist/index.js new file mode 100644 index 000000000..75967f3ca --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/dist/index.js @@ -0,0 +1,58 @@ +var product = /** @class */ (function () { + function product(name, department, type, price) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + } + return product; +}()); +var cbr500 = new product("CBR500", "Motorcycle", "Honda", 80); +var cbr1000 = new product("CBR1000", "Motorcycle", "Honda", 200); +var cbr250 = new product("CBR250", "Motorcycle", "Honda", 30); +var ninja650 = new product("NINJA650", "Motorcycle", "kawasaki", 80); +var ninja1000 = new product("NINJA1000", "Motorcycle", "kawasaki", 200); +var ninja250 = new product("NINJA250", "Motorcycle", "kawasaki", 30); +var PartushMotors = [ + cbr1000, cbr250, cbr500, ninja1000, ninja650, ninja250, +]; +var field = document.querySelector(".items"); +var li = Array.from(field.children); +var select = document.getElementById("select"); +var ar = []; +for (var _i = 0, li_1 = li; _i < li_1.length; _i++) { + var i = li_1[_i]; + var last = i.lastElementChild; + var x = last.textContent.trim(); + var y = number(x.substring(1)); + i.setAttribute("data-price", y); + ar.push(i); +} +select.onchange = sortingValue; +function sortingValue() { + if (this.value == "Defualt") { + while (field.firstchild) { + field.removeChild(field.firstChild); + } + field.append.apply(field, ar); + } + if (this.value === "LowToHigh") { + sortElem(field, li, true); + } + if (this.value === "HighToLow") { + sortElem(field, li, false); + } +} +function sortElem(field, li, asc) { + var dm, sortLi; + dm = asc ? 1 : -1; + sortLi = li.sort(function (a, b) { + var ax = a.getAttribute("data-price"); + var bx = b.getAttribute("data-price"); + return ax > bx ? (1 * dm) : (-1 * dm); + }); + while (field, firstChild) { + field.removeChild(field.firstChild); + } + field.append.apply(field, sortLi); +} diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/dist/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/dist/style.css new file mode 100644 index 000000000..5f70f7a25 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/dist/style.css @@ -0,0 +1,151 @@ +body { + margin: 0; + padding: 0; +} + +header { + width: 100%; + height: 10vh; + background: #007c7c; + display: flex; + justify-content: center; + align-items: center; +} +header h2 { + color: white; +} + +.filter-condition { + padding: 20px; + height: 100px; + font-size: 20px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; +} + +.filter-condition select { + width: 120px; + padding: 0 0 0 10px; + border: none; + border-radius: 10px; + outline: none; + font-weight: bold; + color: #007c7c; + background: transparent; + cursor: pointer; +} + +.product-field { + padding: 40px 20px; +} + +.product-field ul { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +.product-field ul li { + width: 23.4%; + height: 400px; + transition: 0.5s all; + background: whitesmoke; + border-radius: 20px; + padding: 10px; + margin: 200px 10px 0 10px; + position: relative; + list-style: none; +} + +picture { + background: #eee; + padding: 5px; + position: absolute; + right: 0; + bottom: 41%; + width: 75%; + height: 85%; + border-radius: 50px 20px 0 20px; + transform: skewY(40deg); + overflow: hidden; + box-shadow: 0 1px 0 #00000020, -1px 0 0 #ccc; +} + +picture img { + width: 95%; + z-index: 1; + transform: skewY(-40deg); + padding: 25px 0 0 0; +} + +.detail { + width: 100%; + height: 100%; +} + +.detail .icon { + width: 30%; + height: 30%; + padding: 20px 5px; +} + +.icon span { + background: #00000030; + display: inline-block; + width: 50px; + height: 50px; + line-height: 50px; + border-radius: 50%; + text-align: center; + padding: 0; + margin: 0 0 20px 5px; + font-size: 20px; + color: white; +} + +.icon span:hover { + background: #007c7c; + cursor: pointer; +} + +.detail > strong { + display: inherit; + margin: 20px; + font-size: 30px; + letter-spacing: 2px; + color: #555; + z-index: 3; +} + +.detail > span { + display: inherit; + padding: 0 20px; + width: 80%; +} + +.detail small { + display: inline-block; + padding: 8px 20px; + margin: 15px; + font-weight: bold; + border-radius: 6px; + border: 1px solid #999; + cursor: pointer; +} + +.deatil small:hover { + background: #007c7c; + color: white; + border-color: cyan; +} + +li h4 { + position: absolute; + right: 10px; + top: 50%; + font-size: 30px; + color: #555; + text-shadow: 1px 1px 2px black; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr1000.jpg b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr1000.jpg new file mode 100644 index 000000000..3db10aade Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr1000.jpg differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr250.jpg b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr250.jpg new file mode 100644 index 000000000..5b51eaefb Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr250.jpg differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr500.jpg b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr500.jpg new file mode 100644 index 000000000..c520c4010 Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/cbr500.jpg differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja1000.png b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja1000.png new file mode 100644 index 000000000..b43c30d19 Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja1000.png differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja250.jpg b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja250.jpg new file mode 100644 index 000000000..d53c5a87d Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja250.jpg differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja650.jpg b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja650.jpg new file mode 100644 index 000000000..e667ae887 Binary files /dev/null and b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/images/ninja650.jpg differ diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/index.html b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/index.html new file mode 100644 index 000000000..72d1dd0a9 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/index.html @@ -0,0 +1,129 @@ + + + + + + + Document + + + + + +
                +

                Yuval Parutsh

                +
                +
                + + Views as a + +
                +
                +
                  +
                • + + cbr500 + +
                  +

                  + + + +

                  + cbr500R + Buy now! +
                  +

                  12000$

                  +
                  • +
                • + + cbr1000 + +
                  +

                  + + + +

                  + Cbr1000R + Buy now! +
                  +

                  20000$

                  +
                  • +
                • + + cbr250 + +
                  +

                  + + + +

                  + Cbr250R + + + Buy now! +
                  +

                  10000$

                  +
                  • +
                • + + ninja1000 + +
                  +

                  + + + +

                  + Ninja1000 + + + Lorem ipsum dolor sit amet. + Buy now! +
                  +

                  18000$

                  +
                  • +
                • + + ninja650 + +
                  +

                  + + + +

                  + Ninja650 + + + Buy now! +
                  +

                  11500$

                  +
                  • +
                • + + ninja250 + +
                  +

                  + + + +

                  + Ninja250 + + Buy now! +
                  +

                  9000$

                  +
                  • +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/index.ts b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/index.ts new file mode 100644 index 000000000..4e143aa82 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/index.ts @@ -0,0 +1,73 @@ +class product { + public constructor( + public name:string, + public department:string, + public type:string, + public price:number + ){} +} + +const cbr500 = new product("CBR500", "Motorcycle", "Honda", 80); +const cbr1000 = new product("CBR1000", "Motorcycle", "Honda", 200); +const cbr250 = new product("CBR250", "Motorcycle", "Honda", 30); +const ninja650 = new product("NINJA650", "Motorcycle", "kawasaki", 80); +const ninja1000 = new product("NINJA1000", "Motorcycle", "kawasaki", 200); +const ninja250 = new product("NINJA250", "Motorcycle", "kawasaki", 30); + +const PartushMotors:product[] = [ + cbr1000,cbr250,cbr500,ninja1000,ninja650,ninja250, +]; + +let field:any = document.querySelector(".items"); +let li = Array.from(field.children); +let select = document.getElementById("select"); +let ar = []; +for(let i of li){ + const last = i.lastElementChild; + const x = last.textContent.trim(); + const y = number(x.substring(1)); + i.setAttribute("data-price", y); + ar.push(i); +} +select.onchange = sortingValue; +function sortingValue(){ + if(this.value == "Defualt"){ + while(field.firstchild){ + field.removeChild(field.firstChild); + } + field.append(...ar); + + } + if(this.value === "LowToHigh") + { + sortElem(field,li,true); + } + if(this.value === "HighToLow") + { + sortElem(field,li,false); + } +} +function sortElem(field,li,asc) +{ + let dm, sortLi; + dm = asc ? 1 : -1; + sortLi = li.sort((a,b)=>{ + const ax = a.getAttribute("data-price"); + const bx = b.getAttribute("data-price"); + return ax>bx? (1*dm) : (-1*dm); + + } + ); + while(field,firstChild) + { + field.removeChild(field.firstChild); + } + field.append(...sortLi); +} + + + + + + + diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/style.css b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/style.css new file mode 100644 index 000000000..3680eb75b --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/style.css @@ -0,0 +1,151 @@ +body { + margin: 0; + padding: 0; +} + +header { + width: 100%; + height: 10vh; + background: rgb(0, 124, 124); + display: flex; + justify-content: center; + align-items: center; +} +header h2 { + color: white; +} + +.filter-condition { + padding: 20px; + height: 100px; + font-size: 20px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; +} + +.filter-condition select { + width: 120px; + padding: 0 0 0 10px; + border: none; + border-radius: 10px; + outline: none; + font-weight: bold; + color: rgb(0, 124, 124); + background: transparent; + cursor: pointer; +} + +.product-field { + padding: 40px 20px; +} + +.product-field ul { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +.product-field ul li { + width: 23.4%; + height: 400px; + transition: 0.5s all; + background: whitesmoke; + border-radius: 20px; + padding: 10px; + margin: 200px 10px 0 10px; + position: relative; + list-style: none; +} + +picture { + background: #eee; + padding: 5px; + position: absolute; + right: 0; + bottom: 41%; + width: 75%; + height: 85%; + border-radius: 50px 20px 0 20px; + transform: skewY(40deg); + overflow: hidden; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1254901961), -1px 0 0 #ccc; +} + +picture img { + width: 95%; + z-index: 1; + transform: skewY(-40deg); + padding: 25px 0 0 0; +} + +.detail { + width: 100%; + height: 100%; +} + +.detail .icon { + width: 30%; + height: 30%; + padding: 20px 5px; +} + +.icon span { + background: rgba(0, 0, 0, 0.1882352941); + display: inline-block; + width: 50px; + height: 50px; + line-height: 50px; + border-radius: 50%; + text-align: center; + padding: 0; + margin: 0 0 20px 5px; + font-size: 20px; + color: white; +} + +.icon span:hover { + background: rgb(0, 124, 124); + cursor: pointer; +} + +.detail > strong { + display: inherit; + margin: 20px; + font-size: 30px; + letter-spacing: 2px; + color: #555; + z-index: 3; +} + +.detail > span { + display: inherit; + padding: 0 20px; + width: 80%; +} + +.detail small { + display: inline-block; + padding: 8px 20px; + margin: 15px; + font-weight: bold; + border-radius: 6px; + border: 1px solid #999; + cursor: pointer; +} + +.deatil small:hover { + background: rgb(0, 124, 124); + color: white; + border-color: cyan; +} + +li h4 { + position: absolute; + right: 10px; + top: 50%; + font-size: 30px; + color: #555; + text-shadow: 1px 1px 2px black; +} \ No newline at end of file diff --git a/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/style.scss b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/style.scss new file mode 100644 index 000000000..68fd24af7 --- /dev/null +++ b/02-TypeScript/11-DOM Manipulations/home puzzles/yuval.p/style.scss @@ -0,0 +1,137 @@ +body{ + margin: 0; + padding: 0; +} +header{ + width: 100%; + height: 10vh; + background: rgb(0, 124, 124); + display: flex; + justify-content: center; + align-items: center; + h2{ + color: white; + } +} +.filter-condition{ + padding: 20px; + height: 100px; + font-size: 20px; + font-weight: bold; + display: flex; + justify-content: center; + align-items: center; +} +.filter-condition select{ + width: 120px; + padding: 0 0 0 10px; + border: none; + border-radius: 10px; + outline: none; + font-weight: bold; + color: rgb(0, 124, 124); + background: transparent; + cursor: pointer; + +} +.product-field{ + padding: 40px 20px; +} +.product-field ul{ + width: 100%; + display: flex; + flex-wrap: wrap; + +} +.product-field ul li{ + width: 23.4%; + height: 400px; + transition: 0.5s all; + background: whitesmoke; + border-radius: 20px; + padding: 10px; + margin: 200px 10px 0 10px; + position: relative; + list-style: none; +} +picture{ + background: #eee; + padding: 5px; + position: absolute; + right: 0; + bottom: 41%; + width: 75%; + height: 85%; + border-radius: 50px 20px 0 20px; + transform: skewY(40deg); + overflow: hidden; + box-shadow: 0 1px 0 #00000020,-1px 0 0 #ccc ; + +} +picture img{ + width: 95%; + z-index: 1; + transform: skewY(-40deg); + padding: 25px 0 0 0; +} +.detail{ + width: 100%; + height: 100%; +} +.detail .icon{ + width: 30%; + height: 30%; + padding: 20px 5px; +} +.icon span{ + background: #00000030; + display: inline-block; + width: 50px; + height: 50px; + line-height: 50px; + border-radius: 50%; + text-align: center; + padding: 0; + margin: 0 0 20px 5px; + font-size: 20px; + color: white; +} +.icon span:hover{ + background: rgb(0, 124, 124); + cursor: pointer; +} +.detail>strong{ + display: inherit; + margin: 20px; + font-size: 30px; + letter-spacing: 2px; + color: #555; + z-index: 3; +} +.detail>span{ + display: inherit; + padding: 0 20px; + width: 80%; +} +.detail small{ + display: inline-block; + padding: 8px 20px; + margin: 15px; + font-weight: bold; + border-radius: 6px; + border: 1px solid #999; + cursor: pointer; +} +.deatil small:hover{ + background: rgb(0, 124, 124); + color: white; + border-color: cyan; +} +li h4{ + position: absolute; + right: 10px; + top: 50%; + font-size: 30px; + color: #555; + text-shadow: 1px 1px 2px black; +} diff --git a/02-TypeScript/12-MVC/.vscode/settings.json b/02-TypeScript/12-MVC/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/12-MVC/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Amit/design.md b/02-TypeScript/12-MVC/Home-Puzzles/Amit/design.md new file mode 100644 index 000000000..5a74f9072 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Amit/design.md @@ -0,0 +1,68 @@ + //Model// + +Entities: + + Listener: + name: string, + id: string, + playlists: Playlist[] + + Artist: + name: string, + id: string, + + Song: + name: string, + id: string, + genre: string, + durationInSeconds: number, + artist: Artist, + artistID: string, + + Playlist: + songs: Song[], + + + + //View// + +listener home page: + allSongs: list of all songs on the app + listenerPlaylists: list of all the user's playlists. renders song views + activePlaylist + +artist home page: + artistSongs: list of all the songs which the artist uploaded, + uploadSongForm: a form that enables the artist to upload a song + +songCard: renders the song's data + + + + //Control// + +uploadSong() = uploads a song by the artist, +deleteSong(), +searchSong(), +addSongToPlaylist(), +removeSongFromPlaylist(), +playSong(), +pauseSong(), +stopSong(), +nextSong(), +previousSong(), +shufflePlaylist(), +login()= identifies if the user is a Listener or an Artist, +createPlaylist(), + +renderArtistSongsList(), +renderSearchResults(), +launchListenerApp(), +launchArtistApp(), + + + + //Helpers// + +uid() = gives a unique id to the listener/ artist/ song / playlist +validateAddSongToPlaylist() = checks if the song already exists on the playlist \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/control.ts b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/control.ts new file mode 100644 index 000000000..ca0a6f611 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/control.ts @@ -0,0 +1,55 @@ +// להזין את את המוצרים מהיוזר + +//תמונה,שם,כמות ,מחיר + +function getProductFromUser() { + try { + const imgUrl = prompt("Enter product imgUrl:") + const name = prompt("Enter product name:"); + const quantity = prompt("Enter product quantity:") + const _price = prompt("Enter product price:"); + + if (!imgUrl || !name || !quantity || !_price) throw new Error("All fields are required"); + + const price = parseInt(_price) + if (typeof price !== "number") throw new Error("price is not a number"); + + product.push(new Product(imgUrl, name, quantity, price)); + + + } catch (error) { + console.error(error); + } +} + +function renderProducts(product: Product[], rootProducts: Element | null): void { + try { + + if (!rootProducts) throw new Error("no dom elrment to render the product to"); + let html = ""; + + + product.forEach((product) => { + html += `
                + + +

                ${product.name}

                +

                quantity:${product.quantity}

                +

                Price: ${product.price}$

                +

                `; + }) + console.log(html); + + // if (!rootProducts) throw new Error(""); + rootProducts.innerHTML = html; + + } + catch (error) { + console.error(error); + } +} + + + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/control.js b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/control.js new file mode 100644 index 000000000..8a0366460 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/control.js @@ -0,0 +1,35 @@ +// להזין את את המוצרים מהיוזר +//תמונה,שם,כמות ,מחיר +function getProductFromUser() { + try { + var imgUrl = prompt("Enter product imgUrl:"); + var name = prompt("Enter product name:"); + var quantity = prompt("Enter product quantity:"); + var _price = prompt("Enter product price:"); + if (!imgUrl || !name || !quantity || !_price) + throw new Error("All fields are required"); + var price = parseInt(_price); + if (typeof price !== "number") + throw new Error("price is not a number"); + product.push(new Product(imgUrl, name, quantity, price)); + } + catch (error) { + console.error(error); + } +} +function renderProducts(product, rootProducts) { + try { + if (!rootProducts) + throw new Error("no dom elrment to render the product to"); + var html_1 = ""; + product.forEach(function (product) { + html_1 += "
                \n \n \n

                " + product.name + "

                \n

                quantity:" + product.quantity + "

                \n

                Price: " + product.price + "$

                \n

                "; + }); + console.log(html_1); + // if (!rootProducts) throw new Error(""); + rootProducts.innerHTML = html_1; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/index.js b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..4e2444094 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/index.js @@ -0,0 +1,9 @@ +// getProductFromUser(); +// getProductFromUser(); +// getProductFromUser(); +// getProductFromUser(); +for (var i = 0; i < 5; i++) { + getProductFromUser(); +} +console.log(product); +renderProducts(product, rootProducts); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/model.js new file mode 100644 index 000000000..5c1c2c125 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/model.js @@ -0,0 +1,13 @@ +// היוזר יכניס מוצרים לחנות ומיון לפי מחירים זול ליקר שלב ראשון נתחיל עם הדאטה מודל +// נתחיל עם מודל -דאטה להגדיר את הישויות +var Product = /** @class */ (function () { + function Product(imgUrl, name, quantity, price) { + this.imgUrl = imgUrl; + this.name = name; + this.quantity = quantity; + this.price = price; + } + return Product; +}()); +// אובייקט שמכיל אובייקטים product +var product = []; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/style.css new file mode 100644 index 000000000..bf5397d33 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/style.css @@ -0,0 +1,31 @@ +.card { + padding: 2px; + border-radius: 10px; + box-shadow: 1px 1px 3px beige; + overflow: hidden; +} + +img { + border-radius: 15px; + padding: 2px 2px; + width: 50vh; + border: 2px solid grey; + margin: 5px, 5px; +} + +h1 { + justify-content: center; + font-size: xx-large; + text-align: center; + color: black; + font-weight: bold; + text-decoration: underline; +} + +h2 { + font-size: large; + text-align: center; + color: green; + font-weight: bold; + text-decoration: underline; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/view.js new file mode 100644 index 000000000..f8bc5b4b4 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/dist/view.js @@ -0,0 +1 @@ +var rootProducts = document.querySelector("#rootProducts"); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/index.html b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/index.html new file mode 100644 index 000000000..06e14df2b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + + + + + + + +

                Terminal X

                +

                Terminal x Online Ltd

                + + +
                + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/index.ts new file mode 100644 index 000000000..f3b2d0e9a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/index.ts @@ -0,0 +1,14 @@ +// getProductFromUser(); +// getProductFromUser(); +// getProductFromUser(); +// getProductFromUser(); +for(let i =0; i< 5; i++){ + getProductFromUser(); +} +console.log(product); + + +renderProducts(product,rootProducts); + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/model.ts new file mode 100644 index 000000000..16e68b345 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/model.ts @@ -0,0 +1,26 @@ +// היוזר יכניס מוצרים לחנות ומיון לפי מחירים זול ליקר שלב ראשון נתחיל עם הדאטה מודל +// נתחיל עם מודל -דאטה להגדיר את הישויות + +class Product { + constructor(public imgUrl: string, public name: string, public quantity: string, public price: number) { } +} +// אובייקט שמכיל אובייקטים product + +const product: Product[] = []; + + + + + + + + + + + + + + + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/style.css new file mode 100644 index 000000000..bf5397d33 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/style.css @@ -0,0 +1,31 @@ +.card { + padding: 2px; + border-radius: 10px; + box-shadow: 1px 1px 3px beige; + overflow: hidden; +} + +img { + border-radius: 15px; + padding: 2px 2px; + width: 50vh; + border: 2px solid grey; + margin: 5px, 5px; +} + +h1 { + justify-content: center; + font-size: xx-large; + text-align: center; + color: black; + font-weight: bold; + text-decoration: underline; +} + +h2 { + font-size: large; + text-align: center; + color: green; + font-weight: bold; + text-decoration: underline; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/style.scss new file mode 100644 index 000000000..a2ed501ee --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/style.scss @@ -0,0 +1,38 @@ + +.card{ + padding: 2px; + border-radius:10px ; + box-shadow: 1px 1px 3px beige; + + + overflow: hidden; + +} + img { + + border-radius: 15px; + padding: 2px 2px; + width: 50vh; + border: 2px solid grey; + margin: 5px, 5px; + +} + + + +h1{ + + justify-content: center; + font-size:xx-large; + text-align: center; + color: black; + font-weight: bold; + text-decoration: underline; +} +h2{ + font-size:large; + text-align: center; + color: green; + font-weight: bold; + text-decoration: underline; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Ayala/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/view.ts new file mode 100644 index 000000000..ab275a9bd --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Ayala/view.ts @@ -0,0 +1,3 @@ + const rootProducts = document.querySelector("#rootProducts"); + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/control.ts b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/control.ts new file mode 100644 index 000000000..7edd10bfc --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/control.ts @@ -0,0 +1,31 @@ +function createAccount() { + try { + const userName = prompt(`please enter your User Name`) + const userPassword = prompt(`please enter your Password`) + const userEmail = prompt(`please enter your Email Address`) + if (!userName || !userPassword || !userEmail) throw new Error(`error`) + user.push(new Users(userName, userPassword, userEmail)) + } catch (error) { + console.error(error) + } + } + + + + let addfriend: HTMLHeadingElement | null = document.querySelector(`#addFriends`); + function friendsBtn() { + try { + document.getElementById(`addFriends`)!.innerHTML= "" + document.getElementById(`addFriends`)!.innerHTML=` +
                  +
                • ROY2000(#32556)

                  • +
                • kilerGameing(#14596)

                  • +
                • Sports(#585)

                  • +
                • School(#4896)
                  • +
                ` + + } catch (error) { + console.log(error) + } + } + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/control.js b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/control.js new file mode 100644 index 000000000..b28b8fc2d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/control.js @@ -0,0 +1,23 @@ +function createAccount() { + try { + var userName = prompt("please enter your User Name"); + var userPassword = prompt("please enter your Password"); + var userEmail = prompt("please enter your Email Address"); + if (!userName || !userPassword || !userEmail) + throw new Error("error"); + user.push(new Users(userName, userPassword, userEmail)); + } + catch (error) { + console.error(error); + } +} +var addfriend = document.querySelector("#addFriends"); +function friendsBtn() { + try { + document.getElementById("addFriends").innerHTML = ""; + document.getElementById("addFriends").innerHTML = "\n
                  \n
                • ROY2000(#32556)

                  • \n
                • kilerGameing(#14596)

                  • \n
                • Sports(#585)

                  • \n
                • School(#4896)
                  • \n
                "; + } + catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/helpers.js b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/index.js b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/index.js new file mode 100644 index 000000000..0e5daa05e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/index.js @@ -0,0 +1,2 @@ +createAccount(); // הרצת פונקציה +// console.log(user); //קבלת נתונים מהמשתמש בתוך הקונסול diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/model.js new file mode 100644 index 000000000..485ab2b8a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/model.js @@ -0,0 +1,9 @@ +var Users = /** @class */ (function () { + function Users(userName, userPassword, userEmail) { + this.userName = userName; + this.userPassword = userPassword; + this.userEmail = userEmail; + } + return Users; +}()); +var user = []; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/style.css new file mode 100644 index 000000000..0fdf33877 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/style.css @@ -0,0 +1,373 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; +} +.container__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; +} +.container__scroller__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; +} +.container__scroller .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); +} +.container__scroller .green--color:hover { + background-color: green; +} +.container__scroller .purple--color:hover { + background-color: purple; +} +.container__scroller .orange--color:hover { + background-color: orange; +} +.container__scroller .blue--me:hover { + background-color: blue; +} +.container__scroller__apps:hover .popup--me { + opacity: 1; +} +.container__scroller__apps:hover .popup--green { + opacity: 1; +} +.container__scroller__apps:hover .popup--purple { + opacity: 1; +} +.container__scroller__apps:hover .popup--orange { + opacity: 1; +} +.container .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); +} +.container .container__scroller__apps:hover { + border-radius: 25%; +} +.container .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; +} +.container .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .web { + width: inherit; + border-radius: 50%; +} +.container__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; +} +.container__sidebar__friends { + color: aliceblue; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__friends .friends-icon { + width: 20px; + height: 115px; +} +.container__sidebar__friends:hover { + transform: scale(0.9); + transition: transform ease-in 0.2s; + cursor: pointer; + text-align: center; + background-color: #1a1a1a; +} +.container__sidebar__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__nitro .nitro-icon { + width: 20px; + height: 115px; +} +.container__sidebar .direct { + font-size: 14px; +} +.container #searchbar { + background-color: #1a1a1a; + color: aliceblue; + font-size: 11px; + border: 2px solid red; +} +.container #btn_search { + width: 150px; + margin: -15px; + background-color: #b3b3b3; +} +.container .divider2 { + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; +} +.container__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; +} +.container .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; +} +.container .container__main_items__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + justify-content: center; + font-size: 7px; +} +.container .container__main_items__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; +} +.container .container__main_items .divider3 { + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; +} +.container .container__main_items .container__main_items__post { + display: flex; + flex-direction: columns; + justify-content: center; +} +.container .container__main_items .container__main_items__post .container__main_items__post1 { + position: absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; +} +.container .container__main_items .container__main_items__post .container__main_items__post2 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post3 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/view.js new file mode 100644 index 000000000..0ffa6fd7d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/dist/view.js @@ -0,0 +1 @@ +var addServer = document.querySelector("#addServer"); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/helpers.ts b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/index.html b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/index.html new file mode 100644 index 000000000..7f893a93a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/index.html @@ -0,0 +1,200 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                +
                + +
                +

                Direct messages

                +
                +
                +
                +
                + +
                +

                Add a Server

                +
                +
                +
                + +
                +

                Explore Public Servers

                +
                +
                +
                + +
                +

                Add a Friends

                +
                +
                +
                + +
                +

                Web

                +
                +
                +
                + +
                +

                Download Apps

                +
                +
                +
                +
                + + +
                +
                + +
                +
                + +

                Nitro

                +
                + Direct Messages + +
                + + Grizz0 +
                +
                + + Andy +
                +
                + + Aaron +
                +
                +
                +

                Friends

                +

                Onlin

                +

                All

                +

                pending

                +
                +

                suggestions

                +
                +

                blocked

                +
                +

                Add Friends

                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/index.ts new file mode 100644 index 000000000..bddef5838 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/index.ts @@ -0,0 +1,5 @@ +createAccount();// הרצת פונקציה +// console.log(user); //קבלת נתונים מהמשתמש בתוך הקונסול + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/model.ts new file mode 100644 index 000000000..66ba3455b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/model.ts @@ -0,0 +1,5 @@ +class Users{ + constructor(public userName:string, public userPassword, public userEmail:string){} +} + +const user:Users []=[]; \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/style.css new file mode 100644 index 000000000..3b4cd0a53 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/style.css @@ -0,0 +1,381 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; +} +.container__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; +} +.container__scroller__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; +} +.container__scroller .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); +} +.container__scroller .green--color:hover { + background-color: green; +} +.container__scroller .purple--color:hover { + background-color: purple; +} +.container__scroller .orange--color:hover { + background-color: orange; +} +.container__scroller .blue--me:hover { + background-color: blue; +} +.container__scroller__apps:hover .popup--me { + opacity: 1; +} +.container__scroller__apps:hover .popup--green { + opacity: 1; +} +.container__scroller__apps:hover .popup--purple { + opacity: 1; +} +.container__scroller__apps:hover .popup--orange { + opacity: 1; +} +.container .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); +} +.container .container__scroller__apps:hover { + border-radius: 25%; +} +.container .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; +} +.container .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .web { + width: inherit; + border-radius: 50%; +} +.container__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; +} +.container__sidebar__friends { + color: aliceblue; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__friends .friends-icon { + width: 20px; + height: 115px; +} +.container__sidebar__friends:hover { + transform: scale(0.9); + transition: transform ease-in 0.2s; + cursor: pointer; + text-align: center; + background-color: #1a1a1a; +} +.container__sidebar__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__nitro .nitro-icon { + width: 20px; + height: 115px; +} +.container__sidebar .direct { + font-size: 14px; +} +.container #searchbar { + background-color: #1a1a1a; + color: aliceblue; + font-size: 11px; + border: 2px solid red; +} +.container #btn_search { + width: 150px; + margin: -15px; + background-color: #b3b3b3; +} +.container .divider2 { + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; +} +.container__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; +} +.container .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; +} +.container .container__main_items__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + justify-content: center; + font-size: 7px; +} +.container .container__main_items__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; +} +.container .container__main_items .divider3 { + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; +} +.container .container__main_items .container__main_items__post { + display: flex; + flex-direction: columns; + justify-content: center; +} +.container .container__main_items .container__main_items__post .container__main_items__post1 { + position: absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; +} +.container .container__main_items .container__main_items__post .container__main_items__post2 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post3 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/style.scss new file mode 100644 index 000000000..f89fa2c1e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/style.scss @@ -0,0 +1,393 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; + + &__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; + + + &__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; + } + .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); + } + .green--color:hover { + background-color: green; + } + .purple--color:hover { + background-color: purple; + } + .orange--color:hover { + background-color: orange; + } + .blue--me:hover { + background-color: blue; + } + &__apps:hover .popup--me { + opacity: 1; + } + &__apps:hover .popup--green { + opacity: 1; + } + &__apps:hover .popup--purple { + opacity: 1; + } + &__apps:hover .popup--orange { + opacity: 1; + } + } + .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); + } + .container__scroller__apps:hover { + border-radius: 25%; + } + .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; + } + .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .web { + width: inherit; + border-radius: 50%; + } + &__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; + + &__friends { + color: aliceblue; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; + + .friends-icon { + width: 20px; + height: 115px; + } + } + &__friends:hover{ + transform: scale(0.9); + transition: transform ease-in .2s ; + cursor: pointer; + text-align: center; + background-color:#1a1a1a; + + } + &__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; + .nitro-icon { + width: 20px; + height: 115px; + } + } + .direct { + font-size: 14px; + } + } + #searchbar { + background-color: #1a1a1a; + color: aliceblue; + font-size: 11px; + border: 2px solid red; + } + #btn_search{ + width: 150px; + margin: -15px; + background-color:#b3b3b3 + } + .divider2 { + // position: absolute; + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; + } + + &__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; + } + .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; + } + &__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; + } + .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; + } + &__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; + } + .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; + } + .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; + &__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + // border: 2px solid red; + justify-content: center; + font-size: 7px; + } + &__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; + } + .divider3 { + + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; + } + .container__main_items__post{ + display: flex; + flex-direction: columns; + justify-content: center; + + .container__main_items__post1 { + position:absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; + // background-image: url(); + // background-repeat: no-repeat; + // background-size: 100% 100%; + } + .container__main_items__post2 { + position:absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + // background-image: url(); + background-repeat: no-repeat; + background-size: 100% 100%; + + + } + .container__main_items__post3 { + position:absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + // background-image: url(); + background-size: cover; + background-position: center; + } + } + + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/view.ts new file mode 100644 index 000000000..e8afcab1a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Itai-G/view.ts @@ -0,0 +1 @@ +const addServer = document.querySelector(`#addServer`) as HTMLButtonElement \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/control.ts b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/control.ts new file mode 100644 index 000000000..d9fc2f635 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/control.ts @@ -0,0 +1,30 @@ +function createAccount() { + try { + const userName = prompt(`please enter your User Name`) + const userPassword = prompt(`please enter your Password`) + const userEmail = prompt(`please enter your Email Address`) + if (!userName || !userPassword || !userEmail) throw new Error(`error`) + user.push(new Users(userName, userPassword, userEmail)) + } catch (error) { + console.error(error) + } +} + + + +let addfriend: HTMLHeadingElement | null = document.querySelector(`#addFriends`); +function friendsBtn() { + try { + document.getElementById(`addFriends`)!.innerHTML= "" + document.getElementById(`addFriends`)!.innerHTML=` +
                  +
                • ROY2000(#32556)

                  • +
                • kilerGameing(#14596)

                  • +
                • Sports(#585)

                  • +
                • School(#4896)
                  • +
                ` + + } catch (error) { + console.log(error) + } + } diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/control.js b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/control.js new file mode 100644 index 000000000..ba6accf04 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/control.js @@ -0,0 +1,23 @@ +function createAccount() { + try { + var userName = prompt("please enter your User Name"); + var userPassword = prompt("please enter your Password"); + var userEmail = prompt("please enter your Email Address"); + if (!userName || !userPassword || !userEmail) + throw new Error("error"); + user.push(new Users(userName, userPassword, userEmail)); + } + catch (error) { + console.error(error); + } +} +var addfriend = document.querySelector("#addFriends"); +function friendsBtn() { + try { + document.getElementById("addFriends").innerHTML = ""; + document.getElementById("addFriends").innerHTML = "\n
                  \n
                • ROY2000(#32556)

                  • \n
                • kilerGameing(#14596)

                  • \n
                • Sports(#585)

                  • \n
                • School(#4896)
                  • \n
                "; + } + catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/helpers.js b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/helpers.js new file mode 100644 index 000000000..10446cf72 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/helpers.js @@ -0,0 +1 @@ +// פוקציות + מטודות קטנות לעזר diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/main.js b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/main.js new file mode 100644 index 000000000..0e5daa05e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/main.js @@ -0,0 +1,2 @@ +createAccount(); // הרצת פונקציה +// console.log(user); //קבלת נתונים מהמשתמש בתוך הקונסול diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/model.js new file mode 100644 index 000000000..485ab2b8a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/model.js @@ -0,0 +1,9 @@ +var Users = /** @class */ (function () { + function Users(userName, userPassword, userEmail) { + this.userName = userName; + this.userPassword = userPassword; + this.userEmail = userEmail; + } + return Users; +}()); +var user = []; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/style.css new file mode 100644 index 000000000..0fdf33877 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/style.css @@ -0,0 +1,373 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; +} +.container__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; +} +.container__scroller__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; +} +.container__scroller .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); +} +.container__scroller .green--color:hover { + background-color: green; +} +.container__scroller .purple--color:hover { + background-color: purple; +} +.container__scroller .orange--color:hover { + background-color: orange; +} +.container__scroller .blue--me:hover { + background-color: blue; +} +.container__scroller__apps:hover .popup--me { + opacity: 1; +} +.container__scroller__apps:hover .popup--green { + opacity: 1; +} +.container__scroller__apps:hover .popup--purple { + opacity: 1; +} +.container__scroller__apps:hover .popup--orange { + opacity: 1; +} +.container .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); +} +.container .container__scroller__apps:hover { + border-radius: 25%; +} +.container .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; +} +.container .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .web { + width: inherit; + border-radius: 50%; +} +.container__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; +} +.container__sidebar__friends { + color: aliceblue; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__friends .friends-icon { + width: 20px; + height: 115px; +} +.container__sidebar__friends:hover { + transform: scale(0.9); + transition: transform ease-in 0.2s; + cursor: pointer; + text-align: center; + background-color: #1a1a1a; +} +.container__sidebar__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__nitro .nitro-icon { + width: 20px; + height: 115px; +} +.container__sidebar .direct { + font-size: 14px; +} +.container #searchbar { + background-color: #1a1a1a; + color: aliceblue; + font-size: 11px; + border: 2px solid red; +} +.container #btn_search { + width: 150px; + margin: -15px; + background-color: #b3b3b3; +} +.container .divider2 { + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; +} +.container__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; +} +.container .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; +} +.container .container__main_items__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + justify-content: center; + font-size: 7px; +} +.container .container__main_items__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; +} +.container .container__main_items .divider3 { + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; +} +.container .container__main_items .container__main_items__post { + display: flex; + flex-direction: columns; + justify-content: center; +} +.container .container__main_items .container__main_items__post .container__main_items__post1 { + position: absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; +} +.container .container__main_items .container__main_items__post .container__main_items__post2 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post3 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/view.js new file mode 100644 index 000000000..0ffa6fd7d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/dist/view.js @@ -0,0 +1 @@ +var addServer = document.querySelector("#addServer"); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/helpers.ts b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/helpers.ts new file mode 100644 index 000000000..787e46e15 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/helpers.ts @@ -0,0 +1 @@ +// פוקציות + מטודות קטנות לעזר \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/index.html b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/index.html new file mode 100644 index 000000000..a3998058d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/index.html @@ -0,0 +1,200 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                +
                + +
                +

                Direct messages

                +
                +
                +
                +
                + +
                +

                Add a Server

                +
                +
                +
                + +
                +

                Explore Public Servers

                +
                +
                +
                + +
                +

                Add a Friends

                +
                +
                +
                + +
                +

                Web

                +
                +
                +
                + +
                +

                Download Apps

                +
                +
                +
                +
                + + +
                +
                + +
                +
                + +

                Nitro

                +
                + Direct Messages + +
                + + Grizz0 +
                +
                + + Andy +
                +
                + + Aaron +
                +
                +
                +

                Friends

                +

                Onlin

                +

                All

                +

                pending

                +
                +

                suggestions

                +
                +

                blocked

                +
                +

                Add Friends

                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/main.ts b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/main.ts new file mode 100644 index 000000000..bddef5838 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/main.ts @@ -0,0 +1,5 @@ +createAccount();// הרצת פונקציה +// console.log(user); //קבלת נתונים מהמשתמש בתוך הקונסול + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/model.ts new file mode 100644 index 000000000..8044d9c5d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/model.ts @@ -0,0 +1,5 @@ +class Users{ + constructor(public userName:string, public userPassword, public userEmail:string){} +} + +const user:Users []=[]; \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/style.css b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/style.css new file mode 100644 index 000000000..3b4cd0a53 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/style.css @@ -0,0 +1,381 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; +} + +.container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; +} +.container__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; +} +.container__scroller__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; +} +.container__scroller .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); +} +.container__scroller .green--color:hover { + background-color: green; +} +.container__scroller .purple--color:hover { + background-color: purple; +} +.container__scroller .orange--color:hover { + background-color: orange; +} +.container__scroller .blue--me:hover { + background-color: blue; +} +.container__scroller__apps:hover .popup--me { + opacity: 1; +} +.container__scroller__apps:hover .popup--green { + opacity: 1; +} +.container__scroller__apps:hover .popup--purple { + opacity: 1; +} +.container__scroller__apps:hover .popup--orange { + opacity: 1; +} +.container .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); +} +.container .container__scroller__apps:hover { + border-radius: 25%; +} +.container .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; +} +.container .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; +} +.container .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; +} +.container .web { + width: inherit; + border-radius: 50%; +} +.container__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; +} +.container__sidebar__friends { + color: aliceblue; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__friends .friends-icon { + width: 20px; + height: 115px; +} +.container__sidebar__friends:hover { + transform: scale(0.9); + transition: transform ease-in 0.2s; + cursor: pointer; + text-align: center; + background-color: #1a1a1a; +} +.container__sidebar__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; +} +.container__sidebar__nitro .nitro-icon { + width: 20px; + height: 115px; +} +.container__sidebar .direct { + font-size: 14px; +} +.container #searchbar { + background-color: #1a1a1a; + color: aliceblue; + font-size: 11px; + border: 2px solid red; +} +.container #btn_search { + width: 150px; + margin: -15px; + background-color: #b3b3b3; +} +.container .divider2 { + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; +} +.container__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; +} +.container .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; +} +.container .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; +} +.container .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; +} +.container .container__main_items__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + justify-content: center; + font-size: 7px; +} +.container .container__main_items__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; +} +.container .container__main_items .divider3 { + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; +} +.container .container__main_items .container__main_items__post { + display: flex; + flex-direction: columns; + justify-content: center; +} +.container .container__main_items .container__main_items__post .container__main_items__post1 { + position: absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; +} +.container .container__main_items .container__main_items__post .container__main_items__post2 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + background-repeat: no-repeat; + background-size: 100% 100%; +} +.container .container__main_items .container__main_items__post .container__main_items__post3 { + position: absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/style.scss new file mode 100644 index 000000000..f9eb20a7a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/style.scss @@ -0,0 +1,394 @@ +body { + width: auto; + min-height: 90vh; + padding: auto; + margin: auto; + font-family: Verdana; + font-size: 12px; + color: white; + box-sizing: border-box; + overflow-y: scroller; + } + + + .container { + display: flex; + min-height: 150vh; + width: 100%; + height: 100%; + padding-left: 15px; + box-sizing: border-box; + background-color: #333333; + padding: 0%; + position: absolute; + overflow-y: scroll; + + &__scroller { + background-color: #000000; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 2rem; + min-height: 100%; + position: absolute; + box-sizing: border-box; + height: 1500px; + + + &__apps { + background: #b3b3b3; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-radius 128ms, background 128ms; + display: flex; + align-items: center; + justify-content: center; + } + .divider { + width: 100%; + background-color: lightgray; + height: 2px; + border-radius: 1px; + opacity: 0.5; + transform: scale(0.75); + } + .green--color:hover { + background-color: green; + } + .purple--color:hover { + background-color: purple; + } + .orange--color:hover { + background-color: orange; + } + .blue--me:hover { + background-color: blue; + } + &__apps:hover .popup--me { + opacity: 1; + } + &__apps:hover .popup--green { + opacity: 1; + } + &__apps:hover .popup--purple { + opacity: 1; + } + &__apps:hover .popup--orange { + opacity: 1; + } + } + .container__scroller__apps:hover::before { + transform: translate(-100%, -50%) scale(0.5); + } + .container__scroller__apps:hover { + border-radius: 25%; + } + .container__scroller__apps::before { + width: 100%; + height: 100%; + content: ""; + transform: translate(-100%, -50%) scale(0); + position: absolute; + background-color: white; + border-radius: 4px; + top: 50%; + transition: transform 180ms; + } + .popup--me { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--green { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--purple { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--orange { + background-color: black; + position: absolute; + padding: 0.68rem 1rem 1rem 1rem; + top: 50%; + left: 154%; + width: max-content; + border-radius: 15px; + transform: translateY(-50%); + opacity: 0; + pointer-events: none; + } + .popup--me::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--green::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--purple::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .popup--orange::before { + position: absolute; + background: black; + width: 24px; + left: -2px; + top: 50%; + content: ""; + height: 24px; + transform: translateY(-50%) rotate(45deg); + z-index: -1; + } + .web { + width: inherit; + border-radius: 50%; + } + &__sidebar { + background-color: #1a1a1a; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + height: 1500px; + width: 210px; + margin-left: 70px; + box-sizing: border-box; + min-height: 100%; + + &__friends { + color: aliceblue; + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; + + .friends-icon { + width: 20px; + height: 115px; + } + } + &__friends:hover{ + transform: scale(0.9); + transition: transform ease-in .2s ; + cursor: pointer; + text-align: center; + background-color:#1a1a1a; + + } + &__nitro { + background-color: #1a1a1a; + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + cursor: pointer; + margin-top: -15px; + .nitro-icon { + width: 20px; + height: 115px; + } + } + .direct { + font-size: 14px; + } + } + #searchbar { + background-color: #1a1a1a; + color: aliceblue; + font-size: 11px; + border: 2px solid red; + } + #btn_search{ + width: 150px; + margin: -15px; + background-color:#b3b3b3 + } + .divider2 { + // position: absolute; + width: 100%; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: -10px; + } + + &__player1 { + height: 45px; + width: 200px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + border: none; + font-size: 16px; + margin-top: -15px; + } + .avatar-p1 { + width: 30px; + height: 30px; + border-radius: 50%; + } + &__player2 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; + } + .avatar-p2 { + width: 30px; + height: 30px; + border-radius: 50%; + } + &__player3 { + width: 15px; + border: 1px solid red; + height: 15px; + border-radius: 50%; + } + .avatar-p3 { + width: 30px; + height: 30px; + border-radius: 50%; + } + .container__main_items { + margin-top: 20px; + display: flex; + flex-direction: rows; + &__items { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + // border: 2px solid red; + justify-content: center; + font-size: 7px; + } + &__items__addfriends { + display: flex; + flex-direction: row; + width: 170px; + height: 40px; + border: 2px solid green; + background-color: green; + justify-content: center; + font-size: 7px; + } + .divider3 { + + width: 1200px; + background-color: lightgray; + opacity: 0.5; + height: 2px; + margin-top: 60px; + margin-left: -74.5rem; + } + .container__main_items__post{ + display: flex; + flex-direction: columns; + justify-content: center; + + .container__main_items__post1 { + position:absolute; + width: 1150px; + height: 300px; + border: 2px solid black; + top: 150px; + left: 320px; + // background-image: url(); + // background-repeat: no-repeat; + // background-size: 100% 100%; + } + .container__main_items__post2 { + position:absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 550px; + left: 320px; + // background-image: url(); + background-repeat: no-repeat; + background-size: 100% 100%; + + + } + .container__main_items__post3 { + position:absolute; + width: 1150px; + height: 350px; + border: 2px solid black; + top: 1050px; + left: 320px; + // background-image: url(); + background-size: cover; + background-position: center; + } + } + + } + } + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/view.ts new file mode 100644 index 000000000..e8afcab1a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/ItayAmosi/view.ts @@ -0,0 +1 @@ +const addServer = document.querySelector(`#addServer`) as HTMLButtonElement \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/controler.ts b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/controler.ts new file mode 100644 index 000000000..5fc1133a3 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/controler.ts @@ -0,0 +1,48 @@ +function getCall(): Call { + return new Call(makeString(5), "August 19, 23:15:30", "in", "video", "htttp://contactPicture.com"); +} + +function renderCalls(calls: Call[]): void { + try { + + let html = `
                `; + + for (let i = 0; i < calls.length; i++) { + html += `
                +
                + +
                +
                +
                + ${calls[i].name} +
                +
                +
                + +
                +
                + ${calls[i].date} +
                +
                + +
                +
                +
                + +
                + +
                + +
                ` + } + html += "
                " + + const rootCallList = document.querySelector("#test"); + if (!rootCallList) throw new Error("couldnt find root element of call list"); + rootCallList.innerHTML = html; + + } catch (error) { + console.error(error); + } +} + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/design.md b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/design.md new file mode 100644 index 000000000..e729e0058 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/design.md @@ -0,0 +1,6 @@ + +WhatsApp calls screen: + +The View is responsible for displaying the data to the user. In WhatsApp, the View would include the screen of the last calls. The view also handle the user's actions and inputs. + +The Controller is responsible for handling the communication between the Model and the View. It receives input from the DB and updates the Model accordingly, and also updates the View to reflect any changes in the Model. In WhatsApp, the Controller would include classes such as CallManager, which handle the creation and management of calls. diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/controler.js b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/controler.js new file mode 100644 index 000000000..1ce8990dc --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/controler.js @@ -0,0 +1,19 @@ +function getCall() { + return new Call(makeString(5), "August 19, 23:15:30", "in", "video", "htttp://contactPicture.com"); +} +function renderCalls(calls) { + try { + var html = "
                "; + for (var i = 0; i < calls.length; i++) { + html += "
                \n
                \n \n
                \n
                \n
                \n " + calls[i].name + "\n
                \n
                \n
                \n \n
                \n
                \n " + calls[i].date + "\n
                \n
                \n \n
                \n
                \n
                \n \n
                \n\n
                \n \n
                "; + } + html += "
                "; + var rootCallList = document.querySelector("#test"); + if (!rootCallList) + throw new Error("couldnt find root element of call list"); + rootCallList.innerHTML = html; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/helper.js b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/helper.js new file mode 100644 index 000000000..113bc69d1 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/helper.js @@ -0,0 +1,9 @@ +function makeString(length) { + var result = ''; + var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + var charactersLength = characters.length; + for (var i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + } + return result; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/index.js b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..4fbaf1bbb --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/index.js @@ -0,0 +1,5 @@ +for (var i = 0; i < 9; i++) { + calls.push(getCall()); +} +console.log(calls); +renderCalls(calls); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/model.js new file mode 100644 index 000000000..a40610646 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/model.js @@ -0,0 +1,11 @@ +var Call = /** @class */ (function () { + function Call(name, date, direction, type, contactPicture) { + this.name = name; + this.date = date; + this.direction = direction; + this.type = type; + this.contactPicture = contactPicture; + } + return Call; +}()); +var calls = []; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/style.css new file mode 100644 index 000000000..dc33dd617 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/style.css @@ -0,0 +1,196 @@ +.wrapper { + width: 400px; + height: 750px; + border-radius: 30px; + background-color: #0b0909; + margin: auto; +} +.wrapper__topMenu { + width: 100%; + height: 30px; + background-color: #21473f; + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.wrapper__topMenu__phoneStatus { + width: 100%; + height: 20px; + background-color: #164030; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; +} +.wrapper__topMenu__phoneStatus__clock { + width: 25px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__clock p { + color: white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus { + height: 25px; + width: 80px; + display: flex; + justify-content: space-between; + margin-right: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon i { + color: white; +} +.wrapper__centerMenu { + width: 100%; + height: 25px; + display: flex; + justify-content: space-between; + background-color: #21473f; + padding-top: 10px; + color: white; + margin: 0; + font-size: large; +} +.wrapper__centerMenu__whatsappLogo { + padding-left: 10px; +} +.wrapper__centerMenu__rigthIcons { + width: 50px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__centerMenu__rigthIcons__searchIcon { + width: 25px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__searchIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__menuIcon { + width: 20px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__menuIcon i { + color: white; +} +.wrapper__bottomMenu { + width: 100%; + height: 30px; + display: flex; + justify-content: space-between; + background-color: #21473f; + font-size: small; + padding-top: 10px; +} +.wrapper__bottomMenu__cameraIcon { + width: 70px; + height: 30px; + color: white; + padding-left: 20px; +} +.wrapper__bottomMenu__chatMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__statusMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__callsMenu { + width: 70px; + height: 30px; + color: white; + text-decoration: underline 2px; + text-decoration-color: white; +} +.wrapper__callsList { + width: 100%; + height: 640px; + background-color: white; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; +} +.wrapper__callsList__call1 { + width: 100%; + height: 70px; + border: 1px solid rgba(89, 86, 86, 0.181); + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__leftItem { + width: 70px; + height: 70px; +} +.wrapper__callsList__call1__leftItem i { + color: #4bc64b; + font-size: 3em; + padding-left: 10px; + padding-top: 10px; +} +.wrapper__callsList__call1__leftItem--red { + color: #bb2f2f; +} +.wrapper__callsList__call1__centerItems { + width: 200px; + height: 70px; + margin-right: 90px; +} +.wrapper__callsList__call1__centerItems__userName { + width: 90px; + height: 30px; + padding-top: 10px; + font-weight: bold; +} +.wrapper__callsList__call1__centerItems__bottom { + width: 150px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon { + width: 30px; + height: 30px; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon i { + color: green; +} +.wrapper__callsList__call1__centerItems__bottom__callTime { + width: 170px; + height: 30px; + color: gray; +} +.wrapper__callsList__call1__rigthItems__videoIcon { + border: none; + width: 30px; + height: 30px; + margin-top: 25px; + margin-right: 5px; +} +.wrapper__callsList__call1__rigthItems__videoIcon i { + color: #4bc64b; + font-size: 20px; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/helper.ts b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/helper.ts new file mode 100644 index 000000000..290a868f6 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/helper.ts @@ -0,0 +1,9 @@ +function makeString(length): string { + let result = ''; + let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let charactersLength = characters.length; + for (let i = 0; i < length; i++) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + } + return result; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/index.html b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/index.html new file mode 100644 index 000000000..9697734fc --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/index.html @@ -0,0 +1,77 @@ + + + + + + + Document + + + + + + + + + +
                +
                +
                +
                +

                12:45

                +
                + +
                +
                + +
                +
                + +
                +
                + +
                +
                +
                +
                + +
                + +
                +
                + +
                +
                + +
                +
                +
                + +
                +
                + +
                +
                + CHATS +
                +
                + STATUS +
                +
                + CALLS +
                +
                + +
                + +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..2b72a1a58 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/index.ts @@ -0,0 +1,7 @@ + +for (let i = 0; i < 9; i++) { + calls.push(getCall()); +} + +console.log(calls); +renderCalls(calls); \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/model.ts new file mode 100644 index 000000000..ff65773ca --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/model.ts @@ -0,0 +1,11 @@ +class Call { + constructor( + public name: string, + public date: string, + public direction: string, + public type: string, + public contactPicture: string + ) { } +} + +const calls: Call[] = []; \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/style.css new file mode 100644 index 000000000..017a5c4a5 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/style.css @@ -0,0 +1,198 @@ +.wrapper { + width: 400px; + height: 750px; + border-radius: 30px; + background-color: rgb(11, 9, 9); + margin: auto; +} +.wrapper__topMenu { + width: 100%; + height: 30px; + background-color: rgb(33, 71, 63); + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.wrapper__topMenu__phoneStatus { + width: 100%; + height: 20px; + background-color: rgb(22, 64, 48); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; +} +.wrapper__topMenu__phoneStatus__clock { + width: 25px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__clock p { + color: white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus { + height: 25px; + width: 80px; + display: flex; + justify-content: space-between; + margin-right: 10px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__wifiIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__dataIcon i { + color: white; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon { + width: 20px; + height: 25px; +} +.wrapper__topMenu__phoneStatus__rightStatus__batteryIcon i { + color: white; +} +.wrapper__centerMenu { + width: 100%; + height: 25px; + display: flex; + justify-content: space-between; + background-color: rgb(33, 71, 63); + padding-top: 10px; + color: white; + margin: 0; + font-size: large; +} +.wrapper__centerMenu__whatsappLogo { + padding-left: 10px; +} +.wrapper__centerMenu__rigthIcons { + width: 50px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__centerMenu__rigthIcons__searchIcon { + width: 25px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__searchIcon i { + color: white; +} +.wrapper__centerMenu__rigthIcons__menuIcon { + width: 20px; + height: 30px; +} +.wrapper__centerMenu__rigthIcons__menuIcon i { + color: white; +} +.wrapper__bottomMenu { + width: 100%; + height: 30px; + display: flex; + justify-content: space-between; + background-color: rgb(33, 71, 63); + font-size: small; + padding-top: 10px; +} +.wrapper__bottomMenu__cameraIcon { + width: 70px; + height: 30px; + color: white; + padding-left: 20px; +} +.wrapper__bottomMenu__chatMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__statusMenu { + width: 70px; + height: 30px; + color: white; +} +.wrapper__bottomMenu__callsMenu { + width: 70px; + height: 30px; + color: white; + -webkit-text-decoration: underline 2px; + text-decoration: underline 2px; + -webkit-text-decoration-color: white; + text-decoration-color: white; +} +.wrapper__callsList { + width: 100%; + height: 640px; + background-color: white; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; +} +.wrapper__callsList__call1 { + width: 100%; + height: 70px; + border: 1px solid rgba(89, 86, 86, 0.181); + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__leftItem { + width: 70px; + height: 70px; +} +.wrapper__callsList__call1__leftItem i { + color: rgb(75, 198, 75); + font-size: 3em; + padding-left: 10px; + padding-top: 10px; +} +.wrapper__callsList__call1__leftItem--red { + color: rgb(187, 47, 47); +} +.wrapper__callsList__call1__centerItems { + width: 200px; + height: 70px; + margin-right: 90px; +} +.wrapper__callsList__call1__centerItems__userName { + width: 90px; + height: 30px; + padding-top: 10px; + font-weight: bold; +} +.wrapper__callsList__call1__centerItems__bottom { + width: 150px; + height: 30px; + display: flex; + justify-content: space-between; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon { + width: 30px; + height: 30px; +} +.wrapper__callsList__call1__centerItems__bottom__arrowIcon i { + color: green; +} +.wrapper__callsList__call1__centerItems__bottom__callTime { + width: 170px; + height: 30px; + color: gray; +} +.wrapper__callsList__call1__rigthItems__videoIcon { + border: none; + width: 30px; + height: 30px; + margin-top: 25px; + margin-right: 5px; +} +.wrapper__callsList__call1__rigthItems__videoIcon i { + color: rgb(75, 198, 75); + font-size: 20px; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/style.scss new file mode 100644 index 000000000..269ecdbb7 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/style.scss @@ -0,0 +1,282 @@ + + +.wrapper{ + width: 400px; + height: 750px; + border-radius: 30px; + background-color: rgb(11, 9, 9); + margin: auto; + + &__topMenu{ + width: 100%; + height: 30px; + background-color: rgb(33, 71, 63); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + // padding-top: 50px + + &__phoneStatus{ + width: 100%; + height: 20px; + background-color: rgb(22, 64, 48); + border-top-left-radius: 30px; + border-top-right-radius: 30px; + padding-top: 5px; + display: flex; + justify-content: space-between; + + &__clock{ + width: 25px; + height: 25px; + // border: 2px solid yellow; + + p{ + color:white; + height: 100%; + width: 100%; + margin-top: 2px; + margin-left:10px; + } + } + + &__rightStatus{ + height: 25px; + width:80px; + // border: 2px solid yellow; + display: flex; + justify-content: space-between; + margin-right: 10px; + + &__wifiIcon{ + width: 20px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + + } + + &__dataIcon{ + width: 20px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + + } + + &__batteryIcon{ + width: 20px; + height: 25px; + // border: 2px solid yellow; + + i{ + color: white; + } + + } + } + + } + } + + + &__centerMenu{ + width: 100%; + height: 25px; + display: flex; + justify-content: space-between; + background-color: rgb(33, 71, 63); + padding-top: 10px; + color: white; + margin:0; + font-size: large; + + + &__whatsappLogo{ + padding-left: 10px; + } + + + &__rigthIcons{ + width:50px; + height: 30px; + display: flex; + justify-content: space-between; + // border: 2px solid rgb(32, 7, 130); + + &__searchIcon{ + width: 25px; + height: 30px; + // border: 2px solid yellow; + + i{ + color: white; + } + } + + &__menuIcon{ + width: 20px; + height: 30px; + // border: 2px solid rgb(130, 7, 85); + + i{ + color: white; + } + } + } + } + + + &__bottomMenu{ + width:100%; + height: 30px; + display: flex; + justify-content:space-between; + background-color: rgb(33, 71, 63); + font-size: small; + padding-top: 10px; + + + &__cameraIcon{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + padding-left: 20px; + // padding-top: 15px; + } + + &__chatMenu{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + } + + &__statusMenu{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + } + + &__callsMenu{ + width:70px; + height: 30px; + // border: 2px solid rgb(32, 7, 130); + color: white; + text-decoration: underline 2px; + text-decoration-color: white; + + // &--CALLS{ + // text-decoration: underline; + // text-decoration-color: white; + // } + } + + } + + + &__callsList{ + width: 100%; + height: 640px; + background-color: white; + // border: 1px solid rgb(130, 7, 120); + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + + &__call1{ + width: 100%; + height: 70px; + border: 1px solid rgba(89, 86, 86, 0.181); + display: flex; + justify-content: space-between; + + &__leftItem{ + width: 70px; + height: 70px; + // border: 1px solid rgb(130, 7, 120); + + i{ + color: rgb(75, 198, 75); + font-size: 3em; + padding-left: 10px; + padding-top: 10px; + } + + &--red{ + color: rgb(187, 47, 47); + } + } + + &__centerItems{ + width: 200px; + height:70px; + // border: 3px solid rgb(17, 7, 130); + margin-right: 90px; + + &__userName{ + width: 90px; + height: 30px; + padding-top: 10px; + font-weight: bold; + // border: 3px solid rgb(217, 14, 14); + } + + &__bottom{ + width: 150px; + height: 30px; + display: flex; + justify-content: space-between; + + &__arrowIcon{ + width: 30px; + height: 30px; + // border: 3px solid rgb(217, 45, 14); + + + i{ + color: green; + } + } + + &__callTime{ + width: 170px; + height: 30px; + // border: 3px solid rgb(214, 217, 14); + color: gray; + // border: 3px solid rgb(96, 17, 14); + } + } + + + } + + &__rigthItems{ + &__videoIcon{ + // border: 3px solid rgb(147, 18, 176); + border:none; + width: 30px; + height: 30px; + margin-top: 25px; + margin-right: 5px; + + i{ + color: rgb(75, 198, 75); + font-size: 20px; + } + + + } + + } + + } + + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/Karin-levi/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Kseniya/mvc-google.md b/02-TypeScript/12-MVC/Home-Puzzles/Kseniya/mvc-google.md new file mode 100644 index 000000000..fa29a7434 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Kseniya/mvc-google.md @@ -0,0 +1,15 @@ +the app I chose is Google + +Model: +is the data holder and doesn't have any actions of it's own. +it gives information to the controller via get requests or gets updated via set / delete requests from the controller + +Controller: +will hold of the logical opertaions, in this case: + it will make http requests to the db -> search() + it will send the recieved data to the view to display + +View: +will display the information that the controller sends it. +also cathes events that happen via event listners +it will search the data that was inputed into the search bar -> onClick={search()} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/mvc.md b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/mvc.md new file mode 100644 index 000000000..18bbb59bd --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/mvc.md @@ -0,0 +1,15 @@ +ToDo List + +Model: + +1. Contain the tasks classes + +Controller: + +1. Receive an input from the user for the description. +2. Adds a new task to the view. +3.Renders the new tasks to the view + +views: + +1. Catching all the todo containers. diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/controller.js b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/controller.js new file mode 100644 index 000000000..f4adbde4f --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/controller.js @@ -0,0 +1,17 @@ +function createNewTask(addTask) { + var title = prompt('Please enter a title'); + var description = prompt('Please enter a description'); + if (title && description && addTask) { + var task = "
                \n

                " + title + "

                \n

                " + description + "

                \n \n
                "; + addTask.innerHTML += task; + } +} +tasks1Button === null || tasks1Button === void 0 ? void 0 : tasks1Button.addEventListener('click', function (addTasks1) { + createNewTask(tasks1); +}); +tasks2Button === null || tasks2Button === void 0 ? void 0 : tasks2Button.addEventListener('click', function (addTasks2) { + createNewTask(tasks2); +}); +tasks3Button === null || tasks3Button === void 0 ? void 0 : tasks3Button.addEventListener('click', function (addTasks3) { + createNewTask(tasks3); +}); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/model.js b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/model.js new file mode 100644 index 000000000..8bd151f63 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/model.js @@ -0,0 +1,8 @@ +var tasksArray = []; +var Task = /** @class */ (function () { + function Task(name, description) { + this.name = name; + this.description = description; + } + return Task; +}()); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/views.js b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/views.js new file mode 100644 index 000000000..08c90a74d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/scripts/views.js @@ -0,0 +1,6 @@ +var tasks1 = document.querySelector('#tasks1'); +var tasks2 = document.querySelector('#tasks2'); +var tasks3 = document.querySelector('#tasks3'); +var tasks1Button = document.querySelector('#tasks1Button'); +var tasks2Button = document.querySelector('#tasks2Button'); +var tasks3Button = document.querySelector('#tasks3Button'); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/styles/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..194127857 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,74 @@ +body { + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; +} + +.navTitle { + background-color: dimgray; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; +} +.navTitle h1 { + padding: 0; + margin: 0; +} + +.tasksContainer { + width: 100vw; + height: 100vh; + display: flex; + align-items: flex-start; + justify-content: flex-start; + background-image: url("https://cdn.pixabay.com/photo/2022/11/14/10/49/mountains-7591326_960_720.jpg"); + background-size: cover; +} +.tasksContainer .taskContainer { + margin-left: 20px; + margin-top: 20px; + width: 300px; + height: auto; + gap: 15px; + background-color: #ececec; + border-radius: 10px; +} +.tasksContainer .taskContainer button { + margin: 5px; +} +.tasksContainer .taskContainer .title { + margin: 5px; + width: 96%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.048); +} +.tasksContainer .taskContainer .task { + display: flex; + flex-direction: column; + justify-content: space-around; + margin: 5px; + gap: 10px; + width: 96%; + height: auto; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.048); +} +.tasksContainer .taskContainer .task p { + padding: 0; + margin: 0; +} +.tasksContainer .taskContainer .task button { + position: relative; + width: 50%; + margin: auto; + bottom: 4px; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/controller.ts b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/controller.ts new file mode 100644 index 000000000..c2138d053 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/controller.ts @@ -0,0 +1,25 @@ + +function createNewTask(addTask){ + const title = prompt('Please enter a title') + const description = prompt('Please enter a description') + if(title && description && addTask){ + let task = `
                +

                ${title}

                +

                ${description}

                + +
                `; + + + addTask.innerHTML += task; + } +} + +tasks1Button?.addEventListener('click', addTasks1 => { + createNewTask(tasks1) +}) +tasks2Button?.addEventListener('click', addTasks2 => { + createNewTask(tasks2) +}) +tasks3Button?.addEventListener('click', addTasks3 => { + createNewTask(tasks3) +}) \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..fff5fd1c3 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,55 @@ + + + + + + + + Document + + +

                ToDo List

                +
                +
                +

                Development

                +
                +
                +

                Task name

                +

                Task description

                + +
                +
                + +
                + +
                +

                Style

                +
                +
                +

                Task name

                +

                Task description

                + +
                +
                + +
                + +
                +

                Animations

                +
                +
                +

                Task name

                +

                Task description

                + +
                +
                + +
                +
                +
                + + + + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/model.ts new file mode 100644 index 000000000..f487d988e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/model.ts @@ -0,0 +1,4 @@ +const tasksArray:Array = [] +class Task { + constructor(public name: string, public description: string) {} +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/style.css new file mode 100644 index 000000000..1e6a3f46c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/style.css @@ -0,0 +1,74 @@ +body { + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; +} + +.navTitle { + background-color: rgb(105, 105, 105); + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; +} +.navTitle h1 { + padding: 0; + margin: 0; +} + +.tasksContainer { + width: 100vw; + height: 100vh; + display: flex; + align-items: flex-start; + justify-content: flex-start; + background-image: url("https://cdn.pixabay.com/photo/2022/11/14/10/49/mountains-7591326_960_720.jpg"); + background-size: cover; +} +.tasksContainer .taskContainer { + margin-left: 20px; + margin-top: 20px; + width: 300px; + height: auto; + gap: 15px; + background-color: rgb(236, 236, 236); + border-radius: 10px; +} +.tasksContainer .taskContainer button { + margin: 5px; +} +.tasksContainer .taskContainer .title { + margin: 5px; + width: 96%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.048); +} +.tasksContainer .taskContainer .task { + display: flex; + flex-direction: column; + justify-content: space-around; + margin: 5px; + gap: 10px; + width: 96%; + height: auto; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.048); +} +.tasksContainer .taskContainer .task p { + padding: 0; + margin: 0; +} +.tasksContainer .taskContainer .task button { + position: relative; + width: 50%; + margin: auto; + bottom: 4px; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..ee891d260 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/style.scss @@ -0,0 +1,80 @@ +body { + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; +} + +.navTitle{ + background-color: rgb(105, 105, 105); + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + + h1{ + padding: 0; + margin: 0; + } +} + +.tasksContainer { + width: 100vw; + height: 100vh; + display: flex; + align-items:flex-start; + justify-content: flex-start; + background-image: url("https://cdn.pixabay.com/photo/2022/11/14/10/49/mountains-7591326_960_720.jpg"); + background-size:cover; + + .taskContainer{ + margin-left: 20px; + margin-top: 20px; + width: 300px; + height: auto; + gap: 15px; + background-color: rgb(236, 236, 236); + border-radius: 10px; + button { + margin: 5px; + } + .title { + margin: 5px; + width: 96%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.048); + } + .task { + display: flex; + flex-direction: column; + justify-content: space-around; + margin: 5px; + gap: 10px; + width: 96%; + height: auto; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.048); + + p{ + padding: 0; + margin: 0; + } + button{ + position: relative; + width: 50%; + margin: auto; + bottom: 4px; + + } + } + + + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/views.ts b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/views.ts new file mode 100644 index 000000000..6b8d3b09f --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Nikita Rossenko/src/views.ts @@ -0,0 +1,7 @@ +const tasks1:HTMLDivElement | null = document.querySelector('#tasks1') +const tasks2:HTMLDivElement | null = document.querySelector('#tasks2') +const tasks3:HTMLDivElement | null = document.querySelector('#tasks3') + +const tasks1Button:HTMLDivElement | null = document.querySelector('#tasks1Button') +const tasks2Button:HTMLDivElement | null = document.querySelector('#tasks2Button') +const tasks3Button:HTMLDivElement | null = document.querySelector('#tasks3Button') \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/controls.ts b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/controls.ts new file mode 100644 index 000000000..7012fb05e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/controls.ts @@ -0,0 +1,34 @@ + +try { + if (!btn) throw new Error("btn empty"); + btn.addEventListener("click", () => { + const div = document.createElement("div"); + div.className = "card__text"; + const p = document.createElement("p"); + p.innerText = input.value; + div.append(p); + if (!input.value) throw new Error("input.value empty"); + + try { + if (!card) throw new Error("card empty"); + card.append(div); + } catch (error) { + console.error(error); + } + input.value = ""; + }) +} catch (error) { + console.error(error); +} + +try { + if(!time) throw new Error("time div not exist"); + const p = document.createElement("p"); + let html = currTime.getHours().toString() + ":" + currTime.getMinutes().toString(); + p.innerText = html; + time.append(p); +} catch (error) { + console.error(error); +} + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/controls.js b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/controls.js new file mode 100644 index 000000000..55193eb57 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/controls.js @@ -0,0 +1,36 @@ +try { + if (!btn) + throw new Error("btn empty"); + btn.addEventListener("click", function () { + var div = document.createElement("div"); + div.className = "card__text"; + var p = document.createElement("p"); + p.innerText = input.value; + div.append(p); + if (!input.value) + throw new Error("input.value empty"); + try { + if (!card) + throw new Error("card empty"); + card.append(div); + } + catch (error) { + console.error(error); + } + input.value = ""; + }); +} +catch (error) { + console.error(error); +} +try { + if (!time) + throw new Error("time div not exist"); + var p = document.createElement("p"); + var html = currTime.getHours().toString() + ":" + currTime.getMinutes().toString(); + p.innerText = html; + time.append(p); +} +catch (error) { + console.error(error); +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/index.js b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/models.js b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/models.js new file mode 100644 index 000000000..7ce0c68cf --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/models.js @@ -0,0 +1,16 @@ +var Text1 = /** @class */ (function () { + function Text1(text) { + this.text = text; + this.date = new Date(); + } + Text1.prototype.getText = function () { + return this.text; + }; + Text1.prototype.getHour = function () { + return this.date.getHours(); + }; + Text1.prototype.getMinutes = function () { + return this.date.getMinutes(); + }; + return Text1; +}()); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/style.css new file mode 100644 index 000000000..60994e8cd --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/style.css @@ -0,0 +1,99 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.card { + overflow-y: scroll; + position: relative; + width: 400px; + height: 100vh; + border: 1px black solid; + margin: 0 auto; +} +.card__top { + background-color: #2a7e32; + display: flex; + flex-direction: column; + margin-bottom: 10px; +} +.card__top__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; +} +.card__top__top__icons { + display: flex; + align-items: center; +} +.card__top__top__icons p { + margin-right: 3px; + margin-left: 5px; +} +.card__top__bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; +} +.card__top__bottom__icons i { + margin-left: 3px; +} +.card__top__bottom__name { + display: flex; + align-items: center; +} +.card__top__bottom__name__name { + margin-right: 3px; +} +.card__top__bottom__name__photo { + border-radius: 50%; + width: 25px; + height: 25px; + position: relative; + background-color: red; + background-image: url(./pexels-pixabay-60597.jpg); +} +.card img { + position: fixed; + margin: 0 auto; + top: 0; + width: 400px; + height: 100%; + z-index: -1; +} +.card__text p { + background-color: white; + padding: 3px 5px; + border-radius: 5px; + border: none; + border-top-left-radius: 0px; + display: inline-block; + margin: 2px 10px; +} +.card__send { + position: fixed; + bottom: 10px; + left: 50%; + transform: translate(-50%); + display: flex; + align-items: center; + justify-content: space-around; + width: 400px; +} +.card__send__icon { + border-radius: 50%; + background-color: #2a7e32; + width: 25px; + height: 25px; + display: grid; + place-items: center; +} +.card__send input { + width: 333px; + border-radius: 10px; + padding: 3px 2px; + border: none; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/view.js new file mode 100644 index 000000000..3fd34c79c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/dist/view.js @@ -0,0 +1,5 @@ +var card = document.querySelector(".card"); +var input = document.getElementById("inputText"); +var btn = document.getElementById("btn"); +var time = document.getElementById("hour"); +var currTime = new Date(); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/index.html b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/index.html new file mode 100644 index 000000000..b833d872c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/index.html @@ -0,0 +1,55 @@ + + + + + + + + Whatsapp + + + + + + + + + + +
                +
                +
                +
                +

                58%

                + +
                +
                +
                +
                +
                + + + +
                +
                +
                +

                Alon

                +
                +
                + +
                +
                +
                +
                +
                +
                + +
                + + +
                + background +
                + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/models.ts b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/models.ts new file mode 100644 index 000000000..97eccd881 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/models.ts @@ -0,0 +1,21 @@ +class Text1 { + private text:string; + private date:Date; + + constructor(text:string) { + this.text = text; + this.date = new Date(); + } + + getText() { + return this.text; + } + + getHour() { + return this.date.getHours(); + } + + getMinutes() { + return this.date.getMinutes(); + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg new file mode 100644 index 000000000..a1e82498e Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/WhatsApp.svg.png b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/WhatsApp.svg.png new file mode 100644 index 000000000..7a55ef2a2 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/WhatsApp.svg.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/pexels-pixabay-60597.jpg b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/pexels-pixabay-60597.jpg new file mode 100644 index 000000000..347bae77e Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/photos/pexels-pixabay-60597.jpg differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/style.css b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/style.css new file mode 100644 index 000000000..255bc96a6 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/style.css @@ -0,0 +1,99 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.card { + overflow-y: scroll; + position: relative; + width: 400px; + height: 100vh; + border: 1px black solid; + margin: 0 auto; +} +.card__top { + background-color: rgb(42, 126, 50); + display: flex; + flex-direction: column; + margin-bottom: 10px; +} +.card__top__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; +} +.card__top__top__icons { + display: flex; + align-items: center; +} +.card__top__top__icons p { + margin-right: 3px; + margin-left: 5px; +} +.card__top__bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; +} +.card__top__bottom__icons i { + margin-left: 3px; +} +.card__top__bottom__name { + display: flex; + align-items: center; +} +.card__top__bottom__name__name { + margin-right: 3px; +} +.card__top__bottom__name__photo { + border-radius: 50%; + width: 25px; + height: 25px; + position: relative; + background-color: red; + background-image: url(./pexels-pixabay-60597.jpg); +} +.card img { + position: fixed; + margin: 0 auto; + top: 0; + width: 400px; + height: 100%; + z-index: -1; +} +.card__text p { + background-color: white; + padding: 3px 5px; + border-radius: 5px; + border: none; + border-top-left-radius: 0px; + display: inline-block; + margin: 2px 10px; +} +.card__send { + position: fixed; + bottom: 10px; + left: 50%; + transform: translate(-50%); + display: flex; + align-items: center; + justify-content: space-around; + width: 400px; +} +.card__send__icon { + border-radius: 50%; + background-color: rgb(42, 126, 50); + width: 25px; + height: 25px; + display: grid; + place-items: center; +} +.card__send input { + width: 333px; + border-radius: 10px; + padding: 3px 2px; + border: none; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/style.scss new file mode 100644 index 000000000..25bedcbaa --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/style.scss @@ -0,0 +1,117 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.card { + overflow-y: scroll; + position: relative; + width: 400px; + height: 100vh; + border: 1px black solid; + margin: 0 auto; + + &__top { + background-color: rgb(42, 126, 50); + display: flex; + flex-direction: column; + margin-bottom: 10px; + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; + + &__icons { + display: flex; + align-items: center; + p { + margin-right: 3px; + margin-left: 5px; + } + } + + &__hour {} + } + + &__bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; + + &__icons { + i { + margin-left: 3px; + } + } + + &__name { + display: flex; + align-items: center; + &__name { + margin-right: 3px; + } + + &__photo { + border-radius: 50%; + width: 25px; + height: 25px; + position: relative; + background-color: red; + background-image: url(./pexels-pixabay-60597.jpg); + } + } + } + } + + img { + position: fixed; + margin: 0 auto; + top: 0; + width: 400px; + height: 100%; + z-index: -1; + } + + &__text { + p { + background-color: white; + padding: 3px 5px; + border-radius: 5px; + border: none; + border-top-left-radius: 0px; + display: inline-block; + margin: 2px 10px; + } + } + + &__send { + position: fixed; + bottom: 10px; + left: 50%; + transform: translate(-50%); + display: flex; + align-items: center; + justify-content: space-around; + width: 400px; + + &__icon { + border-radius: 50%; + background-color: rgb(42, 126, 50); + width: 25px; + height: 25px; + display: grid; + place-items: center; + } + + input { + width: 333px; + border-radius: 10px; + padding: 3px 2px; + border: none; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/view.ts new file mode 100644 index 000000000..fdc36cbe5 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Omer.vir/view.ts @@ -0,0 +1,5 @@ +const card = document.querySelector(".card"); +const input = document.getElementById("inputText"); +const btn = document.getElementById("btn"); +const time = document.getElementById("hour"); +let currTime = new Date(); \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Tanya Holczer/app.md b/02-TypeScript/12-MVC/Home-Puzzles/Tanya Holczer/app.md new file mode 100644 index 000000000..b4933e49d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Tanya Holczer/app.md @@ -0,0 +1,13 @@ +Baby daybook + +Model: The app receives data about everyday baby functions, such as diaper change, sleeping, bottle/breastfeeding amount and duration, temperature, baths, doctor visits, pumping, etc. +It also allows the user to upload photos of these functions and add notes. + +View: The app displays the time of each function, duration and amount per 24 hours. + + +Controller: The app controller handles user input by summing up amounts, calculating trends and displaying them on a timeline and in graphic ways. + +For example: +when the user chooses bottle feeding, the model stores data containing amount fed, and then displays it on the screen. The controller sums up the amount of feedings on this day, the average amount per feeding, displays the trends for the past week/days +and so on. diff --git a/02-TypeScript/12-MVC/Home-Puzzles/Tanya Holczer/index.html b/02-TypeScript/12-MVC/Home-Puzzles/Tanya Holczer/index.html new file mode 100644 index 000000000..56efbdba6 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/Tanya Holczer/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/.vscode/settings.json b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/Controllers.ts b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/Controllers.ts new file mode 100644 index 000000000..3f82e14da --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/Controllers.ts @@ -0,0 +1,167 @@ +// On click starting new game +function newGame() { + resetGame(); + + processPlayerCard(2); + userScore.textContent = sumPlayer.toString(); + + if (sumPlayer == 22) { + sumPlayer = 12; + playerCards[1].cardValue = 1; + } else if (sumPlayer == 21) { + hasBlackJack = true; + userMessage.textContent = "BLACKJACK you win!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } + + userMessage.textContent = "Get another card or Hold"; + + //rendering houses first card, second card remains downside + houseSecondCard.src = "./PNG-cards-1.3/card_back_red.png"; + const houseFirstDraw = new NewCard(); + houseFirstCard.src = houseFirstDraw.cardImageLink; + houseCardsDiv.append(houseFirstCard); + houseCardsDiv.append(houseSecondCard); + sumHouse = houseFirstDraw.cardValue; + houseScore.textContent = sumHouse.toString(); + houseCards.push(houseFirstDraw); +} + +//Initiating computer's turn when pushing HOLD button +function compTurn() { + if (hasBlackJack == true || isAlive == false) { + return; + } + const houseSecondDraw = new NewCard(); + houseSecondCard.src = houseSecondDraw.cardImageLink; + houseCardsDiv.append(houseSecondCard); + houseCards.push(houseSecondDraw); + sumHouse += houseSecondDraw.cardValue; + + // Keeping taking cards until beating or losing against user score + while (sumHouse < sumPlayer) { + processHouseCard(1); + + if (sumHouse > 21) { + for (let i = 0; i < houseCards.length; i++) { + if (houseCards[i].cardValue == 11) { + houseCards[i].cardValue = 1; + sumHouse -= 10; + houseScore.textContent = sumHouse.toString(); + } + } + } + } + + houseScore.textContent = sumHouse.toString(); + + if ( + (sumHouse <= 21 && sumHouse > sumPlayer) || + (sumHouse < 21 && houseCards.length == 5) + ) { + isAlive = false; + userMessage.textContent = "Game over House wins"; + userMessage.style.backgroundColor = "black"; + userMessage.style.textShadow = "none"; + return; + } else if (sumHouse == sumPlayer) { + isAlive = false; + userMessage.textContent = "It's a tie"; + userMessage.style.backgroundColor = "green"; + userMessage.style.textShadow = "none"; + return; + } else { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } +} + +// Giving user another card when clicked 'get a card' +function getCard() { + if (hasBlackJack == true || isAlive == false) { + // userMessage.textContent = "Please start new game" + return; + } else if (userScore.textContent == "0") { + userMessage.textContent = "Start game first"; + return; + } + + processPlayerCard(1); + userScore.textContent = sumPlayer.toString(); + + if (sumPlayer > 21) { + isAlive = false; + for (let i = 0; i < playerCards.length; i++) { + if (playerCards[i].cardValue == 11) { + playerCards[i].cardValue = 1; + sumPlayer -= 10; + userScore.textContent = sumPlayer.toString(); + isAlive = true; + if (sumPlayer == 21 || playerCards.length == 5) { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } + } + } + if (sumPlayer > 21) { + userMessage.textContent = "Game over House wins"; + userMessage.style.backgroundColor = "black"; + userMessage.style.textShadow = "none"; + } + } else if (sumPlayer == 21 || playerCards.length == 5) { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } +} + +function processPlayerCard(amount: number) { + while (amount > 0) { + const newCard = new NewCard(); + playerCards.push(newCard); + sumPlayer += newCard.cardValue; + const newImg = new Image(); + newImg.src = newCard.cardImageLink; + newImg.classList.add("displayedCard"); + userCardsDiv.append(newImg); + amount--; + } +} + +function processHouseCard(amount: number) { + while (amount > 0) { + const newCard = new NewCard(); + houseCards.push(newCard); + sumHouse += newCard.cardValue; + const newImg = new Image(); + newImg.src = newCard.cardImageLink; + newImg.classList.add("displayedCard"); + houseCardsDiv.append(newImg); + amount--; + } +} + +function resetGame() { + copyDeck = CardsDeck(); + sumHouse = 0; + houseScore.textContent = sumHouse.toString(); + sumPlayer = 0; + isAlive = true; + hasBlackJack = false; + userCardsDiv.innerHTML = ""; + playerCards = []; + + houseCardsDiv.innerHTML = ""; + houseCards = []; + userMessage.style.backgroundColor = ""; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/Models.ts b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/Models.ts new file mode 100644 index 000000000..188ede8dc --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/Models.ts @@ -0,0 +1,171 @@ +let copyDeck = CardsDeck(); +let playerCards: NewCard[] = []; +let houseCards: NewCard[] = []; +let sumPlayer: number, sumHouse: number; +let isAlive = true; +let hasBlackJack = false; + +class NewCard { + public cardName: string; + public cardValue: number; + public cardImageLink: string; + constructor() { + this.cardName = this.getRndmCard(); + this.cardValue = this.getCardValue(this.cardName); + this.cardImageLink = this.returnImgLink(this.cardName); + } + + getRndmCard() { + const cardIndex = Math.floor(Math.random() * copyDeck.length); + const card = copyDeck[cardIndex]; + //remove card from deck + copyDeck.splice(cardIndex, 1); + return card; + } + + getCardValue(aCard: string) { + //checks if the drown card is a 10 (second char at card is 0) + if (aCard[1] == "0") { + return 10; + } else if (aCard[0] == "j" || aCard[0] == "q" || aCard[0] == "k") { + return 10; + } else if (aCard[0] == "a") { + return 11; + } else { + return parseInt(aCard[0]); + } + } + returnImgLink(aCard: string): string { + for (let i = 0; i < cardImg.length; i++) { + if (aCard == cardImg[i][0]) { + return cardImg[i][1]; + } + } + return "no image found"; + } +} + +const cardImg: string[][] = [ + ["2d", "./PNG-cards-1.3/2_of_diamonds.png"], + ["3d", "./PNG-cards-1.3/3_of_diamonds.png"], + ["4d", "./PNG-cards-1.3/4_of_diamonds.png"], + ["5d", "./PNG-cards-1.3/5_of_diamonds.png"], + ["6d", "./PNG-cards-1.3/6_of_diamonds.png"], + ["7d", "./PNG-cards-1.3/7_of_diamonds.png"], + ["8d", "./PNG-cards-1.3/8_of_diamonds.png"], + ["9d", "./PNG-cards-1.3/9_of_diamonds.png"], + ["10d", "./PNG-cards-1.3/10_of_diamonds.png"], + ["jd", "./PNG-cards-1.3/jack_of_diamonds2.png"], + ["qd", "./PNG-cards-1.3/queen_of_diamonds2.png"], + ["kd", "./PNG-cards-1.3/king_of_diamonds2.png"], + ["ad", "./PNG-cards-1.3/ace_of_diamonds.png"], + ["2h", "./PNG-cards-1.3/2_of_hearts.png"], + ["3h", "./PNG-cards-1.3/3_of_hearts.png"], + ["4h", "./PNG-cards-1.3/4_of_hearts.png"], + ["5h", "./PNG-cards-1.3/5_of_hearts.png"], + ["6h", "./PNG-cards-1.3/6_of_hearts.png"], + ["7h", "./PNG-cards-1.3/7_of_hearts.png"], + ["8h", "./PNG-cards-1.3/8_of_hearts.png"], + ["9h", "./PNG-cards-1.3/9_of_hearts.png"], + ["10h", "./PNG-cards-1.3/10_of_hearts.png"], + ["jh", "./PNG-cards-1.3/jack_of_hearts2.png"], + ["qh", "./PNG-cards-1.3/queen_of_hearts2.png"], + ["kh", "./PNG-cards-1.3/king_of_hearts2.png"], + ["ah", "./PNG-cards-1.3/ace_of_hearts.png"], + ["2s", "./PNG-cards-1.3/2_of_spades.png"], + ["3s", "./PNG-cards-1.3/3_of_spades.png"], + ["4s", "./PNG-cards-1.3/4_of_spades.png"], + ["5s", "./PNG-cards-1.3/5_of_spades.png"], + ["6s", "./PNG-cards-1.3/6_of_spades.png"], + ["7s", "./PNG-cards-1.3/7_of_spades.png"], + ["8s", "./PNG-cards-1.3/8_of_spades.png"], + ["9s", "./PNG-cards-1.3/9_of_spades.png"], + ["10s", "./PNG-cards-1.3/10_of_spades.png"], + ["js", "./PNG-cards-1.3/jack_of_spades2.png"], + ["qs", "./PNG-cards-1.3/queen_of_spades2.png"], + ["ks", "./PNG-cards-1.3/king_of_spades2.png"], + ["as", "./PNG-cards-1.3/ace_of_spades.png"], + ["2c", "./PNG-cards-1.3/2_of_clubs.png"], + ["3c", "./PNG-cards-1.3/3_of_clubs.png"], + ["4c", "./PNG-cards-1.3/4_of_clubs.png"], + ["5c", "./PNG-cards-1.3/5_of_clubs.png"], + ["6c", "./PNG-cards-1.3/6_of_clubs.png"], + ["7c", "./PNG-cards-1.3/7_of_clubs.png"], + ["8c", "./PNG-cards-1.3/8_of_clubs.png"], + ["9c", "./PNG-cards-1.3/9_of_clubs.png"], + ["10c", "./PNG-cards-1.3/10_of_clubs.png"], + ["jc", "./PNG-cards-1.3/jack_of_clubs2.png"], + ["qc", "./PNG-cards-1.3/queen_of_clubs2.png"], + ["kc", "./PNG-cards-1.3/king_of_clubs2.png"], + ["ac", "./PNG-cards-1.3/ace_of_clubs.png"], +]; + +// function renderUserDownsideCards() { +// const backSideCard1 = new Image(); +// backSideCard1.src = "./PNG-cards-1.3/card_back_red.png"; +// const backSideCard2 = new Image(); +// backSideCard2.src = "./PNG-cards-1.3/card_back_red.png"; +// userCardsDiv.append(backSideCard1); +// userCardsDiv.append(backSideCard2); +// backSideCard1.setAttribute("class", "displayedCard"); +// backSideCard2.setAttribute("class", "displayedCard"); +// } +// renderUserDownsideCards(); + + +function CardsDeck() { + return [ + "2d", + "3d", + "4d", + "5d", + "6d", + "7d", + "8d", + "9d", + "10d", + "jd", + "qd", + "kd", + "ad", + "2s", + "3s", + "4s", + "5s", + "6s", + "7s", + "8s", + "9s", + "10s", + "js", + "qs", + "ks", + "as", + "2h", + "3h", + "4h", + "5h", + "6h", + "7h", + "8h", + "9h", + "10h", + "jh", + "qh", + "kh", + "ah", + "2c", + "3c", + "4c", + "5c", + "6c", + "7c", + "8c", + "9c", + "10c", + "jc", + "qc", + "kc", + "ac", + ]; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_clubs.png new file mode 100644 index 000000000..18af741db Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_diamonds.png new file mode 100644 index 000000000..3bbc4e06b Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_hearts.png new file mode 100644 index 000000000..3eb83d72c Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_spades.png new file mode 100644 index 000000000..0b3d29475 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/10_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_clubs.png new file mode 100644 index 000000000..291ed975f Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_diamonds.png new file mode 100644 index 000000000..4deee7cc8 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_hearts.png new file mode 100644 index 000000000..75a014f36 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_spades.png new file mode 100644 index 000000000..1ce0ffe8b Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/2_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_clubs.png new file mode 100644 index 000000000..076ab318a Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_diamonds.png new file mode 100644 index 000000000..8ee0b4b90 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_hearts.png new file mode 100644 index 000000000..8e74673f8 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_spades.png new file mode 100644 index 000000000..f9e06b4f0 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/3_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_clubs.png new file mode 100644 index 000000000..8be9e0892 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_diamonds.png new file mode 100644 index 000000000..70e82e839 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_hearts.png new file mode 100644 index 000000000..ceecbfe02 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_spades.png new file mode 100644 index 000000000..95abe3e73 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/4_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_clubs.png new file mode 100644 index 000000000..bde977769 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_diamonds.png new file mode 100644 index 000000000..bb9252558 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_hearts.png new file mode 100644 index 000000000..d923456fe Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_spades.png new file mode 100644 index 000000000..53a1aad26 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/5_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_clubs.png new file mode 100644 index 000000000..a9660a037 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_diamonds.png new file mode 100644 index 000000000..78a80ad06 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_hearts.png new file mode 100644 index 000000000..361643efc Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_spades.png new file mode 100644 index 000000000..40242a718 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/6_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_clubs.png new file mode 100644 index 000000000..9d6b54554 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_diamonds.png new file mode 100644 index 000000000..6ad5f15b5 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_hearts.png new file mode 100644 index 000000000..19b89a2e7 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_spades.png new file mode 100644 index 000000000..b9f1b93d3 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/7_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_clubs.png new file mode 100644 index 000000000..cec743cbc Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_diamonds.png new file mode 100644 index 000000000..ed1295121 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_hearts.png new file mode 100644 index 000000000..fb39723cb Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_spades.png new file mode 100644 index 000000000..b6b3b3813 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/8_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_clubs.png new file mode 100644 index 000000000..2174db58e Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_diamonds.png new file mode 100644 index 000000000..0b933fb0e Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_hearts.png new file mode 100644 index 000000000..7b196d6dc Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_spades.png new file mode 100644 index 000000000..3c3b5ffbc Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/9_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_clubs.png new file mode 100644 index 000000000..42bf5ec94 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_diamonds.png new file mode 100644 index 000000000..79cd3b8a8 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_hearts.png new file mode 100644 index 000000000..b42212405 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_spades.png new file mode 100644 index 000000000..103f56d1a Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_spades2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_spades2.png new file mode 100644 index 000000000..fbc3a2dca Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/ace_of_spades2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/black_joker.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/black_joker.png new file mode 100644 index 000000000..000b640bf Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/black_joker.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/card_back_red.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/card_back_red.png new file mode 100644 index 000000000..57b473e5b Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/card_back_red.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_clubs.png new file mode 100644 index 000000000..8bad6105a Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_clubs2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_clubs2.png new file mode 100644 index 000000000..5e003be2d Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_clubs2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_diamonds.png new file mode 100644 index 000000000..049478516 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_diamonds2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_diamonds2.png new file mode 100644 index 000000000..131a97731 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_diamonds2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_hearts.png new file mode 100644 index 000000000..03cdfd473 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_hearts2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_hearts2.png new file mode 100644 index 000000000..bf342bcb2 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_hearts2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_spades.png new file mode 100644 index 000000000..734e4b173 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_spades2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_spades2.png new file mode 100644 index 000000000..f539c19c6 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/jack_of_spades2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_clubs.png new file mode 100644 index 000000000..ebde974ab Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_clubs2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_clubs2.png new file mode 100644 index 000000000..68e57747d Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_clubs2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_diamonds.png new file mode 100644 index 000000000..4c9aaf20d Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_diamonds2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_diamonds2.png new file mode 100644 index 000000000..e21d6a0a4 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_diamonds2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_hearts.png new file mode 100644 index 000000000..27d235a34 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_hearts2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_hearts2.png new file mode 100644 index 000000000..1d3c468d8 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_hearts2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_spades.png new file mode 100644 index 000000000..b7abc52ac Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_spades2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_spades2.png new file mode 100644 index 000000000..2edbbc148 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/king_of_spades2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_clubs.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_clubs.png new file mode 100644 index 000000000..949839c1b Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_clubs.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_clubs2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_clubs2.png new file mode 100644 index 000000000..7be5f9a96 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_clubs2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_diamonds.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_diamonds.png new file mode 100644 index 000000000..791b273df Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_diamonds.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_diamonds2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_diamonds2.png new file mode 100644 index 000000000..928f6501d Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_diamonds2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_hearts.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_hearts.png new file mode 100644 index 000000000..c95e2df0b Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_hearts.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_hearts2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_hearts2.png new file mode 100644 index 000000000..21839e681 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_hearts2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_spades.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_spades.png new file mode 100644 index 000000000..c6c69cac1 Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_spades.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_spades2.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_spades2.png new file mode 100644 index 000000000..7983d034d Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/queen_of_spades2.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/red_joker.png b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/red_joker.png new file mode 100644 index 000000000..55b3ef9ba Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/PNG-cards-1.3/red_joker.png differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/app.ts b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/app.ts new file mode 100644 index 000000000..63fbf1fce --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/app.ts @@ -0,0 +1,6 @@ + + +// Event listeners +startNewGameBtn.addEventListener("click", newGame); +giveUserAnotherCardBtn.addEventListener("click", getCard); +userHoldBtn.addEventListener("click", compTurn); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/Controllers.js b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/Controllers.js new file mode 100644 index 000000000..7fee426ba --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/Controllers.js @@ -0,0 +1,154 @@ +// On click starting new game +function newGame() { + resetGame(); + processPlayerCard(2); + userScore.textContent = sumPlayer.toString(); + if (sumPlayer == 22) { + sumPlayer = 12; + playerCards[1].cardValue = 1; + } + else if (sumPlayer == 21) { + hasBlackJack = true; + userMessage.textContent = "BLACKJACK you win!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } + userMessage.textContent = "Get another card or Hold"; + //rendering houses first card, second card remains downside + houseSecondCard.src = "./PNG-cards-1.3/card_back_red.png"; + var houseFirstDraw = new NewCard(); + houseFirstCard.src = houseFirstDraw.cardImageLink; + houseCardsDiv.append(houseFirstCard); + houseCardsDiv.append(houseSecondCard); + sumHouse = houseFirstDraw.cardValue; + houseScore.textContent = sumHouse.toString(); + houseCards.push(houseFirstDraw); +} +//Initiating computer's turn when pushing HOLD button +function compTurn() { + if (hasBlackJack == true || isAlive == false) { + return; + } + var houseSecondDraw = new NewCard(); + houseSecondCard.src = houseSecondDraw.cardImageLink; + houseCardsDiv.append(houseSecondCard); + houseCards.push(houseSecondDraw); + sumHouse += houseSecondDraw.cardValue; + // Keeping taking cards until beating or losing against user score + while (sumHouse < sumPlayer) { + processHouseCard(1); + if (sumHouse > 21) { + for (var i = 0; i < houseCards.length; i++) { + if (houseCards[i].cardValue == 11) { + houseCards[i].cardValue = 1; + sumHouse -= 10; + houseScore.textContent = sumHouse.toString(); + } + } + } + } + houseScore.textContent = sumHouse.toString(); + if ((sumHouse <= 21 && sumHouse > sumPlayer) || + (sumHouse < 21 && houseCards.length == 5)) { + isAlive = false; + userMessage.textContent = "Game over House wins"; + userMessage.style.backgroundColor = "black"; + userMessage.style.textShadow = "none"; + return; + } + else if (sumHouse == sumPlayer) { + isAlive = false; + userMessage.textContent = "It's a tie"; + userMessage.style.backgroundColor = "green"; + userMessage.style.textShadow = "none"; + return; + } + else { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } +} +// Giving user another card when clicked 'get a card' +function getCard() { + if (hasBlackJack == true || isAlive == false) { + // userMessage.textContent = "Please start new game" + return; + } + else if (userScore.textContent == "0") { + userMessage.textContent = "Start game first"; + return; + } + processPlayerCard(1); + userScore.textContent = sumPlayer.toString(); + if (sumPlayer > 21) { + isAlive = false; + for (var i = 0; i < playerCards.length; i++) { + if (playerCards[i].cardValue == 11) { + playerCards[i].cardValue = 1; + sumPlayer -= 10; + userScore.textContent = sumPlayer.toString(); + isAlive = true; + if (sumPlayer == 21 || playerCards.length == 5) { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } + } + } + if (sumPlayer > 21) { + userMessage.textContent = "Game over House wins"; + userMessage.style.backgroundColor = "black"; + userMessage.style.textShadow = "none"; + } + } + else if (sumPlayer == 21 || playerCards.length == 5) { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } +} +function processPlayerCard(amount) { + while (amount > 0) { + var newCard = new NewCard(); + playerCards.push(newCard); + sumPlayer += newCard.cardValue; + var newImg = new Image(); + newImg.src = newCard.cardImageLink; + newImg.classList.add("displayedCard"); + userCardsDiv.append(newImg); + amount--; + } +} +function processHouseCard(amount) { + while (amount > 0) { + var newCard = new NewCard(); + houseCards.push(newCard); + sumHouse += newCard.cardValue; + var newImg = new Image(); + newImg.src = newCard.cardImageLink; + newImg.classList.add("displayedCard"); + houseCardsDiv.append(newImg); + amount--; + } +} +function resetGame() { + copyDeck = CardsDeck(); + sumHouse = 0; + houseScore.textContent = sumHouse.toString(); + sumPlayer = 0; + isAlive = true; + hasBlackJack = false; + userCardsDiv.innerHTML = ""; + playerCards = []; + houseCardsDiv.innerHTML = ""; + houseCards = []; + userMessage.style.backgroundColor = ""; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/Models.js b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/Models.js new file mode 100644 index 000000000..e3fd54484 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/Models.js @@ -0,0 +1,159 @@ +var NewCard = /** @class */ (function () { + function NewCard() { + this.cardName = this.getRndmCard(); + this.cardValue = this.getCardValue(this.cardName); + this.cardImageLink = this.returnImgLink(this.cardName); + } + NewCard.prototype.getRndmCard = function () { + var cardIndex = Math.floor(Math.random() * copyDeck.length); + var card = copyDeck[cardIndex]; + //remove card from deck + copyDeck.splice(cardIndex, 1); + return card; + }; + NewCard.prototype.getCardValue = function (aCard) { + //checks if the drown card is a 10 (second char at card is 0) + if (aCard[1] == "0") { + return 10; + } + else if (aCard[0] == "j" || aCard[0] == "q" || aCard[0] == "k") { + return 10; + } + else if (aCard[0] == "a") { + return 11; + } + else { + return parseInt(aCard[0]); + } + }; + NewCard.prototype.returnImgLink = function (aCard) { + for (var i = 0; i < cardImg.length; i++) { + if (aCard == cardImg[i][0]) { + return cardImg[i][1]; + } + } + return "no image found"; + }; + return NewCard; +}()); +var cardImg = [ + ["2d", "./PNG-cards-1.3/2_of_diamonds.png"], + ["3d", "./PNG-cards-1.3/3_of_diamonds.png"], + ["4d", "./PNG-cards-1.3/4_of_diamonds.png"], + ["5d", "./PNG-cards-1.3/5_of_diamonds.png"], + ["6d", "./PNG-cards-1.3/6_of_diamonds.png"], + ["7d", "./PNG-cards-1.3/7_of_diamonds.png"], + ["8d", "./PNG-cards-1.3/8_of_diamonds.png"], + ["9d", "./PNG-cards-1.3/9_of_diamonds.png"], + ["10d", "./PNG-cards-1.3/10_of_diamonds.png"], + ["jd", "./PNG-cards-1.3/jack_of_diamonds2.png"], + ["qd", "./PNG-cards-1.3/queen_of_diamonds2.png"], + ["kd", "./PNG-cards-1.3/king_of_diamonds2.png"], + ["ad", "./PNG-cards-1.3/ace_of_diamonds.png"], + ["2h", "./PNG-cards-1.3/2_of_hearts.png"], + ["3h", "./PNG-cards-1.3/3_of_hearts.png"], + ["4h", "./PNG-cards-1.3/4_of_hearts.png"], + ["5h", "./PNG-cards-1.3/5_of_hearts.png"], + ["6h", "./PNG-cards-1.3/6_of_hearts.png"], + ["7h", "./PNG-cards-1.3/7_of_hearts.png"], + ["8h", "./PNG-cards-1.3/8_of_hearts.png"], + ["9h", "./PNG-cards-1.3/9_of_hearts.png"], + ["10h", "./PNG-cards-1.3/10_of_hearts.png"], + ["jh", "./PNG-cards-1.3/jack_of_hearts2.png"], + ["qh", "./PNG-cards-1.3/queen_of_hearts2.png"], + ["kh", "./PNG-cards-1.3/king_of_hearts2.png"], + ["ah", "./PNG-cards-1.3/ace_of_hearts.png"], + ["2s", "./PNG-cards-1.3/2_of_spades.png"], + ["3s", "./PNG-cards-1.3/3_of_spades.png"], + ["4s", "./PNG-cards-1.3/4_of_spades.png"], + ["5s", "./PNG-cards-1.3/5_of_spades.png"], + ["6s", "./PNG-cards-1.3/6_of_spades.png"], + ["7s", "./PNG-cards-1.3/7_of_spades.png"], + ["8s", "./PNG-cards-1.3/8_of_spades.png"], + ["9s", "./PNG-cards-1.3/9_of_spades.png"], + ["10s", "./PNG-cards-1.3/10_of_spades.png"], + ["js", "./PNG-cards-1.3/jack_of_spades2.png"], + ["qs", "./PNG-cards-1.3/queen_of_spades2.png"], + ["ks", "./PNG-cards-1.3/king_of_spades2.png"], + ["as", "./PNG-cards-1.3/ace_of_spades.png"], + ["2c", "./PNG-cards-1.3/2_of_clubs.png"], + ["3c", "./PNG-cards-1.3/3_of_clubs.png"], + ["4c", "./PNG-cards-1.3/4_of_clubs.png"], + ["5c", "./PNG-cards-1.3/5_of_clubs.png"], + ["6c", "./PNG-cards-1.3/6_of_clubs.png"], + ["7c", "./PNG-cards-1.3/7_of_clubs.png"], + ["8c", "./PNG-cards-1.3/8_of_clubs.png"], + ["9c", "./PNG-cards-1.3/9_of_clubs.png"], + ["10c", "./PNG-cards-1.3/10_of_clubs.png"], + ["jc", "./PNG-cards-1.3/jack_of_clubs2.png"], + ["qc", "./PNG-cards-1.3/queen_of_clubs2.png"], + ["kc", "./PNG-cards-1.3/king_of_clubs2.png"], + ["ac", "./PNG-cards-1.3/ace_of_clubs.png"], +]; +// function renderUserDownsideCards() { +// const backSideCard1 = new Image(); +// backSideCard1.src = "./PNG-cards-1.3/card_back_red.png"; +// const backSideCard2 = new Image(); +// backSideCard2.src = "./PNG-cards-1.3/card_back_red.png"; +// userCardsDiv.append(backSideCard1); +// userCardsDiv.append(backSideCard2); +// backSideCard1.setAttribute("class", "displayedCard"); +// backSideCard2.setAttribute("class", "displayedCard"); +// } +// renderUserDownsideCards(); +function CardsDeck() { + return [ + "2d", + "3d", + "4d", + "5d", + "6d", + "7d", + "8d", + "9d", + "10d", + "jd", + "qd", + "kd", + "ad", + "2s", + "3s", + "4s", + "5s", + "6s", + "7s", + "8s", + "9s", + "10s", + "js", + "qs", + "ks", + "as", + "2h", + "3h", + "4h", + "5h", + "6h", + "7h", + "8h", + "9h", + "10h", + "jh", + "qh", + "kh", + "ah", + "2c", + "3c", + "4c", + "5c", + "6c", + "7c", + "8c", + "9c", + "10c", + "jc", + "qc", + "kc", + "ac", + ]; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/app.js b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/app.js new file mode 100644 index 000000000..30a386d3e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/app.js @@ -0,0 +1,10 @@ +var copyDeck = CardsDeck(); +var playerCards = []; +var houseCards = []; +var sumPlayer, sumHouse; +var isAlive = true; +var hasBlackJack = false; +// Event listeners +startNewGameBtn.addEventListener("click", newGame); +giveUserAnotherCardBtn.addEventListener("click", getCard); +userHoldBtn.addEventListener("click", compTurn); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/main.dev.js b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/main.dev.js new file mode 100644 index 000000000..aa779d684 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/main.dev.js @@ -0,0 +1,235 @@ +"use strict"; + +var cardImg = [['2d', './PNG-cards-1.3/2_of_diamonds.png'], ['3d', './PNG-cards-1.3/3_of_diamonds.png'], ['4d', './PNG-cards-1.3/4_of_diamonds.png'], ['5d', './PNG-cards-1.3/5_of_diamonds.png'], ['6d', './PNG-cards-1.3/6_of_diamonds.png'], ['7d', './PNG-cards-1.3/7_of_diamonds.png'], ['8d', './PNG-cards-1.3/8_of_diamonds.png'], ['9d', './PNG-cards-1.3/9_of_diamonds.png'], ['10d', './PNG-cards-1.3/10_of_diamonds.png'], ['jd', './PNG-cards-1.3/jack_of_diamonds2.png'], ['qd', './PNG-cards-1.3/queen_of_diamonds2.png'], ['kd', './PNG-cards-1.3/king_of_diamonds2.png'], ['ad', './PNG-cards-1.3/ace_of_diamonds.png'], ['2h', './PNG-cards-1.3/2_of_hearts.png'], ['3h', './PNG-cards-1.3/3_of_hearts.png'], ['4h', './PNG-cards-1.3/4_of_hearts.png'], ['5h', './PNG-cards-1.3/5_of_hearts.png'], ['6h', './PNG-cards-1.3/6_of_hearts.png'], ['7h', './PNG-cards-1.3/7_of_hearts.png'], ['8h', './PNG-cards-1.3/8_of_hearts.png'], ['9h', './PNG-cards-1.3/9_of_hearts.png'], ['10h', './PNG-cards-1.3/10_of_hearts.png'], ['jh', './PNG-cards-1.3/jack_of_hearts2.png'], ['qh', './PNG-cards-1.3/queen_of_hearts2.png'], ['kh', './PNG-cards-1.3/king_of_hearts2.png'], ['ah', './PNG-cards-1.3/ace_of_hearts.png'], ['2s', './PNG-cards-1.3/2_of_spades.png'], ['3s', './PNG-cards-1.3/3_of_spades.png'], ['4s', './PNG-cards-1.3/4_of_spades.png'], ['5s', './PNG-cards-1.3/5_of_spades.png'], ['6s', './PNG-cards-1.3/6_of_spades.png'], ['7s', './PNG-cards-1.3/7_of_spades.png'], ['8s', './PNG-cards-1.3/8_of_spades.png'], ['9s', './PNG-cards-1.3/9_of_spades.png'], ['10s', './PNG-cards-1.3/10_of_spades.png'], ['js', './PNG-cards-1.3/jack_of_spades2.png'], ['qs', './PNG-cards-1.3/queen_of_spades2.png'], ['ks', './PNG-cards-1.3/king_of_spades2.png'], ['as', './PNG-cards-1.3/ace_of_spades.png'], ['2c', './PNG-cards-1.3/2_of_clubs.png'], ['3c', './PNG-cards-1.3/3_of_clubs.png'], ['4c', './PNG-cards-1.3/4_of_clubs.png'], ['5c', './PNG-cards-1.3/5_of_clubs.png'], ['6c', './PNG-cards-1.3/6_of_clubs.png'], ['7c', './PNG-cards-1.3/7_of_clubs.png'], ['8c', './PNG-cards-1.3/8_of_clubs.png'], ['9c', './PNG-cards-1.3/9_of_clubs.png'], ['10c', './PNG-cards-1.3/10_of_clubs.png'], ['jc', './PNG-cards-1.3/jack_of_clubs2.png'], ['qc', './PNG-cards-1.3/queen_of_clubs2.png'], ['kc', './PNG-cards-1.3/king_of_clubs2.png'], ['ac', './PNG-cards-1.3/ace_of_clubs.png']]; +var copyDeck = resetCardDeck(); +var playerCards = []; +var houseCards = []; +var nextCard, valueNextCard, sumPlayer, sumHouse, houseFirstDraw, houseSecondDraw; +var isAlive = true; +var hasBlackJack = false; +var userScore = document.getElementById("user-score"); +var houseScore = document.getElementById('house-score'); +var userMessage = document.getElementById('user-message'); //Setting two jokers on the table for user as starting screen + +var jokerImg1 = document.createElement("img"); +var jokerImg2 = document.createElement("img"); +var userCardsDiv = document.getElementById('user-cards'); +jokerImg1.setAttribute('src', './PNG-cards-1.3/card_back_red.png'); +userCardsDiv.append(jokerImg1); +jokerImg2.setAttribute('src', './PNG-cards-1.3/card_back_red.png'); +userCardsDiv.append(jokerImg2); +jokerImg1.setAttribute('class', 'cards'); +jokerImg2.setAttribute('class', 'cards'); +var houseFirstCard = document.getElementById('house-card-1'); +var houseSecondCard = document.getElementById('house-card-2'); +var houseCardsDiv = document.getElementById('house-cards-grid'); + +function resetGame() { + isAlive = true; + hasBlackJack = false; + + while (userCardsDiv.firstChild) { + userCardsDiv.removeChild(userCardsDiv.lastChild); + playerCards = []; + } + + while (houseCardsDiv.firstChild) { + houseCardsDiv.removeChild(houseCardsDiv.lastChild); + houseCards = []; + } + + userMessage.style.backgroundColor = ""; +} + +function processPlayerCard(num) { + while (num > 0) { + nextCard = getRndmCard(); + valueNextCard = cardValue(nextCard); + playerCards.push(valueNextCard); + sumPlayer += valueNextCard; + var newImg = document.createElement("img"); + newImg.setAttribute('src', returnImg(nextCard)); + newImg.setAttribute('class', 'cards'); + userCardsDiv.append(newImg); + num--; + } +} + +function processHouseCard(num) { + while (num > 0) { + nextCard = getRndmCard(); + valueNextCard = cardValue(nextCard); + houseCards.push(valueNextCard); + sumHouse += valueNextCard; + var newImg = document.createElement("img"); + newImg.setAttribute('src', returnImg(nextCard)); + newImg.setAttribute('class', 'cards'); + houseCardsDiv.append(newImg); + num--; + } +} + +function newGame() { + resetGame(); + copyDeck = resetCardDeck(); + sumHouse = 0; + houseScore.textContent = sumHouse; + sumPlayer = 0; + processPlayerCard(2); + userScore.textContent = sumPlayer; + + if (sumPlayer == 22) { + sumPlayer = 12; + playerCards[1] = 1; + } else if (sumPlayer == 21) { + hasBlackJack = true; + userMessage.textContent = "BLACKJACK you win!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } + + userMessage.textContent = "Get another card or Hold"; //rendering houses first card and joker as second card + + houseSecondCard.setAttribute('src', './PNG-cards-1.3/card_back_red.png'); + houseFirstDraw = getRndmCard(); + houseFirstCard.setAttribute('src', returnImg(houseFirstDraw)); + houseCardsDiv.append(houseFirstCard); + houseCardsDiv.append(houseSecondCard); + sumHouse = cardValue(houseFirstDraw); + houseScore.textContent = sumHouse; + houseCards.push(sumHouse); +} + +function compTurn() { + if (hasBlackJack == true || isAlive == false) { + return; + } + + houseSecondDraw = getRndmCard(); + houseSecondCard.setAttribute('src', returnImg(houseSecondDraw)); + houseCardsDiv.append(houseSecondCard); + houseCards.push(cardValue(houseSecondDraw)); + sumHouse += cardValue(houseSecondDraw); + + while (sumHouse < sumPlayer) { + processHouseCard(1); + + if (sumHouse > 21) { + for (var i = 0; i < houseCards.length; i++) { + if (houseCards[i] == 11) { + houseCards[i] = 1; + sumHouse -= 10; + houseScore.textContent = sumHouse; + } + } + } + } + + houseScore.textContent = sumHouse; + + if (sumHouse <= 21 && sumHouse > sumPlayer || sumHouse < 21 && houseCards.length == 5) { + isAlive = false; + userMessage.textContent = "Game over House wins"; + userMessage.style.backgroundColor = "black"; + userMessage.style.textShadow = "none"; + return; + } else if (sumHouse == sumPlayer) { + isAlive = false; + userMessage.textContent = "It's a tie"; + userMessage.style.backgroundColor = "green"; + userMessage.style.textShadow = "none"; + return; + } else { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } +} + +function getCard() { + if (hasBlackJack == true || isAlive == false) { + // userMessage.textContent = "Please start new game" + return; + } else if (userScore == 0) { + userMessage.textContent = "Start game first"; + return; + } + + processPlayerCard(1); + console.log(playerCards); + console.log(playerCards.length); + userScore.textContent = sumPlayer; + + if (sumPlayer > 21) { + isAlive = false; + + for (var i = 0; i < playerCards.length; i++) { + if (playerCards[i] == 11) { + playerCards[i] = 1; + sumPlayer -= 10; + userScore.textContent = sumPlayer; + isAlive = true; + + if (sumPlayer == 21 || playerCards.length == 5) { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } + } + } + + if (sumPlayer > 21) { + userMessage.textContent = "Game over House wins"; + userMessage.style.backgroundColor = "black"; + userMessage.style.textShadow = "none"; + } + } else if (sumPlayer == 21 || playerCards.length == 5) { + hasBlackJack = true; + userMessage.textContent = "YOU WIN!"; + userMessage.style.backgroundColor = "blue"; + userMessage.style.textShadow = "none"; + return; + } +} + +function resetCardDeck() { + return [['2d', '3d', '4d', '5d', '6d', '7d', '8d', '9d', '10d', 'jd', 'qd', 'kd', 'ad'], ['2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s', 'js', 'qs', 'ks', 'as'], ['2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', 'jh', 'qh', 'kh', 'ah'], ['2c', '3c', '4c', '5c', '6c', '7c', '8c', '9c', '10c', 'jc', 'qc', 'kc', 'ac']]; +} + +function cardValue(card) { + //checks if the drown card is a 10 (second char at card is 0) + if (card[1] == 0) { + return 10; + } else if (card[0] == 'j' || card[0] == 'q' || card[0] == 'k') { + return 10; + } else if (card[0] == 'a') { + return 11; + } else { + return parseInt(card[0]); + } +} + +function returnImg(aCard) { + for (var i = 0; i < cardImg.length; i++) { + if (aCard == cardImg[i][0]) { + return cardImg[i][1]; + } + } +} + +function getRndmCard() { + //get rdm number from 0 to 3 + var x = Math.floor(Math.random() * 4); //get rdm number from 0 to 12 + + var y = Math.floor(Math.random() * copyDeck[x].length); // set z to card chosen from deck + + var z = copyDeck[x][y]; //remove chosen card from deck x + + copyDeck[x].splice(y, 1); + return z; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/responsive.css b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/responsive.css new file mode 100644 index 000000000..a4fea6aed --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/responsive.css @@ -0,0 +1,25 @@ +@media only screen and (max-width: 430px) and (min-height: 800px) { + html { + font-size: 13px; + } + + .score { + color: black; + font-size: 2rem; + } +} +@media only screen and (max-width: 450px) { + html { + font-size: 13px; + } +} +@media only screen and (min-width: 800px) { + html { + font-size: 20px; + } + + body { + width: 800px; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/style.css new file mode 100644 index 000000000..0bc64cf39 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/style.css @@ -0,0 +1,73 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + +:root { + --main-color: #256b31; + --title-color: #a85a05; + --message-color: #f5952c; + --cardShadow-color: #712cf5; + --btn-color: #14f539; +} + +.gameContainer { + height: 100vh; + width: 100%; + background-color: var(--main-color); + background-size: cover; + font-weight: bold; + color: white; + display: grid; + grid-template-rows: 1fr 2fr 2fr 1fr; +} +.gameContainer__title { + text-align: center; + font-weight: bold; + text-transform: uppercase; + padding: 1rem; + color: var(--title-color); +} +.gameContainer__title__userMessage { + color: var(--message-color); + margin-top: 1rem; +} +.gameContainer__playerArea { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.gameContainer__playerArea__score { + font-size: 1.5rem; +} +.gameContainer__buttonGrid { + display: flex; + justify-content: space-around; + align-items: center; + padding: 0.5rem; +} + +.displayedCard { + aspect-ratio: 3/5; + width: 4rem; + margin: 0 0.5rem; +} + +button { + background-color: var(--btn-color); + border: none; + width: 20%; + height: 2rem; + font-weight: bolder; + font-size: 1rem; +} + +button:hover { + color: var(--cardShadow-color); + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/view.js new file mode 100644 index 000000000..446976e41 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/dist/view.js @@ -0,0 +1,11 @@ +var userScore = document.getElementById("userScore"); +var houseScore = document.getElementById("houseScore"); +var userMessage = document.querySelector(".gameContainer__title__userMessage"); +var userCardsDiv = document.querySelector("#userCards"); +var houseFirstCard = document.querySelector("#houseFirstCard"); +var houseSecondCard = document.querySelector("#houseSecondCard"); +var houseCardsDiv = document.querySelector(".houseCardsDiv"); +// Buttons +var startNewGameBtn = document.querySelector("#newGameBtn"); +var giveUserAnotherCardBtn = document.querySelector("#getCardButton"); +var userHoldBtn = document.querySelector("#holdBtn"); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/index.html b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/index.html new file mode 100644 index 000000000..53008c134 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/index.html @@ -0,0 +1,60 @@ + + + + + + + BlackJack App + + + + + + + + +
                +
                +

                Black Jack

                +

                Want to play a game?

                +
                +
                +
                House Score: 0
                +
                + Card's back side - red + Card's back side - red +
                +
                +
                +
                User Score: 0
                +
                + Card's back side - red + Card's back side - red +
                +
                +
                + + + +
                +
                + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/responsive.css b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/responsive.css new file mode 100644 index 000000000..1549e1877 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/responsive.css @@ -0,0 +1,23 @@ +@media only screen and (max-width: 430px) and (min-height: 800px) { + html { + font-size: 13px; + } + .score { + color: black; + font-size: 2rem; + } +} +@media only screen and (max-width: 450px) { + html { + font-size: 13px; + } +} +@media only screen and (min-width: 800px) { + html { + font-size: 20px; + } + body { + width: 800px; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/responsive.scss b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/responsive.scss new file mode 100644 index 000000000..f7594bdb3 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/responsive.scss @@ -0,0 +1,28 @@ +@media only screen and (max-width: 430px) and (min-height: 800px){ + html{ + font-size: 13px; + } + .score{ + color: black; + font-size: 2rem; + } +} + + +@media only screen and (max-width: 450px){ + html{ + font-size: 13px; + } + +} + +@media only screen and (min-width: 800px){ + html{ + font-size: 20px; + } + + body{ + width: 800px; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/style.css b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/style.css new file mode 100644 index 000000000..0bc64cf39 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/style.css @@ -0,0 +1,73 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + +:root { + --main-color: #256b31; + --title-color: #a85a05; + --message-color: #f5952c; + --cardShadow-color: #712cf5; + --btn-color: #14f539; +} + +.gameContainer { + height: 100vh; + width: 100%; + background-color: var(--main-color); + background-size: cover; + font-weight: bold; + color: white; + display: grid; + grid-template-rows: 1fr 2fr 2fr 1fr; +} +.gameContainer__title { + text-align: center; + font-weight: bold; + text-transform: uppercase; + padding: 1rem; + color: var(--title-color); +} +.gameContainer__title__userMessage { + color: var(--message-color); + margin-top: 1rem; +} +.gameContainer__playerArea { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.gameContainer__playerArea__score { + font-size: 1.5rem; +} +.gameContainer__buttonGrid { + display: flex; + justify-content: space-around; + align-items: center; + padding: 0.5rem; +} + +.displayedCard { + aspect-ratio: 3/5; + width: 4rem; + margin: 0 0.5rem; +} + +button { + background-color: var(--btn-color); + border: none; + width: 20%; + height: 2rem; + font-weight: bolder; + font-size: 1rem; +} + +button:hover { + color: var(--cardShadow-color); + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/style.scss new file mode 100644 index 000000000..2a545b5bd --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/style.scss @@ -0,0 +1,74 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + +:root { + --main-color: #256b31; + --title-color: #a85a05; + --message-color: #f5952c; + --cardShadow-color: #712cf5; + --btn-color: #14f539; +} + +.gameContainer { + height: 100vh; + width: 100%; + background-color: var(--main-color); + background-size: cover; + font-weight: bold; + color: white; + display: grid; + grid-template-rows: 1fr 2fr 2fr 1fr; + &__title { + text-align: center; + font-weight: bold; + text-transform: uppercase; + padding: 1rem; + color: var(--title-color); + &__userMessage { + color: var(--message-color); + margin-top: 1rem; + } + } + &__playerArea { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + &__score { + font-size: 1.5rem; + } + } + &__buttonGrid { + // outline: 3px solid black; + display: flex; + justify-content: space-around; + align-items: center; + padding: 0.5rem; + } +} + +.displayedCard { + aspect-ratio: 3/5; + width: 4rem; + margin: 0 0.5rem; +} + +button { + background-color: var(--btn-color); + border: none; + width: 20%; + height: 2rem; + font-weight: bolder; + font-size: 1rem; +} + +button:hover { + color: var(--cardShadow-color); + cursor: pointer; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/view.ts new file mode 100644 index 000000000..2a9f88b93 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/VladiBykanov/view.ts @@ -0,0 +1,24 @@ +const userScore = document.getElementById("userScore") as HTMLSpanElement; +const houseScore = document.getElementById("houseScore") as HTMLSpanElement; +const userMessage = document.querySelector( + ".gameContainer__title__userMessage" +) as HTMLHeadElement; +const userCardsDiv = document.querySelector("#userCards") as HTMLDivElement; +const houseFirstCard = document.querySelector( + "#houseFirstCard" +) as HTMLImageElement; +const houseSecondCard = document.querySelector( + "#houseSecondCard" +) as HTMLImageElement; +const houseCardsDiv = document.querySelector( + ".houseCardsDiv" +) as HTMLDivElement; +// Buttons +const startNewGameBtn = document.querySelector( + "#newGameBtn" +) as HTMLButtonElement; + +const giveUserAnotherCardBtn = document.querySelector( + "#getCardButton" +) as HTMLButtonElement; +const userHoldBtn = document.querySelector("#holdBtn") as HTMLButtonElement; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/instructions.md b/02-TypeScript/12-MVC/Home-Puzzles/instructions.md new file mode 100644 index 000000000..03fe4df58 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/instructions.md @@ -0,0 +1,6 @@ +1. take your favorite app, and try to describe it using the MVC model. + What will be her entities (classes)? What will be her control functions? For instance, how would you call the functions that get info from the user? What will be the name of the functions that render to the screen? + + write it in a file design.md + +2. Using this design, build the app in code. diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/controler.ts b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/controler.ts new file mode 100644 index 000000000..7292e0209 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/controler.ts @@ -0,0 +1,149 @@ + class TicTacToe { + /** + * board - 3x3 multi-dimensional array of empty strings + * players - Object representing the players + * wait - Time in miliseconds after game over + * score - Holds the score for players + * currentPlayer - Current player, initialized to x + * gameOver - A player has won or there's a stalemate + * @param {Display} display - User interface for interacting with the DOM + */ + display: Display + board: Array> + players: PlayerToken + wait: number + waiting: boolean + score: Score + currentPlayer: string + + constructor(display: Display) { + this.display = display + this.board = this.createBoard() + this.players = { x: "x", o: "o" } + this.wait = 3000; + this.waiting = false + this.score = { x: 0, o: 0 } + this.currentPlayer = this.players.x + this.display.bindHandler(this.clickCell) + } + get getWait(){ + return this.wait + } + set changeWait(newWait){ + this.wait = newWait + newWait = 0; + } + /** + * Click a cell in the game board and determine if its a win, a stalemate, or + * the game continues. Game over or switch player. + */ + //fonction qui lorsque le joueur clique sur une case determine la suite de la partie + + clickCell = (row: number, col: number) => { + const canContinue = this.board[row][col] === '' //constante qui determine que la case du tableau est vide + + if (canContinue && !this.waiting) { + this.board[row][col] = this.currentPlayer + this.display.updateBoard(row, col, this.currentPlayer) // si la case est vide et il y'a pas d'attente (partie pas terminee) alors lorsqu'il clicke ,le token saffiche et passe au joueur suivant . + + const win = this.isGameWon(row, col) //si le joueur gagne + const stalemate = this.board + .map(row => row.filter(col => col === '')) + .filter(row => row.length > 0) // si il ya egalite + + if (!this.waiting) { + if (win) { + this.increaseScore() //incremente le score de 1 + this.display.updateScore(this.score, this.currentPlayer) //affiche le scrore sur la page web + this.gameOver(this.currentPlayer) //affiche un message de qui a gagner + } else if (stalemate.length < 1) { + this.gameOver() //affiche un message de qui a gagner + } else { + this.switchPlayer() // si pas de gagnant ni egalite change de joueur + } + } + } + } + + /** + * Reset the board after a delay after win or stalemate + */ + gameOver = (winner?: string) => { + this.waiting = true + this.display.printMessage(winner) // fonction qui affiche un message de gagne/egalite lorsque le temps dattente est superrieur a 1500ms + + setTimeout(() => { + this.resetBoard() + this.waiting = false + }, this.wait) //fonction qui remet le compteur de temps a 0 et reinitilise le tableur + } + + /** + * Create a new empty board + * @return {Object[]} 3x3 multi-dimensional array of empty strings + */ + createBoard = (): Array> => [['', '', ''], ['', '', ''], ['', '', '']] //fonction qui cree un tableur vide + + /** + * Restore the board to its original empty state + */ + resetBoard = (): void => { + this.display.clearGameBoard() + this.display.clearMessage() + this.board = this.createBoard() // fonction qui reinitialise le message le tableur et cree un nouveau tableur + } + + /** + * Check is the current player has won the game + * @param {number} row + * @param {number} col + * @return {boolean} + */ + isGameWon = (row: number, col: number): boolean => { + if ( + // Horizontal win + (this.board[row][0] === this.currentPlayer && + this.board[row][1] === this.currentPlayer && + this.board[row][2] === this.currentPlayer) || + // Vertical win + (this.board[0][col] === this.currentPlayer && + this.board[1][col] === this.currentPlayer && + this.board[2][col] === this.currentPlayer) || + // Diagonal win + ((this.board[0][0] === this.currentPlayer && + this.board[1][1] === this.currentPlayer && + this.board[2][2] === this.currentPlayer) || + (this.board[2][0] === this.currentPlayer && + this.board[1][1] === this.currentPlayer && + this.board[0][2] === this.currentPlayer)) + ) + return true + return false + + } //fonction qui check si le joueur a gagner + + /** + * Switch to the next player + */ + switchPlayer = (): void => { + this.currentPlayer = this.currentPlayer === this.players.x ? this.players.o : this.players.x // fonction qui passe au joueur suivant + } + + /** + * Increase the score of the winning player + */ + increaseScore = (): void => { + this.score[this.currentPlayer] += 1 //fonction qui aggremente le score de 1 + } + + /** + * Render score board and game board + */ + startGame(): void { + this.display.printScoreBoard(this.score) + this.display.printGameBoard(this.board) //fonction qui affiche le jeu appelee dans l'index.html + this.display.newGame() + } + + +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/controler.js b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/controler.js new file mode 100644 index 000000000..d7fb23876 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/controler.js @@ -0,0 +1,128 @@ +var TicTacToe = /** @class */ (function () { + function TicTacToe(display) { + var _this = this; + /** + * Click a cell in the game board and determine if its a win, a stalemate, or + * the game continues. Game over or switch player. + */ + //fonction qui lorsque le joueur clique sur une case determine la suite de la partie + this.clickCell = function (row, col) { + var canContinue = _this.board[row][col] === ''; //constante qui determine que la case du tableau est vide + if (canContinue && !_this.waiting) { + _this.board[row][col] = _this.currentPlayer; + _this.display.updateBoard(row, col, _this.currentPlayer); // si la case est vide et il y'a pas d'attente (partie pas terminee) alors lorsqu'il clicke ,le token saffiche et passe au joueur suivant . + var win = _this.isGameWon(row, col); //si le joueur gagne + var stalemate = _this.board + .map(function (row) { return row.filter(function (col) { return col === ''; }); }) + .filter(function (row) { return row.length > 0; }); // si il ya egalite + if (!_this.waiting) { + if (win) { + _this.increaseScore(); //incremente le score de 1 + _this.display.updateScore(_this.score, _this.currentPlayer); //affiche le scrore sur la page web + _this.gameOver(_this.currentPlayer); //affiche un message de qui a gagner + } + else if (stalemate.length < 1) { + _this.gameOver(); //affiche un message de qui a gagner + } + else { + _this.switchPlayer(); // si pas de gagnant ni egalite change de joueur + } + } + } + }; + /** + * Reset the board after a delay after win or stalemate + */ + this.gameOver = function (winner) { + _this.waiting = true; + _this.display.printMessage(winner); // fonction qui affiche un message de gagne/egalite lorsque le temps dattente est superrieur a 1500ms + setTimeout(function () { + _this.resetBoard(); + _this.waiting = false; + }, _this.wait); //fonction qui remet le compteur de temps a 0 et reinitilise le tableur + }; + /** + * Create a new empty board + * @return {Object[]} 3x3 multi-dimensional array of empty strings + */ + this.createBoard = function () { return [['', '', ''], ['', '', ''], ['', '', '']]; }; //fonction qui cree un tableur vide + /** + * Restore the board to its original empty state + */ + this.resetBoard = function () { + _this.display.clearGameBoard(); + _this.display.clearMessage(); + _this.board = _this.createBoard(); // fonction qui reinitialise le message le tableur et cree un nouveau tableur + }; + /** + * Check is the current player has won the game + * @param {number} row + * @param {number} col + * @return {boolean} + */ + this.isGameWon = function (row, col) { + if ( + // Horizontal win + (_this.board[row][0] === _this.currentPlayer && + _this.board[row][1] === _this.currentPlayer && + _this.board[row][2] === _this.currentPlayer) || + // Vertical win + (_this.board[0][col] === _this.currentPlayer && + _this.board[1][col] === _this.currentPlayer && + _this.board[2][col] === _this.currentPlayer) || + // Diagonal win + ((_this.board[0][0] === _this.currentPlayer && + _this.board[1][1] === _this.currentPlayer && + _this.board[2][2] === _this.currentPlayer) || + (_this.board[2][0] === _this.currentPlayer && + _this.board[1][1] === _this.currentPlayer && + _this.board[0][2] === _this.currentPlayer))) + return true; + return false; + }; //fonction qui check si le joueur a gagner + /** + * Switch to the next player + */ + this.switchPlayer = function () { + _this.currentPlayer = _this.currentPlayer === _this.players.x ? _this.players.o : _this.players.x; // fonction qui passe au joueur suivant + }; + /** + * Increase the score of the winning player + */ + this.increaseScore = function () { + _this.score[_this.currentPlayer] += 1; //fonction qui aggremente le score de 1 + }; + this.display = display; + this.board = this.createBoard(); + this.players = { x: "x", o: "o" }; + this.wait = 3000; + this.waiting = false; + this.score = { x: 0, o: 0 }; + this.currentPlayer = this.players.x; + this.display.bindHandler(this.clickCell); + } + Object.defineProperty(TicTacToe.prototype, "getWait", { + get: function () { + return this.wait; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(TicTacToe.prototype, "changeWait", { + set: function (newWait) { + this.wait = newWait; + newWait = 0; + }, + enumerable: false, + configurable: true + }); + /** + * Render score board and game board + */ + TicTacToe.prototype.startGame = function () { + this.display.printScoreBoard(this.score); + this.display.printGameBoard(this.board); //fonction qui affiche le jeu appelee dans l'index.html + this.display.newGame(); + }; + return TicTacToe; +}()); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/index.js b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..0fb558333 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/index.js @@ -0,0 +1,4 @@ +// Start Game +//============================================================================== +var ticTacToe = new TicTacToe(new DOMDisplay()); +ticTacToe.startGame(); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/model.js new file mode 100644 index 000000000..7b03ec704 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/model.js @@ -0,0 +1,2 @@ +// Custom Types +//============================================================================== diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/style.css new file mode 100644 index 000000000..a47460a67 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/style.css @@ -0,0 +1,97 @@ +:root { + --font-color: #FCB42A; + --bg-color: #000022; + --board-color: #2121DE; + --x-color: #FFFF00; + --o-color: #FFFFFF; + --game-width: 450px; + --message-color: #00FF00; + --font-family: "Press Start 2P"; +} + +* { + box-sizing: border-box; +} + +html { + background: #000022; + margin: 2rem 0; + font-size: 16px; + line-height: 1.5; + padding: 0; + font-family: "Press Start 2P", sans-serif; + color: #FCB42A; +} + +h1 { + text-align: center; +} + +#game { + max-width: 450px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.score { + border: 2px solid #FCB42A; + margin: 1rem 0; + text-align: center; +} + +.row, +.col { + display: flex; + align-items: center; + justify-content: center; +} + +.col { + cursor: pointer; + border: 3px solid #2121DE; + margin: 5px; + height: 100px; + width: 100px; + line-height: 0; + border-radius: 4px; + font-size: 40px; +} + +.col:hover { + border: 3px solid #4d4de4; +} + +.x { + color: #FFFF00; +} + +.o { + color: #FFFFFF; +} + +.message { + margin: 2rem 0; + text-align: center; + color: #00FF00; +} + +button { + display: flex; + margin-top: 10px; + width: 320px; + margin-left: 65px; + background-color: #000022; + /* Green */ + border: 2px solid orange; + color: white; + padding: 10px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} + +button:hover { + border: 3px solid #4d4de4; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/tic.css b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/tic.css new file mode 100644 index 000000000..2446f599c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/tic.css @@ -0,0 +1,50 @@ +h1 { + color: orangered; + font-size: 45px; +} + +/* 3*3 Grid */ +#b1, #b2, #b3, #b4, #b5, +#b6, #b7, #b8, #b9 { + width: 80px; + height: 52px; + margin: auto; + border: 1px solid gray; + border-radius: 6px; + font-size: 30px; + text-align: center; +} + +/* Reset Button */ +#but { + box-sizing: border-box; + width: 95px; + height: 40px; + border: 1px solid dodgerblue; + margin: auto; + border-radius: 4px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: dodgerblue; + color: white; + font-size: 20px; + cursor: pointer; +} + +/* Player turn space */ +#print { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: dodgerblue; + font-size: 20px; +} + +/* Main Container */ +#main { + text-align: center; +} + +/* Game Instruction Text */ +#ins { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: dodgerblue; + font-size: 17px; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/tic.js b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/tic.js new file mode 100644 index 000000000..2264a8a88 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/tic.js @@ -0,0 +1,357 @@ +// Function called whenever user tab on any box +function myfunc() { + // Setting DOM to all boxes or input field + var b1 = document.querySelector("#b1"); + var b2 = document.querySelector("#b2"); + var b3 = document.querySelector("#b3"); + var b4 = document.querySelector("#b4"); + var b5 = document.querySelector("#b5"); + var b6 = document.querySelector("#b6"); + var b7 = document.querySelector("#b7"); + var b8 = document.querySelector("#b8"); + var b9 = document.querySelector("#b9"); + // Checking if Player X won or not and after + // that disabled all the other fields + if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' || + b2 == 'X') && (b3 == 'x' || b3 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' || + b4 == 'X') && (b7 == 'x' || b7 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' || + b8 == 'X') && (b9 == 'x' || b9 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + window.alert('Player X won'); + } + else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' || + b6 == 'X') && (b9 == 'x' || b9 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player X won'); + } + else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' || + b5 == 'X') && (b9 == 'x' || b9 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player X won'); + } + else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' || + b5 == 'X') && (b7 == 'x' || b7 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' || + b5 == 'X') && (b8 == 'x' || b8 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' || + b5 == 'X') && (b6 == 'x' || b6 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + // Checking of Player X finish + // Checking for Player 0 starts, Is player 0 won or + // not and after that disabled all the other fields + else if ((b1 == '0' || b1 == '0') && (b2 == '0' || + b2 == '0') && (b3 == '0' || b3 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b1 == '0' || b1 == '0') && (b4 == '0' || + b4 == '0') && (b7 == '0' || b7 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b7 == '0' || b7 == '0') && (b8 == '0' || + b8 == '0') && (b9 == '0' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + window.alert('Player 0 won'); + } + else if ((b3 == '0' || b3 == '0') && (b6 == '0' || + b6 == '0') && (b9 == '0' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player 0 won'); + } + else if ((b1 == '0' || b1 == '0') && (b5 == '0' || + b5 == '0') && (b9 == '0' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player 0 won'); + } + else if ((b3 == '0' || b3 == '0') && (b5 == '0' || + b5 == '0') && (b7 == '0' || b7 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b2 == '0' || b2 == '0') && (b5 == '0' || + b5 == '0') && (b8 == '0' || b8 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b4 == '0' || b4 == '0') && (b5 == '0' || + b5 == '0') && (b6 == '0' || b6 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + // Checking of Player 0 finish + // Here, Checking about Tie + else if ((b1 == 'X' || b1 == '0') && (b2 == 'X' + || b2 == '0') && (b3 == 'X' || b3 == '0') && + (b4 == 'X' || b4 == '0') && (b5 == 'X' || + b5 == '0') && (b6 == 'X' || b6 == '0') && + (b7 == 'X' || b7 == '0') && (b8 == 'X' || + b8 == '0') && (b9 == 'X' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Match Tie"; + window.alert('Match Tie'); + } + else { + // Here, Printing Result + if (flag == 1) { + document.getElementById('print') + .innerHTML = "Player X Turn"; + } + else { + document.getElementById('print') + .innerHTML = "Player 0 Turn"; + } + } +} +// Function to reset game +function myfunc_2() { + location.reload(); + document.getElementById('b1').value = ''; + document.getElementById("b2").value = ''; + document.getElementById("b3").value = ''; + document.getElementById("b4").value = ''; + document.getElementById("b5").value = ''; + document.getElementById("b6").value = ''; + document.getElementById("b7").value = ''; + document.getElementById("b8").value = ''; + document.getElementById("b9").value = ''; +} +// Here onwards, functions check turn of the player +// and put accordingly value X or 0 +flag = 1; +function myfunc_3() { + if (flag == 1) { + document.getElementById("b1").value = "X"; + document.getElementById("b1").disabled = true; + flag = 0; + } + else { + document.getElementById("b1").value = "0"; + document.getElementById("b1").disabled = true; + flag = 1; + } +} +function myfunc_4() { + if (flag == 1) { + document.getElementById("b2").value = "X"; + document.getElementById("b2").disabled = true; + flag = 0; + } + else { + document.getElementById("b2").value = "0"; + document.getElementById("b2").disabled = true; + flag = 1; + } +} +function myfunc_5() { + if (flag == 1) { + document.getElementById("b3").value = "X"; + document.getElementById("b3").disabled = true; + flag = 0; + } + else { + document.getElementById("b3").value = "0"; + document.getElementById("b3").disabled = true; + flag = 1; + } +} +function myfunc_6() { + if (flag == 1) { + document.getElementById("b4").value = "X"; + document.getElementById("b4").disabled = true; + flag = 0; + } + else { + document.getElementById("b4").value = "0"; + document.getElementById("b4").disabled = true; + flag = 1; + } +} +function myfunc_7() { + if (flag == 1) { + document.getElementById("b5").value = "X"; + document.getElementById("b5").disabled = true; + flag = 0; + } + else { + document.getElementById("b5").value = "0"; + document.getElementById("b5").disabled = true; + flag = 1; + } +} +function myfunc_8() { + if (flag == 1) { + document.getElementById("b6").value = "X"; + document.getElementById("b6").disabled = true; + flag = 0; + } + else { + document.getElementById("b6").value = "0"; + document.getElementById("b6").disabled = true; + flag = 1; + } +} +function myfunc_9() { + if (flag == 1) { + document.getElementById("b7").value = "X"; + document.getElementById("b7").disabled = true; + flag = 0; + } + else { + document.getElementById("b7").value = "0"; + document.getElementById("b7").disabled = true; + flag = 1; + } +} +function myfunc_10() { + if (flag == 1) { + document.getElementById("b8").value = "X"; + document.getElementById("b8").disabled = true; + flag = 0; + } + else { + document.getElementById("b8").value = "0"; + document.getElementById("b8").disabled = true; + flag = 1; + } +} +function myfunc_11() { + if (flag == 1) { + document.getElementById("b9").value = "X"; + document.getElementById("b9").disabled = true; + flag = 0; + } + else { + document.getElementById("b9").value = "0"; + document.getElementById("b9").disabled = true; + flag = 1; + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/view.js new file mode 100644 index 000000000..14ba89d0a --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/dist/view.js @@ -0,0 +1,146 @@ +var DOMDisplay = /** @class */ (function () { + function DOMDisplay() { + var _this = this; + /** + * Create an element and apply an optional class and dataset + * @param {string} tag + * @param {string} className (Optional) + * @param {Object[]} dataset (Optional) + * @return {HTMLElement} + */ + this.createElement = function (tag, className, dataset) { + var element = document.createElement(tag); + if (className) + element.classList.add(className); + if (dataset) + element.dataset[dataset[0]] = dataset[1]; + return element; + }; + /** + * Retrieve an existing element in the DOM + * @param {string} selector + * @return {HTMLElement} + */ + this.getElement = function (selector) { return document.querySelector(selector); }; + /** + * Retrieve all elements by selector from the DOM + * @param {string} selector + * @return {NodeList} + */ + this.getAllElements = function (selector) { return document.querySelectorAll(selector); }; + /** + * Create the score board view and render it to the DOM + * @param {Score} scoreData + */ + this.printScoreBoard = function (scoreData) { + var game = _this.getElement('#game'); + var scoreBoard = _this.createElement('div', 'score'); + game.append(scoreBoard); + var playerOneScore = _this.createElement('div', 'x'); + playerOneScore.textContent = "Player 1: " + scoreData.x; + playerOneScore.id = 'score-x'; + var playerTwoScore = _this.createElement('div', 'o'); + playerTwoScore.textContent = "Player 2: " + scoreData.o; + playerTwoScore.id = 'score-o'; + scoreBoard.append(playerOneScore, playerTwoScore); + }; + /** + * Create the game board view and render it to the DOM + * @param {Object[]} boardData 3x3 multi-dimensional array of empty strings + */ + this.printGameBoard = function (boardData) { + var game = _this.getElement('#game'); + var gameBoard = _this.createElement('div', 'board', undefined); + game.append(gameBoard); + boardData.forEach(function (row, i) { + var boardRow = _this.createElement('div', 'row', ['row', i]); + gameBoard.append(boardRow); + row.forEach(function (col, j) { + var boardCol = _this.createElement('div', 'col', ['col', j]); + boardRow.append(boardCol); + }); + }); + }; + /** + * Update the board by appending a player token to a cell + * @param {number} row + * @param {number} col + * @param {string} currentPlayer + */ + this.updateBoard = function (row, col, currentPlayer) { + var playerToken = _this.createElement('span', currentPlayer, undefined); + playerToken.textContent = currentPlayer; + var boardRow = _this.getElement("[data-row=\"" + row + "\"]"); + var cell = boardRow.querySelector("[data-col=\"" + col + "\"]"); + cell.append(playerToken); + }; + /** + * Set all cells in the board to empty strings + */ + this.clearGameBoard = function () { + var cells = _this.getAllElements('.col'); + cells.forEach(function (cell) { + cell.textContent = ''; + }); + }; + /** + * Update the existing score for the current player + * @param {Score} currentScore + * @param {string} currentPlayer + */ + this.updateScore = function (currentScore, currentPlayer) { + var currentPlayerScore = _this.getElement("#score-" + currentPlayer); + var player = currentPlayer === 'x' ? 'Player 1' : 'Player 2'; + var d = currentScore[currentPlayer]; + currentPlayerScore.textContent = player + ": " + d; + }; + /** + * Print the win, lose, or stalemate message + * @param {string} winner + */ + this.printMessage = function (winner) { + var message = _this.createElement('div', 'message'); + var player = winner === 'x' ? 'Player 1' : 'Player 2'; + message.textContent = winner ? player + " wins!" : 'Nobody wins!'; + var game = _this.getElement('#game'); + game.append(message); + }; // imprime le message de gagne/egalite + /** + * Clear message from the screen + */ + this.clearMessage = function () { + var message = _this.getElement('.message'); + message.remove(); + }; //enleve le message de gagne/egalite + this.newGame = function () { + var game = _this.getElement('#game'); + var button_newGame = _this.createElement('div', "button"); + button_newGame.innerHTML = ""; + button_newGame.addEventListener("click", function (event) { + window.location.reload(); + // this.updateBoard + // ticTacToe.res + // ticTacToe.startGame() + // ticTacToe.display.clearGameBoard + }); + game.append(button_newGame); + }; + } + /** + * Bind document click to the game if clicked element is a cell + * @param {requestCallback} clickHandler + */ + DOMDisplay.prototype.bindHandler = function (clickHandler) { + document.addEventListener('click', function (event) { + var clicked = event.target; + var isColumn = clicked.className === 'col'; + if (isColumn) { + var cell = clicked; + var row = +cell.parentElement.dataset.row; + var col = +cell.dataset.col; + clickHandler(row, col); + } + }); + }; + return DOMDisplay; +}()); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/index.html b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/index.html new file mode 100644 index 000000000..f62f5e0c9 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/index.html @@ -0,0 +1,21 @@ + + + + + + Tic-Tac-Toe + + + + + + + + + +

                Tic-Tac-Toe by John Benayoun

                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/index.ts new file mode 100644 index 000000000..838f19d28 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/index.ts @@ -0,0 +1,23 @@ +interface Display { + bindHandler(clickHandler: (row: number, col: number) => void): void + createElement(tag: string, className?: string, dataset?: Array): HTMLElement + getElement(selector: string): HTMLElement + getAllElements(selector: string): NodeList + printGameBoard(boardData: Array>): void + updateBoard(row: number, col: number, currentPlayer: string): void + clearGameBoard(): void + printScoreBoard(scoreData: Score): void + updateScore(currentScore: Score, currentPlayer: string): void + printMessage(winner?: string): void + clearMessage(): void + newGame():void + + } + + // Start Game +//============================================================================== + +const ticTacToe = new TicTacToe(new DOMDisplay()) +ticTacToe.startGame() + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/model.ts new file mode 100644 index 000000000..16152d59c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/model.ts @@ -0,0 +1,14 @@ +// Custom Types +//============================================================================== + +interface PlayerToken { + x: string + o: string + [key: string]: string + } + + interface Score { + x: number + o: number + [key: string]: number + } diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/style.css b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/style.css new file mode 100644 index 000000000..bcf93c531 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/style.css @@ -0,0 +1,96 @@ +:root { + --font-color: #FCB42A; + --bg-color: #000022; + --board-color: #2121DE; + --x-color: #FFFF00; + --o-color: #FFFFFF; + --game-width: 450px; + --message-color: #00FF00; + --font-family: "Press Start 2P"; +} + +* { + box-sizing: border-box; +} + +html { + background: #000022; + margin: 2rem 0; + font-size: 16px; + line-height: 1.5; + padding: 0; + font-family: "Press Start 2P", sans-serif; + color: #FCB42A; +} + +h1 { + text-align: center; +} + +#game { + max-width: 450px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.score { + border: 2px solid #FCB42A; + margin: 1rem 0; + text-align: center; +} + +.row, +.col { + display: flex; + align-items: center; + justify-content: center; +} + +.col { + cursor: pointer; + border: 3px solid #2121DE; + margin: 5px; + height: 100px; + width: 100px; + line-height: 0; + border-radius: 4px; + font-size: 40px; +} + +.col:hover { + border: 3px solid #4d4de4; +} + +.x { + color: #FFFF00; +} + +.o { + color: #FFFFFF; +} + +.message { + margin: 2rem 0; + text-align: center; + color: #00FF00; +} + +button { + display: flex; + margin-top: 10px; + width: 320px; + margin-left: 65px; + background-color: #000022; /* Green */ + border: 2px solid orange; + color: white; + padding: 10px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} + +button:hover { + border: 3px solid #4d4de4; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/style.scss new file mode 100644 index 000000000..bceded18b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/style.scss @@ -0,0 +1,96 @@ +:root { + --font-color: #FCB42A; + --bg-color: #000022; + --board-color: #2121DE; + --x-color: #FFFF00; + --o-color: #FFFFFF; + --game-width: 450px; + --message-color: #00FF00; + --font-family: 'Press Start 2P'; + } + + * { + box-sizing: border-box; + } + + html { + background: #000022; + margin: 2rem 0; + font-size: 16px; + line-height: 1.5; + padding: 0; + font-family: 'Press Start 2P', sans-serif; + color: #FCB42A; + } + + h1 { + text-align: center; + } + + #game { + max-width: 450px; + margin: 0 auto; + display: flex; + flex-direction: column; + } + + .score { + border: 2px solid #FCB42A; + margin: 1rem 0; + text-align: center; + } + + .row, + .col { + display: flex; + align-items: center; + justify-content: center; + } + + .col { + cursor: pointer; + border: 3px solid #2121DE; + margin: 5px; + height: 100px; + width: 100px; + line-height: 0; + border-radius: 4px; + font-size: 40px; + } + + .col:hover { + border: 3px solid #4d4de4; + } + + .x { + color: #FFFF00; + } + + .o { + color: #FFFFFF; + + } + + .message { + margin: 2rem 0; + text-align: center; + color: #00FF00; + } + + button { + display: flex; + margin-top: 10px; + width: 320px; + margin-left: 65px; + background-color:#000022; /* Green */ + border: 2px solid orange; + color: white; + padding: 10px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + button:hover{ + border: 3px solid #4d4de4; + } \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/john-ben/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/view.ts new file mode 100644 index 000000000..f05af1302 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/john-ben/view.ts @@ -0,0 +1,167 @@ + class DOMDisplay implements Display { + /** + * Bind document click to the game if clicked element is a cell + * @param {requestCallback} clickHandler + */ + bindHandler(clickHandler: (row: number, col: number) => void): void { + document.addEventListener('click', (event: Event) => { + const clicked = event.target + const isColumn = clicked.className === 'col' + + if (isColumn) { + const cell = clicked + const row = +cell.parentElement!.dataset.row! + const col = +cell.dataset.col! + clickHandler(row, col) + } + }) + } + + /** + * Create an element and apply an optional class and dataset + * @param {string} tag + * @param {string} className (Optional) + * @param {Object[]} dataset (Optional) + * @return {HTMLElement} + */ + createElement = (tag: string, className?: string, dataset?: Array): HTMLElement => { + const element = document.createElement(tag) + if (className) element.classList.add(className) + if (dataset) element.dataset[dataset[0]] = dataset[1] + + return element + } + + /** + * Retrieve an existing element in the DOM + * @param {string} selector + * @return {HTMLElement} + */ + getElement = (selector: string): HTMLElement => document.querySelector(selector) + + /** + * Retrieve all elements by selector from the DOM + * @param {string} selector + * @return {NodeList} + */ + getAllElements = (selector: string): NodeList => document.querySelectorAll(selector) + + /** + * Create the score board view and render it to the DOM + * @param {Score} scoreData + */ + printScoreBoard = (scoreData: Score): void => { + const game = this.getElement('#game') + const scoreBoard = this.createElement('div', 'score') + game.append(scoreBoard) + + const playerOneScore = this.createElement('div', 'x') + playerOneScore.textContent = `Player 1: ${scoreData.x}` + playerOneScore.id = 'score-x' + + const playerTwoScore = this.createElement('div', 'o') + playerTwoScore.textContent = `Player 2: ${scoreData.o}` + playerTwoScore.id = 'score-o' + + scoreBoard.append(playerOneScore, playerTwoScore) + } + + /** + * Create the game board view and render it to the DOM + * @param {Object[]} boardData 3x3 multi-dimensional array of empty strings + */ + + printGameBoard = (boardData: Array>): void => { + const game = this.getElement('#game') + const gameBoard = this.createElement('div', 'board', undefined) + game.append(gameBoard) + + boardData.forEach((row, i) => { + const boardRow = this.createElement('div', 'row', ['row', i]) + gameBoard.append(boardRow) + + row.forEach((col, j) => { + const boardCol = this.createElement('div', 'col', ['col', j]) + boardRow.append(boardCol) + }) + }) + } + + /** + * Update the board by appending a player token to a cell + * @param {number} row + * @param {number} col + * @param {string} currentPlayer + */ + updateBoard = (row: number, col: number, currentPlayer: string): void => { + const playerToken = this.createElement('span', currentPlayer, undefined) + playerToken.textContent = currentPlayer + + const boardRow = this.getElement(`[data-row="${row}"]`) + const cell = boardRow.querySelector(`[data-col="${col}"]`) + + cell.append(playerToken) + } + + /** + * Set all cells in the board to empty strings + */ + clearGameBoard = (): void => { + const cells = this.getAllElements('.col') + + cells.forEach(cell => { + cell.textContent = '' + }) + } + + /** + * Update the existing score for the current player + * @param {Score} currentScore + * @param {string} currentPlayer + */ + updateScore = (currentScore: Score, currentPlayer: string): void => { + const currentPlayerScore = this.getElement(`#score-${currentPlayer}`) + const player = currentPlayer === 'x' ? 'Player 1' : 'Player 2' + const d: number = currentScore[currentPlayer] + currentPlayerScore.textContent = `${player}: ${d}` + } + + /** + * Print the win, lose, or stalemate message + * @param {string} winner + */ + printMessage = (winner: string): void => { + const message: HTMLElement|null = this.createElement('div', 'message') + const player = winner === 'x' ? 'Player 1' : 'Player 2' + + message.textContent = winner ? `${player} wins!` : 'Nobody wins!' + + const game = this.getElement('#game') + game.append(message) + } // imprime le message de gagne/egalite + + /** + * Clear message from the screen + */ + clearMessage = (): void => { + const message = this.getElement('.message') + message.remove() + } //enleve le message de gagne/egalite + + newGame = (): void => { + const game = this.getElement('#game') + const button_newGame = this.createElement('div',"button") + button_newGame.innerHTML =`` + button_newGame.addEventListener("click", (event) => { + window.location.reload(); + // this.updateBoard + // ticTacToe.res + // ticTacToe.startGame() + // ticTacToe.display.clearGameBoard + }); + game.append(button_newGame) + } + + } + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/control.ts b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/control.ts new file mode 100644 index 000000000..5dea4e57f --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/control.ts @@ -0,0 +1,115 @@ +function showStore(clothesShopArr: Item[]): void | false { + try { + if (store && clothesShopArr.length != 0) { + store.innerHTML=``; + for (let i = 0; i < clothesShopArr.length; i++) { + store.innerHTML += `
                + image +

                ${clothesShopArr[i].name}

                +
                ${clothesShopArr[i].department}
                +
                ${clothesShopArr[i].type}
                +

                ${clothesShopArr[i].price}

                +
                `; + } + } else { + throw new Error(`there is no item in the store`); + } + } catch (error) { + console.error(error); + return false; + } +} + +function getAllItemInType(clothesArr: Item[]): void | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + let typeGetFromUser; + while (!typeGetFromUser) { + typeGetFromUser = prompt(`Enter the type of item you will want to buy:`); + } + const chosenItemsArr = clothesArr.filter( + (item) => item.type == typeGetFromUser + ); + if (chosenItemsArr.length == 0) + throw new Error( + `items from type ${typeGetFromUser} is availble in our store` + ); + else { + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                +
                `; + } + } + } + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                Item from this type is availble in our store

                `; + return false; + } +} + +function sortArrByPrice(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = clothesArr.sort((a, b) => a.price - b.price); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < sortedArr.length; i++) { + store.innerHTML += `
                + image +

                ${sortedArr[i].name}

                +
                ${sortedArr[i].department}
                +
                ${sortedArr[i].type}
                +

                ${sortedArr[i].price}

                +
                `; + } + } + return sortedArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } +} + +function getTheCheapestItem(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = sortArrByPrice(clothesArr); + let chosenItemsArr; + if (sortedArr) { + chosenItemsArr = sortedArr.filter( + (item) => item.price == sortedArr[0].price + ); + if (chosenItemsArr.length == 0) + throw new Error(`there is no item in the store`); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                +
                `; + } + } + } + return chosenItemsArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/control.js b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/control.js new file mode 100644 index 000000000..f1a7df45b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/control.js @@ -0,0 +1,90 @@ +function showStore(clothesShopArr) { + try { + if (store && clothesShopArr.length != 0) { + store.innerHTML = ""; + for (var i = 0; i < clothesShopArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + clothesShopArr[i].name + "

                \n
                " + clothesShopArr[i].department + "
                \n
                " + clothesShopArr[i].type + "
                \n

                " + clothesShopArr[i].price + "

                \n
                "; + } + } + else { + throw new Error("there is no item in the store"); + } + } + catch (error) { + console.error(error); + return false; + } +} +function getAllItemInType(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var typeGetFromUser_1; + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); + } + var chosenItemsArr = clothesArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + if (chosenItemsArr.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); + else { + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n
                "; + } + } + } + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                Item from this type is availble in our store

                "; + return false; + } +} +function sortArrByPrice(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr = clothesArr.sort(function (a, b) { return a.price - b.price; }); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < sortedArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + sortedArr[i].name + "

                \n
                " + sortedArr[i].department + "
                \n
                " + sortedArr[i].type + "
                \n

                " + sortedArr[i].price + "

                \n
                "; + } + } + return sortedArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} +function getTheCheapestItem(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr_1 = sortArrByPrice(clothesArr); + var chosenItemsArr = void 0; + if (sortedArr_1) { + chosenItemsArr = sortedArr_1.filter(function (item) { return item.price == sortedArr_1[0].price; }); + if (chosenItemsArr.length == 0) + throw new Error("there is no item in the store"); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n
                "; + } + } + } + return chosenItemsArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/index.js b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..4f84db97c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/index.js @@ -0,0 +1 @@ +showStore(clothesShopArr); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/model.js new file mode 100644 index 000000000..d88f7a46d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/model.js @@ -0,0 +1,36 @@ +var Item = /** @class */ (function () { + function Item(name, department, type, price, image) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + this.image = image; + } + return Item; +}()); +var shirtLevisW = new Item("Levis-Shirt", "women", "shirt", 19.9, "data:image/jpeg;base64,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"); +var shirtLevisM = new Item("Levis-Shirt", "men", "shirt", 19.9, "data:image/jpeg;base64,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"); +var skirtW = new Item("Green-Skirt", "women", "skirt", 29.9, "data:image/jpeg;base64,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"); +var jeansDizzleM = new Item("Dizzle-Jean", "men", "pants", 59.9, "data:image/jpeg;base64,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"); +var shirtPackB = new Item("Shirts-Pack", "baby", "shirt", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU"); +var blouseW = new Item("White-Blouse", "women", "shirt", 15.9, "data:image/jpeg;base64,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"); +var sweatshirtNikeK = new Item("Nike-Sweatshirt", "kids", "sweatshirt", 49.9, "data:image/jpeg;base64,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"); +var dressW = new Item("Pink-Dress", "women", "dress", 39.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU"); +var denimJacketM = new Item("DenimJacket", "men", "outwear", 79.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU"); +var activeSetNikeW = new Item("Nike-ActiveSet", "women", "pants", 19.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU"); +var coatGapB = new Item("Yellow-Coat", "baby", "outwear", 49.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU"); +var hairAccesories = new Item("Hair-Clips", "women", "accesories", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU"); +var clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/style.css b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/style.css new file mode 100644 index 000000000..94b21cfba --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/style.css @@ -0,0 +1,68 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/view.js new file mode 100644 index 000000000..75a2b907d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/dist/view.js @@ -0,0 +1 @@ +var store = document.querySelector(".store"); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/index.html b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/index.html new file mode 100644 index 000000000..efadb420e --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/index.html @@ -0,0 +1,30 @@ + + + + + + + Document + + + + + + + +
                +

                Noa Store

                +
                +
                + + + + +
                +
                + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/index.ts b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..0a982d377 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/index.ts @@ -0,0 +1 @@ + showStore(clothesShopArr); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/model.ts b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/model.ts new file mode 100644 index 000000000..bdca9af1c --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/model.ts @@ -0,0 +1,109 @@ +class Item { + public constructor( + public name: string, + public department: string, + public type: string, + public price: number, + public image: string + ) {} +} + +const shirtLevisW = new Item( + "Levis-Shirt", + "women", + "shirt", + 19.9, + "data:image/jpeg;base64,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" +); +const shirtLevisM = new Item( + "Levis-Shirt", + "men", + "shirt", + 19.9, + "data:image/jpeg;base64,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" +); +const skirtW = new Item( + "Green-Skirt", + "women", + "skirt", + 29.9, + "data:image/jpeg;base64,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" +); +const jeansDizzleM = new Item( + "Dizzle-Jean", + "men", + "pants", + 59.9, + "data:image/jpeg;base64,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" +); +const shirtPackB = new Item( + "Shirts-Pack", + "baby", + "shirt", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU" +); +const blouseW = new Item( + "White-Blouse", + "women", + "shirt", + 15.9, + "data:image/jpeg;base64,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" +); +const sweatshirtNikeK = new Item( + "Nike-Sweatshirt", + "kids", + "sweatshirt", + 49.9, + "data:image/jpeg;base64,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" +); +const dressW = new Item( + "Pink-Dress", + "women", + "dress", + 39.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU" +); +const denimJacketM = new Item( + "DenimJacket", + "men", + "outwear", + 79.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU" +); +const activeSetNikeW = new Item( + "Nike-ActiveSet", + "women", + "pants", + 19.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU" +); +const coatGapB = new Item( + "Yellow-Coat", + "baby", + "outwear", + 49.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU" +); +const hairAccesories = new Item( + "Hair-Clips", + "women", + "accesories", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU" +); + +const clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/style.css b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/style.css new file mode 100644 index 000000000..cb2f98ea9 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/style.css @@ -0,0 +1,72 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/style.scss b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/style.scss new file mode 100644 index 000000000..9ac3129e0 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/style.scss @@ -0,0 +1,70 @@ +body{ + margin: 0; +} +.tittle{ + padding: 5px; + background-color: black; + + h2{ + color: azure; + margin: auto; + width: max-content; + } +} + +.function{ + display: flex; + flex-direction:row; + justify-content: space-around; + + button{ + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; + } +} + +.store{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__item{ + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__detail{ + padding: 0 5px; + margin: 0; + } + } +} +#image{ + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName{ + width: 100%; +} + +#itemDepartment{ + color: grey; +} + +#itemType{ + color: grey; +} + +#itemPrice{ + width: 100%; +} diff --git a/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/view.ts b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/view.ts new file mode 100644 index 000000000..dadb6d4fa --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/noa-meillet/view.ts @@ -0,0 +1 @@ +const store: HTMLHeadingElement | null = document.querySelector(".store"); diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shaili/design.md b/02-TypeScript/12-MVC/Home-Puzzles/shaili/design.md new file mode 100644 index 000000000..078b22271 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shaili/design.md @@ -0,0 +1,14 @@ +whatapp + +Model: The chat model handles the data for a specific chat, including the messages, participants, and other metadata. It also communicates with the server to fetch and send messages. + +View: The chat view displays the messages in a specific chat to the user, and allows the user to compose and send new messages. It also displays the status of other participants in the chat. + +Controller: The chat controller handles user input from the chat view, such as sending a new message or changing the chat settings. It updates the chat model and view accordingly. + +For example, when a user wants to send a message: + +They type the message in the view (chat view) +The controller receives the input and validate the message +If the message is valid, the controller updates the model (chat model) with the new message and sends the message to the server +The controller updates the view (chat view) to show the sent message diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/Controller.ts b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/Controller.ts new file mode 100644 index 000000000..251d13b2d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/Controller.ts @@ -0,0 +1,42 @@ + +function getProduct(){ + let i=0; + try { + for (i=0;i<=1;i++) { + const nameInput=prompt("what is the name of the item?") + const departmentInput=prompt("what is the name of the department?") + const yearInput=prompt("what is the name of the item?") + const pictureURLInput=prompt("what is the name of the item?") + + const shirt = new Product(nameInput, departmentInput, yearInput, pictureURLInput); + products.push(shirt) + console.log(products) + } + return products + + } catch (error) { + console.error(error) + return false + } +} + +console.log(products) +getProduct() +let j=0; +let page=""; + +for (j=0;j<=products.length-1;j++){ + page+=`
                +

                ${product[j].name}

                +

                ${product[j].department}

                +

                ${product[j].year}

                + +
                ` + } +const html:HTMLDivElement|null=document.querySelector("#list") +if (html!==null){ + + html.innerHTML= page; +console.log(html) + +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/MVC.pptx b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/MVC.pptx new file mode 100644 index 000000000..04d32147d Binary files /dev/null and b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/MVC.pptx differ diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/Model.ts b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/Model.ts new file mode 100644 index 000000000..8a80fb26b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/Model.ts @@ -0,0 +1,11 @@ +class Product { + constructor( + public name:string, + public department:string, + public year:number, + public pictureURL:string + + ) {} +} + + const products:Product[]=[] \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/View.ts b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/View.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/data.ts b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/data.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/controller.js b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/controller.js new file mode 100644 index 000000000..d61295688 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/controller.js @@ -0,0 +1,36 @@ +function getProduct() { + let i = 0; + try { + for (i = 0; i <= 1; i++) { + const nameInput = prompt("what is the name of the item?"); + const departmentInput = prompt("what is the name of the department?"); + const yearInput = prompt("what is the name of the item?"); + const pictureURLInput = prompt("what is the name of the item?"); + const shirt = new Product(nameInput, departmentInput, yearInput, pictureURLInput); + products.push(shirt); + console.log(products); + } + return products; + } + catch (error) { + console.error(error); + return false; + } +} +console.log(products); +getProduct(); +let j = 0; +let page = ""; +for (j = 0; j <= products.length - 1; j++) { + page += `
                +

                ${products[j].name}

                +

                ${products[j].department}

                +

                ${products[j].year}

                + +
                `; +} +const html = document.querySelector("#list"); +if (html !== null) { + html.innerHTML = page; + console.log(html); +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/model.js b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/model.js new file mode 100644 index 000000000..89e056bc5 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/model.js @@ -0,0 +1,9 @@ +class Product { + constructor(name, department, year, pictureURL) { + this.name = name; + this.department = department; + this.year = year; + this.pictureURL = pictureURL; + } +} +const products = []; diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/view.js b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/view.js new file mode 100644 index 000000000..a30099784 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/dist/view.js @@ -0,0 +1 @@ +const listSelector = document.querySelector("#list"); \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/main.html b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/main.html new file mode 100644 index 000000000..0421b1c8f --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/main.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + + +
                +
                New store +
                +
                +
                + +
                + + + + diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/scss.css b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/scss.css new file mode 100644 index 000000000..250e4ef9d --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/scss.css @@ -0,0 +1,26 @@ +body { + margin: auto; + background-color: rgba(0, 255, 255, 0.123); +} + +.headline { + margin: auto; + width: 300px; + border: solid coral; + font-size: 50px; + background-color: rgba(0, 255, 255, 0.623); + display: flex; + justify-content: center; +} + +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + border: solid coral; + padding: 50px; +} +.list img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/scss.scss b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/scss.scss new file mode 100644 index 000000000..43002cf4b --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/shlomi.samai/scss.scss @@ -0,0 +1,26 @@ +body { + margin: auto; + background-color: rgba(0, 255, 255, 0.123); +} +.headline { + margin: auto; + width: 300px; + border: solid coral; + font-size: 50px; + background-color: rgba(0, 255, 255, 0.623); + display: flex; + justify-content: center; + +} +.list { + + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + img { + width: 100%; + } + border: solid coral; + padding: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Home-Puzzles/tomer-cohen/design.md b/02-TypeScript/12-MVC/Home-Puzzles/tomer-cohen/design.md new file mode 100644 index 000000000..65fabe0e4 --- /dev/null +++ b/02-TypeScript/12-MVC/Home-Puzzles/tomer-cohen/design.md @@ -0,0 +1,20 @@ +Model: +The model in this app represents the data and the business logic. It is responsible for retrieving, storing, and manipulating the data. The entities in this model can include: +User: Contains information about the user such as name, email, and password. +Item: Contains information about the items such as name, description, and price. +Order: Contains information about the orders such as items, quantities, and total cost. + + +View: +The view in this app represents the user interface. It is responsible for displaying the data to the user and allowing them to interact with it. The view can include: +User Profile: Displays the user's information and allows them to update their profile. +Item List: Displays a list of items and allows the user to add items to their cart. +Order Summary: Displays the details of the user's current order. + + +Controller: +The controller in this app acts as the intermediary between the model and the view. It is responsible for handling user input and updating the model and view accordingly. The controller functions in this app can include: +Sign In: Handles the user's sign in request and validates their credentials. +Add Item: Handles the user's request to add an item to their cart. +Update Profile: Handles the user's request to update their profile information. +Checkout: Handles the user's request to checkout their order and submit it for processing. \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Omer.vir/controls.ts b/02-TypeScript/12-MVC/Omer.vir/controls.ts new file mode 100644 index 000000000..7012fb05e --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/controls.ts @@ -0,0 +1,34 @@ + +try { + if (!btn) throw new Error("btn empty"); + btn.addEventListener("click", () => { + const div = document.createElement("div"); + div.className = "card__text"; + const p = document.createElement("p"); + p.innerText = input.value; + div.append(p); + if (!input.value) throw new Error("input.value empty"); + + try { + if (!card) throw new Error("card empty"); + card.append(div); + } catch (error) { + console.error(error); + } + input.value = ""; + }) +} catch (error) { + console.error(error); +} + +try { + if(!time) throw new Error("time div not exist"); + const p = document.createElement("p"); + let html = currTime.getHours().toString() + ":" + currTime.getMinutes().toString(); + p.innerText = html; + time.append(p); +} catch (error) { + console.error(error); +} + + diff --git a/02-TypeScript/12-MVC/Omer.vir/dist/controls.js b/02-TypeScript/12-MVC/Omer.vir/dist/controls.js new file mode 100644 index 000000000..55193eb57 --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/dist/controls.js @@ -0,0 +1,36 @@ +try { + if (!btn) + throw new Error("btn empty"); + btn.addEventListener("click", function () { + var div = document.createElement("div"); + div.className = "card__text"; + var p = document.createElement("p"); + p.innerText = input.value; + div.append(p); + if (!input.value) + throw new Error("input.value empty"); + try { + if (!card) + throw new Error("card empty"); + card.append(div); + } + catch (error) { + console.error(error); + } + input.value = ""; + }); +} +catch (error) { + console.error(error); +} +try { + if (!time) + throw new Error("time div not exist"); + var p = document.createElement("p"); + var html = currTime.getHours().toString() + ":" + currTime.getMinutes().toString(); + p.innerText = html; + time.append(p); +} +catch (error) { + console.error(error); +} diff --git a/02-TypeScript/12-MVC/Omer.vir/dist/index.js b/02-TypeScript/12-MVC/Omer.vir/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Omer.vir/dist/models.js b/02-TypeScript/12-MVC/Omer.vir/dist/models.js new file mode 100644 index 000000000..7ce0c68cf --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/dist/models.js @@ -0,0 +1,16 @@ +var Text1 = /** @class */ (function () { + function Text1(text) { + this.text = text; + this.date = new Date(); + } + Text1.prototype.getText = function () { + return this.text; + }; + Text1.prototype.getHour = function () { + return this.date.getHours(); + }; + Text1.prototype.getMinutes = function () { + return this.date.getMinutes(); + }; + return Text1; +}()); diff --git a/02-TypeScript/12-MVC/Omer.vir/dist/style.css b/02-TypeScript/12-MVC/Omer.vir/dist/style.css new file mode 100644 index 000000000..60994e8cd --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/dist/style.css @@ -0,0 +1,99 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.card { + overflow-y: scroll; + position: relative; + width: 400px; + height: 100vh; + border: 1px black solid; + margin: 0 auto; +} +.card__top { + background-color: #2a7e32; + display: flex; + flex-direction: column; + margin-bottom: 10px; +} +.card__top__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; +} +.card__top__top__icons { + display: flex; + align-items: center; +} +.card__top__top__icons p { + margin-right: 3px; + margin-left: 5px; +} +.card__top__bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; +} +.card__top__bottom__icons i { + margin-left: 3px; +} +.card__top__bottom__name { + display: flex; + align-items: center; +} +.card__top__bottom__name__name { + margin-right: 3px; +} +.card__top__bottom__name__photo { + border-radius: 50%; + width: 25px; + height: 25px; + position: relative; + background-color: red; + background-image: url(./pexels-pixabay-60597.jpg); +} +.card img { + position: fixed; + margin: 0 auto; + top: 0; + width: 400px; + height: 100%; + z-index: -1; +} +.card__text p { + background-color: white; + padding: 3px 5px; + border-radius: 5px; + border: none; + border-top-left-radius: 0px; + display: inline-block; + margin: 2px 10px; +} +.card__send { + position: fixed; + bottom: 10px; + left: 50%; + transform: translate(-50%); + display: flex; + align-items: center; + justify-content: space-around; + width: 400px; +} +.card__send__icon { + border-radius: 50%; + background-color: #2a7e32; + width: 25px; + height: 25px; + display: grid; + place-items: center; +} +.card__send input { + width: 333px; + border-radius: 10px; + padding: 3px 2px; + border: none; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Omer.vir/dist/view.js b/02-TypeScript/12-MVC/Omer.vir/dist/view.js new file mode 100644 index 000000000..3fd34c79c --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/dist/view.js @@ -0,0 +1,5 @@ +var card = document.querySelector(".card"); +var input = document.getElementById("inputText"); +var btn = document.getElementById("btn"); +var time = document.getElementById("hour"); +var currTime = new Date(); diff --git a/02-TypeScript/12-MVC/Omer.vir/index.html b/02-TypeScript/12-MVC/Omer.vir/index.html new file mode 100644 index 000000000..b833d872c --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/index.html @@ -0,0 +1,55 @@ + + + + + + + + Whatsapp + + + + + + + + + + +
                +
                +
                +
                +

                58%

                + +
                +
                +
                +
                +
                + + + +
                +
                +
                +

                Alon

                +
                +
                + +
                +
                +
                +
                +
                +
                + +
                + + +
                + background +
                + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Omer.vir/index.ts b/02-TypeScript/12-MVC/Omer.vir/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/12-MVC/Omer.vir/models.ts b/02-TypeScript/12-MVC/Omer.vir/models.ts new file mode 100644 index 000000000..97eccd881 --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/models.ts @@ -0,0 +1,21 @@ +class Text1 { + private text:string; + private date:Date; + + constructor(text:string) { + this.text = text; + this.date = new Date(); + } + + getText() { + return this.text; + } + + getHour() { + return this.date.getHours(); + } + + getMinutes() { + return this.date.getMinutes(); + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Omer.vir/photos/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg b/02-TypeScript/12-MVC/Omer.vir/photos/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg new file mode 100644 index 000000000..a1e82498e Binary files /dev/null and b/02-TypeScript/12-MVC/Omer.vir/photos/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg differ diff --git a/02-TypeScript/12-MVC/Omer.vir/photos/WhatsApp.svg.png b/02-TypeScript/12-MVC/Omer.vir/photos/WhatsApp.svg.png new file mode 100644 index 000000000..7a55ef2a2 Binary files /dev/null and b/02-TypeScript/12-MVC/Omer.vir/photos/WhatsApp.svg.png differ diff --git a/02-TypeScript/12-MVC/Omer.vir/photos/pexels-pixabay-60597.jpg b/02-TypeScript/12-MVC/Omer.vir/photos/pexels-pixabay-60597.jpg new file mode 100644 index 000000000..347bae77e Binary files /dev/null and b/02-TypeScript/12-MVC/Omer.vir/photos/pexels-pixabay-60597.jpg differ diff --git a/02-TypeScript/12-MVC/Omer.vir/style.scss b/02-TypeScript/12-MVC/Omer.vir/style.scss new file mode 100644 index 000000000..25bedcbaa --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/style.scss @@ -0,0 +1,117 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.card { + overflow-y: scroll; + position: relative; + width: 400px; + height: 100vh; + border: 1px black solid; + margin: 0 auto; + + &__top { + background-color: rgb(42, 126, 50); + display: flex; + flex-direction: column; + margin-bottom: 10px; + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; + + &__icons { + display: flex; + align-items: center; + p { + margin-right: 3px; + margin-left: 5px; + } + } + + &__hour {} + } + + &__bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px; + + &__icons { + i { + margin-left: 3px; + } + } + + &__name { + display: flex; + align-items: center; + &__name { + margin-right: 3px; + } + + &__photo { + border-radius: 50%; + width: 25px; + height: 25px; + position: relative; + background-color: red; + background-image: url(./pexels-pixabay-60597.jpg); + } + } + } + } + + img { + position: fixed; + margin: 0 auto; + top: 0; + width: 400px; + height: 100%; + z-index: -1; + } + + &__text { + p { + background-color: white; + padding: 3px 5px; + border-radius: 5px; + border: none; + border-top-left-radius: 0px; + display: inline-block; + margin: 2px 10px; + } + } + + &__send { + position: fixed; + bottom: 10px; + left: 50%; + transform: translate(-50%); + display: flex; + align-items: center; + justify-content: space-around; + width: 400px; + + &__icon { + border-radius: 50%; + background-color: rgb(42, 126, 50); + width: 25px; + height: 25px; + display: grid; + place-items: center; + } + + input { + width: 333px; + border-radius: 10px; + padding: 3px 2px; + border: none; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/Omer.vir/view.ts b/02-TypeScript/12-MVC/Omer.vir/view.ts new file mode 100644 index 000000000..fdc36cbe5 --- /dev/null +++ b/02-TypeScript/12-MVC/Omer.vir/view.ts @@ -0,0 +1,5 @@ +const card = document.querySelector(".card"); +const input = document.getElementById("inputText"); +const btn = document.getElementById("btn"); +const time = document.getElementById("hour"); +let currTime = new Date(); \ No newline at end of file diff --git a/02-TypeScript/12-MVC/example/control.ts b/02-TypeScript/12-MVC/example/control.ts new file mode 100644 index 000000000..821ae3fd1 --- /dev/null +++ b/02-TypeScript/12-MVC/example/control.ts @@ -0,0 +1,27 @@ +//Controler +function getUrlFromUser() { + try { + const url = prompt("add picture url"); + if (!url || typeof url !== "string") throw new Error("no url found"); + pictures.push(new Picture(url)); + } catch (error) { + console.error(error); + } +} + +function renderPictures(pictures: Picture[]) { + try { + let html = ""; + + pictures.forEach((picture) => { + html += ``; + }); + console.log(html); + + const rootPictures = document.querySelector("#rootPictures"); + if (!rootPictures) throw new Error("couldnt find root element of pictures"); + rootPictures.innerHTML = html; + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/12-MVC/example/dist/control.js b/02-TypeScript/12-MVC/example/dist/control.js new file mode 100644 index 000000000..c7a2ea7f0 --- /dev/null +++ b/02-TypeScript/12-MVC/example/dist/control.js @@ -0,0 +1,28 @@ +//Controler +function getUrlFromUser() { + try { + var url = prompt("add picture url"); + if (!url || typeof url !== "string") + throw new Error("no url found"); + pictures.push(new Picture(url)); + } + catch (error) { + console.error(error); + } +} +function renderPictures(pictures) { + try { + var html_1 = ""; + pictures.forEach(function (picture) { + html_1 += ""; + }); + console.log(html_1); + var rootPictures = document.querySelector("#rootPictures"); + if (!rootPictures) + throw new Error("couldnt find root element of pictures"); + rootPictures.innerHTML = html_1; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/12-MVC/example/dist/helpers.js b/02-TypeScript/12-MVC/example/dist/helpers.js new file mode 100644 index 000000000..38059e5ad --- /dev/null +++ b/02-TypeScript/12-MVC/example/dist/helpers.js @@ -0,0 +1,4 @@ +//heleprs +function uid() { + return "id-" + Math.random(); +} diff --git a/02-TypeScript/12-MVC/example/dist/index.js b/02-TypeScript/12-MVC/example/dist/index.js new file mode 100644 index 000000000..4452c1d1b --- /dev/null +++ b/02-TypeScript/12-MVC/example/dist/index.js @@ -0,0 +1,4 @@ +//run +getUrlFromUser(); +getUrlFromUser(); +renderPictures(pictures); diff --git a/02-TypeScript/12-MVC/example/dist/model.js b/02-TypeScript/12-MVC/example/dist/model.js new file mode 100644 index 000000000..b3db65a74 --- /dev/null +++ b/02-TypeScript/12-MVC/example/dist/model.js @@ -0,0 +1,9 @@ +//Model = data; +var Picture = /** @class */ (function () { + function Picture(imgUrl) { + this.imgUrl = imgUrl; + this.id = uid(); + } + return Picture; +}()); +var pictures = []; diff --git a/02-TypeScript/12-MVC/example/dist/view.js b/02-TypeScript/12-MVC/example/dist/view.js new file mode 100644 index 000000000..f62dfd0e0 --- /dev/null +++ b/02-TypeScript/12-MVC/example/dist/view.js @@ -0,0 +1,2 @@ +//View +var rootPictures = document.querySelector("#rootPictures"); diff --git a/02-TypeScript/12-MVC/example/helpers.ts b/02-TypeScript/12-MVC/example/helpers.ts new file mode 100644 index 000000000..3d6e3edeb --- /dev/null +++ b/02-TypeScript/12-MVC/example/helpers.ts @@ -0,0 +1,4 @@ +//heleprs +function uid(): string { + return `id-${Math.random()}`; +} diff --git a/02-TypeScript/12-MVC/example/index.html b/02-TypeScript/12-MVC/example/index.html new file mode 100644 index 000000000..16d295f84 --- /dev/null +++ b/02-TypeScript/12-MVC/example/index.html @@ -0,0 +1,20 @@ + + + + + + + + Document + + + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/example/index.ts b/02-TypeScript/12-MVC/example/index.ts new file mode 100644 index 000000000..f1042055b --- /dev/null +++ b/02-TypeScript/12-MVC/example/index.ts @@ -0,0 +1,6 @@ +//run + +getUrlFromUser(); +getUrlFromUser(); + +renderPictures(pictures); diff --git a/02-TypeScript/12-MVC/example/model.ts b/02-TypeScript/12-MVC/example/model.ts new file mode 100644 index 000000000..b0ad160e2 --- /dev/null +++ b/02-TypeScript/12-MVC/example/model.ts @@ -0,0 +1,10 @@ +//Model = data; + +class Picture { + id: string; + constructor(public imgUrl: string) { + this.id = uid(); + } +} + +const pictures: Picture[] = []; diff --git a/02-TypeScript/12-MVC/example/view.ts b/02-TypeScript/12-MVC/example/view.ts new file mode 100644 index 000000000..891d56a62 --- /dev/null +++ b/02-TypeScript/12-MVC/example/view.ts @@ -0,0 +1,2 @@ +//View +const listSelector = document.querySelector("#list"); diff --git a/02-TypeScript/12-MVC/example2/control.ts b/02-TypeScript/12-MVC/example2/control.ts new file mode 100644 index 000000000..2a0b5f60c --- /dev/null +++ b/02-TypeScript/12-MVC/example2/control.ts @@ -0,0 +1,46 @@ +function getProductFromUser(): void { + try { + const name = prompt("what is the name of the product?"); + const _price = prompt("What is the price of the produc?"); + const imageUrl = prompt("Product image url"); + const date = new Date().getTime(); + if (!name || !_price || !imageUrl) throw new Error("Some data is missing"); + + const price = parseInt(_price); + if (typeof price !== "number") throw new Error("price is not a number"); + products.push(new Product(imageUrl, name, price, date)); + } catch (error) { + console.error(error); + } +} + +function renderProducts(products: Product[],someElement: Element | null): void { + try { + if (!someElement) + throw new Error("no dom element to render the products to"); + let html = ""; + + products.forEach((product) => { + html += `
                + +

                ${product.name}

                +

                Price: ${product.price}$

                +
                `; + }); + console.log(html); + + someElement.innerHTML = html; + } catch (error) { + console.error(error); + } +} + +function sortProducts(products: Product[], sortBy: "date" | "price") { + try { + const _products = products.sort((a, b) => a[sortBy] - b[sortBy]); + return _products; + } catch (error) { + console.error(error); + return products; + } +} diff --git a/02-TypeScript/12-MVC/example2/dist/control.js b/02-TypeScript/12-MVC/example2/dist/control.js new file mode 100644 index 000000000..c6ec2e92a --- /dev/null +++ b/02-TypeScript/12-MVC/example2/dist/control.js @@ -0,0 +1,42 @@ +function getProductFromUser() { + try { + var name = prompt("what is the name of the product?"); + var _price = prompt("What is the price of the produc?"); + var imageUrl = prompt("Product image url"); + var date = new Date().getTime(); + if (!name || !_price || !imageUrl) + throw new Error("Some data is missing"); + var price = parseInt(_price); + if (typeof price !== "number") + throw new Error("price is not a number"); + products.push(new Product(imageUrl, name, price, date)); + } + catch (error) { + console.error(error); + } +} +function renderProducts(products, someElement) { + try { + if (!someElement) + throw new Error("no dom element to render the products to"); + var html_1 = ""; + products.forEach(function (product) { + html_1 += "
                \n \n

                " + product.name + "

                \n

                Price: " + product.price + "$

                \n
                "; + }); + console.log(html_1); + someElement.innerHTML = html_1; + } + catch (error) { + console.error(error); + } +} +function sortProducts(products, sortBy) { + try { + var _products = products.sort(function (a, b) { return a[sortBy] - b[sortBy]; }); + return _products; + } + catch (error) { + console.error(error); + return products; + } +} diff --git a/02-TypeScript/12-MVC/example2/dist/index.js b/02-TypeScript/12-MVC/example2/dist/index.js new file mode 100644 index 000000000..ee3a840da --- /dev/null +++ b/02-TypeScript/12-MVC/example2/dist/index.js @@ -0,0 +1,6 @@ +getProductFromUser(); +getProductFromUser(); +getProductFromUser(); +console.log(products); +var sortedProducts = sortProducts(products, "date"); +renderProducts(sortedProducts, rootProducts); diff --git a/02-TypeScript/12-MVC/example2/dist/model.js b/02-TypeScript/12-MVC/example2/dist/model.js new file mode 100644 index 000000000..398c6ada9 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/dist/model.js @@ -0,0 +1,10 @@ +var Product = /** @class */ (function () { + function Product(imgUrl, name, price, date) { + this.imgUrl = imgUrl; + this.name = name; + this.price = price; + this.date = date; + } + return Product; +}()); +var products = []; diff --git a/02-TypeScript/12-MVC/example2/dist/style.css b/02-TypeScript/12-MVC/example2/dist/style.css new file mode 100644 index 000000000..ef293e142 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/dist/style.css @@ -0,0 +1,8 @@ +.card { + padding: 20px; + border-radius: 10px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.508); +} +.card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/example2/dist/view.js b/02-TypeScript/12-MVC/example2/dist/view.js new file mode 100644 index 000000000..f8bc5b4b4 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/dist/view.js @@ -0,0 +1 @@ +var rootProducts = document.querySelector("#rootProducts"); diff --git a/02-TypeScript/12-MVC/example2/index.html b/02-TypeScript/12-MVC/example2/index.html new file mode 100644 index 000000000..4eca376c6 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/index.html @@ -0,0 +1,22 @@ + + + + + + + + Document + + + + + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/12-MVC/example2/index.ts b/02-TypeScript/12-MVC/example2/index.ts new file mode 100644 index 000000000..3463fe510 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/index.ts @@ -0,0 +1,7 @@ +getProductFromUser(); +getProductFromUser(); +getProductFromUser(); +console.log(products); + +const sortedProducts = sortProducts(products, "date"); +renderProducts(sortedProducts, rootProducts); diff --git a/02-TypeScript/12-MVC/example2/model.ts b/02-TypeScript/12-MVC/example2/model.ts new file mode 100644 index 000000000..21b67bde0 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/model.ts @@ -0,0 +1,10 @@ +class Product { + constructor( + public imgUrl: string, + public name: string, + public price: number, + public date: number + ) {} +} + +const products: Product[] = []; diff --git a/02-TypeScript/12-MVC/example2/style.css b/02-TypeScript/12-MVC/example2/style.css new file mode 100644 index 000000000..ef293e142 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/style.css @@ -0,0 +1,8 @@ +.card { + padding: 20px; + border-radius: 10px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.508); +} +.card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/12-MVC/example2/style.scss b/02-TypeScript/12-MVC/example2/style.scss new file mode 100644 index 000000000..16ef67f5e --- /dev/null +++ b/02-TypeScript/12-MVC/example2/style.scss @@ -0,0 +1,8 @@ +.card { + padding: 20px; + border-radius: 10px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.508); + img { + width: 100%; + } +} diff --git a/02-TypeScript/12-MVC/example2/view.ts b/02-TypeScript/12-MVC/example2/view.ts new file mode 100644 index 000000000..aa634fc90 --- /dev/null +++ b/02-TypeScript/12-MVC/example2/view.ts @@ -0,0 +1 @@ +const rootProducts = document.querySelector("#rootProducts"); diff --git a/02-TypeScript/13-MVC-DOM/example2/control.ts b/02-TypeScript/13-MVC-DOM/example2/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/example2/dist/control.js b/02-TypeScript/13-MVC-DOM/example2/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/example2/dist/helpers.js b/02-TypeScript/13-MVC-DOM/example2/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/example2/dist/index.js b/02-TypeScript/13-MVC-DOM/example2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/example2/dist/model.js b/02-TypeScript/13-MVC-DOM/example2/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/example2/dist/style.css b/02-TypeScript/13-MVC-DOM/example2/dist/style.css new file mode 100644 index 000000000..d712e11cd --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/example2/dist/view.js b/02-TypeScript/13-MVC-DOM/example2/dist/view.js new file mode 100644 index 000000000..d7d7eea26 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/dist/view.js @@ -0,0 +1,4 @@ +var boxes = document.querySelectorAll(".box, .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); +console.dir([1]); diff --git a/02-TypeScript/13-MVC-DOM/example2/helpers.ts b/02-TypeScript/13-MVC-DOM/example2/helpers.ts new file mode 100644 index 000000000..8c5bb6ff3 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/helpers.ts @@ -0,0 +1,3 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/example2/index.html b/02-TypeScript/13-MVC-DOM/example2/index.html new file mode 100644 index 000000000..6bb8a6785 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/index.html @@ -0,0 +1,34 @@ + + + + + + + + Document + + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/example2/index.ts b/02-TypeScript/13-MVC-DOM/example2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/example2/model.ts b/02-TypeScript/13-MVC-DOM/example2/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/13-MVC-DOM/example2/style.css b/02-TypeScript/13-MVC-DOM/example2/style.css new file mode 100644 index 000000000..a7451ecc9 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/example2/style.scss b/02-TypeScript/13-MVC-DOM/example2/style.scss new file mode 100644 index 000000000..79fc39a21 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/style.scss @@ -0,0 +1,16 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + } + .box2{ + height: 300px; + background-color: rgb(25, 87, 87); + } +} diff --git a/02-TypeScript/13-MVC-DOM/example2/view.ts b/02-TypeScript/13-MVC-DOM/example2/view.ts new file mode 100644 index 000000000..cfb31e6d9 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/example2/view.ts @@ -0,0 +1,7 @@ +const boxes:any = document.querySelectorAll(".box, .box2"); + +console.dir(boxes); + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()) + +console.dir([1]); diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/control.ts b/02-TypeScript/13-MVC-DOM/followups/Amit/control.ts new file mode 100644 index 000000000..d56d30c97 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/control.ts @@ -0,0 +1,104 @@ +let enterCounter: number = 0; + + +const solution: string = "SMART"; + +let currentCell = linesArray[0][0]; + + + +function insertLetterToCell(letter: string): void { + try { + if (linesArray[enterCounter][4].innerText === "") { + currentCell.innerText = letter; + if (currentCell.nextElementSibling) { + currentCell = currentCell.nextElementSibling; //move to next cell + } + } + + } catch (error: unknown) { + console.error(Error); + } +} + + +function deleteLetterFromCell(): void { //clicking BACK + try { + if (linesArray[enterCounter][0].innerText !== "") { + if (linesArray[enterCounter][4].innerText === "") { + currentCell = currentCell.previousElementSibling; + currentCell.innerText = ""; + } + if (linesArray[enterCounter][4].innerText !== "") { + currentCell.innerText = ""; + } + } + + } catch (error: unknown) { + console.error(Error); + } +} + + + +function enter(): void { //clicking ENTER + try { + + if (linesArray[enterCounter][4].innerText !== "") { + let correctLetters: number = 0 + + for (let i = 0; i < 5; i++) { + if (solution.includes(linesArray[enterCounter][i].innerText)) { + + if (linesArray[enterCounter][i].innerText === solution[i]) { + linesArray[enterCounter][i].style.backgroundColor = "orange"; + correctLetters++ + if (correctLetters === 5) alert("you win!"); // change to animation with 2sec dealy// + }else{ + linesArray[enterCounter][i].style.backgroundColor = "blue"; + } + } + } + enterCounter++; + currentCell = linesArray[enterCounter][0]; // goes to the next line + } + + } catch (error: unknown) { + console.error(Error); + } +} + + + +// function enter(): void { //clicking ENTER +// try { +// if (linesArray[enterCounter][4].innerText !== "") { +// let correctLetters: number = 0; +// for (let i = 0; i < 5; i++) { + +// if (linesArray[enterCounter][i].innerText === solution[i]) { //exact spot +// linesArray[enterCounter][i].style.backgroundColor = "orange"; +// correctLetters++; +// if (correctLetters === 5) alert("you win!"); // change to animation with 2sec dealy// +// } else if (solution.includes(linesArray[enterCounter][i].innerText)) { +// if(linesArray[enterCounter][i].innerText === solution[i+1]){ +// linesArray[enterCounter][i].style.backgroundColor = "blue"; + +// } +// if(linesArray[enterCounter][i].innerText === solution[i+2]) linesArray[enterCounter][i].style.backgroundColor = "blue"; +// if(linesArray[enterCounter][i].innerText === solution[i+3]) linesArray[enterCounter][i].style.backgroundColor = "blue"; +// if(linesArray[enterCounter][i].innerText === solution[i+4]) linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } +// } +// enterCounter++; +// currentCell = linesArray[enterCounter][0]; // goes to the next line +// } +// } + +// catch (error: unknown) { +// console.error(Error); +// } +// } + + + diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/control.js new file mode 100644 index 000000000..5432388d1 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/control.js @@ -0,0 +1,83 @@ +var enterCounter = 0; +var solution = "SMART"; +var currentCell = linesArray[0][0]; +function insertLetterToCell(letter) { + try { + if (linesArray[enterCounter][4].innerText === "") { + currentCell.innerText = letter; + if (currentCell.nextElementSibling) { + currentCell = currentCell.nextElementSibling; //move to next cell + } + } + } + catch (error) { + console.error(Error); + } +} +function deleteLetterFromCell() { + try { + if (linesArray[enterCounter][0].innerText !== "") { + if (linesArray[enterCounter][4].innerText === "") { + currentCell = currentCell.previousElementSibling; + currentCell.innerText = ""; + } + if (linesArray[enterCounter][4].innerText !== "") { + currentCell.innerText = ""; + } + } + } + catch (error) { + console.error(Error); + } +} +function enter() { + try { + if (linesArray[enterCounter][4].innerText !== "") { + var correctLetters = 0; + for (var i = 0; i < 5; i++) { + if (solution.includes(linesArray[enterCounter][i].innerText)) { + if (linesArray[enterCounter][i].innerText === solution[i]) { + linesArray[enterCounter][i].style.backgroundColor = "orange"; + correctLetters++; + if (correctLetters === 5) + alert("you win!"); // change to animation with 2sec dealy// + } + else { + linesArray[enterCounter][i].style.backgroundColor = "blue"; + } + } + } + enterCounter++; + currentCell = linesArray[enterCounter][0]; // goes to the next line + } + } + catch (error) { + console.error(Error); + } +} +// function enter(): void { //clicking ENTER +// try { +// if (linesArray[enterCounter][4].innerText !== "") { +// let correctLetters: number = 0; +// for (let i = 0; i < 5; i++) { +// if (linesArray[enterCounter][i].innerText === solution[i]) { //exact spot +// linesArray[enterCounter][i].style.backgroundColor = "orange"; +// correctLetters++; +// if (correctLetters === 5) alert("you win!"); // change to animation with 2sec dealy// +// } else if (solution.includes(linesArray[enterCounter][i].innerText)) { +// if(linesArray[enterCounter][i].innerText === solution[i+1]){ +// linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } +// if(linesArray[enterCounter][i].innerText === solution[i+2]) linesArray[enterCounter][i].style.backgroundColor = "blue"; +// if(linesArray[enterCounter][i].innerText === solution[i+3]) linesArray[enterCounter][i].style.backgroundColor = "blue"; +// if(linesArray[enterCounter][i].innerText === solution[i+4]) linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } +// } +// enterCounter++; +// currentCell = linesArray[enterCounter][0]; // goes to the next line +// } +// } +// catch (error: unknown) { +// console.error(Error); +// } +// } diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/style.css new file mode 100644 index 000000000..9865dd4ee --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/style.css @@ -0,0 +1,59 @@ +body { + background-color: black; + margin: 0; + position: relative; +} + +.board { + height: 30rem; + width: 30rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; +} +.board__line { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; +} +.board__line__cell { + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; +} + +.keyboard { + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: 5rem; + display: flex; + flex-direction: column; +} +.keyboard__line { + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; +} +.keyboard__line__key { + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/view.js new file mode 100644 index 000000000..f302cbd8b --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/dist/view.js @@ -0,0 +1,84 @@ +var cell0101 = document.querySelector("#cell0101"); +var cell0102 = document.querySelector("#cell0102"); +var cell0103 = document.querySelector("#cell0103"); +var cell0104 = document.querySelector("#cell0104"); +var cell0105 = document.querySelector("#cell0105"); +var line01 = []; +if (cell0101 && cell0102 && cell0103 && cell0104 && cell0105) { + line01.push(cell0101, cell0102, cell0103, cell0104, cell0105); +} +var cell0201 = document.querySelector("#cell0201"); +var cell0202 = document.querySelector("#cell0202"); +var cell0203 = document.querySelector("#cell0203"); +var cell0204 = document.querySelector("#cell0204"); +var cell0205 = document.querySelector("#cell0205"); +var line02 = []; +if (cell0201 && cell0202 && cell0203 && cell0204 && cell0205) { + line02.push(cell0201, cell0202, cell0203, cell0204, cell0205); +} +var cell0301 = document.querySelector("#cell0301"); +var cell0302 = document.querySelector("#cell0302"); +var cell0303 = document.querySelector("#cell0303"); +var cell0304 = document.querySelector("#cell0304"); +var cell0305 = document.querySelector("#cell0305"); +var line03 = []; +if (cell0301 && cell0302 && cell0303 && cell0304 && cell0305) { + line03.push(cell0301, cell0302, cell0303, cell0304, cell0305); +} +var cell0401 = document.querySelector("#cell0401"); +var cell0402 = document.querySelector("#cell0402"); +var cell0403 = document.querySelector("#cell0403"); +var cell0404 = document.querySelector("#cell0404"); +var cell0405 = document.querySelector("#cell0405"); +var line04 = []; +if (cell0401 && cell0402 && cell0403 && cell0404 && cell0405) { + line04.push(cell0401, cell0402, cell0403, cell0404, cell0405); +} +var cell0501 = document.querySelector("#cell0501"); +var cell0502 = document.querySelector("#cell0502"); +var cell0503 = document.querySelector("#cell0503"); +var cell0504 = document.querySelector("#cell0504"); +var cell0505 = document.querySelector("#cell0505"); +var line05 = []; +if (cell0501 && cell0502 && cell0503 && cell0504 && cell0505) { + line05.push(cell0501, cell0502, cell0503, cell0504, cell0505); +} +var cell0601 = document.querySelector("#cell0601"); +var cell0602 = document.querySelector("#cell0602"); +var cell0603 = document.querySelector("#cell0603"); +var cell0604 = document.querySelector("#cell0604"); +var cell0605 = document.querySelector("#cell0605"); +var line06 = []; +if (cell0601 && cell0602 && cell0603 && cell0604 && cell0605) { + line06.push(cell0601, cell0602, cell0603, cell0604, cell0605); +} +var linesArray = [line01, line02, line03, line04, line05, line06]; +// let enterCounter: number = 0; +// const solution: string = "SMART"; +// const solutionArray = solution.split(""); +// let currentCell = linesArray[0][0]; +// function insertLetterToCell(letter: string): void { +// try { +// currentCell.innerText = letter; +// currentCell = currentCell.nextElementSibling; +// } catch (error: unknown) { +// console.error(Error); +// } +// } +// function enter(): void { +// try { +// for (let i = 0; i < 5; i++) { +// if (solution.includes(linesArray[enterCounter][i].innerText)) { +// linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } +// if (linesArray[enterCounter][i].innerText === solution[i]) { +// linesArray[enterCounter][i].style.backgroundColor = "orange"; +// } +// } +// enterCounter++; +// console.log(`enter counter =${enterCounter}`) +// currentCell = linesArray[enterCounter][0]; // goes to the next line +// } catch (error: unknown) { +// console.error(Error); +// } +// } diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/Amit/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/index.html b/02-TypeScript/13-MVC-DOM/followups/Amit/index.html new file mode 100644 index 000000000..715f8047a --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/index.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + Document + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                + +
                +
                + + + + + + + + + + +
                +
                + + + + + + + + + +
                +
                + + + + + + + + + +
                +
                + + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/index.ts b/02-TypeScript/13-MVC-DOM/followups/Amit/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/model.ts b/02-TypeScript/13-MVC-DOM/followups/Amit/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/style.css b/02-TypeScript/13-MVC-DOM/followups/Amit/style.css new file mode 100644 index 000000000..9865dd4ee --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/style.css @@ -0,0 +1,59 @@ +body { + background-color: black; + margin: 0; + position: relative; +} + +.board { + height: 30rem; + width: 30rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; +} +.board__line { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; +} +.board__line__cell { + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; +} + +.keyboard { + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: 5rem; + display: flex; + flex-direction: column; +} +.keyboard__line { + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; +} +.keyboard__line__key { + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/style.scss b/02-TypeScript/13-MVC-DOM/followups/Amit/style.scss new file mode 100644 index 000000000..34391cd6c --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/style.scss @@ -0,0 +1,60 @@ +body{ + background-color: black; + margin: 0; + position: relative; +} + +.board{ + height: 30rem; + width: 30rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + &__line{ + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; + &__cell{ + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; + + } + } +} + +.keyboard{ + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: 5rem; + display: flex; + flex-direction: column; + &__line{ + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; + &__key{ + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; + } + } +} diff --git a/02-TypeScript/13-MVC-DOM/followups/Amit/view.ts b/02-TypeScript/13-MVC-DOM/followups/Amit/view.ts new file mode 100644 index 000000000..e4f4f25f7 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Amit/view.ts @@ -0,0 +1,129 @@ +const cell0101: HTMLDivElement | null = document.querySelector("#cell0101"); +const cell0102: HTMLDivElement | null = document.querySelector("#cell0102"); +const cell0103: HTMLDivElement | null = document.querySelector("#cell0103"); +const cell0104: HTMLDivElement | null = document.querySelector("#cell0104"); +const cell0105: HTMLDivElement | null = document.querySelector("#cell0105"); +const line01: HTMLDivElement[] = []; +if (cell0101 && cell0102 && cell0103 && cell0104 && cell0105) { + line01.push(cell0101, cell0102, cell0103, cell0104, cell0105); +} + +const cell0201: HTMLDivElement | null = document.querySelector("#cell0201"); +const cell0202: HTMLDivElement | null = document.querySelector("#cell0202"); +const cell0203: HTMLDivElement | null = document.querySelector("#cell0203"); +const cell0204: HTMLDivElement | null = document.querySelector("#cell0204"); +const cell0205: HTMLDivElement | null = document.querySelector("#cell0205"); +const line02: HTMLDivElement[] = []; +if (cell0201 && cell0202 && cell0203 && cell0204 && cell0205) { + line02.push(cell0201, cell0202, cell0203, cell0204, cell0205); +} + +const cell0301: HTMLDivElement | null = document.querySelector("#cell0301"); +const cell0302: HTMLDivElement | null = document.querySelector("#cell0302"); +const cell0303: HTMLDivElement | null = document.querySelector("#cell0303"); +const cell0304: HTMLDivElement | null = document.querySelector("#cell0304"); +const cell0305: HTMLDivElement | null = document.querySelector("#cell0305"); +const line03: HTMLDivElement[] = []; +if (cell0301 && cell0302 && cell0303 && cell0304 && cell0305) { + line03.push(cell0301, cell0302, cell0303, cell0304, cell0305); +} + +const cell0401: HTMLDivElement | null = document.querySelector("#cell0401"); +const cell0402: HTMLDivElement | null = document.querySelector("#cell0402"); +const cell0403: HTMLDivElement | null = document.querySelector("#cell0403"); +const cell0404: HTMLDivElement | null = document.querySelector("#cell0404"); +const cell0405: HTMLDivElement | null = document.querySelector("#cell0405"); +const line04: HTMLDivElement[] = []; +if (cell0401 && cell0402 && cell0403 && cell0404 && cell0405) { + line04.push(cell0401, cell0402, cell0403, cell0404, cell0405); +} + +const cell0501: HTMLDivElement | null = document.querySelector("#cell0501"); +const cell0502: HTMLDivElement | null = document.querySelector("#cell0502"); +const cell0503: HTMLDivElement | null = document.querySelector("#cell0503"); +const cell0504: HTMLDivElement | null = document.querySelector("#cell0504"); +const cell0505: HTMLDivElement | null = document.querySelector("#cell0505"); +const line05: HTMLDivElement[] = []; +if (cell0501 && cell0502 && cell0503 && cell0504 && cell0505) { + line05.push(cell0501, cell0502, cell0503, cell0504, cell0505); +} + +const cell0601: HTMLDivElement | null = document.querySelector("#cell0601"); +const cell0602: HTMLDivElement | null = document.querySelector("#cell0602"); +const cell0603: HTMLDivElement | null = document.querySelector("#cell0603"); +const cell0604: HTMLDivElement | null = document.querySelector("#cell0604"); +const cell0605: HTMLDivElement | null = document.querySelector("#cell0605"); +const line06: HTMLDivElement[] = []; +if (cell0601 && cell0602 && cell0603 && cell0604 && cell0605) { + line06.push(cell0601, cell0602, cell0603, cell0604, cell0605); +} + + +const linesArray: HTMLElement[][] = [line01, line02, line03, line04, line05, line06]; + + + + + + + + + + + + + + + + + + + + + + + +// let enterCounter: number = 0; + + +// const solution: string = "SMART"; +// const solutionArray = solution.split(""); + +// let currentCell = linesArray[0][0]; + + +// function insertLetterToCell(letter: string): void { +// try { +// currentCell.innerText = letter; +// currentCell = currentCell.nextElementSibling; + +// } catch (error: unknown) { +// console.error(Error); +// } +// } + +// function enter(): void { +// try { + + + +// for (let i = 0; i < 5; i++) { +// if (solution.includes(linesArray[enterCounter][i].innerText)) { +// linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } + +// if (linesArray[enterCounter][i].innerText === solution[i]) { +// linesArray[enterCounter][i].style.backgroundColor = "orange"; +// } +// } + +// enterCounter++; +// console.log(`enter counter =${enterCounter}`) + +// currentCell = linesArray[enterCounter][0]; // goes to the next line + +// } catch (error: unknown) { +// console.error(Error); +// } +// } + diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/control.ts b/02-TypeScript/13-MVC-DOM/followups/Ayala/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/style.css new file mode 100644 index 000000000..c0ae25623 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/style.css @@ -0,0 +1,15 @@ +.container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.container .box { + height: 300px; + background-color: teal; +} +.container .box2 { + height: 300px; + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/view.js new file mode 100644 index 000000000..6ab26db22 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/dist/view.js @@ -0,0 +1,4 @@ +var boxes = document.querySelectorAll(".box, .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = "green"; }); +console.dir([]); diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/Ayala/helpers.ts new file mode 100644 index 000000000..0d6312759 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/helpers.ts @@ -0,0 +1,4 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/index.html b/02-TypeScript/13-MVC-DOM/followups/Ayala/index.html new file mode 100644 index 000000000..fdf141ae8 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/index.html @@ -0,0 +1,32 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/index.ts b/02-TypeScript/13-MVC-DOM/followups/Ayala/index.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/index.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/model.ts b/02-TypeScript/13-MVC-DOM/followups/Ayala/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/style.css b/02-TypeScript/13-MVC-DOM/followups/Ayala/style.css new file mode 100644 index 000000000..530c3ce5e --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/style.css @@ -0,0 +1,15 @@ +.container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.container .box { + height: 300px; + background-color: teal; +} +.container .box2 { + height: 300px; + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/style.scss b/02-TypeScript/13-MVC-DOM/followups/Ayala/style.scss new file mode 100644 index 000000000..815c9e88a --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/style.scss @@ -0,0 +1,18 @@ + +.container{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + } + .box2{ + height: 300px; + background-color: rgb(25, 87, 87); + } + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Ayala/view.ts b/02-TypeScript/13-MVC-DOM/followups/Ayala/view.ts new file mode 100644 index 000000000..e7a0f8f54 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Ayala/view.ts @@ -0,0 +1,10 @@ +const boxes:any = document.querySelectorAll(".box, .box2"); + +console.dir(boxes); + +boxes.forEach(box=>box.style.backgroundColor ="green") + +console.dir([]); + + + diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/control.ts b/02-TypeScript/13-MVC-DOM/followups/Itai-G/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/style.css new file mode 100644 index 000000000..d712e11cd --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/view.js new file mode 100644 index 000000000..fc287c60b --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/dist/view.js @@ -0,0 +1,4 @@ +var boxes = document.querySelectorAll(".box , .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); +console.dir(boxes); diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/Itai-G/helpers.ts new file mode 100644 index 000000000..a7689f962 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/helpers.ts @@ -0,0 +1,3 @@ +function getRandomColor():string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/index.html b/02-TypeScript/13-MVC-DOM/followups/Itai-G/index.html new file mode 100644 index 000000000..60ae61dbf --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/index.html @@ -0,0 +1,33 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/index.ts b/02-TypeScript/13-MVC-DOM/followups/Itai-G/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/model.ts b/02-TypeScript/13-MVC-DOM/followups/Itai-G/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/style.css b/02-TypeScript/13-MVC-DOM/followups/Itai-G/style.css new file mode 100644 index 000000000..a7451ecc9 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/style.scss b/02-TypeScript/13-MVC-DOM/followups/Itai-G/style.scss new file mode 100644 index 000000000..ab6d63028 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/style.scss @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + } + .box2{ + height: 300px; + background-color: rgb(25, 87, 87); + } + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Itai-G/view.ts b/02-TypeScript/13-MVC-DOM/followups/Itai-G/view.ts new file mode 100644 index 000000000..4781e3104 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Itai-G/view.ts @@ -0,0 +1,7 @@ +const boxes:any =document.querySelectorAll(".box , .box2"); + +console.dir(boxes); + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()); + +console.dir(boxes); \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/controls.ts b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/controls.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/controls.js b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/controls.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/helpers.js new file mode 100644 index 000000000..6f1c40bdf --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/helpers.js @@ -0,0 +1,6 @@ +function getRandomBoxColor() { + var randomColor = Math.floor(Math.random() * 16777215).toString(16); +} +var boxes = document.querySelectorAll(".box"); +console.log(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomBoxColor(); }); diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/models.js b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/models.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/style.css new file mode 100644 index 000000000..d712e11cd --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/view.js new file mode 100644 index 000000000..b08986384 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/dist/view.js @@ -0,0 +1,3 @@ +var boxes = document.querySelectorAll(".box"); +console.log(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomBoxColor(); }); diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/helpers.ts new file mode 100644 index 000000000..cecea3774 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/helpers.ts @@ -0,0 +1,8 @@ +function getRandomBoxColor(){ + var randomColor = Math.floor(Math.random()*16777215).toString(16); +} +const boxes:any = document.querySelectorAll(".box") +console.log(boxes); +boxes.forEach(box=>box.style.backgroundColor = getRandomBoxColor()) + + diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/index.html b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/index.html new file mode 100644 index 000000000..1b2ca660b --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/index.html @@ -0,0 +1,29 @@ + + + + + + + MVC + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/index.ts b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/models.ts b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/models.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/style.css b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/style.css new file mode 100644 index 000000000..a7451ecc9 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/style.scss b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/style.scss new file mode 100644 index 000000000..ab6d63028 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/style.scss @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + } + .box2{ + height: 300px; + background-color: rgb(25, 87, 87); + } + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/view.ts b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/view.ts new file mode 100644 index 000000000..f4f6d92d1 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Maxim Roz/view.ts @@ -0,0 +1,5 @@ +const boxes:any = document.querySelectorAll(".box") +console.log(boxes); +boxes.forEach(box=>box.style.backgroundColor = getRandomBoxColor()) + + diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/control.ts b/02-TypeScript/13-MVC-DOM/followups/Orel/control.ts new file mode 100644 index 000000000..f61d6008d --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/control.ts @@ -0,0 +1,13 @@ +const boxes = document.querySelectorAll('.box')!; + +boxes.forEach((box , index)=> { + if(index % 3 === 0){ + box.style.backgroundColor = "green" + } else if(index % 2 === 0){ + box.style.backgroundColor = "red" + } else { + box.style.backgroundColor = "gray" + + } + +}) diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/control.js new file mode 100644 index 000000000..1100af52d --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/control.js @@ -0,0 +1,13 @@ +"use strict"; +const boxes = document.querySelectorAll('.box'); +boxes.forEach((box, index) => { + if (index % 3 === 0) { + box.style.backgroundColor = "green"; + } + else if (index % 2 === 0) { + box.style.backgroundColor = "red"; + } + else { + box.style.backgroundColor = "gray"; + } +}); diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/index.js new file mode 100644 index 000000000..3918c74e4 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/index.js @@ -0,0 +1 @@ +"use strict"; diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/dist/mode.js b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/mode.js new file mode 100644 index 000000000..3918c74e4 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/mode.js @@ -0,0 +1 @@ +"use strict"; diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/style.css new file mode 100644 index 000000000..c2d8b782c --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/style.css @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 325px; + gap: 10px; +} + +.box { + background-color: darkblue; + height: 150px; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/view.js new file mode 100644 index 000000000..3918c74e4 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/dist/view.js @@ -0,0 +1 @@ +"use strict"; diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/index.html b/02-TypeScript/13-MVC-DOM/followups/Orel/index.html new file mode 100644 index 000000000..60ae61dbf --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/index.html @@ -0,0 +1,33 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/index.ts b/02-TypeScript/13-MVC-DOM/followups/Orel/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/mode.ts b/02-TypeScript/13-MVC-DOM/followups/Orel/mode.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/style.css b/02-TypeScript/13-MVC-DOM/followups/Orel/style.css new file mode 100644 index 000000000..c2d8b782c --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/style.css @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + width: 325px; + gap: 10px; +} + +.box { + background-color: darkblue; + height: 150px; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/style.scss b/02-TypeScript/13-MVC-DOM/followups/Orel/style.scss new file mode 100644 index 000000000..2fbe7224f --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/style.scss @@ -0,0 +1,12 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2 ,1fr); + width: 325px; + gap:10px; +} + +.box{ + + background-color: darkblue; + height: 150px; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/tsconfig.json b/02-TypeScript/13-MVC-DOM/followups/Orel/tsconfig.json new file mode 100644 index 000000000..2bcf56088 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Orel/tsconfig.json @@ -0,0 +1,103 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist/", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} diff --git a/02-TypeScript/13-MVC-DOM/followups/Orel/view.ts b/02-TypeScript/13-MVC-DOM/followups/Orel/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/control.ts b/02-TypeScript/13-MVC-DOM/followups/Raanan/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/style.css new file mode 100644 index 000000000..99807dda7 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background: teal; +} +.wrapper .box2 { + height: 300px; + background: rgba(0, 128, 128, 0.678); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/view.js new file mode 100644 index 000000000..ef2162725 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/dist/view.js @@ -0,0 +1,7 @@ +var boxes = document.querySelectorAll(".box , .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.background = getRandomColor(); }); +console.dir([]); +var box2 = document.getElementById("myBox"); +console.dir(box2); +box2.style.borderRadius = "25%"; diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/Raanan/helpers.ts new file mode 100644 index 000000000..4a936deaf --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/helpers.ts @@ -0,0 +1,3 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); + } diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/index.html b/02-TypeScript/13-MVC-DOM/followups/Raanan/index.html new file mode 100644 index 000000000..ecbbf3885 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/index.ts b/02-TypeScript/13-MVC-DOM/followups/Raanan/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/model.ts b/02-TypeScript/13-MVC-DOM/followups/Raanan/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/style.css b/02-TypeScript/13-MVC-DOM/followups/Raanan/style.css new file mode 100644 index 000000000..99807dda7 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background: teal; +} +.wrapper .box2 { + height: 300px; + background: rgba(0, 128, 128, 0.678); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/style.scss b/02-TypeScript/13-MVC-DOM/followups/Raanan/style.scss new file mode 100644 index 000000000..bb054cc20 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/style.scss @@ -0,0 +1,17 @@ +.wrapper{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box{ + height: 300px; + background: teal; + } + .box2{ + height: 300px; + background: rgba(0, 128, 128, 0.678); + } + +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/Raanan/view.ts b/02-TypeScript/13-MVC-DOM/followups/Raanan/view.ts new file mode 100644 index 000000000..34a013d68 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/Raanan/view.ts @@ -0,0 +1,13 @@ +const boxes: any = document.querySelectorAll(".box , .box2"); + +console.dir(boxes); + +boxes.forEach(box => box.style.background = getRandomColor()); + +console.dir([]); + +const box2: any = document.getElementById("myBox"); + +console.dir(box2); + +box2.style.borderRadius = "25%"; \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/dist/helpers.js new file mode 100644 index 000000000..ff7f69c74 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/dist/helpers.js @@ -0,0 +1,8 @@ +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/control.ts b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/helpers.js new file mode 100644 index 000000000..dd032f891 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/helpers.js @@ -0,0 +1,9 @@ +function getRandomColor() { + var letters = "0123456789ABCDEF"; + var color = "#"; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; +} diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/main.js b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/style.css new file mode 100644 index 000000000..98dbf92ea --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: #807c00; +} +.wrapper .box2 { + height: 300px; + background-color: #1a5cc5; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/view.js new file mode 100644 index 000000000..7ee36f937 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/dist/view.js @@ -0,0 +1,5 @@ +// const boxes:any = document.querySelectorAll(".box, .box2"); +var boxes = document.querySelectorAll(".box, .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); +console.dir([]); diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/helpers.ts new file mode 100644 index 000000000..78f13cf90 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/helpers.ts @@ -0,0 +1,10 @@ +function getRandomColor() { + const letters = "0123456789ABCDEF"; + let color = `#`; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + console.log(color); + return color; + } + diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/index.html b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/index.html new file mode 100644 index 000000000..15246d432 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/index.html @@ -0,0 +1,25 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/main.ts b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/main.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/model.ts b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/style.css b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/style.css new file mode 100644 index 000000000..409adba0a --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: rgb(128, 124, 0); +} +.wrapper .box2 { + height: 300px; + background-color: rgb(26, 92, 197); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/style.scss b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/style.scss new file mode 100644 index 000000000..d1f9e27b4 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/style.scss @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: rgb(128, 124, 0); + } + .box2{ + height: 300px; + background-color: rgb(26, 92, 197); + } + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itayAmosi/view.ts b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/view.ts new file mode 100644 index 000000000..2f5e6e123 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itayAmosi/view.ts @@ -0,0 +1,8 @@ +// const boxes:any = document.querySelectorAll(".box, .box2"); +const boxes: any = document.querySelectorAll(".box, .box2"); + +console.dir(boxes); + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()) + +console.dir([]); \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/control.ts b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/style.css new file mode 100644 index 000000000..d712e11cd --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/view.js new file mode 100644 index 000000000..2ea979fdc --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/dist/view.js @@ -0,0 +1,4 @@ +var boxes = document.querySelectorAll(".box, .box2"); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); +function getRandomColor() { +} diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/helpers.ts new file mode 100644 index 000000000..8c5bb6ff3 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/helpers.ts @@ -0,0 +1,3 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/index.html b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/index.html new file mode 100644 index 000000000..60ae61dbf --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/index.html @@ -0,0 +1,33 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/index.ts b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/model.ts b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/style.css b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/style.css new file mode 100644 index 000000000..a7451ecc9 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/style.scss b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/style.scss new file mode 100644 index 000000000..79fc39a21 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/style.scss @@ -0,0 +1,16 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + } + .box2{ + height: 300px; + background-color: rgb(25, 87, 87); + } +} diff --git a/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/view.ts b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/view.ts new file mode 100644 index 000000000..f08869e79 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/itsik-b/example2/view.ts @@ -0,0 +1,11 @@ +const boxes:any = document.querySelectorAll(".box, .box2"); + + + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()) + + + +function getRandomColor(){ + +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/control.ts b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/style.css new file mode 100644 index 000000000..8c0670077 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/style.css @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + max-width: 75ch; + margin: auto; +} +.wrapper .box, .wrapper .box2 { + width: 200px; + height: 200px; + background-color: coral; +} +.wrapper .box__little_box { + margin: 50px; + width: 100px; + height: 100px; + background-color: lightPink; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/view.js new file mode 100644 index 000000000..6d3bf9a0a --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/dist/view.js @@ -0,0 +1,2 @@ +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { return box.innerHTML += "
                "; }); diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/index.html b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/index.html new file mode 100644 index 000000000..3eb8744f8 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/index.ts b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/model.ts b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/style.css b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/style.css new file mode 100644 index 000000000..8c0670077 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/style.css @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + max-width: 75ch; + margin: auto; +} +.wrapper .box, .wrapper .box2 { + width: 200px; + height: 200px; + background-color: coral; +} +.wrapper .box__little_box { + margin: 50px; + width: 100px; + height: 100px; + background-color: lightPink; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/style.scss b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/style.scss new file mode 100644 index 000000000..99bb23174 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/style.scss @@ -0,0 +1,19 @@ +.wrapper{ + display: grid; + grid-template-columns: repeat(3,1fr) ; + gap: 15px; + max-width: 75ch; + margin: auto; + + .box, .box2{ + width: 200px; + height: 200px; + background-color: coral; + } + .box__little_box{ + margin: 50px; + width: 100px; + height: 100px; + background-color:lightPink; + } +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/noa-meillet/view.ts b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/view.ts new file mode 100644 index 000000000..577ca8b4d --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/noa-meillet/view.ts @@ -0,0 +1,3 @@ +const boxes: any = document.querySelectorAll(".box"); + +boxes.forEach((box) => box.innerHTML+=`
                `); diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/app.ts b/02-TypeScript/13-MVC-DOM/followups/shalomcop/app.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/control.ts b/02-TypeScript/13-MVC-DOM/followups/shalomcop/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/app.js b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/app.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/style.css new file mode 100644 index 000000000..cfffec2d7 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/style.css @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + width: 300px; + background-color: red; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/view.js new file mode 100644 index 000000000..bd3633606 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shalomcop/dist/view.js @@ -0,0 +1,4 @@ +var boxes = document.querySelectorAll(".box, .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); +console.dir([]); diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/shalomcop/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/index.html b/02-TypeScript/13-MVC-DOM/followups/shalomcop/index.html new file mode 100644 index 000000000..c888bacc2 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shalomcop/index.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/model.ts b/02-TypeScript/13-MVC-DOM/followups/shalomcop/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/style.css b/02-TypeScript/13-MVC-DOM/followups/shalomcop/style.css new file mode 100644 index 000000000..cfffec2d7 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shalomcop/style.css @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + width: 300px; + background-color: red; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/style.scss b/02-TypeScript/13-MVC-DOM/followups/shalomcop/style.scss new file mode 100644 index 000000000..6d18ac801 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shalomcop/style.scss @@ -0,0 +1,12 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin:auto; + + .box { + width: 300px; + background-color: red; + } + } diff --git a/02-TypeScript/13-MVC-DOM/followups/shalomcop/view.ts b/02-TypeScript/13-MVC-DOM/followups/shalomcop/view.ts new file mode 100644 index 000000000..dad516bef --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shalomcop/view.ts @@ -0,0 +1,7 @@ +const boxes:any = document.querySelectorAll(".box, .box2"); + +console.dir(boxes); + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()) + +console.dir([]); diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/control.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi a/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/helpers.js new file mode 100644 index 000000000..ff7f69c74 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/helpers.js @@ -0,0 +1,8 @@ +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/style.css new file mode 100644 index 000000000..d712e11cd --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/view.js new file mode 100644 index 000000000..d5bebdd49 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/dist/view.js @@ -0,0 +1,3 @@ +var boxes = document.querySelectorAll(".box, .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi a/helpers.ts new file mode 100644 index 000000000..8b1db2b15 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/helpers.ts @@ -0,0 +1,9 @@ +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/index.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi a/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/main.html b/02-TypeScript/13-MVC-DOM/followups/shlomi a/main.html new file mode 100644 index 000000000..0ada9273c --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/main.html @@ -0,0 +1,33 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/model.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi a/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/style.css b/02-TypeScript/13-MVC-DOM/followups/shlomi a/style.css new file mode 100644 index 000000000..a7451ecc9 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/style.scss b/02-TypeScript/13-MVC-DOM/followups/shlomi a/style.scss new file mode 100644 index 000000000..494feea86 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/style.scss @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + + } + .box2{ + height: 300px; + background-color: rgb(25, 87, 87); + } +} diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi a/view.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi a/view.ts new file mode 100644 index 000000000..42d8fd0ab --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi a/view.ts @@ -0,0 +1,6 @@ +const boxes:any = document.querySelectorAll(".box, .box2"); + +console.dir(boxes); + +boxes.forEach(box=>box.style. backgroundColor = getRandomColor()) + diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/control.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/style.css new file mode 100644 index 000000000..07565d0f5 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/style.css @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/view.js new file mode 100644 index 000000000..da16d5532 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/dist/view.js @@ -0,0 +1,2 @@ +var boxes = document.querySelectorAll(".box"); +console.dir(boxes); diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/helpers.ts new file mode 100644 index 000000000..0d6312759 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/helpers.ts @@ -0,0 +1,4 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); + } + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/index.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/main.html b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/main.html new file mode 100644 index 000000000..ef328f2b0 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/main.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/model.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/style.css b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/style.css new file mode 100644 index 000000000..07565d0f5 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/style.css @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/style.scss b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/style.scss new file mode 100644 index 000000000..019734008 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/style.scss @@ -0,0 +1,12 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + } +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/view.ts b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/view.ts new file mode 100644 index 000000000..a80cedb35 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/shlomi.samai/view.ts @@ -0,0 +1,2 @@ +const boxes:any=document.querySelectorAll(".box") +console.dir(boxes) \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/start.md b/02-TypeScript/13-MVC-DOM/followups/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/control.ts b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/style.css b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/style.css new file mode 100644 index 000000000..460a80c69 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: blue; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/view.js new file mode 100644 index 000000000..bd3633606 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/dist/view.js @@ -0,0 +1,4 @@ +var boxes = document.querySelectorAll(".box, .box2"); +console.dir(boxes); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); +console.dir([]); diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/helpers.ts new file mode 100644 index 000000000..47b28e8ca --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/helpers.ts @@ -0,0 +1,4 @@ +function getRandomColor():string{ + return "#"+(((1<<24)*Math.random())| 0).toString(16).padStart(6,"0"); + +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/index.html b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/index.html new file mode 100644 index 000000000..d2bab6a2d --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/index.ts b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/model.ts b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/style.css b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/style.css new file mode 100644 index 000000000..460a80c69 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/style.css @@ -0,0 +1,15 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; +} +.wrapper .box2 { + height: 300px; + background-color: blue; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/style.scss b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/style.scss new file mode 100644 index 000000000..a639a25b3 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/style.scss @@ -0,0 +1,16 @@ +.wrapper{ + display: grid; + grid-template-columns: repeat(2,1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + .box{ + height: 300px; + background-color: teal; + } + .box2{ + height: 300px; + + background-color: blue; + } +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/view.ts b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/view.ts new file mode 100644 index 000000000..4de6598ad --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/tomer-cohen/view.ts @@ -0,0 +1,7 @@ +const boxes:any= document.querySelectorAll(`.box, .box2`); + +console.dir(boxes); + +boxes.forEach(box=>box.style.backgroundColor= getRandomColor()); + +console.dir([]); \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/control.ts b/02-TypeScript/13-MVC-DOM/followups/yuval/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/dist/control.js b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/dist/helpers.js b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/dist/index.css b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/index.css new file mode 100644 index 000000000..fc32ed9b1 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/index.css @@ -0,0 +1,12 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} + +.box { + height: 300px; + background-color: teal; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/dist/index.js b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/dist/model.js b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/dist/view.js b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/view.js new file mode 100644 index 000000000..e15a56b0b --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/dist/view.js @@ -0,0 +1,2 @@ +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/helpers.ts b/02-TypeScript/13-MVC-DOM/followups/yuval/helpers.ts new file mode 100644 index 000000000..f98ae0aef --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/helpers.ts @@ -0,0 +1,3 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); + } \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/index.css b/02-TypeScript/13-MVC-DOM/followups/yuval/index.css new file mode 100644 index 000000000..fc32ed9b1 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/index.css @@ -0,0 +1,12 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} + +.box { + height: 300px; + background-color: teal; +} \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/index.html b/02-TypeScript/13-MVC-DOM/followups/yuval/index.html new file mode 100644 index 000000000..1010e8c59 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/index.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/index.scss b/02-TypeScript/13-MVC-DOM/followups/yuval/index.scss new file mode 100644 index 000000000..7741ba638 --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/index.scss @@ -0,0 +1,11 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + } +.box { + height: 300px; + background-color: teal; + } diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/index.ts b/02-TypeScript/13-MVC-DOM/followups/yuval/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/model.ts b/02-TypeScript/13-MVC-DOM/followups/yuval/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/13-MVC-DOM/followups/yuval/view.ts b/02-TypeScript/13-MVC-DOM/followups/yuval/view.ts new file mode 100644 index 000000000..88b3e12ef --- /dev/null +++ b/02-TypeScript/13-MVC-DOM/followups/yuval/view.ts @@ -0,0 +1,4 @@ +const boxes:any = document.querySelectorAll(".box"); + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()) + diff --git a/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..86f44aed8 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/public/scripts/index.js @@ -0,0 +1,44 @@ +var dragged; +/* events fired on the draggable target */ +var source = document.querySelector("#draggable"); +source.addEventListener("drag", function (event) { +}); +source.addEventListener("dragstart", function (event) { + // store a ref. on the dragged elem + dragged = event.target; + // make it half transparent + event.target.classList.add("dragging"); +}); +source.addEventListener("dragend", function (event) { + // reset the transparency + event.target.classList.remove("dragging"); +}); +/* events fired on the drop targets */ +var target = document.querySelectorAll("#droptarget"); +target.forEach(function (element) { + element.addEventListener("dragover", function (event) { + // prevent default to allow drop + event.preventDefault(); + }, false); + element.addEventListener("dragenter", function (event) { + // highlight potential drop target when the draggable element enters it + if (event.target.classList.contains("dropzone")) { + event.target.classList.add("dragover"); + } + }); + element.addEventListener("dragleave", function (event) { + // reset background of potential drop target when the draggable element leaves it + if (event.target.classList.contains("dropzone")) { + event.target.classList.remove("dragover"); + } + }); + element.addEventListener("drop", function (event) { + // prevent default action (open as link for some elements) + event.preventDefault(); + // move dragged element to the selected drop target + if (event.target.classList.contains("dropzone")) { + event.target.classList.remove("dragover"); + event.target.appendChild(dragged); + } + }); +}); diff --git a/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/public/styles/style.css b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..ac99fefd6 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,42 @@ +body { + /* Prevent the user selecting text in the example */ + user-select: none; +} + +.container { + display: flex; + justify-content: center; + align-items: center; +} + +#draggable { + width: 200px; + height: 200px; +} +#draggable img { + width: 100%; + object-fit: cover; +} + +.dropzone { + display: flex; + justify-content: center; + align-items: center; + width: 300px; + height: 200px; + background: blueviolet; + margin: 10px; + padding: 10px; +} +.dropzone img { + width: 100%; + object-fit: cover; +} + +.dropzone.dragover { + background-color: purple; +} + +.dragging { + opacity: 0.5; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..28dfff2ca --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,26 @@ + + + + + + + + Document + + +
                +
                +
                +
                + +
                +
                +
                +
                +
                +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..f62afd745 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/index.ts @@ -0,0 +1,53 @@ +let dragged; + +/* events fired on the draggable target */ +const source:any = document.querySelector("#draggable"); +source.addEventListener("drag", (event) => { +}); + +source.addEventListener("dragstart", (event) => { + // store a ref. on the dragged elem + dragged = event.target; + // make it half transparent + event.target.classList.add("dragging"); +}); + +source.addEventListener("dragend", (event) => { + // reset the transparency + event.target.classList.remove("dragging"); +}); + +/* events fired on the drop targets */ +const target:any = document.querySelectorAll("#droptarget"); +target.forEach(element => { + + element.addEventListener("dragover", (event) => { + // prevent default to allow drop + event.preventDefault(); + }, false); + + element.addEventListener("dragenter", (event) => { + // highlight potential drop target when the draggable element enters it + if (event.target.classList.contains("dropzone")) { + event.target.classList.add("dragover"); + } + }); + + element.addEventListener("dragleave", (event) => { + // reset background of potential drop target when the draggable element leaves it + if (event.target.classList.contains("dropzone")) { + event.target.classList.remove("dragover"); + } + }); + + element.addEventListener("drop", (event) => { + // prevent default action (open as link for some elements) + event.preventDefault(); + // move dragged element to the selected drop target + if (event.target.classList.contains("dropzone")) { + event.target.classList.remove("dragover"); + event.target.appendChild(dragged); + } + }); + +}); diff --git a/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/style.css b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/style.css new file mode 100644 index 000000000..952e1ce1b --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/style.css @@ -0,0 +1,47 @@ +body { + /* Prevent the user selecting text in the example */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.container { + display: flex; + justify-content: center; + align-items: center; +} + +#draggable { + width: 200px; + height: 200px; +} +#draggable img { + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +.dropzone { + display: flex; + justify-content: center; + align-items: center; + width: 300px; + height: 200px; + background: blueviolet; + margin: 10px; + padding: 10px; +} +.dropzone img { + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +.dropzone.dragover { + background-color: purple; +} + +.dragging { + opacity: 0.5; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/style.scss b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..9d27a6fd7 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/Nikita Rossenko/src/style.scss @@ -0,0 +1,44 @@ +body { + /* Prevent the user selecting text in the example */ + user-select: none; + } + .container { + display: flex; + justify-content: center; + align-items: center; + } + #draggable { + // background: white; + width: 200px; + height: 200px; + + img { + width: 100%; + object-fit: cover; + } + } + + .dropzone { + display: flex; + justify-content: center; + align-items: center; + width: 300px; + height: 200px; + background: blueviolet; + margin: 10px; + padding: 10px; + + img{ + width: 100%; + object-fit:cover; + } + } + + .dropzone.dragover { + background-color: purple; + } + + .dragging { + opacity: 0.5; + } + \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/instructions.md b/02-TypeScript/14-events/class-puzzles/instructions.md new file mode 100644 index 000000000..8ae86cac0 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/instructions.md @@ -0,0 +1,2 @@ +choose event from the this site: https://developer.mozilla.org/en-US/docs/Web/Events#event_listing +and develop some cool thing. diff --git a/02-TypeScript/14-events/class-puzzles/liranitsik/dist/index.js b/02-TypeScript/14-events/class-puzzles/liranitsik/dist/index.js new file mode 100644 index 000000000..63208993e --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/liranitsik/dist/index.js @@ -0,0 +1,18 @@ +// get all the boxes +var boxes = document.querySelectorAll(".boxes"); +boxes.forEach(function (box) { + box.addEventListener("mouseover", function () { + box.style.backgroundColor = "gold"; + }); + box.addEventListener("mouseout", function () { + box.style.backgroundColor = "black"; + }); +}); +// use mousein / mouseout on box .one +var numone = document.querySelector("#one"); +numone.addEventListener("mouseover", function (event) { + numone.style.backgroundColor = "red"; + numone.addEventListener("mouseout", function () { + numone.style.backgroundColor = "black"; + }); +}); diff --git a/02-TypeScript/14-events/class-puzzles/liranitsik/dist/style.css b/02-TypeScript/14-events/class-puzzles/liranitsik/dist/style.css new file mode 100644 index 000000000..7dbcef1ed --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/liranitsik/dist/style.css @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; + margin: 0; +} + +body { + background-color: yellow; +} +body .container { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +body .boxes { + width: 80px; + height: 80px; + background-color: black; + border-radius: 50%; + margin: 10px; + cursor: pointer; + border: 4px solid palevioletred; +} + +.colors { + background-color: whitesmoke; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/liranitsik/index.html b/02-TypeScript/14-events/class-puzzles/liranitsik/index.html new file mode 100644 index 000000000..73dd45889 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/liranitsik/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + diff --git a/02-TypeScript/14-events/class-puzzles/liranitsik/index.ts b/02-TypeScript/14-events/class-puzzles/liranitsik/index.ts new file mode 100644 index 000000000..97b975e72 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/liranitsik/index.ts @@ -0,0 +1,25 @@ + +// get all the boxes +let boxes = document.querySelectorAll(".boxes"); +boxes.forEach((box:any) => { + box.addEventListener("mouseover", ()=>{ + box.style.backgroundColor ="gold"; + }) + + box.addEventListener("mouseout", ()=>{ + box.style.backgroundColor = "black" + }) + + +}); + +// use mousein / mouseout on box .one +const numone = document.querySelector("#one")as HTMLDivElement; +numone.addEventListener("mouseover", (event)=>{ + +numone.style.backgroundColor = "red"; +numone.addEventListener("mouseout", ()=>{ + numone.style.backgroundColor = "black"; +}) +}) + diff --git a/02-TypeScript/14-events/class-puzzles/liranitsik/style.css b/02-TypeScript/14-events/class-puzzles/liranitsik/style.css new file mode 100644 index 000000000..7dbcef1ed --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/liranitsik/style.css @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; + margin: 0; +} + +body { + background-color: yellow; +} +body .container { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +body .boxes { + width: 80px; + height: 80px; + background-color: black; + border-radius: 50%; + margin: 10px; + cursor: pointer; + border: 4px solid palevioletred; +} + +.colors { + background-color: whitesmoke; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/liranitsik/style.scss b/02-TypeScript/14-events/class-puzzles/liranitsik/style.scss new file mode 100644 index 000000000..db30b1b6e --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/liranitsik/style.scss @@ -0,0 +1,32 @@ +*{ + box-sizing: border-box; + margin: 0; +} +body{ + background-color: yellow; + + + .container{ + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + + .boxes{ + width:80px; + height: 80px; + background-color: black; + border-radius: 50%; + margin:10px; + cursor: pointer; + border:4px solid palevioletred; + + } + +} +.colors{ + background-color: whitesmoke; + +} diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/constrol.ts b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/constrol.ts new file mode 100644 index 000000000..9eba2375e --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/constrol.ts @@ -0,0 +1,5 @@ +function randomMove () { + let randomX= Math.ceil(Math.random()*(100)) + let randomy= Math.ceil(Math.random()*(100)) + return [randomX,randomy] +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/constrol.js b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/constrol.js new file mode 100644 index 000000000..6119327d2 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/constrol.js @@ -0,0 +1,5 @@ +function randomMove() { + var randomX = Math.ceil(Math.random() * (100)); + var randomy = Math.ceil(Math.random() * (100)); + return [randomX, randomy]; +} diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/helpers.js b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/index.js b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/model.js b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/syle.css b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/syle.css new file mode 100644 index 000000000..4affe5009 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/syle.css @@ -0,0 +1,20 @@ +body, html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +.wrapper { + position: relative; + width: 100vw; + height: 100vh; +} +.wrapper .cricle { + border-radius: 50%; + border: 2px solid black; + width: 100px; + height: 100px; + background-color: blue; + position: absolute; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/view.js b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/view.js new file mode 100644 index 000000000..c6d889d93 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/dist/view.js @@ -0,0 +1,11 @@ +var cricle = document.querySelector(".cricle"); +// cricle.addEventListener("mousemove", (event) => { +// cricle.innerText = `(${event.x},${event.y})`; +// console.log(event) +// }); +cricle.addEventListener("mouseenter", function (event) { + cricle.style.backgroundColor = 'red'; + cricle.style.top = randomMove()[1] + "%"; + cricle.style.right = randomMove()[0] + "%"; +}); +console.log(randomMove()); diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/helpers.ts b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/index.html b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/index.html new file mode 100644 index 000000000..1a9a6fff0 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + + +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/index.ts b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/model.ts b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/syle.css b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/syle.css new file mode 100644 index 000000000..4affe5009 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/syle.css @@ -0,0 +1,20 @@ +body, html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +.wrapper { + position: relative; + width: 100vw; + height: 100vh; +} +.wrapper .cricle { + border-radius: 50%; + border: 2px solid black; + width: 100px; + height: 100px; + background-color: blue; + position: absolute; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/syle.scss b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/syle.scss new file mode 100644 index 000000000..b96a02d71 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/syle.scss @@ -0,0 +1,23 @@ +body,html{ + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +.wrapper{ + position: relative; + width: 100vw; + height: 100vh; + .cricle{ + border-radius: 50%; + border: 2px solid black ; + width: 100px; + height: 100px; + background-color: blue; + position: absolute; + + + } + +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/view.ts b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/view.ts new file mode 100644 index 000000000..5fdbaf35f --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/maxim,orel,tomer/view.ts @@ -0,0 +1,15 @@ +const cricle: any = document.querySelector(".cricle"); + + +// cricle.addEventListener("mousemove", (event) => { +// cricle.innerText = `(${event.x},${event.y})`; +// console.log(event) +// }); + cricle.addEventListener("mouseenter", (event) => { + cricle.style.backgroundColor = 'red'; + cricle.style.top= `${randomMove()[1]}%` + cricle.style.right= `${randomMove()[0]}%` + + }); + + console.log(randomMove()) \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/control.ts b/02-TypeScript/14-events/class-puzzles/noa-meillet/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/control.js b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/index.js b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/model.js b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/style.css b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/style.css new file mode 100644 index 000000000..8c0670077 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/style.css @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + max-width: 75ch; + margin: auto; +} +.wrapper .box, .wrapper .box2 { + width: 200px; + height: 200px; + background-color: coral; +} +.wrapper .box__little_box { + margin: 50px; + width: 100px; + height: 100px; + background-color: lightPink; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/view.js b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/view.js new file mode 100644 index 000000000..0777e8e84 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/noa-meillet/dist/view.js @@ -0,0 +1,10 @@ +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { return box.innerHTML += "
                "; }); +var boxesParagraph = document.querySelectorAll(".box2__p"); +boxesParagraph.forEach(function (paragraph) { paragraph.addEventListener('copy', function (event) { alert('You cant copy this text!'); }); }); +boxesParagraph.forEach(function (paragraph) { paragraph.addEventListener('cut', function (event) { alert('You cant cut this text!'); }); }); +document.addEventListener('keyup', function (event) { + var keyName = event.key; + var keyCode = event.code; + alert("Keyup: The key pressed is " + keyName + " and its code value is " + keyCode); +}, false); diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/index.html b/02-TypeScript/14-events/class-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..97f4adc9d --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/noa-meillet/index.html @@ -0,0 +1,33 @@ + + + + + + + Document + + + + + + + +
                +
                +
                +
                +
                +

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum alias nesciunt. Suscipit ipsa, aliquid ipsum voluptatem iure inventore laudantium placeat. Omnis dicta alias repellendus rem consequuntur nemo quisquam vitae.

                +
                +
                +

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum alias nesciunt. Suscipit ipsa, aliquid ipsum voluptatem iure inventore laudantium placeat. Omnis dicta alias repellendus rem consequuntur nemo quisquam vitae.

                +
                +
                +

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum alias nesciunt. Suscipit ipsa, aliquid ipsum voluptatem iure inventore laudantium placeat. Omnis dicta alias repellendus rem consequuntur nemo quisquam vitae.

                +
                +
                +
                +
                +
                + + diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/index.ts b/02-TypeScript/14-events/class-puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/model.ts b/02-TypeScript/14-events/class-puzzles/noa-meillet/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/style.css b/02-TypeScript/14-events/class-puzzles/noa-meillet/style.css new file mode 100644 index 000000000..8c0670077 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/noa-meillet/style.css @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + max-width: 75ch; + margin: auto; +} +.wrapper .box, .wrapper .box2 { + width: 200px; + height: 200px; + background-color: coral; +} +.wrapper .box__little_box { + margin: 50px; + width: 100px; + height: 100px; + background-color: lightPink; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/style.scss b/02-TypeScript/14-events/class-puzzles/noa-meillet/style.scss new file mode 100644 index 000000000..99bb23174 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/noa-meillet/style.scss @@ -0,0 +1,19 @@ +.wrapper{ + display: grid; + grid-template-columns: repeat(3,1fr) ; + gap: 15px; + max-width: 75ch; + margin: auto; + + .box, .box2{ + width: 200px; + height: 200px; + background-color: coral; + } + .box__little_box{ + margin: 50px; + width: 100px; + height: 100px; + background-color:lightPink; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/noa-meillet/view.ts b/02-TypeScript/14-events/class-puzzles/noa-meillet/view.ts new file mode 100644 index 000000000..6356a35c4 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/noa-meillet/view.ts @@ -0,0 +1,17 @@ +const boxes: any = document.querySelectorAll(".box"); +boxes.forEach((box) => box.innerHTML+=`
                `); + +const boxesParagraph = document.querySelectorAll(".box2__p"); +boxesParagraph.forEach (paragraph => {paragraph.addEventListener('copy', (event) => {alert('You cant copy this text!') });}); +boxesParagraph.forEach (paragraph => {paragraph.addEventListener('cut', (event) => {alert('You cant cut this text!') });}); + +document.addEventListener('keyup', (event) => { + var keyName = event.key; + var keyCode = event.code; + alert(`Keyup: The key pressed is ${keyName} and its code value is ${keyCode}`); + }, false); + + + + + diff --git a/02-TypeScript/14-events/class-puzzles/room 2/audio/50 Cent - Candy Shop (Official Music Video) ft. Olivia.mp3 b/02-TypeScript/14-events/class-puzzles/room 2/audio/50 Cent - Candy Shop (Official Music Video) ft. Olivia.mp3 new file mode 100644 index 000000000..63708a7ac Binary files /dev/null and b/02-TypeScript/14-events/class-puzzles/room 2/audio/50 Cent - Candy Shop (Official Music Video) ft. Olivia.mp3 differ diff --git a/02-TypeScript/14-events/class-puzzles/room 2/control.ts b/02-TypeScript/14-events/class-puzzles/room 2/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room 2/dist/control.js b/02-TypeScript/14-events/class-puzzles/room 2/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room 2/dist/helpers.js b/02-TypeScript/14-events/class-puzzles/room 2/dist/helpers.js new file mode 100644 index 000000000..a12fbf168 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/dist/helpers.js @@ -0,0 +1,5 @@ +var audio = document.querySelector("#audio"); +var gif = document.querySelector("#gif"); +audio.addEventListener("audiostart", function () { + console.log("saf"); +}); diff --git a/02-TypeScript/14-events/class-puzzles/room 2/dist/index.css b/02-TypeScript/14-events/class-puzzles/room 2/dist/index.css new file mode 100644 index 000000000..b4bdf81b7 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/dist/index.css @@ -0,0 +1,3 @@ +img { + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room 2/dist/index.js b/02-TypeScript/14-events/class-puzzles/room 2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room 2/dist/model.js b/02-TypeScript/14-events/class-puzzles/room 2/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room 2/dist/view.js b/02-TypeScript/14-events/class-puzzles/room 2/dist/view.js new file mode 100644 index 000000000..e15a56b0b --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/dist/view.js @@ -0,0 +1,2 @@ +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { return box.style.backgroundColor = getRandomColor(); }); diff --git a/02-TypeScript/14-events/class-puzzles/room 2/helpers.ts b/02-TypeScript/14-events/class-puzzles/room 2/helpers.ts new file mode 100644 index 000000000..10b70bf65 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/helpers.ts @@ -0,0 +1,8 @@ +const audio = document.querySelector("#audio") as HTMLAudioElement +const gif = document.querySelector("#gif") as HTMLImageElement + + +audio.addEventListener("audiostart" , ()=>{ + console.log("saf"); + +}) \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room 2/index.css b/02-TypeScript/14-events/class-puzzles/room 2/index.css new file mode 100644 index 000000000..b4bdf81b7 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/index.css @@ -0,0 +1,3 @@ +img { + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room 2/index.html b/02-TypeScript/14-events/class-puzzles/room 2/index.html new file mode 100644 index 000000000..c15957f35 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + + + + + + +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room 2/index.scss b/02-TypeScript/14-events/class-puzzles/room 2/index.scss new file mode 100644 index 000000000..deeb8b9cf --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/index.scss @@ -0,0 +1,3 @@ +img{ + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room 2/index.ts b/02-TypeScript/14-events/class-puzzles/room 2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room 2/model.ts b/02-TypeScript/14-events/class-puzzles/room 2/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room 2/view.ts b/02-TypeScript/14-events/class-puzzles/room 2/view.ts new file mode 100644 index 000000000..88b3e12ef --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room 2/view.ts @@ -0,0 +1,4 @@ +const boxes:any = document.querySelectorAll(".box"); + +boxes.forEach(box=>box.style.backgroundColor = getRandomColor()) + diff --git a/02-TypeScript/14-events/class-puzzles/room-4/control.ts b/02-TypeScript/14-events/class-puzzles/room-4/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/dist/control.js b/02-TypeScript/14-events/class-puzzles/room-4/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/dist/helpers.js b/02-TypeScript/14-events/class-puzzles/room-4/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/dist/index.js b/02-TypeScript/14-events/class-puzzles/room-4/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/dist/model.js b/02-TypeScript/14-events/class-puzzles/room-4/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/dist/style.css b/02-TypeScript/14-events/class-puzzles/room-4/dist/style.css new file mode 100644 index 000000000..bf521061a --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/dist/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box1, .wrapper .box2, .wrapper .box3, .wrapper .box4, .wrapper .box5, .wrapper .box6, .wrapper .box7, .wrapper .box8 { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room-4/dist/view.js b/02-TypeScript/14-events/class-puzzles/room-4/dist/view.js new file mode 100644 index 000000000..a000af5dd --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/dist/view.js @@ -0,0 +1,115 @@ +var myBox1 = document.querySelector("#myBox"); +if (myBox1) { + myBox1.addEventListener("click", function (event) { + console.log(event); + }); + myBox1.addEventListener("mousemove", function (event) { + myBox1.innerText = "(" + event.x + "," + event.y + ")"; + }); +} +var boxes1 = document.querySelectorAll(".box1"); +boxes1.forEach(function (box) { + box.addEventListener("mousemove", function (event) { + box.innerText = "(" + event.x + "," + event.y + ")"; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'black'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); +var myBox2 = document.querySelector("#myBox"); +if (myBox2) { + myBox2.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxes2 = document.querySelectorAll(".box2"); +boxes2.forEach(function (box) { + box.addEventListener("click", function (event) { + box.innerText = "tanx"; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); +var myBox3 = document.querySelector("#myBox"); +if (myBox3) { + myBox3.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxes3 = document.querySelectorAll(".box3"); +boxes3.forEach(function (box) { + box.addEventListener("mouseout", function (event) { + box.innerText = "why u leave :("; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'green'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); +var myBox4 = document.querySelector("#myBox"); +if (myBox4) { + myBox4.addEventListener("click", function (event) { + console.log(event); + }); + myBox4.addEventListener("mousemove", function (event) { + myBox4.innerText = "(" + event.x + "," + event.y + ")"; + }); +} +var boxes4 = document.querySelectorAll(".box4"); +// console.dir(boxes); +boxes4.forEach(function (box) { + box.addEventListener("wheel", function (event) { + box.innerText = "your 10 from 10"; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'blue'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); +var myBox5 = document.querySelector("#myBox"); +if (myBox5) { + myBox5.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxes5 = document.querySelectorAll(".box5"); +boxes5.forEach(function (box) { + box.addEventListener("copy", function (event) { + box.innerText = "now u can paste"; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'pink'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); +var myBox6 = document.querySelector("#myBox"); +if (myBox6) { + myBox6.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxes6 = document.querySelectorAll(".box6"); +boxes6.forEach(function (box) { + box.addEventListener("paste", function (event) { + box.innerText = "good job :)"; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'gray'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); diff --git a/02-TypeScript/14-events/class-puzzles/room-4/helpers.ts b/02-TypeScript/14-events/class-puzzles/room-4/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/index.html b/02-TypeScript/14-events/class-puzzles/room-4/index.html new file mode 100644 index 000000000..32f167ab6 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/index.html @@ -0,0 +1,32 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                move mouse
                +
                click mouse
                +
                stay here
                +
                roll over with the mouse wheel
                +
                copy me
                ctrl + C
                +
                paste here
                ctrl + V
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room-4/index.ts b/02-TypeScript/14-events/class-puzzles/room-4/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/class-puzzles/room-4/model.ts b/02-TypeScript/14-events/class-puzzles/room-4/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/14-events/class-puzzles/room-4/style.css b/02-TypeScript/14-events/class-puzzles/room-4/style.css new file mode 100644 index 000000000..bf521061a --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box1, .wrapper .box2, .wrapper .box3, .wrapper .box4, .wrapper .box5, .wrapper .box6, .wrapper .box7, .wrapper .box8 { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/class-puzzles/room-4/style.scss b/02-TypeScript/14-events/class-puzzles/room-4/style.scss new file mode 100644 index 000000000..143a87a34 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/style.scss @@ -0,0 +1,19 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box1, .box2, .box3,.box4, .box5, .box6,.box7, .box8 { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; + } + +} diff --git a/02-TypeScript/14-events/class-puzzles/room-4/view.ts b/02-TypeScript/14-events/class-puzzles/room-4/view.ts new file mode 100644 index 000000000..eba39e4d7 --- /dev/null +++ b/02-TypeScript/14-events/class-puzzles/room-4/view.ts @@ -0,0 +1,149 @@ +const myBox1: HTMLElement|null = document.querySelector("#myBox"); +if (myBox1) { + myBox1.addEventListener("click", (event) => { + console.log(event); + }); + + myBox1.addEventListener("mousemove", (event) => { + myBox1.innerText = `(${event.x},${event.y})`; + }); +} + +const boxes1: any = document.querySelectorAll(".box1"); + + +boxes1.forEach((box) => { + box.addEventListener("mousemove", (event) => { + box.innerText = `(${event.x},${event.y})`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'black'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); + + +const myBox2: HTMLElement|null = document.querySelector("#myBox"); +if (myBox2) { + myBox2.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxes2: any = document.querySelectorAll(".box2"); + + +boxes2.forEach((box) => { + box.addEventListener("click", (event) => { + box.innerText = `tanx`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); + + + + + + +const myBox3: HTMLElement|null = document.querySelector("#myBox"); +if (myBox3) { + myBox3.addEventListener("click", (event) => { + console.log(event); + }); + +} + +const boxes3: any = document.querySelectorAll(".box3"); + + +boxes3.forEach((box) => { + box.addEventListener("mouseout", (event) => { + box.innerText = `why u leave :(`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'green'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); + + +const myBox4: HTMLElement|null = document.querySelector("#myBox"); +if (myBox4) { + myBox4.addEventListener("click", (event) => { + console.log(event); + }); + + myBox4.addEventListener("mousemove", (event) => { + myBox4.innerText = `(${event.x},${event.y})`; + }); +} + +const boxes4: any = document.querySelectorAll(".box4"); + +// console.dir(boxes); + +boxes4.forEach((box) => { + box.addEventListener("wheel", (event) => { + box.innerText = `your 10 from 10`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'blue'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); + + +const myBox5: HTMLElement|null = document.querySelector("#myBox"); +if (myBox5) { + myBox5.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxes5: any = document.querySelectorAll(".box5"); + +boxes5.forEach((box) => { + box.addEventListener("copy", (event) => { + box.innerText = `now u can paste`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'pink'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); + + + +const myBox6: HTMLElement|null = document.querySelector("#myBox"); +if (myBox6) { + myBox6.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxes6: any = document.querySelectorAll(".box6"); + +boxes6.forEach((box) => { + box.addEventListener("paste", (event) => { + box.innerText = `good job :)`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'gray'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); \ No newline at end of file diff --git a/02-TypeScript/14-events/example/control.ts b/02-TypeScript/14-events/example/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/dist/control.js b/02-TypeScript/14-events/example/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/dist/helpers.js b/02-TypeScript/14-events/example/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/dist/index.js b/02-TypeScript/14-events/example/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/dist/model.js b/02-TypeScript/14-events/example/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/dist/style.css b/02-TypeScript/14-events/example/dist/style.css new file mode 100644 index 000000000..46c7b8b1c --- /dev/null +++ b/02-TypeScript/14-events/example/dist/style.css @@ -0,0 +1,20 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box, .wrapper .box2 { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} +.wrapper .box2 { + background-color: #195757; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/example/dist/view.js b/02-TypeScript/14-events/example/dist/view.js new file mode 100644 index 000000000..7865715e4 --- /dev/null +++ b/02-TypeScript/14-events/example/dist/view.js @@ -0,0 +1,23 @@ +var myBox = document.querySelector("#myBox"); +if (myBox) { + myBox.addEventListener("click", function (event) { + console.log(event); + }); + myBox.addEventListener("mousemove", function (event) { + myBox.innerText = "(" + event.x + "," + event.y + ")"; + }); +} +var boxes = document.querySelectorAll(".box, .box2"); +// console.dir(boxes); +boxes.forEach(function (box) { + box.addEventListener("mousemove", function (event) { + box.innerText = "(" + event.x + "," + event.y + ")"; + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'teal'; + }); +}); +// console.dir([]); diff --git a/02-TypeScript/14-events/example/helpers.ts b/02-TypeScript/14-events/example/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/index.html b/02-TypeScript/14-events/example/index.html new file mode 100644 index 000000000..60ae61dbf --- /dev/null +++ b/02-TypeScript/14-events/example/index.html @@ -0,0 +1,33 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/example/index.ts b/02-TypeScript/14-events/example/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/example/model.ts b/02-TypeScript/14-events/example/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/14-events/example/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/14-events/example/style.css b/02-TypeScript/14-events/example/style.css new file mode 100644 index 000000000..4c287199a --- /dev/null +++ b/02-TypeScript/14-events/example/style.css @@ -0,0 +1,20 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box, .wrapper .box2 { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} +.wrapper .box2 { + background-color: rgb(25, 87, 87); +} \ No newline at end of file diff --git a/02-TypeScript/14-events/example/style.scss b/02-TypeScript/14-events/example/style.scss new file mode 100644 index 000000000..3cd5603f7 --- /dev/null +++ b/02-TypeScript/14-events/example/style.scss @@ -0,0 +1,22 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box, .box2 { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; + } + .box2{ + + background-color: rgb(25, 87, 87); + } +} diff --git a/02-TypeScript/14-events/example/view.ts b/02-TypeScript/14-events/example/view.ts new file mode 100644 index 000000000..7478dd713 --- /dev/null +++ b/02-TypeScript/14-events/example/view.ts @@ -0,0 +1,29 @@ +const myBox: HTMLElement|null = document.querySelector("#myBox"); +if (myBox) { + myBox.addEventListener("click", (event) => { + console.log(event); + }); + + myBox.addEventListener("mousemove", (event) => { + myBox.innerText = `(${event.x},${event.y})`; + }); +} + +const boxes: any = document.querySelectorAll(".box, .box2"); + +// console.dir(boxes); + +boxes.forEach((box) => { + box.addEventListener("mousemove", (event) => { + box.innerText = `(${event.x},${event.y})`; + }); + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'teal'; + }); +}); + + +// console.dir([]); diff --git a/02-TypeScript/14-events/home-puzzles/Amit/control.ts b/02-TypeScript/14-events/home-puzzles/Amit/control.ts new file mode 100644 index 000000000..62895d0cc --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/control.ts @@ -0,0 +1,75 @@ +let enterCounter: number = 0; + + +const solution: string = "SMART"; + +let currentCell = linesArray[0][0]; + + + +function insertLetterToCell(letter: string): void { + try { + if (linesArray[enterCounter][4].innerText === "") { + currentCell.innerText = letter; + if (currentCell.nextElementSibling) { + currentCell = currentCell.nextElementSibling; //move to next cell + } + } + + } catch (error: unknown) { + console.error(Error); + } +} + + +function deleteLetterFromCell(): void { //clicking BACK + try { + if (linesArray[enterCounter][0].innerText !== "") { + if (linesArray[enterCounter][4].innerText === "") { + currentCell = currentCell.previousElementSibling; + currentCell.innerText = ""; + } + if (linesArray[enterCounter][4].innerText !== "") { + currentCell.innerText = ""; + } + } + + } catch (error: unknown) { + console.error(Error); + } +} + + + +function enter(): void { //clicking ENTER + try { + + if (linesArray[enterCounter][4].innerText !== "") { + let correctLetters: number = 0 + + for (let i = 0; i < 5; i++) { + if (solution.includes(linesArray[enterCounter][i].innerText)) { + + if (linesArray[enterCounter][i].innerText === solution[i]) { + linesArray[enterCounter][i].style.backgroundColor = "orange"; + correctLetters++ + if (correctLetters === 5) alert("you win!"); // change to animation with 2sec dealy// + }else{ + linesArray[enterCounter][i].style.backgroundColor = "blue"; + } + } + } + enterCounter++; + currentCell = linesArray[enterCounter][0]; // goes to the next line + } + + } catch (error: unknown) { + console.error(Error); + } +} + + + + + + diff --git a/02-TypeScript/14-events/home-puzzles/Amit/dist/control.js b/02-TypeScript/14-events/home-puzzles/Amit/dist/control.js new file mode 100644 index 000000000..4a830f358 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/dist/control.js @@ -0,0 +1,57 @@ +var enterCounter = 0; +var solution = "SMART"; +var currentCell = linesArray[0][0]; +function insertLetterToCell(letter) { + try { + if (linesArray[enterCounter][4].innerText === "") { + currentCell.innerText = letter; + if (currentCell.nextElementSibling) { + currentCell = currentCell.nextElementSibling; //move to next cell + } + } + } + catch (error) { + console.error(Error); + } +} +function deleteLetterFromCell() { + try { + if (linesArray[enterCounter][0].innerText !== "") { + if (linesArray[enterCounter][4].innerText === "") { + currentCell = currentCell.previousElementSibling; + currentCell.innerText = ""; + } + if (linesArray[enterCounter][4].innerText !== "") { + currentCell.innerText = ""; + } + } + } + catch (error) { + console.error(Error); + } +} +function enter() { + try { + if (linesArray[enterCounter][4].innerText !== "") { + var correctLetters = 0; + for (var i = 0; i < 5; i++) { + if (solution.includes(linesArray[enterCounter][i].innerText)) { + if (linesArray[enterCounter][i].innerText === solution[i]) { + linesArray[enterCounter][i].style.backgroundColor = "orange"; + correctLetters++; + if (correctLetters === 5) + alert("you win!"); // change to animation with 2sec dealy// + } + else { + linesArray[enterCounter][i].style.backgroundColor = "blue"; + } + } + } + enterCounter++; + currentCell = linesArray[enterCounter][0]; // goes to the next line + } + } + catch (error) { + console.error(Error); + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Amit/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Amit/dist/helpers.js new file mode 100644 index 000000000..efd7a2304 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/dist/helpers.js @@ -0,0 +1,3 @@ +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/14-events/home-puzzles/Amit/dist/index.js b/02-TypeScript/14-events/home-puzzles/Amit/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Amit/dist/model.js b/02-TypeScript/14-events/home-puzzles/Amit/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Amit/dist/style.css b/02-TypeScript/14-events/home-puzzles/Amit/dist/style.css new file mode 100644 index 000000000..9865dd4ee --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/dist/style.css @@ -0,0 +1,59 @@ +body { + background-color: black; + margin: 0; + position: relative; +} + +.board { + height: 30rem; + width: 30rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; +} +.board__line { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; +} +.board__line__cell { + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; +} + +.keyboard { + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: 5rem; + display: flex; + flex-direction: column; +} +.keyboard__line { + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; +} +.keyboard__line__key { + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Amit/dist/view.js b/02-TypeScript/14-events/home-puzzles/Amit/dist/view.js new file mode 100644 index 000000000..f302cbd8b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/dist/view.js @@ -0,0 +1,84 @@ +var cell0101 = document.querySelector("#cell0101"); +var cell0102 = document.querySelector("#cell0102"); +var cell0103 = document.querySelector("#cell0103"); +var cell0104 = document.querySelector("#cell0104"); +var cell0105 = document.querySelector("#cell0105"); +var line01 = []; +if (cell0101 && cell0102 && cell0103 && cell0104 && cell0105) { + line01.push(cell0101, cell0102, cell0103, cell0104, cell0105); +} +var cell0201 = document.querySelector("#cell0201"); +var cell0202 = document.querySelector("#cell0202"); +var cell0203 = document.querySelector("#cell0203"); +var cell0204 = document.querySelector("#cell0204"); +var cell0205 = document.querySelector("#cell0205"); +var line02 = []; +if (cell0201 && cell0202 && cell0203 && cell0204 && cell0205) { + line02.push(cell0201, cell0202, cell0203, cell0204, cell0205); +} +var cell0301 = document.querySelector("#cell0301"); +var cell0302 = document.querySelector("#cell0302"); +var cell0303 = document.querySelector("#cell0303"); +var cell0304 = document.querySelector("#cell0304"); +var cell0305 = document.querySelector("#cell0305"); +var line03 = []; +if (cell0301 && cell0302 && cell0303 && cell0304 && cell0305) { + line03.push(cell0301, cell0302, cell0303, cell0304, cell0305); +} +var cell0401 = document.querySelector("#cell0401"); +var cell0402 = document.querySelector("#cell0402"); +var cell0403 = document.querySelector("#cell0403"); +var cell0404 = document.querySelector("#cell0404"); +var cell0405 = document.querySelector("#cell0405"); +var line04 = []; +if (cell0401 && cell0402 && cell0403 && cell0404 && cell0405) { + line04.push(cell0401, cell0402, cell0403, cell0404, cell0405); +} +var cell0501 = document.querySelector("#cell0501"); +var cell0502 = document.querySelector("#cell0502"); +var cell0503 = document.querySelector("#cell0503"); +var cell0504 = document.querySelector("#cell0504"); +var cell0505 = document.querySelector("#cell0505"); +var line05 = []; +if (cell0501 && cell0502 && cell0503 && cell0504 && cell0505) { + line05.push(cell0501, cell0502, cell0503, cell0504, cell0505); +} +var cell0601 = document.querySelector("#cell0601"); +var cell0602 = document.querySelector("#cell0602"); +var cell0603 = document.querySelector("#cell0603"); +var cell0604 = document.querySelector("#cell0604"); +var cell0605 = document.querySelector("#cell0605"); +var line06 = []; +if (cell0601 && cell0602 && cell0603 && cell0604 && cell0605) { + line06.push(cell0601, cell0602, cell0603, cell0604, cell0605); +} +var linesArray = [line01, line02, line03, line04, line05, line06]; +// let enterCounter: number = 0; +// const solution: string = "SMART"; +// const solutionArray = solution.split(""); +// let currentCell = linesArray[0][0]; +// function insertLetterToCell(letter: string): void { +// try { +// currentCell.innerText = letter; +// currentCell = currentCell.nextElementSibling; +// } catch (error: unknown) { +// console.error(Error); +// } +// } +// function enter(): void { +// try { +// for (let i = 0; i < 5; i++) { +// if (solution.includes(linesArray[enterCounter][i].innerText)) { +// linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } +// if (linesArray[enterCounter][i].innerText === solution[i]) { +// linesArray[enterCounter][i].style.backgroundColor = "orange"; +// } +// } +// enterCounter++; +// console.log(`enter counter =${enterCounter}`) +// currentCell = linesArray[enterCounter][0]; // goes to the next line +// } catch (error: unknown) { +// console.error(Error); +// } +// } diff --git a/02-TypeScript/14-events/home-puzzles/Amit/helpers.ts b/02-TypeScript/14-events/home-puzzles/Amit/helpers.ts new file mode 100644 index 000000000..0d6312759 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/helpers.ts @@ -0,0 +1,4 @@ +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); + } + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Amit/index.html b/02-TypeScript/14-events/home-puzzles/Amit/index.html new file mode 100644 index 000000000..715f8047a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/index.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + Document + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                + +
                +
                + + + + + + + + + + +
                +
                + + + + + + + + + +
                +
                + + + + + + + + + +
                +
                + + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Amit/index.ts b/02-TypeScript/14-events/home-puzzles/Amit/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Amit/model.ts b/02-TypeScript/14-events/home-puzzles/Amit/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Amit/style.css b/02-TypeScript/14-events/home-puzzles/Amit/style.css new file mode 100644 index 000000000..9865dd4ee --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/style.css @@ -0,0 +1,59 @@ +body { + background-color: black; + margin: 0; + position: relative; +} + +.board { + height: 30rem; + width: 30rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; +} +.board__line { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; +} +.board__line__cell { + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; +} + +.keyboard { + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: 5rem; + display: flex; + flex-direction: column; +} +.keyboard__line { + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; +} +.keyboard__line__key { + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Amit/style.scss b/02-TypeScript/14-events/home-puzzles/Amit/style.scss new file mode 100644 index 000000000..34391cd6c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/style.scss @@ -0,0 +1,60 @@ +body{ + background-color: black; + margin: 0; + position: relative; +} + +.board{ + height: 30rem; + width: 30rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + &__line{ + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; + &__cell{ + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; + + } + } +} + +.keyboard{ + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: 5rem; + display: flex; + flex-direction: column; + &__line{ + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; + &__key{ + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; + } + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Amit/view.ts b/02-TypeScript/14-events/home-puzzles/Amit/view.ts new file mode 100644 index 000000000..e4f4f25f7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Amit/view.ts @@ -0,0 +1,129 @@ +const cell0101: HTMLDivElement | null = document.querySelector("#cell0101"); +const cell0102: HTMLDivElement | null = document.querySelector("#cell0102"); +const cell0103: HTMLDivElement | null = document.querySelector("#cell0103"); +const cell0104: HTMLDivElement | null = document.querySelector("#cell0104"); +const cell0105: HTMLDivElement | null = document.querySelector("#cell0105"); +const line01: HTMLDivElement[] = []; +if (cell0101 && cell0102 && cell0103 && cell0104 && cell0105) { + line01.push(cell0101, cell0102, cell0103, cell0104, cell0105); +} + +const cell0201: HTMLDivElement | null = document.querySelector("#cell0201"); +const cell0202: HTMLDivElement | null = document.querySelector("#cell0202"); +const cell0203: HTMLDivElement | null = document.querySelector("#cell0203"); +const cell0204: HTMLDivElement | null = document.querySelector("#cell0204"); +const cell0205: HTMLDivElement | null = document.querySelector("#cell0205"); +const line02: HTMLDivElement[] = []; +if (cell0201 && cell0202 && cell0203 && cell0204 && cell0205) { + line02.push(cell0201, cell0202, cell0203, cell0204, cell0205); +} + +const cell0301: HTMLDivElement | null = document.querySelector("#cell0301"); +const cell0302: HTMLDivElement | null = document.querySelector("#cell0302"); +const cell0303: HTMLDivElement | null = document.querySelector("#cell0303"); +const cell0304: HTMLDivElement | null = document.querySelector("#cell0304"); +const cell0305: HTMLDivElement | null = document.querySelector("#cell0305"); +const line03: HTMLDivElement[] = []; +if (cell0301 && cell0302 && cell0303 && cell0304 && cell0305) { + line03.push(cell0301, cell0302, cell0303, cell0304, cell0305); +} + +const cell0401: HTMLDivElement | null = document.querySelector("#cell0401"); +const cell0402: HTMLDivElement | null = document.querySelector("#cell0402"); +const cell0403: HTMLDivElement | null = document.querySelector("#cell0403"); +const cell0404: HTMLDivElement | null = document.querySelector("#cell0404"); +const cell0405: HTMLDivElement | null = document.querySelector("#cell0405"); +const line04: HTMLDivElement[] = []; +if (cell0401 && cell0402 && cell0403 && cell0404 && cell0405) { + line04.push(cell0401, cell0402, cell0403, cell0404, cell0405); +} + +const cell0501: HTMLDivElement | null = document.querySelector("#cell0501"); +const cell0502: HTMLDivElement | null = document.querySelector("#cell0502"); +const cell0503: HTMLDivElement | null = document.querySelector("#cell0503"); +const cell0504: HTMLDivElement | null = document.querySelector("#cell0504"); +const cell0505: HTMLDivElement | null = document.querySelector("#cell0505"); +const line05: HTMLDivElement[] = []; +if (cell0501 && cell0502 && cell0503 && cell0504 && cell0505) { + line05.push(cell0501, cell0502, cell0503, cell0504, cell0505); +} + +const cell0601: HTMLDivElement | null = document.querySelector("#cell0601"); +const cell0602: HTMLDivElement | null = document.querySelector("#cell0602"); +const cell0603: HTMLDivElement | null = document.querySelector("#cell0603"); +const cell0604: HTMLDivElement | null = document.querySelector("#cell0604"); +const cell0605: HTMLDivElement | null = document.querySelector("#cell0605"); +const line06: HTMLDivElement[] = []; +if (cell0601 && cell0602 && cell0603 && cell0604 && cell0605) { + line06.push(cell0601, cell0602, cell0603, cell0604, cell0605); +} + + +const linesArray: HTMLElement[][] = [line01, line02, line03, line04, line05, line06]; + + + + + + + + + + + + + + + + + + + + + + + +// let enterCounter: number = 0; + + +// const solution: string = "SMART"; +// const solutionArray = solution.split(""); + +// let currentCell = linesArray[0][0]; + + +// function insertLetterToCell(letter: string): void { +// try { +// currentCell.innerText = letter; +// currentCell = currentCell.nextElementSibling; + +// } catch (error: unknown) { +// console.error(Error); +// } +// } + +// function enter(): void { +// try { + + + +// for (let i = 0; i < 5; i++) { +// if (solution.includes(linesArray[enterCounter][i].innerText)) { +// linesArray[enterCounter][i].style.backgroundColor = "blue"; +// } + +// if (linesArray[enterCounter][i].innerText === solution[i]) { +// linesArray[enterCounter][i].style.backgroundColor = "orange"; +// } +// } + +// enterCounter++; +// console.log(`enter counter =${enterCounter}`) + +// currentCell = linesArray[enterCounter][0]; // goes to the next line + +// } catch (error: unknown) { +// console.error(Error); +// } +// } + diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/control.ts b/02-TypeScript/14-events/home-puzzles/Ayala/control.ts new file mode 100644 index 000000000..139597f9c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/control.ts @@ -0,0 +1,2 @@ + + diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/dist/control.js b/02-TypeScript/14-events/home-puzzles/Ayala/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Ayala/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/dist/index.js b/02-TypeScript/14-events/home-puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/dist/model.js b/02-TypeScript/14-events/home-puzzles/Ayala/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/dist/style.css b/02-TypeScript/14-events/home-puzzles/Ayala/dist/style.css new file mode 100644 index 000000000..b549f93c5 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/dist/style.css @@ -0,0 +1,40 @@ +.all { + background-color: bisque; + width: 100vw; + height: 100vh; + margin: auto; + display: flex; + justify-content: space-evenly; + gap: 100px; + padding: 10%; +} +.all .box1 { + border: 1px solid black; + width: 300px; + height: 300px; + background-color: #e6c0d9; +} +.all #grid { + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +.all .box { + background-color: lightblue; + border: 1px solid black; +} +.all #container { + background-color: antiquewhite; + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +.all .box2 { + border: 1px solid blueviolet; + font-size: 40px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/dist/view.js b/02-TypeScript/14-events/home-puzzles/Ayala/dist/view.js new file mode 100644 index 000000000..7e2b0eb8f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/dist/view.js @@ -0,0 +1,24 @@ +//1) create a box. When the user press on the, an alert show "You pressed me" +var box1 = document.querySelector('.box1'); +box1.addEventListener("click", function (event) { + alert("You pressed me"); +}); +// 2) create a 3 by 3 board of light blue color. when a box is pressed, the color is changed to black. even better, an image of a chess pawn appear. +var boxes = document.querySelectorAll('.box'); +boxes.forEach(function (box) { + box.addEventListener("click", function (event) { + // box.style.backgroundColor ="black"; + box.style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Chess_piece_-_White_pawn.JPG/261px-Chess_piece_-_White_pawn.JPG')"; + box.style.backgroundSize = "contain"; + // box.style.backgroundSize ="cover"; + }); +}); +// 3) create tick tac toe game +var isX = true; +var boxes2 = document.querySelectorAll('.box2'); +boxes2.forEach(function (box) { + box.addEventListener("click", function (event) { + box.innerHTML = isX ? "X" : "O"; + isX = !isX; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/helpers.ts b/02-TypeScript/14-events/home-puzzles/Ayala/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/index.html b/02-TypeScript/14-events/home-puzzles/Ayala/index.html new file mode 100644 index 000000000..9b8626724 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/index.html @@ -0,0 +1,46 @@ + + + + + + + Document + + + + + + + + + +
                +
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/index.ts b/02-TypeScript/14-events/home-puzzles/Ayala/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/model.ts b/02-TypeScript/14-events/home-puzzles/Ayala/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/style.css b/02-TypeScript/14-events/home-puzzles/Ayala/style.css new file mode 100644 index 000000000..a9c15e1bd --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/style.css @@ -0,0 +1,40 @@ +.all { + background-color: bisque; + width: 100vw; + height: 100vh; + margin: auto; + display: flex; + justify-content: space-evenly; + gap: 100px; + padding: 10%; +} +.all .box1 { + border: 1px solid black; + width: 300px; + height: 300px; + background-color: rgb(230, 192, 217); +} +.all #grid { + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +.all .box { + background-color: lightblue; + border: 1px solid black; +} +.all #container { + background-color: antiquewhite; + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +.all .box2 { + border: 1px solid blueviolet; + font-size: 40px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/style.scss b/02-TypeScript/14-events/home-puzzles/Ayala/style.scss new file mode 100644 index 000000000..1aa8e9b3d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/style.scss @@ -0,0 +1,49 @@ +.all{ + background-color: bisque; + width: 100vw; + height: 100vh; + margin: auto; + display: flex; + justify-content:space-evenly; + gap: 100px; + padding: 10%; + + +.box1 { + border : 1px solid black;; + width: 300px; + height: 300px; + background-color: rgb(230, 192, 217); +} + +#grid { + + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} + +.box { + background-color: lightblue; + border: 1px solid black; +} + +#container { + + background-color: antiquewhite; + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + +} + +.box2 { + border: 1px solid blueviolet; + font-size: 40px; + text-align: center; +} +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Ayala/view.ts b/02-TypeScript/14-events/home-puzzles/Ayala/view.ts new file mode 100644 index 000000000..ca979b382 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Ayala/view.ts @@ -0,0 +1,37 @@ + + + +//1) create a box. When the user press on the, an alert show "You pressed me" + +const box1 =document.querySelector('.box1'); +box1.addEventListener("click",(event)=>{ + alert("You pressed me") +}) + +// 2) create a 3 by 3 board of light blue color. when a box is pressed, the color is changed to black. even better, an image of a chess pawn appear. + +const boxes = document.querySelectorAll('.box'); +boxes.forEach((box)=>{ + box.addEventListener("click",(event)=>{ + // box.style.backgroundColor ="black"; + box.style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Chess_piece_-_White_pawn.JPG/261px-Chess_piece_-_White_pawn.JPG')" + box.style.backgroundSize ="contain"; + // box.style.backgroundSize ="cover"; + + }) + +}) + + +// 3) create tick tac toe game +let isX =true; + +const boxes2 = document.querySelectorAll('.box2'); +boxes2.forEach((box)=>{ + box.addEventListener("click",(event)=>{ + box.innerHTML = isX?"X":"O"; + isX = ! isX ; + + }) + +}) \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Dayan/dist/script.js b/02-TypeScript/14-events/home-puzzles/Dayan/dist/script.js new file mode 100644 index 000000000..e7766a4f8 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Dayan/dist/script.js @@ -0,0 +1,68 @@ +var square = document.querySelectorAll(".square"); +var currentPlayer = "X"; +//Winning Pattern Array +var winningPattern = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; +// Display X/O on click +for (var i = 0; i < square.length; i++) { + square[i].addEventListener("click", function (event) { + var square = event.target; + // If the square is empty, it should place an "X" or "O" in the square + if (square.innerHTML == "") { + square.innerHTML = currentPlayer; + setTimeout(function () { winChecker(); }, 100); + switchPlayer(); + } + }); +} +// Function to switch between the players +var switchPlayer = function () { + if (currentPlayer == "X") { + currentPlayer = "O"; + } + else { + currentPlayer = "X"; + } +}; +// Function to check for win or draw +var winChecker = function () { + // Loop through all win patterns + for (var _i = 0, winningPattern_1 = winningPattern; _i < winningPattern_1.length; _i++) { + var i = winningPattern_1[_i]; + // Check if squares are filled + // If 3 empty squares are same and would give win as would + if ((square[i[0]].innerHTML != "") && (square[i[1]].innerHTML != "") && (square[i[2]].innerHTML != "")) { + if (square[i[0]].innerHTML == square[i[1]].innerHTML && square[i[1]].innerHTML == square[i[2]].innerHTML) { + // If all 3 squares have same values + alert("Player " + currentPlayer + " is won!"); + resetTheBoard(); + } + } + } + var draw = true; + //It's a draw since there are a total of 9 boxes + for (var i = 0; i < square.length; i++) { + if (square[i].innerHTML == "") { + draw = false; + break; + } + } + if (draw) { + alert("It's a Draw!"); + resetTheBoard(); + } +}; +// Function to reset the board +var resetTheBoard = function () { + for (var i = 0; i < square.length; i++) { + square[i].innerHTML = ""; + } +}; diff --git a/02-TypeScript/14-events/home-puzzles/Dayan/dist/style.css b/02-TypeScript/14-events/home-puzzles/Dayan/dist/style.css new file mode 100644 index 000000000..9fd8a539c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Dayan/dist/style.css @@ -0,0 +1,38 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Bubblegum Sans", cursive; +} + +body { + height: 100vh; + background: linear-gradient(150deg, #74cff4, #d161ff); +} + +.board { + position: absolute; + transform: translate(-50%, -50%); + top: 55%; + left: 50%; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 2vmin; +} +.board .square { + background: #ffffff; + height: 20vmin; + width: 20vmin; + border: none; + border-radius: 8px; + font-size: 12vmin; + color: #d161ff; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); + padding-top: 25px; + text-align: center; +} +.board .square:hover { + background: #f1dff7; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Dayan/index.html b/02-TypeScript/14-events/home-puzzles/Dayan/index.html new file mode 100644 index 000000000..9b84475f6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Dayan/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + Tic Tac Toe Game + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Dayan/script.ts b/02-TypeScript/14-events/home-puzzles/Dayan/script.ts new file mode 100644 index 000000000..633d26a41 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Dayan/script.ts @@ -0,0 +1,74 @@ +const square:any = document.querySelectorAll(".square") + +let currentPlayer:string = "X" + + +//Winning Pattern Array +const winningPattern = [ + [0,1,2], + [3,4,5], + [6,7,8], + [0,3,6], + [1,4,7], + [2,5,8], + [0,4,8], + [2,4,6] +] + +// Display X/O on click +for(let i = 0; i < square.length; i++){ + square[i].addEventListener("click", (event) => { + const square = event.target + // If the square is empty, it should place an "X" or "O" in the square + if (square.innerHTML == ""){ + square.innerHTML = currentPlayer + setTimeout(() => {winChecker()}, 100) + switchPlayer() + } + }) +} + +// Function to switch between the players +const switchPlayer = () => { + if(currentPlayer == "X"){ + currentPlayer = "O" + }else{ + currentPlayer = "X" + } +} + +// Function to check for win or draw +const winChecker = () => { + // Loop through all win patterns + for(let i of winningPattern){ + // Check if squares are filled + // If 3 empty squares are same and would give win as would + if((square[i[0]].innerHTML != "") && (square[i[1]].innerHTML != "") && (square[i[2]].innerHTML != "")){ + if(square[i[0]].innerHTML == square[i[1]].innerHTML && square[i[1]].innerHTML == square[i[2]].innerHTML){ + // If all 3 squares have same values + alert(`Player ${currentPlayer} is won!`) + resetTheBoard() + } + } + } + + let draw = true + //It's a draw since there are a total of 9 boxes + for(let i = 0; i < square.length; i++){ + if(square[i].innerHTML == ""){ + draw = false + break + } + } + if(draw){ + alert("It's a Draw!") + resetTheBoard() + } +} + +// Function to reset the board +const resetTheBoard = () => { + for (let i = 0; i < square.length; i++){ + square[i].innerHTML = "" + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Dayan/style.css b/02-TypeScript/14-events/home-puzzles/Dayan/style.css new file mode 100644 index 000000000..9fd8a539c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Dayan/style.css @@ -0,0 +1,38 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Bubblegum Sans", cursive; +} + +body { + height: 100vh; + background: linear-gradient(150deg, #74cff4, #d161ff); +} + +.board { + position: absolute; + transform: translate(-50%, -50%); + top: 55%; + left: 50%; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 2vmin; +} +.board .square { + background: #ffffff; + height: 20vmin; + width: 20vmin; + border: none; + border-radius: 8px; + font-size: 12vmin; + color: #d161ff; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); + padding-top: 25px; + text-align: center; +} +.board .square:hover { + background: #f1dff7; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Dayan/style.scss b/02-TypeScript/14-events/home-puzzles/Dayan/style.scss new file mode 100644 index 000000000..41b19d3ce --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Dayan/style.scss @@ -0,0 +1,45 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Bubblegum Sans', cursive; +} + +body{ + height: 100vh; + background: linear-gradient(150deg, #74cff4, #d161ff); +} + +.board{ + // Position + position: absolute; + transform: translate(-50%, -50%); + top: 55%; + left: 50%; + + // Grid + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + + gap: 2vmin; + + .square{ + background: #ffffff; + height: 20vmin; + width: 20vmin; + border: none; + border-radius: 8px; + font-size: 12vmin; + color: #d161ff; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); + padding-top: 25px; + text-align: center; + + &:hover{ + background: #f1dff7; + cursor: pointer; + } + } +} + diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/.vscode/settings.json b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/dist/index.js b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/dist/index.js new file mode 100644 index 000000000..4701b5cd0 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/dist/index.js @@ -0,0 +1,109 @@ +var xSymbol = "X"; +var oSymbol = "O"; +var playerX = true; +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { + box.addEventListener("click", startPlayGame); +}); +function startPlayGame() { + if (this.textContent != "") + return; + if (playerX) { + this.textContent = xSymbol; + this.style.color = "red"; + } + else { + this.textContent = oSymbol; + this.style.color = "green"; + } + playerX = !playerX; + var chackWin = chachWin(); + theWinnerIs(chackWin); + changePlayer(playerX); +} +function chachWin() { + var whoWin = ""; + var boxWin = document.querySelectorAll(".box"); + var checkWhoIsWinner = [ + { one: 0, two: 1, three: 2 }, + { one: 3, two: 4, three: 5 }, + { one: 6, two: 7, three: 8 }, + { one: 0, two: 3, three: 6 }, + { one: 1, two: 4, three: 7 }, + { one: 2, two: 5, three: 8 }, + { one: 0, two: 4, three: 8 }, + { one: 2, two: 4, three: 6 }, + ]; + for (var i = 0; i < checkWhoIsWinner.length; i++) { + if ((boxWin[checkWhoIsWinner[i].one].innerHTML == + boxWin[checkWhoIsWinner[i].two].innerHTML) && + (boxWin[checkWhoIsWinner[i].one].innerHTML == + boxWin[checkWhoIsWinner[i].three].innerHTML) && + boxWin[checkWhoIsWinner[i].one].innerHTML != "") { + whoWin = ("" + checkWhoIsWinner[i].one + checkWhoIsWinner[i].two + checkWhoIsWinner[i].three + boxWin[checkWhoIsWinner[i].three].innerHTML); + return (whoWin); + } + } + var chekTie = checkTie(); + if (chekTie) { + whoWin = "999T"; + } + return (whoWin); +} +function theWinnerIs(chackWin) { + var arrayWinFromStr = chackWin; + if (arrayWinFromStr.length < 4) { + return; + } + if (arrayWinFromStr[3] != "T") { + for (var i = 0; i < 3; i++) { + var strWin = "box" + arrayWinFromStr[i]; + document.getElementById(strWin).style.backgroundColor = "blue"; + } + } + setInterval(theWinner, 1, (arrayWinFromStr[3])); + setTimeout(function () { window.location.reload(); }, 3000); +} +function changePlayer(player) { + var playerSymbol = document.getElementById("player"); + if (player) { + playerSymbol.innerText = "Player 1"; + playerSymbol.style.color = "red"; + } + else { + playerSymbol.innerText = "Player 2"; + playerSymbol.style.color = "green"; + } +} +function theWinner(theWinner) { + var playerWinner = document.getElementById("player"); + switch (theWinner) { + case "X": + theWinner = "Player 1"; + playerWinner.innerText = "The Winner is " + theWinner; + playerWinner.style.color = "red"; + playerWinner.style.fontSize = "50px"; + break; + case "O": + theWinner = "Player 2"; + playerWinner.innerText = "The Winner is " + theWinner; + playerWinner.style.color = "green"; + playerWinner.style.fontSize = "50px"; + break; + case "T": + playerWinner.innerText = "No Winner is Tie"; + playerWinner.style.color = "blue"; + playerWinner.style.fontSize = "50px"; + break; + } +} +function checkTie() { + var boxWin = document.querySelectorAll(".box"); + var checkTie = true; + boxWin.forEach(function (box) { + if (box.innerHTML == "") { + checkTie = false; + } + }); + return (checkTie); +} diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/dist/style.css b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/dist/style.css new file mode 100644 index 000000000..22f9b1b54 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/dist/style.css @@ -0,0 +1,47 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: georgia; + background-repeat: no-repeat; + background-size: cover; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz5fJ7zAnYVu56Z8ox36kH1A-j0xR2MzNnoo8kHZJ-maz3PyOmgUw_Cg1_FnD6iHyEj0U&usqp=CAU); + opacity: 5; +} + +h1 { + font-size: 60px; + text-align: center; + color: blue; + text-shadow: 2px 2px white; +} + +#player { + font-size: 40px; + text-align: center; + color: red; + text-shadow: 2px 2px white; + margin-bottom: 10px; +} + +#wapper { + display: grid; + grid-template-columns: repeat(3, 100px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 38%; +} + +.box { + height: 100px; + background-color: #9cc4c8; + font-size: 45px; + display: flex; + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/index.html b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/index.html new file mode 100644 index 000000000..ea777a2ec --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/index.html @@ -0,0 +1,30 @@ + + + + + + + TicTacToe + + + + +

                Tic Tac Toe

                + +
                Player 1
                + +
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/index.ts b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/index.ts new file mode 100644 index 000000000..63b70de7e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/index.ts @@ -0,0 +1,129 @@ + + +const xSymbol = "X" + +const oSymbol = "O" +let playerX = true + +const boxes = document.querySelectorAll(".box") +boxes.forEach((box) => { + box.addEventListener("click", startPlayGame) +}) + + +function startPlayGame(){ + if(this.textContent != "") return + + if(playerX) { + this.textContent = xSymbol + this.style.color = "red" + + }else { + this.textContent = oSymbol + this.style.color = "green" + } + playerX = !playerX + let chackWin:string = chachWin() + + theWinnerIs(chackWin) + changePlayer(playerX) +} + +function chachWin() :string{ + let whoWin = "" + const boxWin = document.querySelectorAll(".box") + const checkWhoIsWinner = [ + {one: 0, two: 1, three: 2}, + {one: 3, two: 4, three: 5}, + {one: 6, two: 7, three: 8}, + {one: 0, two: 3, three: 6}, + {one: 1, two: 4, three: 7}, + {one: 2, two: 5, three: 8}, + {one: 0, two: 4, three: 8}, + {one: 2, two: 4, three: 6}, + ]; + + for(let i=0; i {window.location.reload()}, 3000); + +} + +function changePlayer(player: boolean){ + const playerSymbol = document.getElementById("player") as HTMLDivElement + if (player){ + playerSymbol.innerText = "Player 1" + playerSymbol.style.color = "red" + }else{ + playerSymbol.innerText = "Player 2" + playerSymbol.style.color = "green" + + } + +} + +function theWinner(theWinner:string){ + const playerWinner = document.getElementById("player") as HTMLDivElement + + switch(theWinner){ + case "X": + theWinner = "Player 1" + playerWinner.innerText = `The Winner is ${theWinner}` + playerWinner.style.color = "red" + playerWinner.style.fontSize = "50px" + break + + case "O": + theWinner = "Player 2" + playerWinner.innerText = `The Winner is ${theWinner}` + playerWinner.style.color = "green" + playerWinner.style.fontSize = "50px" + break + + case "T": + playerWinner.innerText = `No Winner is Tie` + playerWinner.style.color = "blue" + playerWinner.style.fontSize = "50px" + break + } + +} + +function checkTie(): boolean{ + let boxWin = document.querySelectorAll(".box") + let checkTie = true + boxWin.forEach(box => { + if(box.innerHTML == ""){ + checkTie = false + } + }) + return(checkTie) +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/style.css b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/style.css new file mode 100644 index 000000000..dd7d545ba --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/style.css @@ -0,0 +1,47 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: georgia; + background-repeat: no-repeat; + background-size: cover; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz5fJ7zAnYVu56Z8ox36kH1A-j0xR2MzNnoo8kHZJ-maz3PyOmgUw_Cg1_FnD6iHyEj0U&usqp=CAU); + opacity: 5; +} + +h1 { + font-size: 60px; + text-align: center; + color: blue; + text-shadow: 2px 2px white; +} + +#player { + font-size: 40px; + text-align: center; + color: red; + text-shadow: 2px 2px white; + margin-bottom: 10px; +} + +#wapper { + display: grid; + grid-template-columns: repeat(3, 100px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 38%; +} + +.box { + height: 100px; + background-color: rgb(156, 196, 200); + font-size: 45px; + display: flex; + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/style.scss b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/style.scss new file mode 100644 index 000000000..b61328a91 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/EstiMauda/TicTacToe/style.scss @@ -0,0 +1,55 @@ +*{ + padding: 0; + margin: 0; +} + +body{ + font-family: georgia; + background-repeat: no-repeat; + background-size: cover; + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz5fJ7zAnYVu56Z8ox36kH1A-j0xR2MzNnoo8kHZJ-maz3PyOmgUw_Cg1_FnD6iHyEj0U&usqp=CAU); + opacity: 5; +} + +h1{ + font-size: 60px; + text-align: center; + color: blue; + text-shadow: 2px 2px white ; + + + +} +#player{ + font-size: 40px; + text-align: center; + color: red; + text-shadow: 2px 2px white ; + margin-bottom: 10px; +} + + +#wapper{ + + display: grid; + grid-template-columns: repeat(3, 100px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 38%; + + } + +.box{ + height: 100px; + background-color: rgb(156, 196, 200); + font-size: 45px; + display: flex; + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, + rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, + rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + justify-content: center; + align-items: center + +} diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/control.ts b/02-TypeScript/14-events/home-puzzles/Idan-B/control.ts new file mode 100644 index 000000000..3a64a8841 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/control.ts @@ -0,0 +1,3 @@ +let turnCount:number=0; +let ticTacToePositionSaver:number[] = [2]; +ticTacToePositionSaver.length = 9; \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/dist/control.js b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/control.js new file mode 100644 index 000000000..c132d3998 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/control.js @@ -0,0 +1,3 @@ +var turnCount = 0; +var ticTacToePositionSaver = [2]; +ticTacToePositionSaver.length = 9; diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/helpers.js new file mode 100644 index 000000000..96fcf2cc3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/helpers.js @@ -0,0 +1,16 @@ +function winCon() { + try { + //unreadable but works + if ((playerInput[0].innerHTML == playerInput[1].innerHTML && playerInput[1].innerHTML == playerInput[2].innerHTML) || (playerInput[3].innerHTML == playerInput[4].innerHTML && playerInput[3].innerHTML == playerInput[5].innerHTML) || (playerInput[6].innerHTML == playerInput[7].innerHTML && playerInput[7].innerHTML == playerInput[8].innerHTML) || (playerInput[0].innerHTML == playerInput[4].innerHTML && playerInput[4].innerHTML == playerInput[8].innerHTML) || (playerInput[2].innerHTML == playerInput[4].innerHTML && playerInput[4].innerHTML == playerInput[6].innerHTML) || (playerInput[0].innerHTML == playerInput[3].innerHTML && playerInput[3].innerHTML == playerInput[6].innerHTML) || (playerInput[1].innerHTML == playerInput[4].innerHTML && playerInput[4].innerHTML == playerInput[7].innerHTML) || (playerInput[2].innerHTML == playerInput[5].innerHTML && playerInput[5].innerHTML == playerInput[8].innerHTML)) { + return true; + } + return false; + } + catch (error) { + return false; + } +} +function reload() { + alert("reload"); + location.reload(); +} diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/dist/index.js b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/dist/model.js b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/dist/style.css b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/style.css new file mode 100644 index 000000000..7af46941f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/style.css @@ -0,0 +1,20 @@ +.playbox { + width: 930px; + height: 930px; + background-color: aqua; + margin: auto; + display: grid; + grid-template-columns: repeat(3, 300px); + grid-template-rows: repeat(3, 300px); + row-gap: 15px; + column-gap: 15px; +} +.playbox__gridThing { + width: 300px; + height: 300px; + background-color: antiquewhite; + display: flex; + align-items: center; + justify-content: center; + font-size: 10rem; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/dist/view.js b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/view.js new file mode 100644 index 000000000..bc21c2a00 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/dist/view.js @@ -0,0 +1,28 @@ +var playerInput = document.querySelectorAll(".playbox__gridThing"); +console.log(ticTacToePositionSaver.length); +playerInput.forEach(function (element) { + element.addEventListener('click', function (event) { + if (element.innerHTML != "X" && element.innerHTML != "O") { + switch (turnCount % 2) { + case 1: + element.innerHTML = "O"; + turnCount++; + if (winCon()) { + alert('player 1 won'); + element.innerHTML = "O"; + setTimeout(reload, 5); + } + break; + default: + element.innerHTML = "X"; + turnCount++; + //should write 'x' before it alerts + if (winCon()) { + alert("player 1 won"); + setTimeout(reload, 5); + } + break; + } + } + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/helpers.ts b/02-TypeScript/14-events/home-puzzles/Idan-B/helpers.ts new file mode 100644 index 000000000..b8f8890a3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/helpers.ts @@ -0,0 +1,21 @@ +function winCon():boolean{ + try { + + + + //unreadable but works + if((playerInput[0].innerHTML == playerInput[1].innerHTML&& playerInput[1].innerHTML== playerInput[2].innerHTML )||(playerInput[3].innerHTML == playerInput[4].innerHTML &&playerInput[3].innerHTML == playerInput[5].innerHTML) ||( playerInput[6].innerHTML == playerInput[7].innerHTML && playerInput[7].innerHTML== playerInput[8].innerHTML )||( playerInput[0].innerHTML == playerInput[4].innerHTML && playerInput[4].innerHTML== playerInput[8].innerHTML )|| (playerInput[2].innerHTML == playerInput[4].innerHTML&& playerInput[4].innerHTML == playerInput[6].innerHTML)|| (playerInput[0].innerHTML == playerInput[3].innerHTML&& playerInput[3].innerHTML == playerInput[6].innerHTML)|| (playerInput[1].innerHTML == playerInput[4].innerHTML&& playerInput[4].innerHTML == playerInput[7].innerHTML) ||(playerInput[2].innerHTML == playerInput[5].innerHTML&& playerInput[5].innerHTML == playerInput[8].innerHTML)){ + + return true + } + + return false + } catch (error) { + return false + } + +} +function reload(){ + alert(`reload`) + location.reload() +} diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/index.html b/02-TypeScript/14-events/home-puzzles/Idan-B/index.html new file mode 100644 index 000000000..ef770d8ed --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/index.html @@ -0,0 +1,34 @@ + + + + + + + + Document + + + + + + + + + + + + +
                +

                +

                +

                +

                +

                +

                +

                +

                +

                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/index.ts b/02-TypeScript/14-events/home-puzzles/Idan-B/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/model.ts b/02-TypeScript/14-events/home-puzzles/Idan-B/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/style.css b/02-TypeScript/14-events/home-puzzles/Idan-B/style.css new file mode 100644 index 000000000..1de727254 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/style.css @@ -0,0 +1,21 @@ +.playbox { + width: 930px; + height: 930px; + background-color: aqua; + margin: auto; + display: grid; + grid-template-columns: repeat(3, 300px); + grid-template-rows: repeat(3, 300px); + row-gap: 15px; + -moz-column-gap: 15px; + column-gap: 15px; +} +.playbox__gridThing { + width: 300px; + height: 300px; + background-color: antiquewhite; + display: flex; + align-items: center; + justify-content: center; + font-size: 10rem; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/style.scss b/02-TypeScript/14-events/home-puzzles/Idan-B/style.scss new file mode 100644 index 000000000..a3143048a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/style.scss @@ -0,0 +1,20 @@ +.playbox{ + width: 930px; + height: 930px; + background-color: aqua; + margin:auto; + display: grid; + grid-template-columns: repeat(3,300px); + grid-template-rows: repeat(3,300px); + row-gap: 15px; + column-gap: 15px; + &__gridThing{ + width: 300px; + height: 300px; + background-color: antiquewhite; + display:flex; + align-items: center; + justify-content: center; + font-size: 10rem; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Idan-B/view.ts b/02-TypeScript/14-events/home-puzzles/Idan-B/view.ts new file mode 100644 index 000000000..65f9c5eff --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Idan-B/view.ts @@ -0,0 +1,33 @@ +const playerInput = document.querySelectorAll(`.playbox__gridThing`) + + +console.log(ticTacToePositionSaver.length) +playerInput.forEach(element => { + element.addEventListener('click', event=>{ + if(element.innerHTML != `X` && element.innerHTML != `O`){ + switch (turnCount%2) { + case 1: + element.innerHTML=`O` + turnCount++ + if(winCon()){ + alert('player 1 won') + element.innerHTML=`O` + setTimeout(reload, 5) + } + + break; + + default: + element.innerHTML=`X` + turnCount++ + //should write 'x' before it alerts + if(winCon()){ + alert(`player 1 won`) + setTimeout(reload, 5) + } + break; + } + } + + }) +}); diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/control.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/control.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/index.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/model.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/style.css b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/style.css new file mode 100644 index 000000000..b76ac6259 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/style.css @@ -0,0 +1,16 @@ +.wrapper { + display: grid; + margin: auto; + margin-top: 200px; + width: 300px; + height: 300px; +} +.wrapper #box { + background-color: blue; + width: 300px; + height: 300px; + text-align: center; +} +.wrapper h1 { + margin-top: 120px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/view.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/view.js new file mode 100644 index 000000000..bce3e4b80 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/dist/view.js @@ -0,0 +1,7 @@ +var box = document.querySelector("#box"); +box.addEventListener("click", function (event) { + box.style.backgroundColor = "red"; +}); +box.addEventListener("click", function (event) { + alert("you shuldnt have preesed"); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/helpers.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/index.html b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/index.html new file mode 100644 index 000000000..655ae00fc --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + +
                +

                Click me

                +
                + + diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/index.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/model.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/style.css b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/style.css new file mode 100644 index 000000000..b76ac6259 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/style.css @@ -0,0 +1,16 @@ +.wrapper { + display: grid; + margin: auto; + margin-top: 200px; + width: 300px; + height: 300px; +} +.wrapper #box { + background-color: blue; + width: 300px; + height: 300px; + text-align: center; +} +.wrapper h1 { + margin-top: 120px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/style.scss b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/style.scss new file mode 100644 index 000000000..e072c550b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/style.scss @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + margin: auto; + margin-top: 200px; + width: 300px; + height: 300px; + + + #box { + background-color: blue; + width: 300px; + height: 300px; + text-align: center; + } + h1 { + margin-top: 120px; + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task1/view.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/view.ts new file mode 100644 index 000000000..056d1fcc4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task1/view.ts @@ -0,0 +1,9 @@ +const box: HTMLElement | null = document.querySelector("#box"); + +box.addEventListener("click", (event) => { + box.style.backgroundColor = "red"; +}); + +box.addEventListener("click", (event) => { + alert (`you shuldnt have preesed`) +}); \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/control.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/control.ts new file mode 100644 index 000000000..ff56a6b42 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/control.ts @@ -0,0 +1,27 @@ +const cells = document.querySelectorAll(".cell"); +const resetButton = document.querySelector("#resetButton"); + + + +function handleClick(event) { + try { + const cell = event.target; + if (cell.textContent !== "") { + return; + } + cell.textContent = currentPlayer.symbol; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } catch (error) { + console.error(error); + } +} + +function resetGame() { + for (let i = 0; i < cells.length; i++) { + cells[i].textContent = ""; + } +} + +resetButton?.addEventListener("click", resetGame); + + diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/control.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/control.js new file mode 100644 index 000000000..fc367f4a3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/control.js @@ -0,0 +1,21 @@ +var cells = document.querySelectorAll(".cell"); +var resetButton = document.querySelector("#resetButton"); +function handleClick(event) { + try { + var cell = event.target; + if (cell.textContent !== "") { + return; + } + cell.textContent = currentPlayer.symbol; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } + catch (error) { + console.error(error); + } +} +function resetGame() { + for (var i = 0; i < cells.length; i++) { + cells[i].textContent = ""; + } +} +resetButton === null || resetButton === void 0 ? void 0 : resetButton.addEventListener("click", resetGame); diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/index.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/model.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/style.css b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/style.css new file mode 100644 index 000000000..4801f3e2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + gap: 20px; + grid-template-columns: repeat(3, 1fr); + height: 500px; + width: 400px; + margin: auto; + margin-top: 30px; +} + +div > div { + padding: 10px; + background-color: blue; + border: black 4px solid; + align-items: center; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/view.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/view.js new file mode 100644 index 000000000..b38ac8491 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/dist/view.js @@ -0,0 +1,13 @@ +var cell = document.querySelector(".cell"); +if (cell) { + cell.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxs = document.querySelectorAll(".cell"); +boxs.forEach(function (box) { + box.addEventListener("click", function (event) { + box.style.backgroundImage = "url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Chess_pawn_0968.jpg/1200px-Chess_pawn_0968.jpg)"; + box.style.backgroundSize = "100px 100px"; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/helpers.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/index.html b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/index.html new file mode 100644 index 000000000..02298741c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/index.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/model.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/style.css b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/style.css new file mode 100644 index 000000000..4801f3e2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + gap: 20px; + grid-template-columns: repeat(3, 1fr); + height: 500px; + width: 400px; + margin: auto; + margin-top: 30px; +} + +div > div { + padding: 10px; + background-color: blue; + border: black 4px solid; + align-items: center; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/style.scss b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/style.scss new file mode 100644 index 000000000..6b0c3ecc6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/style.scss @@ -0,0 +1,16 @@ +.wrapper{ + display: grid; + gap: 20px; + grid-template-columns: repeat(3, 1fr); + height: 500px; + width: 400px; + margin: auto; + margin-top: 30px; +} +div > div { + padding: 10px; + background-color: blue; + border: black 4px solid; + align-items: center; + text-align: center; +} diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task2/view.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/view.ts new file mode 100644 index 000000000..a80516ba1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task2/view.ts @@ -0,0 +1,16 @@ +const cell: HTMLElement|null = document.querySelector(".cell"); +if (cell) { + cell.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxs: any = document.querySelectorAll(".cell"); + +boxs.forEach((box) => { + box.addEventListener("click",(event) => { + box.style.backgroundImage= `url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Chess_pawn_0968.jpg/1200px-Chess_pawn_0968.jpg)`; + box.style.backgroundSize= `100px 100px`; + + }); +}); \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/control.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/control.ts new file mode 100644 index 000000000..ff56a6b42 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/control.ts @@ -0,0 +1,27 @@ +const cells = document.querySelectorAll(".cell"); +const resetButton = document.querySelector("#resetButton"); + + + +function handleClick(event) { + try { + const cell = event.target; + if (cell.textContent !== "") { + return; + } + cell.textContent = currentPlayer.symbol; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } catch (error) { + console.error(error); + } +} + +function resetGame() { + for (let i = 0; i < cells.length; i++) { + cells[i].textContent = ""; + } +} + +resetButton?.addEventListener("click", resetGame); + + diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/control.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/control.js new file mode 100644 index 000000000..fc367f4a3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/control.js @@ -0,0 +1,21 @@ +var cells = document.querySelectorAll(".cell"); +var resetButton = document.querySelector("#resetButton"); +function handleClick(event) { + try { + var cell = event.target; + if (cell.textContent !== "") { + return; + } + cell.textContent = currentPlayer.symbol; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } + catch (error) { + console.error(error); + } +} +function resetGame() { + for (var i = 0; i < cells.length; i++) { + cells[i].textContent = ""; + } +} +resetButton === null || resetButton === void 0 ? void 0 : resetButton.addEventListener("click", resetGame); diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/index.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/index.js new file mode 100644 index 000000000..88c804953 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/index.js @@ -0,0 +1 @@ +console.dir(); diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/model.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/model.js new file mode 100644 index 000000000..5205ddaea --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/model.js @@ -0,0 +1,19 @@ +var player1 = { name: prompt("Player 1 name:"), + symbol: "X", + score: 0 +}; +var player2 = { name: prompt("Player 2 name:"), + symbol: "O", + score: 0 +}; +var currentPlayer = player1; +var winningCombinations = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/style.css b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/style.css new file mode 100644 index 000000000..650627b2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/style.css @@ -0,0 +1,22 @@ +.wrapper { + display: grid; + gap: 20px; + grid-template-columns: repeat(3, 1fr); + height: 400px; + width: 300px; + margin: auto; + margin-top: 30px; +} + +div > div { + padding: 10px; + background-color: blue; + border: black 4px solid; + align-items: center; + text-align: center; +} + +h1 { + text-align: center; + margin-top: 60px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/view.js b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/view.js new file mode 100644 index 000000000..da0a6abc5 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/dist/view.js @@ -0,0 +1,3 @@ +for (var i = 0; i < cells.length; i++) { + cells[i].addEventListener("click", handleClick); +} diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/helpers.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/index.html b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/index.html new file mode 100644 index 000000000..b0f8c5a74 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/index.html @@ -0,0 +1,30 @@ + + + + + + + Document + + + + + + + +

                Tik Take Toe

                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                + + diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/index.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/index.ts new file mode 100644 index 000000000..6e541bab6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/index.ts @@ -0,0 +1 @@ +console.dir() \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/model.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/model.ts new file mode 100644 index 000000000..bd1c35791 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/model.ts @@ -0,0 +1,21 @@ +let player1 = { name: prompt("Player 1 name:"), + symbol: "X", + score: 0 +}; +let player2 = { name: prompt("Player 2 name:"), + symbol: "O", + score: 0 +}; + +let currentPlayer = player1; + +const winningCombinations = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/style.css b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/style.css new file mode 100644 index 000000000..650627b2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/style.css @@ -0,0 +1,22 @@ +.wrapper { + display: grid; + gap: 20px; + grid-template-columns: repeat(3, 1fr); + height: 400px; + width: 300px; + margin: auto; + margin-top: 30px; +} + +div > div { + padding: 10px; + background-color: blue; + border: black 4px solid; + align-items: center; + text-align: center; +} + +h1 { + text-align: center; + margin-top: 60px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/style.scss b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/style.scss new file mode 100644 index 000000000..8d4763db3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/style.scss @@ -0,0 +1,20 @@ +.wrapper{ + display: grid; + gap: 20px; + grid-template-columns: repeat(3, 1fr); + height: 400px; + width: 300px; + margin: auto; + margin-top: 30px; +} +div > div { + padding: 10px; + background-color: blue; + border: black 4px solid; + align-items: center; + text-align: center; +} +h1{ + text-align: center; + margin-top: 60px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itai-G/task3/view.ts b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/view.ts new file mode 100644 index 000000000..9f41e1fc9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itai-G/task3/view.ts @@ -0,0 +1,3 @@ +for (let i = 0; i < cells.length; i++) { + cells[i].addEventListener("click", handleClick); + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/index.html b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/index.html new file mode 100644 index 000000000..6a0979409 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/index.js b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/index.js new file mode 100644 index 000000000..c33bb5b4f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/index.js @@ -0,0 +1,16 @@ +function startIt() { + var creatBox = document.createElement("div"); + document.body.appendChild(creatBox); + creatBox.innerHTML = "click me"; + creatBox.addEventListener("click", function () { + return alert("This Box Is Been Clicked"); + }); + creatBox.addEventListener("mouseover", function () { + var newpop = document.createElement("p"); + creatBox.appendChild(newpop); + newpop.innerHTML = "You Hover Me"; + creatBox.addEventListener("mouseleave", function () { + creatBox.removeChild(newpop); + }); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/style.css b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/style.css new file mode 100644 index 000000000..cf41c0522 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/dist/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items: center; +} +body div { + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; +} +body div:hover { + background-color: bisque; + color: red; +} +body p { + width: 120px; + height: 110px; + background-color: #c62828; + color: white; + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itsik_B/1/index.ts b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/index.ts new file mode 100644 index 000000000..decb1f223 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/index.ts @@ -0,0 +1,21 @@ +function startIt(){ + let creatBox = document.createElement("div") as HTMLDivElement; + document.body.appendChild(creatBox); + creatBox.innerHTML = "click me" + creatBox.addEventListener("click", ()=>{ + return alert("This Box Is Been Clicked") + }) + creatBox.addEventListener("mouseover", ()=>{ + let newpop = document.createElement("p")as HTMLParagraphElement; + creatBox.appendChild(newpop) + newpop.innerHTML = "You Hover Me" + creatBox.addEventListener("mouseleave", ()=>{ + creatBox.removeChild(newpop) + }) + }) + + + + + + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itsik_B/1/style.css b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/style.css new file mode 100644 index 000000000..8305ddd1e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items: center; +} +body div { + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; +} +body div:hover { + background-color: bisque; + color: red; +} +body p { + width: 120px; + height: 110px; + background-color: rgb(198, 40, 40); + color: rgb(255, 255, 255); + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Itsik_B/1/style.scss b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/style.scss new file mode 100644 index 000000000..198c88313 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Itsik_B/1/style.scss @@ -0,0 +1,44 @@ +body{ + margin:0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items:center; + + div{ + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; + + + } + div:hover{ + background-color: bisque; + color: red; + + } + + p{ + width: 120px; + height: 110px; + background-color: rgb(198, 40, 40); + color: rgb(255, 255, 255); + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/control.ts b/02-TypeScript/14-events/home-puzzles/Karin-levi/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/control.js b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/index.js b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/model.js b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/style.css b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/style.css new file mode 100644 index 000000000..0323f4c48 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: #001180; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/view.js b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/view.js new file mode 100644 index 000000000..beacb8f3d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Karin-levi/dist/view.js @@ -0,0 +1,6 @@ +var myBox = document.querySelector(".box"); +if (myBox) { + myBox.addEventListener("click", function (event) { + window.alert("You pressed me"); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/index.html b/02-TypeScript/14-events/home-puzzles/Karin-levi/index.html new file mode 100644 index 000000000..4760494bc --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Karin-levi/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/index.ts b/02-TypeScript/14-events/home-puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/model.ts b/02-TypeScript/14-events/home-puzzles/Karin-levi/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/style.css b/02-TypeScript/14-events/home-puzzles/Karin-levi/style.css new file mode 100644 index 000000000..261607fb3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Karin-levi/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: rgb(0, 17, 128); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/style.scss b/02-TypeScript/14-events/home-puzzles/Karin-levi/style.scss new file mode 100644 index 000000000..418afd5a7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Karin-levi/style.scss @@ -0,0 +1,20 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box{ + height: 300px; + background-color: rgb(0, 17, 128); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; + } + +} + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Karin-levi/view.ts b/02-TypeScript/14-events/home-puzzles/Karin-levi/view.ts new file mode 100644 index 000000000..5ab86cbca --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Karin-levi/view.ts @@ -0,0 +1,6 @@ +const myBox: HTMLElement|null = document.querySelector(".box"); +if (myBox) { + myBox.addEventListener("click", (event) => { + window.alert("You pressed me"); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/Kseniya/app.ts b/02-TypeScript/14-events/home-puzzles/Kseniya/app.ts new file mode 100644 index 000000000..09711f540 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Kseniya/app.ts @@ -0,0 +1,12 @@ +// level 2 +const button = document.getElementById("ss"); +console.log(25); + +button?.addEventListener("click", (event) => { + console.log(36); + const box = document.getElementById("box"); + + if (box != undefined) { + box.style.backgroundColor = "red"; + } +}); diff --git a/02-TypeScript/14-events/home-puzzles/Kseniya/dist/app.js b/02-TypeScript/14-events/home-puzzles/Kseniya/dist/app.js new file mode 100644 index 000000000..c16d57803 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Kseniya/dist/app.js @@ -0,0 +1,10 @@ +// level 2 +var button = document.getElementById("ss"); +console.log(25); +button === null || button === void 0 ? void 0 : button.addEventListener("click", function (event) { + console.log(36); + var box = document.getElementById("box"); + if (box != undefined) { + box.style.backgroundColor = "red"; + } +}); diff --git a/02-TypeScript/14-events/home-puzzles/Kseniya/dist/dist/app.dev.js b/02-TypeScript/14-events/home-puzzles/Kseniya/dist/dist/app.dev.js new file mode 100644 index 000000000..8d30fca8d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Kseniya/dist/dist/app.dev.js @@ -0,0 +1,10 @@ +"use strict"; + +// level 2 +var button = document.querySelector('button'); +var box = document.getElementById("box"); +button === null || button === void 0 ? void 0 : button.addEventListener('click', function (event) { + button.textContent = "click count: " + event.detail; +}); // if (box != undefined) { +// box.style.backgroundColor = "red"; +// } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Kseniya/index.html b/02-TypeScript/14-events/home-puzzles/Kseniya/index.html new file mode 100644 index 000000000..459916f88 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Kseniya/index.html @@ -0,0 +1,15 @@ + + + + + + + events + + + + +
                + + + diff --git a/02-TypeScript/14-events/home-puzzles/Kseniya/style.css b/02-TypeScript/14-events/home-puzzles/Kseniya/style.css new file mode 100644 index 000000000..f69e3c7c6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Kseniya/style.css @@ -0,0 +1,6 @@ +#box{ + width: 10vh; + height: 10vh; + background-color: lightblue; + margin-bottom: 4vh; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/VSWorkspaceState.json b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/VSWorkspaceState.json new file mode 100644 index 000000000..6b6114114 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/FileContentIndex/5761be01-1207-4950-b755-bb315cf18a9a.vsidx b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/FileContentIndex/5761be01-1207-4950-b755-bb315cf18a9a.vsidx new file mode 100644 index 000000000..f4f42ca49 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/FileContentIndex/5761be01-1207-4950-b755-bb315cf18a9a.vsidx differ diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/FileContentIndex/read.lock b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/FileContentIndex/read.lock new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/v17/.wsuo b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/v17/.wsuo new file mode 100644 index 000000000..e575a896f Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/XO/v17/.wsuo differ diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/slnx.sqlite b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/slnx.sqlite new file mode 100644 index 000000000..3f30015fa Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/.vs/slnx.sqlite differ diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/index.html b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/index.html new file mode 100644 index 000000000..c5248a0cd --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/index.html @@ -0,0 +1,71 @@ + + + + + + + Document + + + + + + + + + +

                Next turn:

                +

                Player 1

                +

                Game rulse : to Start the Game you Need to enter player names and after that press the Game button
                GOOD LUCK!

                +
                + + +

                Score:

                +
                + + + + + + + + + +
                Player 1Player 2
                00
                +
                +
                + +
                +
                + + +
                + + +
                + +
                + + +
                + +
                +
                + + + + + + + + + +
                +
                +
                + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/main.css b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/main.css new file mode 100644 index 000000000..605e74c23 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/main.css @@ -0,0 +1,81 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: lightcoral; + background-repeat: no-repeat; + background-size: cover; + text-align: center; +} +body h1 { + padding-left: 20px; + text-align: center; + visibility: hidden; +} +body .scoreCss { + display: flex; + flex-wrap: nowrap; + justify-content: center; + text-align: center; +} + +h2 { + visibility: hidden; +} + +h3 { + visibility: hidden; +} + +.scoreCss { + visibility: hidden; +} + +#game { + margin-top: 5px; +} + +.allBtn { + margin-top: 50px; + display: flex; + flex-wrap: wrap; + width: 500px; +} +.allBtn button { + background-color: lightseagreen; + width: 33.3%; + height: 130px; + cursor: pointer; + border-style: inset 1px; + text-align: center; + border: inset 0.5px; + font-size: 100px; +} +.allBtn button:hover { + background-color: lightgreen; +} + +.centerContainer { + display: flex; + justify-content: center; +} + +table { + border-style: ridge; +} +table th { + border-color: black; + border-bottom: inset 1px black; +} +table #pl2 { + padding-left: 10px; +} +table td #scorePl1 { + border-right: inset 1px black; +} + +.reset { + padding-top: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/main.js b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/main.js new file mode 100644 index 000000000..3642696be --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/public/main.js @@ -0,0 +1,303 @@ +"use strict"; +let xSymbol = "X", oSymbol = "O"; +let header = document.querySelector("h1"); +let winner = "WINNER: "; +let player1 = "Player 1", player2 = "Player 2"; +let score = document.querySelector("#scorePl1").textContent; +let count = Number(score); +let score2 = document.querySelector("#scorePl2").textContent; +let count2 = Number(score2); +let tablePlayer1 = document.querySelector("#pl1"); +let tablePlayer2 = document.querySelector("#pl2"); +let playerName1 = document.querySelector("#input1"); +let playerName2 = document.querySelector("#input2"); +let btnPlayer1 = document.querySelector("#game"); +let btnPlayer2 = document.querySelector("#player2"); +//......writing name from input to table +btnPlayer1.addEventListener("click", (e) => { + click(); + document.querySelector("p").style.visibility = "hidden"; + document.querySelector("h2").style.visibility = "visible"; + document.querySelector("h3").style.visibility = "visible"; + document.querySelector("h1").style.visibility = "visible"; + document.querySelector(".scoreCss").style.visibility = "visible"; + e.preventDefault(); + if (playerName1.value != "" && playerName2.value != "") { + tablePlayer1.textContent = playerName1.value + " - (X) "; + tablePlayer2.textContent = playerName2.value + " - (O) "; + } + else { + tablePlayer1.textContent = "Player 1" + " - (X) "; + tablePlayer2.textContent = "Player 2" + " - (O) "; + } + document.getElementById("game").style.display = "none"; + document.getElementById("input1").style.display = "none"; + document.getElementById("input2").style.display = "none"; +}); +// btnPlayer2.addEventListener("click", (e) => { +// e.preventDefault() +// tablePlayer2.textContent = playerName2.value +// document.getElementById("player2")!.style.display = "none" +// document.getElementById("input2")!.style.display = "none" +// }) +let btns = document.getElementsByName("button"); +let btn1 = document.querySelector(".btn1"); +let btn2 = document.querySelector(".btn2"); +let btn3 = document.querySelector(".btn3"); +let btn4 = document.querySelector(".btn4"); +let btn5 = document.querySelector(".btn5"); +let btn6 = document.querySelector(".btn6"); +let btn7 = document.querySelector(".btn7"); +let btn8 = document.querySelector(".btn8"); +let btn9 = document.querySelector(".btn9"); +//...clicking on the buttons and writing x/o +function click() { + for (let i = 0; i < 9; i++) { + // let player1 = "Player 1", player2= "Player 2" + btns[i].addEventListener("click", () => { + if (btns[i].textContent != "") { + return; + } + if (header.textContent == player1) { + btns[i].textContent = xSymbol; + header.textContent = player2; + winnerChek(); + } + else if (header.textContent == player2) { + btns[i].textContent = oSymbol; + header.textContent = player1; + winnerChek(); + } + }); + } +} +// click() +//...checking the winner +function winnerChek() { + //......................btn1.................. + if (btn1.textContent != "" && btn1.textContent == btn2.textContent && btn1.textContent == btn3.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn1.textContent != "" && btn1.textContent == btn4.textContent && btn1.textContent == btn7.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn1.textContent != "" && btn1.textContent == btn5.textContent && btn1.textContent == btn9.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn2.................. + if (btn2.textContent != "" && btn2.textContent == btn1.textContent && btn2.textContent == btn3.textContent) { + nameOfWinner(); + return; + } + if (btn2.textContent != "" && btn2.textContent == btn5.textContent && btn2.textContent == btn8.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn3.................. + if (btn3.textContent != "" && btn3.textContent == btn2.textContent && btn3.textContent == btn1.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn3.textContent != "" && btn3.textContent == btn6.textContent && btn3.textContent == btn9.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn3.textContent != "" && btn3.textContent == btn5.textContent && btn3.textContent == btn7.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn4.................. + if (btn4.textContent != "" && btn4.textContent == btn1.textContent && btn4.textContent == btn7.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn4.textContent != "" && btn4.textContent == btn5.textContent && btn4.textContent == btn6.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn5.................. + if (btn5.textContent != "" && btn5.textContent == btn4.textContent && btn5.textContent == btn6.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn5.textContent != "" && btn5.textContent == btn2.textContent && btn5.textContent == btn8.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn5.textContent != "" && btn5.textContent == btn7.textContent && btn5.textContent == btn3.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn5.textContent != "" && btn5.textContent == btn1.textContent && btn5.textContent == btn9.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn6.................. + if (btn6.textContent != "" && btn6.textContent == btn3.textContent && btn6.textContent == btn9.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn6.textContent != "" && btn6.textContent == btn5.textContent && btn6.textContent == btn4.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn7.................. + if (btn7.textContent != "" && btn7.textContent == btn4.textContent && btn7.textContent == btn1.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn7.textContent != "" && btn7.textContent == btn8.textContent && btn7.textContent == btn9.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn7.textContent != "" && btn7.textContent == btn5.textContent && btn7.textContent == btn3.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn8.................. + if (btn8.textContent != "" && btn8.textContent == btn7.textContent && btn8.textContent == btn9.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn8.textContent != "" && btn8.textContent == btn5.textContent && btn8.textContent == btn2.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + //......................btn9.................. + if (btn9.textContent != "" && btn9.textContent == btn8.textContent && btn9.textContent == btn7.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn9.textContent != "" && btn9.textContent == btn6.textContent && btn9.textContent == btn3.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + if (btn9.textContent != "" && btn9.textContent == btn5.textContent && btn9.textContent == btn1.textContent) { + nameOfWinner(); + header.textContent = player1; + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + return; + } + tie(); +} +//.......Alert the winner +counter +function nameOfWinner() { + if (header.textContent == "Player 2") { + count += 1; + document.querySelector("#scorePl1").textContent = String(count); + alert(winner + tablePlayer1.textContent); + return; + } + if (header.textContent == "Player 1") { + count2 += 1; + document.querySelector("#scorePl2").textContent = String(count2); + alert(winner + tablePlayer2.textContent); + return; + } +} +function tie() { + if (btns[0].textContent != "" && btns[1].textContent != "" && btns[2].textContent != "" && btns[3].textContent != "" && btns[4].textContent != "" && btns[5].textContent != "" && btns[6].textContent != "" && btns[7].textContent != "" && btns[8].textContent != "") { + header.textContent = player1; + alert("tie"); + for (let i = 0; i < 9; i++) { + document.querySelectorAll(".btn")[i].textContent = ""; + } + } +} +let reset = document.querySelector(".reset"); +reset.addEventListener("click", () => { + window.location.reload(); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.css b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.css new file mode 100644 index 000000000..605e74c23 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.css @@ -0,0 +1,81 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: lightcoral; + background-repeat: no-repeat; + background-size: cover; + text-align: center; +} +body h1 { + padding-left: 20px; + text-align: center; + visibility: hidden; +} +body .scoreCss { + display: flex; + flex-wrap: nowrap; + justify-content: center; + text-align: center; +} + +h2 { + visibility: hidden; +} + +h3 { + visibility: hidden; +} + +.scoreCss { + visibility: hidden; +} + +#game { + margin-top: 5px; +} + +.allBtn { + margin-top: 50px; + display: flex; + flex-wrap: wrap; + width: 500px; +} +.allBtn button { + background-color: lightseagreen; + width: 33.3%; + height: 130px; + cursor: pointer; + border-style: inset 1px; + text-align: center; + border: inset 0.5px; + font-size: 100px; +} +.allBtn button:hover { + background-color: lightgreen; +} + +.centerContainer { + display: flex; + justify-content: center; +} + +table { + border-style: ridge; +} +table th { + border-color: black; + border-bottom: inset 1px black; +} +table #pl2 { + padding-left: 10px; +} +table td #scorePl1 { + border-right: inset 1px black; +} + +.reset { + padding-top: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.scss b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.scss new file mode 100644 index 000000000..648ec6d0b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.scss @@ -0,0 +1,106 @@ +*{ + margin: 0; + padding: 0; +} +body{ + background-color: lightcoral; + background-repeat: no-repeat; + background-size: cover; + // background-color: bisque; + text-align: center; + + + h1{ + // margin-top: 10px; + padding-left: 20px; + text-align: center; + visibility: hidden; + } + .scoreCss{ + display: flex; + flex-wrap: nowrap; + justify-content: center; + text-align: center; + + + + + } +} +h2{ + visibility: hidden; + + +} +h3{ + visibility: hidden; +} +.scoreCss{ + visibility: hidden; +} +// .enterName{ +// text-align: left; + +// } +// .butScor{ +// align-items: flex-start; +// display: flex; +// justify-content: space-evenly; + +// } +#game{ + margin-top: 5px; +} + +.allBtn{ + margin-top: 50px; + display: flex; + flex-wrap: wrap; + width: 500px; + + + button{ + background-color: lightseagreen; + width: 33.3%; + height: 130px; + cursor: pointer; + border-style:inset 1px; + text-align: center; + border: inset 0.5px; + font-size: 100px; + + } + button:hover{ + background-color: lightgreen; + } + +} +.centerContainer{ + display: flex; + justify-content: center; + +} +table{ + border-style: ridge; + + th{ + // border-style: groove; + border-color: black; + border-bottom: inset 1px black; + + } + #pl2{ + + padding-left: 10px; + } + td{ + #scorePl1{ + border-right: inset 1px black; + } + // border-style: dashed; + } +} +.reset{ + padding-top: 5px; + +} diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.ts b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.ts new file mode 100644 index 000000000..f3f237487 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/src/main.ts @@ -0,0 +1,403 @@ +let xSymbol = "X", oSymbol = "O" +let header = document.querySelector("h1")! +let winner = "WINNER: " +let player1 = "Player 1", player2= "Player 2" +let score = document.querySelector("#scorePl1")!.textContent +let count:number = Number(score) +let score2 =document.querySelector("#scorePl2")!.textContent +let count2:number = Number(score2) + + +let tablePlayer1 = document.querySelector("#pl1")! +let tablePlayer2 = document.querySelector("#pl2")! + + + +let playerName1 = document.querySelector("#input1")! as HTMLInputElement +let playerName2 = document.querySelector("#input2")! as HTMLInputElement + + +let btnPlayer1 = document.querySelector("#game")! +let btnPlayer2 = document.querySelector("#player2")! +//......writing name from input to table +btnPlayer1.addEventListener("click", (e) => { + click() + document.querySelector("p")!.style.visibility = "hidden" + document.querySelector("h2")!.style.visibility = "visible" + document.querySelector("h3")!.style.visibility = "visible" + document.querySelector("h1")!.style.visibility = "visible" + document.querySelector(".scoreCss")!.style.visibility = "visible" + e.preventDefault() + if(playerName1.value != "" && playerName2.value != ""){ + tablePlayer1.textContent = playerName1.value + " - (X) " + tablePlayer2.textContent = playerName2.value + " - (O) " + } + else{ + tablePlayer1.textContent = "Player 1" + " - (X) " + tablePlayer2.textContent = "Player 2" + " - (O) " + } + document.getElementById("game")!.style.display = "none" + document.getElementById("input1")!.style.display = "none" + document.getElementById("input2")!.style.display = "none" + +}) +// btnPlayer2.addEventListener("click", (e) => { +// e.preventDefault() +// tablePlayer2.textContent = playerName2.value +// document.getElementById("player2")!.style.display = "none" +// document.getElementById("input2")!.style.display = "none" + +// }) + + + +let btns = document.getElementsByName("button") +let btn1 = document.querySelector(".btn1")! +let btn2 = document.querySelector(".btn2")! +let btn3 = document.querySelector(".btn3")! +let btn4 = document.querySelector(".btn4")! +let btn5 = document.querySelector(".btn5")! +let btn6 = document.querySelector(".btn6")! +let btn7 = document.querySelector(".btn7")! +let btn8 = document.querySelector(".btn8")! +let btn9 = document.querySelector(".btn9")! + + + + + + +//...clicking on the buttons and writing x/o + +function click(){ + + + for(let i = 0; i < 9; i++ ){ + // let player1 = "Player 1", player2= "Player 2" + + + + btns[i].addEventListener("click", () => { + + + if(btns[i].textContent !=""){ + + + return + } + if(header.textContent == player1){ + + btns[i].textContent = xSymbol + header.textContent = player2 + winnerChek() + + } + else if (header.textContent == player2){ + + btns[i].textContent = oSymbol + header.textContent = player1 + winnerChek() + } + + + } + ) + } + + + } +// click() + +//...checking the winner + +function winnerChek(){ +//......................btn1.................. + + if(btn1.textContent !="" && btn1.textContent == btn2.textContent && btn1.textContent == btn3.textContent){ + + + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + + return + } + + if(btn1.textContent !="" && btn1.textContent == btn4.textContent && btn1.textContent == btn7.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + + return + } + if(btn1.textContent !="" && btn1.textContent == btn5.textContent && btn1.textContent == btn9.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + + return + } + +//......................btn2.................. +if(btn2.textContent !="" && btn2.textContent == btn1.textContent && btn2.textContent == btn3.textContent){ + nameOfWinner() + + + return +} + if(btn2.textContent !="" && btn2.textContent == btn5.textContent && btn2.textContent == btn8.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + + return + } + +//......................btn3.................. + + if(btn3.textContent !="" && btn3.textContent == btn2.textContent && btn3.textContent == btn1.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn3.textContent !="" && btn3.textContent == btn6.textContent && btn3.textContent == btn9.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn3.textContent !="" && btn3.textContent == btn5.textContent && btn3.textContent == btn7.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } +//......................btn4.................. + + if(btn4.textContent !="" && btn4.textContent == btn1.textContent && btn4.textContent == btn7.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn4.textContent !="" && btn4.textContent == btn5.textContent && btn4.textContent == btn6.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } +//......................btn5.................. + + if(btn5.textContent !="" && btn5.textContent == btn4.textContent && btn5.textContent == btn6.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn5.textContent !="" && btn5.textContent == btn2.textContent && btn5.textContent == btn8.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn5.textContent !="" && btn5.textContent == btn7.textContent && btn5.textContent == btn3.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn5.textContent !="" && btn5.textContent == btn1.textContent && btn5.textContent == btn9.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + +//......................btn6.................. + + if(btn6.textContent !="" && btn6.textContent == btn3.textContent && btn6.textContent == btn9.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn6.textContent !="" && btn6.textContent == btn5.textContent && btn6.textContent == btn4.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + +//......................btn7.................. + + if(btn7.textContent !="" && btn7.textContent == btn4.textContent && btn7.textContent == btn1.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + + if(btn7.textContent !="" && btn7.textContent == btn8.textContent && btn7.textContent == btn9.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn7.textContent !="" && btn7.textContent == btn5.textContent && btn7.textContent == btn3.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } +//......................btn8.................. + + if(btn8.textContent !="" && btn8.textContent == btn7.textContent && btn8.textContent == btn9.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn8.textContent !="" && btn8.textContent == btn5.textContent && btn8.textContent == btn2.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } +//......................btn9.................. + + if(btn9.textContent !="" && btn9.textContent == btn8.textContent && btn9.textContent == btn7.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn9.textContent !="" && btn9.textContent == btn6.textContent && btn9.textContent == btn3.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + if(btn9.textContent !="" && btn9.textContent == btn5.textContent && btn9.textContent == btn1.textContent){ + nameOfWinner() + header.textContent = player1 + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + } + + return + } + tie() + } + + + + +//.......Alert the winner +counter + function nameOfWinner(){ + if(header.textContent == "Player 2"){ + count +=1 + document.querySelector("#scorePl1")!.textContent = String(count) + alert(winner + tablePlayer1.textContent) + return + + + + } + if(header.textContent == "Player 1"){ + count2+=1 + document.querySelector("#scorePl2")!.textContent = String(count2) + alert(winner + tablePlayer2.textContent) + return + + } + + + } + +function tie(){ + if (btns[0].textContent != "" && btns[1].textContent != ""&& btns[2].textContent != ""&& btns[3].textContent != ""&& btns[4].textContent != ""&& btns[5].textContent != ""&& btns[6].textContent != ""&& btns[7].textContent != ""&& btns[8].textContent != ""){ + header.textContent = player1 + alert("tie") + for(let i = 0; i <9 ; i++){ + document.querySelectorAll(".btn")[i].textContent = "" + + } + + } +} + let reset = document.querySelector(".reset") + reset!.addEventListener("click", () => { + window. location. reload() + }) + + + + + diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/tsconfig.json b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/tsconfig.json new file mode 100644 index 000000000..79ae2226f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/XO/tsconfig.json @@ -0,0 +1,103 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + "rootDir": "./src/", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./public/", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/helpers.js new file mode 100644 index 000000000..8a5c2e1f4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/helpers.js @@ -0,0 +1,5 @@ +function getRandomImg() { + var random = Math.round(Math.random() * (0 - 8) + 8); + console.log(random); + return random; +} diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/index.js b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/index.js new file mode 100644 index 000000000..255112775 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/index.js @@ -0,0 +1 @@ +var chessImages = ["https://i.pinimg.com/564x/12/aa/f6/12aaf6bf05cd4376cc0f03db1b9e63b0.jpg", "https://i.pinimg.com/564x/d8/c9/be/d8c9beebaff0c1be6856da57ff4d8142.jpg", "https://i.pinimg.com/564x/13/b5/f1/13b5f1994f78fce82d8958166acaf38c.jpg", "https://i.pinimg.com/564x/89/26/58/892658acbc19c22f1c9ab5b84e8c810a.jpg", "https://i.pinimg.com/564x/3e/80/70/3e8070b2199eaf0cb19affbf5c1dfa14.jpg", "https://i.pinimg.com/736x/b7/9b/3d/b79b3d2711a5bc45ece1a8699ef87f39.jpg", "https://i.pinimg.com/564x/09/a0/34/09a03492d9676659d7c3cdaf9f2e0795.jpg", "https://i.pinimg.com/736x/42/b7/bd/42b7bd2770992c97d0ca60e214b365e9.jpg", "https://i.pinimg.com/564x/58/29/66/5829664ec2168bec15d573e6d344c14e.jpg"]; diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/style.css b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/style.css new file mode 100644 index 000000000..209290fe2 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/style.css @@ -0,0 +1,121 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100%; + height: 100%; + background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); +} + +.wrapper { + display: flex; + flex-wrap: nowrap; + justify-content: center; +} + +.box { + text-align: center; + color: black; + width: 100px; + height: 100px; + border: 1px inset black; + background-color: #0bf10e; + margin-top: 50px; +} + +h2 { + padding-top: 15px; + text-align: center; +} + +.resetBtn { + display: flex; + justify-content: center; + padding-top: 10px; +} + +.chessMainBox { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.chessBoxWrapper { + display: flex; + flex-wrap: wrap; + width: 500px; + gap: 5px; + text-align: center; +} +.chessBoxWrapper img { + width: 100%; + height: 100%; +} +.chessBoxWrapper .chessBox1 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; + margin-top: 25px; +} + +.chessBox2 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; + margin-top: 25px; +} + +.chessBox3 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; + margin-top: 25px; +} + +.chessBox4 { + flex-wrap: wrap; + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; +} + +.chessBox5 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; +} + +.chessBox6 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; +} + +.chessBox7 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; +} + +.chessBox8 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; +} + +.chessBox9 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: #c3f075; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/view.js b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/view.js new file mode 100644 index 000000000..c52d03c74 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/dist/view.js @@ -0,0 +1,82 @@ +var upBox = document.querySelector(".box"); +upBox.addEventListener("click", alertMsg); +function alertMsg() { + alert("You pressed me!"); +} +var chessBox1 = document.querySelector(".chessBox1"); +chessBox1.addEventListener("click", chessImg1, true); +function chessImg1() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox1.appendChild(chessImag); + chessBox1.removeEventListener("click", chessImg1, true); +} +var chessBox2 = document.querySelector(".chessBox2"); +chessBox2.addEventListener("click", chessImg2, true); +function chessImg2() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox2.appendChild(chessImag); + chessBox2.removeEventListener("click", chessImg2, true); +} +var chessBox3 = document.querySelector(".chessBox3"); +chessBox3.addEventListener("click", chessImg3, true); +function chessImg3() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox3.appendChild(chessImag); + chessBox3.removeEventListener("click", chessImg3, true); +} +var chessBox4 = document.querySelector(".chessBox4"); +chessBox4.addEventListener("click", chessImg4, true); +function chessImg4() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox4.appendChild(chessImag); + chessBox4.removeEventListener("click", chessImg4, true); +} +var chessBox5 = document.querySelector(".chessBox5"); +chessBox5.addEventListener("click", chessImg5, true); +function chessImg5() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox5.appendChild(chessImag); + chessBox5.removeEventListener("click", chessImg5, true); +} +var chessBox6 = document.querySelector(".chessBox6"); +chessBox6.addEventListener("click", chessImg6, true); +function chessImg6() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox6.appendChild(chessImag); + chessBox6.removeEventListener("click", chessImg6, true); +} +var chessBox7 = document.querySelector(".chessBox7"); +chessBox7.addEventListener("click", chessImg7, true); +function chessImg7() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox7.appendChild(chessImag); + chessBox7.removeEventListener("click", chessImg7, true); +} +var chessBox8 = document.querySelector(".chessBox8"); +chessBox8.addEventListener("click", chessImg8, true); +function chessImg8() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox8.appendChild(chessImag); + chessBox8.removeEventListener("click", chessImg8, true); +} +var chessBox9 = document.querySelector(".chessBox9"); +chessBox9.addEventListener("click", chessImg9, true); +function chessImg9() { + var chessImag = document.createElement("img"); + chessImag.src = chessImages[getRandomImg()]; + chessBox9.appendChild(chessImag); + chessBox9.removeEventListener("click", chessImg9, true); +} +var resetBtn = document.querySelector("#resetBtn"); +resetBtn === null || resetBtn === void 0 ? void 0 : resetBtn.addEventListener("click", resetBtnFunction); +function resetBtnFunction() { + location.reload(); +} diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/helpers.ts b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/helpers.ts new file mode 100644 index 000000000..6da254710 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/helpers.ts @@ -0,0 +1,7 @@ +function getRandomImg(){ + const random = Math.round(Math.random()* (0-8)+8) + console.log(random); + + return random +} + diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/index.html b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/index.html new file mode 100644 index 000000000..110dbe732 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + Document + + +
                +
                Press on me!
                +
                +

                Get random Knight (chess)

                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                +
                +
                + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/index.ts b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/index.ts new file mode 100644 index 000000000..63c60dc88 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/index.ts @@ -0,0 +1 @@ +const chessImages = ["https://i.pinimg.com/564x/12/aa/f6/12aaf6bf05cd4376cc0f03db1b9e63b0.jpg","https://i.pinimg.com/564x/d8/c9/be/d8c9beebaff0c1be6856da57ff4d8142.jpg","https://i.pinimg.com/564x/13/b5/f1/13b5f1994f78fce82d8958166acaf38c.jpg", "https://i.pinimg.com/564x/89/26/58/892658acbc19c22f1c9ab5b84e8c810a.jpg","https://i.pinimg.com/564x/3e/80/70/3e8070b2199eaf0cb19affbf5c1dfa14.jpg","https://i.pinimg.com/736x/b7/9b/3d/b79b3d2711a5bc45ece1a8699ef87f39.jpg","https://i.pinimg.com/564x/09/a0/34/09a03492d9676659d7c3cdaf9f2e0795.jpg","https://i.pinimg.com/736x/42/b7/bd/42b7bd2770992c97d0ca60e214b365e9.jpg","https://i.pinimg.com/564x/58/29/66/5829664ec2168bec15d573e6d344c14e.jpg" ] \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/style.css b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/style.css new file mode 100644 index 000000000..176e72077 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/style.css @@ -0,0 +1,121 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100%; + height: 100%; + background: linear-gradient(90deg, rgb(131, 58, 180) 0%, rgb(253, 29, 29) 50%, rgb(252, 176, 69) 100%); +} + +.wrapper { + display: flex; + flex-wrap: nowrap; + justify-content: center; +} + +.box { + text-align: center; + color: black; + width: 100px; + height: 100px; + border: 1px inset black; + background-color: rgb(11, 241, 14); + margin-top: 50px; +} + +h2 { + padding-top: 15px; + text-align: center; +} + +.resetBtn { + display: flex; + justify-content: center; + padding-top: 10px; +} + +.chessMainBox { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.chessBoxWrapper { + display: flex; + flex-wrap: wrap; + width: 500px; + gap: 5px; + text-align: center; +} +.chessBoxWrapper img { + width: 100%; + height: 100%; +} +.chessBoxWrapper .chessBox1 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); + margin-top: 25px; +} + +.chessBox2 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); + margin-top: 25px; +} + +.chessBox3 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); + margin-top: 25px; +} + +.chessBox4 { + flex-wrap: wrap; + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} + +.chessBox5 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} + +.chessBox6 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} + +.chessBox7 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} + +.chessBox8 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} + +.chessBox9 { + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/style.scss b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/style.scss new file mode 100644 index 000000000..845f52234 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/style.scss @@ -0,0 +1,115 @@ +*{ + margin: 0; + padding: 0; +} + +body { + width: 100%; + height: 100%; + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); + +} + +.wrapper{ + display: flex; + flex-wrap: nowrap; + justify-content: center; + +} +.box{ + + text-align: center; + color: black; + width: 100px; + height: 100px; + border: 1px inset black; + background-color: rgb(11, 241, 14); + margin-top: 50px; +} +h2{padding-top: 15px; + text-align: center; +} +.resetBtn{ + display: flex; + justify-content: center; + padding-top: 10px; +} +.chessMainBox{ + display: flex; + flex-wrap: wrap; + justify-content: center; + +} +.chessBoxWrapper{ + + display: flex; + flex-wrap:wrap; + width: 500px; + gap: 5px; + text-align: center; + img{ + width: 100%; + height: 100%; + +} + +.chessBox1{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); + margin-top: 25px; + } + +} +.chessBox2{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); + margin-top: 25px; +} +.chessBox3{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); + margin-top: 25px; +} +.chessBox4{ + flex-wrap: wrap; + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} +.chessBox5{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} +.chessBox6{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} +.chessBox7{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} +.chessBox8{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} +.chessBox9{ + width: 150px; + height: 150px; + border: 1px inset black; + background-color: rgb(195, 240, 117); +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/view.ts b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/view.ts new file mode 100644 index 000000000..68f258c69 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Maxim Rozenberg/boxes/view.ts @@ -0,0 +1,88 @@ +const upBox: any= document.querySelector(".box") + +upBox.addEventListener("click", alertMsg) + +function alertMsg(){ + alert("You pressed me!") +} + +const chessBox1: any = document.querySelector(".chessBox1") +chessBox1.addEventListener("click", chessImg1, true) +function chessImg1(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox1.appendChild(chessImag) + chessBox1.removeEventListener("click", chessImg1, true) +} + +const chessBox2: any = document.querySelector(".chessBox2") +chessBox2.addEventListener("click", chessImg2, true) +function chessImg2(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox2.appendChild(chessImag) + chessBox2.removeEventListener("click", chessImg2, true) +} + +const chessBox3: any = document.querySelector(".chessBox3") +chessBox3.addEventListener("click", chessImg3, true) +function chessImg3(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox3.appendChild(chessImag) + chessBox3.removeEventListener("click", chessImg3, true) +} +const chessBox4: any = document.querySelector(".chessBox4") +chessBox4.addEventListener("click", chessImg4, true) +function chessImg4(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox4.appendChild(chessImag) + chessBox4.removeEventListener("click", chessImg4, true) +} +const chessBox5: any = document.querySelector(".chessBox5") +chessBox5.addEventListener("click", chessImg5, true) +function chessImg5(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox5.appendChild(chessImag) + chessBox5.removeEventListener("click", chessImg5, true) +} +const chessBox6: any = document.querySelector(".chessBox6") +chessBox6.addEventListener("click", chessImg6, true) +function chessImg6(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox6.appendChild(chessImag) + chessBox6.removeEventListener("click", chessImg6, true) +} +const chessBox7: any = document.querySelector(".chessBox7") +chessBox7.addEventListener("click", chessImg7, true) +function chessImg7(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox7.appendChild(chessImag) + chessBox7.removeEventListener("click", chessImg7, true) +} +const chessBox8: any = document.querySelector(".chessBox8") +chessBox8.addEventListener("click", chessImg8, true) +function chessImg8(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox8.appendChild(chessImag) + chessBox8.removeEventListener("click", chessImg8, true) +} +const chessBox9: any = document.querySelector(".chessBox9") +chessBox9.addEventListener("click", chessImg9, true) +function chessImg9(){ + let chessImag = document.createElement("img") + chessImag.src = chessImages[getRandomImg()] + chessBox9.appendChild(chessImag) + chessBox9.removeEventListener("click", chessImg9, true) +} +const resetBtn = document.querySelector("#resetBtn") +resetBtn?.addEventListener("click", resetBtnFunction) + +function resetBtnFunction(){ + location.reload() +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/controller.js b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/controller.js new file mode 100644 index 000000000..97b2ba669 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/controller.js @@ -0,0 +1,7 @@ +var boxes = document.querySelectorAll('.box'); +boxes === null || boxes === void 0 ? void 0 : boxes.forEach(function (box) { + console.log("box"); + box === null || box === void 0 ? void 0 : box.addEventListener('click', function (e) { + box.style.backgroundColor = 'black'; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/model.js b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/model.js new file mode 100644 index 000000000..5cc0888aa --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/model.js @@ -0,0 +1,7 @@ +var boxesDivs = ""; +for (var i = 0; i < 9; i++) { + boxesDivs += "
                "; +} +if (boxContainer) { + boxContainer.innerHTML = boxesDivs; +} diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/view.js b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/view.js new file mode 100644 index 000000000..8dd986675 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/scripts/view.js @@ -0,0 +1,3 @@ +var boxes = document.querySelectorAll('.box'); +console.log(boxes); +var boxContainer = document.querySelector('.boxContainer'); diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/styles/style.css b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..684ebf221 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,17 @@ +.boxContainer { + display: grid; + grid-template-columns: repeat(3, 200px); + width: 600px; + height: 600px; + gap: 10px; + justify-content: center; + align-items: center; +} + +.box { + width: 200px; + height: 200px; + background-color: lightblue; + border: 1px solid black; + font-size: 35px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/controller.ts b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/controller.ts new file mode 100644 index 000000000..3222d947f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/controller.ts @@ -0,0 +1,7 @@ +const boxes:any = document.querySelectorAll('.box'); +boxes?.forEach(box => { + console.log("box") + box?.addEventListener('click', (e) => { + box.style.backgroundColor = 'black' + }) +}); \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..f6883c897 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,18 @@ + + + + + + + + Document + + +
                +
                + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/model.ts b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/model.ts new file mode 100644 index 000000000..2c61775ff --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/model.ts @@ -0,0 +1,8 @@ +let boxesDivs = ""; +for (let i = 0; i < 9; i++) { + boxesDivs += "
                "; +} + +if (boxContainer) { + boxContainer.innerHTML = boxesDivs; +} diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/style.css b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/style.css new file mode 100644 index 000000000..684ebf221 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/style.css @@ -0,0 +1,17 @@ +.boxContainer { + display: grid; + grid-template-columns: repeat(3, 200px); + width: 600px; + height: 600px; + gap: 10px; + justify-content: center; + align-items: center; +} + +.box { + width: 200px; + height: 200px; + background-color: lightblue; + border: 1px solid black; + font-size: 35px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/style.scss b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..be17adaeb --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/style.scss @@ -0,0 +1,17 @@ +.boxContainer { + display: grid; + grid-template-columns: repeat(3,200px); + width: 600px; + height: 600px; + gap: 10px; + justify-content: center; + align-items: center; + +} +.box { + width: 200px; + height: 200px; + background-color: lightblue; + border: 1px solid black; + font-size: 35px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/view.ts b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/view.ts new file mode 100644 index 000000000..2583f6325 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Nikita Rossenko/src/view.ts @@ -0,0 +1,3 @@ +const boxes:any = document.querySelectorAll('.box'); +console.log(boxes) +const boxContainer:HTMLDivElement | null = document.querySelector('.boxContainer'); \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/1_mIjIjWIUc45MQjLDVkOC-w.png b/02-TypeScript/14-events/home-puzzles/Omer.Vir/1_mIjIjWIUc45MQjLDVkOC-w.png new file mode 100644 index 000000000..50410b53f Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Omer.Vir/1_mIjIjWIUc45MQjLDVkOC-w.png differ diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/control.ts b/02-TypeScript/14-events/home-puzzles/Omer.Vir/control.ts new file mode 100644 index 000000000..6aedb8e4c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/control.ts @@ -0,0 +1,57 @@ +let change = -1; +let counter = 0; +let game = false; + +for (let i = 0; i < boxes.length; i++) { + if(mat[i] < 0) { + const box = boxes[i]; + box.addEventListener("click", () => { + const x = document.createElement("i"); + x.className = "fa-solid fa-x fa-2xl"; + const o = document.createElement("i"); + o.className = "fa-regular fa-circle fa-2xl"; + if (change == -1) { + box.append(x); + change *= -1; + mat[i] = 1; + } else { + box.append(o); + change *= -1; + mat[i] = 0; + } + box.style.pointerEvents = "none"; + box.classList.remove("hover"); + counter++; + if(mat[0] == 0 && mat[1] == 0 && mat[2] == 0 || mat[3] == 0 && mat[4] == 0 && mat[5] == 0 || mat[6] == 0 && mat[7] == 0 && mat[8] == 0 || mat[0] == 0 && mat[4] == 0 && mat[8] == 0 || mat[2] == 0 && mat[4] == 0 && mat[6] == 0 || mat[0] == 0 && mat[3] == 0 && mat[6] == 0 || mat[1] == 0 && mat[4] == 0 && mat[7] == 0 || mat[2] == 0 && mat[5] == 0 && mat[8] == 0) { + alert("O won!") + stopGame(); + } + if(mat[0] == 1 && mat[1] == 1 && mat[2] == 1 || mat[3] == 1 && mat[4] == 1 && mat[5] == 1 || mat[6] == 1 && mat[7] == 1 && mat[8] == 1 || mat[0] == 1 && mat[4] == 1 && mat[8] == 1 || mat[2] == 1 && mat[4] == 1 && mat[6] == 1 || mat[0] == 1 && mat[3] == 1 && mat[6] == 1 || mat[1] == 1 && mat[4] == 1 && mat[7] == 1 || mat[2] == 1 && mat[5] == 1 && mat[8] == 1) { + alert("X won!") + stopGame(); + } + if(isEndGame() && counter == 9 && !game) { + alert("Tie game...") + } + }) + } +} +function isEndGame():Boolean { + for(let i = 0; i < mat.length; i++) { + if(mat[i] < 0) + return false; + } + return true; +} + +function stopGame() { + for(let j = 0 ;j < boxes.length; j++) { + const box = boxes[j]; + box.style.pointerEvents = "none"; + box.classList.remove("hover"); + } + game = true; +} + + + diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/control.js b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/control.js new file mode 100644 index 000000000..f5f27384c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/control.js @@ -0,0 +1,56 @@ +var change = -1; +var counter = 0; +var game = false; +var _loop_1 = function (i) { + if (mat[i] < 0) { + var box_1 = boxes[i]; + box_1.addEventListener("click", function () { + var x = document.createElement("i"); + x.className = "fa-solid fa-x fa-2xl"; + var o = document.createElement("i"); + o.className = "fa-regular fa-circle fa-2xl"; + if (change == -1) { + box_1.append(x); + change *= -1; + mat[i] = 1; + } + else { + box_1.append(o); + change *= -1; + mat[i] = 0; + } + box_1.style.pointerEvents = "none"; + box_1.classList.remove("hover"); + counter++; + if (mat[0] == 0 && mat[1] == 0 && mat[2] == 0 || mat[3] == 0 && mat[4] == 0 && mat[5] == 0 || mat[6] == 0 && mat[7] == 0 && mat[8] == 0 || mat[0] == 0 && mat[4] == 0 && mat[8] == 0 || mat[2] == 0 && mat[4] == 0 && mat[6] == 0 || mat[0] == 0 && mat[3] == 0 && mat[6] == 0 || mat[1] == 0 && mat[4] == 0 && mat[7] == 0 || mat[2] == 0 && mat[5] == 0 && mat[8] == 0) { + alert("O won!"); + stopGame(); + } + if (mat[0] == 1 && mat[1] == 1 && mat[2] == 1 || mat[3] == 1 && mat[4] == 1 && mat[5] == 1 || mat[6] == 1 && mat[7] == 1 && mat[8] == 1 || mat[0] == 1 && mat[4] == 1 && mat[8] == 1 || mat[2] == 1 && mat[4] == 1 && mat[6] == 1 || mat[0] == 1 && mat[3] == 1 && mat[6] == 1 || mat[1] == 1 && mat[4] == 1 && mat[7] == 1 || mat[2] == 1 && mat[5] == 1 && mat[8] == 1) { + alert("X won!"); + stopGame(); + } + if (isEndGame() && counter == 9 && !game) { + alert("Tie game..."); + } + }); + } +}; +for (var i = 0; i < boxes.length; i++) { + _loop_1(i); +} +function isEndGame() { + for (var i = 0; i < mat.length; i++) { + if (mat[i] < 0) + return false; + } + return true; +} +function stopGame() { + for (var j = 0; j < boxes.length; j++) { + var box = boxes[j]; + box.style.pointerEvents = "none"; + box.classList.remove("hover"); + } + game = true; +} diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/index.js b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/models.js b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/models.js new file mode 100644 index 000000000..e1398c521 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/models.js @@ -0,0 +1 @@ +var mat = [-1, -2, -3, -4, -5, -6, -7, -8, -9]; diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/style.css b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/style.css new file mode 100644 index 000000000..09c76b969 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/style.css @@ -0,0 +1,35 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.wraper { + display: flex; + flex-wrap: wrap; + width: 400px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.wraper__h1 { + position: absolute; + top: -25px; + left: 50%; + transform: translate(-50%); + font-size: 1.3rem; + font-weight: bold; +} +.wraper__box { + display: grid; + place-items: center; + flex-basis: 33%; + width: 20px; + aspect-ratio: 1/1; + border: 2px black solid; +} + +.hover:hover { + background-color: #bdbcbc; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/view.js b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/view.js new file mode 100644 index 000000000..e82041695 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/dist/view.js @@ -0,0 +1,10 @@ +var box1 = document.getElementById("box1"); +var box2 = document.getElementById("box2"); +var box3 = document.getElementById("box3"); +var box4 = document.getElementById("box4"); +var box5 = document.getElementById("box5"); +var box6 = document.getElementById("box6"); +var box7 = document.getElementById("box7"); +var box8 = document.getElementById("box8"); +var box9 = document.getElementById("box9"); +var boxes = document.querySelectorAll(".wraper__box"); diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/index.html b/02-TypeScript/14-events/home-puzzles/Omer.Vir/index.html new file mode 100644 index 000000000..64e778f44 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/index.html @@ -0,0 +1,29 @@ + + + + + + + Tic Tac Toe + + + + + + + + +
                + Tic Tac Toe +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/models.ts b/02-TypeScript/14-events/home-puzzles/Omer.Vir/models.ts new file mode 100644 index 000000000..f13471506 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/models.ts @@ -0,0 +1,2 @@ +let mat = [-1,-2,-3,-4,-5,-6,-7,-8,-9]; + diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/style.css b/02-TypeScript/14-events/home-puzzles/Omer.Vir/style.css new file mode 100644 index 000000000..7c5ed2b5d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/style.css @@ -0,0 +1,35 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.wraper { + display: flex; + flex-wrap: wrap; + width: 400px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.wraper__h1 { + position: absolute; + top: -25px; + left: 50%; + transform: translate(-50%); + font-size: 1.3rem; + font-weight: bold; +} +.wraper__box { + display: grid; + place-items: center; + flex-basis: 33%; + width: 20px; + aspect-ratio: 1/1; + border: 2px black solid; +} + +.hover:hover { + background-color: rgb(189, 188, 188); +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/style.scss b/02-TypeScript/14-events/home-puzzles/Omer.Vir/style.scss new file mode 100644 index 000000000..4e3e48bc6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/style.scss @@ -0,0 +1,36 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.wraper { + &__h1 { + position: absolute; + top: -25px; + left: 50%; + transform: translate(-50%); + font-size: 1.3rem; + font-weight: bold; + } + display: flex; + flex-wrap: wrap; + width: 400px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + &__box { + display: grid; + place-items: center; + flex-basis: 33%; + width: 20px; + aspect-ratio: 1/1; + border: 2px black solid; + } +} + +.hover:hover { + background-color: rgb(189, 188, 188); +} diff --git a/02-TypeScript/14-events/home-puzzles/Omer.Vir/view.ts b/02-TypeScript/14-events/home-puzzles/Omer.Vir/view.ts new file mode 100644 index 000000000..268886491 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Omer.Vir/view.ts @@ -0,0 +1,10 @@ +const box1 = document.getElementById("box1"); +const box2 = document.getElementById("box2"); +const box3 = document.getElementById("box3"); +const box4 = document.getElementById("box4"); +const box5 = document.getElementById("box5"); +const box6 = document.getElementById("box6"); +const box7 = document.getElementById("box7"); +const box8 = document.getElementById("box8"); +const box9 = document.getElementById("box9"); +const boxes:any = document.querySelectorAll(".wraper__box"); diff --git a/02-TypeScript/14-events/home-puzzles/Orel/control.ts b/02-TypeScript/14-events/home-puzzles/Orel/control.ts new file mode 100644 index 000000000..e0b9b4cd4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/control.ts @@ -0,0 +1,123 @@ +const boardGame = document.getElementById("boardGame")! +const boardGameChild = boardGame.querySelectorAll("input")! +const scorePlayer1 = document.querySelector(".score-player1")! as HTMLSpanElement +const scorePlayer2 = document.querySelector(".score-player2")! as HTMLSpanElement + +let turn = true; +let score1 = 0, score2 = 0 + +function resetBoard() { + const boardGame = document.getElementById("boardGame")! + const boardGameChild = boardGame.querySelectorAll("input")! + for (let i = 0; i < 9; i++) { + boardGameChild[i].value = '' + } +} + +function resetGame() { + resetBoard() + score1 = 0; score2 = 0 + turn = true; +} + +function gamesRules() { + const boardGameChild = boardGame.querySelectorAll("input")! + scorePlayer2.style.backgroundColor = "rgb(177, 190, 196)" + scorePlayer1.style.backgroundColor = "green" + boardGameChild.forEach((ceil) => { + ceil.addEventListener('click', () => { + if (ceil.value === "") { + if (turn === true) { + player1Sound.play() + ceil.value! = "x"; + scorePlayer1!.style.backgroundColor = "" + scorePlayer2!.style.backgroundColor = "green" + turn = false + } else if (turn === false) { + player2Sound.play() + ceil.value! = "o"; + scorePlayer2.style.backgroundColor = "" + scorePlayer1.style.backgroundColor = "green" + turn = true + } + else { + return + } + winOrNot(opinionToWin) + } else { + return + } + }) + }) +} + +function winOrNot(opinionToWin: number[][]) { + for (let i = 0; i < opinionToWin.length; i++) { + if ( + boardGameChild[opinionToWin[i][0]].value === "x" && + boardGameChild[opinionToWin[i][1]].value === "x" && + boardGameChild[opinionToWin[i][2]].value === "x" + ) { + winGame(1) + } else if ( + boardGameChild[opinionToWin[i][0]].value === "o" && + boardGameChild[opinionToWin[i][1]].value === "o" && + boardGameChild[opinionToWin[i][2]].value === "o" + ) { + winGame(2) + } + } +} + +function winGame(playerWin: number) { + const fireWorks = document.getElementById("fireWorks")! as HTMLDivElement + const playerWinsH1 = document.getElementById("playerWinsH1")! as HTMLSpanElement + const scorePlayer1score = document.getElementById("player1Score")! as HTMLSpanElement + const scorePlayer2score = document.getElementById("player2Score")! as HTMLSpanElement + if (playerWin === 1) { + score1++ + scorePlayer1score.textContent = score1.toString() + fireWorks.style.display = "flex" + playerWinsH1.textContent = "player 1" + } else + if (playerWin === 2) { + score2++ + scorePlayer2score.textContent = score2.toString(); + fireWorks.style.display = "flex" + playerWinsH1.textContent = "player 2" + + } + gameOver.play() + + setTimeout(() => { + fireWorks.style.display = "none" + resetBoard() + turn = true + scorePlayer2.style.backgroundColor = "rgb(177, 190, 196)" + scorePlayer1.style.backgroundColor = "green" + + }, 2500); + + + +} + +function resetScore() { + const resetBtnScore = document.querySelector(".btn-reset-score")! as HTMLButtonElement + const scorePlayer1score = document.getElementById("player1Score")! as HTMLSpanElement + const scorePlayer2score = document.getElementById("player2Score")! as HTMLSpanElement + + resetBtnScore.addEventListener('click', () => { + score1 = 0 + score2 = 0 + + scorePlayer1score.textContent = score1.toString() + scorePlayer2score.textContent = score2.toString() + + }) +} + +function resetButton() { + const resetBtn = document.querySelector('.btn-reset')! as HTMLButtonElement + resetBtn.addEventListener('click', resetGame) +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Orel/dist/control.js b/02-TypeScript/14-events/home-puzzles/Orel/dist/control.js new file mode 100644 index 000000000..dada11fe7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/dist/control.js @@ -0,0 +1,107 @@ +"use strict"; +const boardGame = document.getElementById("boardGame"); +const boardGameChild = boardGame.querySelectorAll("input"); +const scorePlayer1 = document.querySelector(".score-player1"); +const scorePlayer2 = document.querySelector(".score-player2"); +let turn = true; +let score1 = 0, score2 = 0; +function resetBoard() { + const boardGame = document.getElementById("boardGame"); + const boardGameChild = boardGame.querySelectorAll("input"); + for (let i = 0; i < 9; i++) { + boardGameChild[i].value = ''; + } +} +function resetGame() { + resetBoard(); + score1 = 0; + score2 = 0; + turn = true; +} +function gamesRules() { + const boardGameChild = boardGame.querySelectorAll("input"); + scorePlayer2.style.backgroundColor = "rgb(177, 190, 196)"; + scorePlayer1.style.backgroundColor = "green"; + boardGameChild.forEach((ceil) => { + ceil.addEventListener('click', () => { + if (ceil.value === "") { + if (turn === true) { + player1Sound.play(); + ceil.value = "x"; + scorePlayer1.style.backgroundColor = ""; + scorePlayer2.style.backgroundColor = "green"; + turn = false; + } + else if (turn === false) { + player2Sound.play(); + ceil.value = "o"; + scorePlayer2.style.backgroundColor = ""; + scorePlayer1.style.backgroundColor = "green"; + turn = true; + } + else { + return; + } + winOrNot(opinionToWin); + } + else { + return; + } + }); + }); +} +function winOrNot(opinionToWin) { + for (let i = 0; i < opinionToWin.length; i++) { + if (boardGameChild[opinionToWin[i][0]].value === "x" && + boardGameChild[opinionToWin[i][1]].value === "x" && + boardGameChild[opinionToWin[i][2]].value === "x") { + winGame(1); + } + else if (boardGameChild[opinionToWin[i][0]].value === "o" && + boardGameChild[opinionToWin[i][1]].value === "o" && + boardGameChild[opinionToWin[i][2]].value === "o") { + winGame(2); + } + } +} +function winGame(playerWin) { + const fireWorks = document.getElementById("fireWorks"); + const playerWinsH1 = document.getElementById("playerWinsH1"); + const scorePlayer1score = document.getElementById("player1Score"); + const scorePlayer2score = document.getElementById("player2Score"); + if (playerWin === 1) { + score1++; + scorePlayer1score.textContent = score1.toString(); + fireWorks.style.display = "flex"; + playerWinsH1.textContent = "player 1"; + } + else if (playerWin === 2) { + score2++; + scorePlayer2score.textContent = score2.toString(); + fireWorks.style.display = "flex"; + playerWinsH1.textContent = "player 2"; + } + gameOver.play(); + setTimeout(() => { + fireWorks.style.display = "none"; + resetBoard(); + turn = true; + scorePlayer2.style.backgroundColor = "rgb(177, 190, 196)"; + scorePlayer1.style.backgroundColor = "green"; + }, 2500); +} +function resetScore() { + const resetBtnScore = document.querySelector(".btn-reset-score"); + const scorePlayer1score = document.getElementById("player1Score"); + const scorePlayer2score = document.getElementById("player2Score"); + resetBtnScore.addEventListener('click', () => { + score1 = 0; + score2 = 0; + scorePlayer1score.textContent = score1.toString(); + scorePlayer2score.textContent = score2.toString(); + }); +} +function resetButton() { + const resetBtn = document.querySelector('.btn-reset'); + resetBtn.addEventListener('click', resetGame); +} diff --git a/02-TypeScript/14-events/home-puzzles/Orel/dist/helper.js b/02-TypeScript/14-events/home-puzzles/Orel/dist/helper.js new file mode 100644 index 000000000..60d1da543 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/dist/helper.js @@ -0,0 +1,13 @@ +"use strict"; +const opinionToWin = [ + [0, 1, 2], [3, 4, 5], + [6, 7, 8], [0, 3, 6], + [1, 4, 7], [2, 5, 8], + [2, 4, 6], [0, 4, 8] +]; +const player1Sound = new Audio(); +player1Sound.src = "./sound/player1.mp3"; +const player2Sound = new Audio(); +player2Sound.src = "./sound/player2.mp3"; +const gameOver = new Audio(); +gameOver.src = "./sound/gameOver.mp3"; diff --git a/02-TypeScript/14-events/home-puzzles/Orel/dist/index.js b/02-TypeScript/14-events/home-puzzles/Orel/dist/index.js new file mode 100644 index 000000000..883854665 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/dist/index.js @@ -0,0 +1,12 @@ +"use strict"; +function startGame() { + btnStart.addEventListener('click', () => { + gameStart.style.display = "none"; + resetGame(); + gamesRules(); + resetButton(); + resetScore(); + }); +} +// getNameFromPlayers() +startGame(); diff --git a/02-TypeScript/14-events/home-puzzles/Orel/dist/style.css b/02-TypeScript/14-events/home-puzzles/Orel/dist/style.css new file mode 100644 index 000000000..c8e5c33cb --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/dist/style.css @@ -0,0 +1,168 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: "Anton", sans-serif; + color: rgba(255, 255, 255, 0.849); + overflow-x: hidden; +} + +section.container { + width: 100vw; + min-height: 100vh; + background: url(./imgs/background.jpg); + background-size: cover; + background-repeat: no-repeat; + text-align: center; + padding: 16px 32px; +} +section.container header { + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; +} +section.container header .score-player { + display: flex; + width: 250px; + margin-right: 2px; + justify-content: space-around; +} +section.container header .score-player .score-player1, +section.container header .score-player .score-player2 { + color: black; + background-color: #b1bec4; + font-size: 1.1rem; + border: 2px solid black; + padding: 8px; +} +section.container header button.btn-reset { + font-family: initial; + font-size: 1rem; + font-weight: 700; + color: #0c0808; + width: 115px; + height: 70px; + border-radius: 25px; + background-color: rgba(240, 255, 255, 0.644); + outline: none; + cursor: pointer; +} +section.container div.board-game { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + text-align: center; + margin: 25px auto; + width: 450px; + height: 450px; + background-color: rgba(240, 248, 255, 0.747); + color: black; +} +section.container div.board-game input { + cursor: pointer; + font-size: 5rem; + background: linear-gradient(#794d5b33, #753a88); + display: grid; + place-items: center; + border: 2px solid black; +} +section.container div.board-game input:hover { + background: linear-gradient(#1a141673, #743a8856); + border: 3px solid rgba(0, 0, 0, 0.432); +} + +section.starting-game { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + padding: 16px 32px; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: calc(100% + 50px); + background-color: rgba(54, 54, 80, 0.918); +} +section.starting-game h1 { + color: #fff; + font-size: 3rem; +} +section.starting-game button { + font-weight: bold; + cursor: pointer; + margin-top: 15px; + padding: 16px 32px; + font-size: 1.5rem; + border-radius: 10px; + background-color: #85c4c4; + transition: 0.1s ease; +} +section.starting-game button:hover { + background-color: #317474; +} +section.starting-game button:active { + transform: scale(1.1); +} +section.starting-game .form-player-name input { + display: none; + padding: 5px; + width: 250px; + font-size: 1.5rem; +} +section.starting-game ::placeholder { + font-size: 1.5rem; +} + +.btn-reset-score { + font-family: initial; + font-size: 1.2rem; + font-weight: 700; + color: #0c0808; + width: 115px; + height: 50px; + border-radius: 25px; + background-color: rgba(24, 102, 102, 0.877); + outline: none; + cursor: pointer; +} + +.fireworks { + display: none; + grid-template-columns: repeat(3), 1fr; + width: 400px; + text-align: center; + justify-content: center; + align-items: center; + height: 400px; + border-radius: 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.fireworks h1#playerWinsH1 { + color: #5900ff; + letter-spacing: 2px; + background-color: rgba(248, 248, 248, 0.726); + box-shadow: inset 1px 1px 2px 1px black; + font-weight: 700; + padding: 15px; + font-size: 4rem; +} +.fireworks h1.wins { + color: rgba(250, 248, 239, 0.918); + letter-spacing: 2px; + font-weight: 700; + font-size: 3rem; + background-color: rgba(0, 0, 139, 0.836); +} +.fireworks img { + width: 200px; + height: 200px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Orel/dist/view.js b/02-TypeScript/14-events/home-puzzles/Orel/dist/view.js new file mode 100644 index 000000000..930972de9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/dist/view.js @@ -0,0 +1,16 @@ +"use strict"; +const btnStart = document.getElementById("btnStart"); +const gameStart = document.getElementById("startGameContainer"); +const player1Name = document.getElementById("player1Name"); +const player2Name = document.getElementById("player2Name"); +const formPlayerName = document.getElementById("formPlayerName"); +// function getNameFromPlayers() :void{ +// btnStart!.addEventListener("click", (e: Event) => { +// if (player1Name.value === "" || player2Name.value === "") { +// console.log("no fill names"); +// } else { +// scorePlayer1.innerHTML = `${player1Name.value} :
                0` +// scorePlayer2.innerHTML = `${player2Name.value} :
                0` +// } +// }) +// } diff --git a/02-TypeScript/14-events/home-puzzles/Orel/helper.ts b/02-TypeScript/14-events/home-puzzles/Orel/helper.ts new file mode 100644 index 000000000..5772775f3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/helper.ts @@ -0,0 +1,13 @@ +const opinionToWin = [ + [0, 1, 2], [3, 4, 5], + [6, 7, 8], [0, 3, 6], + [1, 4, 7], [2, 5, 8], + [2, 4, 6], [0, 4, 8] +]; + +const player1Sound = new Audio(); +player1Sound.src = "./sound/player1.mp3" +const player2Sound = new Audio(); +player2Sound.src = "./sound/player2.mp3" +const gameOver = new Audio(); +gameOver.src = "./sound/gameOver.mp3" diff --git a/02-TypeScript/14-events/home-puzzles/Orel/imgs/LDPlayer9_ens_com.mobile.legends_35339114_ld.exe b/02-TypeScript/14-events/home-puzzles/Orel/imgs/LDPlayer9_ens_com.mobile.legends_35339114_ld.exe new file mode 100644 index 000000000..c1fe7fc11 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/imgs/LDPlayer9_ens_com.mobile.legends_35339114_ld.exe differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/imgs/background.jpg b/02-TypeScript/14-events/home-puzzles/Orel/imgs/background.jpg new file mode 100644 index 000000000..1fdf51809 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/imgs/background.jpg differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/imgs/fireworks.gif b/02-TypeScript/14-events/home-puzzles/Orel/imgs/fireworks.gif new file mode 100644 index 000000000..a1bf59469 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/imgs/fireworks.gif differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/imgs/winzip27-p003.exe b/02-TypeScript/14-events/home-puzzles/Orel/imgs/winzip27-p003.exe new file mode 100644 index 000000000..5ebcb2566 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/imgs/winzip27-p003.exe differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/index.html b/02-TypeScript/14-events/home-puzzles/Orel/index.html new file mode 100644 index 000000000..33f442012 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/index.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + tic-tac Game + + +
                +
                +

                Tic Tac Game

                +
                +
                Player1
                0
                +
                Player2
                0
                +
                + +
                + +
                + + + + + + + + + +
                + + + +
                + +
                +

                Player 2

                +

                Wins !

                +
                + +
                +
                + +
                +

                Welcome to Tic Tac Game

                + + +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Orel/index.ts b/02-TypeScript/14-events/home-puzzles/Orel/index.ts new file mode 100644 index 000000000..4d16a298f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/index.ts @@ -0,0 +1,12 @@ +function startGame() { + btnStart!.addEventListener('click', () => { + gameStart.style.display = "none" + resetGame() + gamesRules() + resetButton() + resetScore() + }) +} + +// getNameFromPlayers() +startGame() diff --git a/02-TypeScript/14-events/home-puzzles/Orel/sound/gameOver.mp3 b/02-TypeScript/14-events/home-puzzles/Orel/sound/gameOver.mp3 new file mode 100644 index 000000000..414bf6514 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/sound/gameOver.mp3 differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/sound/player1.mp3 b/02-TypeScript/14-events/home-puzzles/Orel/sound/player1.mp3 new file mode 100644 index 000000000..03533a07a Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/sound/player1.mp3 differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/sound/player2.mp3 b/02-TypeScript/14-events/home-puzzles/Orel/sound/player2.mp3 new file mode 100644 index 000000000..4d3d245db Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Orel/sound/player2.mp3 differ diff --git a/02-TypeScript/14-events/home-puzzles/Orel/style.css b/02-TypeScript/14-events/home-puzzles/Orel/style.css new file mode 100644 index 000000000..5f29342df --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/style.css @@ -0,0 +1,174 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: "Anton", sans-serif; + color: rgba(255, 255, 255, 0.849); + overflow-x: hidden; +} + +section.container { + width: 100vw; + min-height: 100vh; + background: url(./imgs/background.jpg); + background-size: cover; + background-repeat: no-repeat; + text-align: center; + padding: 16px 32px; +} +section.container header { + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; +} +section.container header .score-player { + display: flex; + width: 250px; + margin-right: 2px; + justify-content: space-around; +} +section.container header .score-player .score-player1, +section.container header .score-player .score-player2 { + color: black; + background-color: rgb(177, 190, 196); + font-size: 1.1rem; + border: 2px solid black; + padding: 8px; +} +section.container header button.btn-reset { + font-family: initial; + font-size: 1rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 70px; + border-radius: 25px; + background-color: rgba(240, 255, 255, 0.644); + outline: none; + cursor: pointer; +} +section.container div.board-game { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + text-align: center; + margin: 25px auto; + width: 450px; + height: 450px; + background-color: rgba(240, 248, 255, 0.747); + color: black; +} +section.container div.board-game input { + cursor: pointer; + font-size: 5rem; + background: linear-gradient(rgba(121, 77, 91, 0.2), #753a88); + display: grid; + place-items: center; + border: 2px solid black; +} +section.container div.board-game input:hover { + background: linear-gradient(rgba(26, 20, 22, 0.4509803922), rgba(116, 58, 136, 0.337254902)); + border: 3px solid rgba(0, 0, 0, 0.432); +} + +section.starting-game { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + padding: 16px 32px; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: calc(100% + 50px); + background-color: rgba(54, 54, 80, 0.918); +} +section.starting-game h1 { + color: #fff; + font-size: 3rem; +} +section.starting-game button { + font-weight: bold; + cursor: pointer; + margin-top: 15px; + padding: 16px 32px; + font-size: 1.5rem; + border-radius: 10px; + background-color: rgb(133, 196, 196); + transition: 0.1s ease; +} +section.starting-game button:hover { + background-color: rgb(49, 116, 116); +} +section.starting-game button:active { + transform: scale(1.1); +} +section.starting-game .form-player-name input { + display: none; + padding: 5px; + width: 250px; + font-size: 1.5rem; +} +section.starting-game ::-moz-placeholder { + font-size: 1.5rem; +} +section.starting-game :-ms-input-placeholder { + font-size: 1.5rem; +} +section.starting-game ::placeholder { + font-size: 1.5rem; +} + +.btn-reset-score { + font-family: initial; + font-size: 1.2rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 50px; + border-radius: 25px; + background-color: rgba(24, 102, 102, 0.877); + outline: none; + cursor: pointer; +} + +.fireworks { + display: none; + grid-template-columns: repeat(3), 1fr; + width: 400px; + text-align: center; + justify-content: center; + align-items: center; + height: 400px; + border-radius: 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.fireworks h1#playerWinsH1 { + color: rgb(89, 0, 255); + letter-spacing: 2px; + background-color: rgba(248, 248, 248, 0.726); + box-shadow: inset 1px 1px 2px 1px black; + font-weight: 700; + padding: 15px; + font-size: 4rem; +} +.fireworks h1.wins { + color: rgba(250, 248, 239, 0.918); + letter-spacing: 2px; + font-weight: 700; + font-size: 3rem; + background-color: rgba(0, 0, 139, 0.836); +} +.fireworks img { + width: 200px; + height: 200px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Orel/style.scss b/02-TypeScript/14-events/home-puzzles/Orel/style.scss new file mode 100644 index 000000000..326719e55 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/style.scss @@ -0,0 +1,190 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + +} + +body { + font-family: 'Anton', sans-serif; + color: rgba(255, 255, 255, 0.849); + overflow-x: hidden; +} + +section.container { + width: 100vw; + min-height: 100vh; + background: url(./imgs/background.jpg); + background-size: cover; + background-repeat: no-repeat; + text-align: center; + padding: 16px 32px; + + + header { + + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; + + .score-player { + display: flex; + width: 250px; + margin-right: 2px; + justify-content: space-around; + + + .score-player1, + .score-player2 { + color: black; + background-color: rgb(177, 190, 196); + font-size: 1.1rem; + border: 2px solid black; + padding: 8px; + } + + + + } + + button.btn-reset { + font-family: initial; + font-size: 1rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 70px; + border-radius: 25px; + background-color: rgba(240, 255, 255, 0.644); + outline: none; + cursor: pointer; + + } + } + + div.board-game { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + text-align: center; + margin: 25px auto; + width: 450px; + height: 450px; + background-color: rgba(240, 248, 255, 0.747); + color: black; + + input { + cursor: pointer; + font-size: 5rem; + background: linear-gradient(#794d5b33 , #753a88); + display: grid; + place-items: center; + border: 2px solid black; + + &:hover { + background: linear-gradient(#1a141673 , #743a8856); + border: 3px solid rgba(0, 0, 0, 0.432); + } + + } + } +} + +section.starting-game { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + padding: 16px 32px; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: calc(100% + 50px); + background-color: rgba(54, 54, 80, 0.918); + + h1 { + color: #fff; + font-size: 3rem; + } + + button { + font-weight: bold; + cursor: pointer; + margin-top: 15px; + padding: 16px 32px; + font-size: 1.5rem; + border-radius: 10px; + background-color: rgb(133, 196, 196); + transition: 0.1s ease; + + &:hover { + background-color: rgb(49, 116, 116); + } + + &:active { + transform: scale(1.1); + } + } + + .form-player-name input { + display: none; + padding: 5px; + width: 250px; + font-size: 1.5rem; + } + + ::placeholder { + font-size: 1.5rem; + } +} + +.btn-reset-score { + + font-family: initial; + font-size: 1.2rem; + font-weight: 700; + color: rgb(12, 8, 8); + width: 115px; + height: 50px; + border-radius: 25px; + background-color: rgba(24, 102, 102, 0.877); + outline: none; + cursor: pointer; +} +.fireworks{ + display: none; +grid-template-columns: (repeat(3) , 1fr); + width: 400px; + text-align: center; + justify-content: center; + align-items: center; + height: 400px; + border-radius: 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50% ,-50%); + h1#playerWinsH1{ + color: rgb(89, 0, 255); + letter-spacing: 2px; + background-color: rgba(248, 248, 248, 0.726); + box-shadow: inset 1px 1px 2px 1px black; + font-weight: 700; + padding: 15px; + font-size: 4rem; + } + h1.wins{ + color: rgba(250, 248, 239, 0.918); + letter-spacing: 2px; + font-weight: 700; + font-size: 3rem; + background-color: rgba(0, 0, 139, 0.836); + } + img{ + width: 200px; + height: 200px; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Orel/tsconfig.json b/02-TypeScript/14-events/home-puzzles/Orel/tsconfig.json new file mode 100644 index 000000000..37809f2ba --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/tsconfig.json @@ -0,0 +1,103 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ES6", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist/", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Orel/view.ts b/02-TypeScript/14-events/home-puzzles/Orel/view.ts new file mode 100644 index 000000000..7a8faa4df --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Orel/view.ts @@ -0,0 +1,19 @@ +const btnStart = document.getElementById("btnStart"); +const gameStart = document.getElementById("startGameContainer")! +const player1Name = document.getElementById("player1Name") as HTMLInputElement +const player2Name = document.getElementById("player2Name") as HTMLInputElement +const formPlayerName = document.getElementById("formPlayerName") as HTMLFormElement + + + +// function getNameFromPlayers() :void{ +// btnStart!.addEventListener("click", (e: Event) => { +// if (player1Name.value === "" || player2Name.value === "") { +// console.log("no fill names"); +// } else { +// scorePlayer1.innerHTML = `${player1Name.value} :
                0` +// scorePlayer2.innerHTML = `${player2Name.value} :
                0` +// } + +// }) +// } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/control.ts b/02-TypeScript/14-events/home-puzzles/Raanan/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/dist/style.css b/02-TypeScript/14-events/home-puzzles/Raanan/dist/style.css new file mode 100644 index 000000000..8d8e6f7df --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/dist/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/dist/view.js b/02-TypeScript/14-events/home-puzzles/Raanan/dist/view.js new file mode 100644 index 000000000..d14457ac3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/dist/view.js @@ -0,0 +1,9 @@ +var box = document.querySelector(".box"); +if (box) { + box.addEventListener("click", function (event) { + box.style.backgroundColor = 'black'; + }); + box.addEventListener("click", function (event) { + box.innerText = "you presed me"; + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/helpers.ts b/02-TypeScript/14-events/home-puzzles/Raanan/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/index.html b/02-TypeScript/14-events/home-puzzles/Raanan/index.html new file mode 100644 index 000000000..8690ef82a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/index.html @@ -0,0 +1,32 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/index.ts b/02-TypeScript/14-events/home-puzzles/Raanan/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/model.ts b/02-TypeScript/14-events/home-puzzles/Raanan/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/style.css b/02-TypeScript/14-events/home-puzzles/Raanan/style.css new file mode 100644 index 000000000..8d8e6f7df --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/style.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/style.scss b/02-TypeScript/14-events/home-puzzles/Raanan/style.scss new file mode 100644 index 000000000..6825c185c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/style.scss @@ -0,0 +1,18 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box { + height: 300px; + background-color: teal; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + transition: all 1s; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Raanan/view.ts b/02-TypeScript/14-events/home-puzzles/Raanan/view.ts new file mode 100644 index 000000000..3e0af29c9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Raanan/view.ts @@ -0,0 +1,10 @@ +const box: HTMLElement|null = document.querySelector(".box"); +if (box) { + box.addEventListener("click", (event) => { + box.style.backgroundColor = 'black'; }); + + box.addEventListener("click", (event) => { + box.innerText = `you presed me`; + }); +} + diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/.vscode/settings.json b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/controler.ts b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/controler.ts new file mode 100644 index 000000000..874e06115 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/controler.ts @@ -0,0 +1,181 @@ +let turn = 0; +function div_0() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[0].style.display = "block"; + whoIs[0] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[0].style.display = "block"; + whoIs[0] = "lapid"; + } +} + +function div_1() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[1].style.display = "block"; + whoIs[1] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[1].style.display = "block"; + whoIs[1] = "lapid"; + } +} + +function div_2() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[2].style.display = "block"; + whoIs[2] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[2].style.display = "block"; + whoIs[2] = "lapid"; + } +} + +function div_3() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[3].style.display = "block"; + whoIs[3] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[3].style.display = "block"; + whoIs[3] = "lapid"; + } +} + +function div_4() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[4].style.display = "block"; + whoIs[4] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[4].style.display = "block"; + whoIs[4] = "lapid"; + } +} + +function div_5() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[5].style.display = "block"; + whoIs[5] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[5].style.display = "block"; + whoIs[5] = "lapid"; + } +} + +function div_6() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[6].style.display = "block"; + whoIs[6] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[6].style.display = "block"; + whoIs[6] = "lapid"; + } +} + +function div_7() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[7].style.display = "block"; + whoIs[7] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[7].style.display = "block"; + whoIs[7] = "lapid"; + } +} + +function div_8() { + if (turn >= 8) { + turn = 0; + } + + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[8].style.display = "block"; + whoIs[8] = "bibi"; + } else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[8].style.display = "block"; + whoIs[8] = "lapid"; + } +} + +function result__btn() { + let bibi = 0; + let lapid = 0; + + if ( + (whoIs[0] === "bibi" && whoIs[1] === "bibi" && whoIs[2] === "bibi") || + (whoIs[0] === "bibi" && whoIs[3] === "bibi" && whoIs[6] === "bibi") || + (whoIs[6] === "bibi" && whoIs[7] === "bibi" && whoIs[8] === "bibi") || + (whoIs[2] === "bibi" && whoIs[5] === "bibi" && whoIs[8] === "bibi") || + (whoIs[1] === "bibi" && whoIs[4] === "bibi" && whoIs[7] === "bibi") || + (whoIs[0] === "bibi" && whoIs[4] === "bibi" && whoIs[8] === "bibi") || + (whoIs[2] === "bibi" && whoIs[4] === "bibi" && whoIs[6] === "bibi") || + (whoIs[3] === "bibi" && whoIs[4] === "bibi" && whoIs[5] === "bibi") + ) { + bibi++; + } + + if ( + (whoIs[0] === "lapid" && whoIs[1] === "lapid" && whoIs[2] === "lapid") || + (whoIs[0] === "lapid" && whoIs[3] === "lapid" && whoIs[6] === "lapid") || + (whoIs[6] === "lapid" && whoIs[7] === "lapid" && whoIs[8] === "lapid") || + (whoIs[2] === "lapid" && whoIs[5] === "lapid" && whoIs[8] === "lapid") || + (whoIs[1] === "lapid" && whoIs[4] === "lapid" && whoIs[7] === "lapid") || + (whoIs[0] === "lapid" && whoIs[4] === "lapid" && whoIs[8] === "lapid") || + (whoIs[2] === "lapid" && whoIs[4] === "lapid" && whoIs[6] === "lapid") || + (whoIs[3] === "lapid" && whoIs[4] === "lapid" && whoIs[5] === "lapid") + ) { + lapid++; + } + + if (bibi === 1 && lapid === 1) { + let lapidiWin = document.getElementById("bibi_vs_lapid__titel"); + if (lapidiWin) + lapidiWin.innerHTML = " 😡 Repeat" + "   " + "Elections 😡"; + } + if (bibi === 1 && lapid === 0) { + let bibiWin = document.getElementById("bibi_vs_lapid__titel"); + if (bibiWin) bibiWin.innerText = "BIBI is the WINNER"; + } + + if (lapid === 1 && bibi === 0) { + let lapidiWin = document.getElementById("bibi_vs_lapid__titel"); + if (lapidiWin) lapidiWin.innerText = "LAPID is the WINNER"; + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/controler.js b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/controler.js new file mode 100644 index 000000000..75c16f6df --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/controler.js @@ -0,0 +1,166 @@ +var turn = 0; +function div_0() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[0].style.display = "block"; + whoIs[0] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[0].style.display = "block"; + whoIs[0] = "lapid"; + } +} +function div_1() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[1].style.display = "block"; + whoIs[1] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[1].style.display = "block"; + whoIs[1] = "lapid"; + } +} +function div_2() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[2].style.display = "block"; + whoIs[2] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[2].style.display = "block"; + whoIs[2] = "lapid"; + } +} +function div_3() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[3].style.display = "block"; + whoIs[3] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[3].style.display = "block"; + whoIs[3] = "lapid"; + } +} +function div_4() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[4].style.display = "block"; + whoIs[4] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[4].style.display = "block"; + whoIs[4] = "lapid"; + } +} +function div_5() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[5].style.display = "block"; + whoIs[5] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[5].style.display = "block"; + whoIs[5] = "lapid"; + } +} +function div_6() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[6].style.display = "block"; + whoIs[6] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[6].style.display = "block"; + whoIs[6] = "lapid"; + } +} +function div_7() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[7].style.display = "block"; + whoIs[7] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[7].style.display = "block"; + whoIs[7] = "lapid"; + } +} +function div_8() { + if (turn >= 8) { + turn = 0; + } + turn++; + if (turn === 1 || turn === 3 || turn === 5 || turn === 7 || turn === 9) { + x[8].style.display = "block"; + whoIs[8] = "bibi"; + } + else if (turn === 2 || turn === 4 || turn === 6 || turn === 8) { + o[8].style.display = "block"; + whoIs[8] = "lapid"; + } +} +function result__btn() { + var bibi = 0; + var lapid = 0; + if ((whoIs[0] === "bibi" && whoIs[1] === "bibi" && whoIs[2] === "bibi") || + (whoIs[0] === "bibi" && whoIs[3] === "bibi" && whoIs[6] === "bibi") || + (whoIs[6] === "bibi" && whoIs[7] === "bibi" && whoIs[8] === "bibi") || + (whoIs[2] === "bibi" && whoIs[5] === "bibi" && whoIs[8] === "bibi") || + (whoIs[1] === "bibi" && whoIs[4] === "bibi" && whoIs[7] === "bibi") || + (whoIs[0] === "bibi" && whoIs[4] === "bibi" && whoIs[8] === "bibi") || + (whoIs[2] === "bibi" && whoIs[4] === "bibi" && whoIs[6] === "bibi") || + (whoIs[3] === "bibi" && whoIs[4] === "bibi" && whoIs[5] === "bibi")) { + bibi++; + } + if ((whoIs[0] === "lapid" && whoIs[1] === "lapid" && whoIs[2] === "lapid") || + (whoIs[0] === "lapid" && whoIs[3] === "lapid" && whoIs[6] === "lapid") || + (whoIs[6] === "lapid" && whoIs[7] === "lapid" && whoIs[8] === "lapid") || + (whoIs[2] === "lapid" && whoIs[5] === "lapid" && whoIs[8] === "lapid") || + (whoIs[1] === "lapid" && whoIs[4] === "lapid" && whoIs[7] === "lapid") || + (whoIs[0] === "lapid" && whoIs[4] === "lapid" && whoIs[8] === "lapid") || + (whoIs[2] === "lapid" && whoIs[4] === "lapid" && whoIs[6] === "lapid") || + (whoIs[3] === "lapid" && whoIs[4] === "lapid" && whoIs[5] === "lapid")) { + lapid++; + } + if (bibi === 1 && lapid === 1) { + var lapidiWin = document.getElementById("bibi_vs_lapid__titel"); + if (lapidiWin) + lapidiWin.innerHTML = " 😡 Repeat" + "   " + "Elections 😡"; + } + if (bibi === 1 && lapid === 0) { + var bibiWin = document.getElementById("bibi_vs_lapid__titel"); + if (bibiWin) + bibiWin.innerText = "BIBI is the WINNER"; + } + if (lapid === 1 && bibi === 0) { + var lapidiWin = document.getElementById("bibi_vs_lapid__titel"); + if (lapidiWin) + lapidiWin.innerText = "LAPID is the WINNER"; + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/main.js b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/main.js new file mode 100644 index 000000000..828b87e14 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/main.js @@ -0,0 +1,10 @@ +Cube1.addEventListener("click", div_0); +Cube2.addEventListener("click", div_1); +Cube3.addEventListener("click", div_2); +Cube4.addEventListener("click", div_3); +Cube5.addEventListener("click", div_4); +Cube6.addEventListener("click", div_5); +Cube7.addEventListener("click", div_6); +Cube8.addEventListener("click", div_7); +Cube9.addEventListener("click", div_8); +result.addEventListener("click", result__btn); diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/model.js b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/model.js new file mode 100644 index 000000000..dfa472da7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/model.js @@ -0,0 +1,22 @@ +var whoIs = [ + null, + null, + null, + null, + null, + null, + null, + null, + null, +]; +var whoIs2 = [ + null, + null, + null, + null, + null, + null, + null, + null, + null, +]; diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/rsponsiv.css b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/rsponsiv.css new file mode 100644 index 000000000..2f5cd2ae8 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/rsponsiv.css @@ -0,0 +1,138 @@ +@media only screen and (min-width: 910px) { + .bibi_vs_lapid { + display: flex; + width: 65vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 10vh; + left: 10%; + } +} +@media only screen and (max-width: 660px) { + .bibi_vs_lapid__bibiImg { + display: none; + } + + .bibi_vs_lapid__lapidImg { + display: none; + } + + .tic_tac_toe { + left: 20%; + right: 25%; + bottom: 15%; + } +} +@media only screen and (max-height: 600px) { + .bibi_vs_lapid { + display: flex; + width: 100vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 5vh; + } + .bibi_vs_lapid strong { + font-family: Rancho; + font-size: 50px; + padding: 10px; + } + .bibi_vs_lapid__titel { + font-family: Rancho; + font-size: 40px; + align-self: center; + color: red; + top: 15%; + } +} +@media only screen and (max-height: 500px) { + .result { + width: 100vw; + position: static; + } + .result__btn { + position: absolute; + left: 38%; + right: 25%; + top: 76vh; + width: 70px; + height: 40px; + background-color: red; + border-radius: 10px; + color: black; + font-size: 18px; + font-weight: bold; + } +} +@media only screen and (max-height: 500px) { + .result { + width: 100vw; + position: static; + } + .result__btn { + position: absolute; + top: 70vh; + left: 42%; + width: 45px; + height: 45px; + background-color: red; + border-radius: 50%; + color: black; + font-size: 0px; + font-weight: bold; + } + + .bibi_vs_lapid { + display: flex; + width: 100vw; + height: 10px; + justify-content: space-evenly; + position: absolute; + top: 25px; + } + .bibi_vs_lapid strong { + font-family: Rancho; + font-size: 40px; + padding: 10px; + } + .bibi_vs_lapid__titel { + font-family: Rancho; + font-size: 30px; + align-self: center; + color: red; + top: 15%; + } + .bibi_vs_lapid__bibiImg { + width: 95px; + border-radius: 40%; + border: none; + } + .bibi_vs_lapid__lapidImg { + width: 95px; + border-radius: 40%; + border: none; + } +} +@media only screen and (max-height: 350px) { + .tic_tac_toe { + position: fixed; + width: 70vw; + height: 80vh; + display: flex; + flex-wrap: wrap; + border: 5px solid black; + box-shadow: 15px 15px 10px #605f5f; + } + + .result { + display: none; + } + .result__btn { + display: none; + } + + .bibi_vs_lapid { + display: none; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/style.css b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/style.css new file mode 100644 index 000000000..89c2d92f4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/style.css @@ -0,0 +1,121 @@ +@import "https://fonts.googleapis.com/css?family=Rancho&effect=fire-animation"; +* { + padding: 0; + margin: 0; +} + +html { + width: 100%; + height: 100%; +} + +body { + width: 100%; + height: 100%; + position: static; + background-color: #e8c888; + overflow: hidden; + background: linear-gradient(-75deg, #2a2c2c, #040a09, #2a2929, #010901); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +.bibi_vs_lapid { + display: flex; + width: 100vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 10vh; +} +.bibi_vs_lapid strong { + font-family: Rancho; + font-size: 80px; + padding: 10px; +} +.bibi_vs_lapid__titel { + font-family: Rancho; + font-size: 50px; + align-self: center; + color: red; + top: 15%; +} +.bibi_vs_lapid__bibiImg { + width: 95px; + border-radius: 50%; + border: 3px solid red; +} +.bibi_vs_lapid__lapidImg { + border: 3px solid red; + width: 95px; + border-radius: 50%; +} + +.tic_tac_toe { + position: fixed; + left: 30%; + right: 25%; + bottom: 15%; + width: 300px; + height: 300px; + text-align: center; + display: flex; + flex-wrap: wrap; + border: 5px solid black; + box-shadow: 10px 5px 50px #0f0f0f; +} +.tic_tac_toe__btn { + position: relative; + width: 32%; + height: 32%; + border: 2px solid black; + background-color: #e76666; +} +.tic_tac_toe__btn__x { + display: none; + position: absolute; + left: 10px; + top: 10px; + width: 80%; + height: 80%; + border-radius: 10px; +} +.tic_tac_toe__btn__o { + display: none; + position: absolute; + top: 10px; + left: 10px; + width: 80%; + height: 80%; + border-radius: 10px; +} + +.result { + width: 100vw; + position: static; +} +.result__btn { + position: absolute; + left: 34%; + right: 25%; + top: 43vh; + width: 100px; + height: 50px; + background-color: red; + border-radius: 10px; + color: black; + font-size: 20px; + font-weight: bold; + box-shadow: 5px 5px 2px #3a3939; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/view.js b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/view.js new file mode 100644 index 000000000..1c7ebab2f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/dist/view.js @@ -0,0 +1,17 @@ +var btns = document.querySelectorAll("tic_tac_toe__btn"); +// X=bibi +var x = document.getElementsByClassName("tic_tac_toe__btn__x"); +// O=lapid +var o = document.getElementsByClassName("tic_tac_toe__btn__o"); +//The squares of X circle each numbered div +var Cube1 = document.querySelector(".tic_tac_toe__btn_0"); +var Cube2 = document.querySelector(".tic_tac_toe__btn_1"); +var Cube3 = document.querySelector(".tic_tac_toe__btn_2"); +var Cube4 = document.querySelector(".tic_tac_toe__btn_3"); +var Cube5 = document.querySelector(".tic_tac_toe__btn_4"); +var Cube6 = document.querySelector(".tic_tac_toe__btn_5"); +var Cube7 = document.querySelector(".tic_tac_toe__btn_6"); +var Cube8 = document.querySelector(".tic_tac_toe__btn_7"); +var Cube9 = document.querySelector(".tic_tac_toe__btn_8"); +//result of game +var result = document.querySelector(".result__btn"); diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/img/b.jpg b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/img/b.jpg new file mode 100644 index 000000000..07c7c0ca6 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/img/b.jpg differ diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/img/l.jpg b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/img/l.jpg new file mode 100644 index 000000000..33f76f5d9 Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/img/l.jpg differ diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/index.html b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/index.html new file mode 100644 index 000000000..6d0c3fc93 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/index.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + Bibi VS Lapid + + + +
                + bibi-img +

                + 🤜 BIBI VS LAPID 🤛 +

                + lapid-img +
                + +
                +
                + + +
                + +
                + + +
                + +
                + + +
                + +
                + + +
                + +
                + + +
                + +
                + + +
                + +
                + + +
                + +
                + + +
                + +
                + + +
                + + + + + +

                +
                + diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/main.ts b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/main.ts new file mode 100644 index 000000000..828b87e14 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/main.ts @@ -0,0 +1,10 @@ +Cube1.addEventListener("click", div_0); +Cube2.addEventListener("click", div_1); +Cube3.addEventListener("click", div_2); +Cube4.addEventListener("click", div_3); +Cube5.addEventListener("click", div_4); +Cube6.addEventListener("click", div_5); +Cube7.addEventListener("click", div_6); +Cube8.addEventListener("click", div_7); +Cube9.addEventListener("click", div_8); +result.addEventListener("click", result__btn); diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/model.ts b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/model.ts new file mode 100644 index 000000000..4d1cc7359 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/model.ts @@ -0,0 +1,22 @@ +let whoIs: null[] | string[] = [ + null, + null, + null, + null, + null, + null, + null, + null, + null, +]; +let whoIs2: null[] | string[] = [ + null, + null, + null, + null, + null, + null, + null, + null, + null, +]; diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/rsponsiv.css b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/rsponsiv.css new file mode 100644 index 000000000..3813a0256 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/rsponsiv.css @@ -0,0 +1,133 @@ +@media only screen and (min-width: 910px) { + .bibi_vs_lapid { + display: flex; + width: 65vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 10vh; + left: 10%; + } +} +@media only screen and (max-width: 660px) { + .bibi_vs_lapid__bibiImg { + display: none; + } + .bibi_vs_lapid__lapidImg { + display: none; + } + .tic_tac_toe { + left: 20%; + right: 25%; + bottom: 15%; + } +} +@media only screen and (max-height: 600px) { + .bibi_vs_lapid { + display: flex; + width: 100vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 5vh; + } + .bibi_vs_lapid strong { + font-family: Rancho; + font-size: 50px; + padding: 10px; + } + .bibi_vs_lapid__titel { + font-family: Rancho; + font-size: 40px; + align-self: center; + color: rgb(255, 0, 0); + top: 15%; + } +} +@media only screen and (max-height: 500px) { + .result { + width: 100vw; + position: static; + } + .result__btn { + position: absolute; + left: 38%; + right: 25%; + top: 76vh; + width: 70px; + height: 40px; + background-color: red; + border-radius: 10px; + color: black; + font-size: 18px; + font-weight: bold; + } +} +@media only screen and (max-height: 500px) { + .result { + width: 100vw; + position: static; + } + .result__btn { + position: absolute; + top: 70vh; + left: 42%; + width: 45px; + height: 45px; + background-color: red; + border-radius: 50%; + color: black; + font-size: 0px; + font-weight: bold; + } + .bibi_vs_lapid { + display: flex; + width: 100vw; + height: 10px; + justify-content: space-evenly; + position: absolute; + top: 25px; + } + .bibi_vs_lapid strong { + font-family: Rancho; + font-size: 40px; + padding: 10px; + } + .bibi_vs_lapid__titel { + font-family: Rancho; + font-size: 30px; + align-self: center; + color: rgb(255, 0, 0); + top: 15%; + } + .bibi_vs_lapid__bibiImg { + width: 95px; + border-radius: 40%; + border: none; + } + .bibi_vs_lapid__lapidImg { + width: 95px; + border-radius: 40%; + border: none; + } +} +@media only screen and (max-height: 350px) { + .tic_tac_toe { + position: fixed; + width: 70vw; + height: 80vh; + display: flex; + flex-wrap: wrap; + border: 5px solid rgb(0, 0, 0); + box-shadow: 15px 15px 10px #605f5f; + } + .result { + display: none; + } + .result__btn { + display: none; + } + .bibi_vs_lapid { + display: none; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/rsponsiv.scss b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/rsponsiv.scss new file mode 100644 index 000000000..a770f5cf2 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/rsponsiv.scss @@ -0,0 +1,200 @@ +@media only screen and(min-width:910px) { + .bibi_vs_lapid { + display: flex; + width: 65vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 10vh; + left: 10%; + + } + +} + +@media only screen and(max-width:660px) { + .bibi_vs_lapid__bibiImg { + display: none; + } + + + .bibi_vs_lapid__lapidImg { + display: none; + } + + .tic_tac_toe { + left: 20%; + right: 25%; + bottom: 15%; + } + +} + +@media only screen and(max-height:600px) { + + .bibi_vs_lapid { + display: flex; + width: 100vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 5vh; + + + + strong { + font-family: Rancho; + font-size: 50px; + padding: 10px; + } + + + &__titel { + + font-family: Rancho; + font-size: 40px; + align-self: center; + color: rgb(255, 0, 0); + top: 15%; + + + + } + } + + + + + + +} + + + +@media only screen and(max-height:500px) { + .result { + width: 100vw; + position: static; + + &__btn { + position: absolute; + left: 38%; + right: 25%; + top: 76vh; + width: 70px; + height: 40px; + background-color: red; + border-radius: 10px; + color: black; + font-size: 18px; + font-weight: bold; + + } + + } + +} + +@media only screen and(max-height:500px) { + .result { + width: 100vw; + position: static; + + &__btn { + position: absolute; + top: 70vh; + left: 42%; + width: 45px; + height: 45px; + background-color: red; + border-radius: 50%; + color: black; + font-size: 0px; + font-weight: bold; + + } + + } + + .bibi_vs_lapid { + display: flex; + width: 100vw; + height: 10px; + justify-content: space-evenly; + position: absolute; + top: 25px; + + + + + strong { + font-family: Rancho; + font-size: 40px; + padding: 10px; + } + + + &__titel { + + font-family: Rancho; + font-size: 30px; + align-self: center; + color: rgb(255, 0, 0); + top: 15%; + + + + } + + + &__bibiImg { + + width: 95px; + border-radius: 40%; + border: none; + + } + + &__lapidImg { + + width: 95px; + border-radius: 40%; + border: none; + } + + } + +} + + + +@media only screen and (max-height:350px) { + .tic_tac_toe { + position: fixed; + width: 70vw; + height: 80vh; + + display: flex; + flex-wrap: wrap; + border: 5px solid rgb(0, 0, 0); + box-shadow: 15px 15px 10px #605f5f; + + + } + + .result { + display: none; + + &__btn { + display: none; + } + + } + + + .bibi_vs_lapid { + display: none; + } + + +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/style.css b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/style.css new file mode 100644 index 000000000..2fdd15c37 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/style.css @@ -0,0 +1,134 @@ +@import "https://fonts.googleapis.com/css?family=Rancho&effect=fire-animation"; +* { + padding: 0; + margin: 0; +} + +html { + width: 100%; + height: 100%; +} + +body { + width: 100%; + height: 100%; + position: static; + background-color: rgb(232, 200, 136); + overflow: hidden; + background: linear-gradient(-75deg, #2a2c2c, #040a09, #2a2929, #010901); + background-size: 400% 400%; + -webkit-animation: gradient 15s ease infinite; + animation: gradient 15s ease infinite; +} + +@-webkit-keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +.bibi_vs_lapid { + display: flex; + width: 100vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 10vh; +} +.bibi_vs_lapid strong { + font-family: Rancho; + font-size: 80px; + padding: 10px; +} +.bibi_vs_lapid__titel { + font-family: Rancho; + font-size: 50px; + align-self: center; + color: rgb(255, 0, 0); + top: 15%; +} +.bibi_vs_lapid__bibiImg { + width: 95px; + border-radius: 50%; + border: 3px solid red; +} +.bibi_vs_lapid__lapidImg { + border: 3px solid rgb(255, 0, 0); + width: 95px; + border-radius: 50%; +} + +.tic_tac_toe { + position: fixed; + left: 30%; + right: 25%; + bottom: 15%; + width: 300px; + height: 300px; + text-align: center; + display: flex; + flex-wrap: wrap; + border: 5px solid rgb(0, 0, 0); + box-shadow: 10px 5px 50px #0f0f0f; +} +.tic_tac_toe__btn { + position: relative; + width: 32%; + height: 32%; + border: 2px solid rgb(0, 0, 0); + background-color: rgb(231, 102, 102); +} +.tic_tac_toe__btn__x { + display: none; + position: absolute; + left: 10px; + top: 10px; + width: 80%; + height: 80%; + border-radius: 10px; +} +.tic_tac_toe__btn__o { + display: none; + position: absolute; + top: 10px; + left: 10px; + width: 80%; + height: 80%; + border-radius: 10px; +} + +.result { + width: 100vw; + position: static; +} +.result__btn { + position: absolute; + left: 34%; + right: 25%; + top: 43vh; + width: 100px; + height: 50px; + background-color: red; + border-radius: 10px; + color: black; + font-size: 20px; + font-weight: bold; + box-shadow: 5px 5px 2px #3a3939; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/style.scss b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/style.scss new file mode 100644 index 000000000..ef2df984e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/style.scss @@ -0,0 +1,159 @@ +@import "https://fonts.googleapis.com/css?family=Rancho&effect=fire-animation"; + +* { + padding: 0; + margin: 0; +} + +html { + width: 100%; + height: 100%; +} + +body { + width: 100%; + height: 100%; + position: static; + background-color: rgb(232, 200, 136); + overflow: hidden; + background: linear-gradient(-75deg, #2a2c2c, #040a09, #2a2929, #010901); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } + +} + +.bibi_vs_lapid { + display: flex; + width: 100vw; + height: 120px; + justify-content: space-evenly; + position: absolute; + top: 10vh; + + + + strong { + font-family: Rancho; + font-size: 80px; + padding: 10px; + } + + + &__titel { + + font-family: Rancho; + font-size: 50px; + align-self: center; + color: rgb(255, 0, 0); + top: 15%; + + + + } + + + &__bibiImg { + + width: 95px; + border-radius: 50%; + border: 3px solid red; + + } + + &__lapidImg { + border: 3px solid rgb(255, 0, 0); + width: 95px; + border-radius: 50%; + + } + +} + + + +.tic_tac_toe { + position: fixed; + left: 30%; + right: 25%; + bottom: 15%; + width: 300px; + height: 300px; + text-align: center; + display: flex; + flex-wrap: wrap; + border: 5px solid rgb(0, 0, 0); + box-shadow: 10px 5px 50px #0f0f0f; + + + + + + + &__btn { + position: relative; + width: 32%; + height: 32%; + border: 2px solid rgb(0, 0, 0); + background-color: rgb(231, 102, 102); + + &__x { + display: none; + position: absolute; + left: 10px; + top: 10px; + width: 80%; + height: 80%; + border-radius: 10px; + + } + + + &__o { + display: none; + position: absolute; + top: 10px; + left: 10px; + width: 80%; + height: 80%; + border-radius: 10px; + + } + } +} + + +.result { + width: 100vw; + position: static; + + &__btn { + position: absolute; + left: 34%; + right: 25%; + top: 43vh; + width: 100px; + height: 50px; + background-color: red; + border-radius: 10px; + color: black; + font-size: 20px; + font-weight: bold; + box-shadow: 5px 5px 2px #3a3939; + + } + +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/view.ts b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/view.ts new file mode 100644 index 000000000..bdc0a0d2d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Shlomi Azn bibi VS lapid/view.ts @@ -0,0 +1,25 @@ +let btns = document.querySelectorAll("tic_tac_toe__btn"); + +// X=bibi +let x = document.getElementsByClassName( + "tic_tac_toe__btn__x" +) as HTMLCollectionOf; + +// O=lapid +let o = document.getElementsByClassName( + "tic_tac_toe__btn__o" +) as HTMLCollectionOf; + +//The squares of X circle each numbered div +let Cube1 = document.querySelector(".tic_tac_toe__btn_0") as HTMLDivElement; +let Cube2 = document.querySelector(".tic_tac_toe__btn_1") as HTMLDivElement; +let Cube3 = document.querySelector(".tic_tac_toe__btn_2") as HTMLDivElement; +let Cube4 = document.querySelector(".tic_tac_toe__btn_3") as HTMLDivElement; +let Cube5 = document.querySelector(".tic_tac_toe__btn_4") as HTMLDivElement; +let Cube6 = document.querySelector(".tic_tac_toe__btn_5") as HTMLDivElement; +let Cube7 = document.querySelector(".tic_tac_toe__btn_6") as HTMLDivElement; +let Cube8 = document.querySelector(".tic_tac_toe__btn_7") as HTMLDivElement; +let Cube9 = document.querySelector(".tic_tac_toe__btn_8") as HTMLDivElement; + +//result of game +let result = document.querySelector(".result__btn") as HTMLButtonElement; diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/control.ts b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/dist/index.js b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/dist/style.css b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/dist/style.css new file mode 100644 index 000000000..f97418290 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/dist/style.css @@ -0,0 +1,15 @@ +.btn { + background: #4c6ca0; + border: none; + color: #fff; + padding: 30px 50px; + font-size: 16px; + border-radius: 5px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + opacity: 0.6; +} + +.btn:hover { + color: salmon; + opacity: 1; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/helpers.ts b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/index.html b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/index.html new file mode 100644 index 000000000..bdc50485d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/index.ts b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/model.ts b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/style.css b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/style.css new file mode 100644 index 000000000..55a75c9dd --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/style.css @@ -0,0 +1,15 @@ +.btn { + background: #4c6ca0; + border: none; + color: #fff; + padding: 30px 50px; + font-size: 16px; + border-radius: 5px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + opacity: 0.6; +} + +.btn:hover { + color: rgb(250, 128, 114); + opacity: 1; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tanya Holczer/style.scss b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/style.scss new file mode 100644 index 000000000..c9bb77832 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tanya Holczer/style.scss @@ -0,0 +1,14 @@ +.btn { + background: #4c6ca0; + border: none; + color: #fff; + padding: 30px 50px; + font-size: 16px; + border-radius: 5px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + opacity: 0.6; +} +.btn:hover { + color: rgb(250,128,114); + opacity: 1; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/KRS-One - Sound of da Police (Official Video).mp3 b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/KRS-One - Sound of da Police (Official Video).mp3 new file mode 100644 index 000000000..c072abf5e Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/KRS-One - Sound of da Police (Official Video).mp3 differ diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/control.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/control.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/helpers.js new file mode 100644 index 000000000..dd55bdabb --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/helpers.js @@ -0,0 +1,2 @@ +var audio = new Audio("./KRS-One - Sound of da Police (Official Video).mp3"); +var box = document.querySelectorAll(".box"); diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/index.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/model.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/style.css b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/style.css new file mode 100644 index 000000000..4ace9d70e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/style.css @@ -0,0 +1,24 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + margin-top: 90%; + margin-left: 50%; + height: 300px; + width: 250px; + border: 3px solid black; + border-radius: 100% 100% 0% 0%; + box-shadow: 10px 10px 15px; + background-color: #f22525; + color: black; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + transition: all 0.5s; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/view.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/view.js new file mode 100644 index 000000000..5a287e58a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/dist/view.js @@ -0,0 +1,22 @@ +var myBox = document.querySelector("#myBox"); +if (myBox) { + myBox.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxs = document.querySelectorAll(".box"); +boxs.forEach(function (box) { + box.addEventListener("click", function (event) { + box.innerHTML = alert("Turn up the volume...!\n That's the sound of the police"); + box.innerText = "Is The Sound Of The Police"; + }); + box.addEventListener("click", function (event) { + audio.play(); + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'blue'; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/helpers.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/helpers.ts new file mode 100644 index 000000000..402d21030 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/helpers.ts @@ -0,0 +1,2 @@ +const audio = new Audio("./KRS-One - Sound of da Police (Official Video).mp3"); +const box = document.querySelectorAll(".box"); diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/index.html b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/index.html new file mode 100644 index 000000000..d0b9c7abe --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/index.html @@ -0,0 +1,25 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                Don`t Click Me
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/index.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/model.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/style.css b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/style.css new file mode 100644 index 000000000..cc9c5994b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/style.css @@ -0,0 +1,24 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + margin-top: 90%; + margin-left: 50%; + height: 300px; + width: 250px; + border: 3px solid black; + border-radius: 100% 100% 0% 0%; + box-shadow: 10px 10px 15px; + background-color: rgb(242, 37, 37); + color: black; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + transition: all 0.5s; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/style.scss b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/style.scss new file mode 100644 index 000000000..501a89f40 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/style.scss @@ -0,0 +1,25 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box{ + margin-top: 90%; + margin-left: 50%; + height: 300px; + width: 250px; + border: 3px solid black; + border-radius: 100% 100% 0% 0%; + box-shadow: 10px 10px 15px; + background-color: rgb(242, 37, 37); + color: black; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + transition: all 0.5s; + cursor: pointer; + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/view.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/view.ts new file mode 100644 index 000000000..13a2a4fac --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-1/view.ts @@ -0,0 +1,29 @@ +const myBox: HTMLElement|null = document.querySelector("#myBox"); +if (myBox) { + myBox.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxs: any = document.querySelectorAll(".box"); + + +boxs.forEach((box) => { + box.addEventListener("click", (event) => { + + box.innerHTML =alert(`Turn up the volume...! + That's the sound of the police`) + box.innerText = `Is The Sound Of The Police`; + + }); + box.addEventListener("click", (event) => { + audio.play(); + }); + + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'blue'; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/control.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/control.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/helprs.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/helprs.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/index.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/style.css b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/style.css new file mode 100644 index 000000000..d8c672e70 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/style.css @@ -0,0 +1,24 @@ +.wapper { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px 75px 75px; + justify-content: center; + gap: 70px; + margin: 80px; +} +.wapper .box { + width: 100px; + height: 100px; + border: 1px solid black; +} +.wapper .p1 { + width: 100px; + height: 100px; + border: 1px solid black; +} + +h1 { + display: grid; + text-align: center; + padding-top: 30px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/view.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/view.js new file mode 100644 index 000000000..bfe74e8c7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/dist/view.js @@ -0,0 +1,26 @@ +var divBox = document.querySelector(".box"); +if (divBox) { + divBox.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxs = document.querySelectorAll(".box"); +boxs.forEach(function (box) { + box.addEventListener("click", function (event) { + box.style.backgroundImage = "url(https://img.lovepik.com/free-png/20211105/lovepik-chess-png-image_400298812_wh1200.png)"; + box.style.backgroundSize = "100px 100px"; + }); +}); +var divp1 = document.querySelector(".p1"); +if (divp1) { + divp1.addEventListener("click", function (event) { + console.log(event); + }); +} +var p1 = document.querySelectorAll(".p1"); +p1.forEach(function (box1) { + box1.addEventListener("click", function (event) { + box1.style.backgroundImage = "url(https://media.istockphoto.com/id/173838005/photo/black-pawn.jpg?s=612x612&w=0&k=20&c=5C-60Q9jSyakRXItxs47mrCkKKECKTcPiIGSD7RYC5U=)"; + box1.style.backgroundSize = "100px 100px"; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/helprs.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/helprs.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/index.html b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/index.html new file mode 100644 index 000000000..f77e7acd1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/index.html @@ -0,0 +1,35 @@ + + + + + + + Document + + + + + + + +

                Chess

                +
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/index.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/style.css b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/style.css new file mode 100644 index 000000000..d8c672e70 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/style.css @@ -0,0 +1,24 @@ +.wapper { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px 75px 75px; + justify-content: center; + gap: 70px; + margin: 80px; +} +.wapper .box { + width: 100px; + height: 100px; + border: 1px solid black; +} +.wapper .p1 { + width: 100px; + height: 100px; + border: 1px solid black; +} + +h1 { + display: grid; + text-align: center; + padding-top: 30px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/style.scss b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/style.scss new file mode 100644 index 000000000..73a293a16 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/style.scss @@ -0,0 +1,25 @@ +.wapper{ + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px 75px 75px; + justify-content: center; + gap: 70px; + margin: 80px; + .box{ + // background-color: white; + width: 100px; + height: 100px; + border: 1px solid black; + } + .p1{ + // background-color: white; + width: 100px; + height: 100px; + border: 1px solid black; + } +} + h1{ + display: grid; + text-align: center; + padding-top: 30px; + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/view.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/view.ts new file mode 100644 index 000000000..ea1d4236c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-2/view.ts @@ -0,0 +1,34 @@ +const divBox: HTMLElement|null = document.querySelector(".box"); +if (divBox) { + divBox.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxs:any = document.querySelectorAll(".box"); + + +boxs.forEach((box) => { + box.addEventListener("click",(event) => { + box.style.backgroundImage= `url(https://img.lovepik.com/free-png/20211105/lovepik-chess-png-image_400298812_wh1200.png)`; + box.style.backgroundSize= `100px 100px`; + + + }); +}); +const divp1: HTMLElement|null = document.querySelector(".p1"); +if (divp1) { + divp1.addEventListener("click", (event) => { + console.log(event); + }); +} + +const p1: any = document.querySelectorAll(".p1") + +p1.forEach((box1) => { + box1.addEventListener("click",(event) => { + box1.style.backgroundImage= `url(https://media.istockphoto.com/id/173838005/photo/black-pawn.jpg?s=612x612&w=0&k=20&c=5C-60Q9jSyakRXItxs47mrCkKKECKTcPiIGSD7RYC5U=)`; + box1.style.backgroundSize= `100px 100px`; + + }); +}); \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/control.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/control.ts new file mode 100644 index 000000000..dce312b65 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/control.ts @@ -0,0 +1,13 @@ +function switchPlayers(event) { + try { + const box = event.target; + if (box.textContent !== "") { + return; + } + box.textContent = currentPlayer.name; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } catch (error) { + console.error(error); + } + } + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/control.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/control.js new file mode 100644 index 000000000..7e7de79f6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/control.js @@ -0,0 +1,13 @@ +function switchPlayers(event) { + try { + var box = event.target; + if (box.textContent !== "") { + return; + } + box.textContent = currentPlayer.name; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/index.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/index.js new file mode 100644 index 000000000..9a8ec56ef --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/index.js @@ -0,0 +1 @@ +switchPlayers(event); diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/model.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/model.js new file mode 100644 index 000000000..9b5135785 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/model.js @@ -0,0 +1,9 @@ +var players = /** @class */ (function () { + function players(name) { + this.name = name; + } + return players; +}()); +var player1 = new players("X"); +var player2 = new players("O"); +var currentPlayer = player1 || player2; diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/style.css b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/style.css new file mode 100644 index 000000000..2959f3d83 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/style.css @@ -0,0 +1,23 @@ +.container { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px; + justify-content: center; + gap: 30px; + margin: auto; +} + +.box { + width: 95px; + height: 95px; + background-color: #b39797; + display: grid; + border: 3px solid black; + text-align: center; + align-items: center; + cursor: pointer; +} + +h1 { + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/view.js b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/view.js new file mode 100644 index 000000000..600638ee7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/dist/view.js @@ -0,0 +1,4 @@ +var box = document.querySelectorAll(".box"); +for (var i = 0; i < box.length; i++) { + box[i].addEventListener("click", switchPlayers); +} diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/helpers.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/index.html b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/index.html new file mode 100644 index 000000000..df9404ad4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/index.html @@ -0,0 +1,34 @@ + + + + + + + + Document + + + + + + + + + + + +

                Tic Tac Toe

                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/index.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/index.ts new file mode 100644 index 000000000..b9c85a969 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/index.ts @@ -0,0 +1 @@ +switchPlayers(event) \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/model.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/model.ts new file mode 100644 index 000000000..168ff1d19 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/model.ts @@ -0,0 +1,11 @@ +class players { + constructor( + public name: string, + ) {} + } + + let player1 = new players(`X`) + let player2 = new players(`O`) + + type Turn = "X" | "O" | "" + let currentPlayer: players = player1 || player2; \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/style.css b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/style.css new file mode 100644 index 000000000..0d113519f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/style.css @@ -0,0 +1,23 @@ +.container { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px; + justify-content: center; + gap: 30px; + margin: auto; +} + +.box { + width: 95px; + height: 95px; + background-color: rgb(179, 151, 151); + display: grid; + border: 3px solid black; + text-align: center; + align-items: center; + cursor: pointer; +} + +h1 { + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/style.scss b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/style.scss new file mode 100644 index 000000000..63206684c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/style.scss @@ -0,0 +1,27 @@ +.container { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px; + justify-content: center; + gap: 30px; + margin: auto; + +} + +.box { + width: 95px; + height: 95px; + background-color: rgb(179, 151, 151); + display: grid; + border: 3px solid black; + text-align:center; + align-items: center; + cursor: pointer; + + + +} + +h1{ + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/view.ts b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/view.ts new file mode 100644 index 000000000..1f64ea6b9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/Tomer-cohen/task-3/view.ts @@ -0,0 +1,5 @@ +const box = document.querySelectorAll(".box"); +for (let i = 0; i < box.length; i++) { + box[i].addEventListener("click", switchPlayers); +} + diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/.vscode/settings.json b/02-TypeScript/14-events/home-puzzles/VladiBykanov/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/control.ts b/02-TypeScript/14-events/home-puzzles/VladiBykanov/control.ts new file mode 100644 index 000000000..0d589aec1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/control.ts @@ -0,0 +1,65 @@ +function newGame() { + messages.forEach((message) => (message.style.display = "none")); + boxes.forEach((box) => { + box.addEventListener("click", handleBoxClick); + box.innerHTML = ""; + box.classList.remove(playerO); + box.classList.remove(playerX); + }); +} + +function resetScore() { + playerOScoreSpan.innerHTML = "0"; + playerXScoreSpan.innerHTML = "0"; + messages.forEach((message) => (message.style.display = "none")); + boxes.forEach((box) => { + box.addEventListener("click", handleBoxClick); + box.innerHTML = ""; + box.classList.remove(playerO); + box.classList.remove(playerX); + }); +} + +function handleBoxClick(e) { + const box = e.target; + if (box.innerHTML != "") return; + const currentClass = isPlayerOTurn ? playerO : playerX; + placeMark(box, currentClass); + if (checkWin(currentClass)) { + boxes.forEach((box) => box.removeEventListener("click", handleBoxClick)); + if (currentClass == playerO) { + playerOScore++; + playerOScoreSpan.innerHTML = playerOScore.toString(); + playerOWinMessage.style.display = "flex"; + } else { + playerXScore++; + playerXScoreSpan.innerHTML = playerXScore.toString(); + playerXWinMessage.style.display = "flex"; + } + } else if (isDraw()) { + drawMessage.style.display = "flex"; + } else { + swapTurns(); + } +} + +function placeMark(box, currentClass) { + box.classList.add(currentClass); + box.innerHTML = currentClass; +} + +function swapTurns() { + isPlayerOTurn = !isPlayerOTurn; +} + +function checkWin(currentClass) { + return winnigCombinations.some((combination) => { + return combination.every((index) => boxes[index].classList.contains(currentClass)); + }); +} + +function isDraw() { + return [...boxes].every((box) => { + return box.classList.contains(playerX) || box.classList.contains(playerO); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/control.js b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/control.js new file mode 100644 index 000000000..b93397957 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/control.js @@ -0,0 +1,70 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +function newGame() { + messages.forEach(function (message) { return (message.style.display = "none"); }); + boxes.forEach(function (box) { + box.addEventListener("click", handleBoxClick); + box.innerHTML = ""; + box.classList.remove(playerO); + box.classList.remove(playerX); + }); +} +function resetScore() { + playerOScoreSpan.innerHTML = "0"; + playerXScoreSpan.innerHTML = "0"; + messages.forEach(function (message) { return (message.style.display = "none"); }); + boxes.forEach(function (box) { + box.addEventListener("click", handleBoxClick); + box.innerHTML = ""; + box.classList.remove(playerO); + box.classList.remove(playerX); + }); +} +function handleBoxClick(e) { + var box = e.target; + if (box.innerHTML != "") + return; + var currentClass = isPlayerOTurn ? playerO : playerX; + placeMark(box, currentClass); + if (checkWin(currentClass)) { + boxes.forEach(function (box) { return box.removeEventListener("click", handleBoxClick); }); + if (currentClass == playerO) { + playerOScore++; + playerOScoreSpan.innerHTML = playerOScore.toString(); + playerOWinMessage.style.display = "flex"; + } + else { + playerXScore++; + playerXScoreSpan.innerHTML = playerXScore.toString(); + playerXWinMessage.style.display = "flex"; + } + } + else if (isDraw()) { + drawMessage.style.display = "flex"; + } + else { + swapTurns(); + } +} +function placeMark(box, currentClass) { + box.classList.add(currentClass); + box.innerHTML = currentClass; +} +function swapTurns() { + isPlayerOTurn = !isPlayerOTurn; +} +function checkWin(currentClass) { + return winnigCombinations.some(function (combination) { + return combination.every(function (index) { return boxes[index].classList.contains(currentClass); }); + }); +} +function isDraw() { + return __spreadArrays(boxes).every(function (box) { + return box.classList.contains(playerX) || box.classList.contains(playerO); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/main.js b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/main.js new file mode 100644 index 000000000..0e52aab6a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/main.js @@ -0,0 +1,3 @@ +newGame(); +newGameBtn.addEventListener("click", newGame); +resetScoreBtn.addEventListener("click", resetScore); diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/models.js b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/models.js new file mode 100644 index 000000000..976525106 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/models.js @@ -0,0 +1,13 @@ +var playerOScore = 0; +var playerXScore = 0; +var isPlayerOTurn = false; +var winnigCombinations = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], +]; diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/style.css b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/style.css new file mode 100644 index 000000000..08eaa2ef4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/style.css @@ -0,0 +1,90 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + justify-content: space-around; + align-items: center; + background-color: black; +} + +.container { + background-color: white; + height: 80vh; + aspect-ratio: 1/1; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +.container .box { + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + font-size: 8rem; +} +.container .box:hover { + background-color: gainsboro; +} + +.player { + color: whitesmoke; + text-align: center; + display: flex; + flex-direction: column; + gap: 10px; +} +.player span { + font-size: 2em; + font-weight: bold; + background-color: darkolivegreen; +} + +.buttons { + position: absolute; + top: 2vh; + width: 30vw; + display: flex; + justify-content: space-between; +} +.buttons button { + width: 12vw; + padding: 0.3em; + font-size: 0.8rem; +} + +.playerOWin { + position: absolute; + background-color: darkorange; + padding: 0.5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + display: none; +} + +.playerXWin { + position: absolute; + background-color: darkorange; + padding: 0.5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + display: none; +} + +.draw { + position: absolute; + background-color: darkorange; + padding: 0.5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/view.js b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/view.js new file mode 100644 index 000000000..3f6d9d7f0 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/dist/view.js @@ -0,0 +1,11 @@ +var boxes = document.querySelectorAll(".box"); +var newGameBtn = document.querySelector(".newGameBtn"); +var resetScoreBtn = document.querySelector(".resetScoreBtn"); +var playerXScoreSpan = document.querySelector(".playerXScore"); +var playerOScoreSpan = document.querySelector(".playerOScore"); +var playerX = "X"; +var playerO = "O"; +var playerOWinMessage = document.querySelector(".playerOWin"); +var playerXWinMessage = document.querySelector(".playerXWin"); +var drawMessage = document.querySelector(".draw"); +var messages = document.querySelectorAll(".message"); diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/index.html b/02-TypeScript/14-events/home-puzzles/VladiBykanov/index.html new file mode 100644 index 000000000..b87138199 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/index.html @@ -0,0 +1,47 @@ + + + + + + + Tic Tac Toe + + + + + + + + +
                +

                Player X

                + 0 +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +

                Player O

                + 0 +
                +
                + + +
                +
                Player O wins this round
                +
                Player X wins this round
                +
                It's a draw
                + + diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/main.ts b/02-TypeScript/14-events/home-puzzles/VladiBykanov/main.ts new file mode 100644 index 000000000..0e52aab6a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/main.ts @@ -0,0 +1,3 @@ +newGame(); +newGameBtn.addEventListener("click", newGame); +resetScoreBtn.addEventListener("click", resetScore); diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/models.ts b/02-TypeScript/14-events/home-puzzles/VladiBykanov/models.ts new file mode 100644 index 000000000..3849c3495 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/models.ts @@ -0,0 +1,14 @@ +let playerOScore = 0; +let playerXScore = 0; +let isPlayerOTurn = false; + +const winnigCombinations = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], +]; diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/style.scss b/02-TypeScript/14-events/home-puzzles/VladiBykanov/style.scss new file mode 100644 index 000000000..fec4f9796 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/style.scss @@ -0,0 +1,92 @@ +* { + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + justify-content: space-around; + align-items: center; + background-color: black; +} + +.container{ + // border: 1px solid black; + background-color: white; + height: 80vh; + aspect-ratio: 1/1; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + .box{ + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + font-size: 8rem; + + } + .box:hover{ + background-color: gainsboro; + } +} + +.player{ + color: whitesmoke; + text-align: center; + display: flex; + flex-direction: column; + gap: 10px; + span{ + font-size: 2em; + font-weight: bold; + background-color: darkolivegreen; + } +} + +.buttons{ + position: absolute; + top: 2vh; + width: 30vw; + display: flex; + justify-content: space-between; + button{ + width: 12vw; + padding: .3em; + font-size: .8rem; + } +} + +.playerOWin{ + position: absolute; + background-color: darkorange; + padding: .5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + display: none; +} +.playerXWin{ + position: absolute; + background-color: darkorange; + padding: .5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + display: none; +} + +.draw{ + position: absolute; + background-color: darkorange; + padding: .5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + // display: none; +} diff --git a/02-TypeScript/14-events/home-puzzles/VladiBykanov/view.ts b/02-TypeScript/14-events/home-puzzles/VladiBykanov/view.ts new file mode 100644 index 000000000..ba5e54240 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/VladiBykanov/view.ts @@ -0,0 +1,25 @@ +const boxes = document.querySelectorAll(".box") as NodeListOf; +const newGameBtn = document.querySelector(".newGameBtn") as HTMLButtonElement; +const resetScoreBtn = document.querySelector( + ".resetScoreBtn" +) as HTMLButtonElement; +const playerXScoreSpan = document.querySelector( + ".playerXScore" +) as HTMLSpanElement; +const playerOScoreSpan = document.querySelector( + ".playerOScore" +) as HTMLSpanElement; + +const playerX = "X"; +const playerO = "O"; + +const playerOWinMessage = document.querySelector( + ".playerOWin" +) as HTMLDivElement; +const playerXWinMessage = document.querySelector( + ".playerXWin" +) as HTMLDivElement; +const drawMessage = document.querySelector(".draw") as HTMLDivElement; +const messages = document.querySelectorAll( + ".message" +) as NodeListOf; diff --git a/02-TypeScript/14-events/home-puzzles/angela/dist/tictaktoe.css b/02-TypeScript/14-events/home-puzzles/angela/dist/tictaktoe.css new file mode 100644 index 000000000..03781fae7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/angela/dist/tictaktoe.css @@ -0,0 +1,85 @@ +.gameContainer { + height: 30rem; + width: 25rem; + background-color: pink; + margin: auto; + background: var(--color-secondary); + color: var(--font-color); +} +.gameContainer__title { + display: flex; + gap: 2rem; + align-items: baseline; + justify-content: center; + font-family: "Lobster", cursive; +} +.gameContainer__title--theme-btn { + width: 3em; + height: 3em; + padding: 0.5em; + cursor: pointer; + border: none; + background-color: transparent; +} +.gameContainer__title--theme-btn span { + color: var(--font-color); +} +.gameContainer__firstRow { + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; +} +.gameContainer__firstRow--cell { + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; +} +.gameContainer__secondRow { + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; +} +.gameContainer__secondRow--cell { + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; +} +.gameContainer__thirdRow { + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; +} +.gameContainer__thirdRow--cell { + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; +} + +.theme-light { + --color-primary: #0060df; + --color-secondary: #efad72; + --color-accent: #fd6f53; + --font-color: #000000; +} + +.theme-dark { + --color-primary: #17ed90; + --color-secondary: #051a83; + --color-accent: #12cdea; + --font-color: #ffffff; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/angela/dist/tictaktoe.js b/02-TypeScript/14-events/home-puzzles/angela/dist/tictaktoe.js new file mode 100644 index 000000000..c00d6c40f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/angela/dist/tictaktoe.js @@ -0,0 +1,75 @@ +function themes(themeName) { + localStorage.setItem('theme', themeName); + document.documentElement.classList = themeName; +} +function setThemes() { + if (localStorage.getItem('theme') === 'theme-dark') { + themes('theme-light'); + } + else { + themes('theme-dark'); + } +} +(function () { + if (localStorage.getItem('theme') === 'theme-dark') { + themes('theme-light'); + } + else { + themes('theme-dark'); + } +}); +var game = document.querySelector(".gameContainer__firstRow--cell"); +var firstRow = document.querySelector(".gameContainer__firstRow"); +var clicks = 0; +function getClicks(obj) { + var winner = "false"; + var rowwinner = "true"; + var colwinner = "true"; + clicks++; + var value = "O"; + if (clicks % 2 == 1) { + value = "X"; + } + obj.innerHTML = value; + console.log(value); + var rowitems = obj.parentElement.children; + var colItems = document.getElementsByClassName(obj.className.split(" ")[1]); + for (var i = 0; i < rowitems.length; i++) { + try { + var nextval = i + 1; + if (rowitems[i].innerHTML != rowitems[(nextval)].innerHTML) { + rowwinner = "false"; + } + } + catch (error) { + } + } + if (rowwinner == "false") { + for (var i = 0; i < colItems.length; i++) { + try { + var nextval = i + 1; + if (colItems[i].innerHTML != colItems[(nextval)].innerHTML) { + colwinner = "false"; + } + } + catch (error) { + } + } + } + if (colwinner == "true" || rowwinner == "true") { + winner = "true"; + } + if (winner == "false") { + var diLeftWinner = document.querySelectorAll('#a1, #b2, #c3'); + var diRightWinner = document.querySelectorAll('#a3, #b2, #c1'); + if ((diLeftWinner[0].innerHTML == diLeftWinner[1].innerHTML && diLeftWinner[1].innerHTML == diLeftWinner[2].innerHTML) || (diRightWinner[0].innerHTML == diRightWinner[1].innerHTML && diRightWinner[1].innerHTML == diRightWinner[2].innerHTML)) { + winner = "true"; + } + } + if (winner == "true") { + console.log("\"winner is \" " + value + " "); + } + if (clicks >= 9 && winner == "false") { + console.log("draw"); + } +} diff --git a/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.css b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.css new file mode 100644 index 000000000..03781fae7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.css @@ -0,0 +1,85 @@ +.gameContainer { + height: 30rem; + width: 25rem; + background-color: pink; + margin: auto; + background: var(--color-secondary); + color: var(--font-color); +} +.gameContainer__title { + display: flex; + gap: 2rem; + align-items: baseline; + justify-content: center; + font-family: "Lobster", cursive; +} +.gameContainer__title--theme-btn { + width: 3em; + height: 3em; + padding: 0.5em; + cursor: pointer; + border: none; + background-color: transparent; +} +.gameContainer__title--theme-btn span { + color: var(--font-color); +} +.gameContainer__firstRow { + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; +} +.gameContainer__firstRow--cell { + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; +} +.gameContainer__secondRow { + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; +} +.gameContainer__secondRow--cell { + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; +} +.gameContainer__thirdRow { + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; +} +.gameContainer__thirdRow--cell { + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; +} + +.theme-light { + --color-primary: #0060df; + --color-secondary: #efad72; + --color-accent: #fd6f53; + --font-color: #000000; +} + +.theme-dark { + --color-primary: #17ed90; + --color-secondary: #051a83; + --color-accent: #12cdea; + --font-color: #ffffff; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.html b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.html new file mode 100644 index 000000000..191047621 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.html @@ -0,0 +1,47 @@ + + + + + + + Document + + + + + + + + + +
                +
                +

                Tic Tac Toe

                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.scss b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.scss new file mode 100644 index 000000000..b36b26bff --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.scss @@ -0,0 +1,121 @@ +.gameContainer{ + height: 30rem; + width: 25rem; + background-color: pink; + margin: auto; + background: var(--color-secondary); + color: var(--font-color); + + &__title{ + display: flex; + gap: 2rem; + align-items: baseline; + justify-content: center; + font-family: 'Lobster', cursive; + &--theme-btn{ + width: 3em; + height: 3em; + padding: 0.5em; + cursor: pointer; + border: none; + background-color: transparent; + span{ + color: var(--font-color); + } + } + } + + &__firstRow{ + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; + &--cell{ + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; + } + } + &__secondRow{ + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; + &--cell{ + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; + } + } + &__thirdRow{ + width: 100%; + height: 25%; + display: flex; + justify-content: space-evenly; + &--cell{ + height: 100%; + width: 30%; + outline: 1px solid var(--font-color); + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; + } + } + +} +.theme-light { + --color-primary: #0060df; + --color-secondary: #efad72; + --color-accent: #fd6f53; + --font-color: #000000; + } +.theme-dark { + --color-primary: #17ed90; + --color-secondary: #051a83; + --color-accent: #12cdea; + --font-color: #ffffff; + } + +// #popup{ +// margin: auto; +// width: 28rem; +// height: 10rem; +// background-color: pink; +// z-index: 1; +// position: relative; +// bottom: 18rem; +// background: var(--color-accent); +// color: var(--font-color); +// display: flex; +// justify-content: center; +// align-items: center; +// font-size: xx-large; +// flex-direction: column; +// justify-content: space-around; +// font-family: 'Lobster', cursive; +// transition: transform 0.4s , top 0.4s; +// visibility: hidden; + + +// button{ +// height: 2rem; +// width: 30%; +// background-color: transparent; +// font-family: 'Lobster', cursive; +// cursor: pointer; +// } + +// } + +// .open-popup{ +// visibility: visible; +// } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.ts b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.ts new file mode 100644 index 000000000..fda98f1e1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/angela/tictaktoe.ts @@ -0,0 +1,86 @@ +function themes(themeName){ + localStorage.setItem('theme',themeName); + document.documentElement.classList = themeName; +} +function setThemes(){ + if(localStorage.getItem('theme')=== 'theme-dark'){ + themes('theme-light'); + }else { + themes('theme-dark'); + } +} +(function () { + if(localStorage.getItem('theme')=== 'theme-dark'){ + themes('theme-light'); + }else { + themes('theme-dark'); + } +}) +const game:HTMLHeadingElement|null = document.querySelector(".gameContainer__firstRow--cell"); +let firstRow = document.querySelector(".gameContainer__firstRow"); + +let clicks = 0; + +function getClicks (obj){ + let winner = "false"; + let rowwinner = "true" + var colwinner = "true" + clicks++; + let value = "O" + if(clicks%2==1){ + value="X" + } + obj.innerHTML = value; + console.log(value); + +let rowitems = obj.parentElement.children +let colItems = document.getElementsByClassName(obj.className.split(" ")[1]) + +for(let i=0; i=9 && winner == "false"){ + console.log("draw"); +} + + +} diff --git a/02-TypeScript/14-events/home-puzzles/instructions.md b/02-TypeScript/14-events/home-puzzles/instructions.md new file mode 100644 index 000000000..ea95e6c1a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/instructions.md @@ -0,0 +1,3 @@ +1) create a box. When the user press on the, an alert show "You pressed me" +2) create a 3 by 3 board of light blue color. when a box is pressed, the color is changed to black. even better, an image of a chess pawn appear. +3) create tick tac toe game \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/KRS-One - Sound of da Police (Official Video).mp3 b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/KRS-One - Sound of da Police (Official Video).mp3 new file mode 100644 index 000000000..c072abf5e Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/KRS-One - Sound of da Police (Official Video).mp3 differ diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/control.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/control.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/helpers.js new file mode 100644 index 000000000..dd55bdabb --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/helpers.js @@ -0,0 +1,2 @@ +var audio = new Audio("./KRS-One - Sound of da Police (Official Video).mp3"); +var box = document.querySelectorAll(".box"); diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/index.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/model.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/style.css b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/style.css new file mode 100644 index 000000000..4ace9d70e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/style.css @@ -0,0 +1,24 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + margin-top: 90%; + margin-left: 50%; + height: 300px; + width: 250px; + border: 3px solid black; + border-radius: 100% 100% 0% 0%; + box-shadow: 10px 10px 15px; + background-color: #f22525; + color: black; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + transition: all 0.5s; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/view.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/view.js new file mode 100644 index 000000000..5a287e58a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/dist/view.js @@ -0,0 +1,22 @@ +var myBox = document.querySelector("#myBox"); +if (myBox) { + myBox.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxs = document.querySelectorAll(".box"); +boxs.forEach(function (box) { + box.addEventListener("click", function (event) { + box.innerHTML = alert("Turn up the volume...!\n That's the sound of the police"); + box.innerText = "Is The Sound Of The Police"; + }); + box.addEventListener("click", function (event) { + audio.play(); + }); + box.addEventListener("mouseenter", function (event) { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", function (event) { + box.style.backgroundColor = 'blue'; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/helpers.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/helpers.ts new file mode 100644 index 000000000..402d21030 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/helpers.ts @@ -0,0 +1,2 @@ +const audio = new Audio("./KRS-One - Sound of da Police (Official Video).mp3"); +const box = document.querySelectorAll(".box"); diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/index.html b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/index.html new file mode 100644 index 000000000..d0b9c7abe --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/index.html @@ -0,0 +1,25 @@ + + + + + + + + Document + + + + + + + + + + + +
                +
                Don`t Click Me
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/index.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/model.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/model.ts new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/model.ts @@ -0,0 +1 @@ + diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/style.css b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/style.css new file mode 100644 index 000000000..cc9c5994b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/style.css @@ -0,0 +1,24 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; +} +.wrapper .box { + margin-top: 90%; + margin-left: 50%; + height: 300px; + width: 250px; + border: 3px solid black; + border-radius: 100% 100% 0% 0%; + box-shadow: 10px 10px 15px; + background-color: rgb(242, 37, 37); + color: black; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + transition: all 0.5s; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/style.scss b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/style.scss new file mode 100644 index 000000000..501a89f40 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/style.scss @@ -0,0 +1,25 @@ +.wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + max-width: 75ch; + margin: auto; + + .box{ + margin-top: 90%; + margin-left: 50%; + height: 300px; + width: 250px; + border: 3px solid black; + border-radius: 100% 100% 0% 0%; + box-shadow: 10px 10px 15px; + background-color: rgb(242, 37, 37); + color: black; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + transition: all 0.5s; + cursor: pointer; + } +} diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/view.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/view.ts new file mode 100644 index 000000000..13a2a4fac --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-1/view.ts @@ -0,0 +1,29 @@ +const myBox: HTMLElement|null = document.querySelector("#myBox"); +if (myBox) { + myBox.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxs: any = document.querySelectorAll(".box"); + + +boxs.forEach((box) => { + box.addEventListener("click", (event) => { + + box.innerHTML =alert(`Turn up the volume...! + That's the sound of the police`) + box.innerText = `Is The Sound Of The Police`; + + }); + box.addEventListener("click", (event) => { + audio.play(); + }); + + box.addEventListener("mouseenter", (event) => { + box.style.backgroundColor = 'red'; + }); + box.addEventListener("mouseout", (event) => { + box.style.backgroundColor = 'blue'; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/control.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/control.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/helprs.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/helprs.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/index.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/style.css b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/style.css new file mode 100644 index 000000000..d8c672e70 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/style.css @@ -0,0 +1,24 @@ +.wapper { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px 75px 75px; + justify-content: center; + gap: 70px; + margin: 80px; +} +.wapper .box { + width: 100px; + height: 100px; + border: 1px solid black; +} +.wapper .p1 { + width: 100px; + height: 100px; + border: 1px solid black; +} + +h1 { + display: grid; + text-align: center; + padding-top: 30px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/view.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/view.js new file mode 100644 index 000000000..bfe74e8c7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/dist/view.js @@ -0,0 +1,26 @@ +var divBox = document.querySelector(".box"); +if (divBox) { + divBox.addEventListener("click", function (event) { + console.log(event); + }); +} +var boxs = document.querySelectorAll(".box"); +boxs.forEach(function (box) { + box.addEventListener("click", function (event) { + box.style.backgroundImage = "url(https://img.lovepik.com/free-png/20211105/lovepik-chess-png-image_400298812_wh1200.png)"; + box.style.backgroundSize = "100px 100px"; + }); +}); +var divp1 = document.querySelector(".p1"); +if (divp1) { + divp1.addEventListener("click", function (event) { + console.log(event); + }); +} +var p1 = document.querySelectorAll(".p1"); +p1.forEach(function (box1) { + box1.addEventListener("click", function (event) { + box1.style.backgroundImage = "url(https://media.istockphoto.com/id/173838005/photo/black-pawn.jpg?s=612x612&w=0&k=20&c=5C-60Q9jSyakRXItxs47mrCkKKECKTcPiIGSD7RYC5U=)"; + box1.style.backgroundSize = "100px 100px"; + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/helprs.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/helprs.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/index.html b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/index.html new file mode 100644 index 000000000..f77e7acd1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/index.html @@ -0,0 +1,35 @@ + + + + + + + Document + + + + + + + +

                Chess

                +
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/index.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/style.css b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/style.css new file mode 100644 index 000000000..d8c672e70 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/style.css @@ -0,0 +1,24 @@ +.wapper { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px 75px 75px; + justify-content: center; + gap: 70px; + margin: 80px; +} +.wapper .box { + width: 100px; + height: 100px; + border: 1px solid black; +} +.wapper .p1 { + width: 100px; + height: 100px; + border: 1px solid black; +} + +h1 { + display: grid; + text-align: center; + padding-top: 30px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/style.scss b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/style.scss new file mode 100644 index 000000000..73a293a16 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/style.scss @@ -0,0 +1,25 @@ +.wapper{ + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px 75px 75px; + justify-content: center; + gap: 70px; + margin: 80px; + .box{ + // background-color: white; + width: 100px; + height: 100px; + border: 1px solid black; + } + .p1{ + // background-color: white; + width: 100px; + height: 100px; + border: 1px solid black; + } +} + h1{ + display: grid; + text-align: center; + padding-top: 30px; + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/view.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/view.ts new file mode 100644 index 000000000..ea1d4236c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-2/view.ts @@ -0,0 +1,34 @@ +const divBox: HTMLElement|null = document.querySelector(".box"); +if (divBox) { + divBox.addEventListener("click", (event) => { + console.log(event); + }); +} + +const boxs:any = document.querySelectorAll(".box"); + + +boxs.forEach((box) => { + box.addEventListener("click",(event) => { + box.style.backgroundImage= `url(https://img.lovepik.com/free-png/20211105/lovepik-chess-png-image_400298812_wh1200.png)`; + box.style.backgroundSize= `100px 100px`; + + + }); +}); +const divp1: HTMLElement|null = document.querySelector(".p1"); +if (divp1) { + divp1.addEventListener("click", (event) => { + console.log(event); + }); +} + +const p1: any = document.querySelectorAll(".p1") + +p1.forEach((box1) => { + box1.addEventListener("click",(event) => { + box1.style.backgroundImage= `url(https://media.istockphoto.com/id/173838005/photo/black-pawn.jpg?s=612x612&w=0&k=20&c=5C-60Q9jSyakRXItxs47mrCkKKECKTcPiIGSD7RYC5U=)`; + box1.style.backgroundSize= `100px 100px`; + + }); +}); \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/control.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/control.ts new file mode 100644 index 000000000..dce312b65 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/control.ts @@ -0,0 +1,13 @@ +function switchPlayers(event) { + try { + const box = event.target; + if (box.textContent !== "") { + return; + } + box.textContent = currentPlayer.name; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } catch (error) { + console.error(error); + } + } + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/control.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/control.js new file mode 100644 index 000000000..7e7de79f6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/control.js @@ -0,0 +1,13 @@ +function switchPlayers(event) { + try { + var box = event.target; + if (box.textContent !== "") { + return; + } + box.textContent = currentPlayer.name; + currentPlayer = currentPlayer === player1 ? player2 : player1; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/index.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/index.js new file mode 100644 index 000000000..9a8ec56ef --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/index.js @@ -0,0 +1 @@ +switchPlayers(event); diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/model.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/model.js new file mode 100644 index 000000000..9b5135785 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/model.js @@ -0,0 +1,9 @@ +var players = /** @class */ (function () { + function players(name) { + this.name = name; + } + return players; +}()); +var player1 = new players("X"); +var player2 = new players("O"); +var currentPlayer = player1 || player2; diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/style.css b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/style.css new file mode 100644 index 000000000..2959f3d83 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/style.css @@ -0,0 +1,23 @@ +.container { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px; + justify-content: center; + gap: 30px; + margin: auto; +} + +.box { + width: 95px; + height: 95px; + background-color: #b39797; + display: grid; + border: 3px solid black; + text-align: center; + align-items: center; + cursor: pointer; +} + +h1 { + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/view.js b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/view.js new file mode 100644 index 000000000..600638ee7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/dist/view.js @@ -0,0 +1,4 @@ +var box = document.querySelectorAll(".box"); +for (var i = 0; i < box.length; i++) { + box[i].addEventListener("click", switchPlayers); +} diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/helpers.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/index.html b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/index.html new file mode 100644 index 000000000..df9404ad4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/index.html @@ -0,0 +1,34 @@ + + + + + + + + Document + + + + + + + + + + + +

                Tic Tac Toe

                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/index.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/index.ts new file mode 100644 index 000000000..b9c85a969 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/index.ts @@ -0,0 +1 @@ +switchPlayers(event) \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/model.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/model.ts new file mode 100644 index 000000000..168ff1d19 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/model.ts @@ -0,0 +1,11 @@ +class players { + constructor( + public name: string, + ) {} + } + + let player1 = new players(`X`) + let player2 = new players(`O`) + + type Turn = "X" | "O" | "" + let currentPlayer: players = player1 || player2; \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/style.css b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/style.css new file mode 100644 index 000000000..0d113519f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/style.css @@ -0,0 +1,23 @@ +.container { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px; + justify-content: center; + gap: 30px; + margin: auto; +} + +.box { + width: 95px; + height: 95px; + background-color: rgb(179, 151, 151); + display: grid; + border: 3px solid black; + text-align: center; + align-items: center; + cursor: pointer; +} + +h1 { + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/style.scss b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/style.scss new file mode 100644 index 000000000..63206684c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/style.scss @@ -0,0 +1,27 @@ +.container { + margin-top: 8rem; + display: grid; + grid-template-columns: 75px 75px 75px; + justify-content: center; + gap: 30px; + margin: auto; + +} + +.box { + width: 95px; + height: 95px; + background-color: rgb(179, 151, 151); + display: grid; + border: 3px solid black; + text-align:center; + align-items: center; + cursor: pointer; + + + +} + +h1{ + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/view.ts b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/view.ts new file mode 100644 index 000000000..1f64ea6b9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itayAmosi/task-3/view.ts @@ -0,0 +1,5 @@ +const box = document.querySelectorAll(".box"); +for (let i = 0; i < box.length; i++) { + box[i].addEventListener("click", switchPlayers); +} + diff --git a/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/index.html b/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/index.html new file mode 100644 index 000000000..6a0979409 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/index.js b/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/index.js new file mode 100644 index 000000000..c33bb5b4f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/index.js @@ -0,0 +1,16 @@ +function startIt() { + var creatBox = document.createElement("div"); + document.body.appendChild(creatBox); + creatBox.innerHTML = "click me"; + creatBox.addEventListener("click", function () { + return alert("This Box Is Been Clicked"); + }); + creatBox.addEventListener("mouseover", function () { + var newpop = document.createElement("p"); + creatBox.appendChild(newpop); + newpop.innerHTML = "You Hover Me"; + creatBox.addEventListener("mouseleave", function () { + creatBox.removeChild(newpop); + }); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/style.css b/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/style.css new file mode 100644 index 000000000..cf41c0522 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik b/1/dist/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items: center; +} +body div { + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; +} +body div:hover { + background-color: bisque; + color: red; +} +body p { + width: 120px; + height: 110px; + background-color: #c62828; + color: white; + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik b/1/index.ts b/02-TypeScript/14-events/home-puzzles/itsik b/1/index.ts new file mode 100644 index 000000000..decb1f223 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik b/1/index.ts @@ -0,0 +1,21 @@ +function startIt(){ + let creatBox = document.createElement("div") as HTMLDivElement; + document.body.appendChild(creatBox); + creatBox.innerHTML = "click me" + creatBox.addEventListener("click", ()=>{ + return alert("This Box Is Been Clicked") + }) + creatBox.addEventListener("mouseover", ()=>{ + let newpop = document.createElement("p")as HTMLParagraphElement; + creatBox.appendChild(newpop) + newpop.innerHTML = "You Hover Me" + creatBox.addEventListener("mouseleave", ()=>{ + creatBox.removeChild(newpop) + }) + }) + + + + + + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik b/1/style.css b/02-TypeScript/14-events/home-puzzles/itsik b/1/style.css new file mode 100644 index 000000000..8305ddd1e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik b/1/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items: center; +} +body div { + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; +} +body div:hover { + background-color: bisque; + color: red; +} +body p { + width: 120px; + height: 110px; + background-color: rgb(198, 40, 40); + color: rgb(255, 255, 255); + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik b/1/style.scss b/02-TypeScript/14-events/home-puzzles/itsik b/1/style.scss new file mode 100644 index 000000000..198c88313 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik b/1/style.scss @@ -0,0 +1,44 @@ +body{ + margin:0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items:center; + + div{ + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; + + + } + div:hover{ + background-color: bisque; + color: red; + + } + + p{ + width: 120px; + height: 110px; + background-color: rgb(198, 40, 40); + color: rgb(255, 255, 255); + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik-b/dist/style.css b/02-TypeScript/14-events/home-puzzles/itsik-b/dist/style.css new file mode 100644 index 000000000..a849e08fc --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik-b/dist/style.css @@ -0,0 +1,40 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: georgia; +} + +h1 { + font-size: 60px; + text-align: center; + color: blue; +} + +.player { + font-size: 30px; + text-align: center; + color: red; + margin: 50px 0px; +} + +#wapper { + display: grid; + grid-template-columns: repeat(3, 120px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 35%; +} + +.box { + height: 120px; + background-color: #cdfaff; + font-size: 45px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik-b/dist/tictoc.html b/02-TypeScript/14-events/home-puzzles/itsik-b/dist/tictoc.html new file mode 100644 index 000000000..fc37fce9f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik-b/dist/tictoc.html @@ -0,0 +1,29 @@ + + + + + + + Tic-Tac-Toe + + + + +

                Tic Tac Toe

                +
                Player 1
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik-b/dist/tictoc.js b/02-TypeScript/14-events/home-puzzles/itsik-b/dist/tictoc.js new file mode 100644 index 000000000..8b94cbf1f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik-b/dist/tictoc.js @@ -0,0 +1,44 @@ +var playerOne = "X"; +var playerTwo = "O"; +var turn = true; +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { + box.addEventListener("click", gameStart); +}); +function gameStart() { + if (this.textContent != "") + return; + if (turn) + this.textContent = playerOne; + else + this.textContent = playerTwo; + turn = !turn; + var checkwin = chachWin(); + if (checkwin != "") { + } +} +// check for win +function chachWin() { + var whoWin = ""; + var boxWin = document.querySelectorAll(".box"); + var checkWhoIsWinner = [ + { one: 0, two: 1, three: 2 }, + { one: 3, two: 4, three: 5 }, + { one: 6, two: 7, three: 8 }, + { one: 0, two: 3, three: 6 }, + { one: 1, two: 4, three: 7 }, + { one: 2, two: 5, three: 8 }, + { one: 0, two: 4, three: 8 }, + { one: 2, two: 4, three: 6 }, + ]; + for (var i = 0; i < checkWhoIsWinner.length; i++) { + if ((boxWin[checkWhoIsWinner[i].one].innerHTML == + boxWin[checkWhoIsWinner[i].two].innerHTML) && + (boxWin[checkWhoIsWinner[i].one].innerHTML == + boxWin[checkWhoIsWinner[i].three].innerHTML)) { + whoWin = ("" + checkWhoIsWinner[i].one + checkWhoIsWinner[i].two + checkWhoIsWinner[i].three + boxWin[checkWhoIsWinner[i].three].innerHTML); + return (whoWin); + } + } + return (whoWin); +} diff --git a/02-TypeScript/14-events/home-puzzles/itsik-b/style.css b/02-TypeScript/14-events/home-puzzles/itsik-b/style.css new file mode 100644 index 000000000..d76e40eb7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik-b/style.css @@ -0,0 +1,40 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: georgia; +} + +h1 { + font-size: 60px; + text-align: center; + color: blue; +} + +.player { + font-size: 30px; + text-align: center; + color: red; + margin: 50px 0px; +} + +#wapper { + display: grid; + grid-template-columns: repeat(3, 120px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 35%; +} + +.box { + height: 120px; + background-color: rgb(205, 250, 255); + font-size: 45px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik-b/style.scss b/02-TypeScript/14-events/home-puzzles/itsik-b/style.scss new file mode 100644 index 000000000..718a73a6f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik-b/style.scss @@ -0,0 +1,45 @@ +*{ + padding: 0; + margin: 0; +} + +body{ + font-family: georgia; + +} + +h1{ + font-size: 60px; + text-align: center; + color: blue; + +} +.player{ + font-size: 30px; + text-align: center; + color: red; + margin: 50px 0px; + +} + + +#wapper{ + display: grid; + grid-template-columns: repeat(3, 120px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 35%; + +} + +.box{ + height: 120px; + background-color: rgb(205, 250, 255); + font-size: 45px; + display: flex; + justify-content: center; + align-items: center; + +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik-b/tictoc.ts b/02-TypeScript/14-events/home-puzzles/itsik-b/tictoc.ts new file mode 100644 index 000000000..82ec5ccf0 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik-b/tictoc.ts @@ -0,0 +1,50 @@ +let playerOne = "X"; +let playerTwo = "O"; +let turn = true; +let boxes = document.querySelectorAll(".box") +boxes.forEach((box) =>{ + box.addEventListener("click", gameStart) +}) + +function gameStart(){ + if(this.textContent!="") return; + if(turn) this.textContent = playerOne; + else this.textContent = playerTwo; + turn = !turn + let checkwin = chachWin() + if (checkwin != ""){ + +} +} +// check for win + +function chachWin() :string{ + let whoWin = "" + const boxWin = document.querySelectorAll(".box") + const checkWhoIsWinner = [ + {one: 0, two: 1, three: 2}, + {one: 3, two: 4, three: 5}, + {one: 6, two: 7, three: 8}, + {one: 0, two: 3, three: 6}, + {one: 1, two: 4, three: 7}, + {one: 2, two: 5, three: 8}, + {one: 0, two: 4, three: 8}, + {one: 2, two: 4, three: 6}, + + ]; + + for(let i=0; i + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik/1/dist/index.js b/02-TypeScript/14-events/home-puzzles/itsik/1/dist/index.js new file mode 100644 index 000000000..c33bb5b4f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik/1/dist/index.js @@ -0,0 +1,16 @@ +function startIt() { + var creatBox = document.createElement("div"); + document.body.appendChild(creatBox); + creatBox.innerHTML = "click me"; + creatBox.addEventListener("click", function () { + return alert("This Box Is Been Clicked"); + }); + creatBox.addEventListener("mouseover", function () { + var newpop = document.createElement("p"); + creatBox.appendChild(newpop); + newpop.innerHTML = "You Hover Me"; + creatBox.addEventListener("mouseleave", function () { + creatBox.removeChild(newpop); + }); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/itsik/1/dist/style.css b/02-TypeScript/14-events/home-puzzles/itsik/1/dist/style.css new file mode 100644 index 000000000..cf41c0522 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik/1/dist/style.css @@ -0,0 +1,39 @@ +body { + margin: 0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items: center; +} +body div { + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; +} +body div:hover { + background-color: bisque; + color: red; +} +body p { + width: 120px; + height: 110px; + background-color: #c62828; + color: white; + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik/1/index.ts b/02-TypeScript/14-events/home-puzzles/itsik/1/index.ts new file mode 100644 index 000000000..decb1f223 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik/1/index.ts @@ -0,0 +1,21 @@ +function startIt(){ + let creatBox = document.createElement("div") as HTMLDivElement; + document.body.appendChild(creatBox); + creatBox.innerHTML = "click me" + creatBox.addEventListener("click", ()=>{ + return alert("This Box Is Been Clicked") + }) + creatBox.addEventListener("mouseover", ()=>{ + let newpop = document.createElement("p")as HTMLParagraphElement; + creatBox.appendChild(newpop) + newpop.innerHTML = "You Hover Me" + creatBox.addEventListener("mouseleave", ()=>{ + creatBox.removeChild(newpop) + }) + }) + + + + + + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsik/1/style.scss b/02-TypeScript/14-events/home-puzzles/itsik/1/style.scss new file mode 100644 index 000000000..198c88313 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsik/1/style.scss @@ -0,0 +1,44 @@ +body{ + margin:0; + width: 100vw; + height: 100vh; + background-color: yellow; + display: flex; + justify-content: center; + align-items:center; + + div{ + background-color: cadetblue; + width: 150px; + height: 130px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + border: 4px solid black; + border-radius: 7% 35% 7%; + position: relative; + + + } + div:hover{ + background-color: bisque; + color: red; + + } + + p{ + width: 120px; + height: 110px; + background-color: rgb(198, 40, 40); + color: rgb(255, 255, 255); + font-size: 30px; + position: absolute; + display: flex; + bottom: 110px; + right: 140px; + border-radius: 7% 30% 30%; + text-align: center; + transition: 2s ease-in-out; + } +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/style.css b/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/style.css new file mode 100644 index 000000000..a849e08fc --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/style.css @@ -0,0 +1,40 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: georgia; +} + +h1 { + font-size: 60px; + text-align: center; + color: blue; +} + +.player { + font-size: 30px; + text-align: center; + color: red; + margin: 50px 0px; +} + +#wapper { + display: grid; + grid-template-columns: repeat(3, 120px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 35%; +} + +.box { + height: 120px; + background-color: #cdfaff; + font-size: 45px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/tictoc.html b/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/tictoc.html new file mode 100644 index 000000000..fc37fce9f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/tictoc.html @@ -0,0 +1,29 @@ + + + + + + + Tic-Tac-Toe + + + + +

                Tic Tac Toe

                +
                Player 1
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/tictoc.js b/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/tictoc.js new file mode 100644 index 000000000..8b94cbf1f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsikVesti/dist/tictoc.js @@ -0,0 +1,44 @@ +var playerOne = "X"; +var playerTwo = "O"; +var turn = true; +var boxes = document.querySelectorAll(".box"); +boxes.forEach(function (box) { + box.addEventListener("click", gameStart); +}); +function gameStart() { + if (this.textContent != "") + return; + if (turn) + this.textContent = playerOne; + else + this.textContent = playerTwo; + turn = !turn; + var checkwin = chachWin(); + if (checkwin != "") { + } +} +// check for win +function chachWin() { + var whoWin = ""; + var boxWin = document.querySelectorAll(".box"); + var checkWhoIsWinner = [ + { one: 0, two: 1, three: 2 }, + { one: 3, two: 4, three: 5 }, + { one: 6, two: 7, three: 8 }, + { one: 0, two: 3, three: 6 }, + { one: 1, two: 4, three: 7 }, + { one: 2, two: 5, three: 8 }, + { one: 0, two: 4, three: 8 }, + { one: 2, two: 4, three: 6 }, + ]; + for (var i = 0; i < checkWhoIsWinner.length; i++) { + if ((boxWin[checkWhoIsWinner[i].one].innerHTML == + boxWin[checkWhoIsWinner[i].two].innerHTML) && + (boxWin[checkWhoIsWinner[i].one].innerHTML == + boxWin[checkWhoIsWinner[i].three].innerHTML)) { + whoWin = ("" + checkWhoIsWinner[i].one + checkWhoIsWinner[i].two + checkWhoIsWinner[i].three + boxWin[checkWhoIsWinner[i].three].innerHTML); + return (whoWin); + } + } + return (whoWin); +} diff --git a/02-TypeScript/14-events/home-puzzles/itsikVesti/style.scss b/02-TypeScript/14-events/home-puzzles/itsikVesti/style.scss new file mode 100644 index 000000000..718a73a6f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsikVesti/style.scss @@ -0,0 +1,45 @@ +*{ + padding: 0; + margin: 0; +} + +body{ + font-family: georgia; + +} + +h1{ + font-size: 60px; + text-align: center; + color: blue; + +} +.player{ + font-size: 30px; + text-align: center; + color: red; + margin: 50px 0px; + +} + + +#wapper{ + display: grid; + grid-template-columns: repeat(3, 120px); + gap: 5px; + grid-row: 30px; + grid-column: 30px; + max-width: 30cm; + margin-left: 35%; + +} + +.box{ + height: 120px; + background-color: rgb(205, 250, 255); + font-size: 45px; + display: flex; + justify-content: center; + align-items: center; + +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/itsikVesti/tictoc.ts b/02-TypeScript/14-events/home-puzzles/itsikVesti/tictoc.ts new file mode 100644 index 000000000..82ec5ccf0 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/itsikVesti/tictoc.ts @@ -0,0 +1,50 @@ +let playerOne = "X"; +let playerTwo = "O"; +let turn = true; +let boxes = document.querySelectorAll(".box") +boxes.forEach((box) =>{ + box.addEventListener("click", gameStart) +}) + +function gameStart(){ + if(this.textContent!="") return; + if(turn) this.textContent = playerOne; + else this.textContent = playerTwo; + turn = !turn + let checkwin = chachWin() + if (checkwin != ""){ + +} +} +// check for win + +function chachWin() :string{ + let whoWin = "" + const boxWin = document.querySelectorAll(".box") + const checkWhoIsWinner = [ + {one: 0, two: 1, three: 2}, + {one: 3, two: 4, three: 5}, + {one: 6, two: 7, three: 8}, + {one: 0, two: 3, three: 6}, + {one: 1, two: 4, three: 7}, + {one: 2, two: 5, three: 8}, + {one: 0, two: 4, three: 8}, + {one: 2, two: 4, three: 6}, + + ]; + + for(let i=0; i> + players: PlayerToken + wait: number + waiting: boolean + score: Score + currentPlayer: string + + constructor(display: Display) { + this.display = display + this.board = this.createBoard() + this.players = { x: "x", o: "o" } + this.wait = 3000; + this.waiting = false + this.score = { x: 0, o: 0 } + this.currentPlayer = this.players.x + this.display.bindHandler(this.clickCell) + } + get getWait(){ + return this.wait + } + set changeWait(newWait){ + this.wait = newWait + newWait = 0; + } + /** + * Click a cell in the game board and determine if its a win, a stalemate, or + * the game continues. Game over or switch player. + */ + //fonction qui lorsque le joueur clique sur une case determine la suite de la partie + + clickCell = (row: number, col: number) => { + const canContinue = this.board[row][col] === '' //constante qui determine que la case du tableau est vide + + if (canContinue && !this.waiting) { + this.board[row][col] = this.currentPlayer + this.display.updateBoard(row, col, this.currentPlayer) // si la case est vide et il y'a pas d'attente (partie pas terminee) alors lorsqu'il clicke ,le token saffiche et passe au joueur suivant . + + const win = this.isGameWon(row, col) //si le joueur gagne + const stalemate = this.board + .map(row => row.filter(col => col === '')) + .filter(row => row.length > 0) // si il ya egalite + + if (!this.waiting) { + if (win) { + this.increaseScore() //incremente le score de 1 + this.display.updateScore(this.score, this.currentPlayer) //affiche le scrore sur la page web + this.gameOver(this.currentPlayer) //affiche un message de qui a gagner + } else if (stalemate.length < 1) { + this.gameOver() //affiche un message de qui a gagner + } else { + this.switchPlayer() // si pas de gagnant ni egalite change de joueur + } + } + } + } + + /** + * Reset the board after a delay after win or stalemate + */ + gameOver = (winner?: string) => { + this.waiting = true + this.display.printMessage(winner) // fonction qui affiche un message de gagne/egalite lorsque le temps dattente est superrieur a 1500ms + + setTimeout(() => { + this.resetBoard() + this.waiting = false + }, this.wait) //fonction qui remet le compteur de temps a 0 et reinitilise le tableur + } + + /** + * Create a new empty board + * @return {Object[]} 3x3 multi-dimensional array of empty strings + */ + createBoard = (): Array> => [['', '', ''], ['', '', ''], ['', '', '']] //fonction qui cree un tableur vide + + /** + * Restore the board to its original empty state + */ + resetBoard = (): void => { + this.display.clearGameBoard() + this.display.clearMessage() + this.board = this.createBoard() // fonction qui reinitialise le message le tableur et cree un nouveau tableur + } + + /** + * Check is the current player has won the game + * @param {number} row + * @param {number} col + * @return {boolean} + */ + isGameWon = (row: number, col: number): boolean => { + if ( + // Horizontal win + (this.board[row][0] === this.currentPlayer && + this.board[row][1] === this.currentPlayer && + this.board[row][2] === this.currentPlayer) || + // Vertical win + (this.board[0][col] === this.currentPlayer && + this.board[1][col] === this.currentPlayer && + this.board[2][col] === this.currentPlayer) || + // Diagonal win + ((this.board[0][0] === this.currentPlayer && + this.board[1][1] === this.currentPlayer && + this.board[2][2] === this.currentPlayer) || + (this.board[2][0] === this.currentPlayer && + this.board[1][1] === this.currentPlayer && + this.board[0][2] === this.currentPlayer)) + ) + return true + return false + + } //fonction qui check si le joueur a gagner + + /** + * Switch to the next player + */ + switchPlayer = (): void => { + this.currentPlayer = this.currentPlayer === this.players.x ? this.players.o : this.players.x // fonction qui passe au joueur suivant + } + + /** + * Increase the score of the winning player + */ + increaseScore = (): void => { + this.score[this.currentPlayer] += 1 //fonction qui aggremente le score de 1 + } + + /** + * Render score board and game board + */ + startGame(): void { + this.display.printScoreBoard(this.score) + this.display.printGameBoard(this.board) //fonction qui affiche le jeu appelee dans l'index.html + this.display.newGame() + } + + +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/controler.js b/02-TypeScript/14-events/home-puzzles/john-ben/dist/controler.js new file mode 100644 index 000000000..d7fb23876 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/controler.js @@ -0,0 +1,128 @@ +var TicTacToe = /** @class */ (function () { + function TicTacToe(display) { + var _this = this; + /** + * Click a cell in the game board and determine if its a win, a stalemate, or + * the game continues. Game over or switch player. + */ + //fonction qui lorsque le joueur clique sur une case determine la suite de la partie + this.clickCell = function (row, col) { + var canContinue = _this.board[row][col] === ''; //constante qui determine que la case du tableau est vide + if (canContinue && !_this.waiting) { + _this.board[row][col] = _this.currentPlayer; + _this.display.updateBoard(row, col, _this.currentPlayer); // si la case est vide et il y'a pas d'attente (partie pas terminee) alors lorsqu'il clicke ,le token saffiche et passe au joueur suivant . + var win = _this.isGameWon(row, col); //si le joueur gagne + var stalemate = _this.board + .map(function (row) { return row.filter(function (col) { return col === ''; }); }) + .filter(function (row) { return row.length > 0; }); // si il ya egalite + if (!_this.waiting) { + if (win) { + _this.increaseScore(); //incremente le score de 1 + _this.display.updateScore(_this.score, _this.currentPlayer); //affiche le scrore sur la page web + _this.gameOver(_this.currentPlayer); //affiche un message de qui a gagner + } + else if (stalemate.length < 1) { + _this.gameOver(); //affiche un message de qui a gagner + } + else { + _this.switchPlayer(); // si pas de gagnant ni egalite change de joueur + } + } + } + }; + /** + * Reset the board after a delay after win or stalemate + */ + this.gameOver = function (winner) { + _this.waiting = true; + _this.display.printMessage(winner); // fonction qui affiche un message de gagne/egalite lorsque le temps dattente est superrieur a 1500ms + setTimeout(function () { + _this.resetBoard(); + _this.waiting = false; + }, _this.wait); //fonction qui remet le compteur de temps a 0 et reinitilise le tableur + }; + /** + * Create a new empty board + * @return {Object[]} 3x3 multi-dimensional array of empty strings + */ + this.createBoard = function () { return [['', '', ''], ['', '', ''], ['', '', '']]; }; //fonction qui cree un tableur vide + /** + * Restore the board to its original empty state + */ + this.resetBoard = function () { + _this.display.clearGameBoard(); + _this.display.clearMessage(); + _this.board = _this.createBoard(); // fonction qui reinitialise le message le tableur et cree un nouveau tableur + }; + /** + * Check is the current player has won the game + * @param {number} row + * @param {number} col + * @return {boolean} + */ + this.isGameWon = function (row, col) { + if ( + // Horizontal win + (_this.board[row][0] === _this.currentPlayer && + _this.board[row][1] === _this.currentPlayer && + _this.board[row][2] === _this.currentPlayer) || + // Vertical win + (_this.board[0][col] === _this.currentPlayer && + _this.board[1][col] === _this.currentPlayer && + _this.board[2][col] === _this.currentPlayer) || + // Diagonal win + ((_this.board[0][0] === _this.currentPlayer && + _this.board[1][1] === _this.currentPlayer && + _this.board[2][2] === _this.currentPlayer) || + (_this.board[2][0] === _this.currentPlayer && + _this.board[1][1] === _this.currentPlayer && + _this.board[0][2] === _this.currentPlayer))) + return true; + return false; + }; //fonction qui check si le joueur a gagner + /** + * Switch to the next player + */ + this.switchPlayer = function () { + _this.currentPlayer = _this.currentPlayer === _this.players.x ? _this.players.o : _this.players.x; // fonction qui passe au joueur suivant + }; + /** + * Increase the score of the winning player + */ + this.increaseScore = function () { + _this.score[_this.currentPlayer] += 1; //fonction qui aggremente le score de 1 + }; + this.display = display; + this.board = this.createBoard(); + this.players = { x: "x", o: "o" }; + this.wait = 3000; + this.waiting = false; + this.score = { x: 0, o: 0 }; + this.currentPlayer = this.players.x; + this.display.bindHandler(this.clickCell); + } + Object.defineProperty(TicTacToe.prototype, "getWait", { + get: function () { + return this.wait; + }, + enumerable: false, + configurable: true + }); + Object.defineProperty(TicTacToe.prototype, "changeWait", { + set: function (newWait) { + this.wait = newWait; + newWait = 0; + }, + enumerable: false, + configurable: true + }); + /** + * Render score board and game board + */ + TicTacToe.prototype.startGame = function () { + this.display.printScoreBoard(this.score); + this.display.printGameBoard(this.board); //fonction qui affiche le jeu appelee dans l'index.html + this.display.newGame(); + }; + return TicTacToe; +}()); diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/index.js b/02-TypeScript/14-events/home-puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..0fb558333 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/index.js @@ -0,0 +1,4 @@ +// Start Game +//============================================================================== +var ticTacToe = new TicTacToe(new DOMDisplay()); +ticTacToe.startGame(); diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/model.js b/02-TypeScript/14-events/home-puzzles/john-ben/dist/model.js new file mode 100644 index 000000000..7b03ec704 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/model.js @@ -0,0 +1,2 @@ +// Custom Types +//============================================================================== diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/style.css b/02-TypeScript/14-events/home-puzzles/john-ben/dist/style.css new file mode 100644 index 000000000..a47460a67 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/style.css @@ -0,0 +1,97 @@ +:root { + --font-color: #FCB42A; + --bg-color: #000022; + --board-color: #2121DE; + --x-color: #FFFF00; + --o-color: #FFFFFF; + --game-width: 450px; + --message-color: #00FF00; + --font-family: "Press Start 2P"; +} + +* { + box-sizing: border-box; +} + +html { + background: #000022; + margin: 2rem 0; + font-size: 16px; + line-height: 1.5; + padding: 0; + font-family: "Press Start 2P", sans-serif; + color: #FCB42A; +} + +h1 { + text-align: center; +} + +#game { + max-width: 450px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.score { + border: 2px solid #FCB42A; + margin: 1rem 0; + text-align: center; +} + +.row, +.col { + display: flex; + align-items: center; + justify-content: center; +} + +.col { + cursor: pointer; + border: 3px solid #2121DE; + margin: 5px; + height: 100px; + width: 100px; + line-height: 0; + border-radius: 4px; + font-size: 40px; +} + +.col:hover { + border: 3px solid #4d4de4; +} + +.x { + color: #FFFF00; +} + +.o { + color: #FFFFFF; +} + +.message { + margin: 2rem 0; + text-align: center; + color: #00FF00; +} + +button { + display: flex; + margin-top: 10px; + width: 320px; + margin-left: 65px; + background-color: #000022; + /* Green */ + border: 2px solid orange; + color: white; + padding: 10px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} + +button:hover { + border: 3px solid #4d4de4; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/tic.css b/02-TypeScript/14-events/home-puzzles/john-ben/dist/tic.css new file mode 100644 index 000000000..2446f599c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/tic.css @@ -0,0 +1,50 @@ +h1 { + color: orangered; + font-size: 45px; +} + +/* 3*3 Grid */ +#b1, #b2, #b3, #b4, #b5, +#b6, #b7, #b8, #b9 { + width: 80px; + height: 52px; + margin: auto; + border: 1px solid gray; + border-radius: 6px; + font-size: 30px; + text-align: center; +} + +/* Reset Button */ +#but { + box-sizing: border-box; + width: 95px; + height: 40px; + border: 1px solid dodgerblue; + margin: auto; + border-radius: 4px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: dodgerblue; + color: white; + font-size: 20px; + cursor: pointer; +} + +/* Player turn space */ +#print { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: dodgerblue; + font-size: 20px; +} + +/* Main Container */ +#main { + text-align: center; +} + +/* Game Instruction Text */ +#ins { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: dodgerblue; + font-size: 17px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/tic.js b/02-TypeScript/14-events/home-puzzles/john-ben/dist/tic.js new file mode 100644 index 000000000..2264a8a88 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/tic.js @@ -0,0 +1,357 @@ +// Function called whenever user tab on any box +function myfunc() { + // Setting DOM to all boxes or input field + var b1 = document.querySelector("#b1"); + var b2 = document.querySelector("#b2"); + var b3 = document.querySelector("#b3"); + var b4 = document.querySelector("#b4"); + var b5 = document.querySelector("#b5"); + var b6 = document.querySelector("#b6"); + var b7 = document.querySelector("#b7"); + var b8 = document.querySelector("#b8"); + var b9 = document.querySelector("#b9"); + // Checking if Player X won or not and after + // that disabled all the other fields + if ((b1 == 'x' || b1 == 'X') && (b2 == 'x' || + b2 == 'X') && (b3 == 'x' || b3 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b1 == 'x' || b1 == 'X') && (b4 == 'x' || + b4 == 'X') && (b7 == 'x' || b7 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b7 == 'x' || b7 == 'X') && (b8 == 'x' || + b8 == 'X') && (b9 == 'x' || b9 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + window.alert('Player X won'); + } + else if ((b3 == 'x' || b3 == 'X') && (b6 == 'x' || + b6 == 'X') && (b9 == 'x' || b9 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player X won'); + } + else if ((b1 == 'x' || b1 == 'X') && (b5 == 'x' || + b5 == 'X') && (b9 == 'x' || b9 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player X won'); + } + else if ((b3 == 'x' || b3 == 'X') && (b5 == 'x' || + b5 == 'X') && (b7 == 'x' || b7 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b2 == 'x' || b2 == 'X') && (b5 == 'x' || + b5 == 'X') && (b8 == 'x' || b8 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + else if ((b4 == 'x' || b4 == 'X') && (b5 == 'x' || + b5 == 'X') && (b6 == 'x' || b6 == 'X')) { + document.getElementById('print') + .innerHTML = "Player X won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player X won'); + } + // Checking of Player X finish + // Checking for Player 0 starts, Is player 0 won or + // not and after that disabled all the other fields + else if ((b1 == '0' || b1 == '0') && (b2 == '0' || + b2 == '0') && (b3 == '0' || b3 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b1 == '0' || b1 == '0') && (b4 == '0' || + b4 == '0') && (b7 == '0' || b7 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b7 == '0' || b7 == '0') && (b8 == '0' || + b8 == '0') && (b9 == '0' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b6").disabled = true; + window.alert('Player 0 won'); + } + else if ((b3 == '0' || b3 == '0') && (b6 == '0' || + b6 == '0') && (b9 == '0' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b5").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player 0 won'); + } + else if ((b1 == '0' || b1 == '0') && (b5 == '0' || + b5 == '0') && (b9 == '0' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + window.alert('Player 0 won'); + } + else if ((b3 == '0' || b3 == '0') && (b5 == '0' || + b5 == '0') && (b7 == '0' || b7 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b2 == '0' || b2 == '0') && (b5 == '0' || + b5 == '0') && (b8 == '0' || b8 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b4").disabled = true; + document.getElementById("b6").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + else if ((b4 == '0' || b4 == '0') && (b5 == '0' || + b5 == '0') && (b6 == '0' || b6 == '0')) { + document.getElementById('print') + .innerHTML = "Player 0 won"; + document.getElementById("b1").disabled = true; + document.getElementById("b2").disabled = true; + document.getElementById("b3").disabled = true; + document.getElementById("b7").disabled = true; + document.getElementById("b8").disabled = true; + document.getElementById("b9").disabled = true; + window.alert('Player 0 won'); + } + // Checking of Player 0 finish + // Here, Checking about Tie + else if ((b1 == 'X' || b1 == '0') && (b2 == 'X' + || b2 == '0') && (b3 == 'X' || b3 == '0') && + (b4 == 'X' || b4 == '0') && (b5 == 'X' || + b5 == '0') && (b6 == 'X' || b6 == '0') && + (b7 == 'X' || b7 == '0') && (b8 == 'X' || + b8 == '0') && (b9 == 'X' || b9 == '0')) { + document.getElementById('print') + .innerHTML = "Match Tie"; + window.alert('Match Tie'); + } + else { + // Here, Printing Result + if (flag == 1) { + document.getElementById('print') + .innerHTML = "Player X Turn"; + } + else { + document.getElementById('print') + .innerHTML = "Player 0 Turn"; + } + } +} +// Function to reset game +function myfunc_2() { + location.reload(); + document.getElementById('b1').value = ''; + document.getElementById("b2").value = ''; + document.getElementById("b3").value = ''; + document.getElementById("b4").value = ''; + document.getElementById("b5").value = ''; + document.getElementById("b6").value = ''; + document.getElementById("b7").value = ''; + document.getElementById("b8").value = ''; + document.getElementById("b9").value = ''; +} +// Here onwards, functions check turn of the player +// and put accordingly value X or 0 +flag = 1; +function myfunc_3() { + if (flag == 1) { + document.getElementById("b1").value = "X"; + document.getElementById("b1").disabled = true; + flag = 0; + } + else { + document.getElementById("b1").value = "0"; + document.getElementById("b1").disabled = true; + flag = 1; + } +} +function myfunc_4() { + if (flag == 1) { + document.getElementById("b2").value = "X"; + document.getElementById("b2").disabled = true; + flag = 0; + } + else { + document.getElementById("b2").value = "0"; + document.getElementById("b2").disabled = true; + flag = 1; + } +} +function myfunc_5() { + if (flag == 1) { + document.getElementById("b3").value = "X"; + document.getElementById("b3").disabled = true; + flag = 0; + } + else { + document.getElementById("b3").value = "0"; + document.getElementById("b3").disabled = true; + flag = 1; + } +} +function myfunc_6() { + if (flag == 1) { + document.getElementById("b4").value = "X"; + document.getElementById("b4").disabled = true; + flag = 0; + } + else { + document.getElementById("b4").value = "0"; + document.getElementById("b4").disabled = true; + flag = 1; + } +} +function myfunc_7() { + if (flag == 1) { + document.getElementById("b5").value = "X"; + document.getElementById("b5").disabled = true; + flag = 0; + } + else { + document.getElementById("b5").value = "0"; + document.getElementById("b5").disabled = true; + flag = 1; + } +} +function myfunc_8() { + if (flag == 1) { + document.getElementById("b6").value = "X"; + document.getElementById("b6").disabled = true; + flag = 0; + } + else { + document.getElementById("b6").value = "0"; + document.getElementById("b6").disabled = true; + flag = 1; + } +} +function myfunc_9() { + if (flag == 1) { + document.getElementById("b7").value = "X"; + document.getElementById("b7").disabled = true; + flag = 0; + } + else { + document.getElementById("b7").value = "0"; + document.getElementById("b7").disabled = true; + flag = 1; + } +} +function myfunc_10() { + if (flag == 1) { + document.getElementById("b8").value = "X"; + document.getElementById("b8").disabled = true; + flag = 0; + } + else { + document.getElementById("b8").value = "0"; + document.getElementById("b8").disabled = true; + flag = 1; + } +} +function myfunc_11() { + if (flag == 1) { + document.getElementById("b9").value = "X"; + document.getElementById("b9").disabled = true; + flag = 0; + } + else { + document.getElementById("b9").value = "0"; + document.getElementById("b9").disabled = true; + flag = 1; + } +} diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/dist/view.js b/02-TypeScript/14-events/home-puzzles/john-ben/dist/view.js new file mode 100644 index 000000000..14ba89d0a --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/dist/view.js @@ -0,0 +1,146 @@ +var DOMDisplay = /** @class */ (function () { + function DOMDisplay() { + var _this = this; + /** + * Create an element and apply an optional class and dataset + * @param {string} tag + * @param {string} className (Optional) + * @param {Object[]} dataset (Optional) + * @return {HTMLElement} + */ + this.createElement = function (tag, className, dataset) { + var element = document.createElement(tag); + if (className) + element.classList.add(className); + if (dataset) + element.dataset[dataset[0]] = dataset[1]; + return element; + }; + /** + * Retrieve an existing element in the DOM + * @param {string} selector + * @return {HTMLElement} + */ + this.getElement = function (selector) { return document.querySelector(selector); }; + /** + * Retrieve all elements by selector from the DOM + * @param {string} selector + * @return {NodeList} + */ + this.getAllElements = function (selector) { return document.querySelectorAll(selector); }; + /** + * Create the score board view and render it to the DOM + * @param {Score} scoreData + */ + this.printScoreBoard = function (scoreData) { + var game = _this.getElement('#game'); + var scoreBoard = _this.createElement('div', 'score'); + game.append(scoreBoard); + var playerOneScore = _this.createElement('div', 'x'); + playerOneScore.textContent = "Player 1: " + scoreData.x; + playerOneScore.id = 'score-x'; + var playerTwoScore = _this.createElement('div', 'o'); + playerTwoScore.textContent = "Player 2: " + scoreData.o; + playerTwoScore.id = 'score-o'; + scoreBoard.append(playerOneScore, playerTwoScore); + }; + /** + * Create the game board view and render it to the DOM + * @param {Object[]} boardData 3x3 multi-dimensional array of empty strings + */ + this.printGameBoard = function (boardData) { + var game = _this.getElement('#game'); + var gameBoard = _this.createElement('div', 'board', undefined); + game.append(gameBoard); + boardData.forEach(function (row, i) { + var boardRow = _this.createElement('div', 'row', ['row', i]); + gameBoard.append(boardRow); + row.forEach(function (col, j) { + var boardCol = _this.createElement('div', 'col', ['col', j]); + boardRow.append(boardCol); + }); + }); + }; + /** + * Update the board by appending a player token to a cell + * @param {number} row + * @param {number} col + * @param {string} currentPlayer + */ + this.updateBoard = function (row, col, currentPlayer) { + var playerToken = _this.createElement('span', currentPlayer, undefined); + playerToken.textContent = currentPlayer; + var boardRow = _this.getElement("[data-row=\"" + row + "\"]"); + var cell = boardRow.querySelector("[data-col=\"" + col + "\"]"); + cell.append(playerToken); + }; + /** + * Set all cells in the board to empty strings + */ + this.clearGameBoard = function () { + var cells = _this.getAllElements('.col'); + cells.forEach(function (cell) { + cell.textContent = ''; + }); + }; + /** + * Update the existing score for the current player + * @param {Score} currentScore + * @param {string} currentPlayer + */ + this.updateScore = function (currentScore, currentPlayer) { + var currentPlayerScore = _this.getElement("#score-" + currentPlayer); + var player = currentPlayer === 'x' ? 'Player 1' : 'Player 2'; + var d = currentScore[currentPlayer]; + currentPlayerScore.textContent = player + ": " + d; + }; + /** + * Print the win, lose, or stalemate message + * @param {string} winner + */ + this.printMessage = function (winner) { + var message = _this.createElement('div', 'message'); + var player = winner === 'x' ? 'Player 1' : 'Player 2'; + message.textContent = winner ? player + " wins!" : 'Nobody wins!'; + var game = _this.getElement('#game'); + game.append(message); + }; // imprime le message de gagne/egalite + /** + * Clear message from the screen + */ + this.clearMessage = function () { + var message = _this.getElement('.message'); + message.remove(); + }; //enleve le message de gagne/egalite + this.newGame = function () { + var game = _this.getElement('#game'); + var button_newGame = _this.createElement('div', "button"); + button_newGame.innerHTML = ""; + button_newGame.addEventListener("click", function (event) { + window.location.reload(); + // this.updateBoard + // ticTacToe.res + // ticTacToe.startGame() + // ticTacToe.display.clearGameBoard + }); + game.append(button_newGame); + }; + } + /** + * Bind document click to the game if clicked element is a cell + * @param {requestCallback} clickHandler + */ + DOMDisplay.prototype.bindHandler = function (clickHandler) { + document.addEventListener('click', function (event) { + var clicked = event.target; + var isColumn = clicked.className === 'col'; + if (isColumn) { + var cell = clicked; + var row = +cell.parentElement.dataset.row; + var col = +cell.dataset.col; + clickHandler(row, col); + } + }); + }; + return DOMDisplay; +}()); diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/index.html b/02-TypeScript/14-events/home-puzzles/john-ben/index.html new file mode 100644 index 000000000..f62f5e0c9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/index.html @@ -0,0 +1,21 @@ + + + + + + Tic-Tac-Toe + + + + + + + + + +

                Tic-Tac-Toe by John Benayoun

                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/index.ts b/02-TypeScript/14-events/home-puzzles/john-ben/index.ts new file mode 100644 index 000000000..838f19d28 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/index.ts @@ -0,0 +1,23 @@ +interface Display { + bindHandler(clickHandler: (row: number, col: number) => void): void + createElement(tag: string, className?: string, dataset?: Array): HTMLElement + getElement(selector: string): HTMLElement + getAllElements(selector: string): NodeList + printGameBoard(boardData: Array>): void + updateBoard(row: number, col: number, currentPlayer: string): void + clearGameBoard(): void + printScoreBoard(scoreData: Score): void + updateScore(currentScore: Score, currentPlayer: string): void + printMessage(winner?: string): void + clearMessage(): void + newGame():void + + } + + // Start Game +//============================================================================== + +const ticTacToe = new TicTacToe(new DOMDisplay()) +ticTacToe.startGame() + + diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/model.ts b/02-TypeScript/14-events/home-puzzles/john-ben/model.ts new file mode 100644 index 000000000..16152d59c --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/model.ts @@ -0,0 +1,14 @@ +// Custom Types +//============================================================================== + +interface PlayerToken { + x: string + o: string + [key: string]: string + } + + interface Score { + x: number + o: number + [key: string]: number + } diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/style.css b/02-TypeScript/14-events/home-puzzles/john-ben/style.css new file mode 100644 index 000000000..bcf93c531 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/style.css @@ -0,0 +1,96 @@ +:root { + --font-color: #FCB42A; + --bg-color: #000022; + --board-color: #2121DE; + --x-color: #FFFF00; + --o-color: #FFFFFF; + --game-width: 450px; + --message-color: #00FF00; + --font-family: "Press Start 2P"; +} + +* { + box-sizing: border-box; +} + +html { + background: #000022; + margin: 2rem 0; + font-size: 16px; + line-height: 1.5; + padding: 0; + font-family: "Press Start 2P", sans-serif; + color: #FCB42A; +} + +h1 { + text-align: center; +} + +#game { + max-width: 450px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.score { + border: 2px solid #FCB42A; + margin: 1rem 0; + text-align: center; +} + +.row, +.col { + display: flex; + align-items: center; + justify-content: center; +} + +.col { + cursor: pointer; + border: 3px solid #2121DE; + margin: 5px; + height: 100px; + width: 100px; + line-height: 0; + border-radius: 4px; + font-size: 40px; +} + +.col:hover { + border: 3px solid #4d4de4; +} + +.x { + color: #FFFF00; +} + +.o { + color: #FFFFFF; +} + +.message { + margin: 2rem 0; + text-align: center; + color: #00FF00; +} + +button { + display: flex; + margin-top: 10px; + width: 320px; + margin-left: 65px; + background-color: #000022; /* Green */ + border: 2px solid orange; + color: white; + padding: 10px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; +} + +button:hover { + border: 3px solid #4d4de4; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/style.scss b/02-TypeScript/14-events/home-puzzles/john-ben/style.scss new file mode 100644 index 000000000..bceded18b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/style.scss @@ -0,0 +1,96 @@ +:root { + --font-color: #FCB42A; + --bg-color: #000022; + --board-color: #2121DE; + --x-color: #FFFF00; + --o-color: #FFFFFF; + --game-width: 450px; + --message-color: #00FF00; + --font-family: 'Press Start 2P'; + } + + * { + box-sizing: border-box; + } + + html { + background: #000022; + margin: 2rem 0; + font-size: 16px; + line-height: 1.5; + padding: 0; + font-family: 'Press Start 2P', sans-serif; + color: #FCB42A; + } + + h1 { + text-align: center; + } + + #game { + max-width: 450px; + margin: 0 auto; + display: flex; + flex-direction: column; + } + + .score { + border: 2px solid #FCB42A; + margin: 1rem 0; + text-align: center; + } + + .row, + .col { + display: flex; + align-items: center; + justify-content: center; + } + + .col { + cursor: pointer; + border: 3px solid #2121DE; + margin: 5px; + height: 100px; + width: 100px; + line-height: 0; + border-radius: 4px; + font-size: 40px; + } + + .col:hover { + border: 3px solid #4d4de4; + } + + .x { + color: #FFFF00; + } + + .o { + color: #FFFFFF; + + } + + .message { + margin: 2rem 0; + text-align: center; + color: #00FF00; + } + + button { + display: flex; + margin-top: 10px; + width: 320px; + margin-left: 65px; + background-color:#000022; /* Green */ + border: 2px solid orange; + color: white; + padding: 10px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + button:hover{ + border: 3px solid #4d4de4; + } \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/john-ben/view.ts b/02-TypeScript/14-events/home-puzzles/john-ben/view.ts new file mode 100644 index 000000000..f05af1302 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/john-ben/view.ts @@ -0,0 +1,167 @@ + class DOMDisplay implements Display { + /** + * Bind document click to the game if clicked element is a cell + * @param {requestCallback} clickHandler + */ + bindHandler(clickHandler: (row: number, col: number) => void): void { + document.addEventListener('click', (event: Event) => { + const clicked = event.target + const isColumn = clicked.className === 'col' + + if (isColumn) { + const cell = clicked + const row = +cell.parentElement!.dataset.row! + const col = +cell.dataset.col! + clickHandler(row, col) + } + }) + } + + /** + * Create an element and apply an optional class and dataset + * @param {string} tag + * @param {string} className (Optional) + * @param {Object[]} dataset (Optional) + * @return {HTMLElement} + */ + createElement = (tag: string, className?: string, dataset?: Array): HTMLElement => { + const element = document.createElement(tag) + if (className) element.classList.add(className) + if (dataset) element.dataset[dataset[0]] = dataset[1] + + return element + } + + /** + * Retrieve an existing element in the DOM + * @param {string} selector + * @return {HTMLElement} + */ + getElement = (selector: string): HTMLElement => document.querySelector(selector) + + /** + * Retrieve all elements by selector from the DOM + * @param {string} selector + * @return {NodeList} + */ + getAllElements = (selector: string): NodeList => document.querySelectorAll(selector) + + /** + * Create the score board view and render it to the DOM + * @param {Score} scoreData + */ + printScoreBoard = (scoreData: Score): void => { + const game = this.getElement('#game') + const scoreBoard = this.createElement('div', 'score') + game.append(scoreBoard) + + const playerOneScore = this.createElement('div', 'x') + playerOneScore.textContent = `Player 1: ${scoreData.x}` + playerOneScore.id = 'score-x' + + const playerTwoScore = this.createElement('div', 'o') + playerTwoScore.textContent = `Player 2: ${scoreData.o}` + playerTwoScore.id = 'score-o' + + scoreBoard.append(playerOneScore, playerTwoScore) + } + + /** + * Create the game board view and render it to the DOM + * @param {Object[]} boardData 3x3 multi-dimensional array of empty strings + */ + + printGameBoard = (boardData: Array>): void => { + const game = this.getElement('#game') + const gameBoard = this.createElement('div', 'board', undefined) + game.append(gameBoard) + + boardData.forEach((row, i) => { + const boardRow = this.createElement('div', 'row', ['row', i]) + gameBoard.append(boardRow) + + row.forEach((col, j) => { + const boardCol = this.createElement('div', 'col', ['col', j]) + boardRow.append(boardCol) + }) + }) + } + + /** + * Update the board by appending a player token to a cell + * @param {number} row + * @param {number} col + * @param {string} currentPlayer + */ + updateBoard = (row: number, col: number, currentPlayer: string): void => { + const playerToken = this.createElement('span', currentPlayer, undefined) + playerToken.textContent = currentPlayer + + const boardRow = this.getElement(`[data-row="${row}"]`) + const cell = boardRow.querySelector(`[data-col="${col}"]`) + + cell.append(playerToken) + } + + /** + * Set all cells in the board to empty strings + */ + clearGameBoard = (): void => { + const cells = this.getAllElements('.col') + + cells.forEach(cell => { + cell.textContent = '' + }) + } + + /** + * Update the existing score for the current player + * @param {Score} currentScore + * @param {string} currentPlayer + */ + updateScore = (currentScore: Score, currentPlayer: string): void => { + const currentPlayerScore = this.getElement(`#score-${currentPlayer}`) + const player = currentPlayer === 'x' ? 'Player 1' : 'Player 2' + const d: number = currentScore[currentPlayer] + currentPlayerScore.textContent = `${player}: ${d}` + } + + /** + * Print the win, lose, or stalemate message + * @param {string} winner + */ + printMessage = (winner: string): void => { + const message: HTMLElement|null = this.createElement('div', 'message') + const player = winner === 'x' ? 'Player 1' : 'Player 2' + + message.textContent = winner ? `${player} wins!` : 'Nobody wins!' + + const game = this.getElement('#game') + game.append(message) + } // imprime le message de gagne/egalite + + /** + * Clear message from the screen + */ + clearMessage = (): void => { + const message = this.getElement('.message') + message.remove() + } //enleve le message de gagne/egalite + + newGame = (): void => { + const game = this.getElement('#game') + const button_newGame = this.createElement('div',"button") + button_newGame.innerHTML =`` + button_newGame.addEventListener("click", (event) => { + window.location.reload(); + // this.updateBoard + // ticTacToe.res + // ticTacToe.startGame() + // ticTacToe.display.clearGameBoard + }); + game.append(button_newGame) + } + + } + + diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/control.ts b/02-TypeScript/14-events/home-puzzles/noa-meillet/control.ts new file mode 100644 index 000000000..b38c02c4f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/control.ts @@ -0,0 +1,89 @@ +function didIWin() { + try { + if ( + !box1_1 || + !box1_2 || + !box1_3 || + !box2_1 || + !box2_2 || + !box2_3 || + !box3_1 || + !box3_2 || + !box3_3 + ) + throw new Error("Error"); + if ( + (box1_1.style.backgroundColor == `pink` && + box1_2.style.backgroundColor == `pink` && + box1_3.style.backgroundColor == `pink`) || + (box2_1.style.backgroundColor == `pink` && + box2_2.style.backgroundColor == `pink` && + box2_3.style.backgroundColor == `pink`) || + (box3_1.style.backgroundColor == `pink` && + box3_2.style.backgroundColor == `pink` && + box3_3.style.backgroundColor == `pink`) || + (box1_1.style.backgroundColor == `pink` && + box2_1.style.backgroundColor == `pink` && + box3_1.style.backgroundColor == `pink`) || + (box1_2.style.backgroundColor == `pink` && + box2_2.style.backgroundColor == `pink` && + box3_2.style.backgroundColor == `pink`) || + (box1_3.style.backgroundColor == `pink` && + box2_3.style.backgroundColor == `pink` && + box3_3.style.backgroundColor == `pink`) || + (box1_1.style.backgroundColor == `pink` && + box2_2.style.backgroundColor == `pink` && + box3_3.style.backgroundColor == `pink`) || + (box1_3.style.backgroundColor == `pink` && + box2_2.style.backgroundColor == `pink` && + box3_1.style.backgroundColor == `pink`) + ) { + winner.innerHTML = `The Winner is: +
                + × + Player O win the game!! +
                `; + boxes.forEach(box => box.style.pointerEvents = `none`) + } else if ( + (box1_1.style.backgroundColor == `blue` && + box1_2.style.backgroundColor == `blue` && + box1_3.style.backgroundColor == `blue`) || + (box2_1.style.backgroundColor == `blue` && + box2_2.style.backgroundColor == `blue` && + box2_3.style.backgroundColor == `blue`) || + (box3_1.style.backgroundColor == `blue` && + box3_2.style.backgroundColor == `blue` && + box3_3.style.backgroundColor == `blue`) || + (box1_1.style.backgroundColor == `blue` && + box2_1.style.backgroundColor == `blue` && + box3_1.style.backgroundColor == `blue`) || + (box1_2.style.backgroundColor == `blue` && + box2_2.style.backgroundColor == `blue` && + box3_2.style.backgroundColor == `blue`) || + (box1_3.style.backgroundColor == `blue` && + box2_3.style.backgroundColor == `blue` && + box3_3.style.backgroundColor == `blue`) || + (box1_1.style.backgroundColor == `blue` && + box2_2.style.backgroundColor == `blue` && + box3_3.style.backgroundColor == `blue`) || + (box1_3.style.backgroundColor == `blue` && + box2_2.style.backgroundColor == `blue` && + box3_1.style.backgroundColor == `blue`) + ) { + winner.innerHTML = `The Winner is: +
                + × + Player X win the game!! +
                `; + boxes.forEach(box => box.style.pointerEvents = `none`) + } else { + winner.innerHTML = `The Winner is: +
                + × + No one win the game... +
                `; + } + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/control.js b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/control.js new file mode 100644 index 000000000..9cdb9b8ef --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/control.js @@ -0,0 +1,74 @@ +function didIWin() { + try { + if (!box1_1 || + !box1_2 || + !box1_3 || + !box2_1 || + !box2_2 || + !box2_3 || + !box3_1 || + !box3_2 || + !box3_3) + throw new Error("Error"); + if ((box1_1.style.backgroundColor == "pink" && + box1_2.style.backgroundColor == "pink" && + box1_3.style.backgroundColor == "pink") || + (box2_1.style.backgroundColor == "pink" && + box2_2.style.backgroundColor == "pink" && + box2_3.style.backgroundColor == "pink") || + (box3_1.style.backgroundColor == "pink" && + box3_2.style.backgroundColor == "pink" && + box3_3.style.backgroundColor == "pink") || + (box1_1.style.backgroundColor == "pink" && + box2_1.style.backgroundColor == "pink" && + box3_1.style.backgroundColor == "pink") || + (box1_2.style.backgroundColor == "pink" && + box2_2.style.backgroundColor == "pink" && + box3_2.style.backgroundColor == "pink") || + (box1_3.style.backgroundColor == "pink" && + box2_3.style.backgroundColor == "pink" && + box3_3.style.backgroundColor == "pink") || + (box1_1.style.backgroundColor == "pink" && + box2_2.style.backgroundColor == "pink" && + box3_3.style.backgroundColor == "pink") || + (box1_3.style.backgroundColor == "pink" && + box2_2.style.backgroundColor == "pink" && + box3_1.style.backgroundColor == "pink")) { + winner.innerHTML = "The Winner is:\n
                \n ×\n Player O win the game!!\n
                "; + boxes.forEach(function (box) { return box.style.pointerEvents = "none"; }); + } + else if ((box1_1.style.backgroundColor == "blue" && + box1_2.style.backgroundColor == "blue" && + box1_3.style.backgroundColor == "blue") || + (box2_1.style.backgroundColor == "blue" && + box2_2.style.backgroundColor == "blue" && + box2_3.style.backgroundColor == "blue") || + (box3_1.style.backgroundColor == "blue" && + box3_2.style.backgroundColor == "blue" && + box3_3.style.backgroundColor == "blue") || + (box1_1.style.backgroundColor == "blue" && + box2_1.style.backgroundColor == "blue" && + box3_1.style.backgroundColor == "blue") || + (box1_2.style.backgroundColor == "blue" && + box2_2.style.backgroundColor == "blue" && + box3_2.style.backgroundColor == "blue") || + (box1_3.style.backgroundColor == "blue" && + box2_3.style.backgroundColor == "blue" && + box3_3.style.backgroundColor == "blue") || + (box1_1.style.backgroundColor == "blue" && + box2_2.style.backgroundColor == "blue" && + box3_3.style.backgroundColor == "blue") || + (box1_3.style.backgroundColor == "blue" && + box2_2.style.backgroundColor == "blue" && + box3_1.style.backgroundColor == "blue")) { + winner.innerHTML = "The Winner is:\n
                \n ×\n Player X win the game!!\n
                "; + boxes.forEach(function (box) { return box.style.pointerEvents = "none"; }); + } + else { + winner.innerHTML = "The Winner is:\n
                \n ×\n No one win the game...\n
                "; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/helpers.js new file mode 100644 index 000000000..dccb062b7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/helpers.js @@ -0,0 +1,32 @@ +function noBlankBoxes() { + try { + if (!box1_1 || + !box1_2 || + !box1_3 || + !box2_1 || + !box2_2 || + !box2_3 || + !box3_1 || + !box3_2 || + !box3_3) + throw new Error("Error"); + if (box1_1.style.backgroundColor != "white" && + box1_2.style.backgroundColor != "white" && + box1_3.style.backgroundColor != "white" && + box2_1.style.backgroundColor != "white" && + box2_2.style.backgroundColor != "white" && + box2_3.style.backgroundColor != "white" && + box3_1.style.backgroundColor != "white" && + box3_2.style.backgroundColor != "white" && + box3_3.style.backgroundColor != "white") + return true; + else + return false; + } + catch (error) { + console.error(error); + } +} +function reset() { + window.location.reload(); +} diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/index.js b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/model.js b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/model.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/style.css b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/style.css new file mode 100644 index 000000000..715c57525 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/style.css @@ -0,0 +1,82 @@ +.nav-bar { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 60ch; + margin: auto; +} +.nav-bar__player img { + width: 30px; +} +.nav-bar__winner .no_one_win { + padding: 10px; + background-color: orange; + color: black; + width: 200px; + height: 20px; + border: black 5px solid; +} +.nav-bar__winner .no_one_win .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} +.nav-bar__winner .player_o_win { + padding: 10px; + background-color: lightcoral; + color: black; + width: 200px; + height: 20px; + border: black 5px solid; +} +.nav-bar__winner .player_o_win .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} +.nav-bar__winner .player_x_win { + padding: 10px; + background-color: lightblue; + border: black 5px solid; + color: black; + margin: auto; +} +.nav-bar__winner .player_x_win .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} + +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + max-width: 60ch; + margin: auto; +} +.wrapper .box { + width: 150px; + height: 150px; + border: 1px solid black; + background-color: white; +} + +h3 { + margin: auto; + max-width: 420px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/view.js b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/view.js new file mode 100644 index 000000000..716eaf6e7 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/dist/view.js @@ -0,0 +1,31 @@ +var boxes = document.querySelectorAll(".box"); +var box1_1 = document.querySelector("#box-1_1"); +var box1_2 = document.querySelector("#box-1_2"); +var box1_3 = document.querySelector("#box-1_3"); +var box2_1 = document.querySelector("#box-2_1"); +var box2_2 = document.querySelector("#box-2_2"); +var box2_3 = document.querySelector("#box-2_3"); +var box3_1 = document.querySelector("#box-3_1"); +var box3_2 = document.querySelector("#box-3_2"); +var box3_3 = document.querySelector("#box-3_3"); +var playerX = document.querySelector("#player_x"); +var playerO = document.querySelector("#player_o"); +var winner = document.querySelector(".nav-bar__winner"); +boxes.forEach(function (box) { + box.addEventListener("click", function (event) { + if (playerO.checked) { + box.style.backgroundColor = "pink"; + box.style.backgroundImage = "url(./img/o-tictactoe.png)"; + playerX.checked = true; + box.style.pointerEvents = "none"; + didIWin(); + } + else if (playerX.checked) { + box.style.backgroundColor = "blue"; + box.style.backgroundImage = "url(./img/x-tictactoe.png)"; + playerO.checked = true; + box.style.pointerEvents = "none"; + didIWin(); + } + }); +}); diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/img/o-tictactoe.png b/02-TypeScript/14-events/home-puzzles/noa-meillet/img/o-tictactoe.png new file mode 100644 index 000000000..157e9b5ef Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/noa-meillet/img/o-tictactoe.png differ diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/img/x-tictactoe.png b/02-TypeScript/14-events/home-puzzles/noa-meillet/img/x-tictactoe.png new file mode 100644 index 000000000..1d85463da Binary files /dev/null and b/02-TypeScript/14-events/home-puzzles/noa-meillet/img/x-tictactoe.png differ diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/index.html b/02-TypeScript/14-events/home-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..4a56a5bc1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/index.html @@ -0,0 +1,39 @@ + + + + + + + Document + + + + + + + + +
                +
                + Choose your player:
                + player- X + player- O +
                +
                The Winner is:
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +

                (: TO RESET CLOSE THE WIN MESSAGE :)

                + + diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/index.ts b/02-TypeScript/14-events/home-puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/model.ts b/02-TypeScript/14-events/home-puzzles/noa-meillet/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/style.css b/02-TypeScript/14-events/home-puzzles/noa-meillet/style.css new file mode 100644 index 000000000..715c57525 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/style.css @@ -0,0 +1,82 @@ +.nav-bar { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 60ch; + margin: auto; +} +.nav-bar__player img { + width: 30px; +} +.nav-bar__winner .no_one_win { + padding: 10px; + background-color: orange; + color: black; + width: 200px; + height: 20px; + border: black 5px solid; +} +.nav-bar__winner .no_one_win .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} +.nav-bar__winner .player_o_win { + padding: 10px; + background-color: lightcoral; + color: black; + width: 200px; + height: 20px; + border: black 5px solid; +} +.nav-bar__winner .player_o_win .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} +.nav-bar__winner .player_x_win { + padding: 10px; + background-color: lightblue; + border: black 5px solid; + color: black; + margin: auto; +} +.nav-bar__winner .player_x_win .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} + +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + max-width: 60ch; + margin: auto; +} +.wrapper .box { + width: 150px; + height: 150px; + border: 1px solid black; + background-color: white; +} + +h3 { + margin: auto; + max-width: 420px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/style.scss b/02-TypeScript/14-events/home-puzzles/noa-meillet/style.scss new file mode 100644 index 000000000..720e8a950 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/style.scss @@ -0,0 +1,93 @@ +.nav-bar{ + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 60ch; + margin: auto; + + &__player{ + img{ + width: 30px; + } + } + &__winner{ + .no_one_win{ + padding: 10px; + background-color: orange; + color: black; + width: 200px; + height: 20px; + border: black 5px solid; + + .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; + } + } + + .player_o_win { + padding: 10px; + background-color: lightcoral; + color: black; + width: 200px; + height: 20px; + border: black 5px solid; + + .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; + } + } + + .player_x_win { + padding: 10px; + background-color: lightblue; + border: black 5px solid; + color: black; + margin: auto; + + .closebtn { + margin-left: 15px; + color: black; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; + } + } + } +} + +.wrapper{ + display: grid; + grid-template-columns: repeat(3,1fr) ; + gap: 10px; + max-width: 60ch; + margin: auto; + + .box{ + width: 150px; + height: 150px; + border: 1px solid black; + background-color: white; + } +} + +h3{ + margin: auto; + max-width: 420px; +} diff --git a/02-TypeScript/14-events/home-puzzles/noa-meillet/view.ts b/02-TypeScript/14-events/home-puzzles/noa-meillet/view.ts new file mode 100644 index 000000000..67f61945b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/noa-meillet/view.ts @@ -0,0 +1,34 @@ +const boxes: any = document.querySelectorAll(".box"); +const box1_1: HTMLElement | null= document.querySelector("#box-1_1"); +const box1_2: HTMLElement | null = document.querySelector("#box-1_2"); +const box1_3: HTMLElement | null = document.querySelector("#box-1_3"); +const box2_1: HTMLElement | null = document.querySelector("#box-2_1"); +const box2_2: HTMLElement | null = document.querySelector("#box-2_2"); +const box2_3: HTMLElement | null = document.querySelector("#box-2_3"); +const box3_1: HTMLElement | null = document.querySelector("#box-3_1"); +const box3_2: HTMLElement | null = document.querySelector("#box-3_2"); +const box3_3: HTMLElement | null = document.querySelector("#box-3_3"); +const playerX: any = document.querySelector("#player_x"); +const playerO: any = document.querySelector("#player_o"); +const winner: any = document.querySelector(".nav-bar__winner"); + +boxes.forEach((box) => { + box.addEventListener("click", (event) => { + if (playerO.checked) { + box.style.backgroundColor = `pink`; + box.style.backgroundImage= `url(./img/o-tictactoe.png)`; + playerX.checked = true; + box.style.pointerEvents = `none`; + didIWin(); + } else if (playerX.checked) { + box.style.backgroundColor = `blue`; + box.style.backgroundImage= `url(./img/x-tictactoe.png)`; + playerO.checked = true; + box.style.pointerEvents = `none`; + didIWin(); + } + }); +}); + + + diff --git a/02-TypeScript/14-events/home-puzzles/shaili/app.ts b/02-TypeScript/14-events/home-puzzles/shaili/app.ts new file mode 100644 index 000000000..9cbe6ea56 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/app.ts @@ -0,0 +1 @@ +e \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shaili/control.ts b/02-TypeScript/14-events/home-puzzles/shaili/control.ts new file mode 100644 index 000000000..9cbe6ea56 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/control.ts @@ -0,0 +1 @@ +e \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shaili/dist/app.js b/02-TypeScript/14-events/home-puzzles/shaili/dist/app.js new file mode 100644 index 000000000..302143a2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/dist/app.js @@ -0,0 +1 @@ +e; diff --git a/02-TypeScript/14-events/home-puzzles/shaili/dist/control.js b/02-TypeScript/14-events/home-puzzles/shaili/dist/control.js new file mode 100644 index 000000000..302143a2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/dist/control.js @@ -0,0 +1 @@ +e; diff --git a/02-TypeScript/14-events/home-puzzles/shaili/dist/helpers.js b/02-TypeScript/14-events/home-puzzles/shaili/dist/helpers.js new file mode 100644 index 000000000..f9e8c9ada --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/dist/helpers.js @@ -0,0 +1 @@ +d; diff --git a/02-TypeScript/14-events/home-puzzles/shaili/dist/model.js b/02-TypeScript/14-events/home-puzzles/shaili/dist/model.js new file mode 100644 index 000000000..302143a2e --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/dist/model.js @@ -0,0 +1 @@ +e; diff --git a/02-TypeScript/14-events/home-puzzles/shaili/dist/style.css b/02-TypeScript/14-events/home-puzzles/shaili/dist/style.css new file mode 100644 index 000000000..33d4e6c07 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/dist/style.css @@ -0,0 +1,11 @@ +body { + margin: 0; +} + +.box { + height: 200px; + width: 200px; + background-color: goldenrod; + margin-top: 5rem; + margin-left: 5rem; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shaili/dist/view.js b/02-TypeScript/14-events/home-puzzles/shaili/dist/view.js new file mode 100644 index 000000000..0941aefd6 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/dist/view.js @@ -0,0 +1,6 @@ +var myBox = document.querySelector(".box"); +if (myBox) { + myBox.addEventListener("click", function (event) { + window.alert("You pressed me!"); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/shaili/helpers.ts b/02-TypeScript/14-events/home-puzzles/shaili/helpers.ts new file mode 100644 index 000000000..c59d9b634 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/helpers.ts @@ -0,0 +1 @@ +d \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shaili/index.html b/02-TypeScript/14-events/home-puzzles/shaili/index.html new file mode 100644 index 000000000..e48dfb9a3 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shaili/model.ts b/02-TypeScript/14-events/home-puzzles/shaili/model.ts new file mode 100644 index 000000000..9cbe6ea56 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/model.ts @@ -0,0 +1 @@ +e \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shaili/style.scss b/02-TypeScript/14-events/home-puzzles/shaili/style.scss new file mode 100644 index 000000000..8c66c9a63 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/style.scss @@ -0,0 +1,11 @@ +body { + margin: 0; +} + +.box { + height: 200px; + width: 200px; + background-color: goldenrod; + margin-top: 5rem; + margin-left: 5rem; +} diff --git a/02-TypeScript/14-events/home-puzzles/shaili/view.ts b/02-TypeScript/14-events/home-puzzles/shaili/view.ts new file mode 100644 index 000000000..128d29ba4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shaili/view.ts @@ -0,0 +1,6 @@ +const myBox: HTMLElement | null = document.querySelector(".box"); +if (myBox) { + myBox.addEventListener("click", (event) => { + window.alert("You pressed me!"); + }); +} diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/control.ts b/02-TypeScript/14-events/home-puzzles/shlomi.samai/control.ts new file mode 100644 index 000000000..a08b06073 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shlomi.samai/control.ts @@ -0,0 +1,23 @@ +const myBoxEvent=document.querySelector('.box2') + +function myEvent(){ + if (myBoxEvent){ + myBoxEvent.innerHTML=`
                +
                ` + } +} + + + +// function myEvent(){ +// if (box2!==null){ +// document.querySelector('.box2').innerHTML = Date(); +// } +// } + + +// \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/dist/viewJS.js b/02-TypeScript/14-events/home-puzzles/shlomi.samai/dist/viewJS.js new file mode 100644 index 000000000..7b4dafc4b --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shlomi.samai/dist/viewJS.js @@ -0,0 +1,12 @@ +const Boxes = document.querySelectorAll('.box4'); +Boxes.forEach((box4) => { + if (Boxes) { + box4.addEventListener("click", myEvent2); + } + function myEvent2() { + if (Boxes) { + box4.innerHTML = `
                +
                `; + } + } +}); diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/index.ts b/02-TypeScript/14-events/home-puzzles/shlomi.samai/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/main.html b/02-TypeScript/14-events/home-puzzles/shlomi.samai/main.html new file mode 100644 index 000000000..b947b2621 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shlomi.samai/main.html @@ -0,0 +1,27 @@ + + + + + + + Events HW + + + + + +
                +
                click on me
                +
                click on me
                +
                click on me
                +
                click on me
                +
                click on me
                +
                click on me
                +
                + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/model.ts b/02-TypeScript/14-events/home-puzzles/shlomi.samai/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/style.css b/02-TypeScript/14-events/home-puzzles/shlomi.samai/style.css new file mode 100644 index 000000000..98fbde429 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shlomi.samai/style.css @@ -0,0 +1,31 @@ +.box { + height: 100px; + width: 200px; + background-color: rgb(255, 145, 0); +} + +.box3 { + height: 100px; + width: 200px; + background-color: rgb(119, 0, 255); +} + +.box4 { + height: 100px; + width: 200px; + background-color: #33ff00; +} + +.box5 { + height: 100px; + width: 200px; + background-color: hsl(0deg, 100%, 50%); +} + +.wrapper { + margin: auto; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + padding: 50px; + gap: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/style.scss b/02-TypeScript/14-events/home-puzzles/shlomi.samai/style.scss new file mode 100644 index 000000000..acd252e4f --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shlomi.samai/style.scss @@ -0,0 +1,27 @@ +.box { + height: 100px; + width: 200px; + background-color:rgb(255, 145, 0); +} +.box3 { + height: 100px; + width: 200px; + background-color:rgb(119, 0, 255); +} +.box4 { + height: 100px; + width: 200px; + background-color:#33ff00; +} +.box5 { + height: 100px; + width: 200px; + background-color:hsl(0, 100%, 50%); +} +.wrapper{ + margin: auto; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + padding: 50px; + gap:50px ; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/shlomi.samai/view.ts b/02-TypeScript/14-events/home-puzzles/shlomi.samai/view.ts new file mode 100644 index 000000000..aa6b44f5d --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/shlomi.samai/view.ts @@ -0,0 +1,19 @@ + + +const Boxes = document.querySelectorAll('.box4') + + +Boxes.forEach((box4) => { + if (Boxes) { + box4.addEventListener("click", myEvent2) + } + + + function myEvent2() { + + if (Boxes) { + box4.innerHTML = `
                +
                ` + } + } +}) diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/dist/index.css b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/dist/index.css new file mode 100644 index 000000000..aa864a872 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/dist/index.css @@ -0,0 +1,27 @@ +* { + margin: 0; + padding: 0; +} + +html { + height: 100%; + width: 100%; +} + +body { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.box { + height: 200px; + width: 200px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + font-family: Arial, Helvetica, sans-serif; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/dist/index.js b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/dist/index.js new file mode 100644 index 000000000..ad060bac9 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/dist/index.js @@ -0,0 +1,8 @@ +var box = document.querySelector(".box"); +// function getRandomColor(){ +// "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0") +// } +box.addEventListener("click", function () { + box.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0"); +}); +//לשאול את טל לגבי הסימון הכחול על הכתב diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.css b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.css new file mode 100644 index 000000000..aa864a872 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.css @@ -0,0 +1,27 @@ +* { + margin: 0; + padding: 0; +} + +html { + height: 100%; + width: 100%; +} + +body { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.box { + height: 200px; + width: 200px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + font-family: Arial, Helvetica, sans-serif; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.html b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.html new file mode 100644 index 000000000..9bbe85f30 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.html @@ -0,0 +1,14 @@ + + + + + + + + + Document + + +

                Press me !

                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.scss b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.scss new file mode 100644 index 000000000..bcd6b0834 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.scss @@ -0,0 +1,24 @@ +*{ + margin: 0; + padding: 0; +} +html{ + height: 100%; + width: 100%; +} +body{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.box{ + height: 200px; + width: 200px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + font-family: Arial, Helvetica, sans-serif; +} diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.ts b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.ts new file mode 100644 index 000000000..aaf704954 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 1/index.ts @@ -0,0 +1,11 @@ +const box = document.querySelector(".box") as HTMLDivElement + +// function getRandomColor(){ +// "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0") +// } + +box.addEventListener("click" , ()=>{ + box.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0") +}) + +//לשאול את טל לגבי הסימון הכחול על הכתב \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/dist/index.css b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/dist/index.css new file mode 100644 index 000000000..d652a6cfd --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/dist/index.css @@ -0,0 +1,29 @@ +* { + padding: 0; + margin: 0; +} + +html { + height: 100%; + width: 100%; +} + +body { + height: 100%; + width: 100%; +} + +.board { + height: 80%; + width: 80%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.cube { + height: calc( 80% / 3); + width: calc( 80% / 3); + border: 1px solid black; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/dist/index.js b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.css b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.css new file mode 100644 index 000000000..efaf3f0f8 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.css @@ -0,0 +1,29 @@ +* { + padding: 0; + margin: 0; +} + +html { + height: 100%; + width: 100%; +} + +body { + height: 100%; + width: 100%; +} + +.board { + height: 80%; + width: 80%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.cube { + height: 26.6666666667%; + width: 26.6666666667%; + border: 1px solid black; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.html b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.html new file mode 100644 index 000000000..9dce081f4 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.scss b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.scss new file mode 100644 index 000000000..0f7ec81f1 --- /dev/null +++ b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.scss @@ -0,0 +1,30 @@ +*{ + padding: 0; + margin: 0; +} + +html{ + height: 100%; + width: 100%; +} + +body{ + height: 100%; + width: 100%; + +} + +.board{ + height: 80%; + width: 80%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.cube{ + height: calc( 80% / 3); + width: calc( 80% / 3); + border: 1px solid black; +} \ No newline at end of file diff --git a/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.ts b/02-TypeScript/14-events/home-puzzles/yuvalarama/level 2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/.vscode/launch.json b/02-TypeScript/15-store/.vscode/launch.json new file mode 100644 index 000000000..2ba986f6f --- /dev/null +++ b/02-TypeScript/15-store/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/02-TypeScript/15-store/.vscode/settings.json b/02-TypeScript/15-store/.vscode/settings.json new file mode 100644 index 000000000..8f611f638 --- /dev/null +++ b/02-TypeScript/15-store/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "liveServer.settings.port": 5501, + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/control.ts b/02-TypeScript/15-store/Home-puzzles/Amit/control.ts new file mode 100644 index 000000000..6398da17f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/control.ts @@ -0,0 +1,92 @@ +function renderContacts() { + try { + const contactData: HTMLDivElement | null = document.querySelector("#contactData"); + if (contactData) { + for (let i = allContactsArray.length - 1; i < allContactsArray.length; i++) { + const contact = document.createElement("div"); + contact.innerHTML = ` +
                +
                + Name: ${allContactsArray[i].firstName} + Ser Name: ${allContactsArray[i].serName} + Mobile: ${allContactsArray[i].mobileNumber} + E-mail: ${allContactsArray[i].email} +
                +
                +
                `; + + document.querySelector("#contactData")?.appendChild(contact); + + // document.getElementById("customimage").onchange = function(e: Event) { + // let file = (e.target).files[0]; + + const contactImage: HTMLElement | null = document.querySelector(`#contactImage-${allContactsArray[i].mobileNumber}`) + if (contactImage) contactImage.style.backgroundImage = "url("+ URL.createObjectURL(event?.target?.files[i]) +")"; + // if (contactImage) contactImage.style.backgroundColor = "red"; + } + } + } + catch (error) { + console.error(error); + return error; + } +} + + + + +function search(): void { + try { + const userInput: Element | null = document.querySelector("#userInput"); + const noResults: HTMLDivElement | null = document.querySelector("#noResults"); + + userInput?.addEventListener("input", (search) => { + let userInputValue = (search.target as HTMLInputElement).value + userInputValue = userInputValue.toLocaleLowerCase(); + + let results = document.querySelectorAll(".results__contact"); + for (let i = 0; i < results.length; i++) { + if (results[i].innerText.toLowerCase().includes(userInputValue) && noResults) { + results[i].style.display = ""; + noResults.style.display = "none"; + } else { + results[i].style.display = "none"; + } + } + + let allContacts = document.querySelectorAll(".results"); + for (let i = 0; i < results.length; i++) { + if (!allContacts[i].innerText.toLowerCase().includes(userInputValue) && noResults) { + noResults.style.display = ""; + noResults.innerHTML = `Sorry, there isn't a contact that icludes ${userInputValue} on our store...`; + } + } + } + ); + } catch (error) { + console.error(error); + return error; + } +} + + + +function handleAddContact(ev: any) { + try { + ev.preventDefault(); + + const firstName = ev.target.elements.firstName.value; + const serName = ev.target.elements.serName.value; + const mobileNumber = ev.target.elements.mobileNumber.value; + const email = ev.target.elements.email.value; + + allContactsArray.push(new Contact(firstName, serName, mobileNumber, email)); + + ev.target.reset(); + + } catch (error) { + console.error(error); + } + +} + diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/dist/bookshook.css b/02-TypeScript/15-store/Home-puzzles/Amit/dist/bookshook.css new file mode 100644 index 000000000..d04bbaa6b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/dist/bookshook.css @@ -0,0 +1,109 @@ +body { + margin: 0; + position: relative; + background-color: #d4d1cc; +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: #3811ba; + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: #2a2929; + color: #eae6e6; + padding: 0.5rem; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__contact { + width: 40rem; + height: 15rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__contact__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: #121111; + font-weight: 600; + gap: 1rem; +} + +.addContcatsWrapper { + width: 30rem; + height: 26rem; + position: relative; + bottom: 199rem; + left: 0rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.addContcatsWrapper__input { + width: 14rem; + height: 2rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1rem; + background-color: #f3eded; + color: black; + padding-left: 0.5rem; +} +.addContcatsWrapper__addButton { + width: 10rem; + height: 2rem; + background-color: #ffe600; + border-radius: 0.5rem; + font-weight: 900; + vertical-align: middle; + font-size: 1rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #616161; +} +.addContcatsWrapper__addButton:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.addContcatsWrapper__addButton:active { + background-color: #4a0afb; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/dist/bookshook.js b/02-TypeScript/15-store/Home-puzzles/Amit/dist/bookshook.js new file mode 100644 index 000000000..fafa2bee6 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/dist/bookshook.js @@ -0,0 +1 @@ +// allContactsArray.push(new Contact( "Amit", "Zaltsberger", "0523311930", "amitzalts@gmail.com")); diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/dist/control.js b/02-TypeScript/15-store/Home-puzzles/Amit/dist/control.js new file mode 100644 index 000000000..17ff923c9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/dist/control.js @@ -0,0 +1,68 @@ +function renderContacts() { + var _a, _b; + try { + var contactData = document.querySelector("#contactData"); + if (contactData) { + for (var i = allContactsArray.length - 1; i < allContactsArray.length; i++) { + var contact = document.createElement("div"); + contact.innerHTML = "\n
                \n
                \n Name: " + allContactsArray[i].firstName + " \n Ser Name: " + allContactsArray[i].serName + " \n Mobile: " + allContactsArray[i].mobileNumber + " \n E-mail: " + allContactsArray[i].email + " \n
                \n
                \n
                "; + (_a = document.querySelector("#contactData")) === null || _a === void 0 ? void 0 : _a.appendChild(contact); + // document.getElementById("customimage").onchange = function(e: Event) { + // let file = (e.target).files[0]; + var contactImage = document.querySelector("#contactImage-" + allContactsArray[i].mobileNumber); + if (contactImage) + contactImage.style.backgroundImage = "url(" + URL.createObjectURL((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.files[i]) + ")"; + // if (contactImage) contactImage.style.backgroundColor = "red"; + } + } + } + catch (error) { + console.error(error); + return error; + } +} +function search() { + try { + var userInput = document.querySelector("#userInput"); + var noResults_1 = document.querySelector("#noResults"); + userInput === null || userInput === void 0 ? void 0 : userInput.addEventListener("input", function (search) { + var userInputValue = search.target.value; + userInputValue = userInputValue.toLocaleLowerCase(); + var results = document.querySelectorAll(".results__contact"); + for (var i = 0; i < results.length; i++) { + if (results[i].innerText.toLowerCase().includes(userInputValue) && noResults_1) { + results[i].style.display = ""; + noResults_1.style.display = "none"; + } + else { + results[i].style.display = "none"; + } + } + var allContacts = document.querySelectorAll(".results"); + for (var i = 0; i < results.length; i++) { + if (!allContacts[i].innerText.toLowerCase().includes(userInputValue) && noResults_1) { + noResults_1.style.display = ""; + noResults_1.innerHTML = "Sorry, there isn't a contact that icludes " + userInputValue + " on our store..."; + } + } + }); + } + catch (error) { + console.error(error); + return error; + } +} +function handleAddContact(ev) { + try { + ev.preventDefault(); + var firstName = ev.target.elements.firstName.value; + var serName = ev.target.elements.serName.value; + var mobileNumber = ev.target.elements.mobileNumber.value; + var email = ev.target.elements.email.value; + allContactsArray.push(new Contact(firstName, serName, mobileNumber, email)); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Amit/dist/model.js new file mode 100644 index 000000000..ac784f8c2 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/dist/model.js @@ -0,0 +1,10 @@ +var Contact = /** @class */ (function () { + function Contact(firstName, serName, mobileNumber, email) { + this.firstName = firstName; + this.serName = serName; + this.mobileNumber = mobileNumber; + this.email = email; + } + return Contact; +}()); +var allContactsArray = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/dist/style.css b/02-TypeScript/15-store/Home-puzzles/Amit/dist/style.css new file mode 100644 index 000000000..e081abf51 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/dist/style.css @@ -0,0 +1,121 @@ +body { + margin: 0; + position: relative; + background-color: #d4d1cc; +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: #3811ba; + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: #2a2929; + color: #eae6e6; + padding: 0.5rem; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__contact { + width: 40rem; + height: 15rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__contact__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: #121111; + font-weight: 600; + gap: 1rem; +} + +.addContcatsWrapper { + width: 24rem; + height: 26rem; + position: relative; + bottom: 199rem; + left: 2rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.addContcatsWrapper__input { + width: 14rem; + height: 2rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1rem; + background-color: #f3eded; + color: black; + padding-left: 0.5rem; +} +.addContcatsWrapper__input__inputImage { + border: 0.1rem solid 0; + color: red; +} +.addContcatsWrapper__addButton { + width: 10rem; + height: 2rem; + background-color: #ffe600; + border-radius: 0.5rem; + font-weight: 900; + vertical-align: middle; + font-size: 1rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #616161; +} +.addContcatsWrapper__addButton:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.addContcatsWrapper__addButton:active { + background-color: #4a0afb; +} + +.image { + width: 5rem; + height: 5rem; + border: 0.2rem solid black; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/dist/view.js b/02-TypeScript/15-store/Home-puzzles/Amit/dist/view.js new file mode 100644 index 000000000..bf6eaea39 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/dist/view.js @@ -0,0 +1 @@ +var addContactsForm = document.querySelector("#addContactsForm"); diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/index.html b/02-TypeScript/15-store/Home-puzzles/Amit/index.html new file mode 100644 index 000000000..3f5542f81 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + Admin + + +
                Contacts List
                + + +
                +
                +
                +
                + +
                Add a contact

                +
                + +

                + +

                + +

                + +

                + + + + + +
                +
                + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/model.ts b/02-TypeScript/15-store/Home-puzzles/Amit/model.ts new file mode 100644 index 000000000..0288542d3 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/model.ts @@ -0,0 +1,10 @@ +class Contact { + public constructor( + public firstName: string, + public serName: string, + public mobileNumber: string, + public email: string + ) { } + } + + const allContactsArray: Contact[] = []; \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/style.css b/02-TypeScript/15-store/Home-puzzles/Amit/style.css new file mode 100644 index 000000000..ddfde4d46 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/style.css @@ -0,0 +1,121 @@ +body { + margin: 0; + position: relative; + background-color: rgb(212, 209, 204); +} + +.header { + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: rgb(56, 17, 186); + font-weight: 800; +} + +.searchBox { + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: rgb(42, 41, 41); + color: rgb(234, 230, 230); + padding: 0.5rem; +} + +.results { + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; +} +.results__contact { + width: 40rem; + height: 15rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.results__contact__wrapper { + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: rgb(18, 17, 17); + font-weight: 600; + gap: 1rem; +} + +.addContcatsWrapper { + width: 24rem; + height: 26rem; + position: relative; + bottom: 199rem; + left: 2rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; +} +.addContcatsWrapper__input { + width: 14rem; + height: 2rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1rem; + background-color: rgb(243, 237, 237); + color: black; + padding-left: 0.5rem; +} +.addContcatsWrapper__input__inputImage { + border: 0.1rem solid 0; + color: red; +} +.addContcatsWrapper__addButton { + width: 10rem; + height: 2rem; + background-color: rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + vertical-align: middle; + font-size: 1rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(97, 97, 97); +} +.addContcatsWrapper__addButton:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.addContcatsWrapper__addButton:active { + background-color: rgb(74, 10, 251); +} + +.image { + width: 5rem; + height: 5rem; + border: 0.2rem solid black; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/style.scss b/02-TypeScript/15-store/Home-puzzles/Amit/style.scss new file mode 100644 index 000000000..47f946d7f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/style.scss @@ -0,0 +1,126 @@ +body{ + margin:0; + position: relative; + background-color: rgb(212, 209, 204); +} + +.header{ + width: 30rem; + height: 3rem; + position: relative; + top: 1rem; + left: 40rem; + font-size: 5rem; + color: rgb(56, 17, 186); + font-weight: 800; + +} + +.searchBox{ + width: 30rem; + height: 3rem; + position: relative; + top: 5rem; + left: 38rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1.5rem; + background-color: rgb(42, 41, 41); + color: rgb(234, 230, 230); + padding: 0.5rem; +} + +.results{ + width: 50rem; + height: 200rem; + position: relative; + top: 5rem; + left: 30rem; + border-radius: 1rem; + font-size: 1.5rem; + padding: 1rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + + &__contact{ + width: 40rem; + height: 15rem; + position: relative; + top: 0rem; + left: 3rem; + border: 0.1rem solid black; ; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + &__wrapper{ + width: 39rem; + height: 11rem; + position: relative; + top: 1rem; + left: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + display: flex; + flex-direction: column; + color: rgb(18, 17, 17); + font-weight: 600; + gap: 1rem; + } + } +} + +.addContcatsWrapper{ + width: 24rem; + height: 26rem; + position: relative; + bottom: 199rem; + left: 2rem; + border: 0.1rem solid black; ; + border-radius: 1rem; + font-size: 1.5rem; + margin-top: 0.7rem; + + &__input{ + width: 14rem; + height: 2rem; + border: 0.1rem solid black; + border-radius: 1rem; + font-size: 1rem; + background-color: rgb(243, 237, 237); + color: black; + padding-left: 0.5rem; + + &__inputImage{ + border: 0.1rem solid red($color: #000000); + color: red; + } + + } + &__addButton{ + width: 10rem; + height: 2rem; + background-color: rgb(255, 230, 0); + border-radius: 0.5rem; + font-weight: 900; + vertical-align: middle; + font-size: 1rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem rgb(97, 97, 97); + &:hover{ + background-color: white; + box-shadow: none; + transition: 0.5s; + } + &:active{ + background-color: rgb(74, 10, 251); + } + } +} + +.image{ + width: 5rem; + height: 5rem; + border: 0.2rem solid black ; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Amit/view.ts b/02-TypeScript/15-store/Home-puzzles/Amit/view.ts new file mode 100644 index 000000000..fd9febd15 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Amit/view.ts @@ -0,0 +1 @@ +const addContactsForm = document.querySelector("#addContactsForm"); diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/control.ts b/02-TypeScript/15-store/Home-puzzles/Ayala/control.ts new file mode 100644 index 000000000..437862d8f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/control.ts @@ -0,0 +1,23 @@ +const form = document.querySelector("registration-form"); +const namNodeListOftype = document.querySelectorAll("name"); + + + +function handleFormSubmit(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const city = ev.target.elements.city.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.password.value; + const color = ev.target.elements.color.value; + const form = new Form(name, city, email, phone, password, color); + forms.push(form); + console.log(form); + } catch (error) { + console.error(error) + } +} + + diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/control.js b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/control.js new file mode 100644 index 000000000..81d2d3bdd --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/control.js @@ -0,0 +1,19 @@ +var form = document.querySelector("registration-form"); +var namNodeListOftype = document.querySelectorAll("name"); +function handleFormSubmit(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var city = ev.target.elements.city.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.password.value; + var color = ev.target.elements.color.value; + var form_1 = new Form(name, city, email, phone, password, color); + forms.push(form_1); + console.log(form_1); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/dist/control.dev.js b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/dist/control.dev.js new file mode 100644 index 000000000..37f70bc83 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/dist/control.dev.js @@ -0,0 +1,21 @@ +"use strict"; + +var form = document.querySelector("registration-form"); +var namNodeListOftype = document.querySelectorAll("name"); + +function handleAddItem(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var city = ev.target.elements.city.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.password.value; + var color = ev.target.elements.color.value; + var form_1 = new Form(name, city, email, phone, password, color); + forms.push(form_1); + console.log(form_1); //ev.target.reset() + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/helpers.js b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/helpers.js new file mode 100644 index 000000000..a839ae999 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/helpers.js @@ -0,0 +1,3 @@ +// function uid(){ +// return Date.now().toString(36)+Math.random().toString(36).substr(2); +// } diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/index.js b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/model.js new file mode 100644 index 000000000..3d43ecbd7 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/model.js @@ -0,0 +1,12 @@ +var Form = /** @class */ (function () { + function Form(name, city, email, phone, password, color) { + this.name = name; + this.city = city; + this.email = email; + this.phone = phone; + this.password = password; + this.color = color; + } + return Form; +}()); +var forms = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/style.css b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/style.css new file mode 100644 index 000000000..b87f25c8d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/style.css @@ -0,0 +1,31 @@ +* { + margin: 0; + padding: 0; + width: 80%; + padding: 30px; + font-size: 20px; + background-color: #f6ebc7; +} + +body { + box-sizing: border-box; + border: 2px solid black; + width: 50%; + height: 80%; + margin: auto; + padding: 30px; +} +body input { + background-color: white; + width: 80%; + padding: 12px 20px; + margin: 8px 0; + display: flex; + display: inline-block; + border: 5px solid #8a6ca5; + box-sizing: border-box; + font-size: 14px; +} +body h1 { + font-size: xx-large; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/dist/view.js b/02-TypeScript/15-store/Home-puzzles/Ayala/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/helpers.ts b/02-TypeScript/15-store/Home-puzzles/Ayala/helpers.ts new file mode 100644 index 000000000..5f7ee7150 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/helpers.ts @@ -0,0 +1,3 @@ +// function uid(){ +// return Date.now().toString(36)+Math.random().toString(36).substr(2); +// } \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/index.html b/02-TypeScript/15-store/Home-puzzles/Ayala/index.html new file mode 100644 index 000000000..7b0c328b3 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + + + + + + +
                + +

                Registration

                + + Registration Form +
                + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/index.ts b/02-TypeScript/15-store/Home-puzzles/Ayala/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/model.ts b/02-TypeScript/15-store/Home-puzzles/Ayala/model.ts new file mode 100644 index 000000000..daa0bfb58 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/model.ts @@ -0,0 +1,15 @@ +class Form { + constructor( + public name: string, + public city: string, + public email: string, + public phone: number, + public password: number, + public color: string, + + ) { + } + +} + +const forms : Form[] = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/registrationForm.html b/02-TypeScript/15-store/Home-puzzles/Ayala/registrationForm.html new file mode 100644 index 000000000..e75042544 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/registrationForm.html @@ -0,0 +1,38 @@ + + + + + + + + Document + + + + + + + + + +
                +

                Registration Form

                + + Registration + +
                + + + + + + + + +
                + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/style.css b/02-TypeScript/15-store/Home-puzzles/Ayala/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/style.scss b/02-TypeScript/15-store/Home-puzzles/Ayala/style.scss new file mode 100644 index 000000000..249a264b8 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Ayala/style.scss @@ -0,0 +1,35 @@ +*{ + margin: 0; + padding: 0; + width: 80%; + padding: 30px; + font-size: 20px; + background-color: rgb(246, 235, 199); +} +body{ + box-sizing: border-box; + border: 2px solid black; + width: 50%; + height: 80%; + margin: auto; + padding: 30px; + + + +input{ + background-color: white; + width: 80%; + padding: 12px 20px; + margin: 8px 0; + display: flex; + display: inline-block; + border: 5px solid rgb(138, 108, 165); + box-sizing: border-box; + font-size: 14px; + +} +h1{ + font-size: xx-large; +} + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Ayala/view.ts b/02-TypeScript/15-store/Home-puzzles/Ayala/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/.vscode/settings.json b/02-TypeScript/15-store/Home-puzzles/Dayan/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/index.html b/02-TypeScript/15-store/Home-puzzles/Dayan/index.html new file mode 100644 index 000000000..e86fb5e00 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/index.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + Registration Form + + + +
                +
                Registration
                +
                +
                +
                + Full Name + +
                +
                + Email + +
                +
                + Phone Number + +
                +
                + Password + +
                +
                + Your Image + +
                +
                + + + Gender +
                + + +
                +
                +
                + +
                +
                +
                +
                + +
                + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/public/dist/script.js b/02-TypeScript/15-store/Home-puzzles/Dayan/public/dist/script.js new file mode 100644 index 000000000..6d2f1f505 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/public/dist/script.js @@ -0,0 +1,50 @@ +//----- Class +var Profile = /** @class */ (function () { + function Profile(name, email, phone, password, image, gender) { + this.name = name; + this.email = email; + this.phone = phone; + this.password = password; + this.image = image; + this.gender = gender; + } + return Profile; +}()); +var profile = []; +//----- Script +var form = document.querySelector("form"); +var userProfile = document.querySelector(".profile"); +//----- Event listener +function hendleAddDetail(event) { + try { + event.preventDefault(); + //----- Creat new div + var user_1 = document.createElement("div"); + userProfile.appendChild(user_1); + user_1.classList.add("user"); + //----- Display the image on the page + var userImage = form.querySelector("#user-image"); + var file = userImage.files[0]; + var reader_1 = new FileReader(); + reader_1.readAsDataURL(file); + reader_1.onload = function () { + var img = document.createElement("img"); + img.src = reader_1.result; + user_1.appendChild(img); + }; + //----- Get values from the elements + var name = event.target.elements.name.value; + var email = event.target.elements.email.value; + var phone = event.target.elements.phone.value; + var password = event.target.elements.password.value; + var image = event.target.elements.image.value; + var gender = event.target.elements.gender.value; + profile.push(new Profile(name, email, phone, password, image, gender)); + console.log(profile); + //----- Document profile on DOM + user_1.innerHTML += "

                " + name + "
                " + email + "
                " + phone + "
                " + gender + "

                "; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/public/dist/style.css b/02-TypeScript/15-store/Home-puzzles/Dayan/public/dist/style.css new file mode 100644 index 000000000..87f71b77f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/public/dist/style.css @@ -0,0 +1,137 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + height: 100vh; + padding: 10px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} + +.container { + max-height: 750px; + max-width: 400px; + width: 100%; + background: #ffffff; + padding: 25px 30px; + border-radius: 5px; +} +.container .title { + font-size: 25px; + font-weight: 500; + position: relative; +} +.container .title::before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 30px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} +.container form .user_details { + display: grid; + grid-template-columns: repeat(1, 1fr); + margin: 20px 0 12px 0; +} +.container form .user_details .input-box { + margin-bottom: 15px; + width: calc(100% / 2 - 30px); +} +.container form .user_details .input-box .details { + font-weight: 500; + margin-bottom: 5px; + display: block; +} +.container form .user_details .input-box input { + height: 45px; + width: 350px; + outline: none; + border-radius: 5px; + border: 1px solid #ccc; + padding-left: 15px; + font-size: 16px; + border-bottom-width: 2px; + transition: all 0.5s ease; +} +.container form .user_details .input-box input:focus { + border-color: #7ac6ee; +} +.container form .user_details .gender-details .gender-title { + font-size: 20px; + font-weight: 500; +} +.container form .user_details .gender-details .category { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.container form .user_details .gender-details .category label { + display: flex; + align-items: center; +} +.container form .user_details .gender-details .category label .dot { + height: 18px; + width: 18px; + background: #d9d9d9; + border-radius: 50%; + margin-right: 10px; + border: 5px solid transparent; + transition: all 0.5s ease; +} +.container form .user_details .gender-details #dot-1:checked ~ .category label .one, +.container form .user_details .gender-details #dot-2:checked ~ .category label .two { + border-color: #d9d9d9; + background: #7ac6ee; +} +.container form input[type=radio] { + display: none; +} +.container form .button { + margin: 45px 0; +} +.container form .button input { + height: 45px; + width: 350px; + padding: 10px; + outline: none; + color: #fff; + border: none; + font-size: 18px; + font-weight: 500; + border-radius: 5px; + letter-spacing: 1px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} +.container form .button input:hover { + background: linear-gradient(-135deg, #b5f156, #7ac6ee); +} + +.profile { + margin-left: 10px; + display: grid; + gap: 25px; + grid-template-columns: 30% 30% 30%; + grid-template-rows: 100px 100px 100px; +} +.profile .user { + display: flex; + justify-content: space-between; + padding: 10px; + height: 120px; + width: 330px; + background-color: #ffffff; + border-radius: 5px; +} +.profile .user img { + width: 100px; + height: 100px; + border-radius: 50%; +} +.profile .user p { + font-size: 15px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/script.ts b/02-TypeScript/15-store/Home-puzzles/Dayan/script.ts new file mode 100644 index 000000000..dba5db832 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/script.ts @@ -0,0 +1,62 @@ +//----- Class +class Profile{ + constructor( + public name: string, + public email: string, + public phone: number, + public password: string | number, + public image: string, + public gender: string + ){} +} + +const profile:Profile[] = [] + +//----- Script +const form = document.querySelector("form") as HTMLFormElement +const userProfile = document.querySelector(".profile") as HTMLElement + +//----- Event listener +function hendleAddDetail(event){ + try{ + + event.preventDefault() + + //----- Creat new div + const user = document.createElement("div") as HTMLDivElement + userProfile.appendChild(user) + user.classList.add("user") + + //----- Display the image on the page + const userImage = form.querySelector("#user-image") as HTMLInputElement + const file = userImage.files[0] + + const reader = new FileReader() + reader.readAsDataURL(file) + + reader.onload = () => { + const img = document.createElement("img") + img.src = reader.result as string + user.appendChild(img) + } + + //----- Get values from the elements + const name = event.target.elements.name.value + const email = event.target.elements.email.value + const phone = event.target.elements.phone.value + const password = event.target.elements.password.value + const image = event.target.elements.image.value + const gender = event.target.elements.gender.value + + profile.push(new Profile(name, email, phone, password, image, gender)) + + console.log(profile) + + //----- Document profile on DOM + user.innerHTML += `

                ${name}
                ${email}
                ${phone}
                ${gender}

                ` + + }catch(error){ + console.error(error) + } +} + diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/style.css b/02-TypeScript/15-store/Home-puzzles/Dayan/style.css new file mode 100644 index 000000000..a06f8315d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/style.css @@ -0,0 +1,137 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + height: 100vh; + padding: 10px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} + +.container { + max-height: 750px; + max-width: 400px; + width: 100%; + background: #ffffff; + padding: 25px 30px; + border-radius: 5px; +} +.container .title { + font-size: 25px; + font-weight: 500; + position: relative; +} +.container .title::before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 30px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} +.container form .user_details { + display: grid; + grid-template-columns: repeat(1, 1fr); + margin: 20px 0 12px 0; +} +.container form .user_details .input-box { + margin-bottom: 15px; + width: calc(50% - 30px); +} +.container form .user_details .input-box .details { + font-weight: 500; + margin-bottom: 5px; + display: block; +} +.container form .user_details .input-box input { + height: 45px; + width: 350px; + outline: none; + border-radius: 5px; + border: 1px solid #ccc; + padding-left: 15px; + font-size: 16px; + border-bottom-width: 2px; + transition: all 0.5s ease; +} +.container form .user_details .input-box input:focus { + border-color: #7ac6ee; +} +.container form .user_details .gender-details .gender-title { + font-size: 20px; + font-weight: 500; +} +.container form .user_details .gender-details .category { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.container form .user_details .gender-details .category label { + display: flex; + align-items: center; +} +.container form .user_details .gender-details .category label .dot { + height: 18px; + width: 18px; + background: #d9d9d9; + border-radius: 50%; + margin-right: 10px; + border: 5px solid transparent; + transition: all 0.5s ease; +} +.container form .user_details .gender-details #dot-1:checked ~ .category label .one, +.container form .user_details .gender-details #dot-2:checked ~ .category label .two { + border-color: #d9d9d9; + background: #7ac6ee; +} +.container form input[type=radio] { + display: none; +} +.container form .button { + margin: 45px 0; +} +.container form .button input { + height: 45px; + width: 350px; + padding: 10px; + outline: none; + color: #fff; + border: none; + font-size: 18px; + font-weight: 500; + border-radius: 5px; + letter-spacing: 1px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} +.container form .button input:hover { + background: linear-gradient(-135deg, #b5f156, #7ac6ee); +} + +.profile { + margin-left: 10px; + display: grid; + gap: 25px; + grid-template-columns: 30% 30% 30%; + grid-template-rows: 100px 100px 100px; +} +.profile .user { + display: flex; + justify-content: space-between; + padding: 10px; + height: 120px; + width: 330px; + background-color: #ffffff; + border-radius: 5px; +} +.profile .user img { + width: 100px; + height: 100px; + border-radius: 50%; +} +.profile .user p { + font-size: 15px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Dayan/style.scss b/02-TypeScript/15-store/Home-puzzles/Dayan/style.scss new file mode 100644 index 000000000..34b869b78 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Dayan/style.scss @@ -0,0 +1,170 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + display: flex; + height: 100vh; + padding: 10px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); +} + +.container{ + max-height: 750px; + max-width: 400px; + width: 100%; + background: #ffffff; + padding: 25px 30px; + border-radius: 5px; + + .title{ + font-size: 25px; + font-weight: 500; + position: relative; + + &::before{ + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 30px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); + } + } + + form{ + .user_details{ + display: grid; + grid-template-columns: repeat(1, 1fr); + margin: 20px 0 12px 0; + + .input-box{ + margin-bottom: 15px; + width: calc(100% / 2 - 30px); + + .details{ + font-weight: 500; + margin-bottom: 5px; + display: block; + } + + input{ + height: 45px; + width: 350px; + outline: none; + border-radius: 5px; + border: 1px solid #ccc; + padding-left: 15px; + font-size: 16px; + border-bottom-width: 2px; + transition: all 0.5s ease; + + + &:focus{ + border-color: #7ac6ee; + } + } + } + + .gender-details{ + + .gender-title{ + font-size: 20px; + font-weight: 500; + } + + .category{ + display: grid; + grid-template-columns: repeat(2, 1fr); + + label{ + display: flex; + align-items: center; + + .dot{ + height: 18px; + width: 18px; + background: #d9d9d9; + border-radius: 50%; + margin-right: 10px; + border: 5px solid transparent; + transition: all 0.5s ease; + } + } + } + + #dot-1:checked ~ .category label .one, + #dot-2:checked ~ .category label .two{ + border-color: #d9d9d9; + background: #7ac6ee; + + } + + } + } + + input[type="radio"]{ + display: none; + } + + .button{ + margin: 45px 0; + + input{ + height: 45px; + width: 350px; + padding: 10px; + outline: none; + color: #fff; + border: none; + font-size: 18px; + font-weight: 500; + border-radius: 5px; + letter-spacing: 1px; + background: linear-gradient(135deg, #b5f156, #7ac6ee); + + &:hover{ + background: linear-gradient(-135deg, #b5f156, #7ac6ee); + } + } + } + } +} + +.profile{ + margin-left: 10px; + display: grid; + gap: 25px; + grid-template-columns: 30% 30% 30%; + grid-template-rows: 100px 100px 100px; + + .user{ + display: flex; + justify-content: space-between; + padding: 10px; + height: 120px; + width: 330px; + background-color: #ffffff; + border-radius: 5px; + + img{ + width: 100px; + height: 100px; + border-radius: 50%; + } + + p{ + font-size: 15px; + } + } +} + + + + + + diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/control.ts b/02-TypeScript/15-store/Home-puzzles/EstiMauda/control.ts new file mode 100644 index 000000000..d2959386a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/control.ts @@ -0,0 +1,65 @@ + +const form = document.querySelector("#myForm"); + +function hendleAddDetail(ev) { + + try { + ev.preventDefault(); + + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.pass.value; + const image = ev.target.elements.image.value; + + + details.push(new detail(name, address, email, phone, password, image)); + + console.log(details) + + randelDetails() + + + } catch (error) { + console.error(error); + } +} + +function randelDetails(){ + try { + for(let i=0; iName: ${details[i].name}
                ` + userDetail.innerHTML+= `
                Address: ${details[i].address}
                ` + userDetail.innerHTML+= `
                Email: ${details[i].email}
                ` + userDetail.innerHTML+= `
                Phone: ${details[i].phone}
                ` + userDetail.innerHTML+= `
                Password: ${details[i].password}
                ` + } + } catch (error) { + console.error(error) + } +} + +function hendelChangeColor(ev) { + try { + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function hendelViewPassword(){ + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } + } diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/control.js b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/control.js new file mode 100644 index 000000000..721a8d706 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/control.js @@ -0,0 +1,57 @@ +var form = document.querySelector("#myForm"); +function hendleAddDetail(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.pass.value; + var image = ev.target.elements.image.value; + details.push(new detail(name, address, email, phone, password, image)); + console.log(details); + randelDetails(); + } + catch (error) { + console.error(error); + } +} +function randelDetails() { + try { + for (var i = 0; i < details.length; i++) { + var userDetail = document.querySelector(".detail"); + userDetail.innerHTML += "
                Name: " + details[i].name + "
                "; + userDetail.innerHTML += "
                Address: " + details[i].address + "
                "; + userDetail.innerHTML += "
                Email: " + details[i].email + "
                "; + userDetail.innerHTML += "
                Phone: " + details[i].phone + "
                "; + userDetail.innerHTML += "
                Password: " + details[i].password + "
                "; + } + } + catch (error) { + console.error(error); + } +} +function hendelChangeColor(ev) { + try { + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function hendelViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/index.js b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/model.js b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/model.js new file mode 100644 index 000000000..0076efda9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/model.js @@ -0,0 +1,12 @@ +var detail = /** @class */ (function () { + function detail(name, address, email, phone, password, image) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.image = image; + } + return detail; +}()); +var details = []; diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/style.css b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/style.css new file mode 100644 index 000000000..c5946dadf --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/dist/style.css @@ -0,0 +1,91 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; +} + +body { + font-family: georgia; + background-color: azure; +} + +h1, h2 { + text-align: center; + color: blue; +} + +.split { + height: 100%; + width: 50%; + position: fixed; + z-index: 1; + top: 80px; + overflow-x: hidden; + padding-top: 10px; +} + +.container { + font-size: 20px; + color: blue; + left: 0; + border: 2px solid blue; +} +.container form { + margin-left: 10px; +} +.container label { + display: inline-block; + width: 120px; + text-align: left; +} +.container input { + text-align: left; + border: 3px solid #a79e9e; + height: 30px; + display: table-cell; + width: 60%; + margin: 10px 0px; +} +.container #pass { + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; +} +.container #colorDiv { + margin: 10px; +} +.container ץ .color { + width: 30px; +} +.container #image { + display: inline-block; + width: 200px; +} +.container button { + text-align: center; + align-items: center; + height: 50px; + width: 110px; + background-color: blue; + color: white; + font-size: 30px; + margin-left: 40%; +} + +.detail { + right: 0; + border: 2px solid blue; + margin-left: 10px; +} + +.userDiv { + color: blue; + font-size: 30px; + margin-left: 10px; +} + +.creatDiv { + font-size: 30px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/index.html b/02-TypeScript/15-store/Home-puzzles/EstiMauda/index.html new file mode 100644 index 000000000..c1ec89971 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/index.html @@ -0,0 +1,41 @@ + + + + + + + Registration Form + + + + + + + +

                Welcome My Site

                +
                +

                Registration

                +
                + +
                + +
                + +
                + +
                + +
                + +
                + +
                +
                + +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/index.ts b/02-TypeScript/15-store/Home-puzzles/EstiMauda/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/model.ts b/02-TypeScript/15-store/Home-puzzles/EstiMauda/model.ts new file mode 100644 index 000000000..91b8e836a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/model.ts @@ -0,0 +1,14 @@ + +class detail { + + constructor( + public name: string, + public address: string, + public email: string, + public phone: number, + public password: string, + public image: string, + ) {} + } + const details:detail[] = [] + diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/style.css b/02-TypeScript/15-store/Home-puzzles/EstiMauda/style.css new file mode 100644 index 000000000..481a84def --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/style.css @@ -0,0 +1,91 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; +} + +body { + font-family: georgia; + background-color: azure; +} + +h1, h2 { + text-align: center; + color: blue; +} + +.split { + height: 100%; + width: 50%; + position: fixed; + z-index: 1; + top: 80px; + overflow-x: hidden; + padding-top: 10px; +} + +.container { + font-size: 20px; + color: blue; + left: 0; + border: 2px solid blue; +} +.container form { + margin-left: 10px; +} +.container label { + display: inline-block; + width: 120px; + text-align: left; +} +.container input { + text-align: left; + border: 3px solid rgb(167, 158, 158); + height: 30px; + display: table-cell; + width: 60%; + margin: 10px 0px; +} +.container #pass { + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; +} +.container #colorDiv { + margin: 10px; +} +.container ץ .color { + width: 30px; +} +.container #image { + display: inline-block; + width: 200px; +} +.container button { + text-align: center; + align-items: center; + height: 50px; + width: 110px; + background-color: blue; + color: white; + font-size: 30px; + margin-left: 40%; +} + +.detail { + right: 0; + border: 2px solid blue; + margin-left: 10px; +} + +.userDiv { + color: blue; + font-size: 30px; + margin-left: 10px; +} + +.creatDiv { + font-size: 30px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/EstiMauda/style.scss b/02-TypeScript/15-store/Home-puzzles/EstiMauda/style.scss new file mode 100644 index 000000000..3a4f40e3f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/EstiMauda/style.scss @@ -0,0 +1,98 @@ +*{ + margin: 0; + padding: 0; + +} + +body{ + font-family: georgia; + background-color: azure; + +} +h1, h2 { + text-align: center; + color: blue; +} + + +.split{ + height: 100%; + width: 50%; + position: fixed; + z-index: 1; + top: 80px; + overflow-x: hidden; + padding-top: 10px; +} + +.container{ + font-size: 20px; + color: blue; + left: 0; + border: 2px solid blue; + // background-color: #111; + form{ + margin-left: 10px; + + } + label{ + display: inline-block; + width: 120px; + text-align: left; + } + + input{ + text-align: left; + border: 3px solid rgb(167, 158, 158); + height: 30px; + display: table-cell; + width: 60%; + margin: 10px 0px; + } + #pass{ + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; + } + #colorDiv{ + margin: 10px; + } + ץ .color{ + width: 30px; + } + #image{ + display: inline-block; + width: 200px; + + } + + button{ + text-align: center; + align-items: center; + height: 50px; + width: 110px; + background-color: blue; + color: white; + font-size: 30px; + margin-left: 40%; + } + + +} + +.detail{ + right: 0; + border: 2px solid blue; + margin-left: 10px; +} +.userDiv{ + color: blue; + font-size: 30px; + margin-left: 10px; + +} +.creatDiv{ + font-size: 30px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/control.ts b/02-TypeScript/15-store/Home-puzzles/Itai-G/control.ts new file mode 100644 index 000000000..2af67da4d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/control.ts @@ -0,0 +1,47 @@ +const registerForm = document.querySelector(`#form`); + +function handleUser(event) { + try { + event.preventDefault(); + const gender = event.target.elements.gender.value; + const username = event.target.elements.username.value; + const password = event.target.elements.password.value; + const email = event.target.elements.email.value; + const theOfBirth = event.target.elements.theOfBirth.value; + const country = event.target.elements.country.value; + const profileImage = event.target.elements.profileImage.value; + + userList.push( + new User(gender, username, password, email, theOfBirth, country, profileImage) + ); + console.log(userList); + renderCard(userList) + event.target.reset(); + } catch (error) { + console.error(error); + } +} + + +function renderCard(users:User[]):void { + try { + const divElement = document.querySelector(`.card`) as HTMLElement; + users.forEach((user) => { + const userCard = document.createElement("div") as HTMLElement; + userCard.classList.add("newCard"); + userCard.innerHTML =` +
                  +
                • Gender: ${user.gender}
                  • +
                • Username: ${user.username}
                  • +
                • Password: ${user.password}
                  • +
                • Email: ${user.email}
                  • +
                • Date Of Birth: ${user.theOfBirth}
                  • +
                • country: ${user.country}
                  • +
                `; + divElement.appendChild(userCard); + }); + } catch (error) { + console.error(error); + } + } + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/control.js b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/control.js new file mode 100644 index 000000000..87883778f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/control.js @@ -0,0 +1,34 @@ +var registerForm = document.querySelector("#form"); +function handleUser(event) { + try { + event.preventDefault(); + var gender = event.target.elements.gender.value; + var username = event.target.elements.username.value; + var password = event.target.elements.password.value; + var email = event.target.elements.email.value; + var theOfBirth = event.target.elements.theOfBirth.value; + var country = event.target.elements.country.value; + var profileImage = event.target.elements.profileImage.value; + userList.push(new User(gender, username, password, email, theOfBirth, country, profileImage)); + console.log(userList); + renderCard(userList); + event.target.reset(); + } + catch (error) { + console.error(error); + } +} +function renderCard(users) { + try { + var divElement_1 = document.querySelector(".card"); + users.forEach(function (user) { + var userCard = document.createElement("div"); + userCard.classList.add("newCard"); + userCard.innerHTML = " \n
                  \n
                • Gender: " + user.gender + "
                  • \n
                • Username: " + user.username + "
                  • \n
                • Password: " + user.password + "
                  • \n
                • Email: " + user.email + "
                  • \n
                • Date Of Birth: " + user.theOfBirth + "
                  • \n
                • country: " + user.country + "
                  • \n
                "; + divElement_1.appendChild(userCard); + }); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/helpers.js b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/helpers.js new file mode 100644 index 000000000..d50a160bc --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/helpers.js @@ -0,0 +1 @@ +var card = document.querySelector(".card"); diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/index.js b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/model.js new file mode 100644 index 000000000..535e4718f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/model.js @@ -0,0 +1,13 @@ +var User = /** @class */ (function () { + function User(gender, username, password, email, theOfBirth, country, profileImage) { + this.gender = gender; + this.username = username; + this.password = password; + this.email = email; + this.theOfBirth = theOfBirth; + this.country = country; + this.profileImage = profileImage; + } + return User; +}()); +var userList = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/style.css b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/style.css new file mode 100644 index 000000000..79e3a774f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/style.css @@ -0,0 +1,42 @@ +h1, h2 { + display: grid; + justify-content: center; + text-align: center; +} + +h3 { + margin-top: 50px; +} + +#form { + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column; +} + +.wrapper { + border: 1px solid black; + height: 1000px; + width: 3500px; + display: flex; + gap: 15rem; + align-items: center; +} + +.formDiv { + border: 2px solid black; + width: 300px; + height: 550px; + margin-top: 80px; +} + +.newCard { + padding: 20px; + border-radius: 50px; + box-shadow: 2px 2px 6px red; +} +.newCard .userImg { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/view.js b/02-TypeScript/15-store/Home-puzzles/Itai-G/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/helpers.ts b/02-TypeScript/15-store/Home-puzzles/Itai-G/helpers.ts new file mode 100644 index 000000000..8d0638784 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/helpers.ts @@ -0,0 +1 @@ +const card:HTMLHeadingElement | null= document.querySelector(".card"); \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/index.html b/02-TypeScript/15-store/Home-puzzles/Itai-G/index.html new file mode 100644 index 000000000..23b50a38c --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/index.html @@ -0,0 +1,19 @@ + + + + + + + Fakebook + + + + + + + + + +

                wellcome to Fakebook

                +

                please register Here

                + diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/index.ts b/02-TypeScript/15-store/Home-puzzles/Itai-G/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/model.ts b/02-TypeScript/15-store/Home-puzzles/Itai-G/model.ts new file mode 100644 index 000000000..ece3f9c6e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/model.ts @@ -0,0 +1,14 @@ +class User { + constructor( + public gender: string, + public username: string, + public password: string, + public email: string, + public theOfBirth: string, + public country: string, + public profileImage:string + ) + {} +} + +const userList: User[] = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/setStore.html b/02-TypeScript/15-store/Home-puzzles/Itai-G/setStore.html new file mode 100644 index 000000000..e6ad4f24f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/setStore.html @@ -0,0 +1,41 @@ + + + + + + + + Store - set product + + + + + + + + + + +
                +
                +

                Type your details:

                +
                + + + + + + + + +
                +
                +
                +
                + + + diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/style.css b/02-TypeScript/15-store/Home-puzzles/Itai-G/style.css new file mode 100644 index 000000000..79e3a774f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/style.css @@ -0,0 +1,42 @@ +h1, h2 { + display: grid; + justify-content: center; + text-align: center; +} + +h3 { + margin-top: 50px; +} + +#form { + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column; +} + +.wrapper { + border: 1px solid black; + height: 1000px; + width: 3500px; + display: flex; + gap: 15rem; + align-items: center; +} + +.formDiv { + border: 2px solid black; + width: 300px; + height: 550px; + margin-top: 80px; +} + +.newCard { + padding: 20px; + border-radius: 50px; + box-shadow: 2px 2px 6px red; +} +.newCard .userImg { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/style.scss b/02-TypeScript/15-store/Home-puzzles/Itai-G/style.scss new file mode 100644 index 000000000..ce2735551 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Itai-G/style.scss @@ -0,0 +1,44 @@ +h1, h2 { + +display: grid; +justify-content: center; +text-align: center; +} +h3{ + margin-top: 50px; + +} +#form{ + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column;; +} + +.wrapper{ + border: 1px solid black; + height: 1000px; + width: 3500px; + display: flex; + gap: 15rem; + align-items: center; +} + + +.formDiv{ + border: 2px solid black; + width: 300px; + height: 550px; + margin-top: 80px; +} +.newCard{ + + padding: 20px; + border-radius: 50px; + box-shadow: 2px 2px 6px red; + .userImg{ + width: 100%; + } + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Itai-G/view.ts b/02-TypeScript/15-store/Home-puzzles/Itai-G/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/control.ts b/02-TypeScript/15-store/Home-puzzles/Karin-levi/control.ts new file mode 100644 index 000000000..a204a5a7b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Karin-levi/control.ts @@ -0,0 +1,20 @@ + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.value; + const password = ev.target.elements.password.value; + const preferdColor = ev.target.elements.preferdColor.value; + + ev.target.reset(); + console.log(name, address, email, phone, password, preferdColor) + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/control.js b/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/control.js new file mode 100644 index 000000000..9c985ebd3 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/control.js @@ -0,0 +1,17 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.value; + var password = ev.target.elements.password.value; + var preferdColor = ev.target.elements.preferdColor.value; + ev.target.reset(); + console.log(name, address, email, phone, password, preferdColor); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/index.js b/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/model.js new file mode 100644 index 000000000..eaa6cb3bd --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/model.js @@ -0,0 +1,5 @@ +var Detail = /** @class */ (function () { + function Detail() { + } + return Detail; +}()); diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/view.js b/02-TypeScript/15-store/Home-puzzles/Karin-levi/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/index.html b/02-TypeScript/15-store/Home-puzzles/Karin-levi/index.html new file mode 100644 index 000000000..2e9b5f268 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Karin-levi/index.html @@ -0,0 +1,25 @@ + + + + + + + Document + + + + + + + +
                + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/index.ts b/02-TypeScript/15-store/Home-puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/model.ts b/02-TypeScript/15-store/Home-puzzles/Karin-levi/model.ts new file mode 100644 index 000000000..cef885824 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Karin-levi/model.ts @@ -0,0 +1,12 @@ +class Detail { + + constructor( + public name: string, + public address: string, + public email: string, + public phone: number, + public password: string, + public preferdColor: string + ) +} + diff --git a/02-TypeScript/15-store/Home-puzzles/Karin-levi/view.ts b/02-TypeScript/15-store/Home-puzzles/Karin-levi/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/controls.ts b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/controls.ts new file mode 100644 index 000000000..f0fc14d5f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/controls.ts @@ -0,0 +1,80 @@ +function handleAddUserData(ev){ + try { + ev.preventDefault() + console.log(ev); + + const name = ev.target.elements.name.value + const adress = ev.target.elements.adress.value + const email = ev.target.elements.email.value + const phone = ev.target.elements.phone.value + const password = ev.target.elements.password.value + const color = ev.target.elements.color.value + const image = ev.target.elements.image?.value + + usersData.push(new UserData(name,adress,email,phone,password,color,image)); + + + ev.target.reset() + console.log(usersData); + + + } catch (error) { + console.error(error) + + } + +} +function handleAddUserDataAndImageUrl(ev){ + try { + ev.preventDefault() + console.log(ev); + + const name = ev.target.elements.name.value + const adress = ev.target.elements.adress.value + const email = ev.target.elements.email.value + const phone = ev.target.elements.phone.value + const password = ev.target.elements.password.value + const color = ev.target.elements.color.value + const image = ev.target.elements.image?.value + users.push(new UserData(name,adress,email,phone,password,color,image)); + dataOnDomUrl() + + + ev.target.reset() + console.log(users); + + + } catch (error) { + console.error(error) + + } + +} +function handleAddUserDataAndImageLocal(ev){ + try { + ev.preventDefault() + + const name = ev.target.elements.name.value + const adress = ev.target.elements.adress.value + const email = ev.target.elements.email.value + const phone = ev.target.elements.phone.value + const password = ev.target.elements.password.value + const color = ev.target.elements.color.value + const image = ev.target.elements.image.value + usersLocalImg.push(new UserData(name,adress,email,phone,password,color,image)); + dataOnDom() + + ev.target.reset() + console.log(usersLocalImg); + + + + } catch (error) { + + console.error(error) + + + } + +} + diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/controls.js b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/controls.js new file mode 100644 index 000000000..8b4a6bbdb --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/controls.js @@ -0,0 +1,60 @@ +function handleAddUserData(ev) { + var _a; + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var adress = ev.target.elements.adress.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.value; + var password = ev.target.elements.password.value; + var color = ev.target.elements.color.value; + var image = (_a = ev.target.elements.image) === null || _a === void 0 ? void 0 : _a.value; + usersData.push(new UserData(name, adress, email, phone, password, color, image)); + ev.target.reset(); + console.log(usersData); + } + catch (error) { + console.error(error); + } +} +function handleAddUserDataAndImageUrl(ev) { + var _a; + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var adress = ev.target.elements.adress.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.value; + var password = ev.target.elements.password.value; + var color = ev.target.elements.color.value; + var image = (_a = ev.target.elements.image) === null || _a === void 0 ? void 0 : _a.value; + users.push(new UserData(name, adress, email, phone, password, color, image)); + dataOnDomUrl(); + ev.target.reset(); + console.log(users); + } + catch (error) { + console.error(error); + } +} +function handleAddUserDataAndImageLocal(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var adress = ev.target.elements.adress.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.value; + var password = ev.target.elements.password.value; + var color = ev.target.elements.color.value; + var image = ev.target.elements.image.value; + usersLocalImg.push(new UserData(name, adress, email, phone, password, color, image)); + dataOnDom(); + ev.target.reset(); + console.log(usersLocalImg); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/helpres.js b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/helpres.js new file mode 100644 index 000000000..39599510b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/helpres.js @@ -0,0 +1,39 @@ +function dataOnDomUrl() { + var box1 = document.querySelector(".box1"); + var data = document.querySelector(".userDataWrapperUrl"); + var name = document.querySelector(".nameDom"); + var adress = document.querySelector(".addrDom"); + var email = document.querySelector(".emailDom"); + var phone = document.querySelector(".phoneDom"); + var password = document.querySelector(".passDom"); + var color = document.querySelector(".colorDom"); + var image = document.querySelector("#imgUrl"); + name.textContent = "Name: " + users[0].name; + adress.textContent = "Adress: " + users[0].adress; + email.textContent = "Email: " + users[0].email; + phone.textContent = "Phone: " + users[0].phone; + password.textContent = "Password: " + users[0].password; + image.src = users[0].image; + data.style.visibility = "visible"; + box1.style.backgroundColor = users[0].color; +} +function dataOnDom() { + var box2 = document.querySelector(".box2"); + var data = document.querySelector(".userDataWrapperLocal"); + var name = document.querySelector(".nameOnDom"); + var adress = document.querySelector(".adressOnDom"); + var email = document.querySelector(".emailOnDom"); + var phone = document.querySelector(".phoneOnDom"); + var password = document.querySelector(".passwordOnDom"); + var color = document.querySelector(".colorOnDom"); + var image = document.querySelector(".imageOnDom"); + var img = document.createElement("img"); + name.textContent = "Name: " + usersLocalImg[0].name; + adress.textContent = "Adress: " + usersLocalImg[0].adress; + email.textContent = "Email: " + usersLocalImg[0].email; + phone.textContent = "Phone: " + usersLocalImg[0].phone; + password.textContent = "Password: " + usersLocalImg[0].password; + img.src = usersLocalImg[0].image; + data.style.visibility = "visible"; + box2.style.backgroundColor = usersLocalImg[0].color; +} diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/index.js b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/model.js new file mode 100644 index 000000000..63a767b6b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/model.js @@ -0,0 +1,17 @@ +var UserData = /** @class */ (function () { + function UserData(name, adress, email, phone, password, color, image) { + this.name = name; + this.adress = adress; + this.email = email; + this.phone = phone; + this.password = password; + this.color = color; + this.image = image; + this.uid; + } + return UserData; +}()); +var users = []; +var usersLocalImg = []; +var usersData = []; +console.log(UserData); diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/style.css b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/style.css new file mode 100644 index 000000000..4ae661296 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/style.css @@ -0,0 +1,47 @@ +body { + background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); + background-size: cover; +} + +.userDataWrapperLocal { + visibility: hidden; + list-style-type: none; +} + +.userDataWrapperUrl { + visibility: hidden; + list-style-type: none; +} + +.userDataWrapperUrl { + list-style-type: none; +} + +.colorOnDom { + display: flex; +} + +.colorDom { + display: flex; +} + +.box2 { + width: 50px; + height: 20px; + margin: 0; +} + +.box1 { + width: 50px; + height: 20px; + margin: 0; +} + +.imageDom { + display: flex; +} + +#imgUrl { + width: 100px; + height: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/view.js b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/helpres.ts b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/helpres.ts new file mode 100644 index 000000000..ec1c9916a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/helpres.ts @@ -0,0 +1,44 @@ +function dataOnDomUrl(){ + const box1 = document.querySelector(".box1")! + const data = document.querySelector(".userDataWrapperUrl")! + const name =document.querySelector(".nameDom")! + const adress =document.querySelector(".addrDom")! + const email =document.querySelector(".emailDom")! + const phone =document.querySelector(".phoneDom")! + const password =document.querySelector(".passDom")! + const color =document.querySelector(".colorDom")! + const image =document.querySelector("#imgUrl")! + name.textContent = "Name: " + users[0].name + adress.textContent = "Adress: " + users[0].adress + email.textContent = "Email: " + users[0].email + phone.textContent = "Phone: " + users[0].phone + password.textContent = "Password: " + users[0].password + image.src = users[0].image + data.style.visibility = "visible" + box1.style.backgroundColor = users[0].color +} + + +function dataOnDom(){ + const box2 = document.querySelector(".box2")! + const data = document.querySelector(".userDataWrapperLocal")! + const name =document.querySelector(".nameOnDom")! + const adress =document.querySelector(".adressOnDom")! + const email =document.querySelector(".emailOnDom")! + const phone =document.querySelector(".phoneOnDom")! + const password =document.querySelector(".passwordOnDom")! + const color =document.querySelector(".colorOnDom")! + const image:any =document.querySelector(".imageOnDom")! + const img = document.createElement("img")as HTMLImageElement + name.textContent = "Name: " + usersLocalImg[0].name + adress.textContent = "Adress: " + usersLocalImg[0].adress + email.textContent = "Email: " + usersLocalImg[0].email + phone.textContent = "Phone: " + usersLocalImg[0].phone + password.textContent = "Password: " + usersLocalImg[0].password + img.src = usersLocalImg[0].image + data.style.visibility = "visible" + box2.style.backgroundColor = usersLocalImg[0].color + ; + + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/index.html b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/index.html new file mode 100644 index 000000000..4b41bdc68 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/index.html @@ -0,0 +1,104 @@ + + + + + + + Forms + + + + + + + + + +

                Form

                +
                + + + + + + + +
                +

                Form with image via URL

                +
                + + + + + + + + +
                +
                +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + Color: + +

                + +
                • +
              • + Image: + +
                • +
                +

                Form with image via local image

                +
                + + + + + + + + + +
                +
                +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + Color: +

                +
                • +
              • + Image: +
                • +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/index.ts b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/model.ts b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/model.ts new file mode 100644 index 000000000..5a1678b1b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/model.ts @@ -0,0 +1,19 @@ +class UserData { + public uid: string + constructor( + public name: string, + public adress: string, + public email: string, + public phone: number, + public password: string, + public color: string, + public image?:string + ){ + this.uid + } +} +const users:UserData[] = [] +const usersLocalImg:UserData[]=[] +const usersData:UserData[]=[] + +console.log(UserData); \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/style.css b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/style.css new file mode 100644 index 000000000..4ae661296 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/style.css @@ -0,0 +1,47 @@ +body { + background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); + background-size: cover; +} + +.userDataWrapperLocal { + visibility: hidden; + list-style-type: none; +} + +.userDataWrapperUrl { + visibility: hidden; + list-style-type: none; +} + +.userDataWrapperUrl { + list-style-type: none; +} + +.colorOnDom { + display: flex; +} + +.colorDom { + display: flex; +} + +.box2 { + width: 50px; + height: 20px; + margin: 0; +} + +.box1 { + width: 50px; + height: 20px; + margin: 0; +} + +.imageDom { + display: flex; +} + +#imgUrl { + width: 100px; + height: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/style.scss b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/style.scss new file mode 100644 index 000000000..d235a0593 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/style.scss @@ -0,0 +1,45 @@ +body{ + background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);; +// background-repeat: no-repeat; + background-size: cover; +} +.userDataWrapperLocal{ + visibility: hidden; + list-style-type: none; + +} +.userDataWrapperUrl{ + visibility: hidden; + list-style-type: none; + +} +.userDataWrapperUrl{ + list-style-type: none; + +} +.colorOnDom { + + display: flex; +} +.colorDom { + display: flex; +} +.box2{ + width: 50px; + height: 20px; + margin: 0; + +} +.box1{ + width: 50px; + height: 20px; + margin: 0; + +} +.imageDom{ + display: flex; +} +#imgUrl{ + width:100px; + height: 100px +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Maxim Roz/view.ts b/02-TypeScript/15-store/Home-puzzles/Maxim Roz/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/controller.js b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/controller.js new file mode 100644 index 000000000..eec970161 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/controller.js @@ -0,0 +1,40 @@ +function newRegister(e) { + try { + e.preventDefault(); + var name = e.target.elements.name.value; + var address = e.target.elements.address.value; + var email = e.target.elements.email.value; + var phone = e.target.elements.phone.value; + var password = e.target.elements.password.value; + var color = e.target.elements.color.value; + var image = e.target.elements.image.value; + var id = usersInputArray.length; + var newUserInput = new userInput(id, name, address, email, phone, password, color, image); + usersInputArray.push(newUserInput); + console.log(usersInputArray); + renderUserInputs(usersInputArray[usersInputArray.length - 1]); + } + catch (error) { + console.error(error); + } +} +function renderUserInputs(addUserInput) { + try { + if (userInputContainer) { + userInputContainer.insertAdjacentHTML('beforeend', "
                "); + var userInputIndex = document.querySelector("#userInput" + addUserInput.id); + if (userInputIndex) { + userInputIndex.insertAdjacentHTML('beforeend', "

                name: " + addUserInput.name + "

                "); + userInputIndex.insertAdjacentHTML('beforeend', "

                address: " + addUserInput.address + "

                "); + userInputIndex.insertAdjacentHTML('beforeend', "

                email: " + addUserInput.email + "

                "); + userInputIndex.insertAdjacentHTML('beforeend', "

                phone: " + addUserInput.phone + "

                "); + userInputIndex.insertAdjacentHTML('beforeend', "

                password: " + addUserInput.password + "

                "); + userInputIndex.insertAdjacentHTML('beforeend', "

                color: " + addUserInput.color + "

                "); + userInputIndex.insertAdjacentHTML('beforeend', ""); + } + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/model.js b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/model.js new file mode 100644 index 000000000..5bae56c89 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/model.js @@ -0,0 +1,14 @@ +var userInput = /** @class */ (function () { + function userInput(id, name, address, email, phone, password, color, image) { + this.id = id; + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.color = color; + this.image = image; + } + return userInput; +}()); +var usersInputArray = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/view.js b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/view.js new file mode 100644 index 000000000..aa4407772 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/scripts/view.js @@ -0,0 +1 @@ +var userInputContainer = document.querySelector('.userInputContainer'); diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/styles/style.css b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..988729e4d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,34 @@ +body { + margin: 0; + padding: 0; + min-width: 100vw; + min-height: 100vh; + display: flex; + align-items: center; + flex-direction: column; +} + +form { + margin: 20px; +} + +.userInputContainer { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + gap: 10px; + width: 930px; + height: 100%; +} +.userInputContainer .usersInputCard { + width: 300px; + height: 500px; + border-radius: 50px; + box-shadow: 5px 8px 35px 0px rgba(0, 0, 0, 0.75); +} +.userInputContainer .usersInputCard img { + width: 100%; +} +.userInputContainer .usersInputCard p { + margin-left: 20px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/controller.ts b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/controller.ts new file mode 100644 index 000000000..66dea688a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/controller.ts @@ -0,0 +1,41 @@ +function newRegister(e) { + try { + e.preventDefault(); + const name = e.target.elements.name.value; + const address = e.target.elements.address.value; + const email = e.target.elements.email.value; + const phone = e.target.elements.phone.value; + const password = e.target.elements.password.value; + const color = e.target.elements.color.value; + const image = e.target.elements.image.value; + const id = usersInputArray.length; + + const newUserInput = new userInput(id, name, address, email, phone, password, color, image); + + usersInputArray.push(newUserInput); + console.log(usersInputArray); + renderUserInputs(usersInputArray[usersInputArray.length-1]); + } catch (error) { + console.error(error); + } +} + +function renderUserInputs(addUserInput) { + try { + if (userInputContainer){ + userInputContainer.insertAdjacentHTML('beforeend',`
                `); + const userInputIndex = document.querySelector(`#userInput${addUserInput.id}`); + if (userInputIndex){ + userInputIndex.insertAdjacentHTML('beforeend',`

                name: ${addUserInput.name}

                `) + userInputIndex.insertAdjacentHTML('beforeend',`

                address: ${addUserInput.address}

                `) + userInputIndex.insertAdjacentHTML('beforeend',`

                email: ${addUserInput.email}

                `) + userInputIndex.insertAdjacentHTML('beforeend',`

                phone: ${addUserInput.phone}

                `) + userInputIndex.insertAdjacentHTML('beforeend',`

                password: ${addUserInput.password}

                `) + userInputIndex.insertAdjacentHTML('beforeend',`

                color: ${addUserInput.color}

                `) + userInputIndex.insertAdjacentHTML('beforeend',``) + } + } + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..2ce48dab1 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + Document + + +
                + + + + + + + + +
                + +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/model.ts b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/model.ts new file mode 100644 index 000000000..a2d06c1b9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/model.ts @@ -0,0 +1,15 @@ +class userInput { + constructor( + public id: number, + public name: string, + public address: string, + public email: string, + public phone: number, + public password: string, + public color: string, + public image: string + ) {} +} + + +const usersInputArray:Array = [] \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/style.scss b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..8e8c45514 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/style.scss @@ -0,0 +1,38 @@ +body { + margin: 0; + padding: 0; + min-width: 100vw; + min-height: 100vh; + display: flex; + align-items: center; + flex-direction: column; +} + +form { + margin: 20px; +} + +.userInputContainer{ + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: center; + gap: 10px; + width: 930px; + height: 100%; + + .usersInputCard { + width: 300px; + height: 500px; + // border: 1px solid black; + border-radius: 50px; + box-shadow: 5px 8px 35px 0px rgba(0,0,0,0.75); + + img { + width: 100%; + } + p { + margin-left: 20px; + } + + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/view.ts b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/view.ts new file mode 100644 index 000000000..074ccf349 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Nikita Rossenko/src/view.ts @@ -0,0 +1 @@ +const userInputContainer = document.querySelector('.userInputContainer'); \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/control.ts b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/control.ts new file mode 100644 index 000000000..30c6fe7fa --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/control.ts @@ -0,0 +1,55 @@ +form1.addEventListener('submit', (ev:any)=> { + ev.preventDefault(); + console.log(ev); + try { + + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const phone = ev.target.elements.phone.value; + const email = ev.target.elements.email.value; + const color = ev.target.elements.color.value; + const password = ev.target.elements.password.value; + + users.push(new User(name, address, email, phone, color, password)); + ev.target.reset() + console.log(users); + + const div = document.createElement("div"); + div.className = "allUsers__user"; + const h2 = document.createElement("h2"); + h2.innerText = `Name: ${name}`; + const addressP = document.createElement("p"); + addressP.innerText = `Address: ${address}`; + const emailP = document.createElement("p"); + emailP.innerText = `Email: ${email}`; + const phoneP = document.createElement("p"); + phoneP.innerText = `Phone: ${phone}`; + const colorP = document.createElement("p"); + colorP.innerText = `Color: ${color}`; + div.appendChild(h2); + div.appendChild(addressP); + div.appendChild(emailP); + div.appendChild(phoneP); + div.appendChild(colorP); + allUsers.appendChild(div); + + } catch (error) { + console.error(Error); + } + + +}) + +let check = true; + +show.addEventListener('click', ()=> { + if(check) { + allUsers.classList.remove("hide"); + show.innerText = "Hide Profiles"; + check = false; + } else { + allUsers.classList.add("hide") + show.innerText = "Show Profiles"; + check = true; + } +}) \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/control.js b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/control.js new file mode 100644 index 000000000..7adaa73e7 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/control.js @@ -0,0 +1,49 @@ +form1.addEventListener('submit', function (ev) { + ev.preventDefault(); + console.log(ev); + try { + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var phone = ev.target.elements.phone.value; + var email = ev.target.elements.email.value; + var color = ev.target.elements.color.value; + var password = ev.target.elements.password.value; + users.push(new User(name, address, email, phone, color, password)); + ev.target.reset(); + console.log(users); + var div = document.createElement("div"); + div.className = "allUsers__user"; + var h2 = document.createElement("h2"); + h2.innerText = "Name: " + name; + var addressP = document.createElement("p"); + addressP.innerText = "Address: " + address; + var emailP = document.createElement("p"); + emailP.innerText = "Email: " + email; + var phoneP = document.createElement("p"); + phoneP.innerText = "Phone: " + phone; + var colorP = document.createElement("p"); + colorP.innerText = "Color: " + color; + div.appendChild(h2); + div.appendChild(addressP); + div.appendChild(emailP); + div.appendChild(phoneP); + div.appendChild(colorP); + allUsers.appendChild(div); + } + catch (error) { + console.error(Error); + } +}); +var check = true; +show.addEventListener('click', function () { + if (check) { + allUsers.classList.remove("hide"); + show.innerText = "Hide Profiles"; + check = false; + } + else { + allUsers.classList.add("hide"); + show.innerText = "Show Profiles"; + check = true; + } +}); diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/model.js new file mode 100644 index 000000000..e463f1c4e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/model.js @@ -0,0 +1,30 @@ +var User = /** @class */ (function () { + function User(name, address, email, phone, color, password) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.color = color; + this.password = password; + } + User.prototype.getName = function () { + return this.name; + }; + User.prototype.getAddress = function () { + return this.address; + }; + User.prototype.getEmail = function () { + return this.email; + }; + User.prototype.getPhone = function () { + return this.phone; + }; + User.prototype.getColor = function () { + return this.color; + }; + User.prototype.getPassword = function () { + return this.password; + }; + return User; +}()); +var users = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/style.css b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/style.css new file mode 100644 index 000000000..88a16b65a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/style.css @@ -0,0 +1,33 @@ +.allUsers { + display: block; + width: 100%; + height: 200px; +} +#form { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + position: relative; + margin-bottom: 50px; +} +#form .submit { + position: absolute; + bottom: -40px; + left: 50%; + transform: translate(-50%); + max-width: 50px; +} + +#form > input { + width: 30%; + margin-bottom: 10px; +} + +.hide { + display: none; +} + +.show { + margin: 0 auto; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/view.js b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/view.js new file mode 100644 index 000000000..fb0d0dec8 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/dist/view.js @@ -0,0 +1,3 @@ +var form1 = document.getElementById("form"); +var allUsers = document.querySelector(".allUsers"); +var show = document.querySelector(".show"); diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/index.html b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/index.html new file mode 100644 index 000000000..e74cee8ba --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + + + + +
                + + + + + + + +
                + +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/model.ts b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/model.ts new file mode 100644 index 000000000..a3973535e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/model.ts @@ -0,0 +1,29 @@ +class User { + constructor(private name:string, private address:string, private email:string, private phone:number, private color:string, private password:string) { + + + } + + + + getName() { + return this.name; + } + getAddress() { + return this.address; + } + getEmail() { + return this.email; + } + getPhone() { + return this.phone; + } + getColor() { + return this.color; + } + getPassword() { + return this.password; + } +} + +let users:User[] = []; \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img1.jpg b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img1.jpg new file mode 100644 index 000000000..c420e8ccd Binary files /dev/null and b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img1.jpg differ diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img2.jpg b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img2.jpg new file mode 100644 index 000000000..0604c485f Binary files /dev/null and b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img2.jpg differ diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img3.jpg b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img3.jpg new file mode 100644 index 000000000..1092ed9c6 Binary files /dev/null and b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/photos/img3.jpg differ diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/style.scss b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/style.scss new file mode 100644 index 000000000..493bbe4f5 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/style.scss @@ -0,0 +1,37 @@ +.allUsers { + display: block; + width: 100%; + height: 200px; + &__user { + + } +} + +#form { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + position: relative; + margin-bottom: 50px; + .submit { + position: absolute; + bottom: -40px; + left: 50%; + transform: translate(-50%); + max-width: 50px; + } +} + +#form > input { + width: 30%; + margin-bottom: 10px; +} + +.hide { + display: none; +} + +.show { + margin: 0 auto; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/view.ts b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/view.ts new file mode 100644 index 000000000..d313a65c6 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Omer.Virshuvski/view.ts @@ -0,0 +1,3 @@ +const form1 = document.getElementById("form"); +const allUsers = document.querySelector(".allUsers"); +const show = document.querySelector(".show"); \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/control.ts b/02-TypeScript/15-store/Home-puzzles/Orel/control.ts new file mode 100644 index 000000000..4b880208c --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/control.ts @@ -0,0 +1,27 @@ + +function handlerAddUser(ev: any) { + try { + ev.preventDefault() + const { fullName, address, email, phone, password } = ev.target.elements + users.push(new User(fullName.value, address.value, email.value, phone.value, password.value)) + ev.target.reset() + renderUsers() + } catch (error) { + console.log(error); + } +} + +function handleRemoveItem(uid:string){ + try { + console.log(uid); + } catch (error) { + console.log(error); + } +} + +const inputElement = document.getElementById("file"); +inputElement!.addEventListener("change", handleFiles, false); +function handleFiles() { + const fileList = this.files as string; + console.log(fileList); +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/dist/control.js b/02-TypeScript/15-store/Home-puzzles/Orel/dist/control.js new file mode 100644 index 000000000..efa0cbfa6 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/dist/control.js @@ -0,0 +1,26 @@ +function handlerAddUser(ev) { + try { + ev.preventDefault(); + var _a = ev.target.elements, fullName = _a.fullName, address = _a.address, email = _a.email, phone = _a.phone, password = _a.password; + users.push(new User(fullName.value, address.value, email.value, phone.value, password.value)); + ev.target.reset(); + renderUsers(); + } + catch (error) { + console.log(error); + } +} +function handleRemoveItem(uid) { + try { + console.log(uid); + } + catch (error) { + console.log(error); + } +} +var inputElement = document.getElementById("file"); +inputElement.addEventListener("change", handleFiles, false); +function handleFiles() { + var fileList = this.files; + console.log(fileList); +} diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/dist/helper.js b/02-TypeScript/15-store/Home-puzzles/Orel/dist/helper.js new file mode 100644 index 000000000..58d0e49f9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/dist/helper.js @@ -0,0 +1,4 @@ +// Create Uniq ID +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/dist/index.css b/02-TypeScript/15-store/Home-puzzles/Orel/dist/index.css new file mode 100644 index 000000000..092a64597 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/dist/index.css @@ -0,0 +1,79 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, +html { + background-color: darkgray; + width: 100vw; + height: 100vh; + overflow-x: hidden; +} + +section { + padding: 20px 0; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + width: 100vw; +} +section h1.main-title { + font-size: 1.5rem; +} +section form.container { + margin-top: 15px; + padding: 10px 20px; + display: flex; + justify-content: start; + align-items: center; + flex-direction: column; + gap: 2px; +} +section form.container select { + width: 100%; +} +section form.container select, +section form.container input, +section form.container button { + background-color: rgba(255, 255, 255, 0.658); + padding: 10px 15px; + border: 1px solid black; + outline: none; +} +section form.container button { + margin-top: 10px; +} +section .users-container { + min-width: 90vw; + overflow-y: scroll; + height: 300px; +} +section .users-container::-webkit-scrollbar { + display: none; +} +section .users-container table, +section .users-container td, +section .users-container th { + border: 1px solid; + padding: 10px; +} +section .users-container table { + overflow-x: scroll; + min-width: inherit; + padding: 10px; + border-collapse: collapse; +} +section .users-container table thead { + position: sticky; + top: 0; + left: 0; + background-color: #5d8f9e; + height: 30px; +} +section .users-container table td { + background-color: rgba(0, 0, 139, 0.171); +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/dist/index.js b/02-TypeScript/15-store/Home-puzzles/Orel/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/dist/model.js b/02-TypeScript/15-store/Home-puzzles/Orel/dist/model.js new file mode 100644 index 000000000..ee1061f76 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/dist/model.js @@ -0,0 +1,12 @@ +var User = /** @class */ (function () { + function User(fullName, address, email, phone, password) { + this.fullName = fullName; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.uID = uid(); + } + return User; +}()); +var users = []; diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/helper.ts b/02-TypeScript/15-store/Home-puzzles/Orel/helper.ts new file mode 100644 index 000000000..eb2c8e743 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/helper.ts @@ -0,0 +1,5 @@ + +// Create Uniq ID +function uid(){ + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/index.css b/02-TypeScript/15-store/Home-puzzles/Orel/index.css new file mode 100644 index 000000000..54351c48b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/index.css @@ -0,0 +1,80 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, +html { + background-color: darkgray; + width: 100vw; + height: 100vh; + overflow-x: hidden; +} + +section { + padding: 20px 0; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + width: 100vw; +} +section h1.main-title { + font-size: 1.5rem; +} +section form.container { + margin-top: 15px; + padding: 10px 20px; + display: flex; + justify-content: start; + align-items: center; + flex-direction: column; + gap: 2px; +} +section form.container select { + width: 100%; +} +section form.container select, +section form.container input, +section form.container button { + background-color: rgba(255, 255, 255, 0.658); + padding: 10px 15px; + border: 1px solid black; + outline: none; +} +section form.container button { + margin-top: 10px; +} +section .users-container { + min-width: 90vw; + overflow-y: scroll; + height: 300px; +} +section .users-container::-webkit-scrollbar { + display: none; +} +section .users-container table, +section .users-container td, +section .users-container th { + border: 1px solid; + padding: 10px; +} +section .users-container table { + overflow-x: scroll; + min-width: inherit; + padding: 10px; + border-collapse: collapse; +} +section .users-container table thead { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + background-color: rgb(93, 143, 158); + height: 30px; +} +section .users-container table td { + background-color: rgba(0, 0, 139, 0.171); +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/index.html b/02-TypeScript/15-store/Home-puzzles/Orel/index.html new file mode 100644 index 000000000..3a99f313d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + main-Shop + + + + +
                +

                Register

                +
                + + + + + + + +
                + +
                + +
                + +
                + + + + + +
                + + + + + + + + diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/index.scss b/02-TypeScript/15-store/Home-puzzles/Orel/index.scss new file mode 100644 index 000000000..7e27449c9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/index.scss @@ -0,0 +1,98 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, +html { + background-color: darkgray; + width: 100vw; + height: 100vh; + overflow-x: hidden; +} + +section { + padding: 20px 0; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + width: 100vw; + + + h1.main-title { + font-size: 1.5rem; + } + + form.container { + margin-top: 15px; + padding: 10px 20px; + display: flex; + justify-content: start; + align-items: center; + flex-direction: column; + gap: 2px; + + select { + width: 100%; + } + + select, + input, + button { + background-color: rgba(255, 255, 255, 0.658); + padding: 10px 15px; + border: 1px solid black; + outline: none; + } + + button { + margin-top: 10px; + } + + } + + .users-container { + min-width: 90vw; + overflow-y: scroll; + height: 300px; + + &::-webkit-scrollbar { + display: none; + } + + table, + td, + th { + border: 1px solid; + padding: 10px; + } + + table { + overflow-x: scroll; + min-width: inherit; + padding: 10px; + border-collapse: collapse; + + thead { + position: sticky; + top: 0; + + left: 0; + background-color: rgb(93, 143, 158); + height: 30px; + } + + td { + background-color: rgba(0, 0, 139, 0.171); + + button{ + + } + } + } + } + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/index.ts b/02-TypeScript/15-store/Home-puzzles/Orel/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/model.ts b/02-TypeScript/15-store/Home-puzzles/Orel/model.ts new file mode 100644 index 000000000..52d01966a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/model.ts @@ -0,0 +1,15 @@ +class User { + uID: string + constructor( + public fullName:string , + public address:string , + public email: string, + public phone : string , + public password :string + ){ + this.uID = uid(); + } +} + +let users:User[] = []; + diff --git a/02-TypeScript/15-store/Home-puzzles/Orel/view.ts b/02-TypeScript/15-store/Home-puzzles/Orel/view.ts new file mode 100644 index 000000000..2c0943d69 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/Orel/view.ts @@ -0,0 +1,39 @@ + let UsersListNumber = 1; +function renderUsers(){ + const table = document.querySelector('table'); + table!.innerHTML = + ` + + N + Full-Name + Address + Email + Phone + Password + ID + Remove + + ` +users.forEach(users => { + table!.innerHTML += ` + + ${UsersListNumber} + ${users.fullName} + ${users.address} + ${users.email} + ${users.phone} + ${users.password} + ${users.uID} + + + ` + + console.log("render"); + UsersListNumber++ +}); + +} + + + + diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/control.ts b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/control.ts new file mode 100644 index 000000000..3bc951f65 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/control.ts @@ -0,0 +1,55 @@ +function renderUsers(arr: User[]) { + wrapper.replaceChildren(); + arr.forEach((user) => { + const userCard = document.createElement("div") as HTMLDivElement; + userCard.classList.add("cardsWrapper__userCard"); + userCard.innerHTML = ` +
                  +
                • Gender: ${user.getGender()}
                  • +
                • First Name: ${user.getFirstName()}
                  • +
                • Last Name: ${user.getLastName()}
                  • +
                • Password: ${user.getPassword()}
                  • +
                • UserName: ${user.getUserName()}
                  • +
                • Date Of Birth: ${user.getDOB()}
                  • +
                • Phone Number: ${user.getPhoneNum()}
                  • +
                • Location: ${user.getLocation()}
                  • +
                `; + wrapper.appendChild(userCard); + }); +} + +function handleSubmit(e) { + e.preventDefault(); + e.stopPropagation(); + const gender = e.target.elements.gender.value; + const firstName = e.target.elements.firstName.value; + const lastName = e.target.elements.lastName.value; + const password = e.target.elements.password.value; + const userName = e.target.elements.userName.value; + const dob = e.target.elements.dob.value; + const phone = e.target.elements.phone.value; + const location = e.target.elements.location.value; + const image = imgSrc; + const arr = [gender, firstName, lastName, password, userName, dob, phone, location, image]; + if(arr.some(ele => ele == '' )) return errMsg.style.display = 'flex' + const newUser = new User( + gender, + firstName, + lastName, + password, + userName, + dob, + phone, + location, + image + ); + userList.unshift(newUser); + + // adding new user to the screen + renderUsers(userList); + // reinitializing img click + setImgClick(); + //clearing form + preview.src = ""; + e.target.reset(); +} diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/control.js b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/control.js new file mode 100644 index 000000000..4afea78c4 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/control.js @@ -0,0 +1,34 @@ +function renderUsers(arr) { + wrapper.replaceChildren(); + arr.forEach(function (user) { + var userCard = document.createElement("div"); + userCard.classList.add("cardsWrapper__userCard"); + userCard.innerHTML = "\n
                  \n
                • Gender: " + user.getGender() + "
                  • \n
                • First Name: " + user.getFirstName() + "
                  • \n
                • Last Name: " + user.getLastName() + "
                  • \n
                • Password: " + user.getPassword() + "
                  • \n
                • UserName: " + user.getUserName() + "
                  • \n
                • Date Of Birth: " + user.getDOB() + "
                  • \n
                • Phone Number: " + user.getPhoneNum() + "
                  • \n
                • Location: " + user.getLocation() + "
                  • \n
                "; + wrapper.appendChild(userCard); + }); +} +function handleSubmit(e) { + e.preventDefault(); + e.stopPropagation(); + var gender = e.target.elements.gender.value; + var firstName = e.target.elements.firstName.value; + var lastName = e.target.elements.lastName.value; + var password = e.target.elements.password.value; + var userName = e.target.elements.userName.value; + var dob = e.target.elements.dob.value; + var phone = e.target.elements.phone.value; + var location = e.target.elements.location.value; + var image = imgSrc; + var arr = [gender, firstName, lastName, password, userName, dob, phone, location, image]; + if (arr.some(function (ele) { return ele == ''; })) + return errMsg.style.display = 'flex'; + var newUser = new User(gender, firstName, lastName, password, userName, dob, phone, location, image); + userList.unshift(newUser); + // adding new user to the screen + renderUsers(userList); + // reinitializing img click + setImgClick(); + //clearing form + preview.src = ""; + e.target.reset(); +} diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/helpers.js b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/helpers.js new file mode 100644 index 000000000..ba183431e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/helpers.js @@ -0,0 +1,50 @@ +function saveSrc() { + var reader = new FileReader(); + reader.addEventListener("load", function () { + // convert image file to base64 string + preview.src = reader.result; + imgSrc = reader.result; + }, false); + if (file.files) { + reader.readAsDataURL(file.files[0]); + } +} +function fetchRadomUser() { + fetch("https://randomuser.me/api/?results=8").then(function (data) { + data.json().then(function (randomUser) { + randomUser.results.forEach(function (user) { + var randomUser = new User(user.gender, user.name.first, user.name.last, user.login.password, user.login.username, user.dob.date.slice(0, 10), user.cell, user.location.country, user.picture.large); + userList.push(randomUser); + }); + }); + }); +} +function toggleDisplay(listElement, imgElement) { + if (listElement.style.display == "flex") { + listElement.style.display = "none"; + imgElement.style.height = '20vw'; + } + else { + listElement.style.display = "flex"; + imgElement.style.height = '10vw'; + imgElement.style.transform = 'scale(1)'; + } +} +function setImgClick() { + try { + setTimeout(function () { + var imgElements = wrapper.querySelectorAll("img"); + imgElements.forEach(function (ele) { + return ele.addEventListener("click", function () { + var target = ele.parentElement; + var ulEl = target === null || target === void 0 ? void 0 : target.querySelector("ul"); + var img = target === null || target === void 0 ? void 0 : target.querySelector("img"); + toggleDisplay(ulEl, img); + }); + }); + }, 400); + } + catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/main.js b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/main.js new file mode 100644 index 000000000..be41677cd --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/main.js @@ -0,0 +1,9 @@ +fetchRadomUser(); +setTimeout(function () { + renderUsers(userList); +}, 300); +setImgClick(); +form.addEventListener("submit", handleSubmit); +inputs.forEach(function (input) { + return input.addEventListener("keydown", function () { return (errMsg.style.display = "none"); }); +}); diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/model.js b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/model.js new file mode 100644 index 000000000..90dda895a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/model.js @@ -0,0 +1,42 @@ +var User = /** @class */ (function () { + function User(gender, firstName, lastName, password, userName, dateOfBirth, phoneNumber, location, profileImage) { + this.gender = gender; + this.firstName = firstName; + this.lastName = lastName; + this.password = password; + this.userName = userName; + this.dateOfBirth = dateOfBirth; + this.phoneNumber = phoneNumber; + this.location = location; + this.profileImage = profileImage; + } + User.prototype.getGender = function () { + return this.gender; + }; + User.prototype.getFirstName = function () { + return this.firstName; + }; + User.prototype.getLastName = function () { + return this.lastName; + }; + User.prototype.getPassword = function () { + return this.password; + }; + User.prototype.getUserName = function () { + return this.userName; + }; + User.prototype.getDOB = function () { + return this.dateOfBirth; + }; + User.prototype.getPhoneNum = function () { + return this.phoneNumber; + }; + User.prototype.getLocation = function () { + return this.location; + }; + User.prototype.getProfileImg = function () { + return this.profileImage; + }; + return User; +}()); +var userList = []; diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/style.css b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/style.css new file mode 100644 index 000000000..93bbff28f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/style.css @@ -0,0 +1,140 @@ +* { + margin: 0; + padding: 0; +} + +:root { + --main: #021a1f; + --secondary: #153238; + --third: #28606b; + --border: #075a6b; + --text: #0d9bb8; +} + +body { + max-width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 1fr 3fr; + overflow-y: hidden; + background-color: var(--main); + color: var(--text); +} + +.addUserForm { + display: flex; + flex-direction: column; + padding: 0.5em; + overflow-y: auto; +} +.addUserForm h3 { + font-size: 1.4rem; + margin: 1em auto; +} +.addUserForm__inputDescription { + font-size: 1.3rem; + margin-bottom: 1rem; + font-weight: bold; +} +.addUserForm__inputDescription input { + width: 90%; + font-size: 1.3rem; + margin-top: 0.5em; +} +.addUserForm #chooseFile { + font-size: 1rem; +} +.addUserForm #submitBtn { + margin: 1em auto 2rem auto; + padding: 0.5em 2em; + font-size: 1.2rem; + transform: scale(1); + transition: transform 0.2s linear; +} +.addUserForm #submitBtn:hover { + transition: transform 0.2s linear; + transform: scale(0.8); + cursor: pointer; +} +.addUserForm__errorMessage { + display: none; + margin: 0.5em auto; + font-size: 2rem; + color: red; +} + +main { + padding: 0 2em; + overflow-y: auto; + text-align: center; +} +main header { + margin: 2em 0; +} +main .cardsWrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + width: 90%; + margin: 0 auto; +} +main .cardsWrapper__userCard { + border: 1px solid var(--border); + border-radius: 10px; + box-shadow: 0 0 20px var(--third); + aspect-ratio: 1/1; + padding: 1em; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +main .cardsWrapper__userCard .userImg { + border-radius: 20px; + box-shadow: 0 0 10px black; + height: 20vw; + transition: all 0.4s linear; +} +main .cardsWrapper__userCard .userImg:hover { + cursor: pointer; +} +main .cardsWrapper__userCard ul { + display: none; + height: 60%; + width: 100%; + flex-direction: column; + justify-content: space-around; +} +main .cardsWrapper__userCard ul li { + width: 100%; + display: flex; + justify-content: center; + font-size: 1.3rem; +} +main .cardsWrapper__userCard ul li button { + padding: 0.2em; +} + +input, +select { + background-color: var(--third); + border-style: none; + color: whitesmoke; + padding: 0.3em; + border-radius: 5px; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: gainsboro; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: black; + border-radius: 5px; + width: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/view.js b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/view.js new file mode 100644 index 000000000..56b44fca8 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/dist/view.js @@ -0,0 +1,7 @@ +var wrapper = document.querySelector(".cardsWrapper"); +var form = document.querySelector(".addUserForm"); +var file = document.querySelector("input[type=file]"); +var imgSrc = ""; +var preview = document.querySelector(".preview"); +var errMsg = document.querySelector(".addUserForm__errorMessage"); +var inputs = document.querySelectorAll("input"); diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/helpers.ts b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/helpers.ts new file mode 100644 index 000000000..57268cb8f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/helpers.ts @@ -0,0 +1,69 @@ +function saveSrc() { + const reader = new FileReader(); + + reader.addEventListener( + "load", + () => { + // convert image file to base64 string + preview.src = reader.result as string; + imgSrc = reader.result as string; + }, + false + ); + + if (file.files) { + reader.readAsDataURL(file.files[0]); + } +} + +function fetchRadomUser() { + fetch("https://randomuser.me/api/?results=8").then((data) => { + data.json().then((randomUser) => { + randomUser.results.forEach((user) => { + const randomUser = new User( + user.gender, + user.name.first, + user.name.last, + user.login.password, + user.login.username, + user.dob.date.slice(0, 10), + user.cell, + user.location.country, + user.picture.large + ); + userList.push(randomUser); + }); + }); + }); +} + +function toggleDisplay(listElement: HTMLElement, imgElement: HTMLElement) { + if (listElement.style.display == "flex") { + listElement.style.display = "none"; + imgElement.style.height = '20vw'; + } else { + listElement.style.display = "flex"; + imgElement.style.height = '10vw'; + imgElement.style.transform = 'scale(1)'; + } +} + +function setImgClick() { + try { + setTimeout(() => { + const imgElements = wrapper.querySelectorAll( + "img" + ) as NodeListOf; + imgElements.forEach((ele) => + ele.addEventListener("click", () => { + const target = ele.parentElement; + const ulEl = target?.querySelector("ul") as HTMLUListElement; + const img = target?.querySelector("img") as HTMLImageElement; + toggleDisplay(ulEl, img); + }) + ); + }, 400); + } catch (error) { + console.log(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/index.html b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/index.html new file mode 100644 index 000000000..14058cbb0 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/index.html @@ -0,0 +1,71 @@ + + + + + + + Registration Form + + + + + + + + +
                +

                Add new user

                + + + + + + + + + + Missing Details + +
                + +
                +
                +

                Users Registered In System

                + (press image to expand) +
                +
                +
                + + diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/main.ts b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/main.ts new file mode 100644 index 000000000..c936429ba --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/main.ts @@ -0,0 +1,16 @@ +fetchRadomUser(); + +setTimeout(() => { + renderUsers(userList); +}, 300); + +setImgClick(); + +form.addEventListener("submit", handleSubmit); + +inputs.forEach((input) => + input.addEventListener("keydown", () => (errMsg.style.display = "none")) +); + + + diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/model.ts b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/model.ts new file mode 100644 index 000000000..368514d4c --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/model.ts @@ -0,0 +1,43 @@ +class User { + constructor( + private gender: string, + private firstName: string, + private lastName: string, + private password: string, + private userName: string, + private dateOfBirth: string, + private phoneNumber: string, + private location: string, + private profileImage: string + ) {} + getGender() { + return this.gender; + } + getFirstName() { + return this.firstName; + } + getLastName() { + return this.lastName; + } + getPassword() { + return this.password; + } + getUserName() { + return this.userName; + } + getDOB() { + return this.dateOfBirth; + } + getPhoneNum() { + return this.phoneNumber; + } + getLocation() { + return this.location; + } + getProfileImg() { + return this.profileImage; + } +} + + +const userList: User[] = []; \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/style.css b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/style.css new file mode 100644 index 000000000..93bbff28f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/style.css @@ -0,0 +1,140 @@ +* { + margin: 0; + padding: 0; +} + +:root { + --main: #021a1f; + --secondary: #153238; + --third: #28606b; + --border: #075a6b; + --text: #0d9bb8; +} + +body { + max-width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 1fr 3fr; + overflow-y: hidden; + background-color: var(--main); + color: var(--text); +} + +.addUserForm { + display: flex; + flex-direction: column; + padding: 0.5em; + overflow-y: auto; +} +.addUserForm h3 { + font-size: 1.4rem; + margin: 1em auto; +} +.addUserForm__inputDescription { + font-size: 1.3rem; + margin-bottom: 1rem; + font-weight: bold; +} +.addUserForm__inputDescription input { + width: 90%; + font-size: 1.3rem; + margin-top: 0.5em; +} +.addUserForm #chooseFile { + font-size: 1rem; +} +.addUserForm #submitBtn { + margin: 1em auto 2rem auto; + padding: 0.5em 2em; + font-size: 1.2rem; + transform: scale(1); + transition: transform 0.2s linear; +} +.addUserForm #submitBtn:hover { + transition: transform 0.2s linear; + transform: scale(0.8); + cursor: pointer; +} +.addUserForm__errorMessage { + display: none; + margin: 0.5em auto; + font-size: 2rem; + color: red; +} + +main { + padding: 0 2em; + overflow-y: auto; + text-align: center; +} +main header { + margin: 2em 0; +} +main .cardsWrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + width: 90%; + margin: 0 auto; +} +main .cardsWrapper__userCard { + border: 1px solid var(--border); + border-radius: 10px; + box-shadow: 0 0 20px var(--third); + aspect-ratio: 1/1; + padding: 1em; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +main .cardsWrapper__userCard .userImg { + border-radius: 20px; + box-shadow: 0 0 10px black; + height: 20vw; + transition: all 0.4s linear; +} +main .cardsWrapper__userCard .userImg:hover { + cursor: pointer; +} +main .cardsWrapper__userCard ul { + display: none; + height: 60%; + width: 100%; + flex-direction: column; + justify-content: space-around; +} +main .cardsWrapper__userCard ul li { + width: 100%; + display: flex; + justify-content: center; + font-size: 1.3rem; +} +main .cardsWrapper__userCard ul li button { + padding: 0.2em; +} + +input, +select { + background-color: var(--third); + border-style: none; + color: whitesmoke; + padding: 0.3em; + border-radius: 5px; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: gainsboro; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: black; + border-radius: 5px; + width: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/style.scss b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/style.scss new file mode 100644 index 000000000..d14bed753 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/style.scss @@ -0,0 +1,140 @@ +* { + margin: 0; + padding: 0; +} + +:root { + --main: #021a1f; + --secondary: #153238; + --third: #28606b; + --border: #075a6b; + --text: #0d9bb8; +} + +body { + max-width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 1fr 3fr; + overflow-y: hidden; + background-color: var(--main); + color: var(--text); +} + +.addUserForm { + display: flex; + flex-direction: column; + padding: 0.5em; + overflow-y: auto; + h3 { + font-size: 1.4rem; + margin: 1em auto; + } + &__inputDescription { + font-size: 1.3rem; + margin-bottom: 1rem; + font-weight: bold; + input { + width: 90%; + font-size: 1.3rem; + margin-top: 0.5em; + } + } + #chooseFile { + font-size: 1rem; + } + #submitBtn { + margin: 1em auto 2rem auto; + padding: .5em 2em; + font-size: 1.2rem; + transform: scale(1); + transition: transform .2s linear; + } + #submitBtn:hover { + transition: transform .2s linear; + transform: scale(0.8); + cursor: pointer; + } + &__errorMessage { + display: none; + margin: 0.5em auto; + font-size: 2rem; + color: red; + } +} + +main { + padding: 0 2em; + overflow-y: auto; + text-align: center; + header { + margin: 2em 0; + } + .cardsWrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + width: 90%; + margin: 0 auto; + &__userCard { + border: 1px solid var(--border); + border-radius: 10px; + box-shadow: 0 0 20px var(--third); + aspect-ratio: 1/1; + padding: 1em; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + .userImg { + border-radius: 20px; + box-shadow: 0 0 10px black; + height: 20vw; + transition: all .4s linear; + } + .userImg:hover { + cursor: pointer; + } + ul { + display: none; + height: 60%; + width: 100%; + flex-direction: column; + justify-content: space-around; + li { + width: 100%; + display: flex; + justify-content: center; + font-size: 1.3rem; + button { + padding: 0.2em; + } + } + } + } + } +} + +input, +select { + background-color: var(--third); + border-style: none; + color: whitesmoke; + padding: 0.3em; + border-radius: 5px; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: gainsboro; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: black; + border-radius: 5px; + width: 5px; +} diff --git a/02-TypeScript/15-store/Home-puzzles/VladiBykanov/view.ts b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/view.ts new file mode 100644 index 000000000..a9ec41d0d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/VladiBykanov/view.ts @@ -0,0 +1,11 @@ +const wrapper = document.querySelector(".cardsWrapper") as HTMLDivElement; +const form = document.querySelector(".addUserForm") as HTMLFormElement; +const file = document.querySelector("input[type=file]") as HTMLInputElement; +let imgSrc = ""; +const preview = document.querySelector(".preview") as HTMLImageElement; +const errMsg = document.querySelector( + ".addUserForm__errorMessage" +) as HTMLElement; +const inputs = document.querySelectorAll("input") as NodeListOf; + + diff --git a/02-TypeScript/15-store/Home-puzzles/idan/control.ts b/02-TypeScript/15-store/Home-puzzles/idan/control.ts new file mode 100644 index 000000000..20f564574 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/control.ts @@ -0,0 +1,39 @@ +const form = document.querySelector("#theForm"); + +function handleAddUser(ev:any) { + try { + ev.preventDefault(); + + console.log(ev); + const name = ev.target.elements.name.value; + const adress = ev.target.elements.adress.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.password.value; + const preColor = ev.target.elements.preColor.value; + const image = ev.target.elements.image.files; + const confirmPassword = ev.target.elements.confirmPassword.value; + + + if(confirmPassword == password){ + users.push(new user(name, adress, email, phone, password, preColor, image)); + console.log(users); + console.log(name); + if(userViewer){ + userViewer.innerHTML += `
                + +
                +

                ${name}

                +

                home adress:${adress} email adress:${email}

                +

                favorite color hex: ${preColor}

                +
                +
                ` + } + ev.target.reset(); + }else{ + alert(`passwords do not match`) + } + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/idan/dist/control.js b/02-TypeScript/15-store/Home-puzzles/idan/dist/control.js new file mode 100644 index 000000000..46864bbe5 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/dist/control.js @@ -0,0 +1,30 @@ +var form = document.querySelector("#theForm"); +function handleAddUser(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var adress = ev.target.elements.adress.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.password.value; + var preColor = ev.target.elements.preColor.value; + var image = ev.target.elements.image.files; + var confirmPassword = ev.target.elements.confirmPassword.value; + if (confirmPassword == password) { + users.push(new user(name, adress, email, phone, password, preColor, image)); + console.log(users); + console.log(name); + if (userViewer) { + userViewer.innerHTML += "
                \n \n
                \n

                " + name + "

                \n

                home adress:" + adress + " email adress:" + email + "

                \n

                favorite color hex: " + preColor + "

                \n
                \n
                "; + } + ev.target.reset(); + } + else { + alert("passwords do not match"); + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/idan/dist/helpers.js b/02-TypeScript/15-store/Home-puzzles/idan/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/idan/dist/index.js b/02-TypeScript/15-store/Home-puzzles/idan/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/idan/dist/model.js b/02-TypeScript/15-store/Home-puzzles/idan/dist/model.js new file mode 100644 index 000000000..5622c3731 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/dist/model.js @@ -0,0 +1,13 @@ +var user = /** @class */ (function () { + function user(name, adress, email, phone, password, preColor, image) { + this.name = name; + this.adress = adress; + this.email = email; + this.phone = phone; + this.password = password; + this.preColor = preColor; + this.image = image; + } + return user; +}()); +var users = []; diff --git a/02-TypeScript/15-store/Home-puzzles/idan/dist/style.css b/02-TypeScript/15-store/Home-puzzles/idan/dist/style.css new file mode 100644 index 000000000..ea8930825 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/dist/style.css @@ -0,0 +1,37 @@ +.wrapper { + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 25vh, 75vh; + position: absolute; + left: 0px; + top: 0px; +} +.wrapper__inputSection { + width: 100vw; + height: 25vh; +} +.wrapper__userViewer { + display: flex; + flex-direction: column; + overflow-y: scroll; +} +.wrapper__userViewer__userProfile { + width: 100vw; + height: fit-content; + display: flex; + flex-direction: row; +} +.wrapper__userViewer__userProfile img { + height: 100px; + width: 100px; + border-radius: 50%; +} +.wrapper__userViewer__userProfile__userText { + min-width: 500px; + max-width: 50vw; + display: flex; + flex-direction: column; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/idan/dist/view.js b/02-TypeScript/15-store/Home-puzzles/idan/dist/view.js new file mode 100644 index 000000000..0c187608d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/dist/view.js @@ -0,0 +1,12 @@ +var userViewer = document.querySelector(".wrapper__userViewer"); +var image = document.querySelector("#image"); +var imgUrl = ""; +if (image) { + image.addEventListener("change", function () { + var reader = new FileReader; + reader.addEventListener("load", function () { + imgUrl = reader.result; + }); + reader.readAsDataURL(this.files[0]); + }); +} diff --git a/02-TypeScript/15-store/Home-puzzles/idan/helpers.ts b/02-TypeScript/15-store/Home-puzzles/idan/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/idan/index.html b/02-TypeScript/15-store/Home-puzzles/idan/index.html new file mode 100644 index 000000000..f6573a5c2 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/index.html @@ -0,0 +1,38 @@ + + + + + + + Store + + + + + + + + +
                +
                +
                + + + + + + + + + + + + +
                +
                +
                + +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/idan/index.ts b/02-TypeScript/15-store/Home-puzzles/idan/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/idan/model.ts b/02-TypeScript/15-store/Home-puzzles/idan/model.ts new file mode 100644 index 000000000..8e504fec4 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/model.ts @@ -0,0 +1,13 @@ +class user { + + constructor( + public name: string, + public adress: string, + public email: number, + public phone: string, + public password: number, + public preColor: string, + public image:File + ){} +} +const users:user[] = []; diff --git a/02-TypeScript/15-store/Home-puzzles/idan/style.css b/02-TypeScript/15-store/Home-puzzles/idan/style.css new file mode 100644 index 000000000..73423330e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/style.css @@ -0,0 +1,39 @@ +.wrapper { + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 25vh, 75vh; + position: absolute; + left: 0px; + top: 0px; +} +.wrapper__inputSection { + width: 100vw; + height: 25vh; +} +.wrapper__userViewer { + display: flex; + flex-direction: column; + overflow-y: scroll; +} +.wrapper__userViewer__userProfile { + width: 100vw; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + display: flex; + flex-direction: row; +} +.wrapper__userViewer__userProfile img { + height: 100px; + width: 100px; + border-radius: 50%; +} +.wrapper__userViewer__userProfile__userText { + min-width: 500px; + max-width: 50vw; + display: flex; + flex-direction: column; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/idan/style.scss b/02-TypeScript/15-store/Home-puzzles/idan/style.scss new file mode 100644 index 000000000..51566da48 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/style.scss @@ -0,0 +1,42 @@ +.wrapper{ + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 25vh, 75vh; + position: absolute; + left: 0px; + top: 0px; + &__inputSection{ + width: 100vw; + height: 25vh; + } + &__userViewer{ + + display: flex; + flex-direction: column; + overflow-y: scroll; + &__userProfile{ + width: 100vw; + height: fit-content; + display: flex; + flex-direction: row; + img{ + height: 100px; + width: 100px; + border-radius: 50%; + } + &__userText{ + min-width: 500px; + max-width: 50vw; + display: flex; + flex-direction: column; + font-family:Verdana, Geneva, Tahoma, sans-serif; + } + } + } + + + + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/idan/view.ts b/02-TypeScript/15-store/Home-puzzles/idan/view.ts new file mode 100644 index 000000000..0c98ea6ae --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/idan/view.ts @@ -0,0 +1,12 @@ +const userViewer = document.querySelector(`.wrapper__userViewer`); +const image = document.querySelector(`#image`) +let imgUrl:any = ``; +if (image) { + image.addEventListener("change", function(){ + const reader:FileReader = new FileReader; + reader.addEventListener("load", ()=>{ + imgUrl=reader.result; + }) + reader.readAsDataURL(this.files[0]) + }) +} diff --git a/02-TypeScript/15-store/Home-puzzles/instructions.md b/02-TypeScript/15-store/Home-puzzles/instructions.md new file mode 100644 index 000000000..6dee4cbf6 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/instructions.md @@ -0,0 +1,3 @@ +1) create a form for registration (name, address, email, phone, password, prederd color), and pass to a function and console log the values) +2) create a registration form (name, address, email, phone, password, prederd color , image) with profile-image (url), and store in user instance of class User. set the user details back to the dom (show profile). +3) thae same as 2, but with local image (image on the computer). \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/control.ts b/02-TypeScript/15-store/Home-puzzles/itayAmosi/control.ts new file mode 100644 index 000000000..98bbde833 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/control.ts @@ -0,0 +1,45 @@ +const registerForm =document.querySelector(`#form`) + +function handleUser(event){ +try { + event.preventDefault(); + const gender = event.target.elements.gender.value; + const username = event.target.elements.username.value; + const password = event.target.elements.password.value; + const email = event.target.elements.email.value; + const theOfBirth = event.target.elements.theOfBirth.value; + const country = event.target.elements.country.value; + const profileImage = event.target.elements.profileImage.value; + + userList.push(new User(gender,username, password, email, theOfBirth,country, profileImage)); + console.log(userList); + event.target.reset(); + renderCard(userList); +} catch (error) { + console.error(error); +} +} + + + +function renderCard(users:User[]):void { +try { +const divElement = document.querySelector(`.card`) as HTMLElement; + users.forEach((user) => { + const userCard = document.createElement("div") as HTMLElement; + userCard.classList.add("newCard"); + userCard.innerHTML =` +
                  +
                • Gender: ${user.gender}
                  • +
                • Username: ${user.username}
                  • +
                • Password: ${user.password}
                  • +
                • Email: ${user.email}
                  • +
                • Date Of Birth: ${user.theOfBirth}
                  • +
                • country: ${user.country}
                  • +
                `; + divElement.appendChild(userCard); +}); +} catch (error) { +console.error(error); +} +} diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/control.js b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/control.js new file mode 100644 index 000000000..c45f45ffe --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/control.js @@ -0,0 +1,34 @@ +var registerForm = document.querySelector("#form"); +function handleUser(event) { + try { + event.preventDefault(); + var gender = event.target.elements.gender.value; + var username = event.target.elements.username.value; + var password = event.target.elements.password.value; + var email = event.target.elements.email.value; + var theOfBirth = event.target.elements.theOfBirth.value; + var country = event.target.elements.country.value; + var profileImage = event.target.elements.profileImage.value; + userList.push(new User(gender, username, password, email, theOfBirth, country, profileImage)); + console.log(userList); + event.target.reset(); + renderCard(userList); + } + catch (error) { + console.error(error); + } +} +function renderCard(users) { + try { + var divElement_1 = document.querySelector(".card"); + users.forEach(function (user) { + var userCard = document.createElement("div"); + userCard.classList.add("newCard"); + userCard.innerHTML = " \n
                  \n
                • Gender: " + user.gender + "
                  • \n
                • Username: " + user.username + "
                  • \n
                • Password: " + user.password + "
                  • \n
                • Email: " + user.email + "
                  • \n
                • Date Of Birth: " + user.theOfBirth + "
                  • \n
                • country: " + user.country + "
                  • \n
                "; + divElement_1.appendChild(userCard); + }); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/helpers.js b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/index.js b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/model.js b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/model.js new file mode 100644 index 000000000..535e4718f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/model.js @@ -0,0 +1,13 @@ +var User = /** @class */ (function () { + function User(gender, username, password, email, theOfBirth, country, profileImage) { + this.gender = gender; + this.username = username; + this.password = password; + this.email = email; + this.theOfBirth = theOfBirth; + this.country = country; + this.profileImage = profileImage; + } + return User; +}()); +var userList = []; diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/style.css b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/style.css new file mode 100644 index 000000000..af02505ee --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/style.css @@ -0,0 +1,33 @@ +h1 { + color: red; + display: grid; + justify-content: center; + text-align: center; +} + +h2 { + display: grid; + justify-content: center; + text-align: center; +} + +h3 { + margin-top: 50px; +} + +#form { + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column; +} + +.wrapper { + height: 80vh; + width: 100vw; + display: flex; + gap: 15rem; + align-items: center; + background-color: dodgerblue; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/view.js b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/view.js new file mode 100644 index 000000000..aa77e2eed --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/dist/view.js @@ -0,0 +1,2 @@ +var wrapper = document.querySelector(".cardsWrapper"); +var imgSrc = ""; diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/helpers.ts b/02-TypeScript/15-store/Home-puzzles/itayAmosi/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/index.html b/02-TypeScript/15-store/Home-puzzles/itayAmosi/index.html new file mode 100644 index 000000000..e6e670332 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/index.html @@ -0,0 +1,22 @@ + + + + + + + + Fakebook + + + + + + + + + + +

                wellcome to Fakebook

                +

                please register Here

                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/index.ts b/02-TypeScript/15-store/Home-puzzles/itayAmosi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/model.ts b/02-TypeScript/15-store/Home-puzzles/itayAmosi/model.ts new file mode 100644 index 000000000..b03221381 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/model.ts @@ -0,0 +1,15 @@ +class User{ + constructor( + public gender:string, + public username:string, + public password:string, + public email:string, + public theOfBirth:string, + public country:string, + public profileImage:string + ){} +} + +const userList:User[] = [ + +]; \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/setStore.html b/02-TypeScript/15-store/Home-puzzles/itayAmosi/setStore.html new file mode 100644 index 000000000..61d8cb8af --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/setStore.html @@ -0,0 +1,43 @@ + + + + + + + + Store - set product + + + + + + + + + + +

                Hey user let's start with registration

                +
                + +
                +

                Type your details:

                +
                + + + + + + + + +
                +
                +
                +
                + + + diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/style.css b/02-TypeScript/15-store/Home-puzzles/itayAmosi/style.css new file mode 100644 index 000000000..1c0e203b9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/style.css @@ -0,0 +1,33 @@ +h1 { + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; +} + +h2 { + display: grid; + justify-content: center; + text-align: center; +} + +h3 { + margin-top: 50px; +} + +#form { + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column; +} + +.wrapper { + height: 80vh; + width: 100vw; + display: flex; + gap: 15rem; + align-items: center; + background-color: dodgerblue; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/style.scss b/02-TypeScript/15-store/Home-puzzles/itayAmosi/style.scss new file mode 100644 index 000000000..ceaa622e6 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/style.scss @@ -0,0 +1,38 @@ +h1{ +color: rgb(255, 0, 0); +display: grid; +justify-content: center; +text-align: center; +} +h2 { + +display: grid; +justify-content: center; +text-align: center; +} +h3{ + margin-top: 50px; + +} +#form{ + // margin-top: 50px; + display: flex; + width: 300px; + height: 650px; + gap: 15px; + // display: inline-block; + flex-direction: column; +} + +.wrapper{ + + height: 80vh; + width: 100vw; + display: flex; +gap: 15rem; +align-items: center; +background-color:dodgerblue; + + + +} diff --git a/02-TypeScript/15-store/Home-puzzles/itayAmosi/view.ts b/02-TypeScript/15-store/Home-puzzles/itayAmosi/view.ts new file mode 100644 index 000000000..27d7f1107 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itayAmosi/view.ts @@ -0,0 +1,2 @@ +const wrapper = document.querySelector(".cardsWrapper") as HTMLDivElement; +let imgSrc = ""; \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/app.ts b/02-TypeScript/15-store/Home-puzzles/itsik-b/app.ts new file mode 100644 index 000000000..c892a511a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/app.ts @@ -0,0 +1,97 @@ +function startForm(){ + + // creat the Form -> from zero +const dive = document.createElement("div") as HTMLDivElement; +const form = document.createElement("form")as HTMLFormElement; +const lineH2 = document.createElement("h2")as HTMLHeadElement; +const firstLabel = document.createElement("label")as HTMLLabelElement; +const firstInput = document.createElement("input")as HTMLInputElement; +const secondLabel = document.createElement("label")as HTMLLabelElement; +const secondInput = document.createElement("input")as HTMLInputElement; +const thirdLabel = document.createElement("label")as HTMLLabelElement; +const thirdInput = document.createElement("input")as HTMLInputElement; +const forthLabel = document.createElement("label")as HTMLLabelElement; +const forthInput = document.createElement("input")as HTMLInputElement; +const fifthhLabel = document.createElement("label")as HTMLLabelElement; +const fifthhInput = document.createElement("input")as HTMLInputElement; +const sixthLabel = document.createElement("label")as HTMLLabelElement; +const sixthInput = document.createElement("input")as HTMLInputElement; +const seventhLabel = document.createElement("label")as HTMLLabelElement; +const seventhInput = document.createElement("input")as HTMLInputElement; +const submitBtn = document.createElement("button")as HTMLButtonElement; + +// append all new stuff +document.body.appendChild(dive); +dive.appendChild(form); +form.appendChild(lineH2); +form.appendChild(firstLabel); +form.appendChild(firstInput); +form.appendChild(secondLabel); +form.appendChild(secondInput); +form.appendChild(thirdLabel); +form.appendChild(thirdInput); +form.appendChild(forthLabel); +form.appendChild(forthInput); +form.appendChild(fifthhLabel); +form.appendChild(fifthhInput); +form.appendChild(sixthLabel); +form.appendChild(sixthInput); +form.appendChild(seventhLabel); +form.appendChild(seventhInput); +form.appendChild(submitBtn); + + +// set style +lineH2.innerHTML = "Register Here:"; +// 1 +firstLabel.innerHTML = "Enter Name:"; +firstInput.required; +firstInput.type="text"; +firstInput.placeholder = "enter your name"; +firstInput.style.fontSize = "14px"; +firstInput.name = "name"; +// 2 + +secondLabel.innerHTML = "address:"; +secondInput.required; +secondInput.type="text"; +secondInput.placeholder = "enter your address"; +secondInput.name ="address"; +// 3 +thirdLabel.innerHTML = "Email:"; +thirdInput.required; +thirdInput.placeholder = "enter email"; +thirdInput.type = "email"; +thirdInput.name = "email"; +// 4 +forthLabel.innerHTML = "Phone:"; +forthInput.required; +forthInput.type = "number"; +forthInput.placeholder = "phone number"; +forthInput.name = "phone"; +// 5 +fifthhLabel.innerHTML = "Password:"; +fifthhInput.required +fifthhInput.type = "password" +fifthhInput.placeholder = "enter password here" +fifthhInput.name = "password" +// 6 +sixthLabel.innerHTML = "Prefferd-Color:"; +sixthInput.type = "color"; +sixthInput.name = "precolor" +sixthInput.addEventListener("input", ()=>{ + document.body.style.backgroundColor = sixthInput.value + +}) + // 7 +seventhLabel.innerHTML = "Add-Image" +seventhInput.type = "file" +seventhInput.name = "file" +// button +submitBtn.textContent = "Send Form"; +submitBtn.type ="submit" +form.addEventListener("submit", userSubmit) + +} + + diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/control.ts b/02-TypeScript/15-store/Home-puzzles/itsik-b/control.ts new file mode 100644 index 000000000..b80cb7333 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/control.ts @@ -0,0 +1,15 @@ +class formUser { +constructor( +public name: string, +public address: string, +public email: string | number, +public phone: number, +public password: string | number, +public precolor: any, +public file: any) +{} +} +// const formUsers:formUser[] = []; +const userInfo:formUser[] = []; + + diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/app.js b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/app.js new file mode 100644 index 000000000..96e5a534e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/app.js @@ -0,0 +1,88 @@ +function startForm() { + // creat the Form -> from zero + var dive = document.createElement("div"); + var form = document.createElement("form"); + var lineH2 = document.createElement("h2"); + var firstLabel = document.createElement("label"); + var firstInput = document.createElement("input"); + var secondLabel = document.createElement("label"); + var secondInput = document.createElement("input"); + var thirdLabel = document.createElement("label"); + var thirdInput = document.createElement("input"); + var forthLabel = document.createElement("label"); + var forthInput = document.createElement("input"); + var fifthhLabel = document.createElement("label"); + var fifthhInput = document.createElement("input"); + var sixthLabel = document.createElement("label"); + var sixthInput = document.createElement("input"); + var seventhLabel = document.createElement("label"); + var seventhInput = document.createElement("input"); + var submitBtn = document.createElement("button"); + // append all new stuff + document.body.appendChild(dive); + dive.appendChild(form); + form.appendChild(lineH2); + form.appendChild(firstLabel); + form.appendChild(firstInput); + form.appendChild(secondLabel); + form.appendChild(secondInput); + form.appendChild(thirdLabel); + form.appendChild(thirdInput); + form.appendChild(forthLabel); + form.appendChild(forthInput); + form.appendChild(fifthhLabel); + form.appendChild(fifthhInput); + form.appendChild(sixthLabel); + form.appendChild(sixthInput); + form.appendChild(seventhLabel); + form.appendChild(seventhInput); + form.appendChild(submitBtn); + // set style + lineH2.innerHTML = "Register Here:"; + // 1 + firstLabel.innerHTML = "Enter Name:"; + firstInput.required; + firstInput.type = "text"; + firstInput.placeholder = "enter your name"; + firstInput.style.fontSize = "14px"; + firstInput.name = "name"; + // 2 + secondLabel.innerHTML = "address:"; + secondInput.required; + secondInput.type = "text"; + secondInput.placeholder = "enter your address"; + secondInput.name = "address"; + // 3 + thirdLabel.innerHTML = "Email:"; + thirdInput.required; + thirdInput.placeholder = "enter email"; + thirdInput.type = "email"; + thirdInput.name = "email"; + // 4 + forthLabel.innerHTML = "Phone:"; + forthInput.required; + forthInput.type = "number"; + forthInput.placeholder = "phone number"; + forthInput.name = "phone"; + // 5 + fifthhLabel.innerHTML = "Password:"; + fifthhInput.required; + fifthhInput.type = "password"; + fifthhInput.placeholder = "enter password here"; + fifthhInput.name = "password"; + // 6 + sixthLabel.innerHTML = "Prefferd-Color:"; + sixthInput.type = "color"; + sixthInput.name = "precolor"; + sixthInput.addEventListener("input", function () { + document.body.style.backgroundColor = sixthInput.value; + }); + // 7 + seventhLabel.innerHTML = "Add-Image"; + seventhInput.type = "file"; + seventhInput.name = "file"; + // button + submitBtn.textContent = "Send Form"; + submitBtn.type = "submit"; + form.addEventListener("submit", userSubmit); +} diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/control.js b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/control.js new file mode 100644 index 000000000..1a82598b8 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/control.js @@ -0,0 +1,14 @@ +var formUser = /** @class */ (function () { + function formUser(name, address, email, phone, password, precolor, file) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.precolor = precolor; + this.file = file; + } + return formUser; +}()); +// const formUsers:formUser[] = []; +var userInfo = []; diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/index.js b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/model.js b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/model.js new file mode 100644 index 000000000..6e3c52edf --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/model.js @@ -0,0 +1,18 @@ +// const mainform = document.querySelector("form")as HTMLFormElement; +function userSubmit(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.value; + var password = ev.target.elements.password.value; + var precolor = ev.target.elements.precolor.value; + var file = ev.target.elements.file.value; + userInfo.push(new formUser(name, address, email, phone, password, precolor, file)); + // ev.target.reset(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/style.css b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/style.css new file mode 100644 index 000000000..194b5da90 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/dist/style.css @@ -0,0 +1,33 @@ +body { + color: #f50303; + font-size: 22px; + background-color: #030303; + font-weight: bold; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; +} +body div { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; +} +body form h2 { + margin: 40px 0px; + color: #f0ecf4; +} +body input { + text-align: center; + justify-content: center; + display: flex; + margin: 10px 0px; + background: linear-gradient(white, #cccaca); +} +body ::placeholder { + font-size: 15px; +} +body button { + margin: 50px 0px; + background: linear-gradient(#f9f6f6, #f00606); + width: 70px; + border-radius: 25% 25% 40% 40%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/index.html b/02-TypeScript/15-store/Home-puzzles/itsik-b/index.html new file mode 100644 index 000000000..2f7ecb4d7 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/index.html @@ -0,0 +1,18 @@ + + + + + + + Form + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/index.ts b/02-TypeScript/15-store/Home-puzzles/itsik-b/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/model.ts b/02-TypeScript/15-store/Home-puzzles/itsik-b/model.ts new file mode 100644 index 000000000..84f6ff651 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/model.ts @@ -0,0 +1,21 @@ +// const mainform = document.querySelector("form")as HTMLFormElement; +function userSubmit(ev:any){ + try { + ev.preventDefault(); + + const name:string = ev.target.elements.name.value; + const address:string = ev.target.elements.address.value; + const email:string | number = ev.target.elements.email.value; + const phone:number = ev.target.elements.phone.value; + const password:number | string = ev.target.elements.password.value; + const precolor:any = ev.target.elements.precolor.value; + const file:any = ev.target.elements.file.value; + + userInfo.push(new formUser(name, address, email, phone, password, precolor, file)); + + + // ev.target.reset(); + } catch (error) { + console.error(error) + } + } \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/style.css b/02-TypeScript/15-store/Home-puzzles/itsik-b/style.css new file mode 100644 index 000000000..be7a7b80f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/style.css @@ -0,0 +1,39 @@ +body { + color: rgb(245, 3, 3); + font-size: 22px; + background-color: rgb(3, 3, 3); + font-weight: bold; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; +} +body div { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; +} +body form h2 { + margin: 40px 0px; + color: rgb(240, 236, 244); +} +body input { + text-align: center; + justify-content: center; + display: flex; + margin: 10px 0px; + background: linear-gradient(white, rgb(204, 202, 202)); +} +body ::-moz-placeholder { + font-size: 15px; +} +body :-ms-input-placeholder { + font-size: 15px; +} +body ::placeholder { + font-size: 15px; +} +body button { + margin: 50px 0px; + background: linear-gradient(#f9f6f6, #f00606); + width: 70px; + border-radius: 25% 25% 40% 40%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/style.scss b/02-TypeScript/15-store/Home-puzzles/itsik-b/style.scss new file mode 100644 index 000000000..e3be60809 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/style.scss @@ -0,0 +1,43 @@ +body{ + color: rgb(245, 3, 3); +font-size: 22px; +background-color:rgb(3, 3, 3); +font-weight: bold; +font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; + + +div{ + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; +} +form{ + + + + h2{ + margin: 40px 0px; + color: rgb(240, 236, 244); + } +} + +input{ +text-align: center; +justify-content: center; +display: flex; +margin: 10px 0px; +background: linear-gradient(white,rgb(204, 202, 202)); +} +::placeholder{ + font-size: 15px; +} + +button{ +margin: 50px 0px; +background: linear-gradient(#f9f6f6, #f00606); +width:70px; +border-radius: 25% 25% 40% 40%; +} + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/itsik-b/userinfo.html b/02-TypeScript/15-store/Home-puzzles/itsik-b/userinfo.html new file mode 100644 index 000000000..882ebe86d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/itsik-b/userinfo.html @@ -0,0 +1,17 @@ + + + + + + + + User-Info + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/control.ts b/02-TypeScript/15-store/Home-puzzles/john-ben/control.ts new file mode 100644 index 000000000..a38afccc5 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/control.ts @@ -0,0 +1,58 @@ + +const form = document.querySelector("#myForm"); + +function hendleAddDetail(ev) { + + try { + ev.preventDefault(); + + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.pass.value; + const image = ev.target.elements.image.value; + + + details.push(new detail(name, address, email, phone, password, image)); + + console.log(details) + + randelDetails() + + + } catch (error) { + console.error(error); + } +} + +function randelDetails(){ + try { + for(let i=0; iName: ${details[i].name}
                ` + userDetail.innerHTML+= `
                Address: ${details[i].address}
                ` + userDetail.innerHTML+= `
                Email: ${details[i].email}
                ` + userDetail.innerHTML+= `
                Phone: ${details[i].phone}
                ` + userDetail.innerHTML+= `
                Password: ${details[i].password}
                ` + } + } catch (error) { + console.error(error) + } +} + + + +function hendelViewPassword(){ + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } + } diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/dist/control.js b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/control.js new file mode 100644 index 000000000..71f36cd0d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/control.js @@ -0,0 +1,48 @@ +var form = document.querySelector("#myForm"); +function hendleAddDetail(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.pass.value; + var image = ev.target.elements.image.value; + details.push(new detail(name, address, email, phone, password, image)); + console.log(details); + randelDetails(); + } + catch (error) { + console.error(error); + } +} +function randelDetails() { + try { + for (var i = 0; i < details.length; i++) { + var userDetail = document.querySelector(".detail"); + userDetail.innerHTML += "
                Name: " + details[i].name + "
                "; + userDetail.innerHTML += "
                Address: " + details[i].address + "
                "; + userDetail.innerHTML += "
                Email: " + details[i].email + "
                "; + userDetail.innerHTML += "
                Phone: " + details[i].phone + "
                "; + userDetail.innerHTML += "
                Password: " + details[i].password + "
                "; + } + } + catch (error) { + console.error(error); + } +} +function hendelViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/dist/index.js b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/dist/model.js b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/model.js new file mode 100644 index 000000000..0076efda9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/model.js @@ -0,0 +1,12 @@ +var detail = /** @class */ (function () { + function detail(name, address, email, phone, password, image) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.image = image; + } + return detail; +}()); +var details = []; diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/dist/style.css b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/style.css new file mode 100644 index 000000000..f94d225f9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/style.css @@ -0,0 +1,85 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; +} + +body { + font-family: georgia; + background-color: #566f54; +} + +h1, h2 { + text-align: center; + color: #022b15; +} + +.container { + margin: auto; + width: 400px; + height: 450px; + font-size: 20px; + color: #131f17; + border: 2px solid black; +} +.container form { + margin-left: 10px; + margin: auto; +} +.container label { + display: inline-block; + width: 100px; + text-align: left; +} +.container input { + text-align: left; + border: 3px solid #a79e9e; + height: 30px; + display: table-cell; + width: 60%; + margin: 10px 0px; +} +.container #pass { + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; +} +.container #colorDiv { + margin: 10px; +} +.container ץ .color { + width: 30px; +} +.container #image { + display: inline-block; + width: 200px; +} +.container button { + text-align: center; + align-items: center; + height: 50px; + width: 110px; + background-color: #08482a; + color: white; + font-size: 30px; + margin-left: 40%; +} + +.detail { + right: 0; + margin-left: 10px; +} + +.userDiv { + display: flex; + margin-top: 20px; + color: #9eb6a6; + font-size: 30px; + margin-left: 750px; +} + +.creatDiv { + font-size: 30px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/dist/view.js b/02-TypeScript/15-store/Home-puzzles/john-ben/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/index.html b/02-TypeScript/15-store/Home-puzzles/john-ben/index.html new file mode 100644 index 000000000..b82d5acb8 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/index.html @@ -0,0 +1,37 @@ + + + + + + + Registration Form + + + + + + + + +
                +

                Registration

                +
                + +
                + +
                + +
                + +
                + +
                + +
                + +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/index.ts b/02-TypeScript/15-store/Home-puzzles/john-ben/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/model.ts b/02-TypeScript/15-store/Home-puzzles/john-ben/model.ts new file mode 100644 index 000000000..91b8e836a --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/model.ts @@ -0,0 +1,14 @@ + +class detail { + + constructor( + public name: string, + public address: string, + public email: string, + public phone: number, + public password: string, + public image: string, + ) {} + } + const details:detail[] = [] + diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/style.scss b/02-TypeScript/15-store/Home-puzzles/john-ben/style.scss new file mode 100644 index 000000000..d89270653 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/john-ben/style.scss @@ -0,0 +1,91 @@ +*{ + margin: 0; + padding: 0; + +} + +body{ + font-family: georgia; + background-color: rgb(86, 111, 84); + +} +h1, h2 { + text-align: center; + color: rgb(2, 43, 21); +} + +.container{ + margin: auto; + width: 400px; + height: 450px; + font-size: 20px; + color: rgb(19, 31, 23); + border: 2px solid black; + // background-color: #111; + form{ + margin-left: 10px; + margin: auto; + + } + label{ + display: inline-block; + width: 100px; + text-align: left; + } + + input{ + text-align: left; + border: 3px solid rgb(167, 158, 158); + height: 30px; + display: table-cell; + width: 60%; + margin: 10px 0px; + } + #pass{ + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; + } + #colorDiv{ + margin: 10px; + } + ץ .color{ + width: 30px; + } + #image{ + display: inline-block; + width: 200px; + + } + + button{ + text-align: center; + align-items: center; + height: 50px; + width: 110px; + background-color: rgb(8, 72, 42); + color: white; + font-size: 30px; + margin-left: 40%; + } + + +} + +.detail{ + right: 0; + margin-left: 10px; +} +.userDiv{ + display: flex; + margin-top: 20px; + color: rgb(158, 182, 166); + font-size: 30px; + margin-left: 750px; + +} +.creatDiv{ + font-size: 30px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/john-ben/view.ts b/02-TypeScript/15-store/Home-puzzles/john-ben/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/control.ts b/02-TypeScript/15-store/Home-puzzles/noa-meillet/control.ts new file mode 100644 index 000000000..c9781afc8 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/control.ts @@ -0,0 +1,55 @@ +function addUser(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const adress = ev.target.elements.adress.value; + const email = ev.target.elements.email.value; + const dateOfBirth = ev.target.elements.birthday.value; + const phonePrefix = ev.target.elements.phonePrefix.valueAsNumber; + const phoneNumber = ev.target.elements.phone.valueAsNumber; + const color = ev.target.elements.preferedColor.value; + const image = ev.target.elements.image.value; + + usersArr.push( + new UserProfile( + name, + adress, + email, + dateOfBirth, + phonePrefix, + phoneNumber, + color, + image + ) + ); + console.log (usersArr); + showUsers(usersArr); + ev.target.reset(); + } catch (error) { + console.error(Error); + } +} + +function showUsers(usersArr){ + try { + if (users && usersArr.length > 0) { + users.innerHTML=``; + for (let i = 0; i < usersArr.length; i++) { + users.innerHTML += `
                + image +

                ${usersArr[i].name}

                +
                ${usersArr[i].adress}
                +
                ${usersArr[i].email}
                +
                ${usersArr[i].dateOfBirth}
                +
                ${usersArr[i].phonePrefix}
                +
                ${usersArr[i].phoneNumber}
                +
                `; + } + } else { + throw new Error(`there are no users in the system`); + } + } catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/control.js b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/control.js new file mode 100644 index 000000000..bdfc17be0 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/control.js @@ -0,0 +1,37 @@ +function addUser(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var adress = ev.target.elements.adress.value; + var email = ev.target.elements.email.value; + var dateOfBirth = ev.target.elements.birthday.value; + var phonePrefix = ev.target.elements.phonePrefix.valueAsNumber; + var phoneNumber = ev.target.elements.phone.valueAsNumber; + var color = ev.target.elements.preferedColor.value; + var image = ev.target.elements.image.value; + usersArr.push(new UserProfile(name, adress, email, dateOfBirth, phonePrefix, phoneNumber, color, image)); + console.log(usersArr); + showUsers(usersArr); + ev.target.reset(); + } + catch (error) { + console.error(Error); + } +} +function showUsers(usersArr) { + try { + if (users && usersArr.length > 0) { + users.innerHTML = ""; + for (var i = 0; i < usersArr.length; i++) { + users.innerHTML += "
                \n \"image\"/\n

                " + usersArr[i].name + "

                \n
                " + usersArr[i].adress + "
                \n
                " + usersArr[i].email + "
                \n
                " + usersArr[i].dateOfBirth + "
                \n
                " + usersArr[i].phonePrefix + "
                \n
                " + usersArr[i].phoneNumber + "
                \n
                "; + } + } + else { + throw new Error("there are no users in the system"); + } + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/model.js b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/model.js new file mode 100644 index 000000000..00ad96426 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/model.js @@ -0,0 +1,14 @@ +var UserProfile = /** @class */ (function () { + function UserProfile(name, adress, email, dateOfBirth, phonePrefix, phoneNumber, color, profileImage) { + this.name = name; + this.adress = adress; + this.email = email; + this.dateOfBirth = dateOfBirth; + this.phonePrefix = phonePrefix; + this.phoneNumber = phoneNumber; + this.color = color; + this.profileImage = profileImage; + } + return UserProfile; +}()); +var usersArr = []; diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/style.css b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/view.js b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/view.js new file mode 100644 index 000000000..c9af89721 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/dist/view.js @@ -0,0 +1 @@ +var users = document.querySelector(".users"); diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/index.html b/02-TypeScript/15-store/Home-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..169bb9bdc --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/index.html @@ -0,0 +1,46 @@ + + + + + + + Register Form + + + + + + +

                Register Form

                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                +
                +
                +
                + + +
                +
                + + + diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/model.ts b/02-TypeScript/15-store/Home-puzzles/noa-meillet/model.ts new file mode 100644 index 000000000..1f383b54f --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/model.ts @@ -0,0 +1,14 @@ +class UserProfile{ + constructor( + public name: string, + public adress: string, + public email: string, + public dateOfBirth: string, + public phonePrefix: number, + public phoneNumber: number, + public color: string, + public profileImage: string + ){} +} + +const usersArr:UserProfile[]= []; \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/style.css b/02-TypeScript/15-store/Home-puzzles/noa-meillet/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/style.scss b/02-TypeScript/15-store/Home-puzzles/noa-meillet/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/noa-meillet/view.ts b/02-TypeScript/15-store/Home-puzzles/noa-meillet/view.ts new file mode 100644 index 000000000..ae9b8318d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/noa-meillet/view.ts @@ -0,0 +1 @@ +const users:HTMLHeadingElement | null= document.querySelector(".users"); \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/app.ts b/02-TypeScript/15-store/Home-puzzles/shaili/app.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/control.ts b/02-TypeScript/15-store/Home-puzzles/shaili/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/dist/style.css b/02-TypeScript/15-store/Home-puzzles/shaili/dist/style.css new file mode 100644 index 000000000..609253955 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shaili/dist/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/helpers.ts b/02-TypeScript/15-store/Home-puzzles/shaili/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/index.html b/02-TypeScript/15-store/Home-puzzles/shaili/index.html new file mode 100644 index 000000000..82aad6734 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shaili/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/model.ts b/02-TypeScript/15-store/Home-puzzles/shaili/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/style.scss b/02-TypeScript/15-store/Home-puzzles/shaili/style.scss new file mode 100644 index 000000000..293d3b1f1 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shaili/style.scss @@ -0,0 +1,3 @@ +body { + margin: 0; +} diff --git a/02-TypeScript/15-store/Home-puzzles/shaili/view.ts b/02-TypeScript/15-store/Home-puzzles/shaili/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/control.ts b/02-TypeScript/15-store/Home-puzzles/shalom copperman/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/dist/app.js b/02-TypeScript/15-store/Home-puzzles/shalom copperman/dist/app.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/dist/style.css b/02-TypeScript/15-store/Home-puzzles/shalom copperman/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/index.html b/02-TypeScript/15-store/Home-puzzles/shalom copperman/index.html new file mode 100644 index 000000000..2fd955bb2 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shalom copperman/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/model.ts b/02-TypeScript/15-store/Home-puzzles/shalom copperman/model.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/style.css b/02-TypeScript/15-store/Home-puzzles/shalom copperman/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/style.scss b/02-TypeScript/15-store/Home-puzzles/shalom copperman/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shalom copperman/view.ts b/02-TypeScript/15-store/Home-puzzles/shalom copperman/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/control.ts b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/control.ts new file mode 100644 index 000000000..3030c8bee --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/control.ts @@ -0,0 +1,51 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + debugger; + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.password.value; + const preferedColor = ev.target.elements.preferedColor.value; + const pictureURL = ev.target.elements.pictureURL.value; + + people.push( + new Person( + name, + address, + email, + phone, + password, + preferedColor, + pictureURL + ) + ); + ev.target.reset(); + render(); + } catch (error) { + console.error(error); + } +} + +function render() { + let page = ""; + let j = 0; + for (j = 0; j <= people.length - 1; j++) { + page += `
                +

                ${people[j].name}

                +

                ${people[j].address}

                +

                ${people[j].email}

                +

                ${people[j].phone}

                +

                ${people[j].password}

                +

                ${people[j].preferedColor}

                + +
                `; + } + console.log(page); + const html: HTMLDivElement | null = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/dist/control.js b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/dist/control.js new file mode 100644 index 000000000..b33517a3d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/dist/control.js @@ -0,0 +1,32 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + debugger; + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.password.value; + var preferedColor = ev.target.elements.preferedColor.value; + var pictureURL = ev.target.elements.pictureURL.value; + people.push(new Person(name, address, email, phone, password, preferedColor, pictureURL)); + ev.target.reset(); + render(); + } + catch (error) { + console.error(error); + } +} +function render() { + var page = ""; + var j = 0; + for (j = 0; j <= people.length - 1; j++) { + page += "
                \n

                " + people[j].name + "

                \n

                " + people[j].address + "

                \n

                " + people[j].email + "

                \n

                " + people[j].phone + "

                \n

                " + people[j].password + "

                \n

                " + people[j].preferedColor + "

                \n \n
                "; + } + console.log(page); + var html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/dist/model.js b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/dist/model.js new file mode 100644 index 000000000..7c62d5515 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/dist/model.js @@ -0,0 +1,13 @@ +class Person { + constructor(name, address, email, phone, password, preferedColor, pictureURL) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.preferedColor = preferedColor; + this.pictureURL = pictureURL; + } +} +const people = []; +console.log(people); diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/getProduct.html b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/getProduct.html new file mode 100644 index 000000000..25a117381 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/getProduct.html @@ -0,0 +1,31 @@ + + + + + + + setProduct + + + + + + +
                + + + + + + + + + +
                + + +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/index.html b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/index.html new file mode 100644 index 000000000..3a651ccd2 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/index.html @@ -0,0 +1,21 @@ + + + + + + + main + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/model.ts b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/model.ts new file mode 100644 index 000000000..5ab65a38d --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/model.ts @@ -0,0 +1,15 @@ +class Person { +constructor ( +public name:string, +public address:string, +public email:string, +public phone:number, +public password:string, +public preferedColor:string, +public pictureURL:string, +){} +} + +const people:Person[]=[]; + +console.log(people) \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/style.css b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/style.css new file mode 100644 index 000000000..0eb0f3ef1 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/style.css @@ -0,0 +1,11 @@ +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + border: solid coral; + padding: 50px; +} +.list img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/shlomi.samai/style.scss b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/style.scss new file mode 100644 index 000000000..d1368ff93 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/shlomi.samai/style.scss @@ -0,0 +1,13 @@ + +.list { + + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + img { + width: 100%; + } + border: solid coral; + padding: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/control.ts b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/control.ts new file mode 100644 index 000000000..c7a7b0ca9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/control.ts @@ -0,0 +1,29 @@ +const forma = document.querySelector(`#theForm`) + +function accountInfo(ev:any) { + try { + + ev.preventDefault(); + const name= ev.target.elements.name.value; + const address= ev.target.elements.address.value; + const email= ev.target.elements.email.value; + const phone= ev.target.elements.phone.value; + const password= ev.target.elements.password.value; + const favoriteColor= ev.target.elements.favoriteColor; + + userinfo.push(new user(name,address,email,phone,password,favoriteColor)); + console.log(userinfo); + ev.target.reset(); + } catch (error) { + console.error(error) + } +} +function ChangerColor(ev) { + try { + console.log(ev); + const favoriteColor = ev.target.value; + document.body.style.backgroundColor = favoriteColor; + } catch (error) { + console.error(error); + } + } diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/control.js b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/control.js new file mode 100644 index 000000000..f9c5a91db --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/control.js @@ -0,0 +1,28 @@ +var forma = document.querySelector("#theForm"); +function accountInfo(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var address = ev.target.elements.address.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.value; + var password = ev.target.elements.password.value; + var favoriteColor = ev.target.elements.favoriteColor; + userinfo.push(new user(name, address, email, phone, password, favoriteColor)); + console.log(userinfo); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} +function ChangerColor(ev) { + try { + console.log(ev); + var favoriteColor = ev.target.value; + document.body.style.backgroundColor = favoriteColor; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/helpers.js b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/index.js b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/model.js b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/model.js new file mode 100644 index 000000000..b614e0d65 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/model.js @@ -0,0 +1,14 @@ +var user = /** @class */ (function () { + function user(name, address, email, phone, password, favoriteColor) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.favoriteColor = favoriteColor; + this.uid = uid(); + } + return user; +}()); +var userinfo = []; +console.log(userinfo); diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/style.css b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/style.css new file mode 100644 index 000000000..d5990c1ba --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/style.css @@ -0,0 +1,25 @@ +h1, h2 { + display: grid; + justify-content: center; + text-align: center; +} + +h3 { + margin-top: 50px; +} + +#form { + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column; +} + +.formDiv { + border: 2px solid black; + width: 300px; + height: 550px; + margin-top: 80px; + margin-left: 40%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/view.js b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/helpers.ts b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/helpers.ts new file mode 100644 index 000000000..699c7218e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/index.html b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/index.html new file mode 100644 index 000000000..8aef4975e --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + + + + + + +

                hey yo my t-shirt store

                +

                please register Here

                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/index.ts b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/model.ts b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/model.ts new file mode 100644 index 000000000..ba324e2f9 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/model.ts @@ -0,0 +1,15 @@ +class user { + uid:string; + constructor( + public name: string, + public address: string, + public email: string, + public phone: number, + public password: string, + public favoriteColor: string + ){ + this.uid = uid(); + } + } +const userinfo: user[] = []; +console.log(userinfo); diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/setproduct.html b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/setproduct.html new file mode 100644 index 000000000..748e50a9b --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/setproduct.html @@ -0,0 +1,37 @@ + + + + + + + Document + + + + + + + + +
                +
                +

                can you put you details here and picture of your t-shirt

                +
                + + + + + + + + +
                +
                +
                +
                + + diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/style.css b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/style.css new file mode 100644 index 000000000..d5990c1ba --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/style.css @@ -0,0 +1,25 @@ +h1, h2 { + display: grid; + justify-content: center; + text-align: center; +} + +h3 { + margin-top: 50px; +} + +#form { + display: flex; + width: 300px; + height: 650px; + gap: 15px; + flex-direction: column; +} + +.formDiv { + border: 2px solid black; + width: 300px; + height: 550px; + margin-top: 80px; + margin-left: 40%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/style.scss b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/style.scss new file mode 100644 index 000000000..ff85c6817 --- /dev/null +++ b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/style.scss @@ -0,0 +1,43 @@ +h1, h2 { + + display: grid; + justify-content: center; + text-align: center; + } + h3{ + margin-top: 50px; + + } + #form{ + // margin-top: 50px; + display: flex; + width: 300px; + height: 650px; + gap: 15px; + // display: inline-block; + flex-direction: column;; + } + + // .wrapper{ + // border: 1px solid black; + // height: 1000px; + // width: 3500px; + + + + // } + + + .formDiv{ + border: 2px solid black; + width: 300px; + height: 550px; + margin-top: 80px; + margin-left: 40%; + } + // .card{ + // border: 2px solid rgb(218, 18, 18); + // width: 30px; + // height: 50px; + // margin-top: 80px; + // } \ No newline at end of file diff --git a/02-TypeScript/15-store/Home-puzzles/tomer-cohen/view.ts b/02-TypeScript/15-store/Home-puzzles/tomer-cohen/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/example/control.ts b/02-TypeScript/15-store/example/control.ts new file mode 100644 index 000000000..a6e817dfb --- /dev/null +++ b/02-TypeScript/15-store/example/control.ts @@ -0,0 +1,48 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/example/dist/control.js b/02-TypeScript/15-store/example/dist/control.js new file mode 100644 index 000000000..9b281618c --- /dev/null +++ b/02-TypeScript/15-store/example/dist/control.js @@ -0,0 +1,45 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/example/dist/helpers.js b/02-TypeScript/15-store/example/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/example/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/example/dist/index.js b/02-TypeScript/15-store/example/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/example/dist/model.js b/02-TypeScript/15-store/example/dist/model.js new file mode 100644 index 000000000..5900d17b5 --- /dev/null +++ b/02-TypeScript/15-store/example/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/15-store/example/dist/style.css b/02-TypeScript/15-store/example/dist/style.css new file mode 100644 index 000000000..1d5d890b4 --- /dev/null +++ b/02-TypeScript/15-store/example/dist/style.css @@ -0,0 +1,9 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, form textarea, form select { + margin: 10px 0; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/example/dist/view.js b/02-TypeScript/15-store/example/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/example/helpers.ts b/02-TypeScript/15-store/example/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/15-store/example/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/example/index.html b/02-TypeScript/15-store/example/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/15-store/example/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/15-store/example/index.ts b/02-TypeScript/15-store/example/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/example/model.ts b/02-TypeScript/15-store/example/model.ts new file mode 100644 index 000000000..c5a179ae2 --- /dev/null +++ b/02-TypeScript/15-store/example/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/15-store/example/registerLogin.css b/02-TypeScript/15-store/example/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/example/registerLogin.html b/02-TypeScript/15-store/example/registerLogin.html new file mode 100644 index 000000000..1f3a7ac78 --- /dev/null +++ b/02-TypeScript/15-store/example/registerLogin.html @@ -0,0 +1,26 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/example/registerLogin.scss b/02-TypeScript/15-store/example/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/example/setProduct.html b/02-TypeScript/15-store/example/setProduct.html new file mode 100644 index 000000000..efe0325b2 --- /dev/null +++ b/02-TypeScript/15-store/example/setProduct.html @@ -0,0 +1,38 @@ + + + + + + + + Store - set product + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/example/style.css b/02-TypeScript/15-store/example/style.css new file mode 100644 index 000000000..1d5d890b4 --- /dev/null +++ b/02-TypeScript/15-store/example/style.css @@ -0,0 +1,9 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, form textarea, form select { + margin: 10px 0; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/example/style.scss b/02-TypeScript/15-store/example/style.scss new file mode 100644 index 000000000..772af1f74 --- /dev/null +++ b/02-TypeScript/15-store/example/style.scss @@ -0,0 +1,9 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, textarea,select{ + margin: 10px 0; + } +} diff --git a/02-TypeScript/15-store/example/view.ts b/02-TypeScript/15-store/example/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Ayala/control.ts b/02-TypeScript/15-store/followup/Ayala/control.ts new file mode 100644 index 000000000..c91e3489a --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/control.ts @@ -0,0 +1,21 @@ +function handleAddItem(ev){ + try { + ev.preventDefault() + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + + items.push(new Item(name,color,price,category,size, sn)); + console.log(items) + ev.target.reset() + + console.log(name) + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Ayala/dist/control.js b/02-TypeScript/15-store/followup/Ayala/dist/control.js new file mode 100644 index 000000000..511f48a93 --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/dist/control.js @@ -0,0 +1,18 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/Ayala/dist/helpers.js b/02-TypeScript/15-store/followup/Ayala/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/Ayala/dist/index.js b/02-TypeScript/15-store/followup/Ayala/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Ayala/dist/model.js b/02-TypeScript/15-store/followup/Ayala/dist/model.js new file mode 100644 index 000000000..5900d17b5 --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/15-store/followup/Ayala/helpers.ts b/02-TypeScript/15-store/followup/Ayala/helpers.ts new file mode 100644 index 000000000..95191593b --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Ayala/index.html b/02-TypeScript/15-store/followup/Ayala/index.html new file mode 100644 index 000000000..0675c1c23 --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/index.html @@ -0,0 +1,17 @@ + + + + + + + Document + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Ayala/index.ts b/02-TypeScript/15-store/followup/Ayala/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Ayala/model.ts b/02-TypeScript/15-store/followup/Ayala/model.ts new file mode 100644 index 000000000..e57b24c88 --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/model.ts @@ -0,0 +1,19 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } + } + const items:Item[] = []; + + items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) + console.log(items) + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Ayala/setProduct.html b/02-TypeScript/15-store/followup/Ayala/setProduct.html new file mode 100644 index 000000000..c17f6011a --- /dev/null +++ b/02-TypeScript/15-store/followup/Ayala/setProduct.html @@ -0,0 +1,34 @@ + + + + + + + Document' + + + + + + +

                Set product

                + Store +
                + + + + inpu + + + + +
                + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Ayala/view.ts b/02-TypeScript/15-store/followup/Ayala/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itai-G/control.ts b/02-TypeScript/15-store/followup/Itai-G/control.ts new file mode 100644 index 000000000..99f1ac257 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/control.ts @@ -0,0 +1,19 @@ +function handelAddItem(e){ + try { + e.preventDefault() + + const name = e.target.elements.name.value; + const color = e.target.elements.color.value; + const price = e.target.elements.price.value; + const category = e.target.elements.category.value; + const size = e.target.elements.size.value; + const sn = e.target.elements.sn.value; + + items.push(new Item(name,color,price,category,size,sn)) + console.log(items) + e.target.reset() + + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itai-G/dist/control.js b/02-TypeScript/15-store/followup/Itai-G/dist/control.js new file mode 100644 index 000000000..da7c2a768 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/dist/control.js @@ -0,0 +1,17 @@ +function handelAddItem(e) { + try { + e.preventDefault(); + var name = e.target.elements.name.value; + var color = e.target.elements.color.value; + var price = e.target.elements.price.value; + var category = e.target.elements.category.value; + var size = e.target.elements.size.value; + var sn = e.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + e.target.reset(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/Itai-G/dist/helpers.js b/02-TypeScript/15-store/followup/Itai-G/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/Itai-G/dist/index.js b/02-TypeScript/15-store/followup/Itai-G/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itai-G/dist/model.js b/02-TypeScript/15-store/followup/Itai-G/dist/model.js new file mode 100644 index 000000000..410c7ca01 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/dist/model.js @@ -0,0 +1,13 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; diff --git a/02-TypeScript/15-store/followup/Itai-G/dist/style.css b/02-TypeScript/15-store/followup/Itai-G/dist/style.css new file mode 100644 index 000000000..dad026a15 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/dist/style.css @@ -0,0 +1,6 @@ +.head { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itai-G/dist/view.js b/02-TypeScript/15-store/followup/Itai-G/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itai-G/helpers.ts b/02-TypeScript/15-store/followup/Itai-G/helpers.ts new file mode 100644 index 000000000..95191593b --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itai-G/index.html b/02-TypeScript/15-store/followup/Itai-G/index.html new file mode 100644 index 000000000..6bd3f95a8 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + + + + + + +
                +

                Stor

                + set product +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itai-G/index.ts b/02-TypeScript/15-store/followup/Itai-G/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itai-G/model.ts b/02-TypeScript/15-store/followup/Itai-G/model.ts new file mode 100644 index 000000000..9f0096e3b --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/model.ts @@ -0,0 +1,16 @@ +class Item { + uid:string; + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid() + } +} + +const items:Item[]= []; + diff --git a/02-TypeScript/15-store/followup/Itai-G/setProduct.html b/02-TypeScript/15-store/followup/Itai-G/setProduct.html new file mode 100644 index 000000000..8eee8280c --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/setProduct.html @@ -0,0 +1,33 @@ + + + + + + + store-set product + + + + + + + +

                Add The Item Here.

                +
                + + + + + + + +

                + return Home +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itai-G/style.css b/02-TypeScript/15-store/followup/Itai-G/style.css new file mode 100644 index 000000000..dad026a15 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/style.css @@ -0,0 +1,6 @@ +.head { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itai-G/style.scss b/02-TypeScript/15-store/followup/Itai-G/style.scss new file mode 100644 index 000000000..350ede6a7 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itai-G/style.scss @@ -0,0 +1,7 @@ +.head{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + +} diff --git a/02-TypeScript/15-store/followup/Itai-G/view b/02-TypeScript/15-store/followup/Itai-G/view new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/.vscode/settings.json b/02-TypeScript/15-store/followup/Itsik_B/form/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/dist/form.html b/02-TypeScript/15-store/followup/Itsik_B/form/dist/form.html new file mode 100644 index 000000000..a813816b2 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/dist/form.html @@ -0,0 +1,28 @@ + + + + + + + form test + + + +

                Back

                +
                + + + +

                + + + + +
                +
                + +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/dist/form.js b/02-TypeScript/15-store/followup/Itsik_B/form/dist/form.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/dist/index.css b/02-TypeScript/15-store/followup/Itsik_B/form/dist/index.css new file mode 100644 index 000000000..16b3ec76f --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/dist/index.css @@ -0,0 +1,20 @@ +body { + border: 1px solid; + width: 100vw; + height: 100vh; +} +body nav { + display: flex; +} +body .mynav, body ul, body li { + width: 100%; + display: flex; + justify-content: space-between; + font-size: 28px; + background-color: cadetblue; +} +body ul, body li, body a { + color: #b6e00e; + text-decoration: none; + font-weight: bold; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/dist/index.html b/02-TypeScript/15-store/followup/Itsik_B/form/dist/index.html new file mode 100644 index 000000000..f97e2e0f6 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/dist/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/dist/style.css b/02-TypeScript/15-store/followup/Itsik_B/form/dist/style.css new file mode 100644 index 000000000..8c027e2c7 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/dist/style.css @@ -0,0 +1,22 @@ +body { + width: 100vw; + height: 100vh; + background-color: lightgoldenrodyellow; +} +body h2, body a { + text-decoration: none; + font-size: 30px; +} +body form { + width: 100vh; + font-size: 26px; +} +body label, body input { + color: #0fbbbb; + padding: 6px 10px; +} +body .btn { + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/form.ts b/02-TypeScript/15-store/followup/Itsik_B/form/form.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/index.css b/02-TypeScript/15-store/followup/Itsik_B/form/index.css new file mode 100644 index 000000000..b8d64a4da --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/index.css @@ -0,0 +1,20 @@ +body { + border: 1px solid; + width: 100vw; + height: 100vh; +} +body nav { + display: flex; +} +body .mynav, body ul, body li { + width: 100%; + display: flex; + justify-content: space-between; + font-size: 28px; + background-color: cadetblue; +} +body ul, body li, body a { + color: rgb(182, 224, 14); + text-decoration: none; + font-weight: bold; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/index.scss b/02-TypeScript/15-store/followup/Itsik_B/form/index.scss new file mode 100644 index 000000000..28713dda6 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/index.scss @@ -0,0 +1,30 @@ +body{ + border: 1px solid; + width: 100vw; + height: 100vh; + + nav{ + display:flex; + + } +.mynav, ul, li{ + width: 100%; + display: flex; + justify-content: space-between; + font-size: 28px; + background-color: cadetblue; + + } + +ul, li, a{ + color:rgb(182, 224, 14); + text-decoration: none; + font-weight: bold; +} + + + + + + +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/style.css b/02-TypeScript/15-store/followup/Itsik_B/form/style.css new file mode 100644 index 000000000..6ba5cc016 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/style.css @@ -0,0 +1,22 @@ +body { + width: 100vw; + height: 100vh; + background-color: lightgoldenrodyellow; +} +body h2, body a { + text-decoration: none; + font-size: 30px; +} +body form { + width: 100vh; + font-size: 26px; +} +body label, body input { + color: rgb(15, 187, 187); + padding: 6px 10px; +} +body .btn { + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Itsik_B/form/style.scss b/02-TypeScript/15-store/followup/Itsik_B/form/style.scss new file mode 100644 index 000000000..4cd0eaa63 --- /dev/null +++ b/02-TypeScript/15-store/followup/Itsik_B/form/style.scss @@ -0,0 +1,28 @@ +body{ + width: 100vw; + height: 100vh; + background-color: lightgoldenrodyellow; + + h2, a{ + text-decoration: none; + font-size: 30px; + + } + + + form{ + width: 100vh; + font-size: 26px; + + } + label, input{ + color: rgb(15, 187, 187); + padding: 6px 10px; + } + +.btn{ + display: flex; + justify-content: center; + align-items: center; +} +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Karin-levi/control.ts b/02-TypeScript/15-store/followup/Karin-levi/control.ts new file mode 100644 index 000000000..c2431b2a8 --- /dev/null +++ b/02-TypeScript/15-store/followup/Karin-levi/control.ts @@ -0,0 +1,20 @@ +function handleAddItem(ev){ + try { + ev.preventDefault() + + const name = ev.target.elements.name.value; + const shape = ev.target.elements.color.value; + const color = ev.target.elements.price.value; + const price = ev.target.elements.category.valueAsNumber; + const serialNumber = ev.target.elements.size.valueAsNumber; + + + items.push(new Item(name,shape,color,price,serialNumber)); + console.log(items) + ev.target.reset() + + console.log(name) + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Karin-levi/dist/control.js b/02-TypeScript/15-store/followup/Karin-levi/dist/control.js new file mode 100644 index 000000000..87b2cc003 --- /dev/null +++ b/02-TypeScript/15-store/followup/Karin-levi/dist/control.js @@ -0,0 +1,17 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var shape = ev.target.elements.color.value; + var color = ev.target.elements.price.value; + var price = ev.target.elements.category.valueAsNumber; + var serialNumber = ev.target.elements.size.valueAsNumber; + items.push(new Item(name, shape, color, price, serialNumber)); + console.log(items); + ev.target.reset(); + console.log(name); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/Karin-levi/dist/helpers.js b/02-TypeScript/15-store/followup/Karin-levi/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Karin-levi/dist/index.js b/02-TypeScript/15-store/followup/Karin-levi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Karin-levi/dist/model.js b/02-TypeScript/15-store/followup/Karin-levi/dist/model.js new file mode 100644 index 000000000..8f530e3ee --- /dev/null +++ b/02-TypeScript/15-store/followup/Karin-levi/dist/model.js @@ -0,0 +1,14 @@ +var Item = /** @class */ (function () { + function Item(name, shape, color, price, serialNumber) { + this.name = name; + this.shape = shape; + this.color = color; + this.price = price; + this.serialNumber = serialNumber; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('sunglasses', 'oval', 'black', 100, '537fn68')); +console.log(items); diff --git a/02-TypeScript/15-store/followup/Karin-levi/dist/view.js b/02-TypeScript/15-store/followup/Karin-levi/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Karin-levi/helpers.ts b/02-TypeScript/15-store/followup/Karin-levi/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Karin-levi/index.html b/02-TypeScript/15-store/followup/Karin-levi/index.html new file mode 100644 index 000000000..67eefd8dc --- /dev/null +++ b/02-TypeScript/15-store/followup/Karin-levi/index.html @@ -0,0 +1,41 @@ + + + + + + + Store - Sunglasses + + + + + + + + +
                + + + + + + + + + + + +
                + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Karin-levi/index.ts b/02-TypeScript/15-store/followup/Karin-levi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Karin-levi/model.ts b/02-TypeScript/15-store/followup/Karin-levi/model.ts new file mode 100644 index 000000000..5817a20db --- /dev/null +++ b/02-TypeScript/15-store/followup/Karin-levi/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public shape: string, + public color: string, + public price: number, + public serialNumber: string + ){ + this.uid = uid() + } +} + +const items:Item[] = []; + +items.push(new Item('sunglasses', 'oval', 'black', 100, '537fn68')) +console.log(items) \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Karin-levi/view.ts b/02-TypeScript/15-store/followup/Karin-levi/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Kseniya/dist/dist/main.dev.js b/02-TypeScript/15-store/followup/Kseniya/dist/dist/main.dev.js new file mode 100644 index 000000000..ae33fddc2 --- /dev/null +++ b/02-TypeScript/15-store/followup/Kseniya/dist/dist/main.dev.js @@ -0,0 +1,47 @@ +"use strict"; + +var user = +/** @class */ +function () { + function User(email, firstName, lastName, password, age, gender) { + this.email = email; + this.firstName = firstName; + this.lastName = lastName; + this.password = password; + this.age = age; + this.gender = gender; + users.push(new user(email, firstName, lastName, password, age, gender)); + } + + return user; +}(); + +var users = []; // create a user to the store + +var createUser = function createUser(user) { + try { + user === null || user === void 0 ? void 0 : user.preventDefault(); + var email = user.target.elements.email.value; + var firstName = user.target.elements.firstName.value; + var lastName = user.target.elements.lastName.value; + var password = user.target.elements.password.value; + var age = user.target.elements.age.valueAsNumber; + var gender = user.target.elements.genderCategory.value; + users.push(new user(email, firstName, lastName, password, age, gender)); + console.log(users); + user.target.reset(); + } catch (error) { + console.error(error); + } +}; // users.push( +// new user("example@gmail.com", "Israel", "Israeli", "isr23451", 34, "Male") +// ); +// console.log(users); +// interface IUser { +// email: string; +// firstName: string; +// lastName: string; +// password: string; +// age: number; +// gender: string; +// } \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Kseniya/dist/main.js b/02-TypeScript/15-store/followup/Kseniya/dist/main.js new file mode 100644 index 000000000..3378c6074 --- /dev/null +++ b/02-TypeScript/15-store/followup/Kseniya/dist/main.js @@ -0,0 +1,20 @@ +var users = []; +// create a user to the store +var createUser = function (user) { + try { + user === null || user === void 0 ? void 0 : user.preventDefault(); + var email = user.target.elements.email.value; + var firstName = user.target.elements.firstName.value; + var lastName = user.target.elements.lastName.value; + var password = user.target.elements.password.value; + var age = user.target.elements.age.valueAsNumber; + var gender = user.target.elements.genderCategory.value; + var newUser = { email: email, firstName: firstName, lastName: lastName, password: password, age: age, gender: gender }; + users.push(newUser); + console.log(users); + user.target.reset(); + } + catch (error) { + console.error(error); + } +}; diff --git a/02-TypeScript/15-store/followup/Kseniya/main.html b/02-TypeScript/15-store/followup/Kseniya/main.html new file mode 100644 index 000000000..7343b581c --- /dev/null +++ b/02-TypeScript/15-store/followup/Kseniya/main.html @@ -0,0 +1,13 @@ + + + + + + + Store + + +
                WELCOME TO MY STORE
                + please register to the store + + diff --git a/02-TypeScript/15-store/followup/Kseniya/main.ts b/02-TypeScript/15-store/followup/Kseniya/main.ts new file mode 100644 index 000000000..35b93db58 --- /dev/null +++ b/02-TypeScript/15-store/followup/Kseniya/main.ts @@ -0,0 +1,33 @@ +interface IUser { + email: string; + firstName: string; + lastName: string; + password: string; + age: number; + gender: string; +} + +const users: IUser[] = []; + +// create a user to the store +const createUser = (user) => { + try { + user?.preventDefault(); + + const email = user.target.elements.email.value; + const firstName = user.target.elements.firstName.value; + const lastName = user.target.elements.lastName.value; + const password = user.target.elements.password.value; + const age = user.target.elements.age.valueAsNumber; + const gender = user.target.elements.genderCategory.value; + + const newUser: IUser = {email,firstName,lastName,password,age,gender} + users.push(newUser); + console.log(users); + user.target.reset(); + } catch (error) { + console.error(error); + } +}; + + diff --git a/02-TypeScript/15-store/followup/Kseniya/register.html b/02-TypeScript/15-store/followup/Kseniya/register.html new file mode 100644 index 000000000..5d7a90321 --- /dev/null +++ b/02-TypeScript/15-store/followup/Kseniya/register.html @@ -0,0 +1,28 @@ + + + + + + + Store - register + + + +
                WELCOME TO MY STORE
                + back to the store +
                register form
                +
                + + + + + + + +
                + + diff --git a/02-TypeScript/15-store/followup/Maxim Roz/controls.ts b/02-TypeScript/15-store/followup/Maxim Roz/controls.ts new file mode 100644 index 000000000..d70629f72 --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/controls.ts @@ -0,0 +1,22 @@ +function handleAddItem(ev){ + try { + ev.preventDefault() + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + const email = ev.target.elements.email.value; + + + items.push(new Item(name,color,price,category,size, sn,email)); + console.log(items) + ev.target.reset() + + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Maxim Roz/dist/controls.js b/02-TypeScript/15-store/followup/Maxim Roz/dist/controls.js new file mode 100644 index 000000000..b966e679c --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/dist/controls.js @@ -0,0 +1,19 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + var email = ev.target.elements.email.value; + items.push(new Item(name, color, price, category, size, sn, email)); + console.log(items); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/Maxim Roz/dist/helpers.js b/02-TypeScript/15-store/followup/Maxim Roz/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/Maxim Roz/dist/index.js b/02-TypeScript/15-store/followup/Maxim Roz/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Maxim Roz/dist/model.js b/02-TypeScript/15-store/followup/Maxim Roz/dist/model.js new file mode 100644 index 000000000..6720ec1e2 --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/dist/model.js @@ -0,0 +1,16 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn, email) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.email = email; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345", "max@gmail.com")); +console.log(items); diff --git a/02-TypeScript/15-store/followup/Maxim Roz/dist/view.js b/02-TypeScript/15-store/followup/Maxim Roz/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Maxim Roz/helpers.ts b/02-TypeScript/15-store/followup/Maxim Roz/helpers.ts new file mode 100644 index 000000000..95191593b --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Maxim Roz/index.html b/02-TypeScript/15-store/followup/Maxim Roz/index.html new file mode 100644 index 000000000..4201ce03b --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/index.html @@ -0,0 +1,17 @@ + + + + + + + Store + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Maxim Roz/index.ts b/02-TypeScript/15-store/followup/Maxim Roz/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/Maxim Roz/model.ts b/02-TypeScript/15-store/followup/Maxim Roz/model.ts new file mode 100644 index 000000000..87b85f732 --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/model.ts @@ -0,0 +1,20 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string, + public email: string + ) { + this.uid = uid(); + } + } + const items:Item[] = []; + + items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345","max@gmail.com")) + console.log(items) + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Maxim Roz/setProduct.html b/02-TypeScript/15-store/followup/Maxim Roz/setProduct.html new file mode 100644 index 000000000..d105fb343 --- /dev/null +++ b/02-TypeScript/15-store/followup/Maxim Roz/setProduct.html @@ -0,0 +1,36 @@ + + + + + + + + Store - set product + + + + + + + + +

                Set product

                + Store +
                + + + + + + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/Maxim Roz/view.ts b/02-TypeScript/15-store/followup/Maxim Roz/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/amit/control.ts b/02-TypeScript/15-store/followup/amit/control.ts new file mode 100644 index 000000000..b14bda520 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/control.ts @@ -0,0 +1,21 @@ +function handleAddItem(ev){ + try { + ev.preventDefault() + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + const gender = ev.target.elements.gender.value; + + items.push(new Item(name,color,price,category,size, sn, gender)); + console.log(items) + ev.target.reset() + + console.log(name) + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/amit/dist/control.js b/02-TypeScript/15-store/followup/amit/dist/control.js new file mode 100644 index 000000000..bd845f1d2 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/dist/control.js @@ -0,0 +1,19 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + var gender = ev.target.elements.gender.value; + items.push(new Item(name, color, price, category, size, sn, gender)); + console.log(items); + ev.target.reset(); + console.log(name); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/amit/dist/helpers.js b/02-TypeScript/15-store/followup/amit/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/amit/dist/index.js b/02-TypeScript/15-store/followup/amit/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/amit/dist/model.js b/02-TypeScript/15-store/followup/amit/dist/model.js new file mode 100644 index 000000000..e56ed3ce3 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/dist/model.js @@ -0,0 +1,16 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn, gender) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.gender = gender; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345", "women")); +console.log(items); diff --git a/02-TypeScript/15-store/followup/amit/dist/view.js b/02-TypeScript/15-store/followup/amit/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/amit/helpers.ts b/02-TypeScript/15-store/followup/amit/helpers.ts new file mode 100644 index 000000000..a61ca13d4 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} + diff --git a/02-TypeScript/15-store/followup/amit/index.html b/02-TypeScript/15-store/followup/amit/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/amit/index.ts b/02-TypeScript/15-store/followup/amit/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/amit/model.ts b/02-TypeScript/15-store/followup/amit/model.ts new file mode 100644 index 000000000..28ef73b65 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/model.ts @@ -0,0 +1,20 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string, + public gender: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345", "women")) + +console.log(items) diff --git a/02-TypeScript/15-store/followup/amit/setProduct.html b/02-TypeScript/15-store/followup/amit/setProduct.html new file mode 100644 index 000000000..771f75f89 --- /dev/null +++ b/02-TypeScript/15-store/followup/amit/setProduct.html @@ -0,0 +1,42 @@ + + + + + + + + Store - set product + + + + + + + + +

                Set product

                + Store +
                + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/amit/view.ts b/02-TypeScript/15-store/followup/amit/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/angela/dist/store.css b/02-TypeScript/15-store/followup/angela/dist/store.css new file mode 100644 index 000000000..97f26c7ca --- /dev/null +++ b/02-TypeScript/15-store/followup/angela/dist/store.css @@ -0,0 +1,9 @@ +body { + margin: 0; +} + +.popup { + height: 5rem; + width: 10rem; + background-color: lightblue; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/angela/dist/store.js b/02-TypeScript/15-store/followup/angela/dist/store.js new file mode 100644 index 000000000..4321c8431 --- /dev/null +++ b/02-TypeScript/15-store/followup/angela/dist/store.js @@ -0,0 +1,26 @@ +var itemProprties = /** @class */ (function () { + function itemProprties(brand, color, price, category, size) { + this.brand = brand; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + } + return itemProprties; +}()); +var storeItems = []; +function addStoreItems(ev) { + try { + var brand = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + storeItems.push(new itemProprties(brand, color, price, category, size)); + console.log(storeItems); + } + catch (error) { + console.error(error); + } +} +console.log(storeItems); diff --git a/02-TypeScript/15-store/followup/angela/setStoreItems.html b/02-TypeScript/15-store/followup/angela/setStoreItems.html new file mode 100644 index 000000000..f31e88990 --- /dev/null +++ b/02-TypeScript/15-store/followup/angela/setStoreItems.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/angela/store.html b/02-TypeScript/15-store/followup/angela/store.html new file mode 100644 index 000000000..1586f0876 --- /dev/null +++ b/02-TypeScript/15-store/followup/angela/store.html @@ -0,0 +1,26 @@ + + + + + + + store + + + + +
                + + + + + + +
                +
                you have add a new item
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/angela/store.scss b/02-TypeScript/15-store/followup/angela/store.scss new file mode 100644 index 000000000..bc2956b05 --- /dev/null +++ b/02-TypeScript/15-store/followup/angela/store.scss @@ -0,0 +1,8 @@ +body{ + margin: 0; +} +.popup{ + height: 5rem; + width: 10rem; + background-color: lightblue; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/angela/store.ts b/02-TypeScript/15-store/followup/angela/store.ts new file mode 100644 index 000000000..6b76148a9 --- /dev/null +++ b/02-TypeScript/15-store/followup/angela/store.ts @@ -0,0 +1,35 @@ +class itemProprties { + constructor( + public brand:string, + public color:string, + public price:number, + public category:string, + public size:number, + + ){ + + } +} + +const storeItems:itemProprties[]=[]; + +function addStoreItems(ev){ + try { + const brand = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + + storeItems.push(new itemProprties(brand,color,price,category,size)) + + console.log(storeItems) + } + + catch (error) { + console.error(error) + } +} + +console.log(storeItems) + diff --git a/02-TypeScript/15-store/followup/dorb/control.ts b/02-TypeScript/15-store/followup/dorb/control.ts new file mode 100644 index 000000000..a0a15cbe1 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/control.ts @@ -0,0 +1,19 @@ +function handleUser(ev:any){ + try { + ev.preventDefault(); + const name:string = ev.target.elements.name.value; + const adress:string = ev.target.elements.adress.value; + const email:string = ev.target.elements.email.value; + const phone:number = ev.target.elements.phone.valueAsNumber; + const password:number = ev.target.elements.password.valueAsNumber; + const color:any = ev.target.elements.color.value; + const img:string = ev.target.elements.img.value; + ev.target.reset(); + users.push(new User(name, adress, email, phone, password, color)) + console.log(users); + renderUser() + } catch (error) { + console.error(error) + } +} + diff --git a/02-TypeScript/15-store/followup/dorb/dist/control.js b/02-TypeScript/15-store/followup/dorb/dist/control.js new file mode 100644 index 000000000..0be1baca4 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/dist/control.js @@ -0,0 +1,19 @@ +function handleUser(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var adress = ev.target.elements.adress.value; + var email = ev.target.elements.email.value; + var phone = ev.target.elements.phone.valueAsNumber; + var password = ev.target.elements.password.valueAsNumber; + var color = ev.target.elements.color.value; + var img = ev.target.elements.img.value; + ev.target.reset(); + users.push(new User(name, adress, email, phone, password, color)); + console.log(users); + renderUser(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/dorb/dist/helper.js b/02-TypeScript/15-store/followup/dorb/dist/helper.js new file mode 100644 index 000000000..2be73df85 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/dist/helper.js @@ -0,0 +1,4 @@ +// Create Uniq ID +function uID() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/dorb/dist/index.js b/02-TypeScript/15-store/followup/dorb/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/dorb/dist/model.js b/02-TypeScript/15-store/followup/dorb/dist/model.js new file mode 100644 index 000000000..1a9727dfd --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/dist/model.js @@ -0,0 +1,15 @@ +var User = /** @class */ (function () { + function User(name, adress, email, phone, password, color, img) { + this.name = name; + this.adress = adress; + this.email = email; + this.phone = phone; + this.password = password; + this.color = color; + this.img = img; + this.uID = uID(); + } + return User; +}()); +var users = []; +console.log(users); diff --git a/02-TypeScript/15-store/followup/dorb/dist/style.css b/02-TypeScript/15-store/followup/dorb/dist/style.css new file mode 100644 index 000000000..585566305 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/dist/style.css @@ -0,0 +1,10 @@ +body { + background-color: #9dbd9d; +} + +.userDiv { + width: 250px; + background-color: azure; + margin: 2px; + padding: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/dorb/dist/view.js b/02-TypeScript/15-store/followup/dorb/dist/view.js new file mode 100644 index 000000000..cde44611e --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/dist/view.js @@ -0,0 +1,16 @@ +function renderUser() { + try { + for (var i = 0; i < users.length; i++) { + var root = document.querySelector(".root"); + root.innerHTML += "
                Name:" + users[i].name + "
                "; + root.innerHTML += "
                Adress:" + users[i].adress + "
                "; + root.innerHTML += "
                Email:" + users[i].email + "
                "; + root.innerHTML += "
                Phone:" + users[i].phone + "
                "; + root.innerHTML += ""; + root.innerHTML += "
                Favorite Color:" + users[i].color + "
                "; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/dorb/helper.ts b/02-TypeScript/15-store/followup/dorb/helper.ts new file mode 100644 index 000000000..f8c4f41c4 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/helper.ts @@ -0,0 +1,5 @@ + +// Create Uniq ID +function uID(){ + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/dorb/index.html b/02-TypeScript/15-store/followup/dorb/index.html new file mode 100644 index 000000000..2c36fd475 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/index.html @@ -0,0 +1,29 @@ + + + + + + + Login + + + + + + + + + +
                + + + + + + + + +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/dorb/index.ts b/02-TypeScript/15-store/followup/dorb/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/dorb/model.ts b/02-TypeScript/15-store/followup/dorb/model.ts new file mode 100644 index 000000000..8b73451ac --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/model.ts @@ -0,0 +1,18 @@ +class User { + uID:string + constructor( + public name:string, + public adress:string, + public email:string, + public phone:number, + public password:number, + public color:any, + public img:any + ){ + this.uID = uID(); + } + +} + +const users:User[] = []; +console.log(users); diff --git a/02-TypeScript/15-store/followup/dorb/style.scss b/02-TypeScript/15-store/followup/dorb/style.scss new file mode 100644 index 000000000..f2561cb0a --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/style.scss @@ -0,0 +1,9 @@ +body{ + background-color: rgb(157, 189, 157); +} +.userDiv{ + width: 250px; + background-color: azure; + margin: 2px; + padding: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/dorb/view.ts b/02-TypeScript/15-store/followup/dorb/view.ts new file mode 100644 index 000000000..b9f410481 --- /dev/null +++ b/02-TypeScript/15-store/followup/dorb/view.ts @@ -0,0 +1,16 @@ +function renderUser{ + try { + for(let i=0; iName:${users[i].name}
                ` + root.innerHTML+= `
                Adress:${users[i].adress}
                ` + root.innerHTML+= `
                Email:${users[i].email}
                ` + root.innerHTML+= `
                Phone:${users[i].phone}
                ` + root.innerHTML+= `` + root.innerHTML+= `
                Favorite Color:${users[i].color}
                ` + } + } catch (error) { + console.error(error); + + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/itayAmosi/control.ts b/02-TypeScript/15-store/followup/itayAmosi/control.ts new file mode 100644 index 000000000..f619c87a4 --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/control.ts @@ -0,0 +1,24 @@ +function handleAddItem(event){ + try { + event.preventDefault() + + const name =event.target.elements.name.value; + const price = event.target.elements.price.value; + const type = event.target.elements.type.value; + const size = event.target.elements.size.value; + const serial = event.target.elements.serial.value; + + + products.push(new Product(name,price,type,size,serial)); + console.log(products) + event.target.reset() + + console.log(name) + } catch (error) { + console.error(error) + } +} + + + + diff --git a/02-TypeScript/15-store/followup/itayAmosi/dist/control.js b/02-TypeScript/15-store/followup/itayAmosi/dist/control.js new file mode 100644 index 000000000..7517799f6 --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/dist/control.js @@ -0,0 +1,17 @@ +function handleAddItem(event) { + try { + event.preventDefault(); + var name = event.target.elements.name.value; + var price = event.target.elements.price.value; + var type = event.target.elements.type.value; + var size = event.target.elements.size.value; + var serial = event.target.elements.serial.value; + products.push(new Product(name, price, type, size, serial)); + console.log(products); + event.target.reset(); + console.log(name); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/15-store/followup/itayAmosi/dist/helpers.js b/02-TypeScript/15-store/followup/itayAmosi/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/itayAmosi/dist/index.js b/02-TypeScript/15-store/followup/itayAmosi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/itayAmosi/dist/model.js b/02-TypeScript/15-store/followup/itayAmosi/dist/model.js new file mode 100644 index 000000000..4169d74c5 --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/dist/model.js @@ -0,0 +1,14 @@ +var Product = /** @class */ (function () { + function Product(name, price, type, size, serial) { + this.name = name; + this.price = price; + this.type = type; + this.size = size; + this.serial = serial; + this.uid = uid(); + } + return Product; +}()); +var products = []; +// products.push(new Product('Zara-pants',350,"pants",38,"54dfg545963sa")) +// console.log(products) diff --git a/02-TypeScript/15-store/followup/itayAmosi/dist/style.css b/02-TypeScript/15-store/followup/itayAmosi/dist/style.css new file mode 100644 index 000000000..3e73c241b --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/dist/style.css @@ -0,0 +1,18 @@ +h1 { + align-items: center; + text-align: center; + color: forestgreen; +} + +.add { + align-items: center; + text-align: center; + display: grid; + justify-content: center; + font-size: 3rem; +} + +.setProduct { + display: grid; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/itayAmosi/dist/view.js b/02-TypeScript/15-store/followup/itayAmosi/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/itayAmosi/helpers.ts b/02-TypeScript/15-store/followup/itayAmosi/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/15-store/followup/itayAmosi/index.html b/02-TypeScript/15-store/followup/itayAmosi/index.html new file mode 100644 index 000000000..40878dc9d --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/index.html @@ -0,0 +1,22 @@ + + + + + + + + My Store + + + + + + + + + +

                My Store

                +
                Add product+
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/itayAmosi/index.ts b/02-TypeScript/15-store/followup/itayAmosi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/itayAmosi/model.ts b/02-TypeScript/15-store/followup/itayAmosi/model.ts new file mode 100644 index 000000000..55a488e8f --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/model.ts @@ -0,0 +1,17 @@ +class Product { + uid: string; + + constructor( + public name: string, + public price: number, + public type: string, + public size: number, + public serial: string + ) { + this.uid = uid(); + } +} +const products:Product[] = []; + +// products.push(new Product('Zara-pants',350,"pants",38,"54dfg545963sa")) +// console.log(products) diff --git a/02-TypeScript/15-store/followup/itayAmosi/setStore.html b/02-TypeScript/15-store/followup/itayAmosi/setStore.html new file mode 100644 index 000000000..1b6eb7dbd --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/setStore.html @@ -0,0 +1,38 @@ + + + + + + + + Store - set product + + + + + + + + + + +

                Add a Product

                +
                + + Store +
                + + + + + +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/itayAmosi/style.css b/02-TypeScript/15-store/followup/itayAmosi/style.css new file mode 100644 index 000000000..3e73c241b --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/style.css @@ -0,0 +1,18 @@ +h1 { + align-items: center; + text-align: center; + color: forestgreen; +} + +.add { + align-items: center; + text-align: center; + display: grid; + justify-content: center; + font-size: 3rem; +} + +.setProduct { + display: grid; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/itayAmosi/style.scss b/02-TypeScript/15-store/followup/itayAmosi/style.scss new file mode 100644 index 000000000..6cf62e7b3 --- /dev/null +++ b/02-TypeScript/15-store/followup/itayAmosi/style.scss @@ -0,0 +1,19 @@ +h1{ + align-items: center; + text-align: center; + color:forestgreen; +} + + +.add{ + align-items: center; + text-align: center; + display: grid; + justify-content: center; + font-size: 3rem; +} + +.setProduct{ + display: grid; + justify-content: center; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/itayAmosi/view.ts b/02-TypeScript/15-store/followup/itayAmosi/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/15-store/followup/noa-meillet/addItems.html b/02-TypeScript/15-store/followup/noa-meillet/addItems.html new file mode 100644 index 000000000..2ba893595 --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/addItems.html @@ -0,0 +1,40 @@ + + + + + + + Store + + + + + + +

                Add products

                + Store +

                NOA Store

                +
                + +
                +
                +
                +
                +
                + +
                +
                + + diff --git a/02-TypeScript/15-store/followup/noa-meillet/control.ts b/02-TypeScript/15-store/followup/noa-meillet/control.ts new file mode 100644 index 000000000..9e22d518c --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/control.ts @@ -0,0 +1,131 @@ +function addItem(event) { + try { + event.preventDefault(); + const name = event.target.elements.name.value; + const departement = event.target.elements.departement.value; + const type = event.target.elements.type.value; + const price = event.target.elements.price.valueAsNumber; + const image = event.target.elements.image.value; + clothesShopArr.push(new Item(name, departement, type, price, image)); + showStore(clothesShopArr); + event.target.reset(); + } catch (error) { + console.error(Error); + } +} + +function showStore(clothesShopArr: Item[]): void | false { + try { + if (store && clothesShopArr.length != 0) { + store.innerHTML=``; + for (let i = 0; i < clothesShopArr.length; i++) { + store.innerHTML += `
                + image +

                ${clothesShopArr[i].name}

                +
                ${clothesShopArr[i].department}
                +
                ${clothesShopArr[i].type}
                +

                ${clothesShopArr[i].price}

                +
                `; + } + } else { + throw new Error(`there is no item in the store`); + } + } catch (error) { + console.error(error); + return false; + } + } + + function getAllItemInType(clothesArr: Item[]): void | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + let typeGetFromUser; + while (!typeGetFromUser) { + typeGetFromUser = prompt(`Enter the type of item you will want to buy:`); + } + const chosenItemsArr = clothesArr.filter( + (item) => item.type == typeGetFromUser + ); + if (chosenItemsArr.length == 0) + throw new Error( + `items from type ${typeGetFromUser} is availble in our store` + ); + else { + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                +
                `; + } + } + } + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                Item from this type is availble in our store

                `; + return false; + } + } + + function sortArrByPrice(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = clothesArr.sort((a, b) => a.price - b.price); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < sortedArr.length; i++) { + store.innerHTML += `
                + image +

                ${sortedArr[i].name}

                +
                ${sortedArr[i].department}
                +
                ${sortedArr[i].type}
                +

                ${sortedArr[i].price}

                +
                `; + } + } + return sortedArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } + } + + function getTheCheapestItem(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = sortArrByPrice(clothesArr); + let chosenItemsArr; + if (sortedArr) { + chosenItemsArr = sortedArr.filter( + (item) => item.price == sortedArr[0].price + ); + if (chosenItemsArr.length == 0) + throw new Error(`there is no item in the store`); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                +
                `; + } + } + } + return chosenItemsArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } + } diff --git a/02-TypeScript/15-store/followup/noa-meillet/dist/control.js b/02-TypeScript/15-store/followup/noa-meillet/dist/control.js new file mode 100644 index 000000000..e77b1a2d1 --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/dist/control.js @@ -0,0 +1,106 @@ +function addItem(event) { + try { + event.preventDefault(); + var name = event.target.elements.name.value; + var departement = event.target.elements.departement.value; + var type = event.target.elements.type.value; + var price = event.target.elements.price.valueAsNumber; + var image = event.target.elements.image.value; + clothesShopArr.push(new Item(name, departement, type, price, image)); + showStore(clothesShopArr); + event.target.reset(); + } + catch (error) { + console.error(Error); + } +} +function showStore(clothesShopArr) { + try { + if (store && clothesShopArr.length != 0) { + store.innerHTML = ""; + for (var i = 0; i < clothesShopArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + clothesShopArr[i].name + "

                \n
                " + clothesShopArr[i].department + "
                \n
                " + clothesShopArr[i].type + "
                \n

                " + clothesShopArr[i].price + "

                \n
                "; + } + } + else { + throw new Error("there is no item in the store"); + } + } + catch (error) { + console.error(error); + return false; + } +} +function getAllItemInType(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var typeGetFromUser_1; + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); + } + var chosenItemsArr = clothesArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + if (chosenItemsArr.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); + else { + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n
                "; + } + } + } + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                Item from this type is availble in our store

                "; + return false; + } +} +function sortArrByPrice(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr = clothesArr.sort(function (a, b) { return a.price - b.price; }); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < sortedArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + sortedArr[i].name + "

                \n
                " + sortedArr[i].department + "
                \n
                " + sortedArr[i].type + "
                \n

                " + sortedArr[i].price + "

                \n
                "; + } + } + return sortedArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} +function getTheCheapestItem(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr_1 = sortArrByPrice(clothesArr); + var chosenItemsArr = void 0; + if (sortedArr_1) { + chosenItemsArr = sortedArr_1.filter(function (item) { return item.price == sortedArr_1[0].price; }); + if (chosenItemsArr.length == 0) + throw new Error("there is no item in the store"); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n
                "; + } + } + } + return chosenItemsArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} diff --git a/02-TypeScript/15-store/followup/noa-meillet/dist/index.js b/02-TypeScript/15-store/followup/noa-meillet/dist/index.js new file mode 100644 index 000000000..4f84db97c --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/dist/index.js @@ -0,0 +1 @@ +showStore(clothesShopArr); diff --git a/02-TypeScript/15-store/followup/noa-meillet/dist/model.js b/02-TypeScript/15-store/followup/noa-meillet/dist/model.js new file mode 100644 index 000000000..d88f7a46d --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/dist/model.js @@ -0,0 +1,36 @@ +var Item = /** @class */ (function () { + function Item(name, department, type, price, image) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + this.image = image; + } + return Item; +}()); +var shirtLevisW = new Item("Levis-Shirt", "women", "shirt", 19.9, "data:image/jpeg;base64,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"); +var shirtLevisM = new Item("Levis-Shirt", "men", "shirt", 19.9, "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBEVEhgVEhESERgSGhISEhgREBERGBgUGBkZGhgcGhgcIS4lHB4rIRgZJjgmKy8xNTY1GiQ7QDszPy40NjEBDAwMEA8QHhISHjYsISs0NDQxND81MToxNDQ0NzQ0NDQ0NDQ6NDQ0NzQ0NDQxNDQ0MTQ0NDE0NT40NDU0NDE0Pf/AABEIAQMAwgMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAAAQIDBAYHBQj/xABHEAACAQIDAwkBDAcHBQAAAAABAgADEQQSIQUGMQcTIkFRYXGBoZEyQlJicoKSsbLBwtEUIzRzotLwJDM1Q6Ph8RUlU2Pi/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAJBEBAAICAgIBBQEBAAAAAAAAAAECAxEhMRIyUQQiQWGBkUL/2gAMAwEAAhEDEQA/AOsxIiBMCJIgJIkSRAREQEkwIgBETSd/95WoWw9NijMueqykhlRiQqqRwJsxJ4gAfC0iZ0mI3OmzYnbGHRshfM/DJTU1Gv2ELfL52mNT3mwufI7tSPD9aoVb97AkL5kTkeCx+Vr06jqbEaEdflwldVm4l8xPEmU85aRjdyB9dYnL9x9vvSrJh6jE0qhyoGN8jt7nL2KToRw1v236hLxO1LV8Z0RESVSIiAMiJMCIiICIiBRJiICBJEQEkSIgTERAmJEmAnDd/wCsG2jXBfUMot2BUVQPT1nYtvu64PENTIV1o4hkJuLMKbFTprxtOBYti1RmqF3AzL7sKxa1lZmKtexsT224jjKXaY45XsCguCWFj32np1WuNCp7lYGeZgsIzUs3WzFV7gB+Zl3C4B+bU5emWbnLpkULfolXDEsbWvcC3fMtunXTJwTMaqZdGD0wvyswt62nem4zgmDrinWpucp5t0ezEhSysCoJ6hcDWdn3c2i+JwqVqiCmzmoCqkkdB2S4J6jlvNMcsMtZ7enERNGJERASJMiBMiIgIiIFMSJMBJEgQIExEQJiRJgIiIFFWmrqyOMyurIw7VYWI9hnz/t/CGhXdCCwR6iakXORit/OwPnPoScZ5RhTO0KiKbMgpVH4G5dFzWvw9yh+dK2jhek6l42zcWWCKERQDdiXYEHuFrEezjM3aGONsq6X4kaTzEdChC86D1HMmUfw6ysi4Fz4zHTp8pe5u/u5iMWjMmVUzc27ObW6Nz0ffCx4DtHiOvYDCrSpJTS5WmqoCeJsOJ7zx855O5GFCYCiLWLhqp+eSV/hy+ye9Nq1iOXNa024IiJZQiIgIiICRJkQERECmJIiAEQIgJMRAREQEQTKGYwMHbu0mw9CpUSk1dkBYKnqT12HE2ubCfP+1toVMRXfEOQXqHMSAACMoUADssAPKfQ+TX185p23twKFdi9Bhhna5Zcl6bMevKPcE9ZXTuvrKWiZXrMR25NRqsSLgL4X/OehTTUdfjPfxW4OPS2WmtS3XTqIQfDMQfSZOzdx8e5GemtEdZquvoqkk+kpMT8Nomsfl0ndjEI+Do5CDkSnTa3UyooYH6/MT1Jg7G2dTw1FaSEsFuWY8Wc+6Y/l1ACZ01jpzz3wRESUEREBIkxAiIiAiIgUyRIiBMSJIgSIkSYCUs0O9gT2azDpuTqeuBl3iUIfzk5uHfCQiRlnk7b26MOyBqTOHBKsrKoup1Go719s81N9KfXQcfJdG+u0rNqxOplvT6XNePKsbj+NpBlV5rtPe/DHitZfFFP1NLqb14M++dfGk/3Xjyr8k/TZY/5n/HvKZXPJobfwjkBa63PUysn2gJ6VOqre5ZWtxysDwNjJiYnplalq9xMfxciReLyVExEQERECIiTAiIiBTEQIEiJF5IMBERAsY5uhbtI9ksUz90u4kXuOwevH8pYpm2vVwPdCYZKm0oR7qvgDMfGuUpsbaqpPiBr/AF4yabdFe4AekDA3swufCswHSokVR4DR/wCEk/NE1ypVw1XD0FaqtN6IYVFNOp0gSABmC9YUa983koHpkNwcMrd6sCD6Ga3gtzUCg1qrM1tRTsqjzIJPjpM7VmZ4d/02elaavMxqdxr9xytY18CUaotJGUKrIqtQpEG1ijKCrXPfmte4mLiNmYVGRgRUTFVMOtEZnBWkzA1S1jc6MFF+GbtmdtDc8Zb0Khv8GrbXwYAW8x5zxcLuti3PSQUQCQTUI1t2KtyfHQd8rMTvp0Uti8dxlmI+Py9OhgMOa1VVR1agyCmUZ2BDHNdguZiRfLexUWF5f2fTcbQFNrfqg73vmYhlNrn5/Cw8BMZ9zKqi9OvTZhwBV6fsYE/VMvdLZ1SnWqmqjIyKqjNrfO1yQeB9yNZMRO4jSt7U8LWi++Na/O/ltrSJbq1LadslGmryl4RKV4SqEEREBIiICIiBTEiTAREXgTJkRAs00JJI1175Q1Mg8Lg8ROa8qOERMRQemvNs6VCzIShLKy66cD0urtnk7L3jx9MALi6rAdVUrX07LuCfWVm0R20rSbRuHVtrNkw9RuISm7i/xVJtKEPQHgPqmj4nffEmm1OpSp1OcVqeZM1NhmFibdIG172sJuWEfOqH4QRvKwMRaLdItWa8S9TgoHhLjcJbfiB4StuEsorXhIMIdIhIIkiIGMl2Yk6WJA8pkATxBvFgldg+JphkZ0ZQWZgysVYWUHUEESnEb4YFASGepbqSk4J8M2Uesjyj5Tq0/hsIEmYuzMcteilVFZVqLmAe2YdVjYkX06iZlSVSRJkQEREBERApiIgIiIEiIEQOd8rdPoYZ+xqye0IfwzSMCeE6DyrrfC0j2VT7Cjf7TnVBsoExv26MU8Pd2bQD1ypANqWIbX4tNjedA3e6VNPi00+oD85oW6a58VUHZhcW3oifjm+7sD9QG7QB5Af8ycfSMs/c9hTdvZLz8Jj0OJmQ81Yop8JUZTTlcAJMCIHC8QpGKrZuPO1y1+3nHv6z0aq9CTvbQ5vaFUWsHIqL4OAx/iLTHFa62nNb2dlZ3R1fdZMuCoD4gb6RJ++etPK3YcNg6BHwFXzW6n1Bnqzojpx27kkRElBERAREQKIkSYExIiBMGIgaDyq1uhhk6merUPzVUD7Zmi16QKXHEa2m4cqtT9Zhl7ErN9JkH4ZqtNbppMLzy6sUfa2Lk2pq+JrjrOHZF7gzqG/DN42VSyYdF7FF/G1zNK5POjiMQ3WtFQPlM4A9QJvYPRtNKerLJ7SyMMNJfeW6A0lbS7NCGViWxLiwKhBMSYHJeUWsDtAKPeUqak95Z2+phPBwzXaw6rXmw8otC2PDn/MpUz5qzqfQCa/RHSNha9uE57ezrx+rpfJ9iiaT0ib80wdfkvfT6SsfnTbZz3k8qWxNRL+7pZvouv8APOhTak7q5skatKZERLKEREBERAtwIiBMRECYkRA5nyqftFD92/2zNc2e9xabTyrU+nhn7RWQ+RQj6zNR2e1gT23mF+3Xin7YbNubpiHt79FB8nDfdN8XUzQNz9a7t8FVH0m/+Z0KgunjL09WWX2llUuEkyBE0ZEqQSJUsCoiQDJk5QYGi8p2z706VccabGm/yHFwT4MgHzzNFw41nWt8MNnwGIUDMRTeoo+MnTX1WcgwlS8wyRy6cM8abZuE3/cLdtKoPVfynT5y3cL/ABHs/V1fwzqU0x9Ms3smRES7IiIgIiIFuIiAkyIgTEiTA0/lMwufBB+ujURvmvdD6lZzjAHQidg3to58BiF/9bsPFBnH2ZxnAPrMckcujDPGm57nJ0na3FlX6Iv+Kb/R4TSNzKZNMkAdJ2b0UfdN4oo1uE0p6wpkndpXIBlfNmQKRlmZKlkc2ZWEMIQpkychlWQ/0IStVEDKVOoYFT4EWM4Hs8FbK3FeifEaGfQOUzg20KRpYysh/wAurVA+SXJX+EiZ5IbYZ5ltnJ9T/t7n4NGp6uk6bOc8nIvjKx7Kdva6/lOjSadKZfYiIl2ZERAREQLRgREBERAmIiBibWW+HrC170qw7feNOEYI2YeU+g1Gs4HURVquF4K9RV+SGIHpM8jbD287bm06yOlOnVrUgim/N16ihizs1yqkAEAgeUx02rijxxeKPjiq5/FMzbuBLrnTUpe47V6/MfnPHoHSXxzE1VyV1Z6H/UsV1YvFDwxVcfilQ2xjerG4weGMxP8APMO8gserSX0oyztvHX/bsb2ftmJ/nlX/AFvGG/8AbcZbXjjcT/PPNV7MCerpcbcOHraW6lUk2vpx00/5kD0F2ti20/S8WR34rEH8Uq/SKnXUqN8qrUb6zMGjMgyYCpVYAnM2gJ90eoTbN8cFzO0Qvw6GEc63uQnNk/6U0+rqpHaCB7Jum8+0ExeMD0blKVOnh1Y+/wAhYsw+LdrDttfrlMmtNMcT5Nl5M2/tFfvRT7GH5idHnOuTGmOernrCUwPBmJP2VnRZFPVXJ7EREsoREQEREC1IiIEiIiAiIgRUYhWI4gMR4gaT5+znN4z6BqJmUrcjMCtxxFxa/rPn+vTKO6E9Kmz0zprdGKt6gzO7bFPbLz9EW7r+ZsJ4WNpKlRgosDZrdl+PrPQx9Y8yrAmyPSz20uhNtfMiY+3Kdqi6EXS9+0XNjIx8Svl5qwpQ5PbaVGUNOhzvbwGzS2ysdiNLI+Bpr23FTpj/AFKf9Cawp1nasBsDJu5UpsvTrUa2LYFbHOVFSkCPhBUpr4rOKDjKjIpzIvLCy8DLCmoL2HwiB5Xnv4EgNl7AJ4eHXNUQHXpeP9cZvO3dlJQp4R1Uh8RTqPWuxIJU08lgfc6PbTs8Zjl5lti4bFyaf3tbvpp6N/vOhzQuTGgx5+qRZTkpr8oXZvKxX2zfZNPVnk9pIiJZQiIgIiIFmIiAiIgSIgRACcn353frUsU1enTd6dQmqzqtwjOWLqbcBexBPbbqnWJIa2vZqfCVtXcLVtNZ3D55QAl6b3CVM1vktrcd6k+gmHtCvWZkSsBmoKKakAjOtyQ3fe/ETGbH1MxYPcEswzAONSTpfxl7EYx6oXnMt0XICqgaXJ19sVrMS0teLQskzP3f2Z+k4yjhz7mq6q+pH6tQXqajgciPbvnnsZ0DkewOfFVq5B/U01RezNWY6+IWmw+fNJZOuVKYZWTQBwycNLEWnyrTUiwIsQACDxBtPq4GfMW3KOTGYhPgV8Smnxarj7pEIY6y8DpLAl1eEsl7e5+HpNi716vMpTpu7NlLXN1UKAOs3JHyZ7m8G1hicUGRHVVVKFBD0myr8Ue+Ynhr1cZTyY7GTE1qwqF8iIjEI+S7FyBc9lg3Cdb2TsLC4YWoUVQ9bG7ufF2ufK8ytWZlpF4rH7WN1dnNh8IiOMrtepUBto7a5fIWHlPYiJMRqNM5nc7IiJKCIiAiIgWZERAmIEQEmRJEBLG0KmSjUf4CVH+ijH7pfnk721Smz8U40K0MRbxKMB9cD5yRdAO4CZIGksqBL3VLpQZ2nknwGTZ+cg3xNSpU1+ClqSjw6DN86cTd7AnsBPsE+lNh4LmMLRo/+KnSpm/EsqgMT3k3PnIkZ0+b98aWTaWKHbXrv9J2f8U+kJ888olEptTFA9dRXHg9NH/FIhDXxL6LpMdJlIPvkwl1HkYpdHFP2mgns5w/eJ02aJyQ4crgajkf3tZyNPeqiL9eb1m9yJ7QRESAiIgIiICIiBYiTIgSIiICTAEQE1jlKxOTZdftqc1SHz3QH0vNnnO+WTGWw1CiDrUqNUI+JTQj7VRfZA5GsrZpQBKpdL1t1sB+kY3D0TweomfS90QF3HmiMPOfRZM4vyRYYvtBntcUqNQ3tezMyIvgbF/WdoErKEzhfK6P+5n9zQPn0x907pOFcr3+KH9zh/xyIGmIdZlodRMNUmSy9ctCX0NuXg+a2fhltY82rt8qp0z9ue3MDYDXweHPC9HDn/TWZ8qgiIgIiICIiAiIgWYERAREQJiIgTOP8sbn9MpC+goAgdmZ3ze3KvsiJMJhz5ZcPGIlh0zkYQc5jDb3mFHrX/ITqgiJWeyScN5Wf8Uf91Q+y0REIaWOEu0+BiJZL6X2P+zUf3VH7CzLiJRBERAREQEREBERA//Z"); +var skirtW = new Item("Green-Skirt", "women", "skirt", 29.9, "data:image/jpeg;base64,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"); +var jeansDizzleM = new Item("Dizzle-Jean", "men", "pants", 59.9, "data:image/jpeg;base64,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"); +var shirtPackB = new Item("Shirts-Pack", "baby", "shirt", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU"); +var blouseW = new Item("White-Blouse", "women", "shirt", 15.9, "data:image/jpeg;base64,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"); +var sweatshirtNikeK = new Item("Nike-Sweatshirt", "kids", "sweatshirt", 49.9, "data:image/jpeg;base64,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"); +var dressW = new Item("Pink-Dress", "women", "dress", 39.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU"); +var denimJacketM = new Item("DenimJacket", "men", "outwear", 79.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU"); +var activeSetNikeW = new Item("Nike-ActiveSet", "women", "pants", 19.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU"); +var coatGapB = new Item("Yellow-Coat", "baby", "outwear", 49.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU"); +var hairAccesories = new Item("Hair-Clips", "women", "accesories", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU"); +var clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/15-store/followup/noa-meillet/dist/style.css b/02-TypeScript/15-store/followup/noa-meillet/dist/style.css new file mode 100644 index 000000000..94b21cfba --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/dist/style.css @@ -0,0 +1,68 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/noa-meillet/dist/view.js b/02-TypeScript/15-store/followup/noa-meillet/dist/view.js new file mode 100644 index 000000000..75a2b907d --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/dist/view.js @@ -0,0 +1 @@ +var store = document.querySelector(".store"); diff --git a/02-TypeScript/15-store/followup/noa-meillet/index.html b/02-TypeScript/15-store/followup/noa-meillet/index.html new file mode 100644 index 000000000..c8cefa0b9 --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/index.html @@ -0,0 +1,31 @@ + + + + + + + Store + + + + + + + +
                +

                Noa Store

                +
                +
                + + + + + Add a product +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/noa-meillet/index.ts b/02-TypeScript/15-store/followup/noa-meillet/index.ts new file mode 100644 index 000000000..7351b67e8 --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/index.ts @@ -0,0 +1 @@ +showStore(clothesShopArr); \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/noa-meillet/model.ts b/02-TypeScript/15-store/followup/noa-meillet/model.ts new file mode 100644 index 000000000..b2ed342da --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/model.ts @@ -0,0 +1,110 @@ +class Item { + public constructor( + public name: string, + public department: string, + public type: string, + public price: number, + public image: string + ) {} + } + + const shirtLevisW = new Item( + "Levis-Shirt", + "women", + "shirt", + 19.9, + "data:image/jpeg;base64,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" + ); + const shirtLevisM = new Item( + "Levis-Shirt", + "men", + "shirt", + 19.9, + "data:image/jpeg;base64,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" + ); + const skirtW = new Item( + "Green-Skirt", + "women", + "skirt", + 29.9, + "data:image/jpeg;base64,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" + ); + const jeansDizzleM = new Item( + "Dizzle-Jean", + "men", + "pants", + 59.9, + "data:image/jpeg;base64,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" + ); + const shirtPackB = new Item( + "Shirts-Pack", + "baby", + "shirt", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU" + ); + const blouseW = new Item( + "White-Blouse", + "women", + "shirt", + 15.9, + "data:image/jpeg;base64,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" + ); + const sweatshirtNikeK = new Item( + "Nike-Sweatshirt", + "kids", + "sweatshirt", + 49.9, + "data:image/jpeg;base64,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" + ); + const dressW = new Item( + "Pink-Dress", + "women", + "dress", + 39.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU" + ); + const denimJacketM = new Item( + "DenimJacket", + "men", + "outwear", + 79.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU" + ); + const activeSetNikeW = new Item( + "Nike-ActiveSet", + "women", + "pants", + 19.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU" + ); + const coatGapB = new Item( + "Yellow-Coat", + "baby", + "outwear", + 49.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU" + ); + const hairAccesories = new Item( + "Hair-Clips", + "women", + "accesories", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU" + ); + + const clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, + ]; + diff --git a/02-TypeScript/15-store/followup/noa-meillet/style.css b/02-TypeScript/15-store/followup/noa-meillet/style.css new file mode 100644 index 000000000..cb2f98ea9 --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/style.css @@ -0,0 +1,72 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/noa-meillet/style.scss b/02-TypeScript/15-store/followup/noa-meillet/style.scss new file mode 100644 index 000000000..9ac3129e0 --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/style.scss @@ -0,0 +1,70 @@ +body{ + margin: 0; +} +.tittle{ + padding: 5px; + background-color: black; + + h2{ + color: azure; + margin: auto; + width: max-content; + } +} + +.function{ + display: flex; + flex-direction:row; + justify-content: space-around; + + button{ + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; + } +} + +.store{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__item{ + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__detail{ + padding: 0 5px; + margin: 0; + } + } +} +#image{ + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName{ + width: 100%; +} + +#itemDepartment{ + color: grey; +} + +#itemType{ + color: grey; +} + +#itemPrice{ + width: 100%; +} diff --git a/02-TypeScript/15-store/followup/noa-meillet/view.ts b/02-TypeScript/15-store/followup/noa-meillet/view.ts new file mode 100644 index 000000000..dadb6d4fa --- /dev/null +++ b/02-TypeScript/15-store/followup/noa-meillet/view.ts @@ -0,0 +1 @@ +const store: HTMLHeadingElement | null = document.querySelector(".store"); diff --git a/02-TypeScript/15-store/followup/shlomi.samai/control.ts b/02-TypeScript/15-store/followup/shlomi.samai/control.ts new file mode 100644 index 000000000..26e36b9d2 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/control.ts @@ -0,0 +1,48 @@ +function handleAddItem(ev){ +try { + + ev.preventDefault() +debugger; + const name=ev.target.elements.name.value; + const address=ev.target.elements.address.value; + const email=ev.target.elements.email.value; + const phone=ev.target.elements.phone.valueAsNumber + const password=ev.target.elements.password.value; + const preferedColor=ev.target.elements.preferedColor.value; + const pictureURL=ev.target.elements.pictureURL.value; + + people.push(new Person(name,address,email,phone,password,preferedColor,pictureURL)) + ev.target.reset() + render() +} + +catch (error) { + console.error(error) +} +} + +function render(){ +let page=""; +let j=0; +for (j=0;j<=people.length-1;j++){ + page+=`
                +

                ${people[j].name}

                +

                ${people[j].address}

                +

                ${people[j].email}

                +

                ${people[j].phone}

                +

                ${people[j].password}

                +

                ${people[j].preferedColor}

                + +
                ` + + } +console.log(page) +const html:HTMLDivElement|null=document.querySelector("#list") +if (html!==null){ + + html.innerHTML= page; +console.log(html) + +} +} + diff --git a/02-TypeScript/15-store/followup/shlomi.samai/dist/control.js b/02-TypeScript/15-store/followup/shlomi.samai/dist/control.js new file mode 100644 index 000000000..fef44d1f2 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/dist/control.js @@ -0,0 +1,40 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + debugger; + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.password.value; + const preferedColor = ev.target.elements.preferedColor.value; + const pictureURL = ev.target.elements.pictureURL.value; + people.push(new Person(name, address, email, phone, password, preferedColor, pictureURL)); + ev.target.reset(); + render(); + } + catch (error) { + console.error(error); + } +} +function render() { + let page = ""; + let j = 0; + for (j = 0; j <= people.length - 1; j++) { + page += `
                +

                ${people[j].name}

                +

                ${people[j].address}

                +

                ${people[j].email}

                +

                ${people[j].phone}

                +

                ${people[j].password}

                +

                ${people[j].preferedColor}

                + +
                `; + } + console.log(page); + const html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/shlomi.samai/dist/model.js b/02-TypeScript/15-store/followup/shlomi.samai/dist/model.js new file mode 100644 index 000000000..7c62d5515 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/dist/model.js @@ -0,0 +1,13 @@ +class Person { + constructor(name, address, email, phone, password, preferedColor, pictureURL) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.preferedColor = preferedColor; + this.pictureURL = pictureURL; + } +} +const people = []; +console.log(people); diff --git a/02-TypeScript/15-store/followup/shlomi.samai/getProduct.html b/02-TypeScript/15-store/followup/shlomi.samai/getProduct.html new file mode 100644 index 000000000..25a117381 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/getProduct.html @@ -0,0 +1,31 @@ + + + + + + + setProduct + + + + + + +
                + + + + + + + + + +
                + + +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/shlomi.samai/index.html b/02-TypeScript/15-store/followup/shlomi.samai/index.html new file mode 100644 index 000000000..3a651ccd2 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/index.html @@ -0,0 +1,21 @@ + + + + + + + main + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/shlomi.samai/model.ts b/02-TypeScript/15-store/followup/shlomi.samai/model.ts new file mode 100644 index 000000000..5ab65a38d --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/model.ts @@ -0,0 +1,15 @@ +class Person { +constructor ( +public name:string, +public address:string, +public email:string, +public phone:number, +public password:string, +public preferedColor:string, +public pictureURL:string, +){} +} + +const people:Person[]=[]; + +console.log(people) \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/shlomi.samai/style.css b/02-TypeScript/15-store/followup/shlomi.samai/style.css new file mode 100644 index 000000000..0eb0f3ef1 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/style.css @@ -0,0 +1,11 @@ +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + border: solid coral; + padding: 50px; +} +.list img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/shlomi.samai/style.scss b/02-TypeScript/15-store/followup/shlomi.samai/style.scss new file mode 100644 index 000000000..d1368ff93 --- /dev/null +++ b/02-TypeScript/15-store/followup/shlomi.samai/style.scss @@ -0,0 +1,13 @@ + +.list { + + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + img { + width: 100%; + } + border: solid coral; + padding: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/15-store/followup/start.md b/02-TypeScript/15-store/followup/start.md new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/control.ts b/02-TypeScript/16-CRUD/class-puzzel/Room-5/control.ts new file mode 100644 index 000000000..83252df46 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/control.ts @@ -0,0 +1,133 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function renderPriceUpdate(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price} +
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } + } + + +function handleUpdatePrice(ev) { + toggleDisplay() + // const updatedPrice = ev.target.elements.price.valueAsNumber; +} + +function toggleDisplay() { + const newDisplay = document.getElementById("updatedPriceFeild") + if (newDisplay) newDisplay.style.display = 'block' +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/control.js b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/control.js new file mode 100644 index 000000000..167cd0edc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/control.js @@ -0,0 +1,108 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function renderPriceUpdate(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + " \n
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleUpdatePrice(ev) { + toggleDisplay(); + // const updatedPrice = ev.target.elements.price.valueAsNumber; +} +function toggleDisplay() { + var newDisplay = document.getElementById("updatedPriceFeild"); + if (newDisplay) + newDisplay.style.display = 'block'; +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/helpers.js b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/model.js b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/model.js new file mode 100644 index 000000000..5900d17b5 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/style.css b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/style.css new file mode 100644 index 000000000..295595e31 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/style.css @@ -0,0 +1,47 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +#updatedPriceFeild { + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/view.js b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/helpers.ts b/02-TypeScript/16-CRUD/class-puzzel/Room-5/helpers.ts new file mode 100644 index 000000000..95191593b --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/index.html b/02-TypeScript/16-CRUD/class-puzzel/Room-5/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/model.ts b/02-TypeScript/16-CRUD/class-puzzel/Room-5/model.ts new file mode 100644 index 000000000..e57b24c88 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/model.ts @@ -0,0 +1,19 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } + } + const items:Item[] = []; + + items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) + console.log(items) + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/registerLogin.html b/02-TypeScript/16-CRUD/class-puzzel/Room-5/registerLogin.html new file mode 100644 index 000000000..db10eb166 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/registerLogin.html @@ -0,0 +1,27 @@ + + + + + + + + Store - login + + + +
                + + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/setProduct.html b/02-TypeScript/16-CRUD/class-puzzel/Room-5/setProduct.html new file mode 100644 index 000000000..63e6c5a04 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/setProduct.html @@ -0,0 +1,38 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/style.css b/02-TypeScript/16-CRUD/class-puzzel/Room-5/style.css new file mode 100644 index 000000000..295595e31 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/style.css @@ -0,0 +1,47 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +#updatedPriceFeild { + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/style.scss b/02-TypeScript/16-CRUD/class-puzzel/Room-5/style.scss new file mode 100644 index 000000000..cb611248c --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/style.scss @@ -0,0 +1,47 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} + +#updatedPriceFeild{ + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/Room-5/view.ts b/02-TypeScript/16-CRUD/class-puzzel/Room-5/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/Room-5/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/control.ts b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/control.ts new file mode 100644 index 000000000..2d1517f96 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/control.ts @@ -0,0 +1,108 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} +function handleUpdatePrice(uid:string) { + try { + const newprice= prompt(`what is the new price`) + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items[index].price= Number(newprice); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/control.js b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/control.js new file mode 100644 index 000000000..3278adcf0 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/control.js @@ -0,0 +1,97 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleUpdatePrice(uid) { + try { + var newprice = prompt("what is the new price"); + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items[index].price = Number(newprice); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/helpers.js b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/index.js b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/model.js b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/model.js new file mode 100644 index 000000000..5900d17b5 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/style.css b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/view.js b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/helpers.ts b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/index.html b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/index.ts b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/model.ts b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/model.ts new file mode 100644 index 000000000..c5a179ae2 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.css b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.html b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.html new file mode 100644 index 000000000..1f3a7ac78 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.html @@ -0,0 +1,26 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.scss b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/setProduct.html b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/setProduct.html new file mode 100644 index 000000000..2dcc5e3e8 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/setProduct.html @@ -0,0 +1,37 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/style.css b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/style.scss b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/style.scss new file mode 100644 index 000000000..beaff3c9a --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/style.scss @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/group-1/example/view.ts b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/group-1/example/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/control.ts b/02-TypeScript/16-CRUD/class-puzzel/room 3/control.ts new file mode 100644 index 000000000..89d98ec86 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/control.ts @@ -0,0 +1,109 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function newPrice(uid: string) { + try { + const priceUpdate = prompt("add new price") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/control.js b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/control.js new file mode 100644 index 000000000..897c36562 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/control.js @@ -0,0 +1,99 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function newPrice(uid) { + try { + var priceUpdate = prompt("add new price"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/helpers.js b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/index.js b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/model.js b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/model.js new file mode 100644 index 000000000..60f271943 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items); diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/style.css b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/view.js b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/helpers.ts b/02-TypeScript/16-CRUD/class-puzzel/room 3/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/index.html b/02-TypeScript/16-CRUD/class-puzzel/room 3/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/index.ts b/02-TypeScript/16-CRUD/class-puzzel/room 3/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/model.ts b/02-TypeScript/16-CRUD/class-puzzel/room 3/model.ts new file mode 100644 index 000000000..feebb3b08 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.css b/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.html b/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.html new file mode 100644 index 000000000..028003737 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.html @@ -0,0 +1,27 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.scss b/02-TypeScript/16-CRUD/class-puzzel/room 3/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/setProduct.html b/02-TypeScript/16-CRUD/class-puzzel/room 3/setProduct.html new file mode 100644 index 000000000..2dcc5e3e8 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/setProduct.html @@ -0,0 +1,37 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/style.css b/02-TypeScript/16-CRUD/class-puzzel/room 3/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/style.scss b/02-TypeScript/16-CRUD/class-puzzel/room 3/style.scss new file mode 100644 index 000000000..beaff3c9a --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/style.scss @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room 3/view.ts b/02-TypeScript/16-CRUD/class-puzzel/room 3/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room 3/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/control.ts b/02-TypeScript/16-CRUD/class-puzzel/room-2/control.ts new file mode 100644 index 000000000..bbbe1a562 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/control.ts @@ -0,0 +1,111 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + const itemUID = item.uid; + console.log(`---${itemUID}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                + +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleUpdatePrice(uid: string) { + try { + const index = items.findIndex((item) => item.uid === uid); + console.log(index); + if (index === -1) throw new Error("item not found"); + const newPrice = prompt("Enter new price"); + console.log(newPrice); + if (!newPrice || Number.isNaN(newPrice)) + throw new Error("Please enter price!!!"); + items[index].price = parseInt(newPrice); + itemsRoot!.innerHTML = renderItems(items); + } catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/control.js b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/control.js new file mode 100644 index 000000000..bee3ae371 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/control.js @@ -0,0 +1,99 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + var itemUID = item.uid; + console.log("---" + itemUID + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleUpdatePrice(uid) { + try { + var index = items.findIndex(function (item) { return item.uid === uid; }); + console.log(index); + if (index === -1) + throw new Error("item not found"); + var newPrice = prompt("Enter new price"); + console.log(newPrice); + if (!newPrice || Number.isNaN(newPrice)) + throw new Error("Please enter price!!!"); + items[index].price = parseInt(newPrice); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/helpers.js b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/index.js b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/model.js b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/model.js new file mode 100644 index 000000000..5900d17b5 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/style.css b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/view.js b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/helpers.ts b/02-TypeScript/16-CRUD/class-puzzel/room-2/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/index.html b/02-TypeScript/16-CRUD/class-puzzel/room-2/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/index.ts b/02-TypeScript/16-CRUD/class-puzzel/room-2/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/model.ts b/02-TypeScript/16-CRUD/class-puzzel/room-2/model.ts new file mode 100644 index 000000000..c5a179ae2 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.css b/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.html b/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.html new file mode 100644 index 000000000..1f3a7ac78 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.html @@ -0,0 +1,26 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.scss b/02-TypeScript/16-CRUD/class-puzzel/room-2/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/setProduct.html b/02-TypeScript/16-CRUD/class-puzzel/room-2/setProduct.html new file mode 100644 index 000000000..2dcc5e3e8 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/setProduct.html @@ -0,0 +1,37 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/style.css b/02-TypeScript/16-CRUD/class-puzzel/room-2/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/style.scss b/02-TypeScript/16-CRUD/class-puzzel/room-2/style.scss new file mode 100644 index 000000000..beaff3c9a --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/style.scss @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-2/view.ts b/02-TypeScript/16-CRUD/class-puzzel/room-2/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-2/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/control.ts b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/control.ts new file mode 100644 index 000000000..0dc3ce50b --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/control.ts @@ -0,0 +1,114 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleUpdateItem(uid: string) { + try { + let newPrice; + newPrice= prompt ("Enter a new price to this item:"); + while(!newPrice || isNaN(newPrice)){ + newPrice= prompt ("You need to enter a number:"); + newPrice=parseInt(newPrice); + } + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + if (newPrice) + items[index].price= newPrice; + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/control.js b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/control.js new file mode 100644 index 000000000..1106b37b9 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/control.js @@ -0,0 +1,102 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleUpdateItem(uid) { + try { + var newPrice = void 0; + newPrice = prompt("Enter a new price to this item:"); + while (!newPrice || isNaN(newPrice)) { + newPrice = prompt("You need to enter a number:"); + newPrice = parseInt(newPrice); + } + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + if (newPrice) + items[index].price = newPrice; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/helpers.js b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/index.js b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/model.js b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/model.js new file mode 100644 index 000000000..5900d17b5 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/style.css b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/view.js b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/helpers.ts b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/index.html b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/index.ts b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/model.ts b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/model.ts new file mode 100644 index 000000000..c5a179ae2 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.css b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.html b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.html new file mode 100644 index 000000000..95227969a --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.html @@ -0,0 +1,26 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.scss b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/setProduct.html b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/setProduct.html new file mode 100644 index 000000000..2dcc5e3e8 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/setProduct.html @@ -0,0 +1,37 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/style.css b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/style.scss b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/style.scss new file mode 100644 index 000000000..beaff3c9a --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/style.scss @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} diff --git a/02-TypeScript/16-CRUD/class-puzzel/room-4/example/view.ts b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/class-puzzel/room-4/example/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/example/control.ts b/02-TypeScript/16-CRUD/example/control.ts new file mode 100644 index 000000000..9e6dd0d39 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/control.ts @@ -0,0 +1,93 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/example/dist/control.js b/02-TypeScript/16-CRUD/example/dist/control.js new file mode 100644 index 000000000..68f08da13 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/dist/control.js @@ -0,0 +1,81 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/example/dist/helpers.js b/02-TypeScript/16-CRUD/example/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/example/helpers.ts b/02-TypeScript/16-CRUD/example/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/example/index.html b/02-TypeScript/16-CRUD/example/index.html new file mode 100644 index 000000000..fcc2485c1 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/index.html @@ -0,0 +1,18 @@ + + + + + + + Store + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/example/index.ts b/02-TypeScript/16-CRUD/example/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/example/model.ts b/02-TypeScript/16-CRUD/example/model.ts new file mode 100644 index 000000000..c5a179ae2 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/16-CRUD/example/registerLogin.css b/02-TypeScript/16-CRUD/example/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/example/registerLogin.html b/02-TypeScript/16-CRUD/example/registerLogin.html new file mode 100644 index 000000000..1f3a7ac78 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/registerLogin.html @@ -0,0 +1,26 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/example/registerLogin.scss b/02-TypeScript/16-CRUD/example/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/example/setProduct.html b/02-TypeScript/16-CRUD/example/setProduct.html new file mode 100644 index 000000000..0f68dd6af --- /dev/null +++ b/02-TypeScript/16-CRUD/example/setProduct.html @@ -0,0 +1,34 @@ + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/example/style.css b/02-TypeScript/16-CRUD/example/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/16-CRUD/example/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/example/style.scss b/02-TypeScript/16-CRUD/example/style.scss new file mode 100644 index 000000000..beaff3c9a --- /dev/null +++ b/02-TypeScript/16-CRUD/example/style.scss @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} diff --git a/02-TypeScript/16-CRUD/example/view.ts b/02-TypeScript/16-CRUD/example/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/example/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/.vscode/settings.json b/02-TypeScript/16-CRUD/home-puzzles/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Amit/control.ts new file mode 100644 index 000000000..3684eeb5e --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/control.ts @@ -0,0 +1,96 @@ +let score:number = 0; +function shoot(uid: string): void { + try { + const index = balloonsArray.findIndex((balloon) => balloon.uid === uid); + if (index !== undefined && index > -1) { + const balloon: HTMLDivElement | null = document.querySelector(`#${uid}`); + if (balloon) { + let clickCounter = 0; + if (balloon.innerText === "2") clickCounter = 1; + if (balloon.innerText === "1") clickCounter = 2; + balloon.style.backgroundColor = "red"; + balloon.innerText = `${2 - clickCounter}`; + if (balloon.innerText === "0") { + balloonsArray.splice(index, 1); + balloon.remove(); + score+=10; + if(scoreOnScreen)scoreOnScreen.innerText = `SCORE: ${score}`; + } + } + } + } catch (error) { + console.error(error); + } +} + + +function endlessBaloonsCreator() { + try { + + balloonsArray.push(new Balloon); + document.querySelector("#wrapper")?.appendChild(renderNewBalloon()); + + randomLocation(); + + } catch (error) { + console.error(error); + } +} + + +function renderNewBalloon(): HTMLDivElement | any { + try { + for (let i = balloonsArray.length - 1; i < balloonsArray.length; i++) { + const balloon = document.createElement("div"); + const balloonUid = balloonsArray[i].uid; + balloon.id = balloonUid; + balloon.className = "balloon"; + balloon.innerText = "2"; + balloon.addEventListener("click", function () { shoot(balloonUid); }); + balloon.addEventListener("animationstart", () => { + balloon.animate(fly, flyTiming); + }); + + return balloon; + } + + } catch (error) { + console.error(error); + return error; + } +} + + +function randomLocation() { + try { + const wrapper = document.querySelector("#wrapper"); + let wrapperLastChild: any = wrapper?.lastElementChild; + + const xAxisWidth = 1000; + let randomLeft: number; + + if (wrapperLastChild && wrapper) { + randomLeft = getRandomNumber(0, xAxisWidth); + wrapperLastChild.style.left = randomLeft + "px"; + wrapperLastChild.style.backgroundColor = getRandomColor(); + }; + + } catch (error) { + console.error(error); + return undefined; + } + +} + + +const fly = [ + { transform: 'translateY(0px)' }, + { transform: 'translateY(-2000px)' }, +] + +const flyTiming = { + duration: 10000, + iterations: 1, +} + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/control.js new file mode 100644 index 000000000..8009dc502 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/control.js @@ -0,0 +1,90 @@ +var score = 0; +function shoot(uid) { + try { + var index = balloonsArray.findIndex(function (balloon) { return balloon.uid === uid; }); + if (index !== undefined && index > -1) { + var balloon = document.querySelector("#" + uid); + if (balloon) { + var clickCounter = 0; + if (balloon.innerText === "2") + clickCounter = 1; + if (balloon.innerText === "1") + clickCounter = 2; + balloon.style.backgroundColor = "red"; + balloon.innerText = "" + (2 - clickCounter); + if (balloon.innerText === "0") { + balloonsArray.splice(index, 1); + balloon.remove(); + score += 10; + if (scoreOnScreen) + scoreOnScreen.innerText = "SCORE: " + score; + } + } + } + } + catch (error) { + console.error(error); + } +} +function endlessBaloonsCreator() { + var _a; + try { + balloonsArray.push(new Balloon); + (_a = document.querySelector("#wrapper")) === null || _a === void 0 ? void 0 : _a.appendChild(renderNewBalloon()); + randomLocation(); + } + catch (error) { + console.error(error); + } +} +function renderNewBalloon() { + try { + var _loop_1 = function (i) { + var balloon = document.createElement("div"); + var balloonUid = balloonsArray[i].uid; + balloon.id = balloonUid; + balloon.className = "balloon"; + balloon.innerText = "2"; + balloon.addEventListener("click", function () { shoot(balloonUid); }); + balloon.addEventListener("animationstart", function () { + balloon.animate(fly, flyTiming); + }); + return { value: balloon }; + }; + for (var i = balloonsArray.length - 1; i < balloonsArray.length; i++) { + var state_1 = _loop_1(i); + if (typeof state_1 === "object") + return state_1.value; + } + } + catch (error) { + console.error(error); + return error; + } +} +function randomLocation() { + try { + var wrapper = document.querySelector("#wrapper"); + var wrapperLastChild = wrapper === null || wrapper === void 0 ? void 0 : wrapper.lastElementChild; + var xAxisWidth = 1000; + var randomLeft = void 0; + if (wrapperLastChild && wrapper) { + randomLeft = getRandomNumber(0, xAxisWidth); + wrapperLastChild.style.left = randomLeft + "px"; + wrapperLastChild.style.backgroundColor = getRandomColor(); + } + ; + } + catch (error) { + console.error(error); + return undefined; + } +} +var fly = [ + { transform: 'translateY(0px)' }, + { transform: 'translateY(-2000px)' }, +]; +var flyTiming = { + duration: 10000, + iterations: 1 +}; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/helpers.js new file mode 100644 index 000000000..060e8818d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/helpers.js @@ -0,0 +1,9 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} +function getRandomNumber(min, max) { + return Math.random() * (max - min) + min; +} +function getRandomColor() { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/index.css b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/index.css new file mode 100644 index 000000000..d935f1587 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/index.css @@ -0,0 +1,82 @@ +@charset "UTF-8"; +body { + margin: 0; +} + +.balloon { + width: 5rem; + height: 7.5rem; + border-radius: 80%; + background-color: white; + font-size: 3rem; + line-height: 7.5rem; + text-align: center; + vertical-align: middle; + position: fixed; + top: 60rem; + animation: StartFly 0.5s linear 1; + box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.12); + margin: 20px 30px; + transition: transform 0.5s ease; + transform-origin: bottom center; + cursor: crosshair; +} +@keyframes StartFly { + 0% { + top: 33.7em; + left: 32em; + } + 100% { + top: 33.7em; + left: 32em; + } +} + +.balloon:before { + content: "▲"; + font-size: 20px; + color: #476085; + display: block; + text-align: center; + width: 100%; + position: absolute; + bottom: -67px; +} + +.balloon:after { + display: inline-block; + top: 133px; + left: 40px; + position: absolute; + height: 250px; + width: 1px; + margin: 0 auto; + content: ""; + background: rgba(0, 0, 0, 0.2); +} + +.wrapper { + height: 50rem; + width: 70rem; + border: 0.5rem solid black; + background-image: url(https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +.score { + height: 4rem; + width: 13rem; + background-color: yellow; + border: 0.5rem solid black; + position: relative; + bottom: 50rem; + left: 75rem; + font-size: 2.5rem; + line-height: 4rem; + text-align: left; + vertical-align: middle; + padding: 1rem; + font-family: fantasy; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/model.js new file mode 100644 index 000000000..95d1224d3 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/model.js @@ -0,0 +1,11 @@ +var Balloon = /** @class */ (function () { + function Balloon() { + this.uid = uid(); + } + Balloon.prototype.createBallon = function () { + //create dom element + //create event listenrs + }; + return Balloon; +}()); +var balloonsArray = []; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/view.js new file mode 100644 index 000000000..78912314a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/dist/view.js @@ -0,0 +1 @@ +var scoreOnScreen = document.querySelector(".score"); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/Amit/helpers.ts new file mode 100644 index 000000000..3070cc10f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/helpers.ts @@ -0,0 +1,11 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} + +function getRandomNumber(min: number, max: number) { + return Math.random() * (max - min) + min; +} + +function getRandomColor(): string { + return "#" + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, "0"); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/index.html b/02-TypeScript/16-CRUD/home-puzzles/Amit/index.html new file mode 100644 index 000000000..1b44c36ef --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + Master Exploder + + +
                +
                SCORE:
                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/index.scss b/02-TypeScript/16-CRUD/home-puzzles/Amit/index.scss new file mode 100644 index 000000000..5a067e46d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/index.scss @@ -0,0 +1,87 @@ +body{ + margin: 0; + +} + +.balloon{ + width: 5rem; + height: 7.5rem; + border-radius:80%; + background-color: white; + font-size: 3rem; + line-height: 7.5rem; + text-align: center; + vertical-align: middle; + position: fixed; + top: 60rem; + animation: StartFly 0.5s linear 1; + box-shadow:inset -10px -10px 0 rgba(0,0,0,0.12); + margin:20px 30px; + transition:transform 0.5s ease; + transform-origin:bottom center; + cursor: crosshair; + @keyframes StartFly{ + 0%{top: 33.7em; + left: 32em;} + 100%{top: 33.7em; + left: 32em;} + } +} + +.balloon:before { + content:"▲"; + font-size:20px; + color:rgb(71, 96, 133); + display:block; + text-align:center; + width:100%; + position:absolute; + bottom:-67px; + } + + .balloon:after { + display:inline-block; + top:133px; + left: 40px; + position:absolute; + height:250px; + width:1px; + margin:0 auto; + content:""; + background:rgba(0,0,0,0.2); + } + + + +.wrapper{ + height: 50rem; + width: 70rem; + border: 0.5rem solid black; + background-image: url(https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + +} + +.score{ + height: 4rem; + width: 13rem; + background-color: yellow; + border: 0.5rem solid black; + position: relative; + bottom: 50rem; + left: 75rem; + font-size: 2.5rem; + line-height: 4rem; + text-align: left; + vertical-align: middle; + padding: 1rem; + font-family: fantasy; + +} + + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Amit/model.ts new file mode 100644 index 000000000..edd61dc64 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/model.ts @@ -0,0 +1,14 @@ +class Balloon { + uid: string; + constructor( + ) { + this.uid = uid(); + } + + createBallon(){ + //create dom element + //create event listenrs + } +} + +const balloonsArray: Balloon[] = []; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Amit/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Amit/view.ts new file mode 100644 index 000000000..3f296c367 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Amit/view.ts @@ -0,0 +1 @@ +const scoreOnScreen:HTMLElement | null = document.querySelector(".score"); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Ayala/control.ts new file mode 100644 index 000000000..139d7775c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/control.ts @@ -0,0 +1,87 @@ +function handleAddItem(ev:any){ +try{ + ev.preventDefault(); + console.log(ev); +const name =ev.target.elements.name.value; +const color =ev.target.elements.color.value; +const price =ev.target.elements.price.value; +const category =ev.target.elements.category.value; +const sn = ev.target.elements.sn.value; + +items.push(new Item(name,color,price, category,sn)); +console.log(items); +ev.target.reset(); + +console.log(name); +if (!itemsRoot) throw new Error("itemsRoot is null"); +itemsRoot.innerHTML = renderItems(items); + +}catch(error){ + console.error(error); + +} + +} + + + + + + + +function handleUpdatePrice(uid){ + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items[index].price = Number(form.elements.price.value); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + + return ` + +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/control.js new file mode 100644 index 000000000..e8c73330a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/control.js @@ -0,0 +1,68 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.value; + var category = ev.target.elements.category.value; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleUpdatePrice(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items[index].price = Number(form.elements.price.value); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + return "\n \n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/helpres.js b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/helpres.js new file mode 100644 index 000000000..34d608a6f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/helpres.js @@ -0,0 +1 @@ +gh; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/model.js new file mode 100644 index 000000000..a19dc67a1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/model.js @@ -0,0 +1,13 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.sn = sn; + this.uid = name + color + price + category + sn; + } + return Item; +}()); +var items = []; +//items.push(new Item('Vanilla Chocolate','pink',150, 'Mousse Cake',"fgdfgsdg543534t345")) diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/style.css new file mode 100644 index 000000000..41281f8a4 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/style.css @@ -0,0 +1,57 @@ +body { + display: block; + margin: 8px; + border: 1px solid black; +} + +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} + +.description { + margin-bottom: 10px; +} + +.actions { + display: flex; + justify-content: space-between; +} +.actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.actions button:hover { + background: #ccc; +} + +h1 { + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: pink; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/view.js new file mode 100644 index 000000000..7e61b8de1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/dist/view.js @@ -0,0 +1,2 @@ +var itemsRoot = document.querySelector('#itemsRoot'); +var form = document.querySelector('form'); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/Ayala/helpers.ts new file mode 100644 index 000000000..699c7218e --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/index.html b/02-TypeScript/16-CRUD/home-puzzles/Ayala/index.html new file mode 100644 index 000000000..e7b1f0fcc --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/index.html @@ -0,0 +1,41 @@ + + + + + + + + Document + + + + + + + + + + +

                Cake Store

                +
                + + + + + + + + +
                +
                +
                + + + + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Ayala/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Ayala/model.ts new file mode 100644 index 000000000..f5180bbae --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/model.ts @@ -0,0 +1,30 @@ + +class Item{ + + uid: string; + + constructor( + public name:string, + public color:string , + public price:number , + public category :string, + public sn :string + ) + { + + this.uid = name + color + price + category + sn; + + } + +} + + + +const items :Item [] = []; + +//items.push(new Item('Vanilla Chocolate','pink',150, 'Mousse Cake',"fgdfgsdg543534t345")) + + + + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Ayala/style.scss new file mode 100644 index 000000000..31e8524ca --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/style.scss @@ -0,0 +1,63 @@ + +body { + display: block; + margin: 8px; + border: 1px solid black; +} + +form { + + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + + } + } + + .item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + + } + + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + + } + + + h1{ + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: pink; + } diff --git a/02-TypeScript/16-CRUD/home-puzzles/Ayala/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Ayala/view.ts new file mode 100644 index 000000000..247a2dc7a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Ayala/view.ts @@ -0,0 +1,2 @@ +const itemsRoot = document.querySelector('#itemsRoot'); +const form = document.querySelector('form'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/.vscode/settings.json b/02-TypeScript/16-CRUD/home-puzzles/Dayan/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/dist/script.js b/02-TypeScript/16-CRUD/home-puzzles/Dayan/dist/script.js new file mode 100644 index 000000000..e27c56c3b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/dist/script.js @@ -0,0 +1,161 @@ +//-----Game elements +var scoreboard = document.querySelector("#scoreboard"); +var startScreen = document.querySelector("#start-screen"); +var gameOverScreen = document.querySelector("#gameover-screen"); +var scoreEl = document.querySelectorAll("#scoreboard > span")[0]; +var livesEl = document.querySelectorAll("#scoreboard > span")[1]; +//-----Default game state +var DEFAULT_STATE = { + balloonPoolSize: 50, + entrySpeed: 0.5, + increaseScoreBy: 10, + score: 0, + lives: 3, + balloons: null, + balloonTimer: null, + gameTimer: null +}; +//-----The actual game state is populated when the game starts +var state = {}; +//-----Balloon counter +var balloonNum = 0; +//-----Returns the calculated viewport width +var getViewportWidth = function () { + //The getComputedStyle() method gets the computed CSS properties and values of an HTML element. + return parseInt(getComputedStyle(document.body, null).width, 10); +}; +//-----Returns a random number between min and max +var randomNumber = function (min, max) { + return Math.floor(Math.random() * (max - min) + min); +}; +//-----Updates the scoreboard +var updateScoreboard = function (newScore) { + var score = state.score, lives = state.lives; + //-----update the score if this is not game over + if (lives > 0) { + if (scoreboard.classList.contains("hide")) { + scoreboard.classList.toggle("hide"); + } + //-----Update the scoreboard + state.score += (typeof newScore === 'number') ? newScore : state.increaseScoreBy; + scoreEl.textContent = state.score; + //-----Update lives + livesEl.innerHTML = "♥".repeat(state.lives); + } + else { + scoreboard.classList.toggle("hide"); + } + if (!livesEl.classList.contains("blink") && state.lives <= 2 && state.lives >= 1) { + livesEl.classList.add("blink"); + } + else { + livesEl.classList.remove("blink"); + } +}; +//-----Event - Pop Balloon +var popBalloon = function () { + var balloonIndex = state.balloons.indexOf(event.target); + var balloon = state.balloons[balloonIndex]; + replaceBalloon(balloon, balloonIndex); + updateScoreboard(); +}; +//-----Create a balloon element +var createBalloon = function () { + var balloonImage = "https://creazilla-store.fra1.digitaloceanspaces.com/cliparts/16696/red-balloon-clipart-md.png"; + var balloonSpeed = randomNumber(8, 16); + var balloonSize = randomNumber(45, getViewportWidth() / 5); + var balloonPosition = randomNumber(0 - (balloonSize / 2), getViewportWidth() - balloonSize / 2 - 120); + var balloon = document.createElement("img"); + balloon.src = balloonImage; + balloon.setAttribute('draggable', false); + balloon.setAttribute('id', "bubble-" + balloonNum); + balloon.style.width = balloonSize + "px"; + balloon.style.left = balloonPosition + "px"; + balloon.style.animation = "floatUp " + balloonSpeed + "s linear 1, wobble " + randomNumber(4, 12) + "s ease-in-out alternate"; + //-----Add a click event + balloon.addEventListener('click', popBalloon, true); + balloonNum++; + return balloon; +}; +var replaceBalloon = function (balloon, index) { + //-----Remove from the DOM + balloon.parentNode.removeChild(balloon); + //-----Remove event listener + balloon.removeEventListener('click', popBalloon, true); + //-----Remove from the balloons array and replace with a new balloon + state.balloons.splice(index, 1, createBalloon()); +}; +var updateBalloonPositions = function () { + if (state.balloons) { + state.balloons = state.balloons.map(function (balloon) { + var balloonSize = balloon.style.width; + var balloonPosition = randomNumber(0 - (balloonSize / 2), getViewportWidth() - balloonSize / 2 - 120); + balloon.style.left = balloonPosition + "px"; + return balloon; + }); + } +}; +var initGame = function () { + //The assign() method loads a new document. + state = Object.assign({}, DEFAULT_STATE); + updateScoreboard(0); + if (!startScreen.classList.contains("hide")) { + startScreen.classList.add("hide"); + } + if (!gameOverScreen.classList.contains("hidden")) { + gameOverScreen.classList.remove("dialogue"); + gameOverScreen.classList.add("hidden"); + } + //-----Balloon pool to store/recycle balloon elements + state.balloons = new Array(DEFAULT_STATE.balloonPoolSize); + //-----Populate the array of balloons + for (var i = 0; i < state.balloons.length; i++) { + state.balloons[i] = createBalloon(); + } +}; +var startGame = function () { + //-----Set the initial game state + initGame(); + //-----Display balloons on the screen + var i = 0; + //The setInterval() method calls a function at specified intervals (in milliseconds). + state.balloonTimer = setInterval(function () { + i = i >= state.balloons.length ? 0 : i; + document.body.appendChild(state.balloons[i]); + i++; + }, state.entrySpeed * 1000); + //-----Check if balloons have left the screen and recycle them into the balloons array + state.gameTimer = setInterval(function () { + state.balloons.forEach(function (balloon, index) { + if (balloon && parseInt(balloon.style.width, 10) + parseInt(getComputedStyle(balloon, null).top, 10) <= 0) { + replaceBalloon(balloon, index); + //-----Remove a life + state.lives--; + updateScoreboard(state.score); + if (state.lives <= 0) { + endGame(); + } + } + }); + }, 60); +}; +var endGame = function () { + clearInterval(state.balloonTimer); + clearInterval(state.gameTimer); + state.balloonTimer = null; + state.gameTimer = null; + state.balloons.forEach(function (balloon) { + //-----Remove from the DOM + if (balloon.parentNode) { + balloon.parentNode.removeChild(balloon); + } + //-----Remove event listener + balloon.removeEventListener("click", popBalloon, true); + }); + state.balloons = null; + gameOverScreen.classList.toggle("hidden"); + gameOverScreen.classList.toggle("dialogue"); +}; +document.querySelector("#startGame").addEventListener("click", startGame); +document.querySelector("#tryAgain").addEventListener("click", startGame); +window.addEventListener("resize", updateBalloonPositions); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/dist/script.js b/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/dist/script.js new file mode 100644 index 000000000..e27c56c3b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/dist/script.js @@ -0,0 +1,161 @@ +//-----Game elements +var scoreboard = document.querySelector("#scoreboard"); +var startScreen = document.querySelector("#start-screen"); +var gameOverScreen = document.querySelector("#gameover-screen"); +var scoreEl = document.querySelectorAll("#scoreboard > span")[0]; +var livesEl = document.querySelectorAll("#scoreboard > span")[1]; +//-----Default game state +var DEFAULT_STATE = { + balloonPoolSize: 50, + entrySpeed: 0.5, + increaseScoreBy: 10, + score: 0, + lives: 3, + balloons: null, + balloonTimer: null, + gameTimer: null +}; +//-----The actual game state is populated when the game starts +var state = {}; +//-----Balloon counter +var balloonNum = 0; +//-----Returns the calculated viewport width +var getViewportWidth = function () { + //The getComputedStyle() method gets the computed CSS properties and values of an HTML element. + return parseInt(getComputedStyle(document.body, null).width, 10); +}; +//-----Returns a random number between min and max +var randomNumber = function (min, max) { + return Math.floor(Math.random() * (max - min) + min); +}; +//-----Updates the scoreboard +var updateScoreboard = function (newScore) { + var score = state.score, lives = state.lives; + //-----update the score if this is not game over + if (lives > 0) { + if (scoreboard.classList.contains("hide")) { + scoreboard.classList.toggle("hide"); + } + //-----Update the scoreboard + state.score += (typeof newScore === 'number') ? newScore : state.increaseScoreBy; + scoreEl.textContent = state.score; + //-----Update lives + livesEl.innerHTML = "♥".repeat(state.lives); + } + else { + scoreboard.classList.toggle("hide"); + } + if (!livesEl.classList.contains("blink") && state.lives <= 2 && state.lives >= 1) { + livesEl.classList.add("blink"); + } + else { + livesEl.classList.remove("blink"); + } +}; +//-----Event - Pop Balloon +var popBalloon = function () { + var balloonIndex = state.balloons.indexOf(event.target); + var balloon = state.balloons[balloonIndex]; + replaceBalloon(balloon, balloonIndex); + updateScoreboard(); +}; +//-----Create a balloon element +var createBalloon = function () { + var balloonImage = "https://creazilla-store.fra1.digitaloceanspaces.com/cliparts/16696/red-balloon-clipart-md.png"; + var balloonSpeed = randomNumber(8, 16); + var balloonSize = randomNumber(45, getViewportWidth() / 5); + var balloonPosition = randomNumber(0 - (balloonSize / 2), getViewportWidth() - balloonSize / 2 - 120); + var balloon = document.createElement("img"); + balloon.src = balloonImage; + balloon.setAttribute('draggable', false); + balloon.setAttribute('id', "bubble-" + balloonNum); + balloon.style.width = balloonSize + "px"; + balloon.style.left = balloonPosition + "px"; + balloon.style.animation = "floatUp " + balloonSpeed + "s linear 1, wobble " + randomNumber(4, 12) + "s ease-in-out alternate"; + //-----Add a click event + balloon.addEventListener('click', popBalloon, true); + balloonNum++; + return balloon; +}; +var replaceBalloon = function (balloon, index) { + //-----Remove from the DOM + balloon.parentNode.removeChild(balloon); + //-----Remove event listener + balloon.removeEventListener('click', popBalloon, true); + //-----Remove from the balloons array and replace with a new balloon + state.balloons.splice(index, 1, createBalloon()); +}; +var updateBalloonPositions = function () { + if (state.balloons) { + state.balloons = state.balloons.map(function (balloon) { + var balloonSize = balloon.style.width; + var balloonPosition = randomNumber(0 - (balloonSize / 2), getViewportWidth() - balloonSize / 2 - 120); + balloon.style.left = balloonPosition + "px"; + return balloon; + }); + } +}; +var initGame = function () { + //The assign() method loads a new document. + state = Object.assign({}, DEFAULT_STATE); + updateScoreboard(0); + if (!startScreen.classList.contains("hide")) { + startScreen.classList.add("hide"); + } + if (!gameOverScreen.classList.contains("hidden")) { + gameOverScreen.classList.remove("dialogue"); + gameOverScreen.classList.add("hidden"); + } + //-----Balloon pool to store/recycle balloon elements + state.balloons = new Array(DEFAULT_STATE.balloonPoolSize); + //-----Populate the array of balloons + for (var i = 0; i < state.balloons.length; i++) { + state.balloons[i] = createBalloon(); + } +}; +var startGame = function () { + //-----Set the initial game state + initGame(); + //-----Display balloons on the screen + var i = 0; + //The setInterval() method calls a function at specified intervals (in milliseconds). + state.balloonTimer = setInterval(function () { + i = i >= state.balloons.length ? 0 : i; + document.body.appendChild(state.balloons[i]); + i++; + }, state.entrySpeed * 1000); + //-----Check if balloons have left the screen and recycle them into the balloons array + state.gameTimer = setInterval(function () { + state.balloons.forEach(function (balloon, index) { + if (balloon && parseInt(balloon.style.width, 10) + parseInt(getComputedStyle(balloon, null).top, 10) <= 0) { + replaceBalloon(balloon, index); + //-----Remove a life + state.lives--; + updateScoreboard(state.score); + if (state.lives <= 0) { + endGame(); + } + } + }); + }, 60); +}; +var endGame = function () { + clearInterval(state.balloonTimer); + clearInterval(state.gameTimer); + state.balloonTimer = null; + state.gameTimer = null; + state.balloons.forEach(function (balloon) { + //-----Remove from the DOM + if (balloon.parentNode) { + balloon.parentNode.removeChild(balloon); + } + //-----Remove event listener + balloon.removeEventListener("click", popBalloon, true); + }); + state.balloons = null; + gameOverScreen.classList.toggle("hidden"); + gameOverScreen.classList.toggle("dialogue"); +}; +document.querySelector("#startGame").addEventListener("click", startGame); +document.querySelector("#tryAgain").addEventListener("click", startGame); +window.addEventListener("resize", updateBalloonPositions); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/dist/style.css new file mode 100644 index 000000000..4aa82c1ce --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/dist/style.css @@ -0,0 +1,238 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + background: rgb(195, 34, 108); + background: linear-gradient(339deg, rgb(195, 34, 108) 34%, rgba(157, 97, 27, 0.9514180672) 76%); + display: flex; + flex-direction: column; + overflow: hidden; + user-select: none; +} + +.game { + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + font-family: "Lobster", cursive; +} +.game .top-bar { + align-items: center; + background: black; + border-bottom: 1px solid #000; + box-shadow: 1px 1px 10px #000; + color: #ccc; + display: flex; + font-size: 150%; + font-weight: 500; + justify-content: space-between; + padding: 0.5rem 1.5rem; + position: relative; + top: 0; + transition: all 500ms ease-in-out; + z-index: 1; +} + +.top-bar.hide { + top: -50px; +} + +.heart-containers { + color: rgba(210, 40, 55, 0.75); + font-size: 100%; + font-weight: 300; + text-shadow: 1px 1px 3px #333; + letter-spacing: 2px; +} + +img { + bottom: -1000px; + position: absolute; + user-select: none; +} + +.blink { + animation: lowlife 750ms ease-in-out infinite; + backface-visibility: hidden; +} + +button { + width: 130px; + height: 40px; + border: none; + color: #ccc; + border-radius: 5px; + padding: 10px 25px; + cursor: pointer; + background-color: black; + display: block; + letter-spacing: 2px; + padding: 0.75rem; + position: relative; + font-weight: 600; + text-transform: uppercase; +} +button:hover { + background: rgba(157, 97, 27, 0.9514180672); + color: white; + outline: none; +} +button:active { + box-shadow: none; + left: 1px; + outline: none; + top: 2px; +} + +.dialogue { + align-self: center; + animation: bounceIn 800ms ease-in-out 1; + background: #ccc; + border-radius: 10px; + bottom: 50%; + box-shadow: 1px 1px 1rem #000; + display: flex; + flex-direction: column; + max-width: 75%; + min-width: 350px; + min-height: 25%; + opacity: 1; + padding: 2rem 1rem; + position: absolute; + top: 25%; +} +.dialogue h1 { + color: black; + display: block; + font-family: "Lobster", cursive; + font-size: 3rem; + margin: 0; + text-shadow: 1px 1px 10px #999; +} +.dialogue span { + padding: 1.5rem 0; +} + +.dialogue.hide { + animation: bounceOut 800ms ease-in-out 1; + opacity: 0; +} + +.hidden { + opacity: 0; + visibility: hidden; +} + +#start-screen, #gameover-screen { + justify-content: center; + text-align: center; + padding: 1rem 0; +} +#start-screen span, #gameover-screen span { + margin: 0 auto; +} + +@keyframes bounceIn { + 0% { + transform: scale(0.1); + opacity: 0; + } + 60% { + transform: scale(1.2); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes bounceOut { + 0% { + transform: scale(1); + opacity: 1; + } + 60% { + transform: scale(1.2); + opacity: 0.5; + } + 100% { + transform: scale(0); + opacity: 0; + } +} +@keyframes floatUp { + 0% { + top: 1000px; + } + 100% { + top: -1000px; + } +} +@keyframes lowlife { + 0% { + color: rgba(210, 40, 55, 0.75); + } + 50% { + color: rgba(210, 30, 45, 0.95); + } + 100% { + color: rgba(210, 40, 55, 0.75); + } +} +@keyframes pop { + 0% { + opacity: 1; + transform-origin: 50% 50%; + transform: scale(1, 1); + filter: blur(0); + } + 100% { + opacity: 0; + transform-origin: 50% 50%; + transform: scale(2, 2); + filter: blur(20px); + } +} +@keyframes pulse { + 0% { + transform: scale(1); + } + 30% { + transform: scale(1.1); + } + 55% { + transform: scale(0.9); + } + 80% { + transform: scale(1.3); + } + 100% { + transform: scale(1); + } +} +@keyframes wobble { + 0% { + transform: translateX(0); + } + 5% { + transform: translateX(31px); + } + 30% { + transform: translateX(120px); + } + 50% { + transform: translateX(92px); + } + 80% { + transform: translateX(19px); + } + 100% { + transform: translateX(0); + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/index.html b/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/index.html new file mode 100644 index 000000000..d817ad5af --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + Balloon Pop Game + + +
                +
                + 0 + ♥♥♥ +
                + +
                + + + +
                + + +
                + + + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/script.ts b/02-TypeScript/16-CRUD/home-puzzles/Dayan/script.ts new file mode 100644 index 000000000..199c36405 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/script.ts @@ -0,0 +1,197 @@ +//-----Game elements +const scoreboard = document.querySelector("#scoreboard") as HTMLElement +const startScreen = document.querySelector("#start-screen") as HTMLElement +const gameOverScreen = document.querySelector("#gameover-screen") as HTMLElement +const scoreEl = document.querySelectorAll("#scoreboard > span")[0] as HTMLElement +const livesEl = document.querySelectorAll("#scoreboard > span")[1] as HTMLElement + +//-----Default game state +const DEFAULT_STATE = { + balloonPoolSize: 50, + entrySpeed: 0.5, + increaseScoreBy: 10, + score: 0, + lives: 3, + balloons: null, + balloonTimer: null, + gameTimer: null, +} + +//-----The actual game state is populated when the game starts +let state = {} + +//-----Balloon counter +let balloonNum: number = 0 + +//-----Returns the calculated viewport width +const getViewportWidth = () => { + //The getComputedStyle() method gets the computed CSS properties and values of an HTML element. + return parseInt(getComputedStyle(document.body, null).width, 10) +} + +//-----Returns a random number between min and max +const randomNumber = (min, max) => { + return Math.floor(Math.random() * (max - min) + min) +} + +//-----Updates the scoreboard +const updateScoreboard = (newScore) => { + const { score, lives } = state + + //-----update the score if this is not game over + if(lives > 0) { + if(scoreboard.classList.contains("hide")){ + scoreboard.classList.toggle("hide") + } + + //-----Update the scoreboard + state.score += (typeof newScore === 'number') ? newScore : state.increaseScoreBy + scoreEl.textContent = state.score; + + //-----Update lives + livesEl.innerHTML = "♥".repeat(state.lives) + }else{ + scoreboard.classList.toggle("hide") + } + + if(!livesEl.classList.contains("blink") && state.lives <= 2 && state.lives >= 1){ + livesEl.classList.add("blink") + }else{ + livesEl.classList.remove("blink") + } +}; + +//-----Event - Pop Balloon +const popBalloon = () => { + const balloonIndex = state.balloons.indexOf(event.target) + const balloon = state.balloons[balloonIndex] + + replaceBalloon(balloon, balloonIndex) + updateScoreboard() + +} + +//-----Create a balloon element +const createBalloon = () => { + const balloonImage = "https://creazilla-store.fra1.digitaloceanspaces.com/cliparts/16696/red-balloon-clipart-md.png" + const balloonSpeed = randomNumber(8, 16) + const balloonSize = randomNumber(45, getViewportWidth() / 5) + const balloonPosition = randomNumber(0 - (balloonSize / 2), getViewportWidth() - balloonSize/2 - 120) + + const balloon = document.createElement("img") + balloon.src = balloonImage + balloon.setAttribute('draggable', false) + balloon.setAttribute('id', `bubble-${balloonNum}`) + balloon.style.width = `${balloonSize}px` + balloon.style.left = `${balloonPosition}px` + balloon.style.animation = `floatUp ${balloonSpeed}s linear 1, wobble ${randomNumber(4, 12)}s ease-in-out alternate` + + //-----Add a click event + balloon.addEventListener('click', popBalloon, true) + balloonNum++ + return balloon +} + +const replaceBalloon = (balloon, index) => { + //-----Remove from the DOM + balloon.parentNode.removeChild(balloon) + + //-----Remove event listener + balloon.removeEventListener('click', popBalloon, true) + + //-----Remove from the balloons array and replace with a new balloon + state.balloons.splice(index, 1, createBalloon()) +} + +const updateBalloonPositions = () => { + if(state.balloons){ + state.balloons = state.balloons.map(balloon => { + const balloonSize = balloon.style.width + const balloonPosition = randomNumber(0 - (balloonSize / 2), getViewportWidth() - balloonSize/2 - 120) + balloon.style.left = `${balloonPosition}px` + + return balloon + }) + } +} + +const initGame = () => { + //The assign() method loads a new document. + state = Object.assign({}, DEFAULT_STATE) + updateScoreboard(0) + + if(!startScreen.classList.contains("hide")){ + startScreen.classList.add("hide") + } + + if(!gameOverScreen.classList.contains("hidden")){ + gameOverScreen.classList.remove("dialogue") + gameOverScreen.classList.add("hidden") + } + + //-----Balloon pool to store/recycle balloon elements + state.balloons = new Array(DEFAULT_STATE.balloonPoolSize) + + //-----Populate the array of balloons + for(let i=0; i < state.balloons.length; i++){ + state.balloons[i] = createBalloon() + } +} + +const startGame = () => { + //-----Set the initial game state + initGame() + + //-----Display balloons on the screen + let i = 0 + //The setInterval() method calls a function at specified intervals (in milliseconds). + state.balloonTimer = setInterval(() => { + i = i >= state.balloons.length ? 0 : i + document.body.appendChild(state.balloons[i]) + i++ + }, state.entrySpeed * 1000) + + //-----Check if balloons have left the screen and recycle them into the balloons array + state.gameTimer = setInterval(() => { + state.balloons.forEach((balloon, index) => { + if(balloon && parseInt(balloon.style.width, 10) + parseInt(getComputedStyle(balloon, null).top, 10) <= 0){ + replaceBalloon(balloon, index) + + //-----Remove a life + state.lives-- + updateScoreboard(state.score) + + if(state.lives <= 0){ + endGame() + }} + }) + }, 60) +} + +const endGame = () => { + clearInterval(state.balloonTimer) + clearInterval(state.gameTimer) + + state.balloonTimer = null; + state.gameTimer = null; + + state.balloons.forEach((balloon) => { + //-----Remove from the DOM + if(balloon.parentNode){ + balloon.parentNode.removeChild(balloon) + } + + //-----Remove event listener + balloon.removeEventListener("click", popBalloon, true) + }) + + state.balloons = null + + gameOverScreen.classList.toggle("hidden") + gameOverScreen.classList.toggle("dialogue") +} + +document.querySelector("#startGame").addEventListener("click", startGame) +document.querySelector("#tryAgain").addEventListener("click", startGame) +window.addEventListener("resize", updateBalloonPositions) + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dayan/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Dayan/style.scss new file mode 100644 index 000000000..e0c4456b9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Dayan/style.scss @@ -0,0 +1,258 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + width: 100vw; + height: 100vh; + background: rgb(195,34,108); + background: linear-gradient(339deg, rgba(195,34,108,1) 34%, rgba(157,97,27,0.9514180672268907) 76%); + display: flex; + flex-direction: column; + overflow: hidden; //The overflow is clipped, and the rest of the content will be invisible. + user-select: none; //Prevent text selection + +} + +//-----Game Style + +.game{ + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + font-family: 'Lobster', cursive; + + .top-bar { + align-items: center; + background: black; + border-bottom: 1px solid #000; + box-shadow: 1px 1px 10px #000; + color: #ccc; + display: flex; + font-size: 150%; + font-weight: 500; + justify-content: space-between; + padding: 0.5rem 1.5rem; + position: relative; + top: 0; + transition: all 500ms ease-in-out; + z-index: 1; //The balloons will go behind the bar + } +} + +.top-bar.hide{ + top: -50px; +} + +.heart-containers{ + color: rgba(210, 40, 55, 0.75); + font-size: 100%; + font-weight: 300; + text-shadow: 1px 1px 3px #333; + letter-spacing: 2px; +} + +img { + bottom: -1000px; + position: absolute; + user-select: none; +} + +.blink { + animation: lowlife 750ms ease-in-out infinite; + backface-visibility: hidden; +} + +//-----Dialogue Screen + +button{ + width: 130px; + height: 40px; + border: none; + color: #ccc; + border-radius: 5px; + padding: 10px 25px; + cursor: pointer; + background-color: black; + display: block; + letter-spacing: 2px; + padding: 0.75rem; + position: relative; + font-weight: 600; + text-transform: uppercase; + + &:hover{ + background: rgba(157,97,27,0.9514180672268907); + color: white; + outline: none; + } + + &:active{ + box-shadow: none; + left: 1px; + outline: none; + top: 2px; + } +} + +.dialogue { + align-self: center; + animation: bounceIn 800ms ease-in-out 1; + background: #ccc; + border-radius: 10px; + bottom: 50%; + box-shadow: 1px 1px 1rem #000; + display: flex; + flex-direction: column; + max-width: 75%; + min-width: 350px; + min-height: 25%; + opacity: 1; + padding: 2rem 1rem; + position: absolute; + top: 25%; + + h1{ + color: black; + display: block; + font-family: 'Lobster', cursive; + font-size: 3rem; + margin: 0; + text-shadow: 1px 1px 10px #999; + } + + span{ + padding: 1.5rem 0; + } +} + +.dialogue.hide{ + animation: bounceOut 800ms ease-in-out 1; + opacity: 0; +} + +.hidden{ + opacity: 0; + visibility: hidden; +} + +#start-screen, #gameover-screen{ + justify-content: center; + text-align: center; + padding: 1rem 0; + + span{ + margin: 0 auto; + } +} + +//-----Animation + +@keyframes bounceIn { + 0% { + transform: scale(0.1); + opacity: 0; + } + 60% { + transform: scale(1.2); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes bounceOut { + 0% { + transform: scale(1); + opacity: 1; + } + 60% { + transform: scale(1.2); + opacity: 0.5; + } + 100% { + transform: scale(0); + opacity: 0; + } +} + +@keyframes floatUp { + 0% { + top: 1000px; + } + 100% { + top: -1000px; + } +} + +@keyframes lowlife { + 0% { + color: rgba(210, 40, 55, 0.75); + } + 50% { + color: rgba(210, 30, 45, 0.95); + } + 100% { + color: rgba(210, 40, 55, 0.75); + } +} + +@keyframes pop { + 0% { + opacity: 1; + transform-origin: 50% 50%; + transform: scale(1, 1); + filter: blur(0); + } + 100% { + opacity: 0; + transform-origin: 50% 50%; + transform: scale(2, 2); + filter: blur(20px); + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 30% { + transform: scale(1.1); + } + 55% { + transform: scale(0.9); + } + 80% { + transform: scale(1.3); + } + 100% { + transform: scale(1); + } +} + +@keyframes wobble { + 0% { + transform: translateX(0); + } + 5% { + transform: translateX(31px); + } + 30% { + transform: translateX(120px); + } + 50% { + transform: translateX(92px); + } + 80% { + transform: translateX(19px); + } + 100% { + transform: translateX(0); + } +} + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Dor b/02-TypeScript/16-CRUD/home-puzzles/Dor new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/balloon.ts b/02-TypeScript/16-CRUD/home-puzzles/Esti/balloon.ts new file mode 100644 index 000000000..1860f4492 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/balloon.ts @@ -0,0 +1,74 @@ +const w_factor = 0.333 +const h_factor = 0.4 +const curvature = (4 * (Math.sqrt(2) - 1)) / 3 +const tie_w_factor = 0.12; +const tie_h_factor = 0.10; +const tie_curve_factor = 0.13; + +function Balloon(centerX, centerY, radius, color) { + this.centerX = centerX; + this.centerY = centerY; + this.radius = radius * .85; + this.baseColor = color; +} + +Balloon.prototype.draw = function () { + const centerX = this.centerX; + const centerY = this.centerY; + const radius = this.radius; + const handleLength = curvature * radius; + const widthDiff = (radius * w_factor); + const heightDiff = (radius * h_factor); + const balloonBottomY = centerY + radius + heightDiff; + + + ctx!.beginPath(); + // Section to draw the Top Left Curve + const topLeftCurveStartX = centerX - radius; + const topLeftCurveStartY = centerY; + const topLeftCurveEndX = centerX; + const topLeftCurveEndY = centerY - radius; + ctx!.moveTo(topLeftCurveStartX, topLeftCurveStartY); + ctx!.bezierCurveTo(topLeftCurveStartX, topLeftCurveStartY - handleLength - widthDiff, + topLeftCurveEndX - handleLength, topLeftCurveEndY, + topLeftCurveEndX, topLeftCurveEndY); + const topRightCurveStartX = centerX; + const topRightCurveStartY = centerY - radius; + const topRightCurveEndX = centerX + radius; + const topRightCurveEndY = centerY; + ctx!.bezierCurveTo(topRightCurveStartX + handleLength + widthDiff, topRightCurveStartY, + topRightCurveEndX, topRightCurveEndY - handleLength, + topRightCurveEndX, topRightCurveEndY); // The 2 Control points are placed in a way to get a bigger arc on the top + // Section to draw the Bottom Right Curve + const bottomRightCurveStartX = centerX + radius; + const bottomRightCurveStartY = centerY; + const bottomRightCurveEndX = centerX; + const bottomRightCurveEndY = balloonBottomY; + ctx!.bezierCurveTo(bottomRightCurveStartX, bottomRightCurveStartY + handleLength, + bottomRightCurveEndX + handleLength, bottomRightCurveEndY, + bottomRightCurveEndX, bottomRightCurveEndY); // The 2 Control points are placed in a way to get a a smaller curve at the bottom + // Section to draw the Bottom Left Curve + const bottomLeftCurveStartX = centerX; + const bottomLeftCurveStartY = balloonBottomY; + const bottomLeftCurveEndX = centerX - radius; + const bottomLeftCurveEndY = centerY; + ctx!.bezierCurveTo(bottomLeftCurveStartX - handleLength, bottomLeftCurveStartY, + bottomLeftCurveEndX, bottomLeftCurveEndY + handleLength, + bottomLeftCurveEndX, bottomLeftCurveEndY); // The 2 Control points are + //placed in a way to get a a smaller curve at the bottom + ctx!.fillStyle = this.baseColor; + ctx!.fill(); + // End balloon path + // Create balloon tie + const halfTieWidth = (radius * tie_w_factor) / 2; + const tieHeight = (radius * tie_h_factor); + const tieCurveHeight = (radius * tie_curve_factor); + ctx!.beginPath(); + ctx!.moveTo(centerX - 1, balloonBottomY); + ctx!.lineTo(centerX - halfTieWidth, balloonBottomY + tieHeight); + ctx!.quadraticCurveTo(centerX, balloonBottomY + tieCurveHeight, + centerX + halfTieWidth, balloonBottomY + tieHeight); + ctx!.lineTo(centerX + 1, balloonBottomY); // Quadratic Curve to make a slightly curved triangle at the bottom + ctx!.fill(); +} + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Esti/control.ts new file mode 100644 index 000000000..d0d5b0e44 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/control.ts @@ -0,0 +1,125 @@ + +const balloonCanvas = document.getElementById("balloon") as HTMLCanvasElement +const mainDiv = document.getElementById("main") as HTMLDivElement +const sorce = document.getElementById("sorce") as HTMLDivElement +const btn = document.getElementById("btn") as HTMLDivElement + +const ctx = balloonCanvas.getContext('2d') + +const widthScreen = window.innerWidth +const heightScreen = window.innerHeight +let hue = 0 +let indexCatch = true +let pos = 0 +let posR = 0 +let builtDivTrue = false +let live = 0 +let indexBalloon = 0 +let moveImg:any = null +let playImg:any = null +let balloonPlay:any = null +let start = false +let timeOut:any = null; +// const audioElement = new Audio("/public/lib/song.mp3"); + + +// גודל מסך + +const windowWidth = window.innerWidth +const windowHeight = window.innerHeight + +mainDiv.addEventListener("click", () => { + if(indexCatch){ + console.log(hue + " 1") + hue += 200 + + + builtDiv() + indexCatch = false + }else{ + console.log(hue + " 2") + indexCatch = true + mainDiv.hidden = true + indexBalloon ++ + sorceB() + } + }) + + +function startGame(){ + cleanScreen() + + clearInterval(balloonPlay); + balloonPlay = setInterval(ballonPlay, 3000); +} + + function builtDiv() { + const balloon1 = new Balloon(30, 30, 30, "hsl(" + hue + ",100%, 50%)"); + balloon1.draw(0); + indexCatch = true + + } + + + + // balloon pop + + function ballonPlay() { + mainDiv.hidden = false + hue = Math.floor(Math.random() * 1000) + builtDiv() + + + let posB = windowHeight * -1 + 150; + let posR = (Math.random() * windowWidth) + + clearInterval(moveImg); + + moveImg = setInterval(moveBalloon, 10); + + function moveBalloon() { + let balloonMove = document.getElementById("main") as HTMLElement; + + if (posB == 1000) { + + clearInterval(moveImg); + + } else { + posB++ + balloonMove!.style.bottom = `${posB}px`; + + if(posR < windowWidth/2){ + posR++ + }else{ + posR-- + } + balloonMove!.style.left = `${posR}px`; + } + + } + + } + + + function cleanScreen(){ + pos = 0 + posR = 0 + builtDivTrue = false + live = 0 + moveImg = null + playImg = null + balloonPlay = null + indexCatch = true + + } + + function sorceB(){ + sorce.innerHTML = indexBalloon.toString() + } + + btn.addEventListener("click", () => { + console.log("DDD") + clearInterval(moveImg) + clearInterval(balloonPlay) + + }) \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/balloon.js b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/balloon.js new file mode 100644 index 000000000..5d31df86b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/balloon.js @@ -0,0 +1,60 @@ +var w_factor = 0.333; +var h_factor = 0.4; +var curvature = (4 * (Math.sqrt(2) - 1)) / 3; +var tie_w_factor = 0.12; +var tie_h_factor = 0.10; +var tie_curve_factor = 0.13; +function Balloon(centerX, centerY, radius, color) { + this.centerX = centerX; + this.centerY = centerY; + this.radius = radius * .85; + this.baseColor = color; +} +Balloon.prototype.draw = function () { + var centerX = this.centerX; + var centerY = this.centerY; + var radius = this.radius; + var handleLength = curvature * radius; + var widthDiff = (radius * w_factor); + var heightDiff = (radius * h_factor); + var balloonBottomY = centerY + radius + heightDiff; + ctx.beginPath(); + // Section to draw the Top Left Curve + var topLeftCurveStartX = centerX - radius; + var topLeftCurveStartY = centerY; + var topLeftCurveEndX = centerX; + var topLeftCurveEndY = centerY - radius; + ctx.moveTo(topLeftCurveStartX, topLeftCurveStartY); + ctx.bezierCurveTo(topLeftCurveStartX, topLeftCurveStartY - handleLength - widthDiff, topLeftCurveEndX - handleLength, topLeftCurveEndY, topLeftCurveEndX, topLeftCurveEndY); + var topRightCurveStartX = centerX; + var topRightCurveStartY = centerY - radius; + var topRightCurveEndX = centerX + radius; + var topRightCurveEndY = centerY; + ctx.bezierCurveTo(topRightCurveStartX + handleLength + widthDiff, topRightCurveStartY, topRightCurveEndX, topRightCurveEndY - handleLength, topRightCurveEndX, topRightCurveEndY); // The 2 Control points are placed in a way to get a bigger arc on the top + // Section to draw the Bottom Right Curve + var bottomRightCurveStartX = centerX + radius; + var bottomRightCurveStartY = centerY; + var bottomRightCurveEndX = centerX; + var bottomRightCurveEndY = balloonBottomY; + ctx.bezierCurveTo(bottomRightCurveStartX, bottomRightCurveStartY + handleLength, bottomRightCurveEndX + handleLength, bottomRightCurveEndY, bottomRightCurveEndX, bottomRightCurveEndY); // The 2 Control points are placed in a way to get a a smaller curve at the bottom + // Section to draw the Bottom Left Curve + var bottomLeftCurveStartX = centerX; + var bottomLeftCurveStartY = balloonBottomY; + var bottomLeftCurveEndX = centerX - radius; + var bottomLeftCurveEndY = centerY; + ctx.bezierCurveTo(bottomLeftCurveStartX - handleLength, bottomLeftCurveStartY, bottomLeftCurveEndX, bottomLeftCurveEndY + handleLength, bottomLeftCurveEndX, bottomLeftCurveEndY); // The 2 Control points are + //placed in a way to get a a smaller curve at the bottom + ctx.fillStyle = this.baseColor; + ctx.fill(); + // End balloon path + // Create balloon tie + var halfTieWidth = (radius * tie_w_factor) / 2; + var tieHeight = (radius * tie_h_factor); + var tieCurveHeight = (radius * tie_curve_factor); + ctx.beginPath(); + ctx.moveTo(centerX - 1, balloonBottomY); + ctx.lineTo(centerX - halfTieWidth, balloonBottomY + tieHeight); + ctx.quadraticCurveTo(centerX, balloonBottomY + tieCurveHeight, centerX + halfTieWidth, balloonBottomY + tieHeight); + ctx.lineTo(centerX + 1, balloonBottomY); // Quadratic Curve to make a slightly curved triangle at the bottom + ctx.fill(); +}; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/control.js new file mode 100644 index 000000000..70e966349 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/control.js @@ -0,0 +1,93 @@ +var balloonCanvas = document.getElementById("balloon"); +var mainDiv = document.getElementById("main"); +var sorce = document.getElementById("sorce"); +var btn = document.getElementById("btn"); +var ctx = balloonCanvas.getContext('2d'); +var widthScreen = window.innerWidth; +var heightScreen = window.innerHeight; +var hue = 0; +var indexCatch = true; +var pos = 0; +var posR = 0; +var builtDivTrue = false; +var live = 0; +var indexBalloon = 0; +var moveImg = null; +var playImg = null; +var balloonPlay = null; +var start = false; +var timeOut = null; +// const audioElement = new Audio("/public/lib/song.mp3"); +// גודל מסך +var windowWidth = window.innerWidth; +var windowHeight = window.innerHeight; +mainDiv.addEventListener("click", function () { + if (indexCatch) { + console.log(hue + " 1"); + hue += 200; + builtDiv(); + indexCatch = false; + } + else { + console.log(hue + " 2"); + indexCatch = true; + mainDiv.hidden = true; + indexBalloon++; + sorceB(); + } +}); +function startGame() { + cleanScreen(); + clearInterval(balloonPlay); + balloonPlay = setInterval(ballonPlay, 3000); +} +function builtDiv() { + var balloon1 = new Balloon(30, 30, 30, "hsl(" + hue + ",100%, 50%)"); + balloon1.draw(0); + indexCatch = true; +} +// balloon pop +function ballonPlay() { + mainDiv.hidden = false; + hue = Math.floor(Math.random() * 1000); + builtDiv(); + var posB = windowHeight * -1 + 150; + var posR = (Math.random() * windowWidth); + clearInterval(moveImg); + moveImg = setInterval(moveBalloon, 10); + function moveBalloon() { + var balloonMove = document.getElementById("main"); + if (posB == 1000) { + clearInterval(moveImg); + } + else { + posB++; + balloonMove.style.bottom = posB + "px"; + if (posR < windowWidth / 2) { + posR++; + } + else { + posR--; + } + balloonMove.style.left = posR + "px"; + } + } +} +function cleanScreen() { + pos = 0; + posR = 0; + builtDivTrue = false; + live = 0; + moveImg = null; + playImg = null; + balloonPlay = null; + indexCatch = true; +} +function sorceB() { + sorce.innerHTML = indexBalloon.toString(); +} +btn.addEventListener("click", function () { + console.log("DDD"); + clearInterval(moveImg); + clearInterval(balloonPlay); +}); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/index.js new file mode 100644 index 000000000..c62610f47 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/index.js @@ -0,0 +1 @@ +startGame(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/model.js new file mode 100644 index 000000000..a20ed5fc8 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/model.js @@ -0,0 +1,11 @@ +var balloonC = []; +var BalloonCalss = /** @class */ (function () { + function BalloonCalss() { + this.balloonC = new (BalloonCalss); + this.x = Math.random() * balloonCanvas.width; + this.y = Math.random() * balloonCanvas.height; + this.radius = Math.floor(Math.random() * 30 + 25); + this.color = "hsl(" + Math.floor(Math.random() * 1000) + ",100%, 50%)"; + } + return BalloonCalss; +}()); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/style.css new file mode 100644 index 000000000..4ef0e06c0 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/dist/style.css @@ -0,0 +1,46 @@ +* { + margin: 0; + padding: 0; +} + +html { + height: 100vh; + width: 100vw; +} + +body { + background-image: url("https://w7.pngwing.com/pngs/717/981/png-transparent-birthday-summer-desktop-house-scenery-television-wish-holidays-thumbnail.png"); + background-color: #cccccc; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; +} + +.container { + width: 100%; + height: 100%; +} + +#main { + position: absolute; +} +#main .balloon { + height: 30px; + width: 30px; +} + +#sorce { + font-size: 60px; + font-family: Georgia; + color: blue; + margin-left: 10px; +} + +#btn { + font-size: 30px; + font-family: Georgia; + color: blue; + margin-left: 10px; + border-radius: 4px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/index.html b/02-TypeScript/16-CRUD/home-puzzles/Esti/index.html new file mode 100644 index 000000000..7ce8b87bd --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/index.html @@ -0,0 +1,25 @@ + + + + + + + Balloon + + + + + + + + +
                +
                + +
                +
                +
                + +
                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Esti/index.ts new file mode 100644 index 000000000..ebb64893d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/index.ts @@ -0,0 +1 @@ +startGame() diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Esti/model.ts new file mode 100644 index 000000000..9d77b1571 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/model.ts @@ -0,0 +1,18 @@ +const balloonC = [] + +class BalloonCalss { + public x:number + public y:number + public radius:number + public color:string + + + constructor(){ + this.x = Math.random() * balloonCanvas.width + this.y = Math.random() * balloonCanvas.height; + this.radius = Math.floor(Math.random() * 30 + 25); + this.color = "hsl(" + Math.floor(Math.random() * 1000) + ",100%, 50%)"; + } + + balloonC = new(BalloonCalss) +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Esti/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Esti/style.scss new file mode 100644 index 000000000..ae6d5f6f9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Esti/style.scss @@ -0,0 +1,50 @@ +*{ + margin: 0; + padding: 0; +} + + +html{ + height: 100vh; + width: 100vw; +} + +body{ + background-image: url("https://w7.pngwing.com/pngs/717/981/png-transparent-birthday-summer-desktop-house-scenery-television-wish-holidays-thumbnail.png"); + background-color: #cccccc; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + position: relative; +} +.container{ + width: 100%; + height: 100%; +} + + +#main{ + position: absolute; + + .balloon{ + height: 30px; + width: 30px; + } +} + +#sorce{ + font-size: 60px; + font-family: Georgia; + color: blue; + margin-left: 10px; + +} + +#btn{ + font-size: 30px; + font-family: Georgia; + color: blue; + margin-left: 10px; + border-radius: 4px; + +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/control.ts new file mode 100644 index 000000000..cc8486fac --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/control.ts @@ -0,0 +1,154 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const sn = ev.target.elements.sn.value; + const img = ev.target.elements.img.value; + + items.push(new Item(name, color, price, category, sn, img)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                S/N: ${item.sn}
                + + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function newPrice(uid: string) { + try { + const priceUpdate = prompt("add new price") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} +function newSN(uid: string) { + try { + const priceUpdate = prompt("add new SN") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].sn) { + items[index].sn = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} +function newCategory(uid: string) { + try { + const priceUpdate = prompt("add new Category") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].category) { + items[index].category = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} +function newName(uid: string) { + try { + const priceUpdate = prompt("add new Name") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].name) { + items[index].name = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/control.js new file mode 100644 index 000000000..596d39baa --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/control.js @@ -0,0 +1,153 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var sn = ev.target.elements.sn.value; + var img = ev.target.elements.img.value; + items.push(new Item(name, color, price, category, sn, img)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                S/N: " + item.sn + "
                \n \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function newPrice(uid) { + try { + var priceUpdate = prompt("add new price"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newSN(uid) { + try { + var priceUpdate = prompt("add new SN"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].sn) { + items[index].sn = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newCategory(uid) { + try { + var priceUpdate = prompt("add new Category"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].category) { + items[index].category = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newName(uid) { + try { + var priceUpdate = prompt("add new Name"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].name) { + items[index].name = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/model.js new file mode 100644 index 000000000..05c3a494f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, sn, img) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.sn = sn; + this.img = img; + this.uid = uid(); + } + return Item; +}()); +var items = []; +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345") +console.log(items); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/style.css new file mode 100644 index 000000000..6f5f2b39d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/style.css @@ -0,0 +1,57 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +h1, a { + color: red; + display: grid; + justify-content: center; + text-align: center; +} + +body { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/index.html b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/index.html new file mode 100644 index 000000000..64f502f94 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/index.html @@ -0,0 +1,18 @@ + + + + + + + GmaeStop + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/model.ts new file mode 100644 index 000000000..a99187109 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public sn: string, + public img: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345") +console.log(items) diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/setProduct.html b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/setProduct.html new file mode 100644 index 000000000..65f870b4c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/setProduct.html @@ -0,0 +1,45 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Add product +

                + Store +
                + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/style.css b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/style.css new file mode 100644 index 000000000..459bb73ed --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/style.css @@ -0,0 +1,57 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +h1, a { + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; +} + +body { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/style.scss new file mode 100644 index 000000000..5300829ad --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/style.scss @@ -0,0 +1,58 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} + +h1, a{ + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; + + } + + body{ + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + } diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task 1/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/control.ts new file mode 100644 index 000000000..ea57dca06 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/control.ts @@ -0,0 +1,63 @@ +function generateBalloon() { + try { + var balloon = document.createElement("div"); + balloon.classList.add("balloon"); + xPos = Math.random() * (gameWidth - 50); + yPos = Math.random() * (gameHeight - 80); + balloon.style.left = xPos + "px"; + balloon.style.top = yPos + "px"; + balloon.addEventListener("click", pop); + + document.querySelector("#game").appendChild(balloon); + balloons.push(balloon); +} + catch (error) { + + } +} + +function pop() { + try { + this.style.display = "none"; + score++; + document.querySelector("#score").innerHTML = score; + + let index = balloons.indexOf(this); + balloons.splice(index, 1); +} + catch (error) { + console.error(error) + } +} + + +for (let i = 0; i < 20; i++) { + generateBalloon(); +} + + +function moveBalloons() { + try { + for (let i = 0; i < balloons.length; i++) { + let balloon = balloons[i]; + + let xPos = parseInt(balloon.style.left); + let yPos = parseInt(balloon.style.top); + + if (xPos + 50 >= gameWidth || xPos <= 0) { + balloon.xVel = -balloon.xVel; + } + if (yPos + 80 >= gameHeight || yPos <= 0) { + balloon.yVel = -balloon.yVel; + } + + xPos += xVel; + yPos += yVel; + balloon.style.left = xPos + "px"; + balloon.style.top = yPos + "px"; + } +} + catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/control.js new file mode 100644 index 000000000..5c6865f83 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/control.js @@ -0,0 +1,52 @@ +function generateBalloon() { + try { + var balloon = document.createElement("div"); + balloon.classList.add("balloon"); + xPos = Math.random() * (gameWidth - 50); + yPos = Math.random() * (gameHeight - 80); + balloon.style.left = xPos + "px"; + balloon.style.top = yPos + "px"; + balloon.addEventListener("click", pop); + document.querySelector("#game").appendChild(balloon); + balloons.push(balloon); + } + catch (error) { + } +} +function pop() { + try { + this.style.display = "none"; + score++; + document.querySelector("#score").innerHTML = score; + var index = balloons.indexOf(this); + balloons.splice(index, 1); + } + catch (error) { + console.error(error); + } +} +for (var i = 0; i < 20; i++) { + generateBalloon(); +} +function moveBalloons() { + try { + for (var i = 0; i < balloons.length; i++) { + var balloon = balloons[i]; + var xPos = parseInt(balloon.style.left); + var yPos = parseInt(balloon.style.top); + if (xPos + 50 >= gameWidth || xPos <= 0) { + balloon.xVel = -balloon.xVel; + } + if (yPos + 80 >= gameHeight || yPos <= 0) { + balloon.yVel = -balloon.yVel; + } + xPos += xVel; + yPos += yVel; + balloon.style.left = xPos + "px"; + balloon.style.top = yPos + "px"; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/index.js new file mode 100644 index 000000000..c3ec9159b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/index.js @@ -0,0 +1,2 @@ +setInterval(generateBalloon, 2000); +setInterval(moveBalloons, 50); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/model.js new file mode 100644 index 000000000..db4625844 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/model.js @@ -0,0 +1,14 @@ +var Balloons = /** @class */ (function () { + function Balloons(color, img, exploded) { + this.color = color; + this.img = img; + this.exploded = exploded; + } + return Balloons; +}()); +var balloons = []; +var xVel = 1; +var yVel = 2; +var score = 0; +var xPos; +var yPos; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/style.css new file mode 100644 index 000000000..4c252e5e2 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/style.css @@ -0,0 +1,57 @@ +@charset "UTF-8"; +#game { + position: relative; + width: 100vw; + height: 100wh; + background-color: lightblue; +} + +.balloon { + position: absolute; + height: 125px; + background-color: green; + width: 105px; + border-radius: 75% 75% 70% 70%; + animation: MoveUpDown 1s linear infinite; +} + +.balloon:before { + content: ""; + height: 75px; + width: 1px; + padding: 1px; + background-color: #FDFD96; + display: block; + position: absolute; + top: 125px; + left: 0; + right: 0; + margin: auto; +} + +.balloon:after { + content: "▲"; + text-align: center; + display: block; + position: absolute; + color: inherit; + top: 120px; + left: 0; + right: 0; + margin: auto; +} + +.move { + animation: move 2s linear infinite; +} + +@keyframes float { + from { + transform: translateY(100vh); + opacity: 1; + } + to { + transform: translateY(-300vh); + opacity: 0; + } +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/view.js new file mode 100644 index 000000000..7ac66fb47 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/dist/view.js @@ -0,0 +1,2 @@ +var gameWidth = document.querySelector("#game").clientWidth; +var gameHeight = document.querySelector("#game").clientHeight; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/index.html b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/index.html new file mode 100644 index 000000000..7fd88c2cd --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/index.html @@ -0,0 +1,21 @@ + + + + + + + ballons game + + + + + + + + +

                Pop the Balloons

                +
                +
                +

                Score: 0

                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/index.ts new file mode 100644 index 000000000..4661c606c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/index.ts @@ -0,0 +1,2 @@ +setInterval(generateBalloon , 2000) +setInterval(moveBalloons, 50); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/model.ts new file mode 100644 index 000000000..b2e4d82ee --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/model.ts @@ -0,0 +1,15 @@ +class Balloons{ + style: any; + constructor( + public color : string, + public img : string, + public exploded : boolean + ){} +} +const balloons: Balloons [] = []; + +let xVel = 1; +let yVel = 2; +let score = 0; +let xPos: number; +let yPos : number; \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/style.scss new file mode 100644 index 000000000..8d5daaae2 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/style.scss @@ -0,0 +1,51 @@ +#game { + position: relative; + width: 100vw; + height: 100wh; + background-color: lightblue; +} + +.balloon { + position: absolute; + height: 125px; + background-color: green; + width: 105px; + border-radius: 75% 75% 70% 70%; + animation: MoveUpDown 1s linear infinite; +} + +.balloon:before { + content: ""; + height: 75px; + width: 1px; + padding: 1px; + background-color: #FDFD96; + display: block; + position: absolute; + top: 125px; + left: 0; + right: 0; + margin: auto; +} +.balloon:after { + content: "▲"; + text-align: center; + display: block; + position: absolute; + color: inherit; + top: 120px; + left: 0; + right: 0; + margin: auto; +} + +.move { + animation: move 2s linear infinite; +} + +@keyframes float { + from {transform: translateY(100vh); + opacity: 1;} + to {transform: translateY(-300vh); + opacity: 0;} +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/view.ts new file mode 100644 index 000000000..3a10f268a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Itai-G/task2/view.ts @@ -0,0 +1,2 @@ +const gameWidth = document.querySelector("#game").clientWidth; +const gameHeight = document.querySelector("#game").clientHeight; \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/control.ts new file mode 100644 index 000000000..c968dab14 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/control.ts @@ -0,0 +1,63 @@ +function handleAddItem (ev: any) { + try { + ev.preventDefault(); + + debugger + const name = ev.target.elements.name.value; + const price = ev.target.elements.price.valueAsNumber; + const imgLink = ev.target.elements.imgLink.value; + const serialNumber = ev.target.elements.serialNumber.value; + + products.push(new Product(name, price, imgLink, serialNumber)); + ev.target.reset(); + + if (!productRoot) throw new Error("productRoot is null") + + productRoot.innerHTML = renderProducts(products); + } catch (error) { + console.error(error); + } +} + + + +function renderProducts(products: Product[]): string { + try { + if (!products || !Array.isArray(products)) + throw new Error("products is not an array"); + + const html = products + .map((product) => { + return ` +
                +

                ${product.name}

                +
                Price: ${product.price}
                +
                Img link: ${product.imgLink}
                +
                Serial number: ${product.serialNumber}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } + + } + + + function handleDeleteProduct(serialNumber: string) { + try { + const index = products.findIndex((product) => product.serialNumber === serialNumber); + if (index === -1) throw new Error("product is not found"); + products.splice(index, 1); + + if (!productRoot) throw new Error("productRoot is undefined"); + productRoot.innerHTML = renderProducts(products); + } catch (error) { + console.error(error); + } + } \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/control.js new file mode 100644 index 000000000..52721d14f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/control.js @@ -0,0 +1,49 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + debugger; + var name = ev.target.elements.name.value; + var price = ev.target.elements.price.valueAsNumber; + var imgLink = ev.target.elements.imgLink.value; + var serialNumber = ev.target.elements.serialNumber.value; + products.push(new Product(name, price, imgLink, serialNumber)); + ev.target.reset(); + if (!productRoot) + throw new Error("productRoot is null"); + productRoot.innerHTML = renderProducts(products); + } + catch (error) { + console.error(error); + } +} +function renderProducts(products) { + try { + if (!products || !Array.isArray(products)) + throw new Error("products is not an array"); + var html = products + .map(function (product) { + return "\n
                \n

                " + product.name + "

                \n
                Price: " + product.price + "
                \n
                Img link: " + product.imgLink + "
                \n
                Serial number: " + product.serialNumber + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteProduct(serialNumber) { + try { + var index = products.findIndex(function (product) { return product.serialNumber === serialNumber; }); + if (index === -1) + throw new Error("product is not found"); + products.splice(index, 1); + if (!productRoot) + throw new Error("productRoot is undefined"); + productRoot.innerHTML = renderProducts(products); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/model.js new file mode 100644 index 000000000..17441bd77 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/model.js @@ -0,0 +1,10 @@ +var Product = /** @class */ (function () { + function Product(name, price, imgLink, serialNumber) { + this.name = name; + this.price = price; + this.imgLink = imgLink; + this.serialNumber = serialNumber; + } + return Product; +}()); +var products = []; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/view.js new file mode 100644 index 000000000..d4ec4ddd3 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/dist/view.js @@ -0,0 +1 @@ +var productRoot = document.querySelector('#productRoot'); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/index.html b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/index.html new file mode 100644 index 000000000..fade14240 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + + + + + +

                Pharmacy

                +
                + + + + + +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/model.ts new file mode 100644 index 000000000..df5f0cb39 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/model.ts @@ -0,0 +1,14 @@ +class Product { + + constructor( + public name: string, + public price: number, + public imgLink: string, + public serialNumber: string, + ){} + +} + +const products:Product[]= []; + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/view.ts new file mode 100644 index 000000000..942b97eed --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Karin-levi/view.ts @@ -0,0 +1 @@ +const productRoot = document.querySelector('#productRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Kseniya/addNewItem.html b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/addNewItem.html new file mode 100644 index 000000000..93d18b1d1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/addNewItem.html @@ -0,0 +1,25 @@ + + + + + + + Candy Shop + + + +

                Welcome to the Candy Shop

                + back to the shop +
                + + + + +
                +
                + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Kseniya/dist/addNewItem.js b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/dist/addNewItem.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Kseniya/dist/main.js b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/dist/main.js new file mode 100644 index 000000000..9f7a0b54c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/dist/main.js @@ -0,0 +1,74 @@ +var uniqueId = Date.now().toString(36) + Math.random().toString(36).substring(2); +var shopItems = []; +var addItem = function (item) { + try { + item === null || item === void 0 ? void 0 : item.preventDefault(); + var name = item.target.elements.name.value; + var candyType = item.target.elements.candyType.value; + var price = item.target.elements.price.value; + var id = uniqueId; + var newItem = { name: name, candyType: candyType, price: price, id: id }; + shopItems.push(newItem); + item.target.reset(); + if (!itemsRoot) + throw new Error("error"); + itemsRoot.innerHTML = renderItems(shopItems); + } + catch (error) { + console.error(error); + } +}; +var itemsRoot = document.getElementById("itemsRoot"); +function renderItems(item) { + try { + if (!item || !Array.isArray(item)) + throw new Error("items is not an array"); + var html = item + .map(function (item) { + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + " \n
                \n \n \n
                \n
                Category: " + item.candyType + "
                \n \n
                \n "; + }) + .join(" "); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function newPrice(id) { + var item = document.getElementById("" + id); + if (item) + item.style.display = "none"; + var formUpdate = document.getElementById("update-price-" + id); + formUpdate && document.body.appendChild(formUpdate); + if (formUpdate) + formUpdate.style.display = "block"; +} +function handleUpdatedPrice(item) { + try { + console.log(item); + // const formUpdate = document.getElementById(`update-price-${id}`); + // const html = document.getElementById(`${id}`); + // console.log(html) + // if (formUpdate) html?.appendChild(formUpdate); + // item?.preventDefault(); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(shopItems); + } + catch (error) { + console.log(error); + } +} +function handleDeleteItem(id) { + try { + var index = shopItems.findIndex(function (item) { return item.id === id; }); + shopItems.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(shopItems); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Kseniya/main.ts b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/main.ts new file mode 100644 index 000000000..3482f655f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/main.ts @@ -0,0 +1,96 @@ +interface IShopItem { + name: string; + candyType: string; + price: number; + id: string; +} +let uniqueId = + Date.now().toString(36) + Math.random().toString(36).substring(2); + +const shopItems: IShopItem[] = []; + +const addItem = (item) => { + try { + item?.preventDefault(); + + const name = item.target.elements.name.value; + const candyType = item.target.elements.candyType.value; + const price = item.target.elements.price.value; + const id = uniqueId; + const newItem: IShopItem = { name, candyType, price, id }; + shopItems.push(newItem); + item.target.reset(); + + if (!itemsRoot) throw new Error("error"); + itemsRoot.innerHTML = renderItems(shopItems); + } catch (error) { + console.error(error); + } +}; + +const itemsRoot = document.getElementById("itemsRoot"); + +function renderItems(item: IShopItem[]): string { + try { + if (!item || !Array.isArray(item)) throw new Error("items is not an array"); + + const html = item + .map((item) => { + return ` +
                +

                ${item.name}

                +
                Price: ${item.price} + +
                Category: ${item.candyType}
                + +
                + `; + }) + .join(" "); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function newPrice(id: string) { + const item = document.getElementById(`${id}`); + + if (item) item.style.display = "none"; + const formUpdate = document.getElementById(`update-price-${id}`); + + formUpdate && document.body.appendChild(formUpdate) + + if (formUpdate) formUpdate.style.display = "block"; +} + +function handleUpdatedPrice(item) { + try { + console.log(item); + // const formUpdate = document.getElementById(`update-price-${id}`); + // const html = document.getElementById(`${id}`); + // console.log(html) + // if (formUpdate) html?.appendChild(formUpdate); + // item?.preventDefault(); + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(shopItems); + } catch (error) { + console.log(error); + } +} + +function handleDeleteItem(id: string) { + try { + const index = shopItems.findIndex((item) => item.id === id); + shopItems.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(shopItems); + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Kseniya/store.html b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/store.html new file mode 100644 index 000000000..1fff68078 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Kseniya/store.html @@ -0,0 +1,14 @@ + + + + + + + Candy Shop + + + +

                Welcome to the Candy Shop

                + add new item + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/controller.js b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/controller.js new file mode 100644 index 000000000..ef4e57c14 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/controller.js @@ -0,0 +1,42 @@ +var newBalls = new Balls(); +var numOfBalls = 10; +newBalls.drawBalls(numOfBalls); +var balls = document.querySelectorAll('.ball'); +balls.forEach(function (ball) { + try { + var containerWidth = ballsContainer === null || ballsContainer === void 0 ? void 0 : ballsContainer.offsetWidth; + var containerHeight = ballsContainer === null || ballsContainer === void 0 ? void 0 : ballsContainer.offsetHeight; + var getRandomWidth = function (min, max) { return Math.random() * max; }; + var getRandomHeight = function (min, max) { return Math.random() * max; }; + var randomNum = Math.floor(Math.random() * 5 + 1); + var randomSize = Math.random() * 100 + 20; + ball.style.width = randomSize.toString() + "px"; + ball.style.height = randomSize.toString() + "px"; + ball.style.backgroundColor = getRandomColor(); + if (containerWidth != undefined && containerHeight != undefined) { + ball.style.left = getRandomWidth(0, containerWidth - 600) + 'px'; + ball.style.top = getRandomHeight(0, containerHeight - 300) + 'px'; + } + ball.innerText = randomNum.toString(); + ball.addEventListener("click", function (e) { + var numOfLives = ball.innerText; + ball.innerText = (parseInt(numOfLives) - 1).toString(); + ball.style.backgroundColor = getRandomColor(); + if (parseInt(numOfLives) <= 1) { + ball.remove(); + numOfBalls -= 1; + } + }); + } + catch (error) { + console.error(error); + } +}); +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/model.js b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/model.js new file mode 100644 index 000000000..eb1a2278c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/model.js @@ -0,0 +1,10 @@ +var Balls = /** @class */ (function () { + function Balls() { + } + Balls.prototype.drawBalls = function (amount) { + for (var i = 1; i < amount; i++) { + ballsContainer === null || ballsContainer === void 0 ? void 0 : ballsContainer.insertAdjacentHTML('beforeend', ""); + } + }; + return Balls; +}()); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/view.js b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/view.js new file mode 100644 index 000000000..9f781a607 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/scripts/view.js @@ -0,0 +1 @@ +var ballsContainer = document.querySelector('.ballsContainer'); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/styles/style.css b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..0584b4c1a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,32 @@ +html { + min-width: 100vw; + min-height: 100vh; + position: relative; +} + +body { + position: absolute; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); +} + +.ballsContainer { + position: relative; + width: 100%; + height: 100%; +} +.ballsContainer .ball { + position: relative; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + font-size: 20px; + text-align: center; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/controller.ts b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/controller.ts new file mode 100644 index 000000000..f30112f6b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/controller.ts @@ -0,0 +1,49 @@ +const newBalls:any = new Balls(); +let numOfBalls = 10; +newBalls.drawBalls(numOfBalls); +const balls:NodeListOf = document.querySelectorAll('.ball'); + +balls.forEach(ball => { + try { + const containerWidth = ballsContainer?.offsetWidth; + const containerHeight = ballsContainer?.offsetHeight; + const getRandomWidth = (min, max) => Math.random()*max; + const getRandomHeight = (min, max) => Math.random()*max; + const randomNum = Math.floor(Math.random()*5 + 1); + const randomSize = Math.random()*100 + 20; + ball.style.width = `${randomSize.toString()}px`; + ball.style.height = `${randomSize.toString()}px`; + ball.style.backgroundColor = getRandomColor(); + + if (containerWidth != undefined && containerHeight != undefined){ + ball.style.left= getRandomWidth(0, containerWidth - 600)+'px'; + ball.style.top = getRandomHeight(0, containerHeight - 300)+'px'; + } + ball.innerText = randomNum.toString(); + ball.addEventListener("click", e => { + const numOfLives = ball.innerText; + ball.innerText = (parseInt(numOfLives)-1).toString(); + ball.style.backgroundColor = getRandomColor(); + + if (parseInt(numOfLives) <= 1){ + ball.remove(); + numOfBalls -=1; + } + }) + + } catch (error) { + console.error(error) + } +}) + + + + +function getRandomColor() { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; + } \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/index.html b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..2df261c3e --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + Document + + +
                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/model.ts new file mode 100644 index 000000000..de0370509 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/model.ts @@ -0,0 +1,12 @@ +class Balls { + amount: number; + constructor(){ + } + + drawBalls(amount) { + for (let i = 1 ; i`) + } + } +} + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..2afe72e4b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/style.scss @@ -0,0 +1,36 @@ +html { + min-width: 100vw; + min-height: 100vh; + position: relative; +} + +body { + position: absolute; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); +} + +.ballsContainer{ + position: relative; + width: 100%; + height: 100%; + + .ball { + position: relative; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + font-size: 20px; + text-align: center; + + } +} + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/view.ts new file mode 100644 index 000000000..3f287c8d1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Nikita Rossenko/src/view.ts @@ -0,0 +1 @@ +const ballsContainer:HTMLDivElement | null = document.querySelector('.ballsContainer'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/control.ts new file mode 100644 index 000000000..a348a4557 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/control.ts @@ -0,0 +1,96 @@ +const movies:Movie[] = [] +try { + if(!form) throw new Error("Form is empty"); + form.addEventListener('submit', (ev:any) => { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const category = ev.target.elements.category.value; + const date = ev.target.elements.date.value; + movies.push(new Movie(name,date,category)) + ev.target.reset() + + render(movies, output) + }) +} catch (error) { + console.error(Error); + +} + +function render(movies:Movie[], output:HTMLElement) { + try { + if(!movies) throw new Error("array empty"); + output.innerHTML = "" + const html = movies.map((mv) => { + return ` +
                +

                ${mv.getName()}

                +

                ${mv.getCategory()}

                +

                ${mv.getDate()}

                + + +
                + ` + }) + + html.forEach((ele) => { + output.innerHTML += ele + }) + } catch (error) { + console.error(Error); + return "" + + } +} + +function editMovie(id:number) { + try { + if(!movies) throw new Error("movies empty"); + const index = movies.findIndex((mv) => mv.getId() === id) + if(index == -1) throw new Error("movie not found"); + output.innerHTML =` +
                + + + + +
                + ` + const form = document.getElementById("theEditForm") + if(!form) throw new Error("form empty"); + + form.addEventListener('submit', (ev:any) => { + ev.preventDefault(); + const index = movies.findIndex((mv) => mv.getId() === id) + if(id == -1) throw new Error("movie not found"); + const name = ev.target.elements.name.value; + const category = ev.target.elements.category.value; + const date = ev.target.elements.date.value; + movies[index].setName(name) + movies[index].setDate(date) + movies[index].setCategory(category) + ev.target.reset() + render(movies, output) + }) + + } catch (error) { + console.error(Error); + } +} + +function deleteMovie(id:number) { + try { + if(!movies) throw new Error("movies empty"); + const index = movies.findIndex((mv) => mv.getId() === id) + if(id == -1) throw new Error("movie not found"); + movies.splice(index,1) + render(movies, output) + + } catch (error) { + console.error(Error); + + } +} + + + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/control.js new file mode 100644 index 000000000..978219f43 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/control.js @@ -0,0 +1,78 @@ +var movies = []; +try { + if (!form) + throw new Error("Form is empty"); + form.addEventListener('submit', function (ev) { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var category = ev.target.elements.category.value; + var date = ev.target.elements.date.value; + movies.push(new Movie(name, date, category)); + ev.target.reset(); + render(movies, output); + }); +} +catch (error) { + console.error(Error); +} +function render(movies, output) { + try { + if (!movies) + throw new Error("array empty"); + output.innerHTML = ""; + var html = movies.map(function (mv) { + return "\n
                \n

                " + mv.getName() + "

                \n

                " + mv.getCategory() + "

                \n

                " + mv.getDate() + "

                \n \n \n
                \n "; + }); + html.forEach(function (ele) { + output.innerHTML += ele; + }); + } + catch (error) { + console.error(Error); + return ""; + } +} +function editMovie(id) { + try { + if (!movies) + throw new Error("movies empty"); + var index = movies.findIndex(function (mv) { return mv.getId() === id; }); + if (index == -1) + throw new Error("movie not found"); + output.innerHTML = "\n
                \n \n \n \n \n
                \n "; + var form = document.getElementById("theEditForm"); + if (!form) + throw new Error("form empty"); + form.addEventListener('submit', function (ev) { + ev.preventDefault(); + var index = movies.findIndex(function (mv) { return mv.getId() === id; }); + if (id == -1) + throw new Error("movie not found"); + var name = ev.target.elements.name.value; + var category = ev.target.elements.category.value; + var date = ev.target.elements.date.value; + movies[index].setName(name); + movies[index].setDate(date); + movies[index].setCategory(category); + ev.target.reset(); + render(movies, output); + }); + } + catch (error) { + console.error(Error); + } +} +function deleteMovie(id) { + try { + if (!movies) + throw new Error("movies empty"); + var index = movies.findIndex(function (mv) { return mv.getId() === id; }); + if (id == -1) + throw new Error("movie not found"); + movies.splice(index, 1); + render(movies, output); + } + catch (error) { + console.error(Error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/model.js new file mode 100644 index 000000000..57f597671 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/model.js @@ -0,0 +1,32 @@ +var id = 1; +var Movie = /** @class */ (function () { + function Movie(name, date, category) { + this.name = name; + this.date = date; + this.category = category; + this.id = id; + id++; + } + Movie.prototype.getName = function () { + return this.name; + }; + Movie.prototype.getCategory = function () { + return this.category; + }; + Movie.prototype.getDate = function () { + return this.date; + }; + Movie.prototype.getId = function () { + return this.id; + }; + Movie.prototype.setName = function (name) { + this.name = name; + }; + Movie.prototype.setCategory = function (category) { + this.category = category; + }; + Movie.prototype.setDate = function (date) { + this.date = date; + }; + return Movie; +}()); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/style.css new file mode 100644 index 000000000..79f4e0531 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/style.css @@ -0,0 +1,5 @@ +* { + margin: 0; + padding: 0; + box-sizing: 0; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/view.js new file mode 100644 index 000000000..dafe70a17 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/dist/view.js @@ -0,0 +1,2 @@ +var form = document.getElementById("theForm"); +var output = document.querySelector(".output"); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/index.html b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/index.html new file mode 100644 index 000000000..19b860c05 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + + +
                + + + + +
                +
                + +
                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/model.ts new file mode 100644 index 000000000..223e9b72f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/model.ts @@ -0,0 +1,36 @@ +let id = 1; +class Movie { + private id:number + constructor(private name:string, private date:string, private category:string) { + this.id = id; + id++; + } + + getName() { + return this.name + } + + getCategory() { + return this.category + } + + getDate() { + return this.date + } + + getId() { + return this.id + } + + setName(name) { + this.name = name + } + + setCategory(category) { + this.category = category + } + + setDate(date) { + this.date = date + } +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/style.scss new file mode 100644 index 000000000..7c1a248a5 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/style.scss @@ -0,0 +1,5 @@ +* { + margin: 0; + padding: 0; + box-sizing: 0; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/view.ts new file mode 100644 index 000000000..8b11ed060 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Omer.Virshuvski/view.ts @@ -0,0 +1,2 @@ +const form = document.getElementById("theForm"); +const output = document.querySelector(".output"); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/control.ts new file mode 100644 index 000000000..c010c569b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/control.ts @@ -0,0 +1,205 @@ +function giveStar(stars: number) { + let starsHtml = ``; + for (let i = 0; i < stars; i++) { + starsHtml += ``; + } + return stars; +} + +// handler Functions +// BUTTONS ----------------------------- +function handlerClickBurger(): void { + try { + const adminMenuCollapse = document.querySelector( + ".admin-collapse" + )! as HTMLElement; + const adminView = document.querySelector(".admin-menu")! as HTMLDivElement; + + if (!adminMenuCollapse || !adminView) + throw new Error("Couldn't find dom elelmnt"); + + if (adminMenuCollapse.classList.contains("active")) { + adminMenuCollapse.classList.remove("active"); + adminView.classList.remove("active"); + } else { + adminMenuCollapse.classList.add("active"); + adminView.classList.add("active"); + } + } catch (error) { + console.error(error); + } +} +//CLICK +//ADD +function handlerClickAddMovie() { + try { + const adminView = document.querySelector(".admin-menu")! as HTMLDivElement; + const adminMenuDivs = document.querySelectorAll(".admin-menu-divs")!; + adminMenuDivs.forEach((e) => { + if (e.classList.contains("add-movie")) { + e.classList.add("active"); + adminView.classList.add("active"); + } else { + e.classList.remove("active"); + } + }); + } catch (error) { + console.log(error); + } +} + +//REMOVE +function handlerClickRemoveMovie() { + try { + const adminView = document.querySelector(".admin-menu")! as HTMLDivElement; + const adminMenuDivs = document.querySelectorAll(".admin-menu-divs")!; + adminMenuDivs.forEach((adminMenuDiv) => { + if (adminMenuDiv.classList.contains("remove-movie")) { + adminMenuDiv.classList.add("active"); + } else { + adminMenuDiv.classList.remove("active"); + } + }); + adminView.classList.add("active"); + } catch (error) { + console.log(error); + } +} +//UPDATE +function handlerClickUpdateMovie() { + try { + const adminView = document.querySelector(".admin-menu")! as HTMLDivElement; + const adminMenuDivs = document.querySelectorAll(".admin-menu-divs")!; + adminMenuDivs.forEach((e) => { + if (e.classList.contains("update-movie")) { + e.classList.add("active"); + } else { + e.classList.remove("active"); + } + }); + adminView.classList.add("active"); + } catch (error) { + console.log(error); + } +} + +// SUBMIT ------------------------------ +//ADD +<<<<<<< HEAD +function handlerSubmitAdd(ev: any) { + try { + ev.preventDefault(); + const { url, name, stars, des, release } = ev.target.elements; + console.log(release.value); + movies.push( + new Movies( + url.value, + name.value, + des.value, + stars.value, + Number(release.value) + ) + ); + return renderMovies(); + } catch (error) { + console.log(error); + } +======= +function handlerSubmitAdd(ev:any){ + try { + ev.preventDefault() + const {url , name , stars , des ,release} = ev.target.elements + console.log(release.value); + movies.push(new Movies(url.value , name.value , des.value, stars.value ,Number(release.value))) + renderToLocalStorage(movies) + return renderMovies() + } catch (error) { + console.log(error); + } +>>>>>>> main +} +//REMOVE +function handlerSubmitRemove(ev) { + try { + ev.preventDefault(); + const allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach((movie) => { + const m = movie as HTMLElement; + if (m.style.display === "block") { + const nameMovie = movie.getAttribute("data") as string; + const index = movies.forEach((m, index) => { + if (m.name === nameMovie) { + movies.splice(index, 1); + } + }); + + renderMovies(); + ev.target.reset(); + } + }); + } catch (error) { + console.log(error); + } +} + +function handlerSubmitUpdate(ev) { + try { + ev.preventDefault(); + const value = ev.target.elements.nameToChance.value; + const allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach((movie) => { + const m = movie as HTMLElement; + if (m.style.display === "block") { + const nameMovie = movie.getAttribute("data") as string; + const index = movies.forEach((m, index) => { + if (m.name === nameMovie) { + movies[index].name = value; + } + }); + + renderMovies(); + ev.target.reset(); + } + }); + } catch (error) { + console.log(error); + } +} + +//Chance +//REMOVE +function handlerChanceRemove(ev) { + try { + let value = ev.target.value.toLowerCase(); + const allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach((element) => { + const DATA = element.getAttribute("DATA")?.toLowerCase()! as string; + const el = element as HTMLElement; + if (DATA.includes(value)) { + el.style.display = "block"; + } else { + el.style.display = "none"; + } + }); + } catch (error) { + console.log(error); + } +} +//UPDATE +function handlerChanceUpdate(ev) { + try { + let value = ev.target.value.toLowerCase(); + const allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach((element) => { + const DATA = element.getAttribute("DATA")?.toLowerCase()! as string; + const el = element as HTMLElement; + if (DATA.includes(value)) { + el.style.display = "block"; + } else { + el.style.display = "none"; + } + }); + } catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/control.js new file mode 100644 index 000000000..890c34a05 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/control.js @@ -0,0 +1,190 @@ +function giveStar(stars) { + var starsHtml = ""; + for (var i = 0; i < stars; i++) { + starsHtml += ""; + } + return stars; +} +// handler Functions +// BUTTONS ----------------------------- +function handlerClickBurger() { + try { + var adminMenuCollapse = document.querySelector(".admin-collapse"); + var adminView = document.querySelector(".admin-menu"); + if (!adminMenuCollapse || !adminView) + throw new Error("Couldn't find dom elelmnt"); + if (adminMenuCollapse.classList.contains("active")) { + adminMenuCollapse.classList.remove("active"); + adminView.classList.remove("active"); + } + else { + adminMenuCollapse.classList.add("active"); + adminView.classList.add("active"); + } + } + catch (error) { + console.error(error); + } +} +//CLICK +//ADD +function handlerClickAddMovie() { + try { + var adminView_1 = document.querySelector(".admin-menu"); + var adminMenuDivs = document.querySelectorAll(".admin-menu-divs"); + adminMenuDivs.forEach(function (e) { + if (e.classList.contains("add-movie")) { + e.classList.add("active"); + adminView_1.classList.add("active"); + } + else { + e.classList.remove("active"); + } + }); + } + catch (error) { + console.log(error); + } +} +//REMOVE +function handlerClickRemoveMovie() { + try { + var adminView = document.querySelector(".admin-menu"); + var adminMenuDivs = document.querySelectorAll(".admin-menu-divs"); + adminMenuDivs.forEach(function (adminMenuDiv) { + if (adminMenuDiv.classList.contains("remove-movie")) { + adminMenuDiv.classList.add("active"); + } + else { + adminMenuDiv.classList.remove("active"); + } + }); + adminView.classList.add("active"); + } + catch (error) { + console.log(error); + } +} +//UPDATE +function handlerClickUpdateMovie() { + try { + var adminView = document.querySelector(".admin-menu"); + var adminMenuDivs = document.querySelectorAll(".admin-menu-divs"); + adminMenuDivs.forEach(function (e) { + if (e.classList.contains("update-movie")) { + e.classList.add("active"); + } + else { + e.classList.remove("active"); + } + }); + adminView.classList.add("active"); + } + catch (error) { + console.log(error); + } +} +// SUBMIT ------------------------------ +//ADD +function handlerSubmitAdd(ev) { + try { + ev.preventDefault(); + var _a = ev.target.elements, url = _a.url, name = _a.name, stars = _a.stars, des = _a.des, release = _a.release; + console.log(release.value); + movies.push(new Movies(url.value, name.value, des.value, stars.value, Number(release.value))); + renderToLocalStorage(movies); + return renderMovies(); + } + catch (error) { + console.log(error); + } +} +//REMOVE +function handlerSubmitRemove(ev) { + try { + ev.preventDefault(); + var allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach(function (movie) { + var m = movie; + if (m.style.display === "block") { + var nameMovie_1 = movie.getAttribute("data"); + var index = movies.forEach(function (m, index) { + if (m.name === nameMovie_1) { + movies.splice(index, 1); + } + }); + renderMovies(); + ev.target.reset(); + } + }); + } + catch (error) { + console.log(error); + } +} +function handlerSubmitUpdate(ev) { + try { + ev.preventDefault(); + var value_1 = ev.target.elements.nameToChance.value; + var allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach(function (movie) { + var m = movie; + if (m.style.display === "block") { + var nameMovie_2 = movie.getAttribute("data"); + var index = movies.forEach(function (m, index) { + if (m.name === nameMovie_2) { + movies[index].name = value_1; + } + }); + renderMovies(); + ev.target.reset(); + } + }); + } + catch (error) { + console.log(error); + } +} +//Chance +//REMOVE +function handlerChanceRemove(ev) { + try { + var value_2 = ev.target.value.toLowerCase(); + var allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach(function (element) { + var _a; + var DATA = (_a = element.getAttribute("DATA")) === null || _a === void 0 ? void 0 : _a.toLowerCase(); + var el = element; + if (DATA.includes(value_2)) { + el.style.display = "block"; + } + else { + el.style.display = "none"; + } + }); + } + catch (error) { + console.log(error); + } +} +//UPDATE +function handlerChanceUpdate(ev) { + try { + var value_3 = ev.target.value.toLowerCase(); + var allMovie = document.querySelectorAll(".container-movies .movie"); + allMovie.forEach(function (element) { + var _a; + var DATA = (_a = element.getAttribute("DATA")) === null || _a === void 0 ? void 0 : _a.toLowerCase(); + var el = element; + if (DATA.includes(value_3)) { + el.style.display = "block"; + } + else { + el.style.display = "none"; + } + }); + } + catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/helper.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/helper.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/index.js new file mode 100644 index 000000000..150c5c737 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/index.js @@ -0,0 +1 @@ +renderMovies(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/model.js new file mode 100644 index 000000000..6c9d43eff --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/model.js @@ -0,0 +1,78 @@ +var Movies = /** @class */ (function () { + function Movies(url, name, des, stars, releaseDate) { + this.url = url; + this.name = name; + this.des = des; + this.stars = stars; + this.releaseDate = releaseDate; + } + return Movies; +}()); +var movies = [ + { + url: "https://upload.wikimedia.org/wikipedia/he/e/e3/5111S2R-lg.jpg", + name: "Avatar: The Way of Water ", + des: " The Way of Water is a 2022 American epic science fiction film directed and produced by James Cameron, who co-wrote the screenplay", + stars: 5, + releaseDate: 2022 + }, + { + url: "https://upload.wikimedia.org/wikipedia/he/thumb/4/4b/Avatar_1sh_0.jpg/250px-Avatar_1sh_0.jpg", + name: "Avatar 2009", + des: " The Way of Water is a 2022 American epic science fiction film directed and produced by James Cameron, who co-wrote the screenplay", + stars: 5, + releaseDate: 2009 + }, + { + url: "https://static.sratim.tv/movies/440.jpg", + name: "Harry Potter and the Sorcerer's Stone ", + des: " The Way of Water is a 2022 American epic science fiction film directed and produced by James Cameron,", + stars: 5, + releaseDate: 2022 + }, + { + url: "https://static.sratim.tv/movies/13831.jpg", + name: "KSI In Real Life ", + des: " הצצה מעמיקה אל תוך החיים של קיי-אס-איי (KSI), כוכב-העל העולמי, בעודו עובר את השנה החשובה ביותר בחייו. בשיא תהילתו, מד", + stars: 2, + releaseDate: 2023 + }, + { + url: "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/AeyiuQUUs78bPkz18FY3AzNFF8b.jpg", + name: "Fullmetal Alchemist ", + des: " The Elric brothers’ long and winding where they must face off against an unworldly, nationwide threat.", + stars: 3, + releaseDate: 2022 + }, + { + url: "https://m.media-amazon.com/images/I/71aEg7yF6iL._AC_SX466_.jpg", + name: "A Bug's Life ", + des: " 'A brilliant toy company roboticist uses artificial in works too well,", + stars: 4, + releaseDate: 2023 + }, + { + url: "https://m.media-amazon.com/images/I/91c7Hqj8OtL._AC_SX466_.jpg", + name: "The Lion King ", + des: " 'Triple bill of Disney animated features following a naive and curious lion cub as,", + stars: 4, + releaseDate: 2023 + }, + { + url: "https://m.media-amazon.com/images/I/81ZLsdNzg1L._AC_SX466_.jpg", + name: "Finding Nemo ", + des: " 'Finding Nemo roboticist uses artificial intelligence to develop M3GAN, works too well,", + stars: 4, + releaseDate: 2023 + }, + { + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToYQxJjHOcThYvYHi2i4pZQrKRY_ZnSuMZzfo7rn6GQWx22FA9", + name: "Big Stan ", + des: " 'Big Stan is a 2007 American prison comedy film starring, produced and directed by Rob Schneider in his directorial,", + stars: 3, + releaseDate: 2007 + }, +]; +function renderToLocalStorage(arr) { + localStorage.setItem("movies", JSON.stringify(movies)); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/style.css new file mode 100644 index 000000000..05b216c01 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/style.css @@ -0,0 +1,224 @@ +:root { + --main-color: #eb9b00; + --text-color: #ffff; + --background-color: #232323; + --main-font-family: "Poppins", sans-serif; +} + +* { + padding: 0; + margin: 0; +} + +body, +html { + overflow-x: hidden; + background-color: var(--background-color); + width: 100vw; + height: 100vh; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +section.web-container { + background-color: var(--background-color); + font-family: var(--main-font-family); + width: initial; +} +section.web-container header.main-header { + padding: 0 16px; + width: inherit; + justify-content: space-between; +} +section.web-container header.main-header .logo a { + text-decoration: none; +} +section.web-container header.main-header .logo a img { + width: 85px; +} +section.web-container header.main-header ul.nav-navbar li { + list-style: none; + margin: 10px; +} +section.web-container header.main-header ul.nav-navbar li a { + text-decoration: none; + font-weight: 700; + color: var(--text-color); + transition: color ease 0.4s; +} +section.web-container header.main-header ul.nav-navbar li a:hover { + color: var(--main-color); +} +section.web-container header.main-header div.menu-burger { + position: relative; +} +section.web-container header.main-header div.menu-burger button#btnBurgerMenu { + border: none; + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--main-color); + padding: 10px; + width: 50px; + height: 50px; + border-radius: 0 20px 20px 0; + cursor: pointer; +} +section.web-container header.main-header div.menu-burger .admin-collapse { + display: none; + position: absolute; + top: 0; + right: 39px; + height: 30px; + padding: 10px; + background-color: var(--main-color); + border-radius: 20px 0 0 20px; + border-bottom: 1px solid #0d0d0b; +} +section.web-container header.main-header div.menu-burger .admin-collapse.active { + display: flex; +} +section.web-container header.main-header div.menu-burger .admin-collapse button { + padding: 5px 10px; + color: #ffffff; + font-size: 1.2rem; + margin: 0 10px; + cursor: pointer; + border: none; + background-color: rgba(46, 40, 30, 0.396); + border-radius: 20px; + transition: color ease 0.4s; + font-weight: bold; +} +section.web-container header.main-header div.menu-burger .admin-collapse button:hover { + color: #232323; +} +section.web-container .admin-menu { + display: none; + width: 100%; + padding: 10px; + background-color: var(--main-color); +} +section.web-container .admin-menu.active { + display: block; +} +section.web-container .admin-menu .admin-menu-divs { + display: none; + text-align: center; +} +section.web-container .admin-menu .admin-menu-divs.active { + display: block; +} +section.web-container .admin-menu .admin-menu-divs form { + width: 100%; + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + gap: 4px; +} +section.web-container .admin-menu .admin-menu-divs form input { + padding: 7px; + width: 50%; +} +section.web-container .admin-menu .admin-menu-divs form .selectDiv { + border: 1px solid black; + display: flex; +} +section.web-container .admin-menu .admin-menu-divs form .selectDiv select { + border: none; + outline: none; + background-color: inherit; +} +section.web-container .admin-menu .admin-menu-divs form button { + padding: 5px 10px; +} +section.web-container .admin-menu .admin-menu-divs form textarea { + width: 50%; + font-family: var(--main-font-family); +} +section.web-container .container-body { + text-align: center; + width: inherit; +} +section.web-container .container-body .ad-gif img { + width: 100%; + height: 250px; + object-fit: cover; +} +section.web-container .container-body .main-title-movies { + padding: 15px; + background-color: var(--main-color); +} +section.web-container .container-body .container-movies { + margin: 20px; + flex-wrap: wrap; + gap: 10px; + align-items: stretch; + height: 100%; +} +section.web-container .container-body .container-movies .movie { + background-color: var(--main-color); + width: 200px; + height: 250px; + overflow: hidden; + transition: all 0.5s ease; + cursor: pointer; +} +section.web-container .container-body .container-movies .movie:active { + scale: 1.2; +} +section.web-container .container-body .container-movies .movie:hover { + height: 500px; + margin-bottom: -250px; + z-index: 999; +} +section.web-container .container-body .container-movies .movie .img { + width: 100%; +} +section.web-container .container-body .container-movies .movie .img img { + width: inherit; + height: 250px; + object-fit: cover; +} +section.web-container footer { + z-index: 9999; + width: var(--background-color); + flex-direction: column; + padding-bottom: 20px; +} +section.web-container footer .social-media-footer { + display: flex; + margin: auto; + font-size: 1.5rem; + color: var(--main-color); +} +section.web-container footer .social-media-footer div { + margin: 15px; + transition: color ease-in 0.1s; + cursor: pointer; +} +section.web-container footer .social-media-footer div:hover { + color: var(--text-color); +} +section.web-container footer .footer-menu { + display: flex; +} +section.web-container footer .footer-menu li { + font-size: 1.4rem; + list-style: none; +} +section.web-container footer .footer-menu li a { + margin: 15px; + text-decoration: none; + color: var(--text-color); +} +section.web-container footer small { + color: var(--text-color); + padding: 15px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/view.js new file mode 100644 index 000000000..882395ea2 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/dist/view.js @@ -0,0 +1,9 @@ +function renderMovies() { + var getMovieFromStorage = localStorage.getItem("movies"); + console.log(getMovieFromStorage); + var containerMovie = document.querySelector('.container-movies'); + containerMovie.innerHTML = ''; + movies.forEach(function (movie) { + containerMovie.innerHTML += "\n
                \n
                \n

                " + movie.name + "

                \n

                " + movie.des + "

                \n
                \n " + giveStar(Number(movie.stars)) + "\n
                \n release date: " + movie.releaseDate + "\n
                "; + }); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/helper.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/helper.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/images/adMovie.jpg b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/images/adMovie.jpg new file mode 100644 index 000000000..9757444b7 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/images/adMovie.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/images/logo.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/images/logo.png new file mode 100644 index 000000000..6ada14db4 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/images/logo.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/index.html b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/index.html new file mode 100644 index 000000000..05126bac0 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/index.html @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + Movies World + + + +
                +
                + + + +
                + +
                + + + +
                +
                +
                + +
                +
                +

                ADD MOVIE

                +
                + + + +
                + + +
                + + +
                +
                +
                +

                REMOVE MOVIE

                +
                + + +
                +
                +
                +

                UPDATE MOVIE

                +
                + + + +
                +
                +
                + +
                +
                + +
                +

                + MOVIES LIST +

                +
                + + +
                +
                + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/index.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/index.ts new file mode 100644 index 000000000..58c94c849 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/index.ts @@ -0,0 +1 @@ +renderMovies() \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/model.ts new file mode 100644 index 000000000..b09436a40 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/model.ts @@ -0,0 +1,90 @@ +interface Movie { + url: string, + name: string, + des: string, + stars?: number, + releaseDate?: number +} + + class Movies { + constructor( + public url: string, + public name: string, + public des: string, + public stars: number, + public releaseDate: number + ) { + } +} + +const movies: Movie[] = [ + { + url: "https://upload.wikimedia.org/wikipedia/he/e/e3/5111S2R-lg.jpg", + name: "Avatar: The Way of Water ", + des: " The Way of Water is a 2022 American epic science fiction film directed and produced by James Cameron, who co-wrote the screenplay", + stars: 5, + releaseDate: 2022 + }, + { + url: "https://upload.wikimedia.org/wikipedia/he/thumb/4/4b/Avatar_1sh_0.jpg/250px-Avatar_1sh_0.jpg", + name: "Avatar 2009", + des: " The Way of Water is a 2022 American epic science fiction film directed and produced by James Cameron, who co-wrote the screenplay", + stars: 5, + releaseDate: 2009 + }, + { + url: "https://static.sratim.tv/movies/440.jpg", + name: "Harry Potter and the Sorcerer's Stone ", + des: " The Way of Water is a 2022 American epic science fiction film directed and produced by James Cameron,", + stars: 5, + releaseDate: 2022 + }, + { + url: "https://static.sratim.tv/movies/13831.jpg", + name: "KSI In Real Life ", + des: " הצצה מעמיקה אל תוך החיים של קיי-אס-איי (KSI), כוכב-העל העולמי, בעודו עובר את השנה החשובה ביותר בחייו. בשיא תהילתו, מד", + stars: 2, + releaseDate: 2023 + }, + { + url: "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/AeyiuQUUs78bPkz18FY3AzNFF8b.jpg", + name: "Fullmetal Alchemist ", + des: " The Elric brothers’ long and winding where they must face off against an unworldly, nationwide threat.", + stars: 3, + releaseDate: 2022 + }, + { + url: "https://m.media-amazon.com/images/I/71aEg7yF6iL._AC_SX466_.jpg", + name: "A Bug's Life ", + des: " 'A brilliant toy company roboticist uses artificial in works too well,", + stars: 4, + releaseDate: 2023 + }, + { + url: "https://m.media-amazon.com/images/I/91c7Hqj8OtL._AC_SX466_.jpg", + name: "The Lion King ", + des: " 'Triple bill of Disney animated features following a naive and curious lion cub as,", + stars: 4, + releaseDate: 2023 + }, + { + url: "https://m.media-amazon.com/images/I/81ZLsdNzg1L._AC_SX466_.jpg", + name: "Finding Nemo ", + des: " 'Finding Nemo roboticist uses artificial intelligence to develop M3GAN, works too well,", + stars: 4, + releaseDate: 2023 + }, + { + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToYQxJjHOcThYvYHi2i4pZQrKRY_ZnSuMZzfo7rn6GQWx22FA9", + name: "Big Stan ", + des: " 'Big Stan is a 2007 American prison comedy film starring, produced and directed by Rob Schneider in his directorial,", + stars: 3, + releaseDate: 2007 + }, + + +]; + +function renderToLocalStorage(arr:Movie):void{ +localStorage.setItem("movies" , JSON.stringify(movies)) +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/style.css b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/style.css new file mode 100644 index 000000000..c1eb99813 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/style.css @@ -0,0 +1,226 @@ +:root { + --main-color: #eb9b00; + --text-color: #ffff; + --background-color: #232323; + --main-font-family: "Poppins", sans-serif; +} + +* { + padding: 0; + margin: 0; +} + +body, +html { + overflow-x: hidden; + background-color: var(--background-color); + width: 100vw; + height: 100vh; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +section.web-container { + background-color: var(--background-color); + font-family: var(--main-font-family); + width: initial; +} +section.web-container header.main-header { + padding: 0 16px; + width: inherit; + justify-content: space-between; +} +section.web-container header.main-header .logo a { + text-decoration: none; +} +section.web-container header.main-header .logo a img { + width: 85px; +} +section.web-container header.main-header ul.nav-navbar li { + list-style: none; + margin: 10px; +} +section.web-container header.main-header ul.nav-navbar li a { + text-decoration: none; + font-weight: 700; + color: var(--text-color); + transition: color ease 0.4s; +} +section.web-container header.main-header ul.nav-navbar li a:hover { + color: var(--main-color); +} +section.web-container header.main-header div.menu-burger { + position: relative; +} +section.web-container header.main-header div.menu-burger button#btnBurgerMenu { + border: none; + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--main-color); + padding: 10px; + width: 50px; + height: 50px; + border-radius: 0 20px 20px 0; + cursor: pointer; +} +section.web-container header.main-header div.menu-burger .admin-collapse { + display: none; + position: absolute; + top: 0; + right: 39px; + height: 30px; + padding: 10px; + background-color: var(--main-color); + border-radius: 20px 0 0 20px; + border-bottom: 1px solid rgb(13, 13, 11); +} +section.web-container header.main-header div.menu-burger .admin-collapse.active { + display: flex; +} +section.web-container header.main-header div.menu-burger .admin-collapse button { + padding: 5px 10px; + color: #ffffff; + font-size: 1.2rem; + margin: 0 10px; + cursor: pointer; + border: none; + background-color: rgba(46, 40, 30, 0.396); + border-radius: 20px; + transition: color ease 0.4s; + font-weight: bold; +} +section.web-container header.main-header div.menu-burger .admin-collapse button:hover { + color: #232323; +} +section.web-container .admin-menu { + display: none; + width: 100%; + padding: 10px; + background-color: var(--main-color); +} +section.web-container .admin-menu.active { + display: block; +} +section.web-container .admin-menu .admin-menu-divs { + display: none; + text-align: center; +} +section.web-container .admin-menu .admin-menu-divs.active { + display: block; +} +section.web-container .admin-menu .admin-menu-divs form { + width: 100%; + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + gap: 4px; +} +section.web-container .admin-menu .admin-menu-divs form input { + padding: 7px; + width: 50%; +} +section.web-container .admin-menu .admin-menu-divs form .selectDiv { + border: 1px solid black; + display: flex; +} +section.web-container .admin-menu .admin-menu-divs form .selectDiv select { + border: none; + outline: none; + background-color: inherit; +} +section.web-container .admin-menu .admin-menu-divs form button { + padding: 5px 10px; +} +section.web-container .admin-menu .admin-menu-divs form textarea { + width: 50%; + font-family: var(--main-font-family); +} +section.web-container .container-body { + text-align: center; + width: inherit; +} +section.web-container .container-body .ad-gif img { + width: 100%; + height: 250px; + -o-object-fit: cover; + object-fit: cover; +} +section.web-container .container-body .main-title-movies { + padding: 15px; + background-color: var(--main-color); +} +section.web-container .container-body .container-movies { + margin: 20px; + flex-wrap: wrap; + gap: 10px; + align-items: stretch; + height: 100%; +} +section.web-container .container-body .container-movies .movie { + background-color: var(--main-color); + width: 200px; + height: 250px; + overflow: hidden; + transition: all 0.5s ease; + cursor: pointer; +} +section.web-container .container-body .container-movies .movie:active { + scale: 1.2; +} +section.web-container .container-body .container-movies .movie:hover { + height: 500px; + margin-bottom: -250px; + z-index: 999; +} +section.web-container .container-body .container-movies .movie .img { + width: 100%; +} +section.web-container .container-body .container-movies .movie .img img { + width: inherit; + height: 250px; + -o-object-fit: cover; + object-fit: cover; +} +section.web-container footer { + z-index: 9999; + width: var(--background-color); + flex-direction: column; + padding-bottom: 20px; +} +section.web-container footer .social-media-footer { + display: flex; + margin: auto; + font-size: 1.5rem; + color: var(--main-color); +} +section.web-container footer .social-media-footer div { + margin: 15px; + transition: color ease-in 0.1s; + cursor: pointer; +} +section.web-container footer .social-media-footer div:hover { + color: var(--text-color); +} +section.web-container footer .footer-menu { + display: flex; +} +section.web-container footer .footer-menu li { + font-size: 1.4rem; + list-style: none; +} +section.web-container footer .footer-menu li a { + margin: 15px; + text-decoration: none; + color: var(--text-color); +} +section.web-container footer small { + color: var(--text-color); + padding: 15px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/style.scss new file mode 100644 index 000000000..7939f77f0 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/style.scss @@ -0,0 +1,278 @@ +:root { + --main-color: #eb9b00; + --text-color: #ffff; + --background-color: #232323; + --main-font-family: 'Poppins', sans-serif; +} + +// Main +* { + padding: 0; + margin: 0; +} + +body, +html { + overflow-x: hidden; + background-color: var(--background-color); + width: 100vw; + height: 100vh; + + +} + +.center { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +section.web-container { + background-color: var(--background-color); + font-family: var(--main-font-family); + width: initial; + //HEADER + header.main-header { + padding: 0 16px; + width: inherit; + justify-content: space-between; + + .logo { + a { + text-decoration: none; + + img { + width: 85px; + } + } + } + + ul.nav-navbar { + li { + list-style: none; + margin: 10px; + + a { + text-decoration: none; + font-weight: 700; + color: var(--text-color); + transition: color ease 0.4s; + + + &:hover { + color: var(--main-color); + + } + } + } + } + + div.menu-burger { + position: relative; + + button#btnBurgerMenu { + border: none; + font-size: 1.3rem; + color: var(--text-color); + background-color: var(--main-color); + padding: 10px; + width: 50px; + height: 50px; + border-radius: 0 20px 20px 0; + + cursor: pointer; + + } + + .admin-collapse { + // + display: none; + position: absolute; + top: 0; + right: 39px; + height: 30px; + padding: 10px; + background-color: var(--main-color); + border-radius: 20px 0 0 20px; + border-bottom: 1px solid rgb(13, 13, 11); + &.active{ + display: flex; + } + button { + padding:5px 10px; + color: #ffffff; + font-size: 1.2rem; + margin: 0 10px; + cursor: pointer; + border: none; + background-color: rgba(46, 40, 30, 0.396); + border-radius: 20px; + transition: color ease 0.4s; + font-weight: bold; + + &:hover{ + color: #232323; + } + + } + + + } + + + } + } + //ADMIN OPTIONS + .admin-menu{ + display: none; + width: 100%; + padding: 10px; + background-color: var(--main-color); + &.active{ + display: block; + } + .admin-menu-divs{ + display: none; + text-align: center; + &.active{ + display: block; + } + form{ + width: 100%; + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + gap: 4px; + + input{ + padding: 7px; + width: 50%; + } + + .selectDiv{ + border: 1px solid black; + display: flex; + select{ + border: none; + outline: none; + background-color: inherit; + } + } + + button{ + padding:5px 10px; + } + textarea{ + width:50% ; + font-family: var(--main-font-family); + } + } + } + } + //BODY WEB + .container-body{ + text-align: center; + width: inherit; + + + + //AD banner + .ad-gif img { + width: 100%; + height: 250px; + object-fit: cover; + } + + //main title + .main-title-movies{ + padding: 15px; + background-color: var(--main-color); + } + //container movies + .container-movies{ + margin:20px; + flex-wrap: wrap; + gap: 10px; + align-items: stretch; + height:100%; +; + .movie{ + background-color:var(--main-color); + width: 200px; + height: 250px; + overflow: hidden; + transition: all 0.5s ease; + cursor: pointer; + &:active{ + scale: 1.2; + } + &:hover{ + height:500px; + margin-bottom: -250px; + z-index: 999; + } + + .img{ + width: 100%; + + + img{ + width: inherit; + + height: 250px; + object-fit: cover; + + + } + } + } + } + } + + //footer + footer{ + z-index: 9999; + width: var(--background-color); + flex-direction: column; + padding-bottom: 20px; + + .social-media-footer{ + display: flex; + margin: auto; + font-size: 1.5rem; + color: var(--main-color); + + div{ + margin: 15px; + transition: color ease-in 0.1s ; + cursor: pointer; + &:hover{ + color:var(--text-color) + } + } + + + } + .footer-menu{ + display: flex; + li { + font-size: 1.4rem; + list-style: none; + a{ + margin: 15px; + text-decoration: none; + color: var(--text-color); + } + } + } + small{ + color:var(--text-color) ; + padding: 15px ; + } + } +} + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/view.ts new file mode 100644 index 000000000..1e37dd042 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 1 - website/view.ts @@ -0,0 +1,19 @@ + function renderMovies() { + const getMovieFromStorage = localStorage.getItem("movies"); + console.log(getMovieFromStorage); + const containerMovie = document.querySelector('.container-movies')! as HTMLDivElement; + containerMovie.innerHTML = '' + movies.forEach(movie => { + containerMovie.innerHTML += ` +
                +
                +

                ${movie.name}

                +

                ${movie.des}

                +
                + ${giveStar(Number(movie.stars))} +
                + release date: ${movie.releaseDate} +
                ` + + }) +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/balloon.html b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/balloon.html new file mode 100644 index 000000000..a6c2fd73b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/balloon.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + Happy-New-Years + + + +
                + +
                +
                + +
                  +
                  • +
                  • + +
                + +
                +
                +

                Speed : 0

                +

                Score : 0

                +
                +
                + +
                +
                +
                + +

                Click Bellow To Start

                + +
                +

                00:00:00

                +
                +
                + + +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/balloon.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/balloon.ts new file mode 100644 index 000000000..ac0712268 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/balloon.ts @@ -0,0 +1,27 @@ +const resetButton = document.getElementById('resetP')! as HTMLButtonElement; +resetButton.addEventListener('click', (e) => { + const scoreInput = document.querySelector('.score') as HTMLElement; + score = 0; + scoreInput.innerText = `Score : ${score}` +}) + +const startGameBtn = document.getElementById('startGameBtn')! as HTMLButtonElement; +startGameBtn.addEventListener('click', startGame ,) + + +const startOver = document.getElementById('startOver')! as HTMLButtonElement; +startOver.addEventListener('click', startGame) + + + + + +function startGame() { + heart = 3 + addLives(heart) + startSound.play() + renderScreenScore() + renderGame() + + +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/control.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/control.ts new file mode 100644 index 000000000..3a9cd7282 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/control.ts @@ -0,0 +1,172 @@ +function makeNewBallon() { + newBallonSound.play() + const containerBalloons = document.querySelector('.container-balloons'); + const newSpan = document.createElement('span'); + const newBallon = document.createElement('img'); + //random number between 1 - 3 + const randomNumber = Math.ceil(Math.random() * 3) + //random number between 1 - 100; + const randomNumber2 = Math.ceil((Math.random() * 90 - 10) + 10) + + + newBallon.setAttribute('src', `./imgs/ballon${randomNumber}.png`) + containerBalloons?.appendChild(newSpan) + newSpan.appendChild(newBallon); + giveScore(newBallon, randomNumber) + //make Position to the parent Balloon + newSpan.style.left = `${randomNumber2.toString()}%` + + + //Give a Scores To each balloon + + timer(newSpan, 1) + + newBallon.addEventListener('click', () => { + burstBallonSound.play() + newBallon.parentElement!.remove() + // Math score from balloon + const scoresBalloon = Number(newBallon.getAttribute('score')); + score += scoresBalloon + //inner text in dom + const scoreInput = document.querySelector('.score') as HTMLElement; + scoreInput.innerText = `Score : ${score}` + + }) + + speedInput.innerText = `Speed : ${speed}` + +} + + + +// function checkLose(inter: number, inter2: number) { +// const containerBalloonsChild = document.querySelectorAll('.container-balloons span'); +// let index = 0; +// containerBalloonsChild.forEach(c => { +// if (c instanceof HTMLElement) { +// if (c.style.bottom == "85%") { +// index++ +// if (heart > 1 && index > 0) { +// annoyingSound.play() +// heart-- +// removeLives() + +// } else +// if (heart === 1) { +// makeAnotherTry() +// const containerBalloonsChild = document.querySelectorAll('.container-balloons span'); +// containerBalloonsChild.forEach(balloon => { +// balloon.remove() +// endGame(inter, inter2) + +// }); +// gameOverSound.play() +// removeLives() + + +// } else { +// endGame(inter, inter2) +// } +// } +// } +// }) +// } +// function ifLoseInt(inter1: number, inter2: number) { +// difficulty() +// checkLose(inter1, inter2) +// speedRender = speed +// const startOver = document.getElementById('startOver') as HTMLButtonElement; +// const startGameBtn = document.getElementById('startGameBtn') as HTMLButtonElement; +// startGameBtn.addEventListener('click', () => { +// clearInterval(inter1); clearInterval(inter2) +// }) +// startOver.addEventListener('click', () => { +// clearInterval(inter1); clearInterval(inter2) +// }) +// } +function renderGame() { + let makeNewBallonI = setInterval(makeNewBallon, createBallonSpeed); + let ifLoseInt = setInterval(() => { + difficulty(); + speedRender = speed; + const containerBalloonsChild = document.querySelectorAll('.container-balloons span'); + const startOver = document.getElementById('startOver') as HTMLButtonElement; + const startGameBtn = document.getElementById('startGameBtn') as HTMLButtonElement; + startGameBtn.addEventListener('click', () => { + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + }); + startOver.addEventListener('click', () => { + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + }); + let index = 0; + containerBalloonsChild.forEach(c => { + if (c instanceof HTMLElement) { + if (c.style.bottom == "80%") { + index++; + if (heart >= 1 && index > 0) { + annoyingSound.play(); + heart--; + removeLives(); + } + else if (heart <= 0) { + const happyNewYearsWelcome = document.querySelector('.happyNewYearsWelcome') as HTMLElement; + happyNewYearsWelcome.style.display = "flex"; + const imgHappyNewYears = document.getElementById('imgNewYear'); + imgHappyNewYears === null || imgHappyNewYears === void 0 ? void 0 : imgHappyNewYears.setAttribute('src', './imgs/gameOver.png'); + const h4NewYear = document.getElementById('h4NewYear') as HTMLElement; + h4NewYear.innerHTML = `Good Game!
                Your Score:
                ${score}!                 ; `; + const startGameBtn = document.getElementById('startGameBtn') as HTMLElement; + startGameBtn.textContent = "Try Again"; + const containerBalloonsChild = document.querySelectorAll('.container-balloons span'); + containerBalloonsChild.forEach(b => { + b.remove(); + }); + gameOverSound.play(); + removeLives(); + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + } + else { + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + } + } + } + }); + }, speed); +} + +function addLives(spin: number) { + const lives = document.querySelector('.lives') as HTMLDivElement; + lives!.innerHTML = '' + for (let i = 0; i < spin; i++) { + const newHeart = document.createElement('img'); + const newSpan = document.createElement('span') + lives!.appendChild(newSpan); + newSpan.appendChild(newHeart) + newHeart.setAttribute('src', './imgs/heart.png') + newHeart.setAttribute('width', '35px') + } +} +function removeLives() { + heart-- + const lives = document.querySelectorAll('.lives img'); + lives[lives.length - 1].remove() +} +function makeAnotherTry() { + const happyNewYearsWelcome = document.querySelector('.happyNewYearsWelcome') as HTMLDivElement; + happyNewYearsWelcome.style.display = "flex" + const imgHappyNewYears = document.getElementById('imgNewYear'); + imgHappyNewYears?.setAttribute('src', './imgs/gameOver.png') + const h4NewYear = document.getElementById('h4NewYear'); + h4NewYear!.innerHTML = `Good Game!
                Your Score:
                ${score}!                 ; ` + const startGameBtn = document.getElementById('startGameBtn')! as HTMLElement; + startGameBtn.textContent = "Try Again" +} + +function endGame(inter1: number, inter2: number) { + clearInterval(inter1) + clearInterval(inter2) +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/balloon.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/balloon.js new file mode 100644 index 000000000..aa57fcc47 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/balloon.js @@ -0,0 +1,17 @@ +var resetButton = document.getElementById('resetP'); +resetButton.addEventListener('click', function (e) { + var scoreInput = document.querySelector('.score'); + score = 0; + scoreInput.innerText = "Score : " + score; +}); +var startGameBtn = document.getElementById('startGameBtn'); +startGameBtn.addEventListener('click', startGame); +var startOver = document.getElementById('startOver'); +startOver.addEventListener('click', startGame); +function startGame() { + heart = 3; + addLives(heart); + startSound.play(); + renderScreenScore(); + renderGame(); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/control.js new file mode 100644 index 000000000..d1a013482 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/control.js @@ -0,0 +1,154 @@ +function makeNewBallon() { + newBallonSound.play(); + var containerBalloons = document.querySelector('.container-balloons'); + var newSpan = document.createElement('span'); + var newBallon = document.createElement('img'); + //random number between 1 - 3 + var randomNumber = Math.ceil(Math.random() * 3); + //random number between 1 - 100; + var randomNumber2 = Math.ceil((Math.random() * 90 - 10) + 10); + newBallon.setAttribute('src', "./imgs/ballon" + randomNumber + ".png"); + containerBalloons === null || containerBalloons === void 0 ? void 0 : containerBalloons.appendChild(newSpan); + newSpan.appendChild(newBallon); + giveScore(newBallon, randomNumber); + //make Position to the parent Balloon + newSpan.style.left = randomNumber2.toString() + "%"; + //Give a Scores To each balloon + timer(newSpan, 1); + newBallon.addEventListener('click', function () { + burstBallonSound.play(); + newBallon.parentElement.remove(); + // Math score from balloon + var scoresBalloon = Number(newBallon.getAttribute('score')); + score += scoresBalloon; + //inner text in dom + var scoreInput = document.querySelector('.score'); + scoreInput.innerText = "Score : " + score; + }); + speedInput.innerText = "Speed : " + speed; +} +// function checkLose(inter: number, inter2: number) { +// const containerBalloonsChild = document.querySelectorAll('.container-balloons span'); +// let index = 0; +// containerBalloonsChild.forEach(c => { +// if (c instanceof HTMLElement) { +// if (c.style.bottom == "85%") { +// index++ +// if (heart > 1 && index > 0) { +// annoyingSound.play() +// heart-- +// removeLives() +// } else +// if (heart === 1) { +// makeAnotherTry() +// const containerBalloonsChild = document.querySelectorAll('.container-balloons span'); +// containerBalloonsChild.forEach(balloon => { +// balloon.remove() +// endGame(inter, inter2) +// }); +// gameOverSound.play() +// removeLives() +// } else { +// endGame(inter, inter2) +// } +// } +// } +// }) +// } +// function ifLoseInt(inter1: number, inter2: number) { +// difficulty() +// checkLose(inter1, inter2) +// speedRender = speed +// const startOver = document.getElementById('startOver') as HTMLButtonElement; +// const startGameBtn = document.getElementById('startGameBtn') as HTMLButtonElement; +// startGameBtn.addEventListener('click', () => { +// clearInterval(inter1); clearInterval(inter2) +// }) +// startOver.addEventListener('click', () => { +// clearInterval(inter1); clearInterval(inter2) +// }) +// } +function renderGame() { + var makeNewBallonI = setInterval(makeNewBallon, createBallonSpeed); + var ifLoseInt = setInterval(function () { + difficulty(); + speedRender = speed; + var containerBalloonsChild = document.querySelectorAll('.container-balloons span'); + var startOver = document.getElementById('startOver'); + var startGameBtn = document.getElementById('startGameBtn'); + startGameBtn.addEventListener('click', function () { + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + }); + startOver.addEventListener('click', function () { + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + }); + var index = 0; + containerBalloonsChild.forEach(function (c) { + if (c instanceof HTMLElement) { + if (c.style.bottom == "80%") { + index++; + if (heart >= 1 && index > 0) { + annoyingSound.play(); + heart--; + removeLives(); + } + else if (heart <= 0) { + var happyNewYearsWelcome = document.querySelector('.happyNewYearsWelcome'); + happyNewYearsWelcome.style.display = "flex"; + var imgHappyNewYears = document.getElementById('imgNewYear'); + imgHappyNewYears === null || imgHappyNewYears === void 0 ? void 0 : imgHappyNewYears.setAttribute('src', './imgs/gameOver.png'); + var h4NewYear = document.getElementById('h4NewYear'); + h4NewYear.innerHTML = "Good Game!
                Your Score:
                " + score + "!                 ; "; + var startGameBtn_1 = document.getElementById('startGameBtn'); + startGameBtn_1.textContent = "Try Again"; + var containerBalloonsChild_1 = document.querySelectorAll('.container-balloons span'); + containerBalloonsChild_1.forEach(function (b) { + b.remove(); + }); + gameOverSound.play(); + removeLives(); + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + } + else { + clearInterval(ifLoseInt); + clearInterval(makeNewBallonI); + } + } + } + }); + }, speed); +} +function addLives(spin) { + var lives = document.querySelector('.lives'); + lives.innerHTML = ''; + for (var i = 0; i < spin; i++) { + var newHeart = document.createElement('img'); + var newSpan = document.createElement('span'); + lives.appendChild(newSpan); + newSpan.appendChild(newHeart); + newHeart.setAttribute('src', './imgs/heart.png'); + newHeart.setAttribute('width', '35px'); + } +} +function removeLives() { + heart--; + var lives = document.querySelectorAll('.lives img'); + lives[lives.length - 1].remove(); +} +function makeAnotherTry() { + var happyNewYearsWelcome = document.querySelector('.happyNewYearsWelcome'); + happyNewYearsWelcome.style.display = "flex"; + var imgHappyNewYears = document.getElementById('imgNewYear'); + imgHappyNewYears === null || imgHappyNewYears === void 0 ? void 0 : imgHappyNewYears.setAttribute('src', './imgs/gameOver.png'); + var h4NewYear = document.getElementById('h4NewYear'); + h4NewYear.innerHTML = "Good Game!
                Your Score:
                " + score + "!                 ; "; + var startGameBtn = document.getElementById('startGameBtn'); + startGameBtn.textContent = "Try Again"; +} +function endGame(inter1, inter2) { + clearInterval(inter1); + clearInterval(inter2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/helper.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/helper.js new file mode 100644 index 000000000..8d62639d5 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/helper.js @@ -0,0 +1,82 @@ +function timer(parent, i) { + (function renderBySec() { + i++; + parent.style.bottom = i + "% "; + if (i < 99) { + setTimeout(renderBySec, speed); + speedInput.innerText = "Speed : " + speed; + } + else { + parent.remove(); + return; + } + }()); +} +function giveScore(ballon, randomNumber) { + if (randomNumber === 1) { + ballon.setAttribute('score', "40"); + } + if (randomNumber === 2) { + ballon.setAttribute('score', "30"); + } + if (randomNumber === 3) { + ballon.setAttribute('score', "20"); + } +} +function difficulty() { + if (score <= 100) { + speed = 55; + } + else if (score > 100 && score < 200) { + speed = 50; + } + else if (score >= 200 && score < 300) { + speed = 45; + } + else if (score >= 300 && score < 400) { + speed = 40; + } + else if (score >= 400 && score < 500) { + speed = 35; + } + else if (score >= 500 && score < 600) { + speed = 30; + } + else if (score >= 600 && score < 700) { + speed = 25; + } + else if (score >= 700 && score < 800) { + speed = 20; + } + else if (score >= 800 && score < 1000) { + speed = 15; + } + else if (score >= 1000 && score < 1100) { + speed = 13; + } + else if (score >= 1100 && score < 1200) { + speed = 11; + } + else { + speed = 10; + } +} +function time() { + setInterval(function () { + var timeRN = new Date(); + var seconds = timeRN.getSeconds(); + var min = timeRN.getMinutes(); + var hours = timeRN.getHours(); + var time = document.querySelector('.time h2'); + if (seconds < 10) { + time.innerHTML = hours + ":" + min + ":0" + seconds; + } + else if (min < 10) { + time.innerHTML = hours + ":0" + min + ":" + seconds; + } + else { + time.innerHTML = hours + ":" + min + ":" + seconds; + } + }, 1000); +} +time(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/model.js new file mode 100644 index 000000000..519f45243 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/model.js @@ -0,0 +1,18 @@ +// Start Game Settings +var speed = 50; +var speedRender = speed - 1; +var createBallonSpeed = 1500; +var score = 0; +var heart = 3; +// sounds +var speedInput = document.querySelector('.speed'); +var newBallonSound = new Audio(); +newBallonSound.src = "./imgs/sounds/level-up.wav"; +var burstBallonSound = new Audio(); +burstBallonSound.src = './imgs/sounds/balloon-small-burst.wav'; +var gameOverSound = new Audio(); +gameOverSound.src = './imgs/sounds/gameOver.wav'; +var annoyingSound = new Audio(); +annoyingSound.src = './imgs/sounds/annoying.wav'; +var startSound = new Audio(); +startSound.src = './imgs/sounds/start-sound.wav'; diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/style.css new file mode 100644 index 000000000..3d3773a68 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/style.css @@ -0,0 +1,172 @@ +:root { + --red: rgb(255, 0, 0); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + font-family: "Poppins", sans-serif; +} + +.container { + position: relative; + width: 100vw; + height: 100vh; + background-image: url(../imgs/background.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} +.container header div.div-container { + padding: 10px 20px; + background-color: rgba(0, 0, 0, 0.507); + border-bottom: 10px solid rgba(255, 12, 12, 0.644); + display: flex; + justify-content: space-between; + text-align: center; + align-items: center; +} +.container header div.div-container .logo { + text-decoration: none; + font-weight: bold; + color: rgba(255, 255, 255, 0.808); + font-size: 2rem; + margin-left: 15px; +} +.container header div.div-container .logo span { + color: var(--red); +} +.container header div.div-container ul { + display: flex; + width: 350px; + text-align: center; + align-items: center; + justify-content: space-around; +} +.container header div.div-container ul li { + list-style: none; + transform: translateX(50px); +} +.container header div.div-container ul li button { + background-color: var(--red); + padding: 10px 20px; + border-radius: 25px; + outline: none; + box-shadow: inset 1px 2px 65px 2px rgba(0, 0, 0, 0.37), inset -1px -1px 15px 5px rgba(243, 240, 240, 0.753); + color: white; + font-weight: 700; + font-size: 1.3rem; + border: 1px solid rgba(0, 0, 0, 0.315); + cursor: pointer; + transition: all 0.2s ease; +} +.container header div.div-container ul li button:hover { + box-shadow: inset 1px 2px 15px 2px rgba(250, 250, 250, 0.938), inset -1px -1px 15px 5px rgba(0, 0, 0, 0.753); +} +.container header div.div-container ul li button:active { + transform: scale(0.98); +} +.container header div.div-container .score-board { + margin-right: 20px; + padding: 5px; + display: flex; +} +.container header div.div-container .score-board h3 { + color: #f0ebeb; + pointer-events: none; + margin: 5px; + font-size: 1rem; +} +.container .main-body-game { + position: relative; + width: 100vw; + height: calc(90vh - 100px); + background-color: rgba(240, 228, 228, 0.767); + border: 2px solid black; + overflow: hidden; +} +.container .main-body-game .container-balloons { + width: 100%; + height: 100%; +} +.container .main-body-game .container-balloons span { + width: 250px; + position: absolute; +} +.container .main-body-game .container-balloons span img { + width: 220px; + cursor: pointer; +} + +.happyNewYearsWelcome { + background-color: rgba(248, 243, 243, 0.342); + width: 100%; + height: 100%; + z-index: 999; + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.happyNewYearsWelcome img { + width: 400px; + margin-bottom: -50px; + transition: width 1s ease; +} +.happyNewYearsWelcome h4 { + font-size: 1.5rem; +} +.happyNewYearsWelcome button { + background-color: var(--red); + margin-top: 30px; + padding: 16px 32px; + border-radius: 25px; + border: none; + outline: none; + box-shadow: inset 1px 2px 65px 2px rgba(0, 0, 0, 0.37), inset -1px -1px 15px 5px rgba(243, 240, 240, 0.753); + color: white; + font-weight: 700; + font-size: 1.3rem; + border: 1px solid rgba(0, 0, 0, 0.315); + cursor: pointer; + transition: all 0.2s ease; +} +.happyNewYearsWelcome button:hover { + box-shadow: inset 1px 2px 15px 2px rgba(250, 250, 250, 0.938), inset -1px -1px 15px 5px rgba(0, 0, 0, 0.753); +} +.happyNewYearsWelcome button:active { + transform: scale(0.98); +} + +.time { + position: relative; + top: 0px; + padding: 10px; + left: 0px; + opacity: 0.99; + border-radius: 30px; +} +.time h2 { + z-index: 999; + font-size: 1rem; +} + +.lives { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(224, 180, 180, 0.911); + border-radius: 15px; + border: 1px solid black; + width: 150px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/view.js new file mode 100644 index 000000000..f6f940539 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/dist/view.js @@ -0,0 +1,9 @@ +// Buttons Events +function renderScreenScore() { + var happyNewYearsWelcome = document.querySelector('.happyNewYearsWelcome'); + if (happyNewYearsWelcome.style.display = "flex") { + happyNewYearsWelcome.style.display = "none"; + } + var scoreInput = document.querySelector('.score'); + scoreInput.textContent = "Score : " + score; +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/helper.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/helper.ts new file mode 100644 index 000000000..dfc6c27fc --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/helper.ts @@ -0,0 +1,73 @@ +function timer(parent: HTMLSpanElement, i: number) { + (function renderBySec() { + i++; + parent.style.bottom = `${i}% ` + if (i < 99) { + setTimeout(renderBySec, speed); + speedInput.innerText = `Speed : ${speed}` + } else { + parent.remove() + return + } + }()); +} + +function giveScore(ballon: HTMLSpanElement, randomNumber: number) { + if (randomNumber === 1) { + ballon.setAttribute('score', "40"); + } + if (randomNumber === 2) { + ballon.setAttribute('score', "30"); + } + if (randomNumber === 3) { + ballon.setAttribute('score', "20"); + } + +} + +function difficulty() { + if (score <= 100) { + speed = 55 + } else if (score > 100 && score < 200) { + speed = 50 + } else if (score >= 200 && score < 300) { + speed = 45 + } else if (score >= 300 && score < 400) { + speed = 40 + } else if (score >= 400 && score < 500) { + speed = 35 + } else if (score >= 500 && score < 600) { + speed = 30 + } else if (score >= 600 && score < 700) { + speed = 25 + } else if (score >= 700 && score < 800) { + speed = 20 + } else if (score >= 800 && score < 1000) { + speed = 15 + } else if (score >= 1000 && score < 1100) { + speed = 13 + } else if (score >= 1100 && score < 1200) { + speed = 11 + } else { + speed = 10 + } +} +function time() { + setInterval(() => { + let timeRN = new Date() + let seconds = timeRN.getSeconds(); + let min = timeRN.getMinutes(); + let hours = timeRN.getHours(); + const time = document.querySelector('.time h2')! as HTMLElement; + if (seconds < 10) { + time.innerHTML = `${hours}:${min}:0${seconds}` + + } else + if (min < 10) { + time.innerHTML = `${hours}:0${min}:${seconds}` + } else { + time.innerHTML = `${hours}:${min}:${seconds}` + } + }, 1000) +} +time() diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/background.jpg b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/background.jpg new file mode 100644 index 000000000..dd7ceda3e Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/background.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon1.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon1.png new file mode 100644 index 000000000..d65e14468 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon1.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon2.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon2.png new file mode 100644 index 000000000..bc0aca0ec Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon2.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon3.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon3.png new file mode 100644 index 000000000..4687a500f Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/ballon3.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/gameover.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/gameover.png new file mode 100644 index 000000000..4dcbfb4d7 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/gameover.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/heart.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/heart.png new file mode 100644 index 000000000..ad40c04ea Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/heart.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/newYears.png b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/newYears.png new file mode 100644 index 000000000..a0c25ec3b Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/newYears.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/annoying.wav b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/annoying.wav new file mode 100644 index 000000000..431c33f0f Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/annoying.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/balloon-small-burst.wav b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/balloon-small-burst.wav new file mode 100644 index 000000000..95920a9bd Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/balloon-small-burst.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/gameover.wav b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/gameover.wav new file mode 100644 index 000000000..047b030fb Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/gameover.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/level-up.wav b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/level-up.wav new file mode 100644 index 000000000..bf38f0cd9 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/level-up.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/start-sound.wav b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/start-sound.wav new file mode 100644 index 000000000..e451c5f23 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/imgs/sounds/start-sound.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/model.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/model.ts new file mode 100644 index 000000000..1b297a381 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/model.ts @@ -0,0 +1,27 @@ + +// Start Game Settings +let speed = 50; +let speedRender = speed - 1 +let createBallonSpeed = 1500; +let score = 0; +let heart = 3; + +// sounds +const speedInput = document.querySelector('.speed') as HTMLElement; + +const newBallonSound = new Audio() +newBallonSound.src = "./imgs/sounds/level-up.wav" + +const burstBallonSound = new Audio(); +burstBallonSound.src = './imgs/sounds/balloon-small-burst.wav' + +const gameOverSound = new Audio() +gameOverSound.src = './imgs/sounds/gameOver.wav'; + +const annoyingSound = new Audio() +annoyingSound.src = './imgs/sounds/annoying.wav' + +const startSound = new Audio() +startSound.src = './imgs/sounds/start-sound.wav' + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/style.css b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/style.css new file mode 100644 index 000000000..8230b15eb --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/style.css @@ -0,0 +1,172 @@ +:root { + --red: rgb(255, 0, 0); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + font-family: "Poppins", sans-serif; +} + +.container { + position: relative; + width: 100vw; + height: 100vh; + background-image: url(../public/imgs/background.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} +.container header div.div-container { + padding: 10px 20px; + background-color: rgba(0, 0, 0, 0.507); + border-bottom: 10px solid rgba(255, 12, 12, 0.644); + display: flex; + justify-content: space-between; + text-align: center; + align-items: center; +} +.container header div.div-container .logo { + text-decoration: none; + font-weight: bold; + color: rgba(255, 255, 255, 0.808); + font-size: 2rem; + margin-left: 15px; +} +.container header div.div-container .logo span { + color: var(--red); +} +.container header div.div-container ul { + display: flex; + width: 350px; + text-align: center; + align-items: center; + justify-content: space-around; +} +.container header div.div-container ul li { + list-style: none; + transform: translateX(50px); +} +.container header div.div-container ul li button { + background-color: var(--red); + padding: 10px 20px; + border-radius: 25px; + outline: none; + box-shadow: inset 1px 2px 65px 2px rgba(0, 0, 0, 0.37), inset -1px -1px 15px 5px rgba(243, 240, 240, 0.753); + color: white; + font-weight: 700; + font-size: 1.3rem; + border: 1px solid rgba(0, 0, 0, 0.315); + cursor: pointer; + transition: all 0.2s ease; +} +.container header div.div-container ul li button:hover { + box-shadow: inset 1px 2px 15px 2px rgba(250, 250, 250, 0.938), inset -1px -1px 15px 5px rgba(0, 0, 0, 0.753); +} +.container header div.div-container ul li button:active { + transform: scale(0.98); +} +.container header div.div-container .score-board { + margin-right: 20px; + padding: 5px; + display: flex; +} +.container header div.div-container .score-board h3 { + color: rgb(240, 235, 235); + pointer-events: none; + margin: 5px; + font-size: 1rem; +} +.container .main-body-game { + position: relative; + width: 100vw; + height: calc(90vh - 100px); + background-color: rgba(240, 228, 228, 0.767); + border: 2px solid black; + overflow: hidden; +} +.container .main-body-game .container-balloons { + width: 100%; + height: 100%; +} +.container .main-body-game .container-balloons span { + width: 250px; + position: absolute; +} +.container .main-body-game .container-balloons span img { + width: 220px; + cursor: pointer; +} + +.happyNewYearsWelcome { + background-color: rgba(248, 243, 243, 0.342); + width: 100%; + height: 100%; + z-index: 999; + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.happyNewYearsWelcome img { + width: 400px; + margin-bottom: -50px; + transition: width 1s ease; +} +.happyNewYearsWelcome h4 { + font-size: 1.5rem; +} +.happyNewYearsWelcome button { + background-color: var(--red); + margin-top: 30px; + padding: 16px 32px; + border-radius: 25px; + border: none; + outline: none; + box-shadow: inset 1px 2px 65px 2px rgba(0, 0, 0, 0.37), inset -1px -1px 15px 5px rgba(243, 240, 240, 0.753); + color: white; + font-weight: 700; + font-size: 1.3rem; + border: 1px solid rgba(0, 0, 0, 0.315); + cursor: pointer; + transition: all 0.2s ease; +} +.happyNewYearsWelcome button:hover { + box-shadow: inset 1px 2px 15px 2px rgba(250, 250, 250, 0.938), inset -1px -1px 15px 5px rgba(0, 0, 0, 0.753); +} +.happyNewYearsWelcome button:active { + transform: scale(0.98); +} + +.time { + position: relative; + top: 0px; + padding: 10px; + left: 0px; + opacity: 0.99; + border-radius: 30px; +} +.time h2 { + z-index: 999; + font-size: 1rem; +} + +.lives { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(224, 180, 180, 0.911); + border-radius: 15px; + border: 1px solid black; + width: 150px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/style.scss b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/style.scss new file mode 100644 index 000000000..591ff0efd --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/style.scss @@ -0,0 +1,203 @@ +:root { + --red: rgb(255, 0, 0); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + + font-family: 'Poppins', sans-serif; + +} + +.container { + position: relative; + width: 100vw; + height: 100vh; + background-image: url(../public/imgs/background.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + + header div.div-container{ + padding: 10px 20px; + background-color: rgba(0, 0, 0, 0.507); + border-bottom: 10px solid rgba(255, 12, 12, 0.644); + display: flex; + justify-content: space-between; + text-align: center; + align-items: center; + + .logo { + text-decoration: none; + font-weight: bold; + color: rgba(255, 255, 255, 0.808); + font-size: 2rem; + margin-left: 15px; + + span { + color: var(--red); + } + + } + + ul { + display: flex; + width: 350px; + text-align: center; + align-items: center; + justify-content: space-around; + + li { + list-style: none; + transform: translateX(50px); + + button { + background-color: var(--red); + padding: 10px 20px; + border-radius: 25px; + outline: none; + box-shadow: inset 1px 2px 65px 2px rgba(0, 0, 0, 0.37), inset -1px -1px 15px 5px rgba(243, 240, 240, 0.753); + color: white; + font-weight: 700; + font-size: 1.3rem; + border: 1px solid rgba(0, 0, 0, 0.315); + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + box-shadow: inset 1px 2px 15px 2px rgba(250, 250, 250, 0.938), inset -1px -1px 15px 5px rgba(0, 0, 0, 0.753); + + } + &:active{ + transform: scale(0.98); + } + } + } + } + + .score-board { + margin-right: 20px; + padding: 5px; + display: flex; + + + + h3 { + color: rgb(240, 235, 235); + pointer-events: none; + margin: 5px; + font-size: 1rem; + } + + } + } + + + .main-body-game { + position: relative; + width: 100vw; + height: calc(90vh - 100px); + background-color: rgba(240, 228, 228, 0.767); + border: 2px solid black; + overflow: hidden; + + .container-balloons { + + width: 100%; + height: 100%; + span { + width: 250px; + position: absolute; + + img { + width: 220px; + cursor: pointer; + + } + } + } + } +} + +.happyNewYearsWelcome { +background-color: rgba(248, 243, 243, 0.342); + width: 100%; + height: 100%; + z-index: 999; + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + img { + width: 400px; + margin-bottom: -50px; + transition: width 1s ease; + + + } + + h4{ + font-size: 1.5rem; + } + button{ + background-color: var(--red); + margin-top: 30px; + padding: 16px 32px; + border-radius: 25px; + border: none; + outline: none; + box-shadow: inset 1px 2px 65px 2px rgba(0, 0, 0, 0.37), inset -1px -1px 15px 5px rgba(243, 240, 240, 0.753); + color: white; + font-weight: 700; + font-size: 1.3rem; + border: 1px solid rgba(0, 0, 0, 0.315); + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + box-shadow: inset 1px 2px 15px 2px rgba(250, 250, 250, 0.938), inset -1px -1px 15px 5px rgba(0, 0, 0, 0.753); + + } + &:active{ + transform: scale(0.98); + } + } + +} + +.time{ + + position: relative; + top:0px; + padding: 10px; + left: 0px; + opacity: 0.99; + border-radius:30px ; + + h2{ + z-index: 999; + font-size: 1rem; + } +} + +.lives{ + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(224, 180, 180, 0.911); + border-radius: 15px; + border: 1px solid black; + width: 150px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/view.ts b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/view.ts new file mode 100644 index 000000000..4c9543f36 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/Orel/task 2 - balloon game/view.ts @@ -0,0 +1,10 @@ +// Buttons Events + +function renderScreenScore() { + const happyNewYearsWelcome = document.querySelector('.happyNewYearsWelcome') as HTMLDivElement; + if (happyNewYearsWelcome.style.display = "flex") { + happyNewYearsWelcome.style.display = "none"; + } + const scoreInput = document.querySelector('.score') as HTMLElement; + scoreInput.textContent = `Score : ${score}` +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/.vscode/settings.json b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/.vscode/settings.json b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/index.html b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/index.html new file mode 100644 index 000000000..b5690341b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/index.html @@ -0,0 +1,22 @@ + + + + + + + Bouncing Circles Game + + + + + + + + + +
                Time Left:##
                +
                Score: 0
                + + + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/boom.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/boom.wav new file mode 100644 index 000000000..8d6423bcd Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/boom.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/clap.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/clap.wav new file mode 100644 index 000000000..ef952e5eb Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/clap.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/hihat.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/hihat.wav new file mode 100644 index 000000000..885cb196a Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/hihat.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/kick.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/kick.wav new file mode 100644 index 000000000..8fe46dea0 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/kick.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/openhat.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/openhat.wav new file mode 100644 index 000000000..50637521d Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/openhat.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/ride.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/ride.wav new file mode 100644 index 000000000..e5829dfef Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/ride.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/snare.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/snare.wav new file mode 100644 index 000000000..c4edfc753 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/snare.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/tink.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/tink.wav new file mode 100644 index 000000000..1f3c7b919 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/tink.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/tom.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/tom.wav new file mode 100644 index 000000000..9e2cdf691 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/sounds/tom.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/control.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/control.ts new file mode 100644 index 000000000..5aa6dc19a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/control.ts @@ -0,0 +1,44 @@ +function generateCircles(amount: number) { + for (let i = 0; i < amount; i++) { + const radius = Math.random() * 50 + 20; + const locationX = Math.random() * (window.innerWidth - radius * 2) + radius; + const locationY = + Math.random() * (window.innerHeight - radius * 2) + radius; + const speedDirectionX = Math.random() * 5; + const speedDirectionY = Math.random() * 5; + const color = randomColor(); + circleArray.push( + new Circle( + locationX, + locationY, + speedDirectionX, + speedDirectionY, + radius, + color + ) + ); + } +} + +function animate() { + ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); + checkForWin(); + + circleArray.forEach((circle) => { + circle.draw().update(); + }); + requestAnimationFrame(animate); +} + +function newGame() { + score = 0; + const amountOfCircles = prompt( + "How many circles you want to generate?" + ) as string; + if (!amountOfCircles || /[a-zA-Z]/.test(amountOfCircles)) return newGame(); + generateCircles(parseInt(amountOfCircles)); + startTimer = setInterval(() => { + time--; + seconds.textContent = time.toString(); + }, 1000); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/control.js new file mode 100644 index 000000000..80263da4c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/control.js @@ -0,0 +1,30 @@ +function generateCircles(amount) { + for (var i = 0; i < amount; i++) { + var radius = Math.random() * 50 + 20; + var locationX = Math.random() * (window.innerWidth - radius * 2) + radius; + var locationY = Math.random() * (window.innerHeight - radius * 2) + radius; + var speedDirectionX = Math.random() * 5; + var speedDirectionY = Math.random() * 5; + var color = randomColor(); + circleArray.push(new Circle(locationX, locationY, speedDirectionX, speedDirectionY, radius, color)); + } +} +function animate() { + ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); + checkForWin(); + circleArray.forEach(function (circle) { + circle.draw().update(); + }); + requestAnimationFrame(animate); +} +function newGame() { + score = 0; + var amountOfCircles = prompt("How many circles you want to generate?"); + if (!amountOfCircles || /[a-zA-Z]/.test(amountOfCircles)) + return newGame(); + generateCircles(parseInt(amountOfCircles)); + startTimer = setInterval(function () { + time--; + seconds.textContent = time.toString(); + }, 1000); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/helpers.js new file mode 100644 index 000000000..702a58cdf --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/helpers.js @@ -0,0 +1,30 @@ +function randomColor() { + return "#" + Math.floor(Math.random() * 16777215).toString(16); +} +function isIntersect(point, circle) { + return (Math.sqrt(Math.pow((point.x - circle.lastX), 2) + Math.pow((point.y - circle.lastY), 2)) < + circle.radius); +} +function checkForWin() { + if (circleArray.length == 0) { + alert("You win! Score: " + score); + clearInterval(startTimer); + return newGame(); + } + if (time < 0) { + alert("you lose! Score: " + score); + clearInterval(startTimer); + circleArray.splice(0); + seconds.textContent = "0"; + newGame(); + } +} +function handleSecondClickOnCircle(index) { + score += 5; + liveScore.textContent = score.toString(); + clapAudio.currentTime = 0; + clapAudio.play(); + circleArray.splice(index, 1); + time += 5; //add 5 seconds to timer when clicking circle for the second time + seconds.textContent = time.toString(); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/main.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/main.js new file mode 100644 index 000000000..3cb6a5d89 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/main.js @@ -0,0 +1,17 @@ +window.addEventListener("resize", function () { + canvas.width = window.innerWidth - 10; + canvas.height = window.innerHeight - 10; +}); +window.addEventListener("click", function (e) { + var _a; + _a = [e.x, e.y], mouseLocation.x = _a[0], mouseLocation.y = _a[1]; + circleArray.forEach(function (circle) { + if (isIntersect(mouseLocation, circle)) { + circle.handleClick(); + circle.speedDirectionX = 8; + circle.speedDirectionY = 8; + } + }); +}); +newGame(); +animate(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/model.js new file mode 100644 index 000000000..58d4004f8 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/model.js @@ -0,0 +1,55 @@ +var circleArray = []; +var mouseLocation = { x: 0, y: 0 }; +var Circle = /** @class */ (function () { + // private lineWidth: number; + function Circle(lastX, lastY, speedDirectionX, speedDirectionY, radius, color) { + this.lastX = lastX; + this.lastY = lastY; + this.speedDirectionX = speedDirectionX; + this.speedDirectionY = speedDirectionY; + this.radius = radius; + this.color = color; + this.lastX = lastX; + this.lastY = lastY; + this.speedDirectionX = speedDirectionX; + this.speedDirectionY = speedDirectionY; + this.radius = radius; + this.color = color; + this.uid = Math.random() * 1000000; + // this.lineWidth = 0; + } + Circle.prototype.draw = function () { + ctx.beginPath(); + ctx.arc(this.lastX, this.lastY, this.radius, 0, Math.PI * 2, false); + ctx.fillStyle = this.color; + ctx.fill(); + ctx.closePath(); + return this; + }; + Circle.prototype.update = function () { + if (this.lastX + this.radius * 1.2 > window.innerWidth || + this.lastX - this.radius < 0) { + this.speedDirectionX = -this.speedDirectionX; + } + if (this.lastY + this.radius * 1.2 > window.innerHeight || + this.lastY - this.radius < 0) { + this.speedDirectionY = -this.speedDirectionY; + } + this.lastX += this.speedDirectionX; + this.lastY += this.speedDirectionY; + }; + Circle.prototype.handleClick = function () { + var _this = this; + var newColor = "red"; + var index = circleArray.findIndex(function (circle) { return circle.uid == _this.uid; }); + if (this.color != newColor) { + score++; + liveScore.textContent = score.toString(); + tinkAudio.currentTime = 0; + tinkAudio.play(); + return (this.color = newColor); + } + handleSecondClickOnCircle(index); + }; + return Circle; +}()); diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/style.css new file mode 100644 index 000000000..2ff3f226a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/style.css @@ -0,0 +1,45 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.playground { + outline: 5px solid black; + background-color: cornflowerblue; +} + +.timer { + position: absolute; + top: 10px; + left: 10px; + background-color: white; + padding: 0.5em; + font-size: 1.5rem; + font-weight: bold; +} +.timer__timeLeft { + color: red; + margin-left: 10px; +} + +.scoreDiv { + position: absolute; + top: 10px; + right: 10px; + background-color: white; + padding: 0.5em; + font-size: 1.5rem; + font-weight: bold; +} +.scoreDiv .liveScore { + color: green; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/view.js new file mode 100644 index 000000000..d46c6954a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/dist/view.js @@ -0,0 +1,11 @@ +var canvas = document.querySelector(".playground"); +var ctx = canvas.getContext("2d"); +canvas.width = window.innerWidth - 10; +canvas.height = window.innerHeight - 10; +var seconds = document.querySelector(".timer__timeLeft"); +var time = 30; +var startTimer; +var tinkAudio = document.querySelector('#tinkSound'); +var clapAudio = document.querySelector('#clapSound'); +var score = 0; +var liveScore = document.querySelector('.liveScore'); diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/helpers.ts new file mode 100644 index 000000000..7ad3d72ba --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/helpers.ts @@ -0,0 +1,35 @@ +function randomColor() { + return "#" + Math.floor(Math.random() * 16777215).toString(16); +} + +function isIntersect(point: MouseCoordinates, circle: Circle) { + return ( + Math.sqrt((point.x - circle.lastX) ** 2 + (point.y - circle.lastY) ** 2) < + circle.radius + ); +} + +function checkForWin() { + if (circleArray.length == 0) { + alert(`You win! Score: ${score}`); + clearInterval(startTimer); + return newGame(); + } + if (time < 0) { + alert(`you lose! Score: ${score}`); + clearInterval(startTimer); + circleArray.splice(0); + seconds.textContent = "0"; + newGame(); + } +} + +function handleSecondClickOnCircle(index: number) { + score += 5; + liveScore.textContent = score.toString(); + clapAudio.currentTime = 0; + clapAudio.play(); + circleArray.splice(index, 1); + time += 5; //add 5 seconds to timer when clicking circle for the second time + seconds.textContent = time.toString(); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/main.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/main.ts new file mode 100644 index 000000000..45f34c7b0 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/main.ts @@ -0,0 +1,19 @@ +window.addEventListener("resize", () => { + canvas.width = window.innerWidth - 10; + canvas.height = window.innerHeight - 10; +}); + +window.addEventListener("click", (e) => { + [mouseLocation.x, mouseLocation.y] = [e.x, e.y]; + circleArray.forEach((circle) => { + if (isIntersect(mouseLocation, circle)) { + circle.handleClick(); + circle.speedDirectionX = 8; + circle.speedDirectionY = 8; + } + }); +}); + +newGame(); +animate(); + diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/model.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/model.ts new file mode 100644 index 000000000..75fc03078 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/model.ts @@ -0,0 +1,67 @@ +const circleArray: Circle[] = []; + +interface MouseCoordinates { + x: number; + y: number; +} + +const mouseLocation: MouseCoordinates = { x: 0, y: 0 }; + +class Circle { + private uid: number; + // private lineWidth: number; + constructor( + public lastX, + public lastY, + public speedDirectionX, + public speedDirectionY, + public radius, + public color + ) { + this.lastX = lastX; + this.lastY = lastY; + this.speedDirectionX = speedDirectionX; + this.speedDirectionY = speedDirectionY; + this.radius = radius; + this.color = color; + this.uid = Math.random() * 1000000; + // this.lineWidth = 0; + } + draw() { + ctx.beginPath(); + ctx.arc(this.lastX, this.lastY, this.radius, 0, Math.PI * 2, false); + ctx.fillStyle = this.color; + ctx.fill(); + ctx.closePath(); + return this; + } + update() { + if ( + this.lastX + this.radius * 1.2 > window.innerWidth || + this.lastX - this.radius < 0 + ) { + this.speedDirectionX = -this.speedDirectionX; + } + if ( + this.lastY + this.radius * 1.2 > window.innerHeight || + this.lastY - this.radius < 0 + ) { + this.speedDirectionY = -this.speedDirectionY; + } + + this.lastX += this.speedDirectionX; + this.lastY += this.speedDirectionY; + } + handleClick() { + const newColor = "red"; + const index = circleArray.findIndex((circle) => circle.uid == this.uid); + if (this.color != newColor) { + score++; + liveScore.textContent = score.toString(); + tinkAudio.currentTime = 0; + tinkAudio.play(); + return (this.color = newColor); + } + handleSecondClickOnCircle(index); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/style.scss b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/style.scss new file mode 100644 index 000000000..87149a3b3 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/style.scss @@ -0,0 +1,45 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.playground { + outline: 5px solid black; + background-color: cornflowerblue; +} + +.timer { + position: absolute; + top: 10px; + left: 10px; + background-color: white; + padding: .5em; + font-size: 1.5rem; + font-weight: bold; + &__timeLeft { + color: red; + margin-left: 10px; + } +} + +.scoreDiv { + position: absolute; + top: 10px; + right: 10px; + background-color: white; + padding: .5em; + font-size: 1.5rem; + font-weight: bold; + .liveScore { + color: green; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/view.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/view.ts new file mode 100644 index 000000000..19b3a9736 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Canvas/src/view.ts @@ -0,0 +1,18 @@ +const canvas = document.querySelector(".playground") as HTMLCanvasElement; + +const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; + +canvas.width = window.innerWidth - 10; +canvas.height = window.innerHeight - 10; + +const seconds = document.querySelector(".timer__timeLeft") as HTMLSpanElement; + +let time:number = 30; + +let startTimer: number; + +const tinkAudio = document.querySelector('#tinkSound') as HTMLAudioElement; +const clapAudio = document.querySelector('#clapSound') as HTMLAudioElement; + +let score:number = 0; +const liveScore = document.querySelector('.liveScore') as HTMLSpanElement; \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/index.html b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/index.html new file mode 100644 index 000000000..5961ff642 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/index.html @@ -0,0 +1,21 @@ + + + + + + + Bouncing Balls + + + + + + + + +
                +
                + + + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/boom.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/boom.wav new file mode 100644 index 000000000..8d6423bcd Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/boom.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/clap.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/clap.wav new file mode 100644 index 000000000..ef952e5eb Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/clap.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/hihat.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/hihat.wav new file mode 100644 index 000000000..885cb196a Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/hihat.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/kick.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/kick.wav new file mode 100644 index 000000000..8fe46dea0 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/kick.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/openhat.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/openhat.wav new file mode 100644 index 000000000..50637521d Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/openhat.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/ride.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/ride.wav new file mode 100644 index 000000000..e5829dfef Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/ride.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/snare.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/snare.wav new file mode 100644 index 000000000..c4edfc753 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/snare.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/tink.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/tink.wav new file mode 100644 index 000000000..1f3c7b919 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/tink.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/tom.wav b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/tom.wav new file mode 100644 index 000000000..9e2cdf691 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/sounds/tom.wav differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/control.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/control.ts new file mode 100644 index 000000000..84c34f7e7 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/control.ts @@ -0,0 +1,40 @@ +function animate() { + wrapper.replaceChildren(); + circleArray.forEach((circle) => { + circle.draw().update(); + }); + if (explosionArr) + explosionArr.forEach((circle) => { + circle.draw().update(); + }); + + requestAnimationFrame(animate); +} + +function generateCircles( + amount: number, + locX: number, + locY: number, + arr: Circle[], + explosion: boolean +) { + for (let i = 0; i < amount; i++) { + let radius = Math.random() * 50 + 20; + if (explosion) radius = 5; + const locationX = locX; + const locationY = locY; + const speedDirectionX = Math.random() * 5 * randomDirection(); + const speedDirectionY = Math.random() * 5 * randomDirection(); + const color = randomColor(); + arr.push( + new Circle( + locationX, + locationY, + speedDirectionX, + speedDirectionY, + radius, + color + ) + ); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/control.js new file mode 100644 index 000000000..6b22899d5 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/control.js @@ -0,0 +1,24 @@ +function animate() { + wrapper.replaceChildren(); + circleArray.forEach(function (circle) { + circle.draw().update(); + }); + if (explosionArr) + explosionArr.forEach(function (circle) { + circle.draw().update(); + }); + requestAnimationFrame(animate); +} +function generateCircles(amount, locX, locY, arr, explosion) { + for (var i = 0; i < amount; i++) { + var radius = Math.random() * 50 + 20; + if (explosion) + radius = 5; + var locationX = locX; + var locationY = locY; + var speedDirectionX = Math.random() * 5 * randomDirection(); + var speedDirectionY = Math.random() * 5 * randomDirection(); + var color = randomColor(); + arr.push(new Circle(locationX, locationY, speedDirectionX, speedDirectionY, radius, color)); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/helpers.js new file mode 100644 index 000000000..42eee2d91 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/helpers.js @@ -0,0 +1,19 @@ +function randomColor() { + return "#" + Math.floor(Math.random() * 16777215).toString(16); +} +function isIntersect(point, circle) { + return (Math.sqrt(Math.pow((point.x - circle.lastX), 2) + Math.pow((point.y - circle.lastY), 2)) < + circle.radius); +} +function handleSecondClickOnCircle(index) { + clapAudio.play(); + circleArray.splice(index, 1); +} +var randomDirection = function () { + if (Math.random() > 0.5) { + return 1; + } + else { + return -1; + } +}; diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/main.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/main.js new file mode 100644 index 000000000..25671a5d3 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/main.js @@ -0,0 +1,14 @@ +var ballsCount = parseInt(prompt('Eneter how many balls you want to pop')); +window.addEventListener("click", function (e) { + var _a; + _a = [e.x, e.y], mouseLocation.x = _a[0], mouseLocation.y = _a[1]; + circleArray.forEach(function (circle) { + if (isIntersect(mouseLocation, circle)) { + circle.handleClick(); + circle.speedDirectionX = 8; + circle.speedDirectionY = 8; + } + }); +}); +generateCircles(ballsCount, midScreenX, midScreenY, circleArray, false); +animate(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/model.js new file mode 100644 index 000000000..24a9f0788 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/model.js @@ -0,0 +1,57 @@ +var circleArray = []; +var explosionArr = []; +var mouseLocation = { x: 0, y: 0 }; +var Circle = /** @class */ (function () { + // give them a type. + function Circle(lastX, lastY, speedDirectionX, speedDirectionY, radius, color) { + this.lastX = lastX; + this.lastY = lastY; + this.speedDirectionX = speedDirectionX; + this.speedDirectionY = speedDirectionY; + this.radius = radius; + this.color = color; + this.lastX = lastX; + this.lastY = lastY; + this.speedDirectionX = speedDirectionX; + this.speedDirectionY = speedDirectionY; + this.radius = radius; + this.color = color; + this.uid = Math.random() * 1000000; + this.boxShadow = "0 0 10px white"; + } + Circle.prototype.draw = function () { + var newBall = document.createElement("div"); + newBall.classList.add("ball"); + newBall.style.left = this.lastX + "px"; + newBall.style.top = this.lastY + "px"; + newBall.style.width = this.radius + "px"; + newBall.style.background = "" + this.color; + newBall.style.boxShadow = "" + this.boxShadow; + wrapper.append(newBall); + return this; + }; + Circle.prototype.update = function () { + if (this.lastX + this.radius > wrapper.offsetWidth || this.lastX < 0) { + this.speedDirectionX = -this.speedDirectionX; + } + if (this.lastY + this.radius > wrapper.offsetHeight || this.lastY < 0) { + this.speedDirectionY = -this.speedDirectionY; + } + this.lastX += this.speedDirectionX; + this.lastY += this.speedDirectionY; + }; + Circle.prototype.handleClick = function () { + var newColor = "radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 52%)"; + //you should able to find it by the this keyword + var index = circleArray.indexOf(this); + if (this.color != newColor) { + tinkAudio.play(); + this.boxShadow = "0 0 30px black"; + return (this.color = newColor); + } + handleSecondClickOnCircle(index); + generateCircles(50, this.lastX, this.lastY, explosionArr, true); + setTimeout(function () { return explosionArr.splice(0); }, 500); + }; + return Circle; +}()); diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/style.css new file mode 100644 index 000000000..f8c2a95a6 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/style.css @@ -0,0 +1,20 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + overflow: hidden; +} + +.playground { + width: 100vw; + height: 100vh; + background-color: darkcyan; +} +.playground .ball { + aspect-ratio: 1/1; + border-radius: 50%; + position: absolute; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/view.js new file mode 100644 index 000000000..ab7014c9b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/dist/view.js @@ -0,0 +1,5 @@ +var wrapper = document.querySelector(".playground"); +var tinkAudio = document.querySelector("#tinkSound"); +var clapAudio = document.querySelector("#clapSound"); +var midScreenX = wrapper.offsetWidth / 2; +var midScreenY = wrapper.offsetHeight / 2; diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/helpers.ts new file mode 100644 index 000000000..d2b7a7767 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/helpers.ts @@ -0,0 +1,24 @@ +function randomColor() { + return "#" + Math.floor(Math.random() * 16777215).toString(16); +} + +function isIntersect(point: MouseCoordinates, circle: Circle) { + return ( + Math.sqrt((point.x - circle.lastX) ** 2 + (point.y - circle.lastY) ** 2) < + circle.radius + ); +} + + +function handleSecondClickOnCircle(index: number) { + clapAudio.play(); + circleArray.splice(index, 1); +} + +const randomDirection = () => { + if (Math.random() > 0.5) { + return 1; + } else { + return -1; + } +}; \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/main.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/main.ts new file mode 100644 index 000000000..0f4c3084d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/main.ts @@ -0,0 +1,16 @@ +const ballsCount = parseInt(prompt('Eneter how many balls you want to pop') as string) + +window.addEventListener("click", (e) => { + [mouseLocation.x, mouseLocation.y] = [e.x, e.y]; + circleArray.forEach((circle) => { + if (isIntersect(mouseLocation, circle)) { + circle.handleClick(); + circle.speedDirectionX = 8; + circle.speedDirectionY = 8; + } + }); + }); + + +generateCircles(ballsCount, midScreenX, midScreenY, circleArray, false); +animate(); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/model.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/model.ts new file mode 100644 index 000000000..0f3ca54d6 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/model.ts @@ -0,0 +1,68 @@ +const circleArray: Circle[] = []; + +const explosionArr: Circle[] = []; +interface MouseCoordinates { + x: number; + y: number; +} + +const mouseLocation: MouseCoordinates = { x: 0, y: 0 }; +class Circle { + private uid: number; + private boxShadow: string; + // give them a type. + constructor( + public lastX: number, + public lastY: number, + public speedDirectionX: number, + public speedDirectionY: number, + public radius: number, + public color: string + ) { + this.lastX = lastX; + this.lastY = lastY; + this.speedDirectionX = speedDirectionX; + this.speedDirectionY = speedDirectionY; + this.radius = radius; + this.color = color; + this.uid = Math.random() * 1000000; + this.boxShadow = "0 0 10px white"; + } + draw() { + const newBall = document.createElement("div") as HTMLDivElement; + newBall.classList.add("ball"); + newBall.style.left = `${this.lastX}px`; + newBall.style.top = `${this.lastY}px`; + newBall.style.width = `${this.radius}px`; + newBall.style.background = `${this.color}`; + newBall.style.boxShadow = `${this.boxShadow}`; + wrapper.append(newBall); + return this; + } + update() { + if (this.lastX + this.radius > wrapper.offsetWidth || this.lastX < 0) { + this.speedDirectionX = -this.speedDirectionX; + } + if (this.lastY + this.radius > wrapper.offsetHeight || this.lastY < 0) { + this.speedDirectionY = -this.speedDirectionY; + } + + this.lastX += this.speedDirectionX; + this.lastY += this.speedDirectionY; + } + handleClick() { + const newColor = + "radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 52%)"; + + //you should able to find it by the this keyword + const index = circleArray.indexOf(this) + if (this.color != newColor) { + tinkAudio.play(); + this.boxShadow = "0 0 30px black"; + return (this.color = newColor); + } + handleSecondClickOnCircle(index); + generateCircles(50, this.lastX, this.lastY, explosionArr, true); + setTimeout(() => explosionArr.splice(0), 500); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/style.scss b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/style.scss new file mode 100644 index 000000000..59ed30092 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/style.scss @@ -0,0 +1,20 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + overflow: hidden; +} + +.playground { + width: 100vw; + height: 100vh; + background-color: darkcyan; + .ball { + aspect-ratio: 1/1; + border-radius: 50%; + position: absolute; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/view.ts b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/view.ts new file mode 100644 index 000000000..cdf99af2c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/VladiBykanov/Bouncing_Balls_Divs/src/view.ts @@ -0,0 +1,7 @@ +const wrapper = document.querySelector(".playground") as HTMLDivElement; + +const tinkAudio = document.querySelector("#tinkSound") as HTMLAudioElement; +const clapAudio = document.querySelector("#clapSound") as HTMLAudioElement; + +const midScreenX = wrapper.offsetWidth / 2; +const midScreenY = wrapper.offsetHeight / 2; diff --git a/02-TypeScript/16-CRUD/home-puzzles/instructions.md b/02-TypeScript/16-CRUD/home-puzzles/instructions.md new file mode 100644 index 000000000..70c8ee341 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/instructions.md @@ -0,0 +1,3 @@ +1) create your favorite store(candy, games, movies, etc). the user can add an item, update details on an item and delete items +2) create a "shooting ballons game." Create an array of balloons. Every balloon has an image. The balloon flies in random order. The color changes when you click on a balloon for the first time. The balloon exploded the second time and will be deleted from the array. The game ends when the array is empty. +https://media.licdn.com/dms/image/C560DAQF3Bbfu-E479Q/learning-public-crop_288_512/0/1612216043080?e=2147483647&v=beta&t=S-NmSOSkVdjq4e4MgkuwUsEvHFlIG4ZSXLDcO32RQ1o diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/control.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/control.ts new file mode 100644 index 000000000..cc8486fac --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/control.ts @@ -0,0 +1,154 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const sn = ev.target.elements.sn.value; + const img = ev.target.elements.img.value; + + items.push(new Item(name, color, price, category, sn, img)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                S/N: ${item.sn}
                + + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function newPrice(uid: string) { + try { + const priceUpdate = prompt("add new price") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} +function newSN(uid: string) { + try { + const priceUpdate = prompt("add new SN") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].sn) { + items[index].sn = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} +function newCategory(uid: string) { + try { + const priceUpdate = prompt("add new Category") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].category) { + items[index].category = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} +function newName(uid: string) { + try { + const priceUpdate = prompt("add new Name") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].name) { + items[index].name = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/control.js new file mode 100644 index 000000000..596d39baa --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/control.js @@ -0,0 +1,153 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var sn = ev.target.elements.sn.value; + var img = ev.target.elements.img.value; + items.push(new Item(name, color, price, category, sn, img)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                S/N: " + item.sn + "
                \n \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function newPrice(uid) { + try { + var priceUpdate = prompt("add new price"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newSN(uid) { + try { + var priceUpdate = prompt("add new SN"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].sn) { + items[index].sn = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newCategory(uid) { + try { + var priceUpdate = prompt("add new Category"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].category) { + items[index].category = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newName(uid) { + try { + var priceUpdate = prompt("add new Name"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].name) { + items[index].name = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + } + catch (error) { + console.error(error); + return false; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/model.js new file mode 100644 index 000000000..05c3a494f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, sn, img) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.sn = sn; + this.img = img; + this.uid = uid(); + } + return Item; +}()); +var items = []; +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345") +console.log(items); diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/style.css new file mode 100644 index 000000000..6f5f2b39d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/style.css @@ -0,0 +1,57 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +h1, a { + color: red; + display: grid; + justify-content: center; + text-align: center; +} + +body { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/view.js new file mode 100644 index 000000000..9bcc65fb6 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector('#itemsRoot'); diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/index.html b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/index.html new file mode 100644 index 000000000..64f502f94 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/index.html @@ -0,0 +1,18 @@ + + + + + + + GmaeStop + + + + + + + +

                Store

                + set product + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/index.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/model.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/model.ts new file mode 100644 index 000000000..a99187109 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public sn: string, + public img: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345") +console.log(items) diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/setProduct.html b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/setProduct.html new file mode 100644 index 000000000..65f870b4c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/setProduct.html @@ -0,0 +1,45 @@ + + + + + + + + Store - set product + + + + + + + + + +

                Add product +

                + Store +
                + + + + + + + +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/style.css b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/style.css new file mode 100644 index 000000000..459bb73ed --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/style.css @@ -0,0 +1,57 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +h1, a { + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; +} + +body { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/style.scss b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/style.scss new file mode 100644 index 000000000..5300829ad --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/style.scss @@ -0,0 +1,58 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} + +h1, a{ + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; + + } + + body{ + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + } diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/view.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/view.ts new file mode 100644 index 000000000..f69d39a03 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 1/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector('#itemsRoot'); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/control.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/control.ts new file mode 100644 index 000000000..b1a61d766 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/control.ts @@ -0,0 +1,44 @@ +function getRandomBalloons(): void { + try { + const myBox: HTMLElement | null = document.querySelector('.balloon') + if (myBox) { + myBox.addEventListener('click', (event) => {}) + } + const balloon: any = document.querySelectorAll(`.balloon`) + balloon.forEach((div) => { + div.addEventListener('click', (event) => { + div.style.backgroundColor = getRandomColor() + }) + div.addEventListener('dblclick', (event) => { + div.remove(event) + }) + }) + } catch (error) {} +} +for (let i = 0; i < 33; i++) { + caterBalloons() +} +const card: any = document.querySelector('.balloon') +function caterBalloons() { + const balloonSpeed = randomNumber(40, 90) + const balloonSize = randomNumber(45, getViewportWidth() / 5) + const balloonPosition = randomNumber( + 0 - balloonSize / 2, + getViewportWidth() - balloonSize / 2 - 120, + ) + const randomBalloon = document.createElement(`div`) + randomBalloon.classList.add(`balloon`) + randomBalloon.style.left = Math.random() * 950 + 'px' + randomBalloon.style.top = Math.random() * 250 + 'px' + randomBalloon.style.backgroundColor = getRandomColor() + randomBalloon.style.animation = `floatUp ${balloonSpeed}s linear 1, wobble ${randomNumber( + 4, + 12, + )}s ease-in-out alternate` + // randomBalloon.addEventListener(`click`, pop); + document.querySelector(`.wrapper`)?.appendChild(randomBalloon) + PopUpBalloons.push = function (randomBalloon) { + throw new Error('Method not implemented.') + } + getRandomBalloons() +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/control.dev.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/control.dev.js new file mode 100644 index 000000000..9a390c31f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/control.dev.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/control.js new file mode 100644 index 000000000..2ec4f28ac --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/control.js @@ -0,0 +1,40 @@ +function getRandomBalloons() { + try { + var myBox = document.querySelector('.balloon'); + if (myBox) { + myBox.addEventListener('click', function (event) { }); + } + var balloon = document.querySelectorAll(".balloon"); + balloon.forEach(function (div) { + div.addEventListener('click', function (event) { + div.style.backgroundColor = getRandomColor(); + }); + div.addEventListener('dblclick', function (event) { + div.remove(event); + }); + }); + } + catch (error) { } +} +for (var i = 0; i < 33; i++) { + caterBalloons(); +} +var card = document.querySelector('.balloon'); +function caterBalloons() { + var _a; + var balloonSpeed = randomNumber(22, 56); + var balloonSize = randomNumber(45, getViewportWidth() / 5); + var balloonPosition = randomNumber(0 - balloonSize / 2, getViewportWidth() - balloonSize / 2 - 120); + var randomBalloon = document.createElement("div"); + randomBalloon.classList.add("balloon"); + randomBalloon.style.left = Math.random() * 950 + 'px'; + randomBalloon.style.top = Math.random() * 250 + 'px'; + randomBalloon.style.backgroundColor = getRandomColor(); + randomBalloon.style.animation = "floatUp " + balloonSpeed + "s linear 1, wobble " + randomNumber(4, 12) + "s ease-in-out alternate"; + // randomBalloon.addEventListener(`click`, pop); + (_a = document.querySelector(".wrapper")) === null || _a === void 0 ? void 0 : _a.appendChild(randomBalloon); + PopUpBalloons.push = function (randomBalloon) { + throw new Error('Method not implemented.'); + }; + getRandomBalloons(); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/helpers.js new file mode 100644 index 000000000..829d43695 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/helpers.js @@ -0,0 +1,9 @@ +function getRandomColor() { + return "#" + Math.floor(Math.random() * 16777215).toString(16); +} +var randomNumber = function (min, max) { + return Math.floor(Math.random() * (max - min) + min); +}; +var getViewportWidth = function () { + return parseInt(getComputedStyle(document.body, null).width, 10); +}; diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/main.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/main.js new file mode 100644 index 000000000..4308b98de --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/main.js @@ -0,0 +1,2 @@ +getRandomBalloons(); +caterBalloons(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/model.js new file mode 100644 index 000000000..0eb01884b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/model.js @@ -0,0 +1,11 @@ +var PopUpBalloons = /** @class */ (function () { + function PopUpBalloons(name, color) { + this.name = name; + this.color = color; + } + PopUpBalloons.push = function (randomBalloon) { + throw new Error("Method not implemented."); + }; + return PopUpBalloons; +}()); +var popUpBalloons = []; diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/style.css new file mode 100644 index 000000000..1513fa7cf --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/style.css @@ -0,0 +1,76 @@ +.balloon { + --balloonDimension: 5vmax; + width: var(--balloonDimension); + height: var(--balloonDimension); + border-radius: 100% 100% 15% 100%; + margin: 0 0 0 25px; + transform: rotateZ(45deg); + background-color: red; + position: absolute; + border: 1px solid black; +} + +.balloon::before { + content: ""; + width: 10%; + height: 25%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%); + position: absolute; + left: 15%; + top: 45%; + border-radius: 100%; +} + +.balloon::after { + content: ""; + width: 13%; + height: 5%; + background-color: inherit; + position: absolute; + left: 92%; + top: 94%; + border-radius: 22%; + transform: rotateZ(-45deg); +} + +.wrapper { + margin-left: 8rem; + position: relative; + max-width: 150ch; + margin-top: auto; + border: 2px solid black; + width: 1500px; + height: 500px; + overflow-y: hidden; + background-image: url(https://img.freepik.com/free-vector/forest-scene-with-various-forest-trees_1308-57640.jpg?w=1380&t=st=1675029517~exp=1675030117~hmac=7165743ac1d980f5a58e2a9aaf6c32392fbb1652fb69d231bb2a175a4fff7ba1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +h1 { + color: blue; + text-align: center; +} + +h3 { + color: red; + text-align: center; +} + +span { + color: green; +} + +h4 { + text-align: center; +} + +@keyframes floatUp { + 0% { + top: 1000px; + } + 100% { + top: -1000px; + } +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/helpers.ts new file mode 100644 index 000000000..f2a122a89 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/helpers.ts @@ -0,0 +1,11 @@ +function getRandomColor(): string { + return "#" + Math.floor(Math.random()*16777215).toString(16); + } + + const randomNumber = (min, max) => { + return Math.floor(Math.random() * (max - min) + min) +} + +const getViewportWidth = () => { + return parseInt(getComputedStyle(document.body, null).width, 10) +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/index.html b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/index.html new file mode 100644 index 000000000..821739ace --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/index.html @@ -0,0 +1,27 @@ + + + + + + + + PupUpBalloons - game + + + + + + + + + +

                PopUpBalloons

                +

                Rules: One click = change color || + Double click = blow up the balloon

                +

                The balloons are coming in 3..2..1.. GO!!!

                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/main.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/main.ts new file mode 100644 index 000000000..8f17118a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/main.ts @@ -0,0 +1,2 @@ +getRandomBalloons(); +caterBalloons(); \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/model.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/model.ts new file mode 100644 index 000000000..acd9ca0f2 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/model.ts @@ -0,0 +1,12 @@ +class PopUpBalloons{ + static push(randomBalloon: HTMLDivElement) { + throw new Error("Method not implemented."); + } + constructor( + public name:string, + public color:string + ){} +} + + +const popUpBalloons:PopUpBalloons[] = []; diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/style.scss b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/style.scss new file mode 100644 index 000000000..665eb8aec --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/style.scss @@ -0,0 +1,75 @@ +.balloon { + --balloonDimension: 5vmax; + width: var(--balloonDimension); + height: var(--balloonDimension); + border-radius: 100% 100% 15% 100%; + margin: 0 0 0 25px; + transform: rotateZ(45deg); + background-color: red; + position: absolute; + border: 1px solid black; + +} + +.balloon::before { + content: ""; + width: 10%; + height: 25%; + background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1)100%); + position: absolute; + left: 15%; + top: 45%; + border-radius: 100%; + +} + +.balloon::after { + content: ""; + width: 13%; + height: 5%; + background-color: inherit; + position: absolute; + left: 92%; + top: 94%; + border-radius: 22%; + transform: rotateZ(-45deg); +} + +.wrapper { +margin-left: 8rem; + position: relative; + max-width: 150ch; + margin-top: auto; + border: 2px solid black; + width: 1500px; + height: 500px; + // overflow-x: auto; + overflow-y:hidden; + background-image: url(https://img.freepik.com/free-vector/forest-scene-with-various-forest-trees_1308-57640.jpg?w=1380&t=st=1675029517~exp=1675030117~hmac=7165743ac1d980f5a58e2a9aaf6c32392fbb1652fb69d231bb2a175a4fff7ba1); + background-repeat: no-repeat; + background-position: center; + background-size:cover; +} +h1{ + color: blue; + text-align: center; +} +h3{ + color: red; + text-align: center; +} +span{ + color: green; +} +h4{ + text-align: center; +} + +@keyframes floatUp { + 0% { + top: 1000px; + } + 100% { + top: -1000px; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/view.ts b/02-TypeScript/16-CRUD/home-puzzles/itayAmosi/task 2/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/john-ben/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/john-ben/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/john-ben/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/john-ben/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/john-ben/index.html b/02-TypeScript/16-CRUD/home-puzzles/john-ben/index.html new file mode 100644 index 000000000..d2b5c48b7 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/john-ben/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/john-ben/index.ts b/02-TypeScript/16-CRUD/home-puzzles/john-ben/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/john-ben/style.scss b/02-TypeScript/16-CRUD/home-puzzles/john-ben/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/addItems.html b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/addItems.html new file mode 100644 index 000000000..1df73babb --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/addItems.html @@ -0,0 +1,42 @@ + + + + + + + Store- Settings + + + + + + + + +

                Add products

                + Store +

                NOA Store

                +
                + +
                +
                +
                +
                +
                + +
                +
                + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/control.ts b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/control.ts new file mode 100644 index 000000000..58e2adca0 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/control.ts @@ -0,0 +1,175 @@ +function showStore(clothesShopArr: Item[]): string { + try { + if (store && clothesShopArr.length != 0) { + let html = ``; + for (let i = 0; i < clothesShopArr.length; i++) { + html += `
                + image +

                ${clothesShopArr[i].name}

                +
                ${clothesShopArr[i].department}
                +
                ${clothesShopArr[i].type}
                +

                ${clothesShopArr[i].price}

                + + +
                `; + } + return html; + } else { + throw new Error(`there is no item in the store`); + } + } catch (error) { + console.error(error); + return ""; + } +} + +function addItem(event: any) { + try { + event.preventDefault(); + const name = event.target.elements.name.value; + const departement = event.target.elements.departement.value; + const type = event.target.elements.type.value; + const price = event.target.elements.price.valueAsNumber; + const image = event.target.elements.image.value; + clothesShopArr.push(new Item(name, departement, type, price, image)); + event.target.reset(); + if (!store) throw new Error("the store is available"); + store.innerHTML = showStore(clothesShopArr); + } catch (error) { + console.error(Error); + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = clothesShopArr.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + clothesShopArr.splice(index, 1); + + if (!store) throw new Error("store is available"); + store.innerHTML = showStore(clothesShopArr); + } catch (error) { + console.error(error); + } +} + +function handleUpdateItem(uid: string) { + try { + let newPrice; + newPrice = prompt("Enter a new price to this item:"); + while (!newPrice || isNaN(newPrice)) { + newPrice = prompt("You need to enter a number:"); + newPrice = parseInt(newPrice); + } + const index = clothesShopArr.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + if (newPrice) clothesShopArr[index].price = newPrice; + + if (!store) throw new Error("ItemRoot is undefined"); + store.innerHTML = showStore(clothesShopArr); + } catch (error) { + console.error(error); + } +} + +function getAllItemInType(clothesArr: Item[]): void | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + let typeGetFromUser; + while (!typeGetFromUser) { + typeGetFromUser = prompt(`Enter the type of item you will want to buy:`); + } + const chosenItemsArr = clothesArr.filter( + (item) => item.type == typeGetFromUser + ); + if (chosenItemsArr.length == 0) + throw new Error( + `items from type ${typeGetFromUser} is availble in our store` + ); + else { + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                + + +
                `; + } + } + } + } catch (error) { + console.error(error); + if (store) + store.innerHTML = `

                Item from this type is availble in our store

                `; + return false; + } +} + +function sortArrByPrice(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = clothesArr.sort((a, b) => a.price - b.price); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < sortedArr.length; i++) { + store.innerHTML += `
                + image +

                ${sortedArr[i].name}

                +
                ${sortedArr[i].department}
                +
                ${sortedArr[i].type}
                +

                ${sortedArr[i].price}

                + + +
                `; + } + } + return sortedArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } +} + +function getTheCheapestItem(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = sortArrByPrice(clothesArr); + let chosenItemsArr; + if (sortedArr) { + chosenItemsArr = sortedArr.filter( + (item) => item.price == sortedArr[0].price + ); + if (chosenItemsArr.length == 0) + throw new Error(`there is no item in the store`); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                + + +
                `; + } + } + } + return chosenItemsArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/control.js new file mode 100644 index 000000000..8538c335c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/control.js @@ -0,0 +1,145 @@ +function showStore(clothesShopArr) { + try { + if (store && clothesShopArr.length != 0) { + var html = ""; + for (var i = 0; i < clothesShopArr.length; i++) { + html += "
                \n \"image\"/\n

                " + clothesShopArr[i].name + "

                \n
                " + clothesShopArr[i].department + "
                \n
                " + clothesShopArr[i].type + "
                \n

                " + clothesShopArr[i].price + "

                \n \n \n
                "; + } + return html; + } + else { + throw new Error("there is no item in the store"); + } + } + catch (error) { + console.error(error); + return ""; + } +} +function addItem(event) { + try { + event.preventDefault(); + var name = event.target.elements.name.value; + var departement = event.target.elements.departement.value; + var type = event.target.elements.type.value; + var price = event.target.elements.price.valueAsNumber; + var image = event.target.elements.image.value; + clothesShopArr.push(new Item(name, departement, type, price, image)); + event.target.reset(); + if (!store) + throw new Error("the store is available"); + store.innerHTML = showStore(clothesShopArr); + } + catch (error) { + console.error(Error); + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = clothesShopArr.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + clothesShopArr.splice(index, 1); + if (!store) + throw new Error("store is available"); + store.innerHTML = showStore(clothesShopArr); + } + catch (error) { + console.error(error); + } +} +function handleUpdateItem(uid) { + try { + var newPrice = void 0; + newPrice = prompt("Enter a new price to this item:"); + while (!newPrice || isNaN(newPrice)) { + newPrice = prompt("You need to enter a number:"); + newPrice = parseInt(newPrice); + } + var index = clothesShopArr.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + if (newPrice) + clothesShopArr[index].price = newPrice; + if (!store) + throw new Error("ItemRoot is undefined"); + store.innerHTML = showStore(clothesShopArr); + } + catch (error) { + console.error(error); + } +} +function getAllItemInType(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var typeGetFromUser_1; + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); + } + var chosenItemsArr = clothesArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + if (chosenItemsArr.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); + else { + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n \n \n
                "; + } + } + } + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                Item from this type is availble in our store

                "; + return false; + } +} +function sortArrByPrice(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr = clothesArr.sort(function (a, b) { return a.price - b.price; }); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < sortedArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + sortedArr[i].name + "

                \n
                " + sortedArr[i].department + "
                \n
                " + sortedArr[i].type + "
                \n

                " + sortedArr[i].price + "

                \n \n \n
                "; + } + } + return sortedArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} +function getTheCheapestItem(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr_1 = sortArrByPrice(clothesArr); + var chosenItemsArr = void 0; + if (sortedArr_1) { + chosenItemsArr = sortedArr_1.filter(function (item) { return item.price == sortedArr_1[0].price; }); + if (chosenItemsArr.length == 0) + throw new Error("there is no item in the store"); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n \n \n
                "; + } + } + } + return chosenItemsArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/index.js new file mode 100644 index 000000000..4eae8db4c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/index.js @@ -0,0 +1,3 @@ +if (store) { + store.innerHTML = showStore(clothesShopArr); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/model.js new file mode 100644 index 000000000..aa9e60412 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/model.js @@ -0,0 +1,37 @@ +var Item = /** @class */ (function () { + function Item(name, department, type, price, image) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + this.image = image; + this.uid = uid(); + } + return Item; +}()); +var shirtLevisW = new Item("Levis-Shirt", "women", "shirt", 19.9, "data:image/jpeg;base64,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"); +var shirtLevisM = new Item("Levis-Shirt", "men", "shirt", 19.9, "data:image/jpeg;base64,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"); +var skirtW = new Item("Green-Skirt", "women", "skirt", 29.9, "data:image/jpeg;base64,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"); +var jeansDizzleM = new Item("Dizzle-Jean", "men", "pants", 59.9, "data:image/jpeg;base64,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"); +var shirtPackB = new Item("Shirts-Pack", "baby", "shirt", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU"); +var blouseW = new Item("White-Blouse", "women", "shirt", 15.9, "data:image/jpeg;base64,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"); +var sweatshirtNikeK = new Item("Nike-Sweatshirt", "kids", "sweatshirt", 49.9, "data:image/jpeg;base64,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"); +var dressW = new Item("Pink-Dress", "women", "dress", 39.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU"); +var denimJacketM = new Item("DenimJacket", "men", "outwear", 79.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU"); +var activeSetNikeW = new Item("Nike-ActiveSet", "women", "pants", 19.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU"); +var coatGapB = new Item("Yellow-Coat", "baby", "outwear", 49.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU"); +var hairAccesories = new Item("Hair-Clips", "women", "accesories", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU"); +var clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/style.css new file mode 100644 index 000000000..94b21cfba --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/style.css @@ -0,0 +1,68 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/view.js new file mode 100644 index 000000000..75a2b907d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/dist/view.js @@ -0,0 +1 @@ +var store = document.querySelector(".store"); diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/index.html b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/index.html new file mode 100644 index 000000000..e68ee1a86 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/index.html @@ -0,0 +1,31 @@ + + + + + + + Store + + + + + + + + +
                +

                Noa Store

                +
                +
                + + + + Add a product +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/index.ts b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/index.ts new file mode 100644 index 000000000..040b9cfc5 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/index.ts @@ -0,0 +1,3 @@ +if (store) { + store.innerHTML = showStore(clothesShopArr); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/model.ts b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/model.ts new file mode 100644 index 000000000..e2e4f0174 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/model.ts @@ -0,0 +1,114 @@ +class Item { + uid: string; + + public constructor( + public name: string, + public department: string, + public type: string, + public price: number, + public image: string, + ) { + this.uid = uid(); + } +} + +const shirtLevisW = new Item( + "Levis-Shirt", + "women", + "shirt", + 19.9, + "data:image/jpeg;base64,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" +); +const shirtLevisM = new Item( + "Levis-Shirt", + "men", + "shirt", + 19.9, + "data:image/jpeg;base64,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" +); +const skirtW = new Item( + "Green-Skirt", + "women", + "skirt", + 29.9, + "data:image/jpeg;base64,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" +); +const jeansDizzleM = new Item( + "Dizzle-Jean", + "men", + "pants", + 59.9, + "data:image/jpeg;base64,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" +); +const shirtPackB = new Item( + "Shirts-Pack", + "baby", + "shirt", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU" +); +const blouseW = new Item( + "White-Blouse", + "women", + "shirt", + 15.9, + "data:image/jpeg;base64,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" +); +const sweatshirtNikeK = new Item( + "Nike-Sweatshirt", + "kids", + "sweatshirt", + 49.9, + "data:image/jpeg;base64,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" +); +const dressW = new Item( + "Pink-Dress", + "women", + "dress", + 39.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU" +); +const denimJacketM = new Item( + "DenimJacket", + "men", + "outwear", + 79.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU" +); +const activeSetNikeW = new Item( + "Nike-ActiveSet", + "women", + "pants", + 19.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU" +); +const coatGapB = new Item( + "Yellow-Coat", + "baby", + "outwear", + 49.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU" + +); +const hairAccesories = new Item( + "Hair-Clips", + "women", + "accesories", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU" +); + +const clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/style.scss b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/style.scss new file mode 100644 index 000000000..9ac3129e0 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/style.scss @@ -0,0 +1,70 @@ +body{ + margin: 0; +} +.tittle{ + padding: 5px; + background-color: black; + + h2{ + color: azure; + margin: auto; + width: max-content; + } +} + +.function{ + display: flex; + flex-direction:row; + justify-content: space-around; + + button{ + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; + } +} + +.store{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__item{ + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__detail{ + padding: 0 5px; + margin: 0; + } + } +} +#image{ + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName{ + width: 100%; +} + +#itemDepartment{ + color: grey; +} + +#itemType{ + color: grey; +} + +#itemPrice{ + width: 100%; +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/view.ts b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/view.ts new file mode 100644 index 000000000..dadb6d4fa --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/noa-meillet/view.ts @@ -0,0 +1 @@ +const store: HTMLHeadingElement | null = document.querySelector(".store"); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/.vscode/settings.json b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/app.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/app.ts new file mode 100644 index 000000000..ebd564b9c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/app.ts @@ -0,0 +1 @@ +catdGenrator(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/controler.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/controler.ts new file mode 100644 index 000000000..395d1f1b1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/controler.ts @@ -0,0 +1,65 @@ +let playerLives = 10; + +const checkCards = (e) => { + const clickedCard = e.target; + clickedCard.classList.add("flipped"); + const flippedCard = document.querySelectorAll(".flipped"); + const toggleCard = document.querySelectorAll(".toggleCard"); + if (flippedCard.length === 2) { + if ( + flippedCard[0].getAttribute("name") === + flippedCard[1].getAttribute("name") + ) { + console.log("match"); + + flippedCard.forEach((card) => { + card.classList.remove("flipped"); + card.classList.add("reversedCard"); + }); + } else { + console.log("worng"); + flippedCard.forEach((card) => { + card.classList.remove("flipped"); + setTimeout(() => card.classList.remove("toggleCard"), 2000); + }); + playerLives--; + playerLivesCount.textContent = playerLives.toString(); + console.log(playerLives); + if (playerLives === 0) { + gameOver.play(); + const loses: any = document.querySelector(".loses") as HTMLDivElement; + loses.style.display = "block"; + loses.style.display = "flex"; + + restart(); + } + } + } + if (toggleCard.length === 16) { + const winer: any = document.querySelector(".Winner") as HTMLDivElement; + songWin.play(); + winer.style.display = "block"; + winer.style.display = "flex"; + } +}; + +const restart = () => { + let cardD = randomize(); + let faces: any = document.querySelectorAll(".fase"); + let cards = document.querySelectorAll(".card"); + section.style.pointerEvents = "none"; + cardD.forEach((item, index) => { + cards[index].classList.remove("toggleCard"); + setTimeout(() => { + cards[index].classList.add("new_game"); + faces[index].src = item.imgSrc; + cards[index].setAttribute("name", item.name); + section.style.pointerEvents = "all"; + }, 1000); + }); + playerLives = 10; + playerLivesCount.textContent = playerLives.toString(); + setTimeout(() => {}, 100); +}; + +playerLivesCount.textContent = playerLives.toString(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/app.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/app.js new file mode 100644 index 000000000..ebd564b9c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/app.js @@ -0,0 +1 @@ +catdGenrator(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/controler.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/controler.js new file mode 100644 index 000000000..3628dbbec --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/controler.js @@ -0,0 +1,59 @@ +var playerLives = 10; +var checkCards = function (e) { + var clickedCard = e.target; + clickedCard.classList.add("flipped"); + var flippedCard = document.querySelectorAll(".flipped"); + var toggleCard = document.querySelectorAll(".toggleCard"); + if (flippedCard.length === 2) { + if (flippedCard[0].getAttribute("name") === + flippedCard[1].getAttribute("name")) { + console.log("match"); + flippedCard.forEach(function (card) { + card.classList.remove("flipped"); + card.classList.add("reversedCard"); + }); + } + else { + console.log("worng"); + flippedCard.forEach(function (card) { + card.classList.remove("flipped"); + setTimeout(function () { return card.classList.remove("toggleCard"); }, 2000); + }); + playerLives--; + playerLivesCount.textContent = playerLives.toString(); + console.log(playerLives); + if (playerLives === 0) { + gameOver.play(); + var loses = document.querySelector(".loses"); + loses.style.display = "block"; + loses.style.display = "flex"; + restart(); + } + } + } + if (toggleCard.length === 16) { + var winer = document.querySelector(".Winner"); + songWin.play(); + winer.style.display = "block"; + winer.style.display = "flex"; + } +}; +var restart = function () { + var cardD = randomize(); + var faces = document.querySelectorAll(".fase"); + var cards = document.querySelectorAll(".card"); + section.style.pointerEvents = "none"; + cardD.forEach(function (item, index) { + cards[index].classList.remove("toggleCard"); + setTimeout(function () { + cards[index].classList.add("new_game"); + faces[index].src = item.imgSrc; + cards[index].setAttribute("name", item.name); + section.style.pointerEvents = "all"; + }, 1000); + }); + playerLives = 10; + playerLivesCount.textContent = playerLives.toString(); + setTimeout(function () { }, 100); +}; +playerLivesCount.textContent = playerLives.toString(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/helpers.js new file mode 100644 index 000000000..ef265ae86 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/helpers.js @@ -0,0 +1,9 @@ +var enterdiv = new Audio(); +enterdiv.src = "./sound/phshdiv.mp3"; +var gameOver = new Audio(); +gameOver.src = "./sound/gameOver.mp3"; +var songWin = new Audio(); +songWin.src = "./sound/songWin .mp3"; +// const songBackground=new Audio(); +// songBackground.src = "./sound/songbagrond.mp3" +// songBackground.play(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/model.js new file mode 100644 index 000000000..c50ffcd50 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/model.js @@ -0,0 +1,18 @@ +var getData = function () { return [ + { imgSrc: "./images/a-1.jpg", name: "img1" }, + { imgSrc: "./images/a-2.jpg", name: "img1" }, + { imgSrc: "./images/b-1.png", name: "img2" }, + { imgSrc: "./images/b-2.png", name: "img2" }, + { imgSrc: "./images/d-1.jpg", name: "img3" }, + { imgSrc: "./images/d-2.jpg", name: "img3" }, + { imgSrc: "./images/e-1.png", name: "img4" }, + { imgSrc: "./images/e-2.jpg", name: "img4" }, + { imgSrc: "./images/f-1.jpg", name: "img5" }, + { imgSrc: "./images/f-2.jpg", name: "img5" }, + { imgSrc: "./images/g-1.jpg", name: "img6" }, + { imgSrc: "./images/g-2.jpg", name: "img6" }, + { imgSrc: "./images/h-1.png", name: "img7" }, + { imgSrc: "./images/h-2.png", name: "img7" }, + { imgSrc: "./images/j-1.png", name: "img8" }, + { imgSrc: "./images/j-2.png", name: "img8" }, +]; }; diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/style.css new file mode 100644 index 000000000..592a48cde --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/style.css @@ -0,0 +1,154 @@ +* { + margin: 0; + box-sizing: border-box; + padding: 0; +} + +body { + position: relative; + height: 100vh; + background-image: linear-gradient(45deg, #09f9c1 26.8%, #97d5f2 64%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.h1, +.live { + font-family: "Press Start 2P", cursive; + background-color: #fdfaf6; + border-radius: 20px; + padding: 20px; + color: orange; +} + +section { + display: grid; + grid-template-columns: repeat(4, 8rem); + grid-template-rows: repeat(4, 8rem); + grid-gap: 2rem; + perspective: 800px; +} + +.card { + position: relative; + transform-style: preserve-3d; + transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transform: rotateY(0deg); + box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px; +} + +.reversedCard { + pointer-events: none; +} + +.new_game { + pointer-events: all; +} + +.fase, +.back { + width: 100%; + height: 100%; + position: absolute; + pointer-events: none; +} + +.back { + background-color: aliceblue; + backface-visibility: hidden; +} + +.toggleCard { + transform: rotateY(180deg); +} + +.toggleCard2 { + transform: rotateY(0deg); +} + +.fase { + transform: rotatey(-180deg); +} + +.input-color { + position: absolute; + left: 10px; + bottom: 10px; + border-radius: 10%; + border: none; + border-radius: 50%; + opacity: 0.5; +} + +.input-color2 { + position: absolute; + right: 10px; + bottom: 10px; + border-radius: 10%; + border: none; + border-radius: 50%; + opacity: 0.5; +} + +.Winner { + position: absolute; + padding-right: 8%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-left: 8%; + border-radius: 5%; + height: 400px; + width: 400px; + background-color: #f6a76e; + box-shadow: 5px 0px 20px 10px #555454; + opacity: 1; + display: none; +} +.Winner .Winner_title { + position: absolute; + top: 2rem; + font-family: "Press Start 2P", cursive; + font-size: xx-large; + color: #f7f0e3; +} +.Winner .fireworks { + margin-top: 4.9rem; + border-radius: 45%; + height: 190px; + width: 190px; +} +.Winner .new_game { + margin-top: 2rem; + border-radius: 20px; + padding: 0.5rem; + border: solid 2px white; + font-weight: bold; + background-color: #de3d5d; + color: white; + font-size: larger; +} +.Winner .new_game:hover { + background-color: crimson; +} + +.a { + position: absolute; + padding-right: 8%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.b { + position: absolute; + padding-left: 30%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/view.js new file mode 100644 index 000000000..be82d4af1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/dist/view.js @@ -0,0 +1,45 @@ +var section = document.querySelector("section"); +var playerLivesCount = document.querySelector("span"); +var randomize = function () { + var carData = getData(); + carData.sort(function () { return Math.random() - 0.5; }); + console.log(carData); + return carData; +}; +randomize(); +var catdGenrator = function () { + var cardData = randomize(); + //html + cardData.forEach(function (item) { + var card = document.createElement("div"); + var fase = document.createElement("img"); + var back = document.createElement("div"); + card.classList = "card"; + fase.classList = "fase"; + back.classList = "back"; + //add img + fase.src = item.imgSrc; + card.setAttribute("name", item.name); + // add div + section.appendChild(card); + // add to div back && fase + card.appendChild(fase); + card.appendChild(back); + //rotate card + card.addEventListener("click", function (e) { + card.classList.toggle("toggleCard"); + checkCards(e); + enterdiv.play(); + }); + }); +}; +var ChangerColor = function (event) { + var colorBody = event.target.value; + document.body.style.background = "linear-gradient( 45deg, " + colorBody + " 26.8%, rgba(192,229,246,1) 64% )"; +}; +var ChangerColor2 = function (event) { + var colorleft = document.querySelector(".left").value; + var colorBody2 = event.target.value; + console.log(colorBody2); + document.body.style.background = "linear-gradient( 45deg," + colorleft + " 26.8%, " + colorBody2 + " 64%)"; +}; diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/helpers.ts new file mode 100644 index 000000000..48f74146c --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/helpers.ts @@ -0,0 +1,12 @@ +const enterdiv = new Audio(); +enterdiv.src = "./sound/phshdiv.mp3"; + +const gameOver = new Audio(); +gameOver.src = "./sound/gameOver.mp3"; + +const songWin = new Audio(); +songWin.src = "./sound/songWin .mp3"; + +// const songBackground=new Audio(); +// songBackground.src = "./sound/songbagrond.mp3" +// songBackground.play(); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/a-1.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/a-1.jpg new file mode 100644 index 000000000..9d5334e4a Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/a-1.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/a-2.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/a-2.jpg new file mode 100644 index 000000000..9d5334e4a Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/a-2.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/b-1.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/b-1.png new file mode 100644 index 000000000..1054a6959 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/b-1.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/b-2.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/b-2.png new file mode 100644 index 000000000..1054a6959 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/b-2.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/crying-emoji-sad.gif b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/crying-emoji-sad.gif new file mode 100644 index 000000000..bab1b4fe2 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/crying-emoji-sad.gif differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/d-1.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/d-1.jpg new file mode 100644 index 000000000..b1caa6d10 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/d-1.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/d-2.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/d-2.jpg new file mode 100644 index 000000000..b1caa6d10 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/d-2.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/e-1.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/e-1.png new file mode 100644 index 000000000..9b07879dc Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/e-1.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/e-2.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/e-2.jpg new file mode 100644 index 000000000..fe04424c8 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/e-2.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/f-1.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/f-1.jpg new file mode 100644 index 000000000..7c99fd96b Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/f-1.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/f-2.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/f-2.jpg new file mode 100644 index 000000000..7c99fd96b Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/f-2.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/firework-gif.gif b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/firework-gif.gif new file mode 100644 index 000000000..4864f36c8 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/firework-gif.gif differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/g-1.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/g-1.jpg new file mode 100644 index 000000000..9f4b6762f Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/g-1.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/g-2.jpg b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/g-2.jpg new file mode 100644 index 000000000..9f4b6762f Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/g-2.jpg differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/h-1.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/h-1.png new file mode 100644 index 000000000..e828c1abf Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/h-1.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/h-2.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/h-2.png new file mode 100644 index 000000000..e828c1abf Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/h-2.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/j-1.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/j-1.png new file mode 100644 index 000000000..c5887f416 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/j-1.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/j-2.png b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/j-2.png new file mode 100644 index 000000000..c5887f416 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/images/j-2.png differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/index.html b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/index.html new file mode 100644 index 000000000..af48c59f1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/index.html @@ -0,0 +1,64 @@ + + + + + + + memory game + + + + + + + + + + + + +

                Lives:

                +
                +
                + + + + +
                + you won😍 + + +
                + +
                + You lost + + +
                + + + + + + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/model.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/model.ts new file mode 100644 index 000000000..4533d4e0d --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/model.ts @@ -0,0 +1,18 @@ +const getData = () => [ + { imgSrc: "./images/a-1.jpg", name: "img1" }, + { imgSrc: "./images/a-2.jpg", name: "img1" }, + { imgSrc: "./images/b-1.png", name: "img2" }, + { imgSrc: "./images/b-2.png", name: "img2" }, + { imgSrc: "./images/d-1.jpg", name: "img3" }, + { imgSrc: "./images/d-2.jpg", name: "img3" }, + { imgSrc: "./images/e-1.png", name: "img4" }, + { imgSrc: "./images/e-2.jpg", name: "img4" }, + { imgSrc: "./images/f-1.jpg", name: "img5" }, + { imgSrc: "./images/f-2.jpg", name: "img5" }, + { imgSrc: "./images/g-1.jpg", name: "img6" }, + { imgSrc: "./images/g-2.jpg", name: "img6" }, + { imgSrc: "./images/h-1.png", name: "img7" }, + { imgSrc: "./images/h-2.png", name: "img7" }, + { imgSrc: "./images/j-1.png", name: "img8" }, + { imgSrc: "./images/j-2.png", name: "img8" }, +]; diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/gameOver.mp3 b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/gameOver.mp3 new file mode 100644 index 000000000..414bf6514 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/gameOver.mp3 differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/phshdiv.mp3 b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/phshdiv.mp3 new file mode 100644 index 000000000..03533a07a Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/phshdiv.mp3 differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/songWin .mp3 b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/songWin .mp3 new file mode 100644 index 000000000..c734cc227 Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/songWin .mp3 differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/songbagrond.mp3 b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/songbagrond.mp3 new file mode 100644 index 000000000..d6f68fb6a Binary files /dev/null and b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/sound/songbagrond.mp3 differ diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/style.scss b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/style.scss new file mode 100644 index 000000000..c79503a98 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/style.scss @@ -0,0 +1,181 @@ +* { + margin: 0; + box-sizing: border-box; + padding: 0; +} + +body { + + position: relative; + height: 100vh; + background-image: linear-gradient(45deg, rgb(9, 249, 193) 26.8%, rgb(151, 213, 242) 64%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.h1, +.live { + font-family: 'Press Start 2P', cursive; + background-color: rgb(253, 250, 246); + border-radius: 20px; + padding: 20px; + color: orange; +} + +section { + display: grid; + grid-template-columns: repeat(4, 8rem); + grid-template-rows: repeat(4, 8rem); + grid-gap: 2rem; + perspective: 800px; + +} + +.card { + position: relative; + transform-style: preserve-3d; + transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transform: rotateY(0deg); + box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px; + +} + +.reversedCard { + pointer-events: none; +} + +.new_game { + pointer-events: all; +} + + + +.fase, +.back { + width: 100%; + height: 100%; + position: absolute; + pointer-events: none; +} + + +.back { + background-color: aliceblue; + backface-visibility: hidden; +} + +.toggleCard { + transform: rotateY(180deg); +} + +.toggleCard2 { + transform: rotateY(0deg); +} + +.fase { + transform: rotatey(-180deg); +} + +.input-color { + position: absolute; + left: 10px; + bottom: 10px; + border-radius: 10%; + border: none; + border-radius: 50%; + opacity: 0.5; + + +} + +.input-color2 { + position: absolute; + right: 10px; + bottom: 10px; + border-radius: 10%; + border: none; + border-radius: 50%; + opacity: 0.5; + +} + + + .Winner { + + position: absolute; + padding-right: 8%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-left: 8%; + border-radius: 5%; + height: 400px; + width: 400px; + background-color: rgb(246, 167, 110); + box-shadow: 5px 0px 20px 10px rgb(85, 84, 84); + opacity: 1; + display: none; + + + + + + .Winner_title { + position: absolute; + top: 2rem; + font-family: 'Press Start 2P', cursive; + font-size: xx-large; + color: rgb(247, 240, 227); + } + + .fireworks { + margin-top: 4.9rem; + border-radius: 45%; + height: 190px; + width: 190px; + } + + .new_game { + + margin-top: 2rem; + border-radius: 20px; + padding: 0.5rem; + border: solid 2px white; + font-weight: bold; + background-color: rgb(222, 61, 93); + color: white; + font-size: larger; + + } + + .new_game:hover { + background-color: crimson; + + } + + + + +} + +.a{ + position: absolute; + padding-right: 8%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.b{ + position: absolute; + padding-left: 30%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/view.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/view.ts new file mode 100644 index 000000000..d9b93f223 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi Azenkot/view.ts @@ -0,0 +1,52 @@ +const section = document.querySelector("section") as HTMLElement; +const playerLivesCount = document.querySelector("span") as HTMLSpanElement; + +const randomize = () => { + const carData = getData(); + carData.sort(() => Math.random() - 0.5); + console.log(carData); + return carData; +}; + +randomize(); + +const catdGenrator = () => { + const cardData = randomize(); + + //html + cardData.forEach((item) => { + const card: any = document.createElement("div"); + const fase: any = document.createElement("img"); + const back: any = document.createElement("div"); + card.classList = "card"; + fase.classList = "fase"; + back.classList = "back"; + //add img + fase.src = item.imgSrc; + card.setAttribute("name", item.name); + + // add div + section.appendChild(card); + // add to div back && fase + card.appendChild(fase); + card.appendChild(back); + + //rotate card + card.addEventListener("click", (e) => { + card.classList.toggle("toggleCard"); + checkCards(e); + enterdiv.play(); + }); + }); +}; + +const ChangerColor = (event) => { + var colorBody = event.target.value; + document.body.style.background = `linear-gradient( 45deg, ${colorBody} 26.8%, rgba(192,229,246,1) 64% )`; +}; +const ChangerColor2 = (event) => { + const colorleft = (document.querySelector(".left") as HTMLInputElement).value; + const colorBody2 = event.target.value; + console.log(colorBody2); + document.body.style.background = `linear-gradient( 45deg,${colorleft} 26.8%, ${colorBody2} 64%)`; +}; diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/control.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/control.ts new file mode 100644 index 000000000..e81f2547a --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/control.ts @@ -0,0 +1,67 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.password.value; + const preferedColor = ev.target.elements.preferedColor.value; + const pictureURL = ev.target.elements.pictureURL.value; + + people.push( + new Person( + name, + address, + email, + phone, + password, + preferedColor, + pictureURL + ) + ); + ev.target.reset(); + render(); + } catch (error) { + console.error(error); + } +} + +function render() { + let page = ""; + let j = 0; + for (j = 0; j <= people.length - 1; j++) { + page += `
                +

                ${people[j].name}

                +

                ${people[j].address}

                +

                ${people[j].email}

                +

                ${people[j].phone}

                +

                ${people[j].password}

                +

                ${people[j].preferedColor}

                +

                ${people[j].uid}

                + + +
                `; + } + console.log(page); + const html: HTMLDivElement | null = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } +} + +function handleDeleteItem(uid: string) { + try { + debugger; + console.log(uid); + const index = people.findIndex((Person) => Person.uid === uid); + if (index === -1) throw new Error("item not found"); + people.splice(index, 1); + render(); + + + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/control.js new file mode 100644 index 000000000..e96453707 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/control.js @@ -0,0 +1,55 @@ +function handleAddItem(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + const address = ev.target.elements.address.value; + const email = ev.target.elements.email.value; + const phone = ev.target.elements.phone.valueAsNumber; + const password = ev.target.elements.password.value; + const preferedColor = ev.target.elements.preferedColor.value; + const pictureURL = ev.target.elements.pictureURL.value; + people.push(new Person(name, address, email, phone, password, preferedColor, pictureURL)); + ev.target.reset(); + render(); + } + catch (error) { + console.error(error); + } +} +function render() { + let page = ""; + let j = 0; + for (j = 0; j <= people.length - 1; j++) { + page += `
                +

                ${people[j].name}

                +

                ${people[j].address}

                +

                ${people[j].email}

                +

                ${people[j].phone}

                +

                ${people[j].password}

                +

                ${people[j].preferedColor}

                +

                ${people[j].uid}

                + + +
                `; + } + console.log(page); + const html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + console.log(html); + } +} +function handleDeleteItem(uid) { + try { + debugger; + console.log(uid); + const index = people.findIndex((Person) => Person.uid === uid); + if (index === -1) + throw new Error("item not found"); + people.splice(index, 1); + render(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/helpers.js new file mode 100644 index 000000000..8be515950 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36); +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/model.js new file mode 100644 index 000000000..1aefd49b7 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/dist/model.js @@ -0,0 +1,14 @@ +class Person { + constructor(name, address, email, phone, password, preferedColor, pictureURL) { + this.name = name; + this.address = address; + this.email = email; + this.phone = phone; + this.password = password; + this.preferedColor = preferedColor; + this.pictureURL = pictureURL; + this.uid = uid(); + } +} +const people = []; +console.log(people); diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/getProduct.html b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/getProduct.html new file mode 100644 index 000000000..e04541a14 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/getProduct.html @@ -0,0 +1,32 @@ + + + + + + + setProduct + + + + + + + +
                + + + + + + + + + +
                +
                + +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/helpers.ts new file mode 100644 index 000000000..d929a598f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36); + } + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/index.html b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/index.html new file mode 100644 index 000000000..3a651ccd2 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/index.html @@ -0,0 +1,21 @@ + + + + + + + main + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/model.ts b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/model.ts new file mode 100644 index 000000000..7f53d4876 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/model.ts @@ -0,0 +1,20 @@ +class Person { +uid:string; + + constructor( + public name: string, + public address: string, + public email: string, + public phone: number, + public password: string, + public preferedColor: string, + public pictureURL: string, + ) { + this.uid=uid(); + } + +} + +const people: Person[] = []; + +console.log(people) \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/style.css b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/style.css new file mode 100644 index 000000000..0eb0f3ef1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/style.css @@ -0,0 +1,11 @@ +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + border: solid coral; + padding: 50px; +} +.list img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/style.scss b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/style.scss new file mode 100644 index 000000000..d1368ff93 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/shlomi.samai/style.scss @@ -0,0 +1,13 @@ + +.list { + + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + img { + width: 100%; + } + border: solid coral; + padding: 50px; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/control.ts b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/control.ts new file mode 100644 index 000000000..7fd1646ff --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/control.ts @@ -0,0 +1,108 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any): void { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const img = imgSrc; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, img, price, category, size, sn)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const img = ev.target.value; + document.body.style.backgroundImage = img; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[]): string { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` + +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + return html; + } catch (error) { + console.error(error); + return ""; + } +} + +function handleDeleteItem(uid: string): void { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} +function handleUpdatePrice(uid:string) { + try { + const newprice= prompt(`what is the new price`) + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items[index].price= Number(newprice); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } catch (error) { + console.error(error); + } +} + diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/control.js b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/control.js new file mode 100644 index 000000000..52943fa36 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/control.js @@ -0,0 +1,97 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var img = imgSrc; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, img, price, category, size, sn)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var img = ev.target.value; + document.body.style.backgroundImage = img; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} +function handleUpdatePrice(uid) { + try { + var newprice = prompt("what is the new price"); + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items[index].price = Number(newprice); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + itemsRoot.innerHTML = renderItems(items); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/helpers.js b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/index.js b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/model.js b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/model.js new file mode 100644 index 000000000..31f576935 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, img, price, category, size, sn) { + this.name = name; + this.img = img; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +items.push(new Item('addias z45', 'blue', 120, "shoes", 44, "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/style.css b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/style.css new file mode 100644 index 000000000..97c3f437b --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/style.css @@ -0,0 +1,78 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +.open { + color: red; + margin-left: 40%; + width: 300px; + height: 300px; + background-color: lightseagreen; + background-image: url(https://mumlatzim.me/wp-content/uploads/2022/12/Q.jpg); + background-size: 300px; +} +.open .set { + margin-left: 40%; + background-color: black; + display: inline-block; +} + +.store { + background-color: aqua; + display: inline-block; + margin-left: 40%; +} +.store h1 { + margin-left: 40%; +} + +.userImg { + border-radius: 20px; + box-shadow: 0 0 10px black; + height: 20vw; + transition: all 0.4s linear; +} + +.userImg:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/view.js b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/view.js new file mode 100644 index 000000000..87eabdede --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/dist/view.js @@ -0,0 +1,2 @@ +var itemsRoot = document.querySelector('#itemsRoot'); +var imgSrc = ""; diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/helpers.ts b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/helpers.ts new file mode 100644 index 000000000..e9a9353a4 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/helpers.ts @@ -0,0 +1,3 @@ +function uid(): string { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/index.html b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/index.html new file mode 100644 index 000000000..e9bed719e --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/index.html @@ -0,0 +1,21 @@ + + + + + + + Store + + + + + + + + +
                +

                Tomer Shoes Store

                +
                To the site!
                +
                + + diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/index.ts b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/model.ts b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/model.ts new file mode 100644 index 000000000..1cb1da6d3 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public img: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345")) +console.log(items) diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/setProduct.html b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/setProduct.html new file mode 100644 index 000000000..dd15ff4a1 --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/setProduct.html @@ -0,0 +1,39 @@ + + + + + + + + Store - set product + + + + + + + + + +
                +

                Set product

                + +
                + + + + + + + +
                +
                +
                + + + + \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/style.scss b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/style.scss new file mode 100644 index 000000000..7df237b4f --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/style.scss @@ -0,0 +1,75 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} +.open{ + color: red; + margin-left: 40%; + width: 300px; + height: 300px; + background-color: lightseagreen; + background-image: url(https://mumlatzim.me/wp-content/uploads/2022/12/Q.jpg); +background-size: 300px; + .set{ + margin-left: 40%; + background-color: black; + display: inline-block; + } +} +.store{ +background-color: aqua; +display: inline-block; +margin-left: 40%; + h1{ + margin-left: 40%; + } +} + +.userImg { + border-radius: 20px; + box-shadow: 0 0 10px black; + height: 20vw; + transition: all .4s linear; +} +.userImg:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/view.ts b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/view.ts new file mode 100644 index 000000000..c7a2e7dcf --- /dev/null +++ b/02-TypeScript/16-CRUD/home-puzzles/tomer-cohenHW/hw/view.ts @@ -0,0 +1,2 @@ +const itemsRoot = document.querySelector('#itemsRoot'); +let imgSrc = ""; \ No newline at end of file diff --git a/02-TypeScript/16-CRUD/info/info.md b/02-TypeScript/16-CRUD/info/info.md new file mode 100644 index 000000000..68e8a6785 --- /dev/null +++ b/02-TypeScript/16-CRUD/info/info.md @@ -0,0 +1,6 @@ +# Data manipulation + +Create - create object (and render to screen) +Read - read (and render to screen) +Update - update and object (and render to screen) +Delete - delete object (and render) \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Amit/dist/index.js b/02-TypeScript/17-multipage-storage/Amit/dist/index.js new file mode 100644 index 000000000..1ee785764 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/dist/index.js @@ -0,0 +1,3 @@ +var _items = getItemsFromStorage(); +if (_items) + items.push.apply(items, items); diff --git a/02-TypeScript/17-multipage-storage/Amit/dist/model.js b/02-TypeScript/17-multipage-storage/Amit/dist/model.js new file mode 100644 index 000000000..85e2a31ea --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/dist/model.js @@ -0,0 +1,25 @@ +var items = []; +function handleAddItem(ev) { + try { + ev.preventDefault(); + items.push(); + localStorage.setItem('item', JSON.stringify(items)); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} +function getItemsFromStorage() { + try { + var itemsString = localStorage.getItem('items'); + if (!itemsString) + throw new Error("could not find item"); + var items_1 = JSON.parse(itemsString); + return items_1; + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/Amit/dist/second.js b/02-TypeScript/17-multipage-storage/Amit/dist/second.js new file mode 100644 index 000000000..1ee785764 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/dist/second.js @@ -0,0 +1,3 @@ +var _items = getItemsFromStorage(); +if (_items) + items.push.apply(items, items); diff --git a/02-TypeScript/17-multipage-storage/Amit/index.html b/02-TypeScript/17-multipage-storage/Amit/index.html new file mode 100644 index 000000000..8c1401604 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/index.html @@ -0,0 +1,20 @@ + + + + + + + + Main + + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Amit/index.ts b/02-TypeScript/17-multipage-storage/Amit/index.ts new file mode 100644 index 000000000..2034e5b91 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/index.ts @@ -0,0 +1,3 @@ +const _items = getItemsFromStorage(); + +if(_items) items.push(...items); \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Amit/model.ts b/02-TypeScript/17-multipage-storage/Amit/model.ts new file mode 100644 index 000000000..70fa1e1b6 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/model.ts @@ -0,0 +1,30 @@ +const items:Array = []; + +function handleAddItem(ev:any){ + try { + ev.preventDefault(); + + items.push(); + localStorage.setItem('item', JSON.stringify(items)); + + ev.target.reset(); + } catch (error) { + console.error(error); + } +} + +function getItemsFromStorage(): [] | undefined{ + try { + const itemsString = localStorage.getItem('items'); + + if(!itemsString) throw new Error ("could not find item"); + + const items = JSON.parse(itemsString); + + return items; + } catch (error) { + console.error(error); + return undefined; + } +} + diff --git a/02-TypeScript/17-multipage-storage/Amit/second.html b/02-TypeScript/17-multipage-storage/Amit/second.html new file mode 100644 index 000000000..7ebc59478 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/second.html @@ -0,0 +1,28 @@ + + + + + + + + Second + + + + + +<<<<<<< HEAD:02-TypeScript/17-multipage-storage/followup/basic/second.html + +======= + +>>>>>>> 7c7a33c85d790276c299029578dac81d67746c3d:02-TypeScript/17-multipage-storage/Amit/second.html +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Amit/second.ts b/02-TypeScript/17-multipage-storage/Amit/second.ts new file mode 100644 index 000000000..2034e5b91 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Amit/second.ts @@ -0,0 +1,3 @@ +const _items = getItemsFromStorage(); + +if(_items) items.push(...items); \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/dist/index.js b/02-TypeScript/17-multipage-storage/Maxim Roz/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/dist/model.js b/02-TypeScript/17-multipage-storage/Maxim Roz/dist/model.js new file mode 100644 index 000000000..614189b73 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Maxim Roz/dist/model.js @@ -0,0 +1 @@ +var items = []; diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/dist/second.js b/02-TypeScript/17-multipage-storage/Maxim Roz/dist/second.js new file mode 100644 index 000000000..62bfff1c0 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Maxim Roz/dist/second.js @@ -0,0 +1,14 @@ +var addToArray = document.querySelector("#input"); +var addBtn = document.querySelector("form"); +addBtn.addEventListener('submit', function (event) { + event.preventDefault(); + console.log("function works"); + console.log(addToArray.value); + items.push(addToArray.value); + console.log(items); + renderOnDom(); +}); +function renderOnDom() { + var rootItems = document.querySelector("#rootItems"); + rootItems.textContent = items; +} diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/index.html b/02-TypeScript/17-multipage-storage/Maxim Roz/index.html new file mode 100644 index 000000000..b1951c974 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Maxim Roz/index.html @@ -0,0 +1,20 @@ + + + + + + + + Main + + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/index.ts b/02-TypeScript/17-multipage-storage/Maxim Roz/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/model.ts b/02-TypeScript/17-multipage-storage/Maxim Roz/model.ts new file mode 100644 index 000000000..052e00fde --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Maxim Roz/model.ts @@ -0,0 +1 @@ +const items:Array = []; \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/second.html b/02-TypeScript/17-multipage-storage/Maxim Roz/second.html new file mode 100644 index 000000000..429680af4 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Maxim Roz/second.html @@ -0,0 +1,24 @@ + + + + + + + + Second + + + + + + +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/Maxim Roz/second.ts b/02-TypeScript/17-multipage-storage/Maxim Roz/second.ts new file mode 100644 index 000000000..a8ba76daf --- /dev/null +++ b/02-TypeScript/17-multipage-storage/Maxim Roz/second.ts @@ -0,0 +1,26 @@ +const addToArray = document.querySelector("#input") as HTMLInputElement + + + + +const addBtn: HTMLElement|null = document.querySelector("form")!; + + addBtn.addEventListener('submit', (event) => { + event.preventDefault() + console.log("function works"); + console.log(addToArray.value); + items.push(addToArray.value) + console.log(items); + renderOnDom() + + + }); + function renderOnDom(){ + const rootItems= document.querySelector("#rootItems")! + rootItems.textContent= items + + } + + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/control.ts b/02-TypeScript/17-multipage-storage/example/control.ts new file mode 100644 index 000000000..d1ea1cc1d --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/control.ts @@ -0,0 +1,102 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + + const name = ev.target.elements.name.value; + const color = ev.target.elements.color.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const size = ev.target.elements.size.valueAsNumber; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, color, price, category, size, sn)); + // localStorage.setItem('items',JSON.stringify(items)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + + renderItems(items, "itemsRoot"); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + +function renderItems(items: Item[], renderElementId: string): void { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return ` +
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.size}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } catch (error) { + console.error(error); + } +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + renderItems(items, "itemsRoot"); + // localStorage.setItem("items", JSON.stringify(items)) + } catch (error) { + console.error(error); + } +} + + +function handleSaveItems(){ + console.log('save items'); + localStorage.setItem('items',JSON.stringify(items)); +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/dist/control.js b/02-TypeScript/17-multipage-storage/example/dist/control.js new file mode 100644 index 000000000..80121fc08 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/control.js @@ -0,0 +1,89 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + // localStorage.setItem('items',JSON.stringify(items)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + renderItems(items, "itemsRoot"); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function renderItems(items, renderElementId) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "\n
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.size + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + renderItems(items, "itemsRoot"); + // localStorage.setItem("items", JSON.stringify(items)) + } + catch (error) { + console.error(error); + } +} +function handleSaveItems() { + console.log('save items'); + localStorage.setItem('items', JSON.stringify(items)); +} diff --git a/02-TypeScript/17-multipage-storage/example/dist/helpers.js b/02-TypeScript/17-multipage-storage/example/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/17-multipage-storage/example/dist/index.js b/02-TypeScript/17-multipage-storage/example/dist/index.js new file mode 100644 index 000000000..46c00bc2c --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/index.js @@ -0,0 +1,6 @@ +var _items = getItemsFromStorage(); +// items = _items; +if (_items) { + items.push.apply(items, _items); +} +renderItems(items, "itemsRoot"); diff --git a/02-TypeScript/17-multipage-storage/example/dist/model.js b/02-TypeScript/17-multipage-storage/example/dist/model.js new file mode 100644 index 000000000..9f218ad1e --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/model.js @@ -0,0 +1,17 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, size, sn) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.size = size; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +var items = []; +// items.push( +// new Item("addias z45", "blue", 120, "shoes", 44, "fgdfgsdg543534t345") +// ); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/example/dist/setProduct.js b/02-TypeScript/17-multipage-storage/example/dist/setProduct.js new file mode 100644 index 000000000..d551adcf2 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/setProduct.js @@ -0,0 +1,8 @@ +console.log("renderItems"); +var _items = getItemsFromStorage(); +// items = _items; +if (_items) { + items.push.apply(items, _items); +} +renderItems(items, "itemsRoot"); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/example/dist/style.css b/02-TypeScript/17-multipage-storage/example/dist/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/dist/view.js b/02-TypeScript/17-multipage-storage/example/dist/view.js new file mode 100644 index 000000000..98628ad43 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/dist/view.js @@ -0,0 +1,17 @@ +var itemsRoot = document.querySelector("#itemsRoot"); +function getItemsFromStorage() { + try { + //get items from storage + var itemsString = localStorage.getItem("items"); + if (!itemsString) + throw new Error("Couldn't find items in storage"); + //convert to array + var items = JSON.parse(itemsString); + return items; + console.log(items); + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/example/helpers.ts b/02-TypeScript/17-multipage-storage/example/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/17-multipage-storage/example/index.html b/02-TypeScript/17-multipage-storage/example/index.html new file mode 100644 index 000000000..b88baf24d --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/index.html @@ -0,0 +1,23 @@ + + + + + + + + Store + + + + + + + + + +

                Store

                + set product +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/index.ts b/02-TypeScript/17-multipage-storage/example/index.ts new file mode 100644 index 000000000..0531c739a --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/index.ts @@ -0,0 +1,8 @@ +const _items = getItemsFromStorage(); +// items = _items; + +if (_items) { + items.push(..._items); +} + +renderItems(items, "itemsRoot"); \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/model.ts b/02-TypeScript/17-multipage-storage/example/model.ts new file mode 100644 index 000000000..0d3f78c0b --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/model.ts @@ -0,0 +1,20 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public size: number, + public sn: string + ) { + this.uid = uid(); + } +} +const items: Item[] = []; + +// items.push( +// new Item("addias z45", "blue", 120, "shoes", 44, "fgdfgsdg543534t345") +// ); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/example/registerLogin.css b/02-TypeScript/17-multipage-storage/example/registerLogin.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/example/registerLogin.html b/02-TypeScript/17-multipage-storage/example/registerLogin.html new file mode 100644 index 000000000..1f3a7ac78 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/registerLogin.html @@ -0,0 +1,26 @@ + + + + + + + + Store - login + + + +
                + + +
                + + - or - +
                + + + + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/registerLogin.scss b/02-TypeScript/17-multipage-storage/example/registerLogin.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/example/setProduct.html b/02-TypeScript/17-multipage-storage/example/setProduct.html new file mode 100644 index 000000000..190636a81 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/setProduct.html @@ -0,0 +1,34 @@ + + + + + + + Store - set product + + + + + + + + + +

                Set product

                + Store +
                + + + + + + + +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/setProduct.ts b/02-TypeScript/17-multipage-storage/example/setProduct.ts new file mode 100644 index 000000000..38f10eba8 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/setProduct.ts @@ -0,0 +1,10 @@ +console.log("renderItems"); +const _items = getItemsFromStorage(); +// items = _items; + +if (_items) { + items.push(..._items); +} + +renderItems(items, "itemsRoot"); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/example/style.css b/02-TypeScript/17-multipage-storage/example/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/example/style.scss b/02-TypeScript/17-multipage-storage/example/style.scss new file mode 100644 index 000000000..beaff3c9a --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/style.scss @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} diff --git a/02-TypeScript/17-multipage-storage/example/view.ts b/02-TypeScript/17-multipage-storage/example/view.ts new file mode 100644 index 000000000..4d8a6d6b0 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/example/view.ts @@ -0,0 +1,17 @@ +const itemsRoot = document.querySelector("#itemsRoot"); + +function getItemsFromStorage():Item[] | undefined { + try { + //get items from storage + const itemsString = localStorage.getItem("items"); + if (!itemsString) throw new Error("Couldn't find items in storage"); + + //convert to array + const items = JSON.parse(itemsString); + return items; + console.log(items); + } catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/dist/index.js b/02-TypeScript/17-multipage-storage/followup/Dor/dist/index.js new file mode 100644 index 000000000..5b1f4c362 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/dist/index.js @@ -0,0 +1 @@ +renderArray(items); diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/dist/model.js b/02-TypeScript/17-multipage-storage/followup/Dor/dist/model.js new file mode 100644 index 000000000..37d2ec8fe --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/dist/model.js @@ -0,0 +1,8 @@ +var item = /** @class */ (function () { + function item(string) { + this.string = string; + } + return item; +}()); +var items = []; +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/dist/second.js b/02-TypeScript/17-multipage-storage/followup/Dor/dist/second.js new file mode 100644 index 000000000..139856fec --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/dist/second.js @@ -0,0 +1,25 @@ +var html = document.querySelector(".rootItems"); +function handleArray(ev) { + try { + ev.preventDefault(); + var string = ev.target.elements.text.value; + items.push(new item(string)); + ev.target.reset(); + return items; + } + catch (error) { + console.error(error); + } +} +console.log(items); +function renderArray(items) { + try { + html.innerHTML = "

                " + items + "

                "; + } + catch (error) { + console.error(error); + } +} +function saveItems() { + localStorage.setItem("items", JSON.stringify(items)); +} diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/index.html b/02-TypeScript/17-multipage-storage/followup/Dor/index.html new file mode 100644 index 000000000..06ac35b67 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/index.html @@ -0,0 +1,20 @@ + + + + + + + + Main + + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/index.ts b/02-TypeScript/17-multipage-storage/followup/Dor/index.ts new file mode 100644 index 000000000..74d5d2d10 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/index.ts @@ -0,0 +1 @@ +renderArray(items) \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/model.ts b/02-TypeScript/17-multipage-storage/followup/Dor/model.ts new file mode 100644 index 000000000..5e424fb03 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/model.ts @@ -0,0 +1,9 @@ + +class item{ + constructor( + public string : string, + ) + {} +} +const items: item[] = []; +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/second.html b/02-TypeScript/17-multipage-storage/followup/Dor/second.html new file mode 100644 index 000000000..ecc6efc2b --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/second.html @@ -0,0 +1,24 @@ + + + + + + + + Second + + + + + + +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Dor/second.ts b/02-TypeScript/17-multipage-storage/followup/Dor/second.ts new file mode 100644 index 000000000..777b20e3c --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Dor/second.ts @@ -0,0 +1,30 @@ +const html:any = document.querySelector(".rootItems") as HTMLDivElement; + +function handleArray (ev: any){ + try { + ev.preventDefault() + const string = ev.target.elements.text.value; + items.push (new item (string)) + ev.target.reset(); + return items + + } catch (error) { + console.error(error); + + } +} + +console.log(items); + +function renderArray(items){ +try { + html.innerHTML = `

                ${items}

                ` +} catch (error) { + console.error(error); + +} +} + +function saveItems(){ + localStorage.setItem ("items" ,JSON.stringify(items)) +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/control.ts b/02-TypeScript/17-multipage-storage/followup/Itai-G/control.ts new file mode 100644 index 000000000..c752c6f31 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/control.ts @@ -0,0 +1,66 @@ +const rootItems = document.querySelector("#rootItems") + + + +function handleAddItem(ev: any) { + try { + ev.preventDefault(); + + console.log(ev); + const name = ev.target.elements.name.value; + + items.push(new Item(name)); + localStorage.setItem('items',JSON.stringify(items)); + console.log(items); + ev.target.reset(); + + console.log(name); + if (!rootItems) throw new Error("rootItems is null"); + renderItems(items, "rootItems"); + } catch (error) { + console.error(error); + } + } + + + function renderItems(items: Item[], renderElementId: string): void { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + const html = items + .map((item) => { + return ` +
                +

                ${item.name}

                +
                + `; + }) + .join(" "); + console.log(html); + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } catch (error) { + console.error(error); + } + } + + function handleSaveItems(){ + console.log('save items'); + localStorage.setItem('items',JSON.stringify(items)); + } + + function getItemsFromStorage():Item[] | undefined { + try { + const itemsString = localStorage.getItem("items"); + if (!itemsString) throw new Error("Couldn't find items in storage"); + + const items = JSON.parse(itemsString); + return items; + console.log(items); + } catch (error) { + console.error(error); + return undefined; + } + } + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/control.js b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/control.js new file mode 100644 index 000000000..66914df31 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/control.js @@ -0,0 +1,56 @@ +var rootItems = document.querySelector("#rootItems"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + items.push(new Item(name)); + localStorage.setItem('items', JSON.stringify(items)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!rootItems) + throw new Error("rootItems is null"); + renderItems(items, "rootItems"); + } + catch (error) { + console.error(error); + } +} +function renderItems(items, renderElementId) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + return "\n
                \n

                " + item.name + "

                \n
                \n "; + }) + .join(" "); + console.log(html); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function handleSaveItems() { + console.log('save items'); + localStorage.setItem('items', JSON.stringify(items)); +} +function getItemsFromStorage() { + try { + var itemsString = localStorage.getItem("items"); + if (!itemsString) + throw new Error("Couldn't find items in storage"); + var items = JSON.parse(itemsString); + return items; + console.log(items); + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/index.js b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/index.js new file mode 100644 index 000000000..e2a1976d9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/index.js @@ -0,0 +1,7 @@ +renderItems(items, "rootItems"); +var _items = getItemsFromStorage(); +handleSaveItems(); +console.log(items); +if (_items) { + items.push.apply(items, _items); +} diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/model.js b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/model.js new file mode 100644 index 000000000..06346fbda --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/model.js @@ -0,0 +1,7 @@ +var Item = /** @class */ (function () { + function Item(name) { + this.name = name; + } + return Item; +}()); +var items = []; diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/second.js b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/second.js new file mode 100644 index 000000000..e2a1976d9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/dist/second.js @@ -0,0 +1,7 @@ +renderItems(items, "rootItems"); +var _items = getItemsFromStorage(); +handleSaveItems(); +console.log(items); +if (_items) { + items.push.apply(items, _items); +} diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/index.html b/02-TypeScript/17-multipage-storage/followup/Itai-G/index.html new file mode 100644 index 000000000..8afc01a7b --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/index.html @@ -0,0 +1,21 @@ + + + + + + + + Main + + + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/index.ts b/02-TypeScript/17-multipage-storage/followup/Itai-G/index.ts new file mode 100644 index 000000000..eda0773f1 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/index.ts @@ -0,0 +1,9 @@ +renderItems(items, "rootItems"); +const _items = getItemsFromStorage(); +handleSaveItems(); +console.log(items); + + +if (_items) { + items.push(..._items); +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/model.ts b/02-TypeScript/17-multipage-storage/followup/Itai-G/model.ts new file mode 100644 index 000000000..a48ccac82 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/model.ts @@ -0,0 +1,9 @@ +class Item { + constructor( + public name: string, + ) {} + } + + +const items:Item[] = []; + diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/second.html b/02-TypeScript/17-multipage-storage/followup/Itai-G/second.html new file mode 100644 index 000000000..ee03442ba --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/second.html @@ -0,0 +1,25 @@ + + + + + + + + Second + + + + + + + +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Itai-G/second.ts b/02-TypeScript/17-multipage-storage/followup/Itai-G/second.ts new file mode 100644 index 000000000..eda0773f1 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Itai-G/second.ts @@ -0,0 +1,9 @@ +renderItems(items, "rootItems"); +const _items = getItemsFromStorage(); +handleSaveItems(); +console.log(items); + + +if (_items) { + items.push(..._items); +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/control.ts b/02-TypeScript/17-multipage-storage/followup/Karin-levi/control.ts new file mode 100644 index 000000000..e211ede89 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/control.ts @@ -0,0 +1,19 @@ +function handleAddItem(ev: any) { + try { + const name = ev.target.elements.name.value; + const price = ev.target.elements.price.valueAsNumber; + const category = ev.target.elements.category.value; + const sn = ev.target.elements.sn.value; + + items.push(new Item(name, price, category, sn)); + localStorage.setItem('items',JSON.stringify(items)); + ev.target.reset(); + + console.log(name); + if (!rootItems) throw new Error("rootItems is null"); + + renderItems(items, "rootItems"); + } catch (error) { + console.error(error); + } + } \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/control.js b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/control.js new file mode 100644 index 000000000..70805b1b6 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/control.js @@ -0,0 +1,18 @@ +function handleAddItem(ev) { + try { + var name = ev.target.elements.name.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, price, category, sn)); + localStorage.setItem('items', JSON.stringify(items)); + ev.target.reset(); + console.log(name); + if (!rootItems) + throw new Error("rootItems is null"); + renderItems(items, "rootItems"); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/index.js b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/model.js b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/model.js new file mode 100644 index 000000000..b3ba931be --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/model.js @@ -0,0 +1,13 @@ +var items = []; +var Item = /** @class */ (function () { + function Item(name, price, category, sn) { + this.name = name; + this.price = price; + this.category = category; + this.sn = sn; + this.uid = uid(); + } + return Item; +}()); +items.push(new Item("magnesium", 60, "supplements", "fgdfgsdg543534t345")); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/second.js b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/second.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/style.css b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/style.css new file mode 100644 index 000000000..f56d5ebdc --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/dist/style.css @@ -0,0 +1,43 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/index.html b/02-TypeScript/17-multipage-storage/followup/Karin-levi/index.html new file mode 100644 index 000000000..dc3e41c4c --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/index.html @@ -0,0 +1,34 @@ + + + + + + + + Main + + + + + + + +

                Main

                + Go to Second +
                + + + + + + +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/index.ts b/02-TypeScript/17-multipage-storage/followup/Karin-levi/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/model.ts b/02-TypeScript/17-multipage-storage/followup/Karin-levi/model.ts new file mode 100644 index 000000000..85645bbb4 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/model.ts @@ -0,0 +1,21 @@ +const items: Array = []; + +class Item { + uid: string; + + constructor( + public name: string, + public price: number, + public category: string, + public sn: string + ) { + this.uid = uid(); + } + } + + + items.push( + new Item("magnesium", 60, "supplements", "fgdfgsdg543534t345") + ); + console.log(items); + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/second.html b/02-TypeScript/17-multipage-storage/followup/Karin-levi/second.html new file mode 100644 index 000000000..bf70f3c9b --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/second.html @@ -0,0 +1,25 @@ + + + + + + + + Second + + + + + + + +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/second.ts b/02-TypeScript/17-multipage-storage/followup/Karin-levi/second.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/Karin-levi/style.scss b/02-TypeScript/17-multipage-storage/followup/Karin-levi/style.scss new file mode 100644 index 000000000..5bfbd5af5 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Karin-levi/style.scss @@ -0,0 +1,44 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } + } + + .item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } + } + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/dist/index.js b/02-TypeScript/17-multipage-storage/followup/Orel/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/dist/model.js b/02-TypeScript/17-multipage-storage/followup/Orel/dist/model.js new file mode 100644 index 000000000..0d5fed3d4 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Orel/dist/model.js @@ -0,0 +1,36 @@ +var names = ["Orel", "Yoni"]; +// function getArrayFromStorage( name:string ,arr:Array){ +// localStorage.setItem(name , JSON.stringify(arr)) +// } +function renderList(elementID) { + try { + var dataLocalStorage = localStorage.getItem("names"); + if (!dataLocalStorage) + throw new Error("problem"); + console.log(dataLocalStorage); + var element = document.querySelector("#" + elementID); + element.innerHTML = JSON.parse(dataLocalStorage); + } + catch (error) { + console.log(error); + } +} +function handleSaveItems() { + console.log('save items'); + localStorage.setItem('names', JSON.stringify(names)); +} +function handleBeforeLoad() { + try { + var names_1 = localStorage.getItem("names"); + } + catch (error) { + console.log(error); + } +} +function handleSubmitForm(ev) { + ev.preventDefault(); + var newText = ev.target.elements.text.value; + names.push(newText); + //getArrayFromStorage("name" , names) + console.log(names); +} diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/dist/second.js b/02-TypeScript/17-multipage-storage/followup/Orel/dist/second.js new file mode 100644 index 000000000..5de89d9fe --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Orel/dist/second.js @@ -0,0 +1 @@ +renderList("rootItems"); diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/index.html b/02-TypeScript/17-multipage-storage/followup/Orel/index.html new file mode 100644 index 000000000..eccda4435 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Orel/index.html @@ -0,0 +1,19 @@ + + + + + + + + Main + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/index.ts b/02-TypeScript/17-multipage-storage/followup/Orel/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/model.ts b/02-TypeScript/17-multipage-storage/followup/Orel/model.ts new file mode 100644 index 000000000..4df81a6eb --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Orel/model.ts @@ -0,0 +1,40 @@ +const names:Array = ["Orel" , "Yoni"]; + +// function getArrayFromStorage( name:string ,arr:Array){ +// localStorage.setItem(name , JSON.stringify(arr)) +// } + +function renderList(elementID:string){ +try { + const dataLocalStorage = localStorage.getItem("names") + if(!dataLocalStorage) throw new Error("problem") + console.log(dataLocalStorage); + const element = document.querySelector(`#${elementID}`); + element!.innerHTML = JSON.parse(dataLocalStorage) + +} catch (error) { + console.log(error); +} +} + +function handleSaveItems(){ + console.log('save items'); + localStorage.setItem('names',JSON.stringify(names)); + } + +function handleBeforeLoad(){ + try { + const names = localStorage.getItem("names") + } catch (error) { + console.log(error); + } +} + +function handleSubmitForm(ev){ + ev.preventDefault(); +const newText = ev.target.elements.text.value + names.push(newText) + //getArrayFromStorage("name" , names) + console.log(names); +} + diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/second.html b/02-TypeScript/17-multipage-storage/followup/Orel/second.html new file mode 100644 index 000000000..999ba359a --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Orel/second.html @@ -0,0 +1,23 @@ + + + + + + + + Second + + + + + +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/Orel/second.ts b/02-TypeScript/17-multipage-storage/followup/Orel/second.ts new file mode 100644 index 000000000..3c85d5b63 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/Orel/second.ts @@ -0,0 +1 @@ +renderList("rootItems") \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/basic/dist/index.js b/02-TypeScript/17-multipage-storage/followup/basic/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/basic/dist/model.js b/02-TypeScript/17-multipage-storage/followup/basic/dist/model.js new file mode 100644 index 000000000..614189b73 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/basic/dist/model.js @@ -0,0 +1 @@ +var items = []; diff --git a/02-TypeScript/17-multipage-storage/followup/basic/dist/second.js b/02-TypeScript/17-multipage-storage/followup/basic/dist/second.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/basic/index.html b/02-TypeScript/17-multipage-storage/followup/basic/index.html new file mode 100644 index 000000000..8a8ed7ff7 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/basic/index.html @@ -0,0 +1,20 @@ + + + + + + + + Main + + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/basic/index.ts b/02-TypeScript/17-multipage-storage/followup/basic/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/basic/model.ts b/02-TypeScript/17-multipage-storage/followup/basic/model.ts new file mode 100644 index 000000000..d129e9683 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/basic/model.ts @@ -0,0 +1 @@ +const items:Array = []; \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/basic/second.ts b/02-TypeScript/17-multipage-storage/followup/basic/second.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/dist/view.js b/02-TypeScript/17-multipage-storage/followup/dist/view.js new file mode 100644 index 000000000..d57f038ef --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/dist/view.js @@ -0,0 +1 @@ +var itemsRoot = document.querySelector("#rootItems"); diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/control.ts b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/control.ts new file mode 100644 index 000000000..84b16cf2b --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/control.ts @@ -0,0 +1,156 @@ +const form = document.querySelector("#theForm"); + +function handleAddItem(event: any) { + try { + event.preventDefault(); + + console.log(event); + + const name = event.target.elements.name.value; + const color = event.target.elements.color.value; + const price = event.target.elements.price.valueAsNumber; + const category = event.target.elements.category.value; + const sn = event.target.elements.sn.value; + const img = event.target.elements.img.value; + + items.push(new Item(name, color, price, category, sn, img)); + console.log(items); + event.target.reset(); + + console.log(name); + if (!itemsRoot) throw new Error("itemsRoot is null"); + } catch (error) { + console.error(error); + } +} + +function handleChangerColor(ev) { + try { + console.log(ev); + const color = ev.target.value; + document.body.style.backgroundColor = color; + } catch (error) { + console.error(error); + } +} + +function handleViewPassword() { + try { + const passwordElement: any = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } else { + passwordElement.type = "password"; + } + } catch (error) { + console.error(error); + } +} + + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + + } catch (error) { + console.error(error); + } +} + +function newPrice(uid: string) { + try { + const priceUpdate = prompt("add new price") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + } + } catch (error) { + console.error(error); + return false; + } +} +function newSN(uid: string) { + try { + const priceUpdate = prompt("add new SN") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].sn) { + items[index].sn = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + } + } catch (error) { + console.error(error); + return false; + } +} +function newCategory(uid: string) { + try { + const priceUpdate = prompt("add new Category") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].category) { + items[index].category = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + } + } catch (error) { + console.error(error); + return false; + } +} +function newName(uid: string) { + try { + + const priceUpdate = prompt("add new Name") as string; + const index = items.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("items not found"); + if (items[index].name) { + items[index].name = priceUpdate; + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + } + + } catch (error) { + console.error(error); + return false; + } +} +function handleSaveItems(){ + console.log('save items'); + localStorage.setItem('items',JSON.stringify(items)); +} + +function renderItems(items: Item[], renderElementId: string): void { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = items + .map((item) => { + console.log(`---${item.uid}---`); + return `
                +

                ${item.name}

                +
                Price: ${item.price}
                +
                Category: ${item.category}
                +
                Size: ${item.color}
                +
                S/N: ${item.sn}
                + +
                + `; + }) + .join(" "); + console.log(html); + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } catch (error) { + console.error(error); + } +} + diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/control.js b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/control.js new file mode 100644 index 000000000..53db7a570 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/control.js @@ -0,0 +1,153 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(event) { + try { + event.preventDefault(); + console.log(event); + var name = event.target.elements.name.value; + var color = event.target.elements.color.value; + var price = event.target.elements.price.valueAsNumber; + var category = event.target.elements.category.value; + var sn = event.target.elements.sn.value; + var img = event.target.elements.img.value; + items.push(new Item(name, color, price, category, sn, img)); + console.log(items); + event.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + } + catch (error) { + console.error(error); + } +} +function handleChangerColor(ev) { + try { + console.log(ev); + var color = ev.target.value; + document.body.style.backgroundColor = color; + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector("#pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + } + else { + passwordElement.type = "password"; + } + } + catch (error) { + console.error(error); + } +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + } + catch (error) { + console.error(error); + } +} +function newPrice(uid) { + try { + var priceUpdate = prompt("add new price"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].price) { + items[index].price = parseInt(priceUpdate); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newSN(uid) { + try { + var priceUpdate = prompt("add new SN"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].sn) { + items[index].sn = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newCategory(uid) { + try { + var priceUpdate = prompt("add new Category"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].category) { + items[index].category = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + } + } + catch (error) { + console.error(error); + return false; + } +} +function newName(uid) { + try { + var priceUpdate = prompt("add new Name"); + var index = items.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("items not found"); + if (items[index].name) { + items[index].name = priceUpdate; + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + } + } + catch (error) { + console.error(error); + return false; + } +} +function handleSaveItems() { + console.log('save items'); + localStorage.setItem('items', JSON.stringify(items)); +} +function renderItems(items, renderElementId) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = items + .map(function (item) { + console.log("---" + item.uid + "---"); + return "
                \n

                " + item.name + "

                \n
                Price: " + item.price + "
                \n
                Category: " + item.category + "
                \n
                Size: " + item.color + "
                \n
                S/N: " + item.sn + "
                \n \n
                \n "; + }) + .join(" "); + console.log(html); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/helpers.js b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/html-style.css b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/html-style.css new file mode 100644 index 000000000..8462c2497 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/html-style.css @@ -0,0 +1,16 @@ +.wrraper { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + height: 900px; +} + +h1 { + background-color: white; +} + +a { + background-color: white; + font-size: 3rem; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/index.js b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/index.js new file mode 100644 index 000000000..671403264 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/index.js @@ -0,0 +1,6 @@ +var _items = getItemsFromStorage(); +if (_items) { + items.push.apply(items, _items); +} +renderItems(items, "itemsRoot"); +handleSaveItems(); diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/model.js b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/model.js new file mode 100644 index 000000000..05c3a494f --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/model.js @@ -0,0 +1,15 @@ +var Item = /** @class */ (function () { + function Item(name, color, price, category, sn, img) { + this.name = name; + this.color = color; + this.price = price; + this.category = category; + this.sn = sn; + this.img = img; + this.uid = uid(); + } + return Item; +}()); +var items = []; +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345") +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/setProduct.js b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/setProduct.js new file mode 100644 index 000000000..ac2b5b87f --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/setProduct.js @@ -0,0 +1,7 @@ +console.log("renderItems"); +var _items = getItemsFromStorage(); +if (_items) { + items.push.apply(items, _items); +} +renderItems(items, "itemsRoot"); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/style.css b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/style.css new file mode 100644 index 000000000..9692f2052 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/style.css @@ -0,0 +1,58 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +h1, a { + color: red; + display: grid; + justify-content: center; + text-align: center; +} + +.wrraper { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + height: 900px; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/view.js b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/view.js new file mode 100644 index 000000000..49b0a5410 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/dist/view.js @@ -0,0 +1,17 @@ +var itemsRoot = document.querySelector('#itemsRoot'); +function getItemsFromStorage() { + try { + //get items from storage + var itemsString = localStorage.getItem("items"); + if (!itemsString) + throw new Error("Couldn't find items in storage"); + //convert to array + var items = JSON.parse(itemsString); + return items; + console.log(items); + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/helpers.ts b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/html-style.scss b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/html-style.scss new file mode 100644 index 000000000..fd658f438 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/html-style.scss @@ -0,0 +1,15 @@ +.wrraper{ + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + height: 900px; + } + + h1{ + background-color: white; + } + a{ + background-color: white; + font-size: 3rem; + } \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/index.html b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/index.html new file mode 100644 index 000000000..4742eda45 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/index.html @@ -0,0 +1,22 @@ + + + + + + + GmaeStop + + + + + + + + +
                +

                Store

                + set product +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/index.ts b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/index.ts new file mode 100644 index 000000000..603b9a67e --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/index.ts @@ -0,0 +1,8 @@ +const _items = getItemsFromStorage(); + +if (_items) { + items.push(..._items); +} + +renderItems(items, "itemsRoot"); +handleSaveItems() \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/model.ts b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/model.ts new file mode 100644 index 000000000..a99187109 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/model.ts @@ -0,0 +1,18 @@ +class Item { + uid: string; + + constructor( + public name: string, + public color: string, + public price: number, + public category: string, + public sn: string, + public img: string + ) { + this.uid = uid(); + } +} +const items:Item[] = []; + +// items.push(new Item('addias z45','blue',120,"shoes",44,"fgdfgsdg543534t345") +console.log(items) diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/setProduct.html b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/setProduct.html new file mode 100644 index 000000000..8f5496758 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/setProduct.html @@ -0,0 +1,46 @@ + + + + + + + + admin - set product + + + + + + + + + +
                +

                Add product +

                + Store +
                + + + + + + + +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/setProduct.ts b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/setProduct.ts new file mode 100644 index 000000000..49bc4abc9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/setProduct.ts @@ -0,0 +1,9 @@ +console.log("renderItems"); +const _items = getItemsFromStorage(); + +if (_items) { + items.push(..._items); +} + +renderItems(items, "itemsRoot"); +console.log(items); diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/style.css b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/style.css new file mode 100644 index 000000000..459bb73ed --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/style.css @@ -0,0 +1,57 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; +} +form input, +form textarea, +form select { + margin: 10px 0; +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; +} +.item .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} +.item .description { + margin-bottom: 10px; +} +.item .actions { + display: flex; + justify-content: space-between; +} +.item .actions button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.item .actions button:hover { + background: #ccc; +} + +h1, a { + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; +} + +body { + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/style.scss b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/style.scss new file mode 100644 index 000000000..49fc26186 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/style.scss @@ -0,0 +1,60 @@ +form { + display: flex; + flex-direction: column; + width: 300px; + margin: 0 auto; + input, + textarea, + select { + margin: 10px 0; + } +} + +.item { + color: white; + width: 300px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px #ccc; + .title { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + } + .description { + margin-bottom: 10px; + } + .actions { + display: flex; + justify-content: space-between; + button { + padding: 5px 10px; + border: 1px solid #ccc; + border-radius: 5px; + background: #fff; + cursor: pointer; + &:hover { + background: #ccc; + } + } + } +} + +h1, a{ + color: rgb(255, 0, 0); + display: grid; + justify-content: center; + text-align: center; + + } + + .wrraper{ + background-image: url(https://atthebuzzerpodcast.files.wordpress.com/2022/11/gamemosaic.png?w=1920&h=768&crop=1); + background-repeat: no-repeat; + background-position: center; + background-size:cover; + height: 900px; + } + diff --git a/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/view.ts b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/view.ts new file mode 100644 index 000000000..eb4a21668 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/itayAmosi/itayAmosi/view.ts @@ -0,0 +1,17 @@ +const itemsRoot = document.querySelector('#itemsRoot'); + +function getItemsFromStorage():Item[] | undefined { + try { + //get items from storage + const itemsString = localStorage.getItem("items"); + if (!itemsString) throw new Error("Couldn't find items in storage"); + + //convert to array + const items = JSON.parse(itemsString); + return items; + console.log(items); + } catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/addItems.html b/02-TypeScript/17-multipage-storage/followup/noa-meillet/addItems.html new file mode 100644 index 000000000..939781881 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/addItems.html @@ -0,0 +1,52 @@ + + + + + + + Store- Settings + + + + + + + + +

                Add products

                + Store +

                NOA Store

                +
                + +
                +
                +
                +
                +
                + +
                +
                + + diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/addItems.ts b/02-TypeScript/17-multipage-storage/followup/noa-meillet/addItems.ts new file mode 100644 index 000000000..0816e4258 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/addItems.ts @@ -0,0 +1,11 @@ +console.log("renderItems"); +const _items = getItemsFromStorage(); +// items = _items; + +if (_items) { + clothesShopArr.push(..._items); +} + +if (store) { + store.innerHTML = showStore(clothesShopArr); +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/control.ts b/02-TypeScript/17-multipage-storage/followup/noa-meillet/control.ts new file mode 100644 index 000000000..52e806ba9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/control.ts @@ -0,0 +1,181 @@ +function showStore(clothesShopArr: Item[]): string { + try { + if (store && clothesShopArr.length != 0) { + let html = ``; + for (let i = 0; i < clothesShopArr.length; i++) { + html += `
                + image +

                ${clothesShopArr[i].name}

                +
                ${clothesShopArr[i].department}
                +
                ${clothesShopArr[i].type}
                +

                ${clothesShopArr[i].price}

                + + +
                `; + } + return html; + } else { + throw new Error(`there is no item in the store`); + } + } catch (error) { + console.error(error); + return ""; + } +} + +function addItem(event: any) { + try { + event.preventDefault(); + const name = event.target.elements.name.value; + const departement = event.target.elements.departement.value; + const type = event.target.elements.type.value; + const price = event.target.elements.price.valueAsNumber; + const image = event.target.elements.image.value; + clothesShopArr.push(new Item(name, departement, type, price, image)); + handleSaveItems(); + event.target.reset(); + if (!store) throw new Error("the store is available"); + store.innerHTML = showStore(clothesShopArr); + } catch (error) { + console.error(Error); + } +} + +function handleSaveItems() { + console.log("save items"); + localStorage.setItem("items", JSON.stringify(clothesShopArr)); +} + +function handleDeleteItem(uid: string) { + try { + console.log(uid); + const index = clothesShopArr.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + clothesShopArr.splice(index, 1); + + if (!store) throw new Error("store is available"); + store.innerHTML = showStore(clothesShopArr); + } catch (error) { + console.error(error); + } +} + +function handleUpdateItem(uid: string) { + try { + let newPrice; + newPrice = prompt("Enter a new price to this item:"); + while (!newPrice || isNaN(newPrice)) { + newPrice = prompt("You need to enter a number:"); + newPrice = parseInt(newPrice); + } + const index = clothesShopArr.findIndex((item) => item.uid === uid); + if (index === -1) throw new Error("item not found"); + if (newPrice) clothesShopArr[index].price = newPrice; + + if (!store) throw new Error("ItemRoot is undefined"); + store.innerHTML = showStore(clothesShopArr); + } catch (error) { + console.error(error); + } +} + +function getAllItemInType(clothesArr: Item[]): void | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + let typeGetFromUser; + while (!typeGetFromUser) { + typeGetFromUser = prompt(`Enter the type of item you will want to buy:`); + } + const chosenItemsArr = clothesArr.filter( + (item) => item.type == typeGetFromUser + ); + if (chosenItemsArr.length == 0) + throw new Error( + `items from type ${typeGetFromUser} is availble in our store` + ); + else { + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                + + +
                `; + } + } + } + } catch (error) { + console.error(error); + if (store) + store.innerHTML = `

                Item from this type is availble in our store

                `; + return false; + } +} + +function sortArrByPrice(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = clothesArr.sort((a, b) => a.price - b.price); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < sortedArr.length; i++) { + store.innerHTML += `
                + image +

                ${sortedArr[i].name}

                +
                ${sortedArr[i].department}
                +
                ${sortedArr[i].type}
                +

                ${sortedArr[i].price}

                + + +
                `; + } + } + return sortedArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } +} + +function getTheCheapestItem(clothesArr: Item[]): Item[] | false { + try { + if (clothesArr.length == 0) + throw new Error(`there is no item in the store`); + const sortedArr = sortArrByPrice(clothesArr); + let chosenItemsArr; + if (sortedArr) { + chosenItemsArr = sortedArr.filter( + (item) => item.price == sortedArr[0].price + ); + if (chosenItemsArr.length == 0) + throw new Error(`there is no item in the store`); + if (store) { + store.innerHTML = ` `; + for (let i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += `
                + image +

                ${chosenItemsArr[i].name}

                +
                ${chosenItemsArr[i].department}
                +
                ${chosenItemsArr[i].type}
                +

                ${chosenItemsArr[i].price}

                + + +
                `; + } + } + } + return chosenItemsArr; + } catch (error) { + console.error(error); + if (store) store.innerHTML = `

                We did not find item for you

                `; + return false; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/addItems.js b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/addItems.js new file mode 100644 index 000000000..b3f5c5cae --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/addItems.js @@ -0,0 +1,9 @@ +console.log("renderItems"); +var _items = getItemsFromStorage(); +// items = _items; +if (_items) { + clothesShopArr.push.apply(clothesShopArr, _items); +} +if (store) { + store.innerHTML = showStore(clothesShopArr); +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/control.js b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/control.js new file mode 100644 index 000000000..29002fb9a --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/control.js @@ -0,0 +1,150 @@ +function showStore(clothesShopArr) { + try { + if (store && clothesShopArr.length != 0) { + var html = ""; + for (var i = 0; i < clothesShopArr.length; i++) { + html += "
                \n \"image\"/\n

                " + clothesShopArr[i].name + "

                \n
                " + clothesShopArr[i].department + "
                \n
                " + clothesShopArr[i].type + "
                \n

                " + clothesShopArr[i].price + "

                \n \n \n
                "; + } + return html; + } + else { + throw new Error("there is no item in the store"); + } + } + catch (error) { + console.error(error); + return ""; + } +} +function addItem(event) { + try { + event.preventDefault(); + var name = event.target.elements.name.value; + var departement = event.target.elements.departement.value; + var type = event.target.elements.type.value; + var price = event.target.elements.price.valueAsNumber; + var image = event.target.elements.image.value; + clothesShopArr.push(new Item(name, departement, type, price, image)); + handleSaveItems(); + event.target.reset(); + if (!store) + throw new Error("the store is available"); + store.innerHTML = showStore(clothesShopArr); + } + catch (error) { + console.error(Error); + } +} +function handleSaveItems() { + console.log("save items"); + localStorage.setItem("items", JSON.stringify(clothesShopArr)); +} +function handleDeleteItem(uid) { + try { + console.log(uid); + var index = clothesShopArr.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + clothesShopArr.splice(index, 1); + if (!store) + throw new Error("store is available"); + store.innerHTML = showStore(clothesShopArr); + } + catch (error) { + console.error(error); + } +} +function handleUpdateItem(uid) { + try { + var newPrice = void 0; + newPrice = prompt("Enter a new price to this item:"); + while (!newPrice || isNaN(newPrice)) { + newPrice = prompt("You need to enter a number:"); + newPrice = parseInt(newPrice); + } + var index = clothesShopArr.findIndex(function (item) { return item.uid === uid; }); + if (index === -1) + throw new Error("item not found"); + if (newPrice) + clothesShopArr[index].price = newPrice; + if (!store) + throw new Error("ItemRoot is undefined"); + store.innerHTML = showStore(clothesShopArr); + } + catch (error) { + console.error(error); + } +} +function getAllItemInType(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var typeGetFromUser_1; + while (!typeGetFromUser_1) { + typeGetFromUser_1 = prompt("Enter the type of item you will want to buy:"); + } + var chosenItemsArr = clothesArr.filter(function (item) { return item.type == typeGetFromUser_1; }); + if (chosenItemsArr.length == 0) + throw new Error("items from type " + typeGetFromUser_1 + " is availble in our store"); + else { + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n \n \n
                "; + } + } + } + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                Item from this type is availble in our store

                "; + return false; + } +} +function sortArrByPrice(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr = clothesArr.sort(function (a, b) { return a.price - b.price; }); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < sortedArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + sortedArr[i].name + "

                \n
                " + sortedArr[i].department + "
                \n
                " + sortedArr[i].type + "
                \n

                " + sortedArr[i].price + "

                \n \n \n
                "; + } + } + return sortedArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} +function getTheCheapestItem(clothesArr) { + try { + if (clothesArr.length == 0) + throw new Error("there is no item in the store"); + var sortedArr_1 = sortArrByPrice(clothesArr); + var chosenItemsArr = void 0; + if (sortedArr_1) { + chosenItemsArr = sortedArr_1.filter(function (item) { return item.price == sortedArr_1[0].price; }); + if (chosenItemsArr.length == 0) + throw new Error("there is no item in the store"); + if (store) { + store.innerHTML = " "; + for (var i = 0; i < chosenItemsArr.length; i++) { + store.innerHTML += "
                \n \"image\"/\n

                " + chosenItemsArr[i].name + "

                \n
                " + chosenItemsArr[i].department + "
                \n
                " + chosenItemsArr[i].type + "
                \n

                " + chosenItemsArr[i].price + "

                \n \n \n
                "; + } + } + } + return chosenItemsArr; + } + catch (error) { + console.error(error); + if (store) + store.innerHTML = "

                We did not find item for you

                "; + return false; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/helpers.js b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/index.js b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/index.js new file mode 100644 index 000000000..bb265597b --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/index.js @@ -0,0 +1,8 @@ +var _items = getItemsFromStorage(); +// items = _items; +if (_items) { + clothesShopArr.push.apply(clothesShopArr, _items); +} +if (store) { + store.innerHTML = showStore(clothesShopArr); +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/model.js b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/model.js new file mode 100644 index 000000000..aa9e60412 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/model.js @@ -0,0 +1,37 @@ +var Item = /** @class */ (function () { + function Item(name, department, type, price, image) { + this.name = name; + this.department = department; + this.type = type; + this.price = price; + this.image = image; + this.uid = uid(); + } + return Item; +}()); +var shirtLevisW = new Item("Levis-Shirt", "women", "shirt", 19.9, "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUWFRgVFhQYGBgYGRgYGRgZGhoZGBgYHhgcGhwZGhgcIy4lHB4rHxgaJjgmKy8xNTU1HCU7QDs0Py40NTEBDAwMEA8QHxISHDUrISw0NDQ0NDQ2NDE0NDQ1NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0Mf/AABEIASIArgMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAQQFBgcCAwj/xABEEAACAQIEAgcEBQoFBAMAAAABAgADEQQSITEFQQYiUWFxgZEyobHBBxNS0fAjM0JicpKissLxJGNzguEUNLPSQ1Oj/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECBAMF/8QAJxEAAgICAgIBBAIDAAAAAAAAAAECEQMxBCESMkEiI1FxM5FSYYH/2gAMAwEAAhEDEQA/ANYhCEAIQiQAhCEAIQnhi8UlNC7sFVdST+N4B7xJTOM9OqaKfqxdrXGYEA+faBuOW2+kpuL+kKux6jBSDe4NxbssRqD5+W0iyaNlziItQHnMFTpZiSSTiHJchzawF8oBBtysNtt5KYbpxUU9YXsR1lvfv6twD7vujyJ8TaISm8D6Wq6BmBt7LNcaMBc3UXKqdLE21Nry2YbEq4BVgwPMG+klOyGqPaEWJJICEIQAhCEAIsSLACEIkAIQhACEWEAa43FBBckDvPIeHM90zzpn0kZBlSoA55FNQP0rX3GltuZk90444mHS5JZ2FkRbXJFzmNz7AvrMQxWNLszMSWYdYnW5/F5Vssl8i4/iD1CGdyx2/WA5Ds05ATimgyFgNBpfxNtvHnGlIFmFhrflLRgOFIy2Y69l++5v27TnKaidceNyIejT3uDbYGxsdBcG17f8Th2IOhsB7/v7JoeH4OhTKTlUanW3v5aE+sheMcHpujfVK2muZVJXba8pHLb0dpYKVJlZo4k6EEjt193uls6O9MsQjpTdi6hkXLZFut9bm1ybbEnQ25aSkYhCu9tdDbc+Pui0XBa9yOw9+nunb9Gd/hn0fwbjtLEL1C19iGBBBFri+1xmF/ESWmM9D+K083XqOCMjK6vlKEpZg6E2cKRobE62Omg1/CVsygne2vjzlkyklR7xIsJJUSEIQAixIsAIkWEAIQhACeGNxK00Z2NlUEmOJWeleIqMDRpIHIVXa5te+eyjtJKW7OsNRvAMp6Z8SetWaqRlDLlRdmCA9UlbkrmJJ7wJTHY6gyb425zmzBlslrXNsyJqcyg5iFBNxztIKqLnv+/eVRdj/goBLX2BG3Z4yfwVNGLFOqVUPsfZLZQw7Rc7iQfR9gajKdiNPX/kS2jCoilgeU4ZGk+zVhTcU0SnDC1Sg2vWvYX2jLCVMQS6ZcpGUqMpsTmsylr9XS5vYg2tznXBOKIEdescuvVUsbi1wBzsOyWqjiVyhmFrgHx8pwX030aJd1TM66b4HIiNaxLEEjvBPyPrKtS3t5CXb6RMUHRAPt/0mUhDYgm2s04vQx5lUyd4di2YIqhAaS1GueqXSwYobi1woa1/De017obxU1Ka03zCoihrsrapfqkm25FvG58BiFFLsFsSGKg7A++ab0GV3qM6/WAKygFjUOYKOuue+X9JeqQfnOi2cpaNSRrzqc0jcX+M6lzmESLCAJFiRYAQhFgCRYCLaAckyl9M8QlNS72ylWzBswV2COUGbRWIbTId82x0l0aZT9InGziFOGpUmKpUa9QkdZkuGCILmwJOptoNpDJjszKuS12J1Ym/nGnMka7f8x3iLBe+2o77/daMKZ5676+chFmLQqZXDDS3wlqw+OJXtPZ2ypVdyO23PaPMDjCpAOlpzyRvs64Z+PRbOF1WLXzomuobW3f4/fLAlZ8pzurLysuU+O5le4biKejEKbdsfcW46oTqLc25aD1nCVvpI2ppK2yE6Y1x1FG+Yt5AW+crWlh23i4rEs7FmNyfQDkIiWI8z+PCaIR8YpGHJLyk2O0NiWJ3t4jwl+6B4whwWqtTUs7MSbIxyi17iyklwfBT5UBDddLnw8ecs3Riu6V1oqepXZUa425G63/WKkX1EsU+DdsI7W6wsfL5R1GHCqjMiliLkX0FuqdVuLmxta4uY+lzmEIsSAJFhEgHUIRYAWhCEA88Q+VSdNO0298yT6RURGD0zYuzl1BBBZh13ANwrHS9rXtffWatxFUam6uSEKNmIvcLlNyLa3AufKYZ0rxT1i1R6rMA+SnTO+i3Z9+076k330lWWRVcYLW7bXPd3RmACul7/GeuIvfXn+LzgAg6chCJZwQCfGx7p3TpXYX8IW1EmsNwZzTSuvWUuEKqCWBJFrAe1ckLbe5Fr8j0THZ74Dh1iCRcQ404Vbdgk2lMgEFSCuhBBBB7CDqDK3xvU90zR7kbJpKHRBMNBPdF27LfE9k9cOqBj9YGKWI6tiQeR1I03glI2F97TTZio5w5uN7WGsmODuLhgzI1I5w4XMFIBIJXQ62UbyMoYVmK5QTmIXTrWNwoBG+pI077Saw3DagqqgT22ZASCQxUkEC4H2W00PVOgkMlG4dGCz0KdRkVGdFYoosoYgE2Em5XOjmB+pqPTps5w6otldzUy1CQ1qbHXJlO197WlklkUYkSKYSSBIQhAOhCEIARYQgCMso/Feg9OviS7kLRGv1SAgu51JZuS76De/K2t4Y2Ebj4/j5xRKdGcdL+hiCj/hqIDA3IXcju5k6AW75n3FuAtTUEBr264NtD5cp9DWBZQed7+IBBHwjDHcLpkMzJcLdjYEk2F7ADU7bRSJTPn7C8Hd1zKhIuANCSSbbCbBwnogUofUu4HWUgoCrLlZXBzX1bMt8wAt7zxhulfDkAyI/aMtMDz1YR+vTzB7flf3B/7SLSOrw5f8X/AETOO4JRrqBVW7AABx1X07WG/gbiUri30aBycmIIBOzICR5hhf0llTpxgTvUdfGnU/pUx/Q6R4N7BcTTueTNlPo1pFRbseOaKpp1+jPh9Fn2sRf9mmB7y5+EZ436PmVrI11tsd7216x5Gw7LTXsgIuNQdiNR6zlqAMlJHNyfyYjh+iVWjUptUVvqy4FQLe+TOllBGpNtTry0mr9H8P1qpCulPOxRGFgc3XZwCxIuxf7I19kG8mBRHMT1RANAJNFW7OBRUbKBtsLbafKek6IiQQJEiwMASJFiQDqLEiwAhCEA8q50tPNdR4iRq9JsGXNNq6q97FXumu1gzAKT3XkoqcxqNwfHfyhMlpobu9nQ95v3HKQfl6x0r3jHiXVXP9khj4Df3XneFqSSDKelvDRh8U6gdVj9ag5ZGJJUdwYMvgBJ7pd0TyGmcJh2KlXLhSzdYEZfaJIuCduySP0lYPNRTEc6bZHP6j2Fz4OF/eMrfD+CY+qAyLVCnZmcpcdwZgSPK05Nd1R62PI5QjPySq07+SZxnRbB01pZqpC1N6zVlTrWFsishRt9iQbDnI7GdE1FKo1CsKz0bF1GU3Ui+ZSp7L6a6qRc216Xh3E8MDkFULck5CtRb3uTkBbW+t7SKwvG8RSrtWzsapGVs4JzDTqsum1hba1odfKLQjkfcZp/92OcD0exYKCi4RqlP68IlV6bBLqLsBYC5YaX7eySXDMdxNXU53rUwFL5VSplDDYm2YutwSt77dt5GYXpPVTFNimVXdkKFdVULpYLvYDKDz59s64V0iCNWzJenXdmZAwYKWJJGVlKsNQNgbAawmkTOGRp+ST6LVV6W1KaE1EQsqjMCTTYvlpnKqtdtS1TdQQApItqbfhKmdEa2XMqtl3tdQbX52vMo6RY6jiWpmkrqwXI2YALyChVzNlAObQG2omsqoUADYWA8haXTtmDkY4wjF1TdnZnM6iSTKJEixIAhhFMSAdQhCAEIRYBj3TZF/66qAANUJ7yUUk+ZJicExVSl+bqOncp6nmh6p8xDpp/31bxX+RJ48PmSbabo9DFFOKsuKdJ8wWjVUZnICso0Y3uVZeVwDqNO4SapV7TMqlYjEUwdg5I8Mpt4zRMJ7ObunfFJuPZmzxjGX0kn9YrCzAMLg2IuLggg2PYQD5R7Tq3kVRj6gZ1OA8DRjxXhNDELlqoG7G2Zf2WGo+EeLOssExk4u0+yKwnR3CUwMuHp6c3XO37zXMdVOG0GFmoUiOwopHwjopODcSKJc5N22yrcR6I0xVpVaC5QtWmaiXOUpnUllB2tbUbW8NbZfWebNY+vykViukOHQkBs739lLNY9hb2R4Xv3SG4x7ZdynkpPuicAgwlIxPSPEVHRFK0lZ0XqjM9iwBu7C3oB4y40aIXtJ5sxux85EZKWisoSj7HpCEJYoJEnUQwBYQhACEIsAyDp2tsfV78h/8AzSMsDUy2J9nt7DJT6RaVsYT9pEPuy/0yJwz5R1gbEbj8aTJNdnoYn9CPHiWuJpj9cHT9n37TT8Poqr2AX8ZnXDcEXqo7khaWR9Te4LgW8LZz5S94Gvm17dZ3xdRM2V3KyWpx5REaURHlMTqcB0kUzhZ6QADQYxLRSYB411NtN7G3jbT3zJOCJZFuSdAde3nNcqtZSfsgn0F5knCm0HgPhM3I0jZxFslsN+epD/Mp/wA4mlTM8I35el/q0/51mmScHqyvK2hIQhO5lCJFhACEIQAiwhAM3+kSnfEp/pL/ADvIrD07LJr6QSP+pp/6Yv8Avtb5yOK5kFpizex6OD1QmHpllqkfaor+8K33Sx8Kp6CMOC0L4TENbUVUA/2qt/dUktw2oFUFgfC00YlUUZczuTJikukcLGuHxSMbBrHsOhj1bdonY4HaGeonms7WALFWLaedR1TVmCjtJA+MAj+kVUphq7j9Gm5/gP8AeZhw831mi8Z4/TSlUNMCqwVrLeyk2NgTbW/YL37pmXA26gF9hM3IWjZxHsnMJ+dpH/Mp/wA6zTZl9MXGm41HiNppmGqh0Vh+kqt6i8jjvpojlLtM9IkWE0mQSEIQAhCEAUQiRYBmn0ii2KQ9tNT/ABOIywjdWSH0mC2IpH/L+Dt98iOGvdZky+x6GD0LLh6rJgKopFVYtVdywzWRFVnsObEZFHYXB5WlFpY7Ek61agF+TMO/ZdpYK3EkWhVoNmzuVynW2V2pZtQDb8yo2PtCQlDB0iQTZiDteqttO2x5E8vKasKTijFmtSf7PQVqx/Tqb2F3fU+Z15+h7J74bFYkU6zfX1cyXVAS3tEAKRe2mZlve40M7oU6ZsUZgXuAM5ZSbKlySo2zruORnqr08gH5Q56uUjN1hYuwu3ZakB36Tt02qRx7V2yQwnFcUqopquDqSrZb2sSbELY69+ndO8DxOviHrUmr1Ey5B1Vuy5lcixA01Q3P6oH6V52muz8rEHxGxGg27Dr3aSIo4CsKte1QH62nmGvXBVkUZtLWs7DQSXEqpHmMG73eq1NjkbKCQzvlZQS12NrjN7J5a2Ozno1WRaT0z1zSrEI2U3yMEewDa2Bdx4ARumCCPkDswKBgt+027AF8BrHfDMIyO5sAjMGUDSwCWKkDsy3tzuBznRx6KqXZZsNhwQC1l520ZhvzPVXQ20HKUrDYQ0Hei5F0NgftLurDuK2PdtLNT4oofJlYaAhtCpv2G+trEHwMYdJ1U/V119q/1b+BBZLjuIYeYmTkY242auLkUZV+TmgADL10arZ8OvahZT5G4/hIlAw73AMuHQyrdai9jq37ykf0TJgdSNnJVxsskIQmwwCQhCAEIQgBFiRYBnv0o07Ph27RUU+RQj+Yyu8KOkuv0l4bNhVf/wCuopP7LAofeVlI4UZlzL6jdx3cTy4jiir2yO9tRZSQCd9baHqj0EKPEbatQbU6AlFvrqQWYXM5xtNTW619haxI5nsMe4fhSMoUIzDQ3LGw8ydNhNmFfQjDna82ejYlDkCAA8soFh1d2AFrb7GxsNbgX9cw10vrfW5152vte525me9PhaoALhRrYCxt5zrKi8y3gR6zskcGzlMTsb87bWnrg8Xeo4Lj8y+mxHXTW/nPD/rUXQLe3ab/AI2kbhsZmeq4FitJgbEaBnU+XsCS0QmWglcwItc3OptodLD32E80w7DW9rfj5yFpYpmdSRchbG/W22sfG8nEuQDbs3+6TVDY1OD1/RYb21Wx52ZdfLTYdk7rcMzUaiBApZbr1ncl1OZB1tR1gPWP6Qtv28tPf+No6RxuNLGUl2qLRbTspnCq2ZR4S5dCm69YdyH0L/fKZTXJiKtPkrtb9luuv8LCW7oY35aoO2mD6MPvnmwXjko9bLLyxX+i5QhCazzxIQhACEIQAhCLAIrpRhs+Erpa/wCTZh4oM496iZTwl9ZtFWmGVlOzAg+BFpiOBUrlv3ThmWjXxntD7EZhU6qI2m5KhhvsWVvhJOlhne2Zqo8KiEe5BGeIU51IJFxuAD8fGSFBGt7R8wPlNWH0Rj5H8jA8KH2nPi9+cQ8NReR/eJjpUNva/HkJ51Vt2n8dvlOyODGwwyWPuv4fj0kVh6ApviGOXK2HFjf9LOw/9vGxkoSSLZdu7eROJfUqbdZqSNoSbK5qE6cgG95ksLZNU6aF7i2YXBygqLjMANd9/dePVLbXty8rSNwj2UKgyre9z1mPefjH9KmvMlj3mAOkIt7WvhHSLvp5meFAbEfCOVX+8qySp8eTLi1bk6KfFlJU+7LLF0ONsQ3fTb3MkrnTJ8tfDHtWr7jT++TnRR/8Qh+0rD+En5Tz59Zj08bvAX6EITQYwiRYkAIQhACLEhAOhMNd2VyjWzIzKbdoYg/CbkswvEENWdhzd28ixPznHNpGnjbZMoMwUnlJXD0xbQSNwe0msIAwl+PPrxK8vH35AKAtt7/+Zw9Puj4UR2xHTv8AdNakYGiHNE3vIDGYti5RbXBJuASQDte3d8JaOI1vq6buNSiO4G1yFJGnlKBwpdMxN2OrE7knc+stfYS6LBgKYb22qHbTRV9FPxk7hsOg9leW9hfbtkRgAOd7ns7NJPYROzn98iTCQ6o0455QopadsspZain9P8CcmHxA2DvSPiwR1P8AA8f9FKn5Wgf1iPVGHzkv0zpA4KnRt16joV7spLs3gB1f9wkPwKiRXop+up8l1PuEw5X9xHo4V9p2aTCEJoMgGJFiQAhCEAIQhAEqPYE8gCfQXmD4Y3I8Ju1dbqw7VYe4zAcOhCo/fY+Gv3Tjm+DTx/ks+AYEGx2EkOjNZmS7c1RvM3vIHhqZK7JyYAqe5k++/pJvo1hXVFZtAUXKNO3XY6ezz7ZTD7o78j+N2WNYjJO1Wc1dBebkeUyD6Sv/AIatYa5GUdlyMo+MpWBS1vAS59JKDPhqpH6IVyO0B0H9Q9JTsIP7S6fZX4J7A6fH5SxYMWA7pA4Fdre/1k5hNoYRJoZ7ImYgdpA9dJ4Ido/4al3Hddvx5mc2XRXulla+NVb9WlRGnK7sST6KnpPPgbA4mkb/AKRHqrD5w6bUQuKVw1i9EXHejML+YIH+2R/Rl+vTcn/5lBvoR1wLekwS97/2enBfa6/DNQhCE1mAIkWEASEIQAhCEAUTI+mnCFo1nWnoj5agX7BLFio7iQ1vSa5M66epmxFv1E+crKPl0WjkcHZUXJulUH2VCHvtcg+YJ9JdOD2NNSpuPhrcj1MrOD4UzNctcHQqRp46WtLfgKORAvZbkBykY8bjK2dM2ZTjSJBE0njiTpPdY2xL30mhbMj0I+GDYTFkjT6pxfncKXbX930mc4cWa45n3zVcdRy8Pr62zUarE+KG38NpmNBOtJi7bDVJE3gZNUF75EYFJNUVhkD1NpL8HT2m8vmflIleySWIR1wrGmzK9swKrnbcaKp5lRa/K9+UpJ0i8VcqKb08ZHrVKi1FP1NFEKg365d+oTfQ9ZdJ30GwZd0LWIQNUsNs2y689Te/6si6nAqtSsysju9wzBhrdjmub2C3vuZoXR7gq4dCNCzZcxHsi17Ko7BmOvPfuGSK8pWehOShDxT7ol4QhNBiCEIQBIQhACEIQAlA6YD/ABR/ZT+W/wA5f5nvSrXFPrtkHh1F29ZaOystHjgltsP7SYw/9pF4NZMYdflLsohwu0blLsANyQB47ARwTpOuF081Vb7L1vTb+IiE6D7Y+6SgDB1wNhSZfK1tucyrBjrec1Dpk5GDqkfqD1qIJmGENiDuZEdFpE/hfx6yXwy3kZgkO50Glu0yYoLoPxpDKnuglmRbADsAEr9Bbuo7x8ZYpWReIWhCEqWCJCEAIQhAOYsSLACEIQAmc9Imviah7Gt6KB8po0zTjDg4moeX1jj0ciWjsrLQ8wa3+HxktQWRvDhcSYRZdlEcVJIcDp+23gB8T8BIyu8meBjqHvc/yrIl6kx2Mump/wAI47WQfxqflM7wCC4O/jNF6ZrfCv3Mh/it85n/AA/l3GI6JlsmcKbnWTdBdJC0N9JM4VriGQh7gFvUUeJ90npDcKF3J7AfXb5yZlXsstBCEJUsJCLEgBCEIBzFhCAEIQgCrvMtxH5z/cfiYQl4lJExw/2fx2CSibesISSEeGJ/Hvk5wT82f2z/ACrEhEvUR9jy6Wf9pU/2f+RJneF9n1hCI6Etk1guX47JL0N4QhhElwX238P6pMwhKvZZaCEISpYDEhCAEIQgH//Z"); +var shirtLevisM = new Item("Levis-Shirt", "men", "shirt", 19.9, "data:image/jpeg;base64,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"); +var skirtW = new Item("Green-Skirt", "women", "skirt", 29.9, "data:image/jpeg;base64,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"); +var jeansDizzleM = new Item("Dizzle-Jean", "men", "pants", 59.9, "data:image/jpeg;base64,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"); +var shirtPackB = new Item("Shirts-Pack", "baby", "shirt", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU"); +var blouseW = new Item("White-Blouse", "women", "shirt", 15.9, "data:image/jpeg;base64,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"); +var sweatshirtNikeK = new Item("Nike-Sweatshirt", "kids", "sweatshirt", 49.9, "data:image/jpeg;base64,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"); +var dressW = new Item("Pink-Dress", "women", "dress", 39.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU"); +var denimJacketM = new Item("DenimJacket", "men", "outwear", 79.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU"); +var activeSetNikeW = new Item("Nike-ActiveSet", "women", "pants", 19.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU"); +var coatGapB = new Item("Yellow-Coat", "baby", "outwear", 49.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU"); +var hairAccesories = new Item("Hair-Clips", "women", "accesories", 9.9, "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU"); +var clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/style.css b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/style.css new file mode 100644 index 000000000..94b21cfba --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/style.css @@ -0,0 +1,68 @@ +body { + margin: 0; +} + +.tittle { + padding: 5px; + background-color: black; +} +.tittle h2 { + color: azure; + margin: auto; + width: max-content; +} + +.function { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.function button { + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; +} + +.store { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item { + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.store__item__detail { + padding: 0 5px; + margin: 0; +} + +#image { + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName { + width: 100%; +} + +#itemDepartment { + color: grey; +} + +#itemType { + color: grey; +} + +#itemPrice { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/view.js b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/view.js new file mode 100644 index 000000000..98eef1122 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/dist/view.js @@ -0,0 +1,16 @@ +var store = document.querySelector(".store"); +function getItemsFromStorage() { + try { + //get items from storage + var itemsString = localStorage.getItem("clothesShopArr"); + if (!itemsString) + throw new Error("Couldn't find items in storage"); + //convert to array + var items = JSON.parse(itemsString); + return items; + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/helpers.ts b/02-TypeScript/17-multipage-storage/followup/noa-meillet/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/index.html b/02-TypeScript/17-multipage-storage/followup/noa-meillet/index.html new file mode 100644 index 000000000..4464dbbd8 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/index.html @@ -0,0 +1,31 @@ + + + + + + + Store + + + + + + + + +
                +

                Noa Store

                +
                +
                + + + + Add a product +
                +
                + + diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/index.ts b/02-TypeScript/17-multipage-storage/followup/noa-meillet/index.ts new file mode 100644 index 000000000..170ec06a0 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/index.ts @@ -0,0 +1,10 @@ +const _items = getItemsFromStorage(); +// items = _items; + +if (_items) { + clothesShopArr.push(..._items); +} + +if (store) { + store.innerHTML = showStore(clothesShopArr); +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/model.ts b/02-TypeScript/17-multipage-storage/followup/noa-meillet/model.ts new file mode 100644 index 000000000..5faad6b8e --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/model.ts @@ -0,0 +1,113 @@ +class Item { + uid: string; + + public constructor( + public name: string, + public department: string, + public type: string, + public price: number, + public image: string + ) { + this.uid = uid(); + } +} + +const shirtLevisW = new Item( + "Levis-Shirt", + "women", + "shirt", + 19.9, + "data:image/jpeg;base64,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" +); +const shirtLevisM = new Item( + "Levis-Shirt", + "men", + "shirt", + 19.9, + "data:image/jpeg;base64,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" +); +const skirtW = new Item( + "Green-Skirt", + "women", + "skirt", + 29.9, + "data:image/jpeg;base64,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" +); +const jeansDizzleM = new Item( + "Dizzle-Jean", + "men", + "pants", + 59.9, + "data:image/jpeg;base64,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" +); +const shirtPackB = new Item( + "Shirts-Pack", + "baby", + "shirt", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp2MTgcq2ODN2TWgjU-yhYaRmAEV4UMBj3hw&usqp=CAU" +); +const blouseW = new Item( + "White-Blouse", + "women", + "shirt", + 15.9, + "data:image/jpeg;base64,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" +); +const sweatshirtNikeK = new Item( + "Nike-Sweatshirt", + "kids", + "sweatshirt", + 49.9, + "data:image/jpeg;base64,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" +); +const dressW = new Item( + "Pink-Dress", + "women", + "dress", + 39.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEwTJbsK_ehzj_KzxR3kRuM6wAsb4zsJvr-Q&usqp=CAU" +); +const denimJacketM = new Item( + "DenimJacket", + "men", + "outwear", + 79.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRffbPh4FulSkyezxmOR_DJTsNe1Jm6ugn9gQ&usqp=CAU" +); +const activeSetNikeW = new Item( + "Nike-ActiveSet", + "women", + "pants", + 19.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST5AFMP2EJXw2t1YtGOw8VpcyVApv0F4pyXA&usqp=CAU" +); +const coatGapB = new Item( + "Yellow-Coat", + "baby", + "outwear", + 49.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzFrHOgqAgPt8DMCcC1O6pvP3kgJ__WB7ngA&usqp=CAU" +); +const hairAccesories = new Item( + "Hair-Clips", + "women", + "accesories", + 9.9, + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtgUeycZyf_REstUSJjLjgpu3xUy1eUsgIah6YUU74wc7wo30krY2o2fgCBgO3-0XfDRA&usqp=CAU" +); + +const clothesShopArr = [ + shirtLevisW, + shirtLevisM, + skirtW, + jeansDizzleM, + shirtPackB, + blouseW, + sweatshirtNikeK, + dressW, + denimJacketM, + activeSetNikeW, + coatGapB, + hairAccesories, +]; diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/style.scss b/02-TypeScript/17-multipage-storage/followup/noa-meillet/style.scss new file mode 100644 index 000000000..9ac3129e0 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/style.scss @@ -0,0 +1,70 @@ +body{ + margin: 0; +} +.tittle{ + padding: 5px; + background-color: black; + + h2{ + color: azure; + margin: auto; + width: max-content; + } +} + +.function{ + display: flex; + flex-direction:row; + justify-content: space-around; + + button{ + width: max-content; + margin-top: 5px; + background-color: ghostwhite; + border-radius: 10px; + border: 1.5px solid black; + } +} + +.store{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__item{ + margin: 10px auto; + padding: 5px; + border: gainsboro 0.5px solid; + width: 11rem; + height: 25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + &__detail{ + padding: 0 5px; + margin: 0; + } + } +} +#image{ + width: 95%; + height: 15rem; + padding: 5px; +} + +#itemName{ + width: 100%; +} + +#itemDepartment{ + color: grey; +} + +#itemType{ + color: grey; +} + +#itemPrice{ + width: 100%; +} diff --git a/02-TypeScript/17-multipage-storage/followup/noa-meillet/view.ts b/02-TypeScript/17-multipage-storage/followup/noa-meillet/view.ts new file mode 100644 index 000000000..61cdf891e --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/noa-meillet/view.ts @@ -0,0 +1,16 @@ +const store: HTMLHeadingElement | null = document.querySelector(".store"); + +function getItemsFromStorage(): Item[] | undefined { + try { + //get items from storage + const itemsString = localStorage.getItem("clothesShopArr"); + if (!itemsString) throw new Error("Couldn't find items in storage"); + + //convert to array + const items = JSON.parse(itemsString); + return items; + } catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/index.js b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/model.js b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/model.js new file mode 100644 index 000000000..614189b73 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/model.js @@ -0,0 +1 @@ +var items = []; diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/second.js b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/second.js new file mode 100644 index 000000000..7712dcf09 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/dist/second.js @@ -0,0 +1,13 @@ +function handleAddItem(ev) { + try { + debugger; + ev.preventDefault(); + var input = ev.target.text.value; + items.push(input); + console.log(items); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/index.html b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/index.html new file mode 100644 index 000000000..b1951c974 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/index.html @@ -0,0 +1,20 @@ + + + + + + + + Main + + + + + + +

                Main

                + Go to Second +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/index.ts b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/model.ts b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/model.ts new file mode 100644 index 000000000..052e00fde --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/model.ts @@ -0,0 +1 @@ +const items:Array = []; \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/second.html b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/second.html new file mode 100644 index 000000000..758cfdf77 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/second.html @@ -0,0 +1,24 @@ + + + + + + + + Second + + + + + + +

                Second

                +
                + + +
                + Go to main +
                + + + \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/second.ts b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/second.ts new file mode 100644 index 000000000..c891bc39a --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/shlomi.samai/basic/second.ts @@ -0,0 +1,13 @@ +function handleAddItem(ev:any){ + try { + debugger; + ev.preventDefault(); + const input=ev.target.text.value; + items.push(input); + console.log(items); + ev.target.reset(); + + } catch (error) { + console.error(error) + } +} \ No newline at end of file diff --git a/02-TypeScript/17-multipage-storage/followup/view.ts b/02-TypeScript/17-multipage-storage/followup/view.ts new file mode 100644 index 000000000..22b743d00 --- /dev/null +++ b/02-TypeScript/17-multipage-storage/followup/view.ts @@ -0,0 +1 @@ +const itemsRoot = document.querySelector("#rootItems"); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/.vscode/settings.json b/02-TypeScript/18-personalProject/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/18-personalProject/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/control.ts b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/control.ts new file mode 100644 index 000000000..aa58a9da0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/control.ts @@ -0,0 +1,330 @@ +let currentLine: number = 0; + +const WORD_LENGTH = 5; +const LAST_CELL_IN_LINE = 4; +const LAST_LINE = 5; + +let streak: number = 0; + + +let currentCell = linesArray[0][0]; + + +function insertLetterToCell(letter: string): void { + try { + + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText === "") { + currentCell.innerText = letter; + if (currentCell.nextElementSibling) { + currentCell = currentCell.nextElementSibling as HTMLElement; //move to next cell + } + } + + } catch (error: unknown) { + console.error(error); + } +} + + +function deleteLetterFromCell(): void { //clicking BACK + try { + if (linesArray[currentLine][0].innerText !== "") { + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText === "") { + currentCell = currentCell.previousElementSibling as HTMLElement; + currentCell.innerText = ""; + } + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText !== "") { + currentCell.innerText = ""; + } + + } + + } catch (error: unknown) { + console.error(error); + } +} + + +function enter(): void { //clicking ENTER + try { + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText !== "") { + + let correctLetters: number = 0; + + const _guess: string[] = []; + + for (let i = 0; i < WORD_LENGTH; i++) { + _guess.push(linesArray[currentLine][i].innerText); + } + + const guessName: string = _guess.join("").toLowerCase(); + + const guess = wordsArray.find(({ name }) => name === guessName); + + const foundLetters: string[] = []; + + if (guess) { + + for (let i = 0; i < WORD_LENGTH; i++) { + const checkedLetter = linesArray[currentLine][i]; + + if (checkedLetter !== linesArray[LAST_LINE][LAST_CELL_IN_LINE]) { + + if (solution?.includesLetter(checkedLetter.innerText)) { + + if (checkedLetter.innerText === solution.name.toUpperCase()[i]) { //exact spot + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "SeaGreen"; + + + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter) { + keyOFCheckedLetter.style.backgroundColor = "SeaGreen"; + keyOFCheckedLetter.style.borderColor = "SeaGreen"; + } + correctLetters++ + if (correctLetters === WORD_LENGTH) { + if (loggedInUser) { + updateStreak(loggedInUser.streak + 1); + renderUserData(users, "userDataRoot"); + } + setTimeout(win, 8000, users); + } + } else { + const foundLettersAsString: string = foundLetters.join(""); + const foundLettersAsWord = new Word(foundLettersAsString); + + if (foundLettersAsWord && solution) { + if ((foundLettersAsWord.letterRepetitions(checkedLetter.innerText)) < (solution.letterRepetitions(checkedLetter.innerText))) { + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gold"; + + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen")) { + keyOFCheckedLetter.style.backgroundColor = "gold"; + keyOFCheckedLetter.style.borderColor = "gold"; + } + } else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + keyOFCheckedLetter.style.borderColor = "gray"; + } + } + } + } + } else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + } + } + + } else if (solution) { + + if (solution?.includesLetter(checkedLetter.innerText)) { + + if (checkedLetter.innerText === solution.name.toUpperCase()[i]) { //exact spot + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "SeaGreen"; + + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter) { + keyOFCheckedLetter.style.backgroundColor = "SeaGreen"; + keyOFCheckedLetter.style.borderColor = "SeaGreen"; + } + correctLetters++ + if (correctLetters === WORD_LENGTH) { + if (loggedInUser) { + updateStreak(loggedInUser.streak + 1); + renderUserData(users, "userDataRoot"); + } + setTimeout(win, 8000, users); + } else if (loggedInUser) { + updateStreak(0); + renderUserData(users, "userDataRoot"); + setTimeout(lose, 8000, users); + } + } else { + const foundLettersAsString: string = foundLetters.join(""); + const foundLettersAsWord = new Word(foundLettersAsString); + + if (foundLettersAsWord && solution) { + if ((foundLettersAsWord.letterRepetitions(checkedLetter.innerText)) < (solution.letterRepetitions(checkedLetter.innerText))) { + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gold"; + + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen")) { + keyOFCheckedLetter.style.backgroundColor = "gold"; + keyOFCheckedLetter.style.borderColor = "gold"; + } + } else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + keyOFCheckedLetter.style.borderColor = "gray"; + } + } + } + } + } else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + const keyOFCheckedLetter: HTMLDivElement | null = document.querySelector(`#${checkedLetter.innerText}`); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + } + } + } + } + + currentLine++; + if (currentLine < LAST_LINE + 1) currentCell = linesArray[currentLine][0]; // goes to the next line + + } else { + notValid(); + } + } + } catch (error: unknown) { + console.error(error); + } +} + + +function randomSolutionSelector(): Word | undefined { + try { + const randomIndex = getRandomInt(0, wordsArray.length - 1); + if (!randomIndex) throw new Error("random index not found"); + + const solution = wordsArray[randomIndex]; + + return solution; + + } catch (error) { + console.error(error); + return undefined; + } +} + + +function handleLogin(ev: any) { + try { + ev.preventDefault(); + + const name = ev.target.elements.name.value; + const password = ev.target.elements.password.value; + let streak = 0; + const loggedInUser = new User(name, password, streak); + users.push(loggedInUser); + ev.target.reset(); + handleSaveUsersData(loggedInUser); + } catch (error) { + console.error(error); + } +} + + +function renderUserData(users: User[], renderUserDataId: string): void { + try { + const userDataRoot = document.querySelector(`#${renderUserDataId}`); + if (userDataRoot) { + userDataRoot.innerHTML = ` +

                ${users[users.length - 1].name}

                +
                Current streak: ${users[users.length - 1].streak}
                + `; + } + } catch (error) { + console.error(error); + } +} + + +function handleSaveUsersData(loggedInUser: User) { + localStorage.setItem('users', JSON.stringify(users)); + localStorage.setItem('loggedInUser', JSON.stringify(loggedInUser)); +} + + +function getUsersDataFromStorage(): User[] | undefined { + try { + const usersString = localStorage.getItem("users"); + if (!usersString) throw new Error("Couldn't find users in storage"); + + const users = JSON.parse(usersString); + return users; + } catch (error) { + console.error(error); + return undefined; + } +} + + +function getLoggedInUserFromStorage(): User | undefined { + try { + const loggedInUserString = localStorage.getItem("loggedInUser"); + if (!loggedInUserString) throw new Error("Couldn't find logged-in user in storage"); + + const loggedInUser = JSON.parse(loggedInUserString); + return loggedInUser; + } catch (error) { + console.error(error); + return undefined; + } +} + +function updateStreak(streak: number) { + try { + if (loggedInUser) { + loggedInUser.streak = streak; + users.forEach(user => { + if (user.uid === loggedInUser?.uid) { + user.streak = streak; + } + }); + handleSaveUsersData(loggedInUser); + } + } catch (error) { + console.error(error); + } +} + +function win(users: User[]) { + const winRoot = document.querySelector("#winRoot"); + if (winRoot) winRoot.innerHTML = ` +
                +
                You Win!
                +
                Current streak: ${users[users.length - 1].streak}
                + Translation +
                + ` +} + +function lose(users: User[]) { + const loseRoot = document.querySelector("#loseRoot"); + if (loseRoot && solution) loseRoot.innerHTML = ` +
                +
                better luck next time... the solution was: ${solution.name}
                +
                Current streak: 0
                + Translation +
                + ` +} + +function notValid() { + const notValid = document.querySelector("#notValidRoot"); + if (notValid && solution) notValid.innerHTML = ` +
                Not in word list
                ` +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/design.md b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/design.md new file mode 100644 index 000000000..d51d118c6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/design.md @@ -0,0 +1,60 @@ + //Model// + + Entities: + + Word: + name: string, + id: string, + + +words-list: sorted by ABC + + + User: <> + id: string, + streak: number, + +users-list + + + + //View// + +log in page: + a form that requests a user name. + + +main page: + keyboard: with all the letters, ENTER button and BACK button. + playing board: composed of 6 lines (guesses), each line has 5 cells(for letters). + +rules and statistics page: + user name: + streak: shows the length of the user's current streak. + rules: scss only + + + + + //Control// + +insertLetterToCell(letter: string): void = iserts a letter to the current cell + +deleteLetterFromCell(): void = deletes a letter from the current cell + +enter(): void = checks if the word id valid and marks the cell with the suitable color( + "green" = the letter is in the right position; + "yellow" = the letter is included in the solution, but not in the right place; + "gray" = the letter is not on the solution) + +randomSolutionSelector = selects a random word from the words array + + + + + //Helpers// + +uid() = gives a unique id to the user / word + +getRandomInt() = selects a random integer for the random solution function + diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/control.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/control.js new file mode 100644 index 000000000..28ac5392f --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/control.js @@ -0,0 +1,281 @@ +var currentLine = 0; +var WORD_LENGTH = 5; +var LAST_CELL_IN_LINE = 4; +var LAST_LINE = 5; +var streak = 0; +var currentCell = linesArray[0][0]; +function insertLetterToCell(letter) { + try { + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText === "") { + currentCell.innerText = letter; + if (currentCell.nextElementSibling) { + currentCell = currentCell.nextElementSibling; //move to next cell + } + } + } + catch (error) { + console.error(error); + } +} +function deleteLetterFromCell() { + try { + if (linesArray[currentLine][0].innerText !== "") { + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText === "") { + currentCell = currentCell.previousElementSibling; + currentCell.innerText = ""; + } + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText !== "") { + currentCell.innerText = ""; + } + } + } + catch (error) { + console.error(error); + } +} +function enter() { + try { + if (linesArray[currentLine][LAST_CELL_IN_LINE].innerText !== "") { + var correctLetters = 0; + var _guess = []; + for (var i = 0; i < WORD_LENGTH; i++) { + _guess.push(linesArray[currentLine][i].innerText); + } + var guessName_1 = _guess.join("").toLowerCase(); + var guess = wordsArray.find(function (_a) { + var name = _a.name; + return name === guessName_1; + }); + var foundLetters = []; + if (guess) { + for (var i = 0; i < WORD_LENGTH; i++) { + var checkedLetter = linesArray[currentLine][i]; + if (checkedLetter !== linesArray[LAST_LINE][LAST_CELL_IN_LINE]) { + if (solution === null || solution === void 0 ? void 0 : solution.includesLetter(checkedLetter.innerText)) { + if (checkedLetter.innerText === solution.name.toUpperCase()[i]) { //exact spot + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "SeaGreen"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter) { + keyOFCheckedLetter.style.backgroundColor = "SeaGreen"; + keyOFCheckedLetter.style.borderColor = "SeaGreen"; + } + correctLetters++; + if (correctLetters === WORD_LENGTH) { + if (loggedInUser) { + updateStreak(loggedInUser.streak + 1); + renderUserData(users, "userDataRoot"); + } + setTimeout(win, 8000, users); + } + } + else { + var foundLettersAsString = foundLetters.join(""); + var foundLettersAsWord = new Word(foundLettersAsString); + if (foundLettersAsWord && solution) { + if ((foundLettersAsWord.letterRepetitions(checkedLetter.innerText)) < (solution.letterRepetitions(checkedLetter.innerText))) { + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gold"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen")) { + keyOFCheckedLetter.style.backgroundColor = "gold"; + keyOFCheckedLetter.style.borderColor = "gold"; + } + } + else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + keyOFCheckedLetter.style.borderColor = "gray"; + } + } + } + } + } + else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + } + } + } + else if (solution) { + if (solution === null || solution === void 0 ? void 0 : solution.includesLetter(checkedLetter.innerText)) { + if (checkedLetter.innerText === solution.name.toUpperCase()[i]) { //exact spot + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "SeaGreen"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter) { + keyOFCheckedLetter.style.backgroundColor = "SeaGreen"; + keyOFCheckedLetter.style.borderColor = "SeaGreen"; + } + correctLetters++; + if (correctLetters === WORD_LENGTH) { + if (loggedInUser) { + updateStreak(loggedInUser.streak + 1); + renderUserData(users, "userDataRoot"); + } + setTimeout(win, 8000, users); + } + else if (loggedInUser) { + updateStreak(0); + renderUserData(users, "userDataRoot"); + setTimeout(lose, 8000, users); + } + } + else { + var foundLettersAsString = foundLetters.join(""); + var foundLettersAsWord = new Word(foundLettersAsString); + if (foundLettersAsWord && solution) { + if ((foundLettersAsWord.letterRepetitions(checkedLetter.innerText)) < (solution.letterRepetitions(checkedLetter.innerText))) { + foundLetters.push(checkedLetter.innerText); + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gold"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen")) { + keyOFCheckedLetter.style.backgroundColor = "gold"; + keyOFCheckedLetter.style.borderColor = "gold"; + } + } + else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + keyOFCheckedLetter.style.borderColor = "gray"; + } + } + } + } + } + else { + checkedLetter.style.transform = "rotateX(360deg)"; + checkedLetter.style.backgroundColor = "gray"; + var keyOFCheckedLetter = document.querySelector("#" + checkedLetter.innerText); + if (keyOFCheckedLetter && (keyOFCheckedLetter.style.backgroundColor !== "SeaGreen" || "gold")) { + keyOFCheckedLetter.style.backgroundColor = "black"; + } + } + } + } + currentLine++; + if (currentLine < LAST_LINE + 1) + currentCell = linesArray[currentLine][0]; // goes to the next line + } + else { + notValid(); + } + } + } + catch (error) { + console.error(error); + } +} +function randomSolutionSelector() { + try { + var randomIndex = getRandomInt(0, wordsArray.length - 1); + if (!randomIndex) + throw new Error("random index not found"); + var solution = wordsArray[randomIndex]; + return solution; + } + catch (error) { + console.error(error); + return undefined; + } +} +function handleLogin(ev) { + try { + ev.preventDefault(); + var name = ev.target.elements.name.value; + var password = ev.target.elements.password.value; + var streak_1 = 0; + var loggedInUser = new User(name, password, streak_1); + users.push(loggedInUser); + ev.target.reset(); + handleSaveUsersData(loggedInUser); + } + catch (error) { + console.error(error); + } +} +function renderUserData(users, renderUserDataId) { + try { + var userDataRoot = document.querySelector("#" + renderUserDataId); + if (userDataRoot) { + userDataRoot.innerHTML = "\n

                " + users[users.length - 1].name + "

                \n
                Current streak: " + users[users.length - 1].streak + "
                \n "; + } + } + catch (error) { + console.error(error); + } +} +function handleSaveUsersData(loggedInUser) { + localStorage.setItem('users', JSON.stringify(users)); + localStorage.setItem('loggedInUser', JSON.stringify(loggedInUser)); +} +function getUsersDataFromStorage() { + try { + var usersString = localStorage.getItem("users"); + if (!usersString) + throw new Error("Couldn't find users in storage"); + var users = JSON.parse(usersString); + return users; + } + catch (error) { + console.error(error); + return undefined; + } +} +function getLoggedInUserFromStorage() { + try { + var loggedInUserString = localStorage.getItem("loggedInUser"); + if (!loggedInUserString) + throw new Error("Couldn't find logged-in user in storage"); + var loggedInUser = JSON.parse(loggedInUserString); + return loggedInUser; + } + catch (error) { + console.error(error); + return undefined; + } +} +function updateStreak(streak) { + try { + if (loggedInUser) { + loggedInUser.streak = streak; + users.forEach(function (user) { + if (user.uid === (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid)) { + user.streak = streak; + } + }); + handleSaveUsersData(loggedInUser); + } + } + catch (error) { + console.error(error); + } +} +function win(users) { + var winRoot = document.querySelector("#winRoot"); + if (winRoot) + winRoot.innerHTML = "\n
                \n
                You Win!
                \n
                Current streak: " + users[users.length - 1].streak + "
                \n Translation\n
                \n "; +} +function lose(users) { + var loseRoot = document.querySelector("#loseRoot"); + if (loseRoot && solution) + loseRoot.innerHTML = "\n
                \n
                better luck next time... the solution was: " + solution.name + "
                \n
                Current streak: 0
                \n Translation\n
                \n "; +} +function notValid() { + var notValid = document.querySelector("#notValidRoot"); + if (notValid && solution) + notValid.innerHTML = "\n
                Not in word list
                "; +} diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/dictionary.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/dictionary.js new file mode 100644 index 000000000..7a81a6cba --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/dictionary.js @@ -0,0 +1,1230 @@ +// const wordsArray: Word[] = []; +// wordsArray.push( //A +// new Word("aback"), +// new Word("abase"), +// new Word("abate"), +// new Word("abbey"), +// new Word("abbot"), +// new Word("abhor"), +// new Word("abide"), +// new Word("abled"), +// new Word("abode"), +// new Word("abort"), +// new Word("about"), +// new Word("above"), +// new Word("abuse"), +// new Word("abyss"), +// new Word("acorn"), +// new Word("acorn"), +// new Word("acrid"), +// new Word("actor"), +// new Word("acute"), +// new Word("adage"), +// new Word("adapt"), +// new Word("adept"), +// new Word("admin"), +// new Word("admit"), +// new Word("adobe"), +// new Word("adopt"), +// new Word("adorn"), +// new Word("adult"), +// new Word("affix"), +// new Word("afire"), +// new Word("afoot"), +// new Word("afoul"), +// new Word("after"), +// new Word("again"), +// new Word("agape"), +// new Word("agate"), +// new Word("agent"), +// new Word("agile"), +// new Word("aging"), +// new Word("aglow"), +// new Word("agony"), +// new Word("agree"), +// new Word("ahead"), +// new Word("aider"), +// new Word("aisle"), +// new Word("alarm"), +// new Word("album"), +// new Word("alert"), +// new Word("algae"), +// new Word("alibi"), +// new Word("alien"), +// new Word("align"), +// new Word("alike"), +// new Word("alive"), +// new Word("allay"), +// new Word("alley"), +// new Word("allot"), +// new Word("allow"), +// new Word("alloy"), +// new Word("aloft"), +// new Word("alone"), +// new Word("along"), +// new Word("aloof"), +// new Word("aloud"), +// new Word("alpha"), +// new Word("altar"), +// new Word("alter"), +// new Word("amass"), +// new Word("amaze"), +// new Word("amber"), +// new Word("amble"), +// new Word("amend"), +// new Word("amiss"), +// new Word("amity"), +// new Word("among"), +// new Word("ample"), +// new Word("amply"), +// new Word("amuse"), +// new Word("angel"), +// new Word("anger"), +// new Word("angle"), +// new Word("angry"), +// new Word("angst"), +// new Word("anime"), +// new Word("ankle"), +// new Word("annex"), +// new Word("annoy"), +// new Word("annul"), +// new Word("anode"), +// new Word("antic"), +// new Word("anvil"), +// new Word("aorta"), +// new Word("apart"), +// new Word("aphid"), +// new Word("aping"), +// new Word("apnea"), +// new Word("apple"), +// new Word("apply"), +// new Word("apron"), +// new Word("aptly"), +// new Word("arbor"), +// new Word("ardor"), +// new Word("arena"), +// new Word("argue"), +// new Word("arise"), +// new Word("armor"), +// new Word("aroma"), +// new Word("arose"), +// new Word("array"), +// new Word("arrow"), +// new Word("arson"), +// new Word("artsy"), +// new Word("ascot"), +// new Word("ashen"), +// new Word("aside"), +// new Word("askew"), +// new Word("assay"), +// new Word("asset"), +// new Word("atoll"), +// new Word("atone"), +// new Word("attic"), +// new Word("audio"), +// new Word("audit"), +// new Word("augur"), +// new Word("aunty"), +// new Word("avail"), +// new Word("avert"), +// new Word("avian"), +// new Word("avoid"), +// new Word("await"), +// new Word("awake"), +// new Word("award"), +// new Word("aware"), +// new Word("awash"), +// new Word("awful"), +// new Word("awoke"), +// new Word("axial"), +// new Word("axiom"), +// new Word("axion"), +// new Word("azure"), +// ) +// wordsArray.push( //B +// new Word("bacon"), +// new Word("badge"), +// new Word("badly"), +// new Word("bagel"), +// new Word("baggy"), +// new Word("baker"), +// new Word("baler"), +// new Word("balmy"), +// new Word("banal"), +// new Word("banjo"), +// new Word("barge"), +// new Word("baron"), +// new Word("basal"), +// new Word("basic"), +// new Word("basil"), +// new Word("basin"), +// new Word("basis"), +// new Word("baste"), +// new Word("batch"), +// new Word("bathe"), +// new Word("baton"), +// new Word("batty"), +// new Word("bawdy"), +// new Word("bayou"), +// new Word("beach"), +// new Word("beady"), +// new Word("beard"), +// new Word("beast"), +// new Word("beech"), +// new Word("beefy"), +// new Word("befit"), +// new Word("began"), +// new Word("begat"), +// new Word("beget"), +// new Word("begin"), +// new Word("begun"), +// new Word("being"), +// new Word("belch"), +// new Word("belie"), +// new Word("belle"), +// new Word("belly"), +// new Word("below"), +// new Word("bench"), +// new Word("beret"), +// new Word("berry"), +// new Word("berth"), +// new Word("beset"), +// new Word("betel"), +// new Word("bevel"), +// new Word("bezel"), +// new Word("bible"), +// new Word("bicep"), +// new Word("biddy"), +// new Word("bigot"), +// new Word("bilge"), +// new Word("billy"), +// new Word("binge"), +// new Word("bingo"), +// new Word("biome"), +// new Word("birch"), +// new Word("birth"), +// new Word("bison"), +// new Word("bitty"), +// new Word("black"), +// new Word("blade"), +// new Word("blame"), +// new Word("bland"), +// new Word("blank"), +// new Word("blare"), +// new Word("blast"), +// new Word("blaze"), +// new Word("bleak"), +// new Word("bleat"), +// new Word("bleed"), +// new Word("bleep"), +// new Word("blend"), +// new Word("bless"), +// new Word("blimp"), +// new Word("blind"), +// new Word("blink"), +// new Word("bliss"), +// new Word("blitz"), +// new Word("bloat"), +// new Word("block"), +// new Word("bloke"), +// new Word("blond"), +// new Word("blood"), +// new Word("bloom"), +// new Word("blown"), +// new Word("bluer"), +// new Word("bluff"), +// new Word("blunt"), +// new Word("blurb"), +// new Word("blurt"), +// new Word("blush"), +// new Word("board"), +// new Word("boast"), +// new Word("bobby"), +// new Word("boney"), +// new Word("bongo"), +// new Word("bonus"), +// new Word("booby"), +// new Word("boost"), +// new Word("booth"), +// new Word("booty"), +// new Word("booze"), +// new Word("boozy"), +// new Word("borax"), +// new Word("borne"), +// new Word("bosom"), +// new Word("bossy"), +// new Word("botch"), +// new Word("bough"), +// new Word("boule"), +// new Word("bound"), +// new Word("bowel"), +// new Word("boxer"), +// new Word("brace"), +// new Word("braid"), +// new Word("brain"), +// new Word("brake"), +// new Word("brand"), +// new Word("brash"), +// new Word("brass"), +// new Word("brave"), +// new Word("bravo"), +// new Word("brawl"), +// new Word("brawn"), +// new Word("bread"), +// new Word("break"), +// new Word("breed"), +// new Word("briar"), +// new Word("bribe"), +// new Word("brick"), +// new Word("bride"), +// new Word("brief"), +// new Word("brine"), +// new Word("bring"), +// new Word("brink"), +// new Word("briny"), +// new Word("brisk"), +// new Word("broad"), +// new Word("broil"), +// new Word("broke"), +// new Word("brood"), +// new Word("brook"), +// new Word("broom"), +// new Word("broth"), +// new Word("brown"), +// new Word("brunt"), +// new Word("brush"), +// new Word("brute"), +// new Word("buddy"), +// new Word("budge"), +// new Word("buggy"), +// new Word("bugle"), +// new Word("build"), +// new Word("built"), +// new Word("bulge"), +// new Word("bulky"), +// new Word("bully"), +// new Word("bunch"), +// new Word("bunny"), +// new Word("burly"), +// new Word("burnt"), +// new Word("burst"), +// new Word("bused"), +// new Word("bushy"), +// new Word("butch"), +// new Word("butte"), +// new Word("buxom"), +// new Word("buyer"), +// new Word("bylaw"), +// ) +// wordsArray.push( //C +// new Word("cabal"), +// new Word("cabby"), +// new Word("cabin"), +// new Word("cable"), +// new Word("cacao"), +// new Word("cache"), +// new Word("cacti"), +// new Word("caddy"), +// new Word("cadet"), +// new Word("cagey"), +// new Word("cairn"), +// new Word("camel"), +// new Word("cameo"), +// new Word("canal"), +// new Word("candy"), +// new Word("canny"), +// new Word("canoe"), +// new Word("canon"), +// new Word("caper"), +// new Word("caput"), +// new Word("carat"), +// new Word("cargo"), +// new Word("cargo"), +// new Word("carol"), +// new Word("carry"), +// new Word("carve"), +// new Word("caste"), +// new Word("catch"), +// new Word("cater"), +// new Word("catty"), +// new Word("caulk"), +// new Word("cause"), +// new Word("cavil"), +// new Word("cease"), +// new Word("cedar"), +// new Word("cello"), +// new Word("chafe"), +// new Word("chaff"), +// new Word("chain"), +// new Word("chair"), +// new Word("chalk"), +// new Word("champ"), +// new Word("chant"), +// new Word("chaos"), +// new Word("chard"), +// new Word("charm"), +// new Word("chart"), +// new Word("chase"), +// new Word("chasm"), +// new Word("cheap"), +// new Word("cheat"), +// new Word("check"), +// new Word("cheek"), +// new Word("cheer"), +// new Word("chess"), +// new Word("chest"), +// new Word("chick"), +// new Word("chide"), +// new Word("chief"), +// new Word("child"), +// new Word("chili"), +// new Word("chill"), +// new Word("chime"), +// new Word("china"), +// new Word("chirp"), +// new Word("chock"), +// new Word("choir"), +// new Word("choke"), +// new Word("chord"), +// new Word("chore"), +// new Word("chose"), +// new Word("chuck"), +// new Word("chump"), +// new Word("chunk"), +// new Word("churn"), +// new Word("chute"), +// new Word("cider"), +// new Word("cigar"), +// new Word("cinch"), +// new Word("circa"), +// new Word("civic"), +// new Word("civil"), +// new Word("clack"), +// new Word("claim"), +// new Word("clamp"), +// new Word("clang"), +// new Word("clank"), +// new Word("clash"), +// new Word("clasp"), +// new Word("class"), +// new Word("clean"), +// new Word("clear"), +// new Word("cleat"), +// new Word("cleft"), +// new Word("clerk"), +// new Word("click"), +// new Word("cliff"), +// new Word("climb"), +// new Word("cling"), +// new Word("clink"), +// new Word("cloak"), +// new Word("clock"), +// new Word("clone"), +// new Word("close"), +// new Word("cloth"), +// new Word("cloud"), +// new Word("clout"), +// new Word("clove"), +// new Word("clown"), +// new Word("cluck"), +// new Word("clued"), +// new Word("clump"), +// new Word("clung"), +// new Word("coach"), +// new Word("coast"), +// new Word("cobra"), +// new Word("cocoa"), +// new Word("colon"), +// new Word("color"), +// new Word("comet"), +// new Word("comfy"), +// new Word("comic"), +// new Word("comma"), +// new Word("conch"), +// new Word("condo"), +// new Word("conic"), +// new Word("copse"), +// new Word("coral"), +// new Word("corer"), +// new Word("corny"), +// new Word("couch"), +// new Word("cough"), +// new Word("could"), +// new Word("count"), +// new Word("coupe"), +// new Word("court"), +// new Word("coven"), +// new Word("cover"), +// new Word("covet"), +// new Word("covey"), +// new Word("cower"), +// new Word("coyly"), +// new Word("crack"), +// new Word("craft"), +// new Word("cramp"), +// new Word("crane"), +// new Word("crank"), +// new Word("crash"), +// new Word("crass"), +// new Word("crate"), +// new Word("crave"), +// new Word("crawl"), +// new Word("craze"), +// new Word("crazy"), +// new Word("creak"), +// new Word("cream"), +// new Word("credo"), +// new Word("creed"), +// new Word("creek"), +// new Word("creep"), +// new Word("creme"), +// new Word("crepe"), +// new Word("crept"), +// new Word("cress"), +// new Word("crest"), +// new Word("crick"), +// new Word("cried"), +// new Word("crier"), +// new Word("crime"), +// new Word("crimp"), +// new Word("crisp"), +// new Word("croak"), +// new Word("crock"), +// new Word("crone"), +// new Word("crony"), +// new Word("crook"), +// new Word("cross"), +// new Word("croup"), +// new Word("crowd"), +// new Word("crown"), +// new Word("crude"), +// new Word("cruel"), +// new Word("crumb"), +// new Word("crump"), +// new Word("crush"), +// new Word("crust"), +// new Word("crypt"), +// new Word("cubic"), +// new Word("cumin"), +// new Word("curio"), +// new Word("curly"), +// new Word("curry"), +// new Word("curse"), +// new Word("curve"), +// new Word("curvy"), +// new Word("cutie"), +// new Word("cyber"), +// new Word("cycle"), +// new Word("cynic"), +// ) +// wordsArray.push( //D +// new Word("daddy"), +// new Word("daily"), +// new Word("dairy"), +// new Word("daisy"), +// new Word("dally"), +// new Word("dance"), +// new Word("dandy"), +// new Word("datum"), +// new Word("daunt"), +// new Word("dealt"), +// new Word("death"), +// new Word("debar"), +// new Word("debit"), +// new Word("debug"), +// new Word("debut"), +// new Word("decal"), +// new Word("decay"), +// new Word("decor"), +// new Word("decoy"), +// new Word("decry"), +// new Word("defer"), +// new Word("deign"), +// new Word("deity"), +// new Word("delay"), +// new Word("delta"), +// new Word("delve"), +// new Word("demon"), +// new Word("demur"), +// new Word("denim"), +// new Word("dense"), +// new Word("depot"), +// new Word("depth"), +// new Word("derby"), +// new Word("deter"), +// new Word("detox"), +// new Word("deuce"), +// new Word("devil"), +// new Word("diary"), +// new Word("dicey"), +// new Word("digit"), +// new Word("dilly"), +// new Word("dimly"), +// new Word("diner"), +// new Word("dingo"), +// new Word("dingy"), +// new Word("diode"), +// new Word("dirge"), +// new Word("dirty"), +// new Word("disco"), +// new Word("ditch"), +// new Word("ditto"), +// new Word("ditty"), +// new Word("diver"), +// new Word("dizzy"), +// new Word("dodge"), +// new Word("dodgy"), +// new Word("dogma"), +// new Word("doing"), +// new Word("donor"), +// new Word("donut"), +// new Word("dopey"), +// new Word("doubt"), +// new Word("dough"), +// new Word("dowdy"), +// new Word("dowel"), +// new Word("downy"), +// new Word("dowry"), +// new Word("dozen"), +// new Word("draft"), +// new Word("drain"), +// new Word("drake"), +// new Word("drama"), +// new Word("drank"), +// new Word("drape"), +// new Word("drawl"), +// new Word("drawn"), +// new Word("dread"), +// new Word("dream"), +// new Word("dress"), +// new Word("dried"), +// new Word("drier"), +// new Word("drift"), +// new Word("drill"), +// new Word("drink"), +// new Word("drive"), +// new Word("droit"), +// new Word("droll"), +// new Word("drone"), +// new Word("drool"), +// new Word("droop"), +// new Word("dross"), +// new Word("drove"), +// new Word("drown"), +// new Word("druid"), +// new Word("drunk"), +// new Word("dryer"), +// new Word("dryly"), +// new Word("duchy"), +// new Word("dully"), +// new Word("dummy"), +// new Word("dumpy"), +// new Word("dunce"), +// new Word("dusky"), +// new Word("dusty"), +// new Word("dutch"), +// new Word("duvet"), +// new Word("dwarf"), +// new Word("dwell"), +// new Word("dwelt"), +// new Word("dying"), +// ) +// wordsArray.push( //E +// new Word("eager"), +// new Word("eagle"), +// new Word("early"), +// new Word("earth"), +// new Word("easel"), +// new Word("eaten"), +// new Word("eater"), +// new Word("ebony"), +// new Word("eclat"), +// new Word("edict"), +// new Word("edify"), +// new Word("eerie"), +// new Word("egret"), +// new Word("eight"), +// new Word("eject"), +// new Word("eking"), +// new Word("elate"), +// new Word("elbow"), +// new Word("elder"), +// new Word("elect"), +// new Word("elegy"), +// new Word("elfin"), +// new Word("elide"), +// new Word("elite"), +// new Word("elope"), +// new Word("elude"), +// new Word("email"), +// new Word("embed"), +// new Word("ember"), +// new Word("emcee"), +// new Word("empty"), +// new Word("enact"), +// new Word("endow"), +// new Word("enema"), +// new Word("enemy"), +// new Word("enjoy"), +// new Word("ennui"), +// new Word("ensue"), +// new Word("enter"), +// new Word("entry"), +// new Word("envoy"), +// new Word("epoch"), +// new Word("epoxy"), +// new Word("equal"), +// new Word("equip"), +// new Word("erase"), +// new Word("erect"), +// new Word("erode"), +// new Word("error"), +// new Word("erupt"), +// new Word("essay"), +// new Word("ester"), +// new Word("ether"), +// new Word("ethic"), +// new Word("ethos"), +// new Word("etude"), +// new Word("evade"), +// new Word("event"), +// new Word("every"), +// new Word("evict"), +// new Word("evoke"), +// new Word("exact"), +// new Word("exalt"), +// new Word("excel"), +// new Word("exert"), +// new Word("exile"), +// new Word("exist"), +// new Word("expel"), +// new Word("extol"), +// new Word("extra"), +// new Word("exult"), +// new Word("eying"), +// ) +// wordsArray.push( //F +// new Word("fable"), +// new Word("facet"), +// new Word("faint"), +// new Word("fairy"), +// new Word("faith"), +// new Word("false"), +// new Word("fancy"), +// new Word("fanny"), +// new Word("farce"), +// new Word("fatal"), +// new Word("fatty"), +// new Word("fault"), +// new Word("fauna"), +// new Word("favor"), +// new Word("feast"), +// new Word("fecal"), +// new Word("feign"), +// new Word("fella"), +// new Word("felon"), +// new Word("femme"), +// new Word("femur"), +// new Word("fence"), +// new Word("feral"), +// new Word("ferry"), +// new Word("fetal"), +// new Word("fetch"), +// new Word("fetid"), +// new Word("fetus"), +// new Word("fever"), +// new Word("fewer"), +// new Word("fiber"), +// new Word("ficus"), +// new Word("field"), +// new Word("fiend"), +// new Word("fiery"), +// new Word("fifth"), +// new Word("fifty"), +// new Word("fight"), +// new Word("filer"), +// new Word("filet"), +// new Word("filly"), +// new Word("filmy"), +// new Word("filth"), +// new Word("final"), +// new Word("finch"), +// new Word("finer"), +// new Word("first"), +// new Word("fishy"), +// new Word("fixer"), +// new Word("fizzy"), +// new Word("fjord"), +// new Word("flack"), +// new Word("flail"), +// new Word("flair"), +// new Word("flake"), +// new Word("flaky"), +// new Word("flame"), +// new Word("flank"), +// new Word("flare"), +// new Word("flare"), +// new Word("flash"), +// new Word("flask"), +// new Word("fleck"), +// new Word("fleet"), +// new Word("flesh"), +// new Word("flick"), +// new Word("flier"), +// new Word("fling"), +// new Word("flint"), +// new Word("flirt"), +// new Word("float"), +// new Word("flock"), +// new Word("flood"), +// new Word("floor"), +// new Word("flora"), +// new Word("floss"), +// new Word("flour"), +// new Word("flout"), +// new Word("flown"), +// new Word("fluff"), +// new Word("fluid"), +// new Word("fluke"), +// new Word("flume"), +// new Word("flung"), +// new Word("flunk"), +// new Word("flush"), +// new Word("flute"), +// new Word("flyer"), +// new Word("foamy"), +// new Word("focal"), +// new Word("focus"), +// new Word("foggy"), +// new Word("foist"), +// new Word("folio"), +// new Word("folly"), +// new Word("foray"), +// new Word("force"), +// new Word("forge"), +// new Word("forgo"), +// new Word("forte"), +// new Word("forth"), +// new Word("forty"), +// new Word("forum"), +// new Word("found"), +// new Word("foyer"), +// new Word("frail"), +// new Word("frame"), +// new Word("frank"), +// new Word("fraud"), +// new Word("freak"), +// new Word("freed"), +// new Word("freer"), +// new Word("fresh"), +// new Word("friar"), +// new Word("fried"), +// new Word("frill"), +// new Word("frisk"), +// new Word("fritz"), +// new Word("frock"), +// new Word("frond"), +// new Word("front"), +// new Word("frost"), +// new Word("froth"), +// new Word("frown"), +// new Word("froze"), +// new Word("fruit"), +// new Word("fudge"), +// new Word("fugue"), +// new Word("fully"), +// new Word("fungi"), +// new Word("funky"), +// new Word("funny"), +// new Word("furor"), +// new Word("furry"), +// new Word("fussy"), +// new Word("fuzzy"), +// ) +// wordsArray.push( //G +// new Word("gaffe"), +// new Word("gaily"), +// new Word("gamer"), +// new Word("gamma"), +// new Word("gamut"), +// new Word("gassy"), +// new Word("gaudy"), +// new Word("gauge"), +// new Word("gaunt"), +// new Word("gauze"), +// new Word("gavel"), +// new Word("gawky"), +// new Word("gayer"), +// new Word("gayly"), +// new Word("gazer"), +// new Word("gecko"), +// new Word("geeky"), +// new Word("geese"), +// new Word("genie"), +// new Word("genre"), +// new Word("ghost"), +// new Word("ghoul"), +// new Word("giant"), +// new Word("giddy"), +// new Word("gipsy"), +// new Word("girly"), +// new Word("girth"), +// new Word("given"), +// new Word("giver"), +// new Word("glade"), +// new Word("gland"), +// new Word("glare"), +// new Word("glass"), +// new Word("glaze"), +// new Word("gleam"), +// new Word("glean"), +// new Word("glide"), +// new Word("glint"), +// new Word("gloat"), +// new Word("globe"), +// new Word("gloom"), +// new Word("glory"), +// new Word("gloss"), +// new Word("glove"), +// new Word("glyph"), +// new Word("gnash"), +// new Word("gnome"), +// new Word("godly"), +// new Word("going"), +// new Word("golem"), +// new Word("golly"), +// new Word("gonad"), +// new Word("goner"), +// new Word("goody"), +// new Word("gooey"), +// new Word("goofy"), +// new Word("goose"), +// new Word("gorge"), +// new Word("gouge"), +// new Word("gourd"), +// new Word("grace"), +// new Word("grade"), +// new Word("graft"), +// new Word("grail"), +// new Word("grain"), +// new Word("grand"), +// new Word("grant"), +// new Word("grape"), +// new Word("graph"), +// new Word("grasp"), +// new Word("grass"), +// new Word("grate"), +// new Word("grave"), +// new Word("gravy"), +// new Word("graze"), +// new Word("great"), +// new Word("greed"), +// new Word("green"), +// new Word("greet"), +// new Word("grief"), +// new Word("grill"), +// new Word("grime"), +// new Word("grimy"), +// new Word("grind"), +// new Word("gripe"), +// new Word("groan"), +// new Word("groin"), +// new Word("groom"), +// new Word("grope"), +// new Word("gross"), +// new Word("group"), +// new Word("grout"), +// new Word("grove"), +// new Word("growl"), +// new Word("grown"), +// new Word("gruel"), +// new Word("gruff"), +// new Word("grunt"), +// new Word("guard"), +// new Word("guava"), +// new Word("guess"), +// new Word("guest"), +// new Word("guide"), +// new Word("guild"), +// new Word("guile"), +// new Word("guilt"), +// new Word("guise"), +// new Word("gulch"), +// new Word("gully"), +// new Word("gumbo"), +// new Word("gummy"), +// new Word("guppy"), +// new Word("gusto"), +// new Word("gusty"), +// new Word("gypsy"), +// ) +// wordsArray.push( //H +// new Word("habit"), +// new Word("hairy"), +// new Word("halve"), +// new Word("handy"), +// new Word("happy"), +// new Word("hardy"), +// new Word("harem"), +// new Word("harpy"), +// new Word("harry"), +// new Word("harsh"), +// new Word("haste"), +// new Word("hasty"), +// new Word("hatch"), +// new Word("hater"), +// new Word("haunt"), +// new Word("haute"), +// new Word("haven"), +// new Word("havoc"), +// new Word("hazel"), +// new Word("heady"), +// new Word("heard"), +// new Word("heart"), +// new Word("heath"), +// new Word("heave"), +// new Word("heavy"), +// new Word("hedge"), +// new Word("hefty"), +// new Word("heist"), +// new Word("helix"), +// new Word("hello"), +// new Word("hence"), +// new Word("heron"), +// new Word("hilly"), +// new Word("hinge"), +// new Word("hippo"), +// new Word("hippy"), +// new Word("hitch"), +// new Word("hoard"), +// new Word("hobby"), +// new Word("hoist"), +// new Word("holly"), +// new Word("homer"), +// new Word("honey"), +// new Word("honor"), +// new Word("horde"), +// new Word("horny"), +// new Word("horse"), +// new Word("hotel"), +// new Word("hotly"), +// new Word("hound"), +// new Word("house"), +// new Word("hovel"), +// new Word("hover"), +// new Word("howdy"), +// new Word("human"), +// new Word("humid"), +// new Word("humor"), +// new Word("humph"), +// new Word("humus"), +// new Word("hunch"), +// new Word("hunky"), +// new Word("hurry"), +// new Word("husky"), +// new Word("hussy"), +// new Word("hutch"), +// new Word("hydro"), +// new Word("hyena"), +// new Word("hymen"), +// new Word("hyper"), +// ) +// wordsArray.push( //I +// new Word("icily"), +// new Word("icing"), +// new Word("ideal"), +// new Word("idiom"), +// new Word("idiot"), +// new Word("idler"), +// new Word("idyll"), +// new Word("igloo"), +// new Word("iliac"), +// new Word("image"), +// new Word("imbue"), +// new Word("impel"), +// new Word("imply"), +// new Word("inane"), +// new Word("inbox"), +// new Word("incur"), +// new Word("index"), +// new Word("inept"), +// new Word("inert"), +// new Word("infer"), +// new Word("ingot"), +// new Word("inlay"), +// new Word("inlet"), +// new Word("inner"), +// new Word("input"), +// new Word("inter"), +// new Word("intro"), +// new Word("ionic"), +// new Word("irate"), +// new Word("irony"), +// new Word("islet"), +// new Word("issue"), +// new Word("itchy"), +// new Word("ivory"), +// ) +// wordsArray.push( //J +// new Word("jaunt"), +// new Word("jazzy"), +// new Word("jelly"), +// new Word("jerky"), +// new Word("jetty"), +// new Word("jewel"), +// new Word("jiffy"), +// new Word("joint"), +// new Word("joist"), +// new Word("joker"), +// new Word("jolly"), +// new Word("joust"), +// new Word("judge"), +// new Word("juice"), +// new Word("juicy"), +// new Word("jumbo"), +// new Word("jumpy"), +// new Word("junta"), +// new Word("junto"), +// new Word("juror"), +// ) +// wordsArray.push( //L +// new Word("kappa"), +// new Word("karma"), +// new Word("kayak"), +// new Word("kebab"), +// new Word("khaki"), +// new Word("kinky"), +// new Word("kiosk"), +// new Word("kitty"), +// new Word("knack"), +// new Word("knave"), +// new Word("knead"), +// new Word("kneed"), +// new Word("kneel"), +// new Word("knelt"), +// new Word("knife"), +// new Word("knock"), +// new Word("knoll"), +// new Word("known"), +// new Word("koala"), +// new Word("krill"), +// ) +// wordsArray.push( //L +// new Word("label"), +// new Word("labor"), +// new Word("laden"), +// new Word("ladle"), +// new Word("lager"), +// new Word("lance"), +// new Word("lanky"), +// new Word("lapel"), +// new Word("lapse"), +// new Word("large"), +// new Word("larva"), +// new Word("lasso"), +// new Word("latch"), +// new Word("later"), +// new Word("lathe"), +// new Word("latte"), +// new Word("laugh"), +// new Word("layer"), +// new Word("leach"), +// new Word("leafy"), +// new Word("leaky"), +// new Word("leant"), +// new Word("leapt"), +// new Word("learn"), +// new Word("lease"), +// new Word("leash"), +// new Word("least"), +// new Word("leave"), +// new Word("ledge"), +// new Word("leech"), +// new Word("leery"), +// new Word("lefty"), +// new Word("legal"), +// new Word("leggy"), +// new Word("lemon"), +// new Word("lemur"), +// new Word("leper"), +// new Word("level"), +// new Word("lever"), +// new Word("libel"), +// new Word("liege"), +// new Word("light"), +// new Word("liken"), +// new Word("lilac"), +// new Word("limbo"), +// new Word("limit"), +// new Word("linen"), +// new Word("liner"), +// new Word("lingo"), +// new Word("lipid"), +// new Word("lithe"), +// new Word("liver"), +// new Word("livid"), +// new Word("llama"), +// new Word("loamy"), +// new Word("loath"), +// new Word("lobby"), +// new Word("local"), +// new Word("locus"), +// new Word("lodge"), +// new Word("lofty"), +// new Word("logic"), +// new Word("login"), +// new Word("loopy"), +// new Word("loose"), +// new Word("lorry"), +// new Word("loser"), +// new Word("louse"), +// new Word("lousy"), +// new Word("lover"), +// new Word("lower"), +// new Word("lowly"), +// new Word("loyal"), +// new Word("lucid"), +// new Word("lucky"), +// new Word("lumen"), +// new Word("lumpy"), +// new Word("lunar"), +// new Word("lunch"), +// new Word("lunge"), +// new Word("lupus"), +// new Word("lurch"), +// new Word("lurid"), +// new Word("lusty"), +// new Word("lying"), +// new Word("lymph"), +// new Word("lyric"), +// ) +// // wordsArray.push( //M +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // new Word("_____"), +// // ) +// // macaw macho macro madam madly mafia magic magma maize major maker mambo mamma mammy manga mange mango mangy mania manic manly manor maple march marry marsh mason masse match matey mauve maxim maybe mayor mealy meant meaty mecca medal media medic melee melon mercy merge merit merry metal meter metro micro midge midst might milky mimic mince miner minim minor minty minus mirth miser missy mocha modal model modem mogul moist molar moldy money month moody moose moral moron morph mossy motel motif motor motto moult mound mount mourn mouse mouth mover movie mower mucky mucus muddy mulch mummy munch mural murky mushy music musky musty myrrh diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/helpers.js new file mode 100644 index 000000000..778fe1c15 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/helpers.js @@ -0,0 +1,8 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} +function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; +} diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/index.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/index.js new file mode 100644 index 000000000..06b9a6df0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/index.js @@ -0,0 +1,11 @@ +var solution = randomSolutionSelector(); +console.log("solution:", solution === null || solution === void 0 ? void 0 : solution.name); +var _users = getUsersDataFromStorage(); +var _loggedInUser = getLoggedInUserFromStorage(); +if (_users) { + users.push.apply(users, _users); +} +if (_loggedInUser) { + loggedInUser = _loggedInUser; +} +renderUserData(users, "userDataRoot"); diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/log-in.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/log-in.js new file mode 100644 index 000000000..41c2b5223 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/log-in.js @@ -0,0 +1,4 @@ +var __users = getUsersDataFromStorage(); +if (__users) { + users.push.apply(users, __users); +} diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/model.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/model.js new file mode 100644 index 000000000..51e379156 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/model.js @@ -0,0 +1,82 @@ +var Word = /** @class */ (function () { + function Word(name) { + this.name = name; + this.uid = uid(); + } + Word.prototype.includesLetter = function (letter) { + return this.name.toUpperCase().includes(letter); + }; + Word.prototype.letterRepetitions = function (letter) { + var repetitions = 0; + for (var i = 0; i < WORD_LENGTH; i++) { + if (this.name.toUpperCase()[i] === letter) + repetitions++; + } + return repetitions; + }; + return Word; +}()); +////////////////////////////////////////////////////////////////////////// +var User = /** @class */ (function () { + function User(name, password, streak) { + this.name = name; + this.password = password; + this.streak = streak; + this.uid = uid(); + } + return User; +}()); +///////////////////////////////////////////////////////////////////////// +var loggedInUser = null; +var users = []; +var wordsArray = []; +wordsArray.push(//A +new Word("aback"), new Word("abase"), new Word("abate"), new Word("abbey"), new Word("abbot"), new Word("abhor"), new Word("abide"), new Word("abled"), new Word("abode"), new Word("abort"), new Word("about"), new Word("above"), new Word("abuse"), new Word("abyss"), new Word("acorn"), new Word("acorn"), new Word("acrid"), new Word("actor"), new Word("acute"), new Word("adage"), new Word("adapt"), new Word("adept"), new Word("admin"), new Word("admit"), new Word("adobe"), new Word("adopt"), new Word("adorn"), new Word("adult"), new Word("affix"), new Word("afire"), new Word("afoot"), new Word("afoul"), new Word("after"), new Word("again"), new Word("agape"), new Word("agate"), new Word("agent"), new Word("agile"), new Word("aging"), new Word("aglow"), new Word("agony"), new Word("agree"), new Word("ahead"), new Word("aider"), new Word("aisle"), new Word("alarm"), new Word("album"), new Word("alert"), new Word("algae"), new Word("alibi"), new Word("alien"), new Word("align"), new Word("alike"), new Word("alive"), new Word("allay"), new Word("alley"), new Word("allot"), new Word("allow"), new Word("alloy"), new Word("aloft"), new Word("alone"), new Word("along"), new Word("aloof"), new Word("aloud"), new Word("alpha"), new Word("altar"), new Word("alter"), new Word("amass"), new Word("amaze"), new Word("amber"), new Word("amble"), new Word("amend"), new Word("amiss"), new Word("amity"), new Word("among"), new Word("ample"), new Word("amply"), new Word("amuse"), new Word("angel"), new Word("anger"), new Word("angle"), new Word("angry"), new Word("angst"), new Word("anime"), new Word("ankle"), new Word("annex"), new Word("annoy"), new Word("annul"), new Word("anode"), new Word("antic"), new Word("anvil"), new Word("aorta"), new Word("apart"), new Word("aphid"), new Word("aping"), new Word("apnea"), new Word("apple"), new Word("apply"), new Word("apron"), new Word("aptly"), new Word("arbor"), new Word("ardor"), new Word("arena"), new Word("argue"), new Word("arise"), new Word("armor"), new Word("aroma"), new Word("arose"), new Word("array"), new Word("arrow"), new Word("arson"), new Word("artsy"), new Word("ascot"), new Word("ashen"), new Word("aside"), new Word("askew"), new Word("assay"), new Word("asset"), new Word("atoll"), new Word("atone"), new Word("attic"), new Word("audio"), new Word("audit"), new Word("augur"), new Word("aunty"), new Word("avail"), new Word("avert"), new Word("avian"), new Word("avoid"), new Word("await"), new Word("awake"), new Word("award"), new Word("aware"), new Word("awash"), new Word("awful"), new Word("awoke"), new Word("axial"), new Word("axiom"), new Word("axion"), new Word("azure")); +wordsArray.push(//B +new Word("bacon"), new Word("badge"), new Word("badly"), new Word("bagel"), new Word("baggy"), new Word("baker"), new Word("baler"), new Word("balmy"), new Word("banal"), new Word("banjo"), new Word("barge"), new Word("baron"), new Word("basal"), new Word("basic"), new Word("basil"), new Word("basin"), new Word("basis"), new Word("baste"), new Word("batch"), new Word("bathe"), new Word("baton"), new Word("batty"), new Word("bawdy"), new Word("bayou"), new Word("beach"), new Word("beady"), new Word("beard"), new Word("beast"), new Word("beech"), new Word("beefy"), new Word("befit"), new Word("began"), new Word("begat"), new Word("beget"), new Word("begin"), new Word("begun"), new Word("being"), new Word("belch"), new Word("belie"), new Word("belle"), new Word("belly"), new Word("below"), new Word("bench"), new Word("beret"), new Word("berry"), new Word("berth"), new Word("beset"), new Word("betel"), new Word("bevel"), new Word("bezel"), new Word("bible"), new Word("bicep"), new Word("biddy"), new Word("bigot"), new Word("bilge"), new Word("billy"), new Word("binge"), new Word("bingo"), new Word("biome"), new Word("birch"), new Word("birth"), new Word("bison"), new Word("bitty"), new Word("black"), new Word("blade"), new Word("blame"), new Word("bland"), new Word("blank"), new Word("blare"), new Word("blast"), new Word("blaze"), new Word("bleak"), new Word("bleat"), new Word("bleed"), new Word("bleep"), new Word("blend"), new Word("bless"), new Word("blimp"), new Word("blind"), new Word("blink"), new Word("bliss"), new Word("blitz"), new Word("bloat"), new Word("block"), new Word("bloke"), new Word("blond"), new Word("blood"), new Word("bloom"), new Word("blown"), new Word("bluer"), new Word("bluff"), new Word("blunt"), new Word("blurb"), new Word("blurt"), new Word("blush"), new Word("board"), new Word("boast"), new Word("bobby"), new Word("boney"), new Word("bongo"), new Word("bonus"), new Word("booby"), new Word("boost"), new Word("booth"), new Word("booty"), new Word("booze"), new Word("boozy"), new Word("borax"), new Word("borne"), new Word("bosom"), new Word("bossy"), new Word("botch"), new Word("bough"), new Word("boule"), new Word("bound"), new Word("bowel"), new Word("boxer"), new Word("brace"), new Word("braid"), new Word("brain"), new Word("brake"), new Word("brand"), new Word("brash"), new Word("brass"), new Word("brave"), new Word("bravo"), new Word("brawl"), new Word("brawn"), new Word("bread"), new Word("break"), new Word("breed"), new Word("briar"), new Word("bribe"), new Word("brick"), new Word("bride"), new Word("brief"), new Word("brine"), new Word("bring"), new Word("brink"), new Word("briny"), new Word("brisk"), new Word("broad"), new Word("broil"), new Word("broke"), new Word("brood"), new Word("brook"), new Word("broom"), new Word("broth"), new Word("brown"), new Word("brunt"), new Word("brush"), new Word("brute"), new Word("buddy"), new Word("budge"), new Word("buggy"), new Word("bugle"), new Word("build"), new Word("built"), new Word("bulge"), new Word("bulky"), new Word("bully"), new Word("bunch"), new Word("bunny"), new Word("burly"), new Word("burnt"), new Word("burst"), new Word("bused"), new Word("bushy"), new Word("butch"), new Word("butte"), new Word("buxom"), new Word("buyer"), new Word("bylaw")); +wordsArray.push(//C +new Word("cabal"), new Word("cabby"), new Word("cabin"), new Word("cable"), new Word("cacao"), new Word("cache"), new Word("cacti"), new Word("caddy"), new Word("cadet"), new Word("cagey"), new Word("cairn"), new Word("camel"), new Word("cameo"), new Word("canal"), new Word("candy"), new Word("canny"), new Word("canoe"), new Word("canon"), new Word("caper"), new Word("caput"), new Word("carat"), new Word("cargo"), new Word("cargo"), new Word("carol"), new Word("carry"), new Word("carve"), new Word("caste"), new Word("catch"), new Word("cater"), new Word("catty"), new Word("caulk"), new Word("cause"), new Word("cavil"), new Word("cease"), new Word("cedar"), new Word("cello"), new Word("chafe"), new Word("chaff"), new Word("chain"), new Word("chair"), new Word("chalk"), new Word("champ"), new Word("chant"), new Word("chaos"), new Word("chard"), new Word("charm"), new Word("chart"), new Word("chase"), new Word("chasm"), new Word("cheap"), new Word("cheat"), new Word("check"), new Word("cheek"), new Word("cheer"), new Word("chess"), new Word("chest"), new Word("chick"), new Word("chide"), new Word("chief"), new Word("child"), new Word("chili"), new Word("chill"), new Word("chime"), new Word("china"), new Word("chirp"), new Word("chock"), new Word("choir"), new Word("choke"), new Word("chord"), new Word("chore"), new Word("chose"), new Word("chuck"), new Word("chump"), new Word("chunk"), new Word("churn"), new Word("chute"), new Word("cider"), new Word("cigar"), new Word("cinch"), new Word("circa"), new Word("civic"), new Word("civil"), new Word("clack"), new Word("claim"), new Word("clamp"), new Word("clang"), new Word("clank"), new Word("clash"), new Word("clasp"), new Word("class"), new Word("clean"), new Word("clear"), new Word("cleat"), new Word("cleft"), new Word("clerk"), new Word("click"), new Word("cliff"), new Word("climb"), new Word("cling"), new Word("clink"), new Word("cloak"), new Word("clock"), new Word("clone"), new Word("close"), new Word("cloth"), new Word("cloud"), new Word("clout"), new Word("clove"), new Word("clown"), new Word("cluck"), new Word("clued"), new Word("clump"), new Word("clung"), new Word("coach"), new Word("coast"), new Word("cobra"), new Word("cocoa"), new Word("colon"), new Word("color"), new Word("comet"), new Word("comfy"), new Word("comic"), new Word("comma"), new Word("conch"), new Word("condo"), new Word("conic"), new Word("copse"), new Word("coral"), new Word("corer"), new Word("corny"), new Word("couch"), new Word("cough"), new Word("could"), new Word("count"), new Word("coupe"), new Word("court"), new Word("coven"), new Word("cover"), new Word("covet"), new Word("covey"), new Word("cower"), new Word("coyly"), new Word("crack"), new Word("craft"), new Word("cramp"), new Word("crane"), new Word("crank"), new Word("crash"), new Word("crass"), new Word("crate"), new Word("crave"), new Word("crawl"), new Word("craze"), new Word("crazy"), new Word("creak"), new Word("cream"), new Word("credo"), new Word("creed"), new Word("creek"), new Word("creep"), new Word("creme"), new Word("crepe"), new Word("crept"), new Word("cress"), new Word("crest"), new Word("crick"), new Word("cried"), new Word("crier"), new Word("crime"), new Word("crimp"), new Word("crisp"), new Word("croak"), new Word("crock"), new Word("crone"), new Word("crony"), new Word("crook"), new Word("cross"), new Word("croup"), new Word("crowd"), new Word("crown"), new Word("crude"), new Word("cruel"), new Word("crumb"), new Word("crump"), new Word("crush"), new Word("crust"), new Word("crypt"), new Word("cubic"), new Word("cumin"), new Word("curio"), new Word("curly"), new Word("curry"), new Word("curse"), new Word("curve"), new Word("curvy"), new Word("cutie"), new Word("cyber"), new Word("cycle"), new Word("cynic")); +wordsArray.push(//D +new Word("daddy"), new Word("daily"), new Word("dairy"), new Word("daisy"), new Word("dally"), new Word("dance"), new Word("dandy"), new Word("datum"), new Word("daunt"), new Word("dealt"), new Word("death"), new Word("debar"), new Word("debit"), new Word("debug"), new Word("debut"), new Word("decal"), new Word("decay"), new Word("decor"), new Word("decoy"), new Word("decry"), new Word("defer"), new Word("deign"), new Word("deity"), new Word("delay"), new Word("delta"), new Word("delve"), new Word("demon"), new Word("demur"), new Word("denim"), new Word("dense"), new Word("depot"), new Word("depth"), new Word("derby"), new Word("deter"), new Word("detox"), new Word("deuce"), new Word("devil"), new Word("diary"), new Word("dicey"), new Word("digit"), new Word("dilly"), new Word("dimly"), new Word("diner"), new Word("dingo"), new Word("dingy"), new Word("diode"), new Word("dirge"), new Word("dirty"), new Word("disco"), new Word("ditch"), new Word("ditto"), new Word("ditty"), new Word("diver"), new Word("dizzy"), new Word("dodge"), new Word("dodgy"), new Word("dogma"), new Word("doing"), new Word("donor"), new Word("donut"), new Word("dopey"), new Word("doubt"), new Word("dough"), new Word("dowdy"), new Word("dowel"), new Word("downy"), new Word("dowry"), new Word("dozen"), new Word("draft"), new Word("drain"), new Word("drake"), new Word("drama"), new Word("drank"), new Word("drape"), new Word("drawl"), new Word("drawn"), new Word("dread"), new Word("dream"), new Word("dress"), new Word("dried"), new Word("drier"), new Word("drift"), new Word("drill"), new Word("drink"), new Word("drive"), new Word("droit"), new Word("droll"), new Word("drone"), new Word("drool"), new Word("droop"), new Word("dross"), new Word("drove"), new Word("drown"), new Word("druid"), new Word("drunk"), new Word("dryer"), new Word("dryly"), new Word("duchy"), new Word("dully"), new Word("dummy"), new Word("dumpy"), new Word("dunce"), new Word("dusky"), new Word("dusty"), new Word("dutch"), new Word("duvet"), new Word("dwarf"), new Word("dwell"), new Word("dwelt"), new Word("dying")); +wordsArray.push(//E +new Word("eager"), new Word("eagle"), new Word("early"), new Word("earth"), new Word("easel"), new Word("eaten"), new Word("eater"), new Word("ebony"), new Word("eclat"), new Word("edict"), new Word("edify"), new Word("eerie"), new Word("egret"), new Word("eight"), new Word("eject"), new Word("eking"), new Word("elate"), new Word("elbow"), new Word("elder"), new Word("elect"), new Word("elegy"), new Word("elfin"), new Word("elide"), new Word("elite"), new Word("elope"), new Word("elude"), new Word("email"), new Word("embed"), new Word("ember"), new Word("emcee"), new Word("empty"), new Word("enact"), new Word("endow"), new Word("enema"), new Word("enemy"), new Word("enjoy"), new Word("ennui"), new Word("ensue"), new Word("enter"), new Word("entry"), new Word("envoy"), new Word("epoch"), new Word("epoxy"), new Word("equal"), new Word("equip"), new Word("erase"), new Word("erect"), new Word("erode"), new Word("error"), new Word("erupt"), new Word("essay"), new Word("ester"), new Word("ether"), new Word("ethic"), new Word("ethos"), new Word("etude"), new Word("evade"), new Word("event"), new Word("every"), new Word("evict"), new Word("evoke"), new Word("exact"), new Word("exalt"), new Word("excel"), new Word("exert"), new Word("exile"), new Word("exist"), new Word("expel"), new Word("extol"), new Word("extra"), new Word("exult"), new Word("eying")); +wordsArray.push(//F +new Word("fable"), new Word("facet"), new Word("faint"), new Word("fairy"), new Word("faith"), new Word("false"), new Word("fancy"), new Word("fanny"), new Word("farce"), new Word("fatal"), new Word("fatty"), new Word("fault"), new Word("fauna"), new Word("favor"), new Word("feast"), new Word("fecal"), new Word("feign"), new Word("fella"), new Word("felon"), new Word("femme"), new Word("femur"), new Word("fence"), new Word("feral"), new Word("ferry"), new Word("fetal"), new Word("fetch"), new Word("fetid"), new Word("fetus"), new Word("fever"), new Word("fewer"), new Word("fiber"), new Word("ficus"), new Word("field"), new Word("fiend"), new Word("fiery"), new Word("fifth"), new Word("fifty"), new Word("fight"), new Word("filer"), new Word("filet"), new Word("filly"), new Word("filmy"), new Word("filth"), new Word("final"), new Word("finch"), new Word("finer"), new Word("first"), new Word("fishy"), new Word("fixer"), new Word("fizzy"), new Word("fjord"), new Word("flack"), new Word("flail"), new Word("flair"), new Word("flake"), new Word("flaky"), new Word("flame"), new Word("flank"), new Word("flare"), new Word("flare"), new Word("flash"), new Word("flask"), new Word("fleck"), new Word("fleet"), new Word("flesh"), new Word("flick"), new Word("flier"), new Word("fling"), new Word("flint"), new Word("flirt"), new Word("float"), new Word("flock"), new Word("flood"), new Word("floor"), new Word("flora"), new Word("floss"), new Word("flour"), new Word("flout"), new Word("flown"), new Word("fluff"), new Word("fluid"), new Word("fluke"), new Word("flume"), new Word("flung"), new Word("flunk"), new Word("flush"), new Word("flute"), new Word("flyer"), new Word("foamy"), new Word("focal"), new Word("focus"), new Word("foggy"), new Word("foist"), new Word("folio"), new Word("folly"), new Word("foray"), new Word("force"), new Word("forge"), new Word("forgo"), new Word("forte"), new Word("forth"), new Word("forty"), new Word("forum"), new Word("found"), new Word("foyer"), new Word("frail"), new Word("frame"), new Word("frank"), new Word("fraud"), new Word("freak"), new Word("freed"), new Word("freer"), new Word("fresh"), new Word("friar"), new Word("fried"), new Word("frill"), new Word("frisk"), new Word("fritz"), new Word("frock"), new Word("frond"), new Word("front"), new Word("frost"), new Word("froth"), new Word("frown"), new Word("froze"), new Word("fruit"), new Word("fudge"), new Word("fugue"), new Word("fully"), new Word("fungi"), new Word("funky"), new Word("funny"), new Word("furor"), new Word("furry"), new Word("fussy"), new Word("fuzzy")); +wordsArray.push(//G +new Word("gaffe"), new Word("gaily"), new Word("gamer"), new Word("gamma"), new Word("gamut"), new Word("gassy"), new Word("gaudy"), new Word("gauge"), new Word("gaunt"), new Word("gauze"), new Word("gavel"), new Word("gawky"), new Word("gayer"), new Word("gayly"), new Word("gazer"), new Word("gecko"), new Word("geeky"), new Word("geese"), new Word("genie"), new Word("genre"), new Word("ghost"), new Word("ghoul"), new Word("giant"), new Word("giddy"), new Word("gipsy"), new Word("girly"), new Word("girth"), new Word("given"), new Word("giver"), new Word("glade"), new Word("gland"), new Word("glare"), new Word("glass"), new Word("glaze"), new Word("gleam"), new Word("glean"), new Word("glide"), new Word("glint"), new Word("gloat"), new Word("globe"), new Word("gloom"), new Word("glory"), new Word("gloss"), new Word("glove"), new Word("glyph"), new Word("gnash"), new Word("gnome"), new Word("godly"), new Word("going"), new Word("golem"), new Word("golly"), new Word("gonad"), new Word("goner"), new Word("goody"), new Word("gooey"), new Word("goofy"), new Word("goose"), new Word("gorge"), new Word("gouge"), new Word("gourd"), new Word("grace"), new Word("grade"), new Word("graft"), new Word("grail"), new Word("grain"), new Word("grand"), new Word("grant"), new Word("grape"), new Word("graph"), new Word("grasp"), new Word("grass"), new Word("grate"), new Word("grave"), new Word("gravy"), new Word("graze"), new Word("great"), new Word("greed"), new Word("green"), new Word("greet"), new Word("grief"), new Word("grill"), new Word("grime"), new Word("grimy"), new Word("grind"), new Word("gripe"), new Word("groan"), new Word("groin"), new Word("groom"), new Word("grope"), new Word("gross"), new Word("group"), new Word("grout"), new Word("grove"), new Word("growl"), new Word("grown"), new Word("gruel"), new Word("gruff"), new Word("grunt"), new Word("guard"), new Word("guava"), new Word("guess"), new Word("guest"), new Word("guide"), new Word("guild"), new Word("guile"), new Word("guilt"), new Word("guise"), new Word("gulch"), new Word("gully"), new Word("gumbo"), new Word("gummy"), new Word("guppy"), new Word("gusto"), new Word("gusty"), new Word("gypsy")); +wordsArray.push(//H +new Word("habit"), new Word("hairy"), new Word("halve"), new Word("handy"), new Word("happy"), new Word("hardy"), new Word("harem"), new Word("harpy"), new Word("harry"), new Word("harsh"), new Word("haste"), new Word("hasty"), new Word("hatch"), new Word("hater"), new Word("haunt"), new Word("haute"), new Word("haven"), new Word("havoc"), new Word("hazel"), new Word("heady"), new Word("heard"), new Word("heart"), new Word("heath"), new Word("heave"), new Word("heavy"), new Word("hedge"), new Word("hefty"), new Word("heist"), new Word("helix"), new Word("hello"), new Word("hence"), new Word("heron"), new Word("hilly"), new Word("hinge"), new Word("hippo"), new Word("hippy"), new Word("hitch"), new Word("hoard"), new Word("hobby"), new Word("hoist"), new Word("holly"), new Word("homer"), new Word("honey"), new Word("honor"), new Word("horde"), new Word("horny"), new Word("horse"), new Word("hotel"), new Word("hotly"), new Word("hound"), new Word("house"), new Word("hovel"), new Word("hover"), new Word("howdy"), new Word("human"), new Word("humid"), new Word("humor"), new Word("humph"), new Word("humus"), new Word("hunch"), new Word("hunky"), new Word("hurry"), new Word("husky"), new Word("hussy"), new Word("hutch"), new Word("hydro"), new Word("hyena"), new Word("hymen"), new Word("hyper")); +wordsArray.push(//I +new Word("icily"), new Word("icing"), new Word("ideal"), new Word("idiom"), new Word("idiot"), new Word("idler"), new Word("idyll"), new Word("igloo"), new Word("iliac"), new Word("image"), new Word("imbue"), new Word("impel"), new Word("imply"), new Word("inane"), new Word("inbox"), new Word("incur"), new Word("index"), new Word("inept"), new Word("inert"), new Word("infer"), new Word("ingot"), new Word("inlay"), new Word("inlet"), new Word("inner"), new Word("input"), new Word("inter"), new Word("intro"), new Word("ionic"), new Word("irate"), new Word("irony"), new Word("islet"), new Word("issue"), new Word("itchy"), new Word("ivory")); +wordsArray.push(//J +new Word("jaunt"), new Word("jazzy"), new Word("jelly"), new Word("jerky"), new Word("jetty"), new Word("jewel"), new Word("jiffy"), new Word("joint"), new Word("joist"), new Word("joker"), new Word("jolly"), new Word("joust"), new Word("judge"), new Word("juice"), new Word("juicy"), new Word("jumbo"), new Word("jumpy"), new Word("junta"), new Word("junto"), new Word("juror")); +wordsArray.push(//L +new Word("kappa"), new Word("karma"), new Word("kayak"), new Word("kebab"), new Word("khaki"), new Word("kinky"), new Word("kiosk"), new Word("kitty"), new Word("knack"), new Word("knave"), new Word("knead"), new Word("kneed"), new Word("kneel"), new Word("knelt"), new Word("knife"), new Word("knock"), new Word("knoll"), new Word("known"), new Word("koala"), new Word("krill")); +wordsArray.push(//L +new Word("label"), new Word("labor"), new Word("laden"), new Word("ladle"), new Word("lager"), new Word("lance"), new Word("lanky"), new Word("lapel"), new Word("lapse"), new Word("large"), new Word("larva"), new Word("lasso"), new Word("latch"), new Word("later"), new Word("lathe"), new Word("latte"), new Word("laugh"), new Word("layer"), new Word("leach"), new Word("leafy"), new Word("leaky"), new Word("leant"), new Word("leapt"), new Word("learn"), new Word("lease"), new Word("leash"), new Word("least"), new Word("leave"), new Word("ledge"), new Word("leech"), new Word("leery"), new Word("lefty"), new Word("legal"), new Word("leggy"), new Word("lemon"), new Word("lemur"), new Word("leper"), new Word("level"), new Word("lever"), new Word("libel"), new Word("liege"), new Word("light"), new Word("liken"), new Word("lilac"), new Word("limbo"), new Word("limit"), new Word("linen"), new Word("liner"), new Word("lingo"), new Word("lipid"), new Word("lithe"), new Word("liver"), new Word("livid"), new Word("llama"), new Word("loamy"), new Word("loath"), new Word("lobby"), new Word("local"), new Word("locus"), new Word("lodge"), new Word("lofty"), new Word("logic"), new Word("login"), new Word("loopy"), new Word("loose"), new Word("lorry"), new Word("loser"), new Word("louse"), new Word("lousy"), new Word("lover"), new Word("lower"), new Word("lowly"), new Word("loyal"), new Word("lucid"), new Word("lucky"), new Word("lumen"), new Word("lumpy"), new Word("lunar"), new Word("lunch"), new Word("lunge"), new Word("lupus"), new Word("lurch"), new Word("lurid"), new Word("lusty"), new Word("lying"), new Word("lymph"), new Word("lyric")); +wordsArray.push(//M +new Word("macaw"), new Word("macho"), new Word("macro"), new Word("madam"), new Word("madly"), new Word("mafia"), new Word("magic"), new Word("magma"), new Word("maize"), new Word("major"), new Word("maker"), new Word("mambo"), new Word("mamma"), new Word("mammy"), new Word("manga"), new Word("mange"), new Word("mango"), new Word("mangy"), new Word("mania"), new Word("manic"), new Word("manly"), new Word("manor"), new Word("maple"), new Word("march"), new Word("marry"), new Word("marsh"), new Word("mason"), new Word("masse"), new Word("match"), new Word("matey"), new Word("mauve"), new Word("maxim"), new Word("maybe"), new Word("mayor"), new Word("mealy"), new Word("meant"), new Word("meaty"), new Word("mecca"), new Word("medal"), new Word("media"), new Word("medic"), new Word("melee"), new Word("melon"), new Word("mercy"), new Word("merge"), new Word("merit"), new Word("merry"), new Word("metal"), new Word("meter"), new Word("metro"), new Word("micro"), new Word("midge"), new Word("midst"), new Word("might"), new Word("milky"), new Word("mimic"), new Word("mince"), new Word("miner"), new Word("minim"), new Word("minor"), new Word("minty"), new Word("minus"), new Word("mirth"), new Word("miser"), new Word("missy"), new Word("mocha"), new Word("modal"), new Word("model"), new Word("modem"), new Word("mogul"), new Word("moist"), new Word("molar"), new Word("moldy"), new Word("money"), new Word("month"), new Word("moody"), new Word("moose"), new Word("moral"), new Word("moron"), new Word("morph"), new Word("mossy"), new Word("motel"), new Word("motif"), new Word("motor"), new Word("motto"), new Word("moult"), new Word("mound"), new Word("mount"), new Word("mourn"), new Word("mouse"), new Word("mouth"), new Word("mover"), new Word("movie"), new Word("mower"), new Word("mucky"), new Word("mucus"), new Word("muddy"), new Word("mulch"), new Word("mummy"), new Word("munch"), new Word("mural"), new Word("murky"), new Word("mushy"), new Word("music"), new Word("musky"), new Word("musty"), new Word("myrrh")); +wordsArray.push(//N +new Word("nadir"), new Word("naive"), new Word("nanny"), new Word("nasal"), new Word("nasty"), new Word("natal"), new Word("naval"), new Word("navel"), new Word("needy"), new Word("neigh"), new Word("nerdy"), new Word("nerve"), new Word("never"), new Word("newer"), new Word("newly"), new Word("nicer"), new Word("niche"), new Word("niece"), new Word("night"), new Word("ninja"), new Word("ninny"), new Word("ninth"), new Word("noble"), new Word("nobly"), new Word("noise"), new Word("noisy"), new Word("nomad"), new Word("noose"), new Word("north"), new Word("nosey"), new Word("notch"), new Word("novel"), new Word("nudge"), new Word("nurse"), new Word("nutty"), new Word("nylon"), new Word("nymph")); +wordsArray.push(//O +new Word("oaken"), new Word("obese"), new Word("occur"), new Word("ocean"), new Word("octal"), new Word("octet"), new Word("odder"), new Word("oddly"), new Word("offal"), new Word("offer"), new Word("often"), new Word("olden"), new Word("older"), new Word("olive"), new Word("ombre"), new Word("omega"), new Word("onion"), new Word("onset"), new Word("opera"), new Word("opine"), new Word("opium"), new Word("optic"), new Word("orbit"), new Word("order"), new Word("organ"), new Word("other"), new Word("otter"), new Word("ought"), new Word("ounce"), new Word("outdo"), new Word("outer"), new Word("outgo"), new Word("ovary"), new Word("ovate"), new Word("overt"), new Word("ovine"), new Word("ovoid"), new Word("owing"), new Word("owner"), new Word("oxide"), new Word("ozone")); +wordsArray.push(//P +new Word("paddy"), new Word("pagan"), new Word("paint"), new Word("paler"), new Word("palsy"), new Word("panel"), new Word("panic"), new Word("pansy"), new Word("papal"), new Word("paper"), new Word("parer"), new Word("parka"), new Word("parry"), new Word("parse"), new Word("party"), new Word("pasta"), new Word("paste"), new Word("pasty"), new Word("patch"), new Word("patio"), new Word("patsy"), new Word("patty"), new Word("pause"), new Word("payee"), new Word("payer"), new Word("peace"), new Word("peach"), new Word("pearl"), new Word("pecan"), new Word("pedal"), new Word("penal"), new Word("pence"), new Word("penne"), new Word("penny"), new Word("perch"), new Word("peril"), new Word("perky"), new Word("pesky"), new Word("pesto"), new Word("petal"), new Word("petty"), new Word("phase"), new Word("phone"), new Word("phony"), new Word("photo"), new Word("piano"), new Word("picky"), new Word("piece"), new Word("piety"), new Word("piggy"), new Word("pilot"), new Word("pinch"), new Word("piney"), new Word("pinky"), new Word("pinto"), new Word("piper"), new Word("pique"), new Word("pitch"), new Word("pithy"), new Word("pivot"), new Word("pixel"), new Word("pixie"), new Word("pizza"), new Word("place"), new Word("plaid"), new Word("plain"), new Word("plait"), new Word("plane"), new Word("plank"), new Word("plant"), new Word("plate"), new Word("plaza"), new Word("plead"), new Word("pleat"), new Word("plied"), new Word("plier"), new Word("pluck"), new Word("plumb"), new Word("plume"), new Word("plump"), new Word("plunk"), new Word("plush"), new Word("poesy"), new Word("point"), new Word("poise"), new Word("poker"), new Word("polar"), new Word("polka"), new Word("polyp"), new Word("pooch"), new Word("poppy"), new Word("porch"), new Word("poser"), new Word("posit"), new Word("posse"), new Word("pouch"), new Word("pound"), new Word("pouty"), new Word("power"), new Word("prank"), new Word("prawn"), new Word("preen"), new Word("press"), new Word("price"), new Word("prick"), new Word("pride"), new Word("pried"), new Word("prime"), new Word("primo"), new Word("print"), new Word("prior"), new Word("prism"), new Word("privy"), new Word("prize"), new Word("probe"), new Word("prone"), new Word("prong"), new Word("proof"), new Word("prose"), new Word("proud"), new Word("prove"), new Word("prowl"), new Word("proxy"), new Word("prude"), new Word("prune"), new Word("psalm"), new Word("pubic"), new Word("pudgy"), new Word("puffy"), new Word("pulpy"), new Word("pulse"), new Word("punch"), new Word("pupil"), new Word("puppy"), new Word("puree"), new Word("purer"), new Word("purge"), new Word("purse"), new Word("pushy"), new Word("putty"), new Word("pygmy")); +wordsArray.push(//Q +new Word("quack"), new Word("quail"), new Word("quake"), new Word("qualm"), new Word("quark"), new Word("quart"), new Word("quash"), new Word("quasi"), new Word("queen"), new Word("queer"), new Word("quell"), new Word("query"), new Word("quest"), new Word("queue"), new Word("quick"), new Word("quiet"), new Word("quill"), new Word("quilt"), new Word("quirk"), new Word("quite"), new Word("quota"), new Word("quote"), new Word("quoth")); +wordsArray.push(//R +new Word("rabbi"), new Word("rabid"), new Word("racer"), new Word("radar"), new Word("radii"), new Word("radio"), new Word("rainy"), new Word("raise"), new Word("rajah"), new Word("rally"), new Word("ralph"), new Word("ramen"), new Word("ranch"), new Word("randy"), new Word("range"), new Word("rapid"), new Word("rarer"), new Word("raspy"), new Word("ratio"), new Word("ratty"), new Word("raven"), new Word("rayon"), new Word("razor"), new Word("reach"), new Word("react"), new Word("ready"), new Word("realm"), new Word("rearm"), new Word("rebar"), new Word("rebel"), new Word("rebus"), new Word("rebut"), new Word("recap"), new Word("recur"), new Word("recut"), new Word("reedy"), new Word("refer"), new Word("refit"), new Word("regal"), new Word("rehab"), new Word("reign"), new Word("relax"), new Word("relay"), new Word("relic"), new Word("remit"), new Word("renal"), new Word("renew"), new Word("repay"), new Word("repel"), new Word("reply"), new Word("rerun"), new Word("reset"), new Word("resin"), new Word("retch"), new Word("retro"), new Word("retry"), new Word("reuse"), new Word("revel"), new Word("revue"), new Word("rhino"), new Word("rhyme"), new Word("rider"), new Word("ridge"), new Word("rifle"), new Word("right"), new Word("rigid"), new Word("rigor"), new Word("rinse"), new Word("ripen"), new Word("riper"), new Word("risen"), new Word("riser"), new Word("risky"), new Word("rival"), new Word("river"), new Word("rivet"), new Word("roach"), new Word("roast"), new Word("robin"), new Word("robot"), new Word("rocky"), new Word("rodeo"), new Word("roger"), new Word("rogue"), new Word("roomy"), new Word("roost"), new Word("rotor"), new Word("rouge"), new Word("rough"), new Word("round"), new Word("rouse"), new Word("route"), new Word("rover"), new Word("rowdy"), new Word("rower"), new Word("royal"), new Word("ruddy"), new Word("ruder"), new Word("rugby"), new Word("ruler"), new Word("rumba"), new Word("rumor"), new Word("rupee"), new Word("rural"), new Word("rusty")); +wordsArray.push(//S +new Word("sadly"), new Word("safer"), new Word("saint"), new Word("salad"), new Word("sally"), new Word("salon"), new Word("salsa"), new Word("salty"), new Word("salve"), new Word("salvo"), new Word("sandy"), new Word("saner"), new Word("sappy"), new Word("sassy"), new Word("satin"), new Word("satyr"), new Word("sauce"), new Word("saucy"), new Word("sauna"), new Word("saute"), new Word("savor"), new Word("savoy"), new Word("savvy"), new Word("scald"), new Word("scale"), new Word("scalp"), new Word("scaly"), new Word("scamp"), new Word("scant"), new Word("scare"), new Word("scarf"), new Word("scary"), new Word("scene"), new Word("scent"), new Word("scion"), new Word("scoff"), new Word("scold"), new Word("scone"), new Word("scoop"), new Word("scope"), new Word("score"), new Word("scorn"), new Word("scour"), new Word("scout"), new Word("scowl"), new Word("scram"), new Word("scrap"), new Word("scree"), new Word("screw"), new Word("scrub"), new Word("scrum"), new Word("scuba"), new Word("sedan"), new Word("seedy"), new Word("segue"), new Word("seize"), new Word("semen"), new Word("sense"), new Word("sepia"), new Word("serif"), new Word("serum"), new Word("serve"), new Word("setup"), new Word("seven"), new Word("sever"), new Word("sewer"), new Word("shack"), new Word("shade"), new Word("shady"), new Word("shaft"), new Word("shake"), new Word("shaky"), new Word("shale"), new Word("shall"), new Word("shalt"), new Word("shame"), new Word("shank"), new Word("shape"), new Word("shard"), new Word("share"), new Word("shark"), new Word("sharp"), new Word("shave"), new Word("shawl"), new Word("shear"), new Word("sheen"), new Word("sheep"), new Word("sheer"), new Word("sheet"), new Word("sheik"), new Word("shelf"), new Word("shell"), new Word("shied"), new Word("shift"), new Word("shine"), new Word("shiny"), new Word("shire"), new Word("shirk"), new Word("shirt"), new Word("shoal"), new Word("shock"), new Word("shone"), new Word("shook"), new Word("shoot"), new Word("shore"), new Word("shorn"), new Word("short"), new Word("shout"), new Word("shove"), new Word("shown"), new Word("showy"), new Word("shrew"), new Word("shrub"), new Word("shrug"), new Word("shuck"), new Word("shunt"), new Word("shush"), new Word("shyly"), new Word("siege"), new Word("sieve"), new Word("sight"), new Word("sigma"), new Word("silky"), new Word("silly"), new Word("since"), new Word("sinew"), new Word("singe"), new Word("siren"), new Word("sissy"), new Word("sixth"), new Word("sixty"), new Word("skate"), new Word("skier"), new Word("skiff"), new Word("skill"), new Word("skimp"), new Word("skirt"), new Word("skulk"), new Word("skull"), new Word("skunk"), new Word("slack"), new Word("slain"), new Word("slang"), new Word("slant"), new Word("slash"), new Word("slate"), new Word("slave"), new Word("sleek"), new Word("sleep"), new Word("sleet"), new Word("slept"), new Word("slice"), new Word("slick"), new Word("slide"), new Word("slime"), new Word("slimy"), new Word("sling"), new Word("slink"), new Word("sloop"), new Word("slope"), new Word("slosh"), new Word("sloth"), new Word("slump"), new Word("slung"), new Word("slunk"), new Word("slurp"), new Word("slush"), new Word("slyly"), new Word("smack"), new Word("small"), new Word("smart"), new Word("smash"), new Word("smear"), new Word("smell"), new Word("smelt"), new Word("smile"), new Word("smirk"), new Word("smite"), new Word("smith"), new Word("smock"), new Word("smoke"), new Word("smoky"), new Word("smote"), new Word("smurf"), new Word("snack"), new Word("snail"), new Word("snake"), new Word("snaky"), new Word("snare"), new Word("snarl"), new Word("sneak"), new Word("sneer"), new Word("snide"), new Word("sniff"), new Word("snipe"), new Word("snoop"), new Word("snore"), new Word("snort"), new Word("snout"), new Word("snowy"), new Word("snuck"), new Word("snuff"), new Word("soapy"), new Word("sober"), new Word("soggy"), new Word("solar"), new Word("solid"), new Word("solve"), new Word("sonar"), new Word("sonic"), new Word("sooth"), new Word("sooty"), new Word("sorry"), new Word("sound"), new Word("south"), new Word("sower"), new Word("space"), new Word("spade"), new Word("spank"), new Word("spare"), new Word("spark"), new Word("spasm"), new Word("spawn"), new Word("speak"), new Word("spear"), new Word("speck"), new Word("speed"), new Word("spell"), new Word("spelt"), new Word("spend"), new Word("spent"), new Word("sperm"), new Word("spice"), new Word("spicy"), new Word("spied"), new Word("spiel"), new Word("spike"), new Word("spiky"), new Word("spill"), new Word("spilt"), new Word("spine"), new Word("spiny"), new Word("spire"), new Word("spite"), new Word("splat"), new Word("split"), new Word("spoil"), new Word("spoke"), new Word("spoof"), new Word("spook"), new Word("spool"), new Word("spoon"), new Word("spore"), new Word("sport"), new Word("spout"), new Word("spray"), new Word("spree"), new Word("sprig"), new Word("spunk"), new Word("spurn"), new Word("spurt"), new Word("squad"), new Word("squat"), new Word("squib"), new Word("stack"), new Word("staff"), new Word("stage"), new Word("staid"), new Word("stain"), new Word("stair"), new Word("stake"), new Word("stale"), new Word("stalk"), new Word("stall"), new Word("stamp"), new Word("stand"), new Word("stank"), new Word("stare"), new Word("stark"), new Word("start"), new Word("stash"), new Word("state"), new Word("stave"), new Word("stead"), new Word("steak"), new Word("steal"), new Word("steam"), new Word("steed"), new Word("steel"), new Word("steep"), new Word("steer"), new Word("stein"), new Word("stern"), new Word("stick"), new Word("stiff"), new Word("still"), new Word("stilt"), new Word("sting"), new Word("stink"), new Word("stint"), new Word("stock"), new Word("stoic"), new Word("stoke"), new Word("stole"), new Word("stomp"), new Word("stone"), new Word("stony"), new Word("stood"), new Word("stool"), new Word("stoop"), new Word("store"), new Word("stork"), new Word("storm"), new Word("story"), new Word("stout"), new Word("stove"), new Word("strap"), new Word("straw"), new Word("stray"), new Word("strip"), new Word("strut"), new Word("stuck"), new Word("study"), new Word("stuff"), new Word("stump"), new Word("stung"), new Word("stunk"), new Word("stunt"), new Word("style"), new Word("suave"), new Word("sugar"), new Word("suing"), new Word("suite"), new Word("sulky"), new Word("sully"), new Word("sumac"), new Word("sunny"), new Word("super"), new Word("surer"), new Word("surge"), new Word("surly"), new Word("sushi"), new Word("swami"), new Word("swamp"), new Word("swarm"), new Word("swash"), new Word("swath"), new Word("swear"), new Word("sweat"), new Word("sweep"), new Word("sweet"), new Word("swell"), new Word("swept"), new Word("swift"), new Word("swill"), new Word("swine"), new Word("swing"), new Word("swirl"), new Word("swish"), new Word("swoon"), new Word("swoop"), new Word("sword"), new Word("swore"), new Word("sworn"), new Word("swung"), new Word("synod"), new Word("syrup")); +wordsArray.push(//T +new Word("tabby"), new Word("table"), new Word("taboo"), new Word("tacit"), new Word("tacky"), new Word("taffy"), new Word("taint"), new Word("taken"), new Word("taker"), new Word("tally"), new Word("talon"), new Word("tamer"), new Word("tango"), new Word("tangy"), new Word("taper"), new Word("tapir"), new Word("tardy"), new Word("tarot"), new Word("taste"), new Word("tasty"), new Word("tatty"), new Word("taunt"), new Word("tawny"), new Word("teach"), new Word("teary"), new Word("tease"), new Word("teddy"), new Word("teeth"), new Word("tempo"), new Word("tenet"), new Word("tenor"), new Word("tense"), new Word("tenth"), new Word("tepee"), new Word("tepid"), new Word("terra"), new Word("terse"), new Word("testy"), new Word("thank"), new Word("theft"), new Word("their"), new Word("theme"), new Word("there"), new Word("these"), new Word("theta"), new Word("thick"), new Word("thief"), new Word("thigh"), new Word("thing"), new Word("think"), new Word("third"), new Word("thong"), new Word("thorn"), new Word("those"), new Word("three"), new Word("threw"), new Word("throb"), new Word("throw"), new Word("thrum"), new Word("thumb"), new Word("thump"), new Word("thyme"), new Word("tiara"), new Word("tibia"), new Word("tidal"), new Word("tiger"), new Word("tight"), new Word("tilde"), new Word("timer"), new Word("timid"), new Word("tipsy"), new Word("titan"), new Word("tithe"), new Word("title"), new Word("toast"), new Word("today"), new Word("toddy"), new Word("token"), new Word("tonal"), new Word("tonga"), new Word("tonic"), new Word("tooth"), new Word("topaz"), new Word("topic"), new Word("torch"), new Word("torso"), new Word("torus"), new Word("total"), new Word("totem"), new Word("touch"), new Word("tough"), new Word("towel"), new Word("tower"), new Word("toxic"), new Word("toxin"), new Word("trace"), new Word("track"), new Word("tract"), new Word("trade"), new Word("trail"), new Word("train"), new Word("trait"), new Word("tramp"), new Word("trash"), new Word("trawl"), new Word("tread"), new Word("treat"), new Word("trend"), new Word("triad"), new Word("trial"), new Word("tribe"), new Word("trice"), new Word("trick"), new Word("tried"), new Word("tripe"), new Word("trite"), new Word("troll"), new Word("troop"), new Word("trope"), new Word("trout"), new Word("trove"), new Word("truce"), new Word("truck"), new Word("truer"), new Word("truly"), new Word("trump"), new Word("trunk"), new Word("truss"), new Word("trust"), new Word("truth"), new Word("tryst"), new Word("tubal"), new Word("tuber"), new Word("tulip"), new Word("tulle"), new Word("tumor"), new Word("tunic"), new Word("turbo"), new Word("tutor"), new Word("twang"), new Word("tweak"), new Word("tweed"), new Word("tweet"), new Word("twice"), new Word("twine"), new Word("twirl"), new Word("twist"), new Word("twixt"), new Word("tying")); +wordsArray.push(//U +new Word("udder"), new Word("ulcer"), new Word("ultra"), new Word("umbra"), new Word("uncle"), new Word("uncut"), new Word("under"), new Word("undid"), new Word("undue"), new Word("unfed"), new Word("unfit"), new Word("unify"), new Word("union"), new Word("unite"), new Word("unity"), new Word("unlit"), new Word("unmet"), new Word("unset"), new Word("untie"), new Word("until"), new Word("unwed"), new Word("unzip"), new Word("upper"), new Word("upset"), new Word("urban"), new Word("urine"), new Word("usage"), new Word("usher"), new Word("using"), new Word("usual"), new Word("usurp"), new Word("utile"), new Word("utter")); +wordsArray.push(//V +new Word("vague"), new Word("valet"), new Word("valid"), new Word("valor"), new Word("value"), new Word("valve"), new Word("vapid"), new Word("vapor"), new Word("vault"), new Word("vaunt"), new Word("vegan"), new Word("venom"), new Word("venue"), new Word("verge"), new Word("verse"), new Word("verso"), new Word("verve"), new Word("vicar"), new Word("video"), new Word("vigil"), new Word("vigor"), new Word("villa"), new Word("vinyl"), new Word("viola"), new Word("viper"), new Word("viral"), new Word("virus"), new Word("visit"), new Word("visor"), new Word("vista"), new Word("vital"), new Word("vivid"), new Word("vixen"), new Word("vocal"), new Word("vodka"), new Word("vogue"), new Word("voice"), new Word("voila"), new Word("vomit"), new Word("voter"), new Word("vouch"), new Word("vowel"), new Word("vying")); +wordsArray.push(//W +new Word("wacky"), new Word("wafer"), new Word("wager"), new Word("wagon"), new Word("waist"), new Word("waive"), new Word("waltz"), new Word("warty"), new Word("waste"), new Word("watch"), new Word("water"), new Word("waver"), new Word("waxen"), new Word("weary"), new Word("weave"), new Word("wedge"), new Word("weedy"), new Word("weigh"), new Word("weird"), new Word("welch"), new Word("welsh"), new Word("whack"), new Word("whale"), new Word("wharf"), new Word("wheat"), new Word("wheel"), new Word("whelp"), new Word("where"), new Word("which"), new Word("whiff"), new Word("while"), new Word("whine"), new Word("whiny"), new Word("whirl"), new Word("whisk"), new Word("white"), new Word("whole"), new Word("whoop"), new Word("whose"), new Word("widen"), new Word("wider"), new Word("widow"), new Word("width"), new Word("wield"), new Word("wight"), new Word("willy"), new Word("wimpy"), new Word("wince"), new Word("winch"), new Word("windy"), new Word("wiser"), new Word("wispy"), new Word("witch"), new Word("witty"), new Word("woken"), new Word("woman"), new Word("women"), new Word("woody"), new Word("wooer"), new Word("wooly"), new Word("woozy"), new Word("wordy"), new Word("world"), new Word("worry"), new Word("worse"), new Word("worst"), new Word("worth"), new Word("would"), new Word("wound"), new Word("woven"), new Word("wrack"), new Word("wrath"), new Word("wreak"), new Word("wreck"), new Word("wrest"), new Word("wring"), new Word("wrist"), new Word("write"), new Word("wrong"), new Word("wrote"), new Word("wrung"), new Word("wryly")); +wordsArray.push(//Y +new Word("yacht"), new Word("yearn"), new Word("yeast"), new Word("yield"), new Word("young"), new Word("youth")); +wordsArray.push(//Z +new Word("zebra"), new Word("zesty"), new Word("zonal")); diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/style.css b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/style.css new file mode 100644 index 000000000..d1c3fef11 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/style.css @@ -0,0 +1,296 @@ +body { + background-color: black; + margin: 0; + position: relative; +} + +input { + width: 15rem; + height: 1.5rem; +} + +h3 { + text-decoration: underline; + text-align: center; + margin: 0.5rem; +} + +ul { + padding-bottom: 0; + margin: 0; +} + +ol { + list-style-type: none; + margin: 0; + padding-top: 0; +} + +.container { + width: 90rem; + height: 60rem; + position: relative; + top: 0rem; + right: 0rem; + border: 0.1rem solid black; +} + +.green { + color: seagreen; +} + +.yellow { + color: gold; +} + +.gray { + color: gray; +} + +.header { + color: white; + font-size: 2rem; + color: seagreen; + margin: auto; + height: 8rem; + width: 21rem; + font-size: 4rem; + position: relative; + top: 0rem; + right: -0.5rem; +} + +.iconsWrapper { + width: 10rem; + height: 5rem; + position: relative; + top: -5rem; + left: 80rem; + display: flex; + flex-direction: row; +} +.iconsWrapper__displayedIcon { + width: 3rem; + height: 3rem; + display: block; + position: relative; + top: 0rem; + left: 0rem; + color: white; + font-size: 3rem; + padding: 1rem; +} +.iconsWrapper__displayedIcon:hover { + color: gold; +} +.iconsWrapper__displayedIcon__displayedData { + width: 28rem; + height: 29rem; + border: 0.2rem solid white; + background-color: #161313; + position: relative; + top: 1rem; + right: 16rem; + display: none; + flex-direction: column; + font-size: 1.6rem; + padding: 0.5rem; + color: white; + line-height: 2rem; +} +.iconsWrapper__displayedIcon__displayedData--userData { + height: auto; + width: 18rem; + text-align: center; + font-size: 2rem; +} +.iconsWrapper__displayedIcon:hover .iconsWrapper__displayedIcon__displayedData { + display: flex; +} + +.board { + height: 30rem; + width: 30rem; + position: relative; + bottom: 9rem; + display: grid; + grid-template-rows: repeat(6, 1fr); + grid-gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; +} +.board__line { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 5px; +} +.board__line__cell { + border: 0.1rem solid yellow; + font-size: 3.5rem; + text-align: center; + vertical-align: middle; + color: white; + transition: all 2s; + transform-style: preserve-3d; +} +.board__line__cell__transtionDelay02Cell { + transition-delay: 1s; +} +.board__line__cell__transtionDelay03Cell { + transition-delay: 2s; +} +.board__line__cell__transtionDelay04Cell { + transition-delay: 3s; +} +.board__line__cell__transtionDelay05Cell { + transition-delay: 4s; +} + +.keyboard { + height: 30rem; + width: 40rem; + display: flex; + gap: 5px; + padding: 10px; + box-sizing: border-box; + margin: auto; + position: relative; + top: -9rem; + display: flex; + flex-direction: column; +} +.keyboard__line { + height: 5rem; + width: 40rem; + display: flex; + justify-content: space-between; + grid-gap: 5px; +} +.keyboard__line__key { + height: 4.5rem; + width: 4.5rem; + font-size: 1rem; + text-align: center; + vertical-align: middle; + color: white; + background-color: gray; + border-radius: 0.8rem; + border: 0.2rem solid gray; + transition-delay: 5s; +} + +.newGameButton { + width: 10rem; + height: 6rem; + background-color: seagreen; + font-weight: 900; + font-size: 1.5rem; + padding: 0.5rem; + line-height: 1.5rem; + margin-top: 1rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #737171; + position: relative; + left: 15rem; + top: -47rem; +} +.newGameButton:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.newGameButton:active { + background-color: #4a0afb; +} + +.gameEnd { + width: 28rem; + height: 28rem; + background-color: black; + z-index: 2; + position: absolute; + top: 4.5rem; + left: 30.5rem; + font-size: 3rem; + text-align: center; + vertical-align: middle; + line-height: 5.5rem; + display: flex; + flex-direction: column; + transition: all 2s; +} +.gameEnd--win { + border: 0.5rem solid seagreen; + color: seagreen; +} +.gameEnd--lose { + border: 0.5rem solid red; + color: red; +} + +.notValid { + width: 15rem; + height: 4rem; + background-color: #cfc3c3; + z-index: 2; + position: absolute; + margin: auto; + top: 4.6rem; + left: 37.5rem; + font-size: 2rem; + text-align: center; + vertical-align: middle; + line-height: 3.5rem; + transition: all 2s; + color: #040404; + animation: pop 2s linear 1; + opacity: 0; + border-radius: 2%; +} +@keyframes pop { + 0% { + opacity: 0; + } + 20% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.logInWrapper { + border: 0.2rem solid seagreen; + width: 30rem; + height: 20rem; + margin: auto; + color: white; + font-size: 2rem; + font-weight: 700; +} +.logInWrapper__header { + text-align: center; + font-size: 3rem; +} +.logInWrapper__logInButton { + width: 10rem; + height: 3rem; + background-color: seagreen; + font-weight: 900; + font-size: 1.5rem; + padding: 0.5rem; + line-height: 1.5rem; + margin-top: 1rem; + box-shadow: 0rem 0rem 0.2rem 0.2rem #737171; +} +.logInWrapper__logInButton:hover { + background-color: white; + box-shadow: none; + transition: 0.5s; +} +.logInWrapper__logInButton:active { + background-color: #4a0afb; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/view.js b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/view.js new file mode 100644 index 000000000..052bb505e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/dist/view.js @@ -0,0 +1,56 @@ +//better use querySelelctAll +var cell0101 = document.querySelector("#cell0101"); +var cell0102 = document.querySelector("#cell0102"); +var cell0103 = document.querySelector("#cell0103"); +var cell0104 = document.querySelector("#cell0104"); +var cell0105 = document.querySelector("#cell0105"); +var line01 = []; +if (cell0101 && cell0102 && cell0103 && cell0104 && cell0105) { + line01.push(cell0101, cell0102, cell0103, cell0104, cell0105); +} +var cell0201 = document.querySelector("#cell0201"); +var cell0202 = document.querySelector("#cell0202"); +var cell0203 = document.querySelector("#cell0203"); +var cell0204 = document.querySelector("#cell0204"); +var cell0205 = document.querySelector("#cell0205"); +var line02 = []; +if (cell0201 && cell0202 && cell0203 && cell0204 && cell0205) { + line02.push(cell0201, cell0202, cell0203, cell0204, cell0205); +} +var cell0301 = document.querySelector("#cell0301"); +var cell0302 = document.querySelector("#cell0302"); +var cell0303 = document.querySelector("#cell0303"); +var cell0304 = document.querySelector("#cell0304"); +var cell0305 = document.querySelector("#cell0305"); +var line03 = []; +if (cell0301 && cell0302 && cell0303 && cell0304 && cell0305) { + line03.push(cell0301, cell0302, cell0303, cell0304, cell0305); +} +var cell0401 = document.querySelector("#cell0401"); +var cell0402 = document.querySelector("#cell0402"); +var cell0403 = document.querySelector("#cell0403"); +var cell0404 = document.querySelector("#cell0404"); +var cell0405 = document.querySelector("#cell0405"); +var line04 = []; +if (cell0401 && cell0402 && cell0403 && cell0404 && cell0405) { + line04.push(cell0401, cell0402, cell0403, cell0404, cell0405); +} +var cell0501 = document.querySelector("#cell0501"); +var cell0502 = document.querySelector("#cell0502"); +var cell0503 = document.querySelector("#cell0503"); +var cell0504 = document.querySelector("#cell0504"); +var cell0505 = document.querySelector("#cell0505"); +var line05 = []; +if (cell0501 && cell0502 && cell0503 && cell0504 && cell0505) { + line05.push(cell0501, cell0502, cell0503, cell0504, cell0505); +} +var cell0601 = document.querySelector("#cell0601"); +var cell0602 = document.querySelector("#cell0602"); +var cell0603 = document.querySelector("#cell0603"); +var cell0604 = document.querySelector("#cell0604"); +var cell0605 = document.querySelector("#cell0605"); +var line06 = []; +if (cell0601 && cell0602 && cell0603 && cell0604 && cell0605) { + line06.push(cell0601, cell0602, cell0603, cell0604, cell0605); +} +var linesArray = [line01, line02, line03, line04, line05, line06]; diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/helpers.ts b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/helpers.ts new file mode 100644 index 000000000..4b5192818 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/helpers.ts @@ -0,0 +1,10 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} + + +function getRandomInt(min: number, max: number) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; +} diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/index.html b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/index.html new file mode 100644 index 000000000..33907c180 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/index.html @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + Five Hive + + +
                +
                FIVE HIVE
                + +
                +
                + +
                +
                +
                +
                +
                + +
                +

                  Rules

                  +
                • Each guess must be a valid 5-letters word
                  • +
                • The colors of the cells will change to show how close your guess was to the solution


                  • +
                +
                  +
                1. Examples:
                  2. +
                2. Green: the letter is in the correct spot
                  3. +
                3. Yellow: the letter is in the solution, but in a wrong spot
                  4. +
                4. Gray: the letter is not in the solution
                  5. +
                +
                +
                +
                + +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                +
                + +
                +
                +
                + + +
                +
                + + + + + + + + + + +
                +
                + + + + + + + + + +
                +
                + + + + + + + + + +
                +
                + + +
                + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/index.ts b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/index.ts new file mode 100644 index 000000000..6d064b6f2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/index.ts @@ -0,0 +1,16 @@ +const solution = randomSolutionSelector(); +console.log("solution:" , solution?.name); + +const _users = getUsersDataFromStorage(); +const _loggedInUser = getLoggedInUserFromStorage(); + + +if (_users) { + users.push(..._users); +} + +if (_loggedInUser) { + loggedInUser = _loggedInUser; +} + +renderUserData(users, "userDataRoot"); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/log-in.html b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/log-in.html new file mode 100644 index 000000000..16ff21539 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/log-in.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + Five Hive Log In + + +

                Five Hive

                + +
                +
                + Log-In + +

                + +

                + +
                +
                + + + + + + diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/log-in.ts b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/log-in.ts new file mode 100644 index 000000000..cf1057f82 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/log-in.ts @@ -0,0 +1,6 @@ +const __users = getUsersDataFromStorage(); + +if (__users) { + users.push(...__users); +} + diff --git a/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/model.ts b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/model.ts new file mode 100644 index 000000000..edd189dfc --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Amit - FiveHive/model.ts @@ -0,0 +1,2432 @@ +class Word { + uid: string; + constructor( + public name: string, + ) { + this.uid = uid(); + } + public includesLetter(letter: string): boolean{ + return this.name.toUpperCase().includes(letter); + } + + public letterRepetitions(letter: string): number{ + let repetitions: number = 0; + for(let i=0; i + + + + + + Birding-Spot + + + + + + + + + + + + + +
                + +
                + Home + Add Encounter + Search From Location +
                +
                + +
                +
                + + + + + + + + + + + + + + + + + + + + +
                +
                +
                +
                + + + +
                +
                + +
                +
                +
                +
                + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/control.ts b/02-TypeScript/18-personalProject/Checked/Dor Bookra/control.ts new file mode 100644 index 000000000..dde483943 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/control.ts @@ -0,0 +1,117 @@ +function handleForm(ev){ + try { + ev.preventDefault(); + const img = ev.target.elements.birdImg.value; + const name = ev.target.elements.birdName.value; + const size = ev.target.elements.birdSize.value; + const color = ev.target.elements.birdColor.value; + const location = ev.target.elements.newLocation.value; + const action = ev.target.elements.birdAction.value; + + birds.push(new Bird(img, name, size, color,location, action)) + sendBirdsToStorage() + renderForm(birds,"birdCardContainer"); + if(!checksIfLocationExists(locations, location)){ + locations.push(new Area(location)) + sendLocationToStorage () + renderSelectLocation(locations, "birdSearch") + + } + ev.target.reset() + } + catch (error) { + console.error(error); + + } +} + +function renderForm(birds:Bird[], renderElementId: string): void{ + try { + if(!birds || !Array.isArray(birds)) + throw new Error("birds is not an array"); + const html = birds + .map((birds) =>{ + + return ` +
                + +

                Bird Name:

                +

                ${birds.name}

                +

                Size Of The Bird:

                ${convertSize(birds.size)}

                +

                Main Color Of The Bird:

                +
                +

                Birds Location:

                +

                ${birds.locations}

                +

                Birds Action:

                +

                ${birds.action}

                +
                + `}) + + .join (" ") + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + + } +} + +function renderSelectLocation(locations:Area[], renderElementId: string):void{ + try { + if(!locations || !Array.isArray(locations)) + throw new Error("locations is not an array"); + const html = locations + .map((locations) =>{ + return ` + ` + + }) + .join (" ") + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + + } catch (error) { + console.log(error); + } + +} +function checksIfLocationExists(array:Area[] , value:string ): boolean{ + try { + const locationPicked = array.find(array => array.locations.toLowerCase() === value.toLowerCase()) + + if (!locationPicked) return false + else { + return true + } + } catch (error) { + console.error(error); + return false + + } +} +function filterLocations(ev){ + try { + ev.preventDefault(); + let birdsArray:Bird[] = []; + const inputSearchValue = ev.target.elements.birdSearch.value + if(inputSearchValue === "None"){ + renderForm(birds , "birdCardContainer"); + } + else{ + + + const findSearchArr = birds.filter(birds => birds.locations.toLocaleLowerCase() === inputSearchValue.toLocaleLowerCase()) + if(!birdsArray) return alert("no birds found") + birdsArray = findSearchArr + renderForm(birdsArray , "birdCardContainer"); + } + } catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/birdDisplay.css b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/birdDisplay.css new file mode 100644 index 000000000..ac2e4ea1e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/birdDisplay.css @@ -0,0 +1,93 @@ +* { + padding: 0; + margin: 0; + font-family: "Itim", cursive; +} + +.navbar { + display: flex; + width: 100%; + height: 80px; + background-color: #c3e6e2; +} +.navbar .navbarIcon { + width: 100px; +} +.navbar .menuWrapper { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.navbar .menuWrapper a { + color: #306b82; + padding: 20px; +} +.navbar .menuWrapper a:hover { + background-color: #dcf3fc; + cursor: pointer; + height: 40px; +} + +.addForm { + text-align: center; +} +.addForm #form { + display: none; + color: #dee9ed; + width: 100%; + align-items: center; + flex-direction: column; + background-color: #306b82; +} +.addForm #form datalist { + display: flex; + flex-direction: column; + justify-content: space-between; + writing-mode: vertical-lr; + width: 130px; +} +.addForm ::placeholder { + text-align: center; +} + +.locationSearch { + text-align: center; +} +.locationSearch #areaForm { + display: none; + color: #dee9ed; + width: 100%; + align-items: center; + background-color: #306b82; + flex-direction: column; +} + +.wrapper { + width: 100%; + height: 100%; + position: absolute; + display: inline-block; +} +.wrapper #birdCardContainer { + position: relative; + display: flex; + justify-content: center; + flex-wrap: wrap; +} +.wrapper #birdCardContainer .birdCard { + border: 3px solid #b188b7; + margin: 10px; + background-image: linear-gradient(20deg, #d4bce0, #76bfdc); + width: 250px; + height: 400px; + text-align: center; +} +.wrapper #birdCardContainer .birdCard img { + width: 150px; + height: 150px; +} +.wrapper #birdCardContainer .birdCard .displayColor { + width: 100%; + height: 25px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/birdsDisplay.js b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/birdsDisplay.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/control.js b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/control.js new file mode 100644 index 000000000..b72a3b87f --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/control.js @@ -0,0 +1,93 @@ +function handleForm(ev) { + try { + ev.preventDefault(); + var img = ev.target.elements.birdImg.value; + var name = ev.target.elements.birdName.value; + var size = ev.target.elements.birdSize.value; + var color = ev.target.elements.birdColor.value; + var location = ev.target.elements.newLocation.value; + var action = ev.target.elements.birdAction.value; + birds.push(new Bird(img, name, size, color, location, action)); + sendBirdsToStorage(); + renderForm(birds, "birdCardContainer"); + if (!checksIfLocationExists(locations, location)) { + locations.push(new Area(location)); + sendLocationToStorage(); + renderSelectLocation(locations, "birdSearch"); + } + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} +function renderForm(birds, renderElementId) { + try { + if (!birds || !Array.isArray(birds)) + throw new Error("birds is not an array"); + var html = birds + .map(function (birds) { + return "\n
                \n \n

                Bird Name:

                \n

                " + birds.name + "

                \n

                Size Of The Bird: " + convertSize(birds.size) + "

                \n

                Main Color Of The Bird:

                \n
                \n

                Birds Location:

                \n

                " + birds.locations + "

                \n

                Birds Action:

                \n

                " + birds.action + "

                \n
                \n "; + }) + .join(" "); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function renderSelectLocation(locations, renderElementId) { + try { + if (!locations || !Array.isArray(locations)) + throw new Error("locations is not an array"); + var html = locations + .map(function (locations) { + return "\n "; + }) + .join(" "); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.log(error); + } +} +function checksIfLocationExists(array, value) { + try { + var locationPicked = array.find(function (array) { return array.locations.toLowerCase() === value.toLowerCase(); }); + if (!locationPicked) + return false; + else { + return true; + } + } + catch (error) { + console.error(error); + return false; + } +} +function filterLocations(ev) { + try { + ev.preventDefault(); + var birdsArray = []; + var inputSearchValue_1 = ev.target.elements.birdSearch.value; + if (inputSearchValue_1 === "None") { + renderForm(birds, "birdCardContainer"); + } + else { + var findSearchArr = birds.filter(function (birds) { return birds.locations.toLocaleLowerCase() === inputSearchValue_1.toLocaleLowerCase(); }); + if (!birdsArray) + return alert("no birds found"); + birdsArray = findSearchArr; + renderForm(birdsArray, "birdCardContainer"); + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/helper.js b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/helper.js new file mode 100644 index 000000000..7b02f0913 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/helper.js @@ -0,0 +1,26 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} +var sizeCon = ""; +function convertSize(sizeValue) { + if (sizeValue == 0) { + sizeCon = "Sparrow-sized"; + return sizeCon; + } + if (sizeValue == 25) { + sizeCon = "Robin-Sized"; + return sizeCon; + } + if (sizeValue == 50) { + sizeCon = "Crow-sized"; + return sizeCon; + } + if (sizeValue == 75) { + sizeCon = "Falcon-sized"; + return sizeCon; + } + if (sizeValue == 100) { + sizeCon = "Goose-sized"; + return sizeCon; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/index.js b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/index.js new file mode 100644 index 000000000..b509e01f6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/index.js @@ -0,0 +1,55 @@ +var _a, _b; +hideUnhide(event); +hideUnhide2(event); +var birds = (_a = getBirdsFromStorage()) !== null && _a !== void 0 ? _a : []; +var locations = (_b = getLocationFromStorage()) !== null && _b !== void 0 ? _b : []; +pushToArray(); +addLocations(); +function sendBirdsToStorage() { + try { + if (!birds) + throw new Error("could not find birds "); + localStorage.setItem("birds", JSON.stringify(birds)); + } + catch (error) { + console.log(error); + } +} +function getBirdsFromStorage() { + try { + var birdsData = localStorage.getItem("birds"); + if (!birdsData) { + throw new Error("could not retrieve birds"); + } + var data = JSON.parse(birdsData); + renderForm(data, "birdCardContainer"); + return data; + } + catch (error) { + console.log(error); + } +} +function sendLocationToStorage() { + try { + if (!locations) + throw new Error("could not find locations"); + localStorage.setItem("locations", JSON.stringify(locations)); + } + catch (error) { + console.log(error); + } +} +function getLocationFromStorage() { + try { + var locationData = localStorage.getItem("locations"); + if (!locationData) { + throw new Error("could not retrieve locations2"); + } + var data = JSON.parse(locationData); + renderSelectLocation(data, "birdSearch"); + return data; + } + catch (error) { + console.log(error); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/model.js b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/model.js new file mode 100644 index 000000000..2e74ee402 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/model.js @@ -0,0 +1,116 @@ +var Bird = /** @class */ (function () { + function Bird(img, name, size, color, locations, action) { + this.img = img; + this.name = name; + this.size = size; + this.color = color; + this.locations = locations; + this.action = action; + this.uid = uid(); + } + return Bird; +}()); +var Area = /** @class */ (function () { + function Area(locations) { + this.locations = locations; + } + return Area; +}()); +function addLocations() { + var locationsArray = []; + locationsArray = [ + { + locations: "None" + }, + { + locations: "Desert" + }, + { + locations: "Forest" + }, + { + locations: "Lake" + }, + { + locations: "Plains" + } + ]; + if (locations.length < locationsArray.length) { + locations.push.apply(locations, locationsArray); + renderSelectLocation(locations, "birdSearch"); + return locations; + } +} +function pushToArray() { + var birdsArray = []; + birdsArray = [ + { + img: "https://i.natgeofe.com/k/68424626-f7d0-4275-8d50-0450b5800563/peregrine-falcon-wings-extended_2x1.jpg", + name: "Peregrine Falcon", + size: "75", + color: "#644a12", + locations: "Desert", + action: "Soaring", + uid: "ldwuigr1y5fr8zpzvps" + }, + { + img: "https://i.natgeofe.com/k/50fe4ce2-3d74-4da8-984d-887b7fb75005/GreatHornedOwl1_3x4.jpg", + name: "Great Horned Owl", + size: "75", + color: "#b5ab7d", + locations: "Forest", + action: "Soaring", + uid: "ldwuiguqyi27n1u7ad" + }, + { + img: "https://upload.wikimedia.org/wikipedia/commons/b/be/Hoopoe_taking_food_to_the_nest_%2819546723036%29.jpg", + name: "Hoopoe", + size: "25", + color: "#c58e30", + locations: "Plains", + action: "On The Ground", + uid: "ldwuigf3y5fr8zpzvps" + }, + { + img: "https://th.bing.com/th/id/R.693bb51766d00847a9d8a8b4dbd76c39?rik=qDdmf94IyAoVFw&pid=ImgRaw&r=0", + name: "Woodpecker", + size: "25", + color: "#ff0000", + locations: "Forest", + action: "Pecking", + uid: "ldwuigd2s5fr8zpzvps" + }, + { + img: "https://www.birdsbase.com/bbis_test/img/sub/44110/871978/1395735700251_602076.jpg", + name: "Egyptian Vulture", + size: "75", + color: "#ffffff", + locations: "Desert", + action: "Soaring", + uid: "ldwuigr1y5hn3zpzvps" + }, + { + img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Rose-ringed_parakeet_%28Psittacula_krameri_manillensis%29.jpg/220px-Rose-ringed_parakeet_%28Psittacula_krameri_manillensis%29.jpg", + name: "Rose-Ringed Parakeet", + size: "50", + color: "#0ddc09", + locations: "Forest", + action: "Soaring", + uid: "ldwuigr1y5fr8zpzvps" + }, + { + img: "https://img.haarets.co.il/img/1.9164857/1805327842.jpg?precrop=2470,1619,x0,y0&height=1200&width=1200", + name: "Common Kingfisher", + size: "25", + color: "#3fcac1", + locations: "Lake", + action: "Fishing", + uid: "ldwuigr1y5fr2gpzvps" + } + ]; + if (birds.length < birdsArray.length) { + birds.push.apply(birds, birdsArray); + renderForm(birds, "birdCardContainer"); + return birds; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/style.css b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/style.css new file mode 100644 index 000000000..7b95a3ef1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/style.css @@ -0,0 +1,68 @@ +* { + padding: 0; + margin: 0; + font-family: "Itim", cursive; +} + +body { + background-color: aliceblue; +} + +.navbar { + display: flex; + width: 100%; + height: 80px; + background-color: #c3e6e2; +} +.navbar a { + text-decoration: none; +} +.navbar .navbarIcon { + width: 100px; +} +.navbar .menuWrapper { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.navbar .menuWrapper a { + color: #306b82; + padding: 20px; +} +.navbar .menuWrapper a:hover { + background-color: #dcf3fc; + cursor: pointer; + height: 40px; +} + +.intro { + display: inline-block; +} +.intro .aboutUs { + display: flex; +} +.intro img { + padding: 2rem; + height: 300px; +} +.intro span { + font-size: 30px; +} +.intro p { + font-size: 20px; + align-self: center; +} +.intro .header2 { + padding: 5rem 0 5rem 0; + display: flex; +} +.intro .header2 img { + padding-left: 7rem; +} +.intro .header3 { + display: flex; +} +.intro .header3 img { + padding-left: 7rem; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/view.js b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/view.js new file mode 100644 index 000000000..c9629a55f --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/dist/view.js @@ -0,0 +1,26 @@ +var birdCardContainer = document.querySelector("#birdCardContainer"); +var form = document.querySelector("#form"); +var areaForm = document.querySelector("#areaForm"); +var resetSearch = document.querySelector("#resetSearch"); +function hideUnhide(ev) { + var form = document.getElementById("form"); + var form2 = document.getElementById("areaForm"); + if (form.style.display === "none") { + form.style.display = "flex"; + form2.style.display = "none"; + } + else { + form.style.display = "none"; + } +} +function hideUnhide2(ev) { + var form = document.getElementById("form"); + var form2 = document.getElementById("areaForm"); + if (form2.style.display === "none") { + form2.style.display = "flex"; + form.style.display = "none"; + } + else { + form2.style.display = "none"; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/helper.ts b/02-TypeScript/18-personalProject/Checked/Dor Bookra/helper.ts new file mode 100644 index 000000000..76a78ab3b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/helper.ts @@ -0,0 +1,29 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + var sizeCon:string = ""; + + function convertSize(sizeValue:number){ + +if(sizeValue == 0){ + sizeCon = "Sparrow-sized" + return sizeCon +} +if(sizeValue == 25){ + sizeCon = "Robin-Sized" + return sizeCon +} +if(sizeValue == 50){ + sizeCon = "Crow-sized" + return sizeCon + +} +if(sizeValue == 75){ + sizeCon = "Falcon-sized" + return sizeCon +} +if(sizeValue == 100){ + sizeCon = "Goose-sized" + return sizeCon +} +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/index.html b/02-TypeScript/18-personalProject/Checked/Dor Bookra/index.html new file mode 100644 index 000000000..c3f3b15aa --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/index.html @@ -0,0 +1,45 @@ + + + + + + + Birding-Spot + + + + + + + + + + + + + +
                + +
                + Birds +
                +
                + + +
                +
                + +

                About Birding-Spot
                Birding-Spot is all about birding! our site will help you to locate exactly the bird youre looking for!
                Encountered a bird!? please fill up the form and help others with their birding journey!

                +
                +
                + +

                Become one with nature!
                Birding requires a lot of patience, its all about becoming one with nature and not interrupting with the birds natural behavior.
                Only then youll be able to really take in whats happening under our noses on a daily basis!

                +
                +
                + + +

                We Care
                We care about nature deeply! Please when youre birding around dont leave any debris or leftovers that may harm nature.

                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/index.ts b/02-TypeScript/18-personalProject/Checked/Dor Bookra/index.ts new file mode 100644 index 000000000..6b59e12ba --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/index.ts @@ -0,0 +1,50 @@ +hideUnhide(event); +hideUnhide2(event); +const birds:Bird[] = getBirdsFromStorage ()??[]; +const locations:Area[] = getLocationFromStorage()??[]; +pushToArray() +addLocations() + + +function sendBirdsToStorage (){ + try { + if(!birds) throw new Error("could not find birds ") + localStorage.setItem("birds", JSON.stringify(birds)) + } catch (error) { + console.log(error); + + } +} +function getBirdsFromStorage (){ + try { + const birdsData = localStorage.getItem("birds") + if(!birdsData){ throw new Error("could not retrieve birds")} + const data = JSON.parse(birdsData) + renderForm(data,"birdCardContainer"); + return data + } catch (error) { + console.log(error); + } +} + + +function sendLocationToStorage (){ + try { + if (!locations) throw new Error("could not find locations") + localStorage.setItem("locations" , JSON.stringify(locations)) + } catch (error) { + console.log(error); + } +} + +function getLocationFromStorage (){ + try { + const locationData = localStorage.getItem("locations") + if(!locationData){ throw new Error("could not retrieve locations2")} + const data = JSON.parse(locationData) + renderSelectLocation(data, "birdSearch"); + return data + } catch (error) { + console.log(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/favicon.png b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/favicon.png new file mode 100644 index 000000000..be6f28a1c Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/favicon.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/navbaricon.png b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/navbaricon.png new file mode 100644 index 000000000..dd7c8c70d Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/navbaricon.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo1.png b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo1.png new file mode 100644 index 000000000..92cbfce93 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo1.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo2.jpg b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo2.jpg new file mode 100644 index 000000000..24f5fe745 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo2.jpg differ diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo3.png b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo3.png new file mode 100644 index 000000000..878f82dd7 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/sitelogo3.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/uploadImage.png b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/uploadImage.png new file mode 100644 index 000000000..cec8c8849 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Dor Bookra/media/uploadImage.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/model.ts b/02-TypeScript/18-personalProject/Checked/Dor Bookra/model.ts new file mode 100644 index 000000000..d87e725a5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/model.ts @@ -0,0 +1,128 @@ +class Bird{ + uid: string; + constructor( + public img: string , + public name: string , + public size: string , + public color: string , + public locations: string , + public action: string + ) + { + this.uid = uid(); + } +} + + +class Area{ + constructor( + public locations: string , + ) + { + } +} + + +function addLocations () { + let locationsArray:Area[] = []; + + locationsArray = [ + { + locations: "None" + }, + { + locations: "Desert" + }, + { + locations: "Forest" + }, + { + locations: "Lake" + }, + { + locations: "Plains" + } + ]; + if(locations.length < locationsArray.length){ + locations.push(...locationsArray) + renderSelectLocation(locations, "birdSearch") + return locations + } +} + + +function pushToArray(){ +let birdsArray:Bird[] = []; + +birdsArray = [ + { + img: "https://i.natgeofe.com/k/68424626-f7d0-4275-8d50-0450b5800563/peregrine-falcon-wings-extended_2x1.jpg", + name: "Peregrine Falcon", + size: "75", + color: "#644a12", + locations: "Desert", + action: "Soaring", + uid: "ldwuigr1y5fr8zpzvps" + }, + { + img: "https://i.natgeofe.com/k/50fe4ce2-3d74-4da8-984d-887b7fb75005/GreatHornedOwl1_3x4.jpg", + name: "Great Horned Owl", + size: "75", + color: "#b5ab7d", + locations: "Forest", + action: "Soaring", + uid: "ldwuiguqyi27n1u7ad" + }, + { + img: "https://upload.wikimedia.org/wikipedia/commons/b/be/Hoopoe_taking_food_to_the_nest_%2819546723036%29.jpg", + name: "Hoopoe", + size: "25", + color: "#c58e30", + locations: "Plains", + action: "On The Ground", + uid: "ldwuigf3y5fr8zpzvps" + }, + { + img: "https://th.bing.com/th/id/R.693bb51766d00847a9d8a8b4dbd76c39?rik=qDdmf94IyAoVFw&pid=ImgRaw&r=0", + name: "Woodpecker", + size: "25", + color: "#ff0000", + locations: "Forest", + action: "Pecking", + uid: "ldwuigd2s5fr8zpzvps" + }, + { + img: "https://www.birdsbase.com/bbis_test/img/sub/44110/871978/1395735700251_602076.jpg", + name: "Egyptian Vulture", + size: "75", + color: "#ffffff", + locations: "Desert", + action: "Soaring", + uid: "ldwuigr1y5hn3zpzvps" + }, + { + img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Rose-ringed_parakeet_%28Psittacula_krameri_manillensis%29.jpg/220px-Rose-ringed_parakeet_%28Psittacula_krameri_manillensis%29.jpg", + name: "Rose-Ringed Parakeet", + size: "50", + color: "#0ddc09", + locations: "Forest", + action: "Soaring", + uid: "ldwuigr1y5fr8zpzvps" + } + { + img: "https://img.haarets.co.il/img/1.9164857/1805327842.jpg?precrop=2470,1619,x0,y0&height=1200&width=1200", + name: "Common Kingfisher", + size: "25", + color: "#3fcac1", + locations: "Lake", + action: "Fishing", + uid: "ldwuigr1y5fr2gpzvps" + } + ]; + if(birds.length < birdsArray.length){ + birds.push(...birdsArray) + renderForm(birds,"birdCardContainer"); + return birds + } + +} diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.css b/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.css new file mode 100644 index 000000000..c25a4328a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.css @@ -0,0 +1,66 @@ +* { + padding: 0; + margin: 0; + font-family: "Itim", cursive; +} + +.navbar { + display: flex; + width: 100%; + height: 80px; + background-color: rgb(195, 230, 226); +} +.navbar .navbarIcon { + width: 100px; +} +.navbar .menuWrapper { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.navbar .menuWrapper a { + color: rgb(48, 107, 130); + padding: 20px; +} +.navbar .menuWrapper a:hover { + background-color: rgb(220, 243, 252); + cursor: pointer; + height: 40px; +} + +.addForm { + text-align: center; +} +.addForm #form { + display: none; + color: rgb(222, 233, 237); + width: 100%; + align-items: center; + flex-direction: column; + background-color: rgb(48, 107, 130); +} +.addForm #form datalist { + display: flex; + flex-direction: column; + justify-content: space-between; + -ms-writing-mode: tb-lr; + writing-mode: vertical-lr; + width: 130px; +} + +.addItemForm { + text-align: center; +} +.addItemForm #itemForm { + display: none; + color: rgb(222, 233, 237); + width: 100%; + align-items: center; + background-color: rgb(48, 107, 130); + flex-direction: column; +} +.addItemForm #itemForm #itemImg { + width: 15px; + height: 15px; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.css.map b/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.css.map new file mode 100644 index 000000000..b190df547 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,SAAA;EACA,4BAAA;ACCJ;;ADEA;EACI,aAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;ACCJ;ADAQ;EACI,YAAA;ACEZ;ADAI;EACQ,WAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACEZ;ADDoB;EACI,wBAAA;EACJ,aAAA;ACGpB;ADDoB;EACI,oCAAA;EACA,eAAA;EACA,YAAA;ACGxB;;ADEA;EACI,kBAAA;ACCJ;ADAI;EACI,aAAA;EACA,yBAAA;EACA,WAAA;EACA,mBAAA;EACA,sBAAA;EACA,mCAAA;ACER;ADDY;EACI,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,uBAAA;MAAA,yBAAA;EACA,YAAA;ACGhB;;ADEA;EACI,kBAAA;ACCJ;ADAI;EACI,aAAA;EACA,yBAAA;EACA,WAAA;EACA,mBAAA;EACA,mCAAA;EACA,sBAAA;ACER;ADDY;EACI,WAAA;EACA,YAAA;ACGhB","file":"style.css"} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.scss b/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.scss new file mode 100644 index 000000000..081bce0f5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/style.scss @@ -0,0 +1,74 @@ +*{ + padding: 0; + margin: 0; + font-family: 'Itim', cursive; +} + +body{ + background-color: aliceblue; +} + +.navbar{ + display: flex; + width: 100%; + height: 80px; + background-color: rgb(195, 230, 226); + a{ + text-decoration: none; + } + .navbarIcon{ + width: 100px; + } + .menuWrapper{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + a{ + color: rgb(48, 107, 130); + padding: 20px; + } + a:hover{ + background-color:rgb(220, 243, 252) ; + cursor: pointer; + height: 40px; + } + } +} + + +.intro{ + display: inline-block; + .aboutUs{ + display: flex; + } + img{ + padding:2rem; + height: 300px; + } + span{ + font-size: 30px + } + p{ + font-size: 20px; + + align-self: center; + } + .header2{ + padding: 5rem 0 5rem 0; + display: flex; + img{ + padding-left: 7rem; + } + } + .header3{ + display: flex; + img{ + padding-left: 7rem; + } + } + + +} + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Dor Bookra/view.ts b/02-TypeScript/18-personalProject/Checked/Dor Bookra/view.ts new file mode 100644 index 000000000..06d2e2124 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Dor Bookra/view.ts @@ -0,0 +1,31 @@ +const birdCardContainer = document.querySelector("#birdCardContainer"); +const form = document.querySelector("#form"); +const areaForm = document.querySelector("#areaForm"); +const resetSearch = document.querySelector("#resetSearch"); + +function hideUnhide(ev){ + + var form = document.getElementById("form")!; + var form2 = document.getElementById("areaForm")!; + if (form.style.display === "none") { + form.style.display = "flex"; + form2.style.display = "none"; + } else { + form.style.display = "none"; + } + } + +function hideUnhide2(ev){ + var form = document.getElementById("form")!; + var form2 = document.getElementById("areaForm")!; + if (form2.style.display === "none") { + form2.style.display = "flex"; + form.style.display = "none"; + + } else { + form2.style.display = "none"; + } + } + + + diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/.vscode/settings.json b/02-TypeScript/18-personalProject/Checked/Itai-G/.vscode/settings.json new file mode 100644 index 000000000..8f611f638 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "liveServer.settings.port": 5501, + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/control.ts b/02-TypeScript/18-personalProject/Checked/Itai-G/control.ts new file mode 100644 index 000000000..86c8a18bb --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/control.ts @@ -0,0 +1,179 @@ +function gameDraw(){ + ball.draw() + paddle1.draw(); + paddle2.draw(); +} +function gameUpdate() { + ball.Update(); + paddle1.Update(); + paddleCollisonWithTheEdges(paddle1); + paddleCollisonWithTheEdges(paddle2); + ballCollisonWithEdges(ball); + ballPaddleCollision(ball, paddle1); + ballPaddleCollision(ball, paddle2); + playersAI(ball , paddle2); + increseScore(ball, paddle1, paddle2); +} + +function gameLoop(){ + req = requestAnimationFrame(gameLoop); + if(gameOver) return cancelAnimationFrame(req) + ctx.clearRect(0,0,canvas.width, canvas.height); + gameUpdate(); + gameDraw(); +} + +function ballCollisonWithEdges(ball: Ball) { + try { + if (ball.pos.y + ball.radius >= canvas.height) { + ball.velocity.y *= -1; + } + if (ball.pos.y - ball.radius <= 0) { + ball.velocity.y *= -1; + } + } catch (error) { + console.error("eroor"); + } +} + +function paddleCollisonWithTheEdges(paddle: Paddle) { + if (paddle.pos.y <= 0) { + paddle.pos.y = 0; + } + if (paddle.pos.y + paddle.height >= canvas.height) { + paddle.pos.y = canvas.height - paddle.height; + } +} + +function ballPaddleCollision(ball: Ball, paddle: Paddle) { + let dx = Math.abs(ball.pos.x - paddle.GetCenter().x); + let dy = Math.abs(ball.pos.y - paddle.GetCenter().y); + + if ( + dx <= ball.radius + paddle.GetHalfWidth() && + dy <= paddle.GetHalfHeight() + ball.radius + ) { + ball.velocity.x *= -1; + } +} + +function playersAI(ball: Ball, paddle: Paddle) { + try { + if (ball.velocity.x > 0) { + if (ball.pos.y > paddle.pos.y) { + paddle.pos.y += paddle.velocity.y; + + if (paddle.pos.y + paddle.height >= canvas.height) { + paddle.pos.y = canvas.height - paddle.height; + } + } + if (ball.pos.y < paddle.pos.y) { + paddle.pos.y -= paddle.velocity.y; + + if (paddle.pos.y <= 0) { + paddle.pos.y = 0; + } + } + } + } catch (error) { + console.error("problem with the"); + } +} + +function resetBall(ball: Ball) { + if (ball.velocity.x > 0) { + ball.pos.x = canvas.width - 150; + ball.pos.y = Math.random() * (canvas.height - 200) + 100; + } + if (ball.velocity.x < 0) { + ball.pos.x = 150; + ball.pos.y = Math.random() * (canvas.height - 200) + 100; + } + ball.velocity.x *= -1; + ball.velocity.y *= -1; +} + +function increseScore(ball: Ball, paddle1: Paddle, paddle2: Paddle) { + try { + if (gameOver) return; + if (ball.pos.x <= ball.radius) { + paddle2.score += 1; + let player2Score = document.getElementById("player2Score"); + if (player2Score) { + player2Score.innerHTML = paddle2.score.toString(); + resetBall(ball); + if (paddle2.score == 10) { + gameOver = true; + } + } + } + + if (ball.pos.x >= canvas.width + ball.radius) { + paddle1.score += 1; + let player1Score = document.getElementById("player1Score"); + if (player1Score) { + player1Score.innerHTML = paddle1.score.toString(); + resetBall(ball); + if (paddle1.score == 10) { + gameOver = true; + } + } + } + } catch (error) { + console.error("score problem"); + } +} + +function endGame(paddle1: Paddle, paddle2: Paddle) { + let endScreen = document.getElementById("endGame"); + if (endScreen) { + endScreen.style.display = "flex"; + let winner = document.getElementById("winner"); + if (winner) { + if (paddle1.score == 10) { + winner.innerHTML = "Player 1 Wins!"; + if (document.getElementById("bigAd")) { + document.getElementById("bigAd").style.display = "block"; + } + } else if (paddle2.score == 10) { + winner.innerHTML = "Computer Wins!"; + if (document.getElementById("bigAdComputer")) { + document.getElementById("bigAdComputer").style.display = "block"; + } + } + } + } + } + + + + function resetGame() { + let endScreen = document.getElementById("endGame"); + if (endScreen) { + endScreen.style.display = "none"; + } + let player1Score = document.getElementById("player1Score"); + let player2Score = document.getElementById("player2Score"); + if (player1Score && player2Score) { + player1Score.innerHTML = "0"; + player2Score.innerHTML = "0"; + } + paddle1.score = 0; + paddle2.score = 0; + + let bigAd = document.getElementById("bigAd"); + if (bigAd) { + bigAd.style.display = "none"; + } + let bigAdComputer = document.getElementById("bigAdComputer"); + if (bigAdComputer) { + bigAdComputer.style.display = "none"; + } + } + + let resetBtn = document.getElementById("resetBtn"); + if (resetBtn) { + resetBtn.addEventListener("click", function () { + resetGame(); + }); + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/control.js b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/control.js new file mode 100644 index 000000000..ee0406840 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/control.js @@ -0,0 +1,166 @@ +function gameDraw() { + ball.draw(); + paddle1.draw(); + paddle2.draw(); +} +function gameUpdate() { + ball.Update(); + paddle1.Update(); + paddleCollisonWithTheEdges(paddle1); + paddleCollisonWithTheEdges(paddle2); + ballCollisonWithEdges(ball); + ballPaddleCollision(ball, paddle1); + ballPaddleCollision(ball, paddle2); + playersAI(ball, paddle2); + increseScore(ball, paddle1, paddle2); +} +function gameLoop() { + req = requestAnimationFrame(gameLoop); + if (gameOver) + return cancelAnimationFrame(req); + ctx.clearRect(0, 0, canvas.width, canvas.height); + gameUpdate(); + gameDraw(); +} +function ballCollisonWithEdges(ball) { + try { + if (ball.pos.y + ball.radius >= canvas.height) { + ball.velocity.y *= -1; + } + if (ball.pos.y - ball.radius <= 0) { + ball.velocity.y *= -1; + } + } + catch (error) { + console.error("eroor"); + } +} +function paddleCollisonWithTheEdges(paddle) { + if (paddle.pos.y <= 0) { + paddle.pos.y = 0; + } + if (paddle.pos.y + paddle.height >= canvas.height) { + paddle.pos.y = canvas.height - paddle.height; + } +} +function ballPaddleCollision(ball, paddle) { + var dx = Math.abs(ball.pos.x - paddle.GetCenter().x); + var dy = Math.abs(ball.pos.y - paddle.GetCenter().y); + if (dx <= ball.radius + paddle.GetHalfWidth() && + dy <= paddle.GetHalfHeight() + ball.radius) { + ball.velocity.x *= -1; + } +} +function playersAI(ball, paddle) { + try { + if (ball.velocity.x > 0) { + if (ball.pos.y > paddle.pos.y) { + paddle.pos.y += paddle.velocity.y; + if (paddle.pos.y + paddle.height >= canvas.height) { + paddle.pos.y = canvas.height - paddle.height; + } + } + if (ball.pos.y < paddle.pos.y) { + paddle.pos.y -= paddle.velocity.y; + if (paddle.pos.y <= 0) { + paddle.pos.y = 0; + } + } + } + } + catch (error) { + console.error("problem with the"); + } +} +function resetBall(ball) { + if (ball.velocity.x > 0) { + ball.pos.x = canvas.width - 150; + ball.pos.y = Math.random() * (canvas.height - 200) + 100; + } + if (ball.velocity.x < 0) { + ball.pos.x = 150; + ball.pos.y = Math.random() * (canvas.height - 200) + 100; + } + ball.velocity.x *= -1; + ball.velocity.y *= -1; +} +function increseScore(ball, paddle1, paddle2) { + try { + if (gameOver) + return; + if (ball.pos.x <= ball.radius) { + paddle2.score += 1; + var player2Score = document.getElementById("player2Score"); + if (player2Score) { + player2Score.innerHTML = paddle2.score.toString(); + resetBall(ball); + if (paddle2.score == 10) { + gameOver = true; + } + } + } + if (ball.pos.x >= canvas.width + ball.radius) { + paddle1.score += 1; + var player1Score = document.getElementById("player1Score"); + if (player1Score) { + player1Score.innerHTML = paddle1.score.toString(); + resetBall(ball); + if (paddle1.score == 10) { + gameOver = true; + } + } + } + } + catch (error) { + console.error("score problem"); + } +} +function endGame(paddle1, paddle2) { + var endScreen = document.getElementById("endGame"); + if (endScreen) { + endScreen.style.display = "flex"; + var winner = document.getElementById("winner"); + if (winner) { + if (paddle1.score == 10) { + winner.innerHTML = "Player 1 Wins!"; + if (document.getElementById("bigAd")) { + document.getElementById("bigAd").style.display = "block"; + } + } + else if (paddle2.score == 10) { + winner.innerHTML = "Computer Wins!"; + if (document.getElementById("bigAdComputer")) { + document.getElementById("bigAdComputer").style.display = "block"; + } + } + } + } +} +function resetGame() { + var endScreen = document.getElementById("endGame"); + if (endScreen) { + endScreen.style.display = "none"; + } + var player1Score = document.getElementById("player1Score"); + var player2Score = document.getElementById("player2Score"); + if (player1Score && player2Score) { + player1Score.innerHTML = "0"; + player2Score.innerHTML = "0"; + } + paddle1.score = 0; + paddle2.score = 0; + var bigAd = document.getElementById("bigAd"); + if (bigAd) { + bigAd.style.display = "none"; + } + var bigAdComputer = document.getElementById("bigAdComputer"); + if (bigAdComputer) { + bigAdComputer.style.display = "none"; + } +} +var resetBtn = document.getElementById("resetBtn"); +if (resetBtn) { + resetBtn.addEventListener("click", function () { + resetGame(); + }); +} diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/helpers.js new file mode 100644 index 000000000..f20b3d407 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/helpers.js @@ -0,0 +1,3 @@ +function vec2(x, y) { + return { x: x, y: y }; +} diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/index.js b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/index.js new file mode 100644 index 000000000..356890619 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/index.js @@ -0,0 +1 @@ +gameLoop(); diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/model.js b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/model.js new file mode 100644 index 000000000..9f8302811 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/model.js @@ -0,0 +1,84 @@ +var Ball = /** @class */ (function () { + function Ball(pos, velocity, radius) { + this.pos = pos; + this.velocity = velocity; + this.radius = radius; + this.pos = pos; + this.velocity = velocity; + this.radius = radius; + } + Ball.prototype.Update = function () { + this.pos.x += this.velocity.x; + this.pos.y += this.velocity.y; + }; + Ball.prototype.draw = function () { + ctx.fillStyle = "#33ff00"; + ctx.strokeStyle = "#33ff00"; + ctx.beginPath(); + ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2); + ctx.fill(); + ctx.stroke(); + }; + return Ball; +}()); +var Paddle = /** @class */ (function () { + function Paddle(pos, velocity, width, height, score) { + this.pos = pos; + this.velocity = velocity; + this.width = width; + this.height = height; + this.score = score; + this.pos = pos; + this.velocity = velocity; + this.width = width; + this.height = height; + this.score = 0; + } + Paddle.prototype.Update = function () { + if (isDownKeyPressed) { + this.pos.y -= this.velocity.y; + } + if (isUpKeyPressed) { + this.pos.y += this.velocity.y; + } + }; + Paddle.prototype.draw = function () { + ctx.fillStyle = "#ggff00"; + ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height); + }; + Paddle.prototype.GetHalfWidth = function () { + return this.width / 2; + }; + Paddle.prototype.GetHalfHeight = function () { + return this.height / 2; + }; + Paddle.prototype.GetCenter = function () { + return vec2(this.pos.x + this.GetHalfWidth(), this.pos.y + this.GetHalfHeight()); + }; + return Paddle; +}()); +var ball = new Ball({ x: 200, y: 200 }, { x: 3, y: 3 }, 10); +var paddle1 = new Paddle({ x: 0, y: 50 }, { x: 0, y: 5 }, 20, 120, 0); +var paddle2 = new Paddle({ x: canvas.width - 20, y: 80 }, { x: 0, y: 1.9 }, 20, 120, 0); +var isUpKeyPressed = false; +var isDownKeyPressed = false; +var gameOver; +var req; +window.addEventListener("keydown", function (e) { + if (e.keyCode === 40) { + isUpKeyPressed = true; + isDownKeyPressed = false; + } + else if (e.keyCode === 38) { + isUpKeyPressed = false; + isDownKeyPressed = true; + } +}); +window.addEventListener("keyup", function (e) { + if (e.keyCode === 40) { + isUpKeyPressed = false; + } + else if (e.keyCode === 38) { + isDownKeyPressed = false; + } +}); diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/style.css b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/style.css new file mode 100644 index 000000000..e53f5efb9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/style.css @@ -0,0 +1,80 @@ +* { + margin: 0; + padding: 0; +} + +body { + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + height: 100vh; + background-image: url("https://blog.sklambert.com/wp-content/uploads/2012/09/bg.png"); +} +body #head { + position: absolute; + top: 1rem; + color: blue; +} + +#canvas { + border: 5px solid white; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + z-index: 0; +} + +h1 { + color: red; + font-family: sans-serif; + font-size: 4rem; + position: absolute; + bottom: 1rem; +} + +#player1Score { + left: 2rem; +} + +#player2Score { + right: 4rem; +} + +.endGame { + color: red; + position: absolute; + background-color: darkgreen; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 10rem; +} + +#bigAd { + position: absolute; + background-color: green; + display: none; +} + +#bigAdComputer { + position: absolute; + display: none; +} + +#resetBtn { + position: absolute; + align-items: center; + bottom: 1vh; + color: red; + padding: 10px 20px; + border: none; + border-radius: 25px; + background-color: blue; + color: white; + font-size: 16px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/view.js b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/view.js new file mode 100644 index 000000000..c8ebf1c1e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/view.js @@ -0,0 +1,9 @@ +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var bigAd = document.getElementById("bigAd"); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight * 0.7; +document.onresize = function () { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight * 0.7; +}; diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/dist/welcomeStyle.css b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/welcomeStyle.css new file mode 100644 index 000000000..8dee58f88 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/dist/welcomeStyle.css @@ -0,0 +1,16 @@ +body { + background-color: yellow; +} + +.start-game-btn { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: block; + width: 100px; + height: 20px; + margin: auto; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/helpers.ts b/02-TypeScript/18-personalProject/Checked/Itai-G/helpers.ts new file mode 100644 index 000000000..d5f3656f4 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/helpers.ts @@ -0,0 +1,3 @@ +function vec2(x: number, y: number) { + return { x: x, y: y }; +} diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/index.html b/02-TypeScript/18-personalProject/Checked/Itai-G/index.html new file mode 100644 index 000000000..ab5504e5d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + + +

                Pong Game By itai

                + +

                0

                +

                0

                +
                + Congratulations! You won the game! + +
                +
                You lost! +
                + + diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/index.ts b/02-TypeScript/18-personalProject/Checked/Itai-G/index.ts new file mode 100644 index 000000000..cc5953623 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/index.ts @@ -0,0 +1,4 @@ + + + +gameLoop(); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/model.ts b/02-TypeScript/18-personalProject/Checked/Itai-G/model.ts new file mode 100644 index 000000000..f9da8ef2d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/model.ts @@ -0,0 +1,91 @@ +class Ball { + constructor( + public pos: { x: number; y: number }, + public velocity: { x: number; y: number }, + public radius: number + ) { + this.pos = pos; + this.velocity = velocity; + this.radius = radius; + } + + Update() { + this.pos.x += this.velocity.x; + this.pos.y += this.velocity.y; + } + + draw() { + ctx.fillStyle = "#33ff00"; + ctx.strokeStyle = "#33ff00"; + ctx.beginPath(); + ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2); + ctx.fill(); + ctx.stroke(); + } +} + +class Paddle { + constructor( + public pos: { x: number; y: number }, + public velocity: { x: number; y: number }, + public width: number, + public height: number, + public score: number + ) { + this.pos = pos; + this.velocity = velocity; + this.width = width; + this.height = height; + this.score = 0; + } + Update() { + if (isDownKeyPressed) { + this.pos.y -= this.velocity.y; + } + if (isUpKeyPressed) { + this.pos.y += this.velocity.y; + } + } + + draw() { + ctx.fillStyle = "#ggff00"; + ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height); + } + + GetHalfWidth (){ + return this.width / 2; + } + GetHalfHeight(){ + return this.height /2; + } + GetCenter(){ + return vec2(this.pos.x + this.GetHalfWidth(),this.pos.y + this.GetHalfHeight()); + } +} + +const ball = new Ball({ x: 200, y: 200 }, { x: 3, y: 3 }, 10); +const paddle1 = new Paddle({ x: 0, y: 50 }, { x: 0, y: 5 }, 20, 120,0); +const paddle2 = new Paddle({ x: canvas.width - 20, y: 80 }, { x: 0, y: 1.9 }, 20, 120,0); +let isUpKeyPressed = false; +let isDownKeyPressed = false; +let gameOver: boolean; +let req:number; + + +window.addEventListener("keydown", function (e) { + if (e.keyCode === 40) { + isUpKeyPressed = true; + isDownKeyPressed = false; + } else if (e.keyCode === 38) { + isUpKeyPressed = false; + isDownKeyPressed = true; + } +}); + +window.addEventListener("keyup", function (e) { + if (e.keyCode === 40) { + isUpKeyPressed = false; + } else if (e.keyCode === 38) { + isDownKeyPressed = false; + } + }); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/style.scss b/02-TypeScript/18-personalProject/Checked/Itai-G/style.scss new file mode 100644 index 000000000..174376d75 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/style.scss @@ -0,0 +1,78 @@ +* { + margin: 0; + padding: 0; +} + +body { + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + height: 100vh; + background-image: url("https://blog.sklambert.com/wp-content/uploads/2012/09/bg.png"); + + #head { + position: absolute; + top: 1rem; + color: blue; + } +} + +#canvas { + border: 5px solid white; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + z-index: 0; +} + +h1 { + color: red; + font-family: sans-serif; + font-size: 4rem; + position: absolute; + bottom: 1rem; +} +#player1Score { + left: 2rem; +} +#player2Score { + right: 4rem; +} +.endGame { + color: red; + position: absolute; + background-color: darkgreen; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 10rem; +} + +#bigAd { + position: absolute; + background-color: green; + display: none; +} + +#bigAdComputer { + position: absolute; + display: none; +} + +#resetBtn { + position: absolute; + align-items: center; + bottom: 1vh; + color: red; + padding: 10px 20px; + border: none; + border-radius: 25px; + background-color: blue; + color: white; + font-size: 16px; +} diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/view.ts b/02-TypeScript/18-personalProject/Checked/Itai-G/view.ts new file mode 100644 index 000000000..262e729a7 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/view.ts @@ -0,0 +1,12 @@ +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); +const bigAd = document.getElementById("bigAd") as HTMLDivElement; + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight * 0.7; + +document.onresize = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight * 0.7; +}; + diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/welcome.html b/02-TypeScript/18-personalProject/Checked/Itai-G/welcome.html new file mode 100644 index 000000000..b942971c2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/welcome.html @@ -0,0 +1,15 @@ + + + + + + + WelcomePongGame + + + +

                Welcome to My Pong Version Game Page

                +

                Click the button below to start the game

                + Start Game + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Itai-G/welcomeStyle.scss b/02-TypeScript/18-personalProject/Checked/Itai-G/welcomeStyle.scss new file mode 100644 index 000000000..faf87e53e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Itai-G/welcomeStyle.scss @@ -0,0 +1,15 @@ +body{ + background-color: yellow; +} +.start-game-btn { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: block; + width: 100px; + height: 20px; + margin: auto; + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/control.ts b/02-TypeScript/18-personalProject/Checked/Karin-levi/control.ts new file mode 100644 index 000000000..2b549ff57 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/control.ts @@ -0,0 +1,108 @@ +const karin = new User("karin", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1CnvMjinUCEM2s7p0YZxquRpO7V-gpT0SGA&usqp=CAU"); +const nir = new User("nir", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgOcVGtd-GSmu1kaozZep0x0O4nT66Md8B-A&usqp=CAU"); +const dana = new User("dana", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK6HrnONI6TGfAQl6JXyOiq21TriWfInFZjw&usqp=CAU"); +const or = new User("or", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT64gicYzfA_pUwGmr1ai6QqGt9-Ij5TF6l-A&usqp=CAU"); +const romi = new User("romi", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_R9oVsDOIFGMk1vq58POWKuFI9k8Civm2yGgx64h1mxEJVu8PorEdKQABQTj35AsNme0&usqp=CAU"); +const yarin = new User("yarin", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDOGPyN5g-DVZmsEi95Eg7mlmW7lBmr_1FDw&usqp=CAU"); +const ofek = new User("ofek", "https://charts.co.il/wp-content/uploads/2020/09/dancing-dave-minion-510835_640.jpg"); +const hila = new User("hila", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7slaWY5sTSlSkkG47gb9-NHp9OiLrLgQLIw&usqp=CAU"); +const nicole = new User("nicole", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsZOwra4-Bwh4iZcmxHe9mMPP5yoNE4d3ijGNI1MMiydGwbN7NB7qr5yPFPaYR3Gyk7ZY&usqp=CAU"); +const shiran = new User("shiran", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5HrNXZobQL1VAI48d0D8dHRtk_tvYC_EugHxOkE0tvQPlKSt36aqyuHdVV4zxVk2bkYg&usqp=CAU"); + + +const review1 = new Review(karin, "this song is amazing"); +const review2 = new Review(nir, "The best of the best!!!"); +const review3 = new Review(dana, "unlike this song"); +const review4 = new Review(or, "wowwww!! i like it"); +const review5 = new Review(romi, "sweet memories with this song..."); +const review6 = new Review(yarin, "Back to the 90s used to be best years for music"); +const review7 = new Review(ofek, "perfect song"); +const review8 = new Review(hila, "Love Love Love"); +const review9 = new Review(nicole, "great voice, exceptional singer!"); +const review10 = new Review(shiran, "disappointing"); + + +const video1 = new Video("https://www.youtube.com/embed/9ls0Eh79Olc", "Summer Mix 2023 | Avicii", "769987 views", "87678 likes", [review1, review4, review10]); +const video2 = new Video("https://www.youtube.com/embed/zE-a5eqvlv8", "Selena Gomez - Calm Down", "45600 views", "49024 likes", [review8, review9, review10, review3, review5]); +const video3 = new Video("https://www.youtube.com/embed/4lD2h0QO0uI", "Jordyn Reyna & Eryn - Just Imagine", "198 views", "157 likes", [review10, review4, review9, review3]); +const video4 = new Video("https://www.youtube.com/embed/6jZVsr7q-tE", "The Greatest Showman - Never Enough", "454000 views", "234899 likes", [review7, review2]); +const video5 = new Video("https://www.youtube.com/embed/emZurjNwj60", "EMIL, BO, Kenedi", "172000 views", "16000 likes", [review5, review1, review9]); +const video6 = new Video("https://www.youtube.com/embed/Hgt3lpcGYd4", "Shrink '21 (Andy Galea Dub Mix)", "4699 views", "3245 likes", [review10, review4, review1]); +const video7 = new Video("https://www.youtube.com/embed/-GNIxkC1jZA", "Me Gustas Tanto - Reykon el Líder", "231000 views", "20000 likes", [review3, review7]); +const video8 = new Video("https://www.youtube.com/embed/JPOV9eIo1QY", "Party is In the Air (Original Mix)", "3452 views", "119 likes", [review1, review10, review2, review3, review6, review8]); + + +const videos: Video[] = [video1, video2, video3, video4, video5, video6, video7, video8] + + +function renderVideos(): string { + try { + let html = `
                ` + html += videos + .map((video) => { + return ` +
                +
                + +
                +
                ${video.name}
                +
                ${video.views}
                +
                ${video.likes}
                + +
                + `; + }) + .join(" "); + html += `
                ` + + return html; + } catch (error) { + console.error(error); + return ""; + } + +} + + +function handleMoveToVideoPage(uid: string) { + const video = videos.find(element => element.uid == uid); + const videoData = JSON.stringify(video); + localStorage.setItem('video', videoData); + window.location.href = './video.html'; +} + + +function renderVideoHtml(video: Video): string { + try { + let html = `
                +
                + +
                +
                ${video.name}
                +
                ${video.views}
                +
                ${video.likes}
                + ` + debugger + html += video.reviews + .map((review) => { + return ` +
                +
                +
                +
                ${review.user.name}
                +
                ${review.review}
                +
                + `; + }) + .join(" "); + html += `
                ` + + return html; + } catch (error) { + console.error(error); + return ""; + } + +} + + diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/control.js b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/control.js new file mode 100644 index 000000000..5ee96e212 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/control.js @@ -0,0 +1,68 @@ +var karin = new User("karin", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1CnvMjinUCEM2s7p0YZxquRpO7V-gpT0SGA&usqp=CAU"); +var nir = new User("nir", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgOcVGtd-GSmu1kaozZep0x0O4nT66Md8B-A&usqp=CAU"); +var dana = new User("dana", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK6HrnONI6TGfAQl6JXyOiq21TriWfInFZjw&usqp=CAU"); +var or = new User("or", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT64gicYzfA_pUwGmr1ai6QqGt9-Ij5TF6l-A&usqp=CAU"); +var romi = new User("romi", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_R9oVsDOIFGMk1vq58POWKuFI9k8Civm2yGgx64h1mxEJVu8PorEdKQABQTj35AsNme0&usqp=CAU"); +var yarin = new User("yarin", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDOGPyN5g-DVZmsEi95Eg7mlmW7lBmr_1FDw&usqp=CAU"); +var ofek = new User("ofek", "https://charts.co.il/wp-content/uploads/2020/09/dancing-dave-minion-510835_640.jpg"); +var hila = new User("hila", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7slaWY5sTSlSkkG47gb9-NHp9OiLrLgQLIw&usqp=CAU"); +var nicole = new User("nicole", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsZOwra4-Bwh4iZcmxHe9mMPP5yoNE4d3ijGNI1MMiydGwbN7NB7qr5yPFPaYR3Gyk7ZY&usqp=CAU"); +var shiran = new User("shiran", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5HrNXZobQL1VAI48d0D8dHRtk_tvYC_EugHxOkE0tvQPlKSt36aqyuHdVV4zxVk2bkYg&usqp=CAU"); +var review1 = new Review(karin, "this song is amazing"); +var review2 = new Review(nir, "The best of the best!!!"); +var review3 = new Review(dana, "unlike this song"); +var review4 = new Review(or, "wowwww!! i like it"); +var review5 = new Review(romi, "sweet memories with this song..."); +var review6 = new Review(yarin, "Back to the 90s used to be best years for music"); +var review7 = new Review(ofek, "perfect song"); +var review8 = new Review(hila, "Love Love Love"); +var review9 = new Review(nicole, "great voice, exceptional singer!"); +var review10 = new Review(shiran, "disappointing"); +var video1 = new Video("https://www.youtube.com/embed/9ls0Eh79Olc", "Summer Mix 2023 | Avicii", "769987 views", "87678 likes", [review1, review4, review10]); +var video2 = new Video("https://www.youtube.com/embed/zE-a5eqvlv8", "Selena Gomez - Calm Down", "45600 views", "49024 likes", [review8, review9, review10, review3, review5]); +var video3 = new Video("https://www.youtube.com/embed/4lD2h0QO0uI", "Jordyn Reyna & Eryn - Just Imagine", "198 views", "157 likes", [review10, review4, review9, review3]); +var video4 = new Video("https://www.youtube.com/embed/6jZVsr7q-tE", "The Greatest Showman - Never Enough", "454000 views", "234899 likes", [review7, review2]); +var video5 = new Video("https://www.youtube.com/embed/emZurjNwj60", "EMIL, BO, Kenedi", "172000 views", "16000 likes", [review5, review1, review9]); +var video6 = new Video("https://www.youtube.com/embed/Hgt3lpcGYd4", "Shrink '21 (Andy Galea Dub Mix)", "4699 views", "3245 likes", [review10, review4, review1]); +var video7 = new Video("https://www.youtube.com/embed/-GNIxkC1jZA", "Me Gustas Tanto - Reykon el Líder", "231000 views", "20000 likes", [review3, review7]); +var video8 = new Video("https://www.youtube.com/embed/JPOV9eIo1QY", "Party is In the Air (Original Mix)", "3452 views", "119 likes", [review1, review10, review2, review3, review6, review8]); +var videos = [video1, video2, video3, video4, video5, video6, video7, video8]; +function renderVideos() { + try { + var html = "
                "; + html += videos + .map(function (video) { + return "\n
                \n
                \n \n
                \n
                " + video.name + "
                \n
                " + video.views + "
                \n
                " + video.likes + "
                \n \n
                \n "; + }) + .join(" "); + html += "
                "; + return html; + } + catch (error) { + console.error(error); + return ""; + } +} +function handleMoveToVideoPage(uid) { + var video = videos.find(function (element) { return element.uid == uid; }); + var videoData = JSON.stringify(video); + localStorage.setItem('video', videoData); + window.location.href = './video.html'; +} +function renderVideoHtml(video) { + try { + var html = "
                \n
                \n \n
                \n
                " + video.name + "
                \n
                " + video.views + "
                \n
                " + video.likes + "
                \n "; + debugger; + html += video.reviews + .map(function (review) { + return "\n
                \n
                \n \"\"
                \n
                " + review.user.name + "
                \n
                " + review.review + "
                \n
                \n "; + }) + .join(" "); + html += "
                "; + return html; + } + catch (error) { + console.error(error); + return ""; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/index.js b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/index.js new file mode 100644 index 000000000..393cf04ba --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/index.js @@ -0,0 +1,4 @@ +var renderedVideos = renderVideos(); +if (videoWrapper != null) { + videoWrapper.innerHTML = renderedVideos; +} diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/indexStyle.css b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/indexStyle.css new file mode 100644 index 000000000..ff390d276 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/indexStyle.css @@ -0,0 +1,63 @@ +body { + background-color: rgba(0, 0, 0, 0.859); +} +body .headerLine { + height: 100px; + width: 600px; + display: flex; + justify-content: space-between; + border: 2px; +} +body .headerLine__logo { + height: 200px; + width: 300px; +} +body .headerLine__logo img { + height: 200px; + width: 200px; +} +body .headerLine__search { + height: 100px; + width: 400px; + background-color: white; +} +body .wrapper { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + padding-left: 35px; + padding-top: 40px; +} +body .wrapper__video { + height: 300px; + background-color: white; + color: black; + border-radius: 20px; + border-color: #1a1717; + border-width: 1px; +} +body .wrapper__video__videoLink { + height: 220px; + width: 100%; +} +body .wrapper__video__videoName { + height: 25px; + width: 100%; + font-size: medium; + font-weight: bold; + padding-top: 2px; + margin-left: 5px; +} +body .wrapper__video__viewsNumber { + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; +} +body .wrapper__video__viewsLikes { + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/model.js b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/model.js new file mode 100644 index 000000000..707912531 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/model.js @@ -0,0 +1,25 @@ +var Video = /** @class */ (function () { + function Video(link, name, views, likes, reviews) { + this.link = link; + this.name = name; + this.views = views; + this.likes = likes; + this.reviews = reviews; + this.uid = uid(); + } + return Video; +}()); +var User = /** @class */ (function () { + function User(name, img) { + this.name = name; + this.img = img; + } + return User; +}()); +var Review = /** @class */ (function () { + function Review(user, review) { + this.user = user; + this.review = review; + } + return Review; +}()); diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/style.css b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/style.css new file mode 100644 index 000000000..d12552f61 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/style.css @@ -0,0 +1,60 @@ +body { + background-color: rgba(5, 5, 5, 0.859); +} +body .headerLine { + height: 200px; + width: 600px; +} +body .headerLine__logo { + height: 150px; + width: 300px; +} +body .headerLine__logo img { + height: 150px; + width: 200px; + border-radius: 10%; + margin-top: 10px; +} +body .wrapper { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 40px; + margin-left: 150px; +} +body .wrapper__video { + height: 300px; + background-color: white; + color: black; + border-radius: 20px; + border-color: #1a1717; + border-width: 1px; +} +body .wrapper__video__videoLink { + height: 220px; + width: 100%; +} +body .wrapper__video__videoName { + height: 25px; + width: 100%; + font-size: medium; + font-weight: bold; + padding-top: 2px; + margin-left: 5px; +} +body .wrapper__video__viewsNumber { + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; +} +body .wrapper__video__viewsLikes { + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; +} +body .wrapper__video__viewsLikes button { + border-radius: 30%; + background-color: red; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/video.css b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/video.css new file mode 100644 index 000000000..dfebe493b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/video.css @@ -0,0 +1,75 @@ +body { + background-color: rgba(0, 0, 0, 0.859); +} +body .videoWrapper { + height: 500px; + width: 800px; + margin: auto; +} +body .videoWrapper__mainVideo { + height: 500px; + width: 800px; +} +body .videoWrapper__mainVideo iframe { + height: 100%; + width: 100%; +} +body .videoWrapper__videoName { + height: 50px; + width: 790px; + background-color: white; + font-weight: bolder; + font-size: xx-large; + padding-top: 10px; + padding-left: 10px; +} +body .videoWrapper__videoViews { + height: 30px; + width: 790px; + background-color: white; + font-weight: bolder; + font-size: large; + padding-top: 10px; + padding-left: 10px; +} +body .videoWrapper__videoLikes { + height: 50px; + width: 790px; + background-color: rgba(255, 255, 255, 0.993); + font-weight: bolder; + font-size: large; + padding-top: 10px; + padding-left: 10px; +} +body .videoWrapper__reviewsDetails { + height: 100px; + width: 800px; + background-color: rgba(255, 255, 255, 0.967); + display: flex; +} +body .videoWrapper__reviewsDetails__userImgReviews { + height: 50px; + width: 790px; + padding-left: 10px; +} +body .videoWrapper__reviewsDetails__userImgReviews img { + height: 50px; + width: 80px; + border-radius: 50%; +} +body .videoWrapper__reviewsDetails__userNameReviews { + height: 20px; + width: 790px; + color: #0d4524; + font-size: x-large; + font-weight: bold; + padding-top: 10px; +} +body .videoWrapper__reviewsDetails__videoReviews { + height: 20px; + width: 790px; + font-size: x-large; + padding-top: 10px; + padding-left: 10px; + font-style: italic; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/video.js b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/video.js new file mode 100644 index 000000000..899139c47 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/video.js @@ -0,0 +1,9 @@ +debugger; +var videoString = localStorage.getItem('video'); +if (videoString != null) { + var video = JSON.parse(videoString); + var rendered = renderVideoHtml(video); + if (videoElement) { + videoElement.innerHTML = rendered; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/view.js b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/view.js new file mode 100644 index 000000000..e7fe4ba7a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/dist/view.js @@ -0,0 +1,2 @@ +var videoWrapper = document.querySelector('.wrapper'); +var videoElement = document.querySelector('.videoWrapper'); diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/helpers.ts b/02-TypeScript/18-personalProject/Checked/Karin-levi/helpers.ts new file mode 100644 index 000000000..4f9f786e1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/helpers.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/index.html b/02-TypeScript/18-personalProject/Checked/Karin-levi/index.html new file mode 100644 index 000000000..6f62c2246 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/index.html @@ -0,0 +1,31 @@ + + + + + + + Main + + + + + + + + + + + +
                + + +
                + +
                + +
                + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/index.ts b/02-TypeScript/18-personalProject/Checked/Karin-levi/index.ts new file mode 100644 index 000000000..83a1cb432 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/index.ts @@ -0,0 +1,5 @@ +const renderedVideos = renderVideos() +if (videoWrapper != null) { + videoWrapper.innerHTML = renderedVideos +} + diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/indexStyle.scss b/02-TypeScript/18-personalProject/Checked/Karin-levi/indexStyle.scss new file mode 100644 index 000000000..6ff60833a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/indexStyle.scss @@ -0,0 +1,81 @@ +body{ + background-color: rgba(0, 0, 0, 0.859); + +.headerLine{ + + height: 100px; + width: 600px; + display: flex; + justify-content: space-between; + border: 2px; + + &__logo{ + height: 200px; + width: 300px; + + img{ + height: 200px; + width: 200px; + } + } + + &__search{ + height: 100px; + width: 400px; + background-color: white; + } +} + + +.wrapper { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + padding-left: 35px; + padding-top: 40px; + // max-width: 20ch; + + &__video { + height: 300px; + background-color: white; + color: black; + border-radius: 20px; + border-color: rgb(26, 23, 23); + border-width: 1px; + + &__videoLink{ + height: 220px; + width: 100%; + // border: solid 2px red; + } + + &__videoName{ + height: 25px; + width: 100%; + font-size: medium; + font-weight: bold; + padding-top: 2px; + margin-left: 5px; + // border: solid 2px red; + } + + &__viewsNumber{ + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; + // border: solid 2px red; + } + + &__viewsLikes{ + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; + // border: solid 2px red; + } + } + + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/model.ts b/02-TypeScript/18-personalProject/Checked/Karin-levi/model.ts new file mode 100644 index 000000000..a2f2027da --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/model.ts @@ -0,0 +1,29 @@ +class Video { + uid: string; + + constructor( + public link: string, + public name: string, + public views: string, + public likes: string, + public reviews: Review[] + ) { + this.uid = uid(); + } + +} + +class User { + constructor( + public name: string, + public img: string, + ) { } +} + +class Review { + constructor( + public user: User, + public review: string + ) { } +} + diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/style.scss b/02-TypeScript/18-personalProject/Checked/Karin-levi/style.scss new file mode 100644 index 000000000..262a539a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/style.scss @@ -0,0 +1,71 @@ +body{ + background-color: rgba(5, 5, 5, 0.859); + +.headerLine{ + height: 200px; + width: 600px; + + &__logo{ + height: 150px; + width: 300px; + + img{ + height: 150px; + width: 200px; + border-radius: 10%; + margin-top: 10px; + + } + } + +} + + +.wrapper { + margin: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 40px; + margin-left: 150px; + + + &__video { + height: 300px; + background-color: white; + color: black; + border-radius: 20px; + border-color: rgb(26, 23, 23); + border-width: 1px; + + &__videoLink{ + height: 220px; + width: 100%; + } + + &__videoName{ + height: 25px; + width: 100%; + font-size: medium; + font-weight: bold; + padding-top: 2px; + margin-left: 5px; + } + + &__viewsNumber{ + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; + } + + &__viewsLikes{ + height: 20px; + width: 100%; + font-size: medium; + margin-left: 5px; + + + } + + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/video.html b/02-TypeScript/18-personalProject/Checked/Karin-levi/video.html new file mode 100644 index 000000000..621bcc739 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/video.html @@ -0,0 +1,28 @@ + + + + + + + Video + + + + + + + + + + + + +
                + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/video.scss b/02-TypeScript/18-personalProject/Checked/Karin-levi/video.scss new file mode 100644 index 000000000..b39c4bc51 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/video.scss @@ -0,0 +1,94 @@ +body{ + background-color: rgba(0, 0, 0, 0.859); + + .videoWrapper{ + height: 500px; + width: 800px; + margin: auto; + + &__mainVideo{ + height: 500px; + width: 800px; + + iframe{ + height: 100%; + width: 100%; + } + } + + &__videoName{ + height:50px; + width: 790px; + background-color: white; + font-weight:bolder; + font-size:xx-large; + padding-top: 10px; + padding-left: 10px; + } + + &__videoViews{ + height: 30px; + width: 790px; + background-color: white; + font-weight:bolder; + font-size:large; + padding-top: 10px; + padding-left: 10px; + + } + + &__videoLikes{ + height: 50px; + width: 790px; + background-color: rgba(255, 255, 255, 0.993); + font-weight:bolder; + font-size:large; + padding-top: 10px; + padding-left: 10px; + + } + + &__reviewsDetails{ + height: 100px; + width: 800px; + background-color: rgba(255, 255, 255, 0.967); + display: flex; + + + &__userImgReviews{ + height: 50px; + width: 790px; + // background-color: rgb(255, 255, 255); + padding-left: 10px; + + img{ + height: 50px; + width: 80px; + border-radius: 50%; + } + + } + + &__userNameReviews{ + height: 20px; + width: 790px; + color: rgb(13, 69, 36); + font-size:x-large; + font-weight: bold; + padding-top: 10px; + + } + + &__videoReviews{ + height: 20px; + width: 790px; + font-size:x-large; + padding-top: 10px; + padding-left: 10px; + font-style:italic; + } + + } + + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/video.ts b/02-TypeScript/18-personalProject/Checked/Karin-levi/video.ts new file mode 100644 index 000000000..f827727f5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/video.ts @@ -0,0 +1,9 @@ +debugger +const videoString = localStorage.getItem('video'); +if (videoString != null) { + const video = JSON.parse(videoString) + const rendered = renderVideoHtml(video) + if (videoElement) { + videoElement.innerHTML = rendered + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Karin-levi/view.ts b/02-TypeScript/18-personalProject/Checked/Karin-levi/view.ts new file mode 100644 index 000000000..af4e7b4dd --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Karin-levi/view.ts @@ -0,0 +1,2 @@ +const videoWrapper = document.querySelector('.wrapper'); +const videoElement = document.querySelector('.videoWrapper'); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/admin.html b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/admin.html new file mode 100644 index 000000000..2047ab0cd --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/admin.html @@ -0,0 +1,40 @@ + + + + + + + Store + + + + + + + + + + +
                +
                + + + + + + + +
                +
                +
                +
                + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/admin.ts b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/admin.ts new file mode 100644 index 000000000..1262b5442 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/admin.ts @@ -0,0 +1,26 @@ +render(".test", getItems()) +try { + if(!form) throw new Error("Form not exists"); + form.addEventListener('submit', (ev:any) => { + ev.preventDefault(); + console.log(ev); + + const color = ev.target.elements.color.value; + const name = ev.target.elements.name.value; + const type = ev.target.elements.type.value; + const price = ev.target.elements.price.value; + const size = ev.target.elements.size.value; + const img = ev.target.elements.img.value; + const item = (new Product(name,type,price,size,color,img)); + console.log(item); + addItems(item); + render(".test", getItems()) + renderStore(".main", getItems()) + ev.target.reset(); + }) +} catch (error) { + console.error(error); +} + + + diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/cart.html b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/cart.html new file mode 100644 index 000000000..6dfe68cf5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/cart.html @@ -0,0 +1,31 @@ + + + + + + + + Store + + + + + + + + + + +
                + +

                Cart

                +
                +
                +
                +
                +
                +
                +
                © Store
                + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/cart.ts b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/cart.ts new file mode 100644 index 000000000..6c088cda4 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/cart.ts @@ -0,0 +1,19 @@ +renderCart(".cartMain", getItemsInCart()); + +window.addEventListener('load', total) +function total() { + const temp = getItemsInCart(); + if(!temp || temp.length == 0) { + totalPrice.innerHTML = "" + } else { + totalPrice.innerHTML = `Total price: ${howMuch(temp)}$`; + } +} + +function howMuch(items:Product[]):number { + let num:number = 0; + items.forEach(item => { + num += parseInt(item.price.toString()); + }) + return num; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/control.ts b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/control.ts new file mode 100644 index 000000000..a1ec43b10 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/control.ts @@ -0,0 +1,277 @@ +function addItems(item: Product) { + try { + const temp = getItems() + if (temp != null) { + temp.push(item) + localStorage.setItem("items", JSON.stringify(temp)); + } else { + localStorage.setItem("items", JSON.stringify(item)); + } + } catch (error) { + console.error(error); + + } +} + +function render(ele: string, items: Product[] | null) { + try { + + const element = document.querySelector(ele.toString()); + if (!element) throw new Error("Element does not exits"); + + + if (!items) throw new Error("Items empty"); + items.sort((function (a, b) { + if (a.name < b.name) { return -1; } + if (a.name > b.name) { return 1; } + return 0; + })) + const html = items.map((item) => { + + return ` +
                +
                cart
                +
                +

                ${item.name}

                +

                Price: ${item.price}$

                +

                Size: ${item.size}

                +

                Color:

                + +
                + ` + }).join("\n"); + console.log(html); + + element.innerHTML = html; + + } catch (error) { + console.error(error); + + } +} + +function renderStore(ele: string, items: Product[] | null) { + try { + + const element = document.querySelector(ele.toString()); + if (!element) throw new Error("Element does not exits"); + + + element.innerHTML = "No products at the moment"; + if (items == null || items.length == 0) { + throw new Error("Items empty"); + } + const html = items.map((item) => { + + return ` +
                +
                cart
                +
                +

                ${item.name}

                +

                Price: ${item.price}$

                +

                Size: ${item.size}

                +
                +

                Color:

                +
                +
                + +
                + ` + }).join("\n"); + console.log(html); + + element.innerHTML = html; + + } catch (error) { + console.error(error); + + } +} + +function renderCart(ele: string, items: Product[] | null) { + try { + + const element = document.querySelector(ele.toString()); + if (!element) throw new Error("Element does not exits"); + + + element.innerHTML = "No items in cart"; + if (items == null || items.length == 0) { + throw new Error("Items empty"); + } + const html = items.map((item) => { + + return ` +
                +
                + cart +
                +
                +

                ${item.name}

                +

                Price: ${item.price}$

                +

                Size: ${item.size}

                +

                Color:

                +
                + +
                + ` + }).join("\n"); + console.log(html); + + element.innerHTML = html; + + } catch (error) { + console.error(error); + + } +} + +function deleteProduct(id: string) { + try { + const temp = getItems(); + if (!temp) throw new Error("Items empty"); + const i = temp.findIndex((item) => item.id == id.toString()); + if (i == -1) throw new Error("Item not found"); + temp.splice(i, 1) + localStorage.setItem("items", JSON.stringify(temp)); + render(".test", getItems()) + renderStore(".main", getItems()) + try { + deleteFromCart(id); + } catch (error) { + console.error(error); + } + } catch (error) { + console.error(error); + } +} + +function deleteFromCart(id:string) { + try { + const temp = getItemsInCart(); + if (!temp) throw new Error("Items empty"); + const i = temp.findIndex((item) => item.id == id.toString()); + if (i == -1) throw new Error("Item not found"); + temp.splice(i, 1) + localStorage.setItem("cartItems", JSON.stringify(temp)); + renderCart(".cartMain", getItemsInCart()) + total() + } catch (error) { + console.error(error); + } +} + +function addToCart(id: string) { + try { + const temp = getItemsInCart(); + const tempItems = getItems(); + if (!tempItems) throw new Error("Items empty"); + const i = tempItems.findIndex((item) => item.id == id.toString()); + if (i == -1) throw new Error("Item not found"); + + + if (!tempItems[i]) throw new Error("Item empty line 106"); + console.log(typeof temp); + + itemsInCart.classList.remove("hide") + if (temp != null) { + temp.push(tempItems[i]) + itemsInCart.innerHTML = temp.length.toString(); + localStorage.setItem("cartItems", JSON.stringify(temp)); + } else { + itemsInCart.innerHTML = '1'; + localStorage.setItem("cartItems", JSON.stringify(tempItems[i])); + } + renderCart(".cartMain", getItemsInCart()); + } catch (error) { + console.error(error); + } +} + + +sortName.addEventListener('click', () => { + try { + const temp = getItems(); + if (!temp) throw new Error("Items empty"); + + temp.sort((function (a, b) { + if (a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) { return -1; } + if (a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase()) { return 1; } + return 0; + })) + renderStore(".main", temp) + } catch (error) { + console.error(error); + + } +}) + +sortPrice.addEventListener('click', () => { + try { + const temp = getItems(); + if (!temp) throw new Error("Items empty"); + + temp.sort((a,b)=>a.price-b.price); + renderStore(".main", temp) + } catch (error) { + console.error(error); + + } +}) + +sortType.addEventListener('click', () => { + try { + const temp = getItems(); + if (!temp) throw new Error("Items empty"); + + temp.sort((function (a, b) { + if (a.type > b.type) { return -1; } + if (a.type < b.type) { return 1; } + return 0; + })) + renderStore(".main", temp) + } catch (error) { + console.error(error); + + } +}) + +ham.forEach(h => { + h.addEventListener('click', () => { + try { + if (!hamTop || !hamMid || !hamBottom || !menu) throw new Error("No elements"); + if (change) { + hamTop.forEach(t => { + t.classList.add("closeTop"); + }) + hamMid.forEach(m => { + m.classList.add("closeMid"); + }) + hamBottom.forEach(b => { + b.classList.add("closeBottom"); + }) + menu.forEach((m) => { + m.classList.add("menuShow") + }) + change = false; + } else { + hamTop.forEach(t => { + t.classList.remove("closeTop"); + }) + hamMid.forEach(m => { + m.classList.remove("closeMid"); + }) + hamBottom.forEach(b => { + b.classList.remove("closeBottom"); + }) + menu.forEach((m) => { + m.classList.remove("menuShow") + }) + change = true; + } + } catch (error) { + console.error(error); + + } + }) +}) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/admin.js b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/admin.js new file mode 100644 index 000000000..90adb297b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/admin.js @@ -0,0 +1,24 @@ +render(".test", getItems()); +try { + if (!form) + throw new Error("Form not exists"); + form.addEventListener('submit', function (ev) { + ev.preventDefault(); + console.log(ev); + var color = ev.target.elements.color.value; + var name = ev.target.elements.name.value; + var type = ev.target.elements.type.value; + var price = ev.target.elements.price.value; + var size = ev.target.elements.size.value; + var img = ev.target.elements.img.value; + var item = (new Product(name, type, price, size, color, img)); + console.log(item); + addItems(item); + render(".test", getItems()); + renderStore(".main", getItems()); + ev.target.reset(); + }); +} +catch (error) { + console.error(error); +} diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/cart.js b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/cart.js new file mode 100644 index 000000000..b2994e3c2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/cart.js @@ -0,0 +1,18 @@ +renderCart(".cartMain", getItemsInCart()); +window.addEventListener('load', total); +function total() { + var temp = getItemsInCart(); + if (!temp || temp.length == 0) { + totalPrice.innerHTML = ""; + } + else { + totalPrice.innerHTML = "Total price: " + howMuch(temp) + "$"; + } +} +function howMuch(items) { + var num = 0; + items.forEach(function (item) { + num += parseInt(item.price.toString()); + }); + return num; +} diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/control.js b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/control.js new file mode 100644 index 000000000..5bbb4526b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/control.js @@ -0,0 +1,240 @@ +function addItems(item) { + try { + var temp = getItems(); + if (temp != null) { + temp.push(item); + localStorage.setItem("items", JSON.stringify(temp)); + } + else { + localStorage.setItem("items", JSON.stringify(item)); + } + } + catch (error) { + console.error(error); + } +} +function render(ele, items) { + try { + var element = document.querySelector(ele.toString()); + if (!element) + throw new Error("Element does not exits"); + if (!items) + throw new Error("Items empty"); + items.sort((function (a, b) { + if (a.name < b.name) { + return -1; + } + if (a.name > b.name) { + return 1; + } + return 0; + })); + var html = items.map(function (item) { + return "\n
                \n
                \"cart\"
                \n
                \n

                " + item.name + "

                \n

                Price: " + item.price + "$

                \n

                Size: " + item.size + "

                \n

                Color:

                \n \n
                \n "; + }).join("\n"); + console.log(html); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function renderStore(ele, items) { + try { + var element = document.querySelector(ele.toString()); + if (!element) + throw new Error("Element does not exits"); + element.innerHTML = "No products at the moment"; + if (items == null || items.length == 0) { + throw new Error("Items empty"); + } + var html = items.map(function (item) { + return "\n
                \n
                \"cart\"
                \n
                \n

                " + item.name + "

                \n

                Price: " + item.price + "$

                \n

                Size: " + item.size + "

                \n
                \n

                Color:

                \n
                \n
                \n \n
                \n "; + }).join("\n"); + console.log(html); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function renderCart(ele, items) { + try { + var element = document.querySelector(ele.toString()); + if (!element) + throw new Error("Element does not exits"); + element.innerHTML = "No items in cart"; + if (items == null || items.length == 0) { + throw new Error("Items empty"); + } + var html = items.map(function (item) { + return "\n
                \n
                \n \"cart\"\n
                \n
                \n

                " + item.name + "

                \n

                Price: " + item.price + "$

                \n

                Size: " + item.size + "

                \n

                Color:

                \n
                \n \n
                \n "; + }).join("\n"); + console.log(html); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function deleteProduct(id) { + try { + var temp = getItems(); + if (!temp) + throw new Error("Items empty"); + var i = temp.findIndex(function (item) { return item.id == id.toString(); }); + if (i == -1) + throw new Error("Item not found"); + temp.splice(i, 1); + localStorage.setItem("items", JSON.stringify(temp)); + render(".test", getItems()); + renderStore(".main", getItems()); + try { + deleteFromCart(id); + } + catch (error) { + console.error(error); + } + } + catch (error) { + console.error(error); + } +} +function deleteFromCart(id) { + try { + var temp = getItemsInCart(); + if (!temp) + throw new Error("Items empty"); + var i = temp.findIndex(function (item) { return item.id == id.toString(); }); + if (i == -1) + throw new Error("Item not found"); + temp.splice(i, 1); + localStorage.setItem("cartItems", JSON.stringify(temp)); + renderCart(".cartMain", getItemsInCart()); + total(); + } + catch (error) { + console.error(error); + } +} +function addToCart(id) { + try { + var temp = getItemsInCart(); + var tempItems = getItems(); + if (!tempItems) + throw new Error("Items empty"); + var i = tempItems.findIndex(function (item) { return item.id == id.toString(); }); + if (i == -1) + throw new Error("Item not found"); + if (!tempItems[i]) + throw new Error("Item empty line 106"); + console.log(typeof temp); + itemsInCart.classList.remove("hide"); + if (temp != null) { + temp.push(tempItems[i]); + itemsInCart.innerHTML = temp.length.toString(); + localStorage.setItem("cartItems", JSON.stringify(temp)); + } + else { + itemsInCart.innerHTML = '1'; + localStorage.setItem("cartItems", JSON.stringify(tempItems[i])); + } + renderCart(".cartMain", getItemsInCart()); + } + catch (error) { + console.error(error); + } +} +sortName.addEventListener('click', function () { + try { + var temp = getItems(); + if (!temp) + throw new Error("Items empty"); + temp.sort((function (a, b) { + if (a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) { + return -1; + } + if (a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase()) { + return 1; + } + return 0; + })); + renderStore(".main", temp); + } + catch (error) { + console.error(error); + } +}); +sortPrice.addEventListener('click', function () { + try { + var temp = getItems(); + if (!temp) + throw new Error("Items empty"); + temp.sort(function (a, b) { return a.price - b.price; }); + renderStore(".main", temp); + } + catch (error) { + console.error(error); + } +}); +sortType.addEventListener('click', function () { + try { + var temp = getItems(); + if (!temp) + throw new Error("Items empty"); + temp.sort((function (a, b) { + if (a.type > b.type) { + return -1; + } + if (a.type < b.type) { + return 1; + } + return 0; + })); + renderStore(".main", temp); + } + catch (error) { + console.error(error); + } +}); +ham.forEach(function (h) { + h.addEventListener('click', function () { + try { + if (!hamTop || !hamMid || !hamBottom || !menu) + throw new Error("No elements"); + if (change) { + hamTop.forEach(function (t) { + t.classList.add("closeTop"); + }); + hamMid.forEach(function (m) { + m.classList.add("closeMid"); + }); + hamBottom.forEach(function (b) { + b.classList.add("closeBottom"); + }); + menu.forEach(function (m) { + m.classList.add("menuShow"); + }); + change = false; + } + else { + hamTop.forEach(function (t) { + t.classList.remove("closeTop"); + }); + hamMid.forEach(function (m) { + m.classList.remove("closeMid"); + }); + hamBottom.forEach(function (b) { + b.classList.remove("closeBottom"); + }); + menu.forEach(function (m) { + m.classList.remove("menuShow"); + }); + change = true; + } + } + catch (error) { + console.error(error); + } + }); +}); diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/model.js b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/model.js new file mode 100644 index 000000000..21a7ce3cd --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/model.js @@ -0,0 +1,35 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} +var Product = /** @class */ (function () { + function Product(name, type, price, size, color, img) { + this.name = name; + this.type = type; + this.price = price; + this.size = size; + this.color = color; + this.id = uid(); + if (!img) { + if (this.type == "Hat") { + this.img = Product.imgHat; + } + else if (this.type == "Pants") { + this.img = Product.imgPants; + } + else if (this.type == "Shirt") { + this.img = Product.imgShirt; + } + else { + this.img = Product.img; + } + } + else { + this.img = img; + } + } + Product.img = "./photos/cart.png"; + Product.imgShirt = "./photos/shirt.png"; + Product.imgPants = "./photos/pants.png"; + Product.imgHat = "./photos/hat.png"; + return Product; +}()); diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/store.js b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/store.js new file mode 100644 index 000000000..4c07fca2b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/store.js @@ -0,0 +1,17 @@ +renderStore(".main", getItems()); +window.addEventListener('load', function () { + try { + var temp = getItemsInCart(); + if (temp != null) { + if (temp.length != 0) { + itemsInCart.innerHTML = temp.length.toString(); + } + else { + itemsInCart.classList.add("hide"); + } + } + } + catch (error) { + console.error(error); + } +}); diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/style.css b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/style.css new file mode 100644 index 000000000..c3f71bc67 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/style.css @@ -0,0 +1,252 @@ +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Solitreo&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.hide { + opacity: 0; +} + +body { + position: relative; + overflow-x: hidden; + background-color: #F8F4EA; + font-family: "Quicksand", sans-serif; +} +body i { + cursor: pointer; +} +body button, +body .submit { + cursor: pointer; + padding: 2px 4px; + color: black; + background-color: white; + border-radius: 5px; + border: 2px solid #E1D7C6; + transition: all ease 0.3s; + font-family: "Quicksand", sans-serif; +} +body button:hover, +body .submit:hover { + padding: 2px 6px; +} + +form { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +form > * { + width: 160px; + height: 30px; + padding: 5px; + margin: 3px 0; +} + +.test { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 100%; + margin-top: 20px; +} + +.main { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 100%; + margin-top: 20px; +} +.main__card > * { + margin: 2px 0; +} +.main__card { + position: relative; + width: 250px; + height: 280px; + padding: 20px; + border-radius: 5px; + border: none; + box-shadow: 0 0 2px 0px #555454; + margin: 0 5px 20px 5px; + background-color: white; + padding-bottom: 5px; +} +.main__card__imgDiv { + display: grid; + place-items: center; +} +.main__card img { + width: 60%; + aspect-ratio: 1/1; +} + +.menu { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + padding: 20px; + background-color: #ECE8DD; + width: 138px; + position: absolute; + left: -50%; + top: 50px; + height: 100vh; + transition: all ease 0.3s; + z-index: 100; +} + +.menuShow { + left: 0%; +} + +.top { + height: 50px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + position: relative; + background-color: #ECE8DD; +} +.top h2 { + color: #579BB1; + font-family: "Solitreo", cursive; +} +.top__cart { + cursor: pointer; + position: relative; + width: 30px; + height: 30px; +} +.top__cart img { + width: 100%; + aspect-ratio: 1/1; +} +.top__cart__items { + display: grid; + place-items: center; + position: absolute; + bottom: -3px; + right: -3px; + width: 15px; + height: 15px; + border-radius: 50%; + border: none; + background-color: #579BB1; + color: white; + font-weight: bolder; + font-size: 12px; +} +.top__headline { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.top__hamburger > * { + width: 25px; + height: 3px; + border-radius: 10px; + border: none; + background-color: black; + transition: all ease 0.3s; + cursor: pointer; +} +.top__hamburger { + cursor: pointer; +} +.top__hamburger__mid { + margin: 4px 0; +} + +.closeTop { + transform: translate(0, 6.5px) rotate(45deg); +} + +.closeBottom { + transform: translate(0, -6.5px) rotate(-45deg); +} + +.closeMid { + opacity: 0; +} + +.cartMain { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 70%; + margin-top: 20px; + position: relative; +} +.cartMain__card { + border-radius: 5px; + border: none; + box-shadow: 0 0 2px 0px #555454; + margin: 0 5px 20px 5px; + background-color: white; + width: 100%; + height: 150px; + display: flex; + align-items: center; + justify-content: space-around; +} +.cartMain__card__text > * { + margin: 0 2px; +} +.cartMain__card__text { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; + width: 50%; + height: 100%; + padding-left: 5px; +} +.cartMain__card__imgDiv { + border-right: 2px solid #E1D7C6; + width: 30%; + display: grid; + place-items: center; + position: relative; +} +.cartMain__card__imgDiv img { + width: 50%; + max-width: 140px; + aspect-ratio: 1/1; +} + +.checkout__totalPrice { + margin: 20px 0; + font-weight: bold; +} + +.footer { + background-color: #ECE8DD; + width: 100%; + height: 40px; + position: absolute; + bottom: 0; + display: grid; + place-items: center; +} + +.--fa-inverse { + color: black; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/view.js b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/view.js new file mode 100644 index 000000000..bafa75f2a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/dist/view.js @@ -0,0 +1,40 @@ +var form = document.getElementById("theForm"); +function getItems() { + try { + var itemsString = localStorage.getItem("items"); + if (!itemsString) + throw new Error("No items"); + var items = JSON.parse(itemsString); + return items; + } + catch (error) { + console.error(error); + localStorage.setItem("items", JSON.stringify([])); + return null; + } +} +var ham = document.querySelectorAll(".top__hamburger"); +var hamTop = document.querySelectorAll(".top__hamburger__top"); +var hamMid = document.querySelectorAll(".top__hamburger__mid"); +var hamBottom = document.querySelectorAll(".top__hamburger__bottom"); +var menu = document.querySelectorAll(".menu"); +var sortName = document.querySelector(".sortName"); +var sortPrice = document.querySelector(".sortPrice"); +var sortType = document.querySelector(".sortType"); +var change = true; +var itemsInCart = document.querySelector(".top__cart__items"); +var totalPrice = document.querySelector(".checkout__totalPrice"); +function getItemsInCart() { + try { + var itemsString = localStorage.getItem("cartItems"); + if (!itemsString) + throw new Error("No items in cart"); + var items = JSON.parse(itemsString); + return items; + } + catch (error) { + console.error(error); + localStorage.setItem("cartItems", JSON.stringify([])); + return null; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/model.ts b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/model.ts new file mode 100644 index 000000000..c052fd840 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/model.ts @@ -0,0 +1,34 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} + +class Product { + private static img = "./photos/cart.png"; + private static imgShirt = "./photos/shirt.png"; + private static imgPants = "./photos/pants.png"; + private static imgHat = "./photos/hat.png"; + public id: string; + public img: string; + constructor(public name: string, public type: string, public price: number, public size: string, public color:string, img: string) { + this.id = uid(); + if (!img) { + if (this.type == "Hat") { + + this.img = Product.imgHat + } + else if (this.type == "Pants") { + + this.img = Product.imgPants + } + else if (this.type == "Shirt") { + + this.img = Product.imgShirt + } else { + this.img = Product.img + } + + } else { + this.img = img; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/cart.png b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/cart.png new file mode 100644 index 000000000..a6dcd23d6 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/cart.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/hat.png b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/hat.png new file mode 100644 index 000000000..0c3421033 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/hat.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/pants.png b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/pants.png new file mode 100644 index 000000000..73538d2b0 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/pants.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/shirt.png b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/shirt.png new file mode 100644 index 000000000..d08946d79 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/photos/shirt.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/store.html b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/store.html new file mode 100644 index 000000000..1f6ea1589 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/store.html @@ -0,0 +1,45 @@ + + + + + + + + Store + + + + + + + + + + +
                +
                +
                +
                +
                +
                + +
                + cart +
                +
                +                 +

                Store

                +
                + + + + + +
                +
                + +
                +
                ©Store
                + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/store.ts b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/store.ts new file mode 100644 index 000000000..d7fa63284 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/store.ts @@ -0,0 +1,16 @@ +renderStore(".main", getItems()) +window.addEventListener('load', () => { + try { + const temp = getItemsInCart() + if (temp != null) { + if(temp.length != 0) { + itemsInCart.innerHTML = temp.length.toString(); + } else { + itemsInCart.classList.add("hide") + } + } + } catch (error) { + console.error(error); + + } +}) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/style.scss b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/style.scss new file mode 100644 index 000000000..8540ca44d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/style.scss @@ -0,0 +1,285 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Solitreo&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.hide { + opacity: 0; +} + +body { + position: relative; + overflow-x: hidden; + background-color: #F8F4EA; + font-family: 'Quicksand', sans-serif; + + i { + cursor: pointer; + } + + button, + .submit { + cursor: pointer; + padding: 2px 4px; + color: black; + background-color: white; + border-radius: 5px; + border: 2px solid #E1D7C6; + transition: all ease .3s; + font-family: 'Quicksand', sans-serif; + } + + button:hover, + .submit:hover { + padding: 2px 6px; + } +} + +form { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +form>* { + width: 160px; + height: 30px; + padding: 5px; + margin: 3px 0; +} + +.test { + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 100%; + margin-top: 20px; + +} + +.main { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 100%; + margin-top: 20px; + + &__card>* { + margin: 2px 0; + } + + &__card { + position: relative; + width: 250px; + height: 280px; + padding: 20px; + border-radius: 5px; + border: none; + box-shadow: 0 0 2px 0px rgb(85, 84, 84); + margin: 0 5px 20px 5px; + background-color: white; + padding-bottom: 5px; + + &__imgDiv { + display: grid; + place-items: center; + } + + img { + width: 60%; + aspect-ratio: 1/1; + } + + + } +} + + +.menu { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + padding: 20px; + background-color: #ECE8DD; + width: 138px; + position: absolute; + left: -50%; + top: 50px; + height: 100vh; + transition: all ease 0.3s; + z-index: 100; +} + +.menuShow { + left: 0%; +} + +.top { + height: 50px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + position: relative; + background-color: #ECE8DD; + + h2 { + color: #579BB1; + font-family: 'Solitreo', cursive; + } + + &__cart { + cursor: pointer; + position: relative; + width: 30px; + height: 30px; + + img { + width: 100%; + aspect-ratio: 1/1; + } + + &__items { + display: grid; + place-items: center; + position: absolute; + bottom: -3px; + right: -3px; + width: 15px; + height: 15px; + border-radius: 50%; + border: none; + background-color: #579BB1; + color: white; + font-weight: bolder; + font-size: 12px; + } + } + + &__headline { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &__hamburger>* { + width: 25px; + height: 3px; + border-radius: 10px; + border: none; + background-color: black; + transition: all ease 0.3s; + cursor: pointer; + } + + + &__hamburger { + cursor: pointer; + + + &__mid { + margin: 4px 0; + } + + } +} + +.closeTop { + transform: translate(0, 6.5px) rotate(45deg); +} + +.closeBottom { + transform: translate(0, -6.5px) rotate(-45deg); +} + +.closeMid { + opacity: 0; +} + +.cartMain { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + width: 70%; + margin-top: 20px; + position: relative; + + + &__card { + border-radius: 5px; + border: none; + box-shadow: 0 0 2px 0px rgb(85, 84, 84); + margin: 0 5px 20px 5px; + background-color: white; + width: 100%; + height: 150px; + display: flex; + align-items: center; + justify-content: space-around; + + &__text > * { + margin: 0 2px; + } + + &__text { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; + width: 50%; + height: 100%; + padding-left: 5px; + } + + + &__imgDiv { + border-right: 2px solid #E1D7C6; + width: 30%; + display: grid; + place-items: center; + position: relative; + + + img { + width: 50%; + max-width: 140px; + aspect-ratio: 1/1; + } + } + } +} + +.checkout { + &__totalPrice { + margin: 20px 0; + font-weight: bold; + } +} + +.footer { + background-color: #ECE8DD; + width: 100%; + height: 40px; + position: absolute; + bottom: 0; + display: grid; + place-items: center; +} + +.--fa-inverse { + color: black; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/view.ts b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/view.ts new file mode 100644 index 000000000..7e3735e23 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Omer.Virshuvski/view.ts @@ -0,0 +1,39 @@ +const form = document.getElementById("theForm"); +function getItems():Product[]|null { + try { + const itemsString = localStorage.getItem("items"); + if(!itemsString) throw new Error("No items"); + const items = JSON.parse(itemsString); + return items; + } catch (error) { + console.error(error); + localStorage.setItem("items", JSON.stringify([])) + return null + + } +} +const ham = document.querySelectorAll(".top__hamburger"); +const hamTop = document.querySelectorAll(".top__hamburger__top"); +const hamMid = document.querySelectorAll(".top__hamburger__mid"); +const hamBottom = document.querySelectorAll(".top__hamburger__bottom"); +const menu = document.querySelectorAll(".menu"); +const sortName = document.querySelector(".sortName"); +const sortPrice = document.querySelector(".sortPrice"); +const sortType = document.querySelector(".sortType"); +let change = true; + +const itemsInCart = document.querySelector(".top__cart__items"); +const totalPrice = document.querySelector(".checkout__totalPrice"); +function getItemsInCart():Product[]|null { + try { + const itemsString = localStorage.getItem("cartItems"); + if(!itemsString) throw new Error("No items in cart"); + const items = JSON.parse(itemsString); + return items; + } catch (error) { + console.error(error); + localStorage.setItem("cartItems", JSON.stringify([])) + return null + + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/.vscode/settings.json b/02-TypeScript/18-personalProject/Checked/Orel/.vscode/settings.json new file mode 100644 index 000000000..c60453396 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false, + "cSpell.words": [ + "Divs", + "Karako", + "Orelkarako", + "PROLIST", + "Succ", + "Userdetails" + ] +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/control.ts b/02-TypeScript/18-personalProject/Checked/Orel/control.ts new file mode 100644 index 000000000..f5eb54541 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/control.ts @@ -0,0 +1,380 @@ +// +//USERS LOCAL STORAGE + + + + +function createListToOptions(): void { + try { + // sent data list to options + const selectList = document.getElementById('selectList') as HTMLSelectElement + selectList.innerHTML = '' + albums!.forEach(album => { + selectList.innerHTML += `` + }) + + } catch (error) { + console.error(error); + + } +} +//------------------------------------ USERS SETTING +function checkMatchUserDetails(emailUser: string, passwordUser: string): boolean{ + try { + if (!users) throw new Error("the users no exist") + + const userIndex = users.findIndex(user=>emailUser.toLowerCase() === user.email.toLowerCase() && passwordUser === user.password) + if(userIndex === -1) return false + else { + localStorage.setItem("userIndex", userIndex.toString()) + return true + } + } catch (error) { + console.error(error); + return false + } +} +function checksIfUserExists(emailUser: string): boolean{ + try { + const userCur = users.find(user => user.email === emailUser) + if (!userCur) return false + else { + return true + } + } catch (error) { + console.error(error); + return false + + } +} +function openMenuLogoutBtn(): void { + try { + const collapseUserLogout = document.querySelector(".user-box-profile-collapse")! as HTMLDListElement; + const collapseUserLogoutIcon = document.querySelector(".user-box-profile i") as HTMLElement; + + const userBoxProfileClick = document.querySelector('.user-box-profile ')! as HTMLDListElement;; + userBoxProfileClick?.addEventListener('click', (e) => { + collapseUserLogout.classList.toggle('active') + if (collapseUserLogout.classList.contains('active')) { + collapseUserLogoutIcon.style.rotate = '180deg' + } else { + collapseUserLogoutIcon.style.rotate = '0deg' + } + }) + } catch (error) { + console.error(error); + } + +} +function logout(): void { + try { + localStorage.setItem("userLogIn", "false") + } catch (error) { + console.error(error); + } +} +function insideTheUser(): boolean | undefined { + try { + if (localStorage.getItem("userLogIn") === "true") { + return true + } else { + return false + } + } catch (error) { + console.error(error); + return false + } +} +//---------------------------- LOGIN-/-Sign-Up--Pages +// LOg in function +function handleSubmitSignIn(ev: any) { + try { + ev.preventDefault() + const { email, password, username, gender } = ev.target.elements + const errorMsgEmailInput: HTMLElement = document.getElementById('errorMsgEmailInput')!; + const errorMsgPasswordInput: HTMLElement = document.getElementById('errorMsgPasswordInput')!; + + + if (checksIfUserExists(email.value)) { + errorMsgEmailInput.innerText = "This Email Exist in The System" + errorMsgEmailInput.parentElement!.classList.add("empty") + return + } else { + errorMsgEmailInput.parentElement!.classList.remove("empty") + } + if (email.value == '') { + errorMsgEmailInput.innerText = "Please enter your ProList username or email address." + errorMsgEmailInput.parentElement!.classList.add("empty") + return + } else { + errorMsgEmailInput.parentElement!.classList.remove("empty") + } + if (password.value == '') { + errorMsgPasswordInput!.innerText = "Please enter your password." + errorMsgPasswordInput.parentElement!.classList.add("empty") + return + } else if (password.value.length <= 5) { + errorMsgPasswordInput!.innerText = "Password Must to be with 5 letter or more" + errorMsgPasswordInput.parentElement!.classList.add("empty") + return + } else if (password.value.length <= 5) { + errorMsgPasswordInput!.innerText = "Password Must to be with 5 letter or more" + errorMsgPasswordInput.parentElement!.classList.add("empty") + return + } else { + errorMsgPasswordInput.parentElement!.classList.remove("empty") + } + + users.push(new Users(email.value, password.value, username.value, gender.value, false)) + updateUsersToLocalStorage() + ev.target.reset() + return location.href = './login.html'; + + } + catch (error) { + console.error(error); + } +} +// Sign IN function +function handleSubmitLogIn(ev: any) { + try { + ev.preventDefault() + const { emailLogin, passwordLogin } = ev.target.elements + const errorMsgEmailInputLog: HTMLElement = document.getElementById('errorMsgEmailInputLOG')! as HTMLElement; + const errorMsgPasswordInputLog: HTMLElement = document.getElementById('errorMsgPasswordInputLOG')! as HTMLElement; + + if (emailLogin.value == '') { + errorMsgEmailInputLog.innerText = "Please enter your ProList username or email address." + errorMsgEmailInputLog.parentElement!.classList.add("empty") + return + } else { + errorMsgEmailInputLog.parentElement!.classList.remove("empty") + } + if (passwordLogin.value == '') { + errorMsgPasswordInputLog!.innerText = "Please enter your password." + errorMsgPasswordInputLog.parentElement!.classList.add("empty") + return + } else { + errorMsgPasswordInputLog.parentElement!.classList.remove("empty") + } + + if (checkMatchUserDetails(emailLogin.value, passwordLogin.value)) { + ifRefresh() + ev.target.reset() + return location.href = './index.html'; + } else { + const textWarning = document.getElementById('pNotLoginSucc')! as HTMLParagraphElement + textWarning.innerHTML = + ` + + The email or password not match! + ` + textWarning.style.color = "red"; + } + + } + catch (error) { + console.error(error); + } +} +function handleClickLogOut(): void { + try { + logout() + location.reload(); + } catch (error) { + console.error(error); + } +} +//---------------------------Handle Click Function List Left----------------- +//home +function handleClickHomeList(ev: any) { + try { + const sectionsHome = document.querySelector('.sections-home') as HTMLElement; + const lists = document.querySelectorAll('.list '); + makeSectionsActive(sectionsHome) + lists.forEach(list => { + list.classList.add("active") + }); + } catch (error) { + console.error(error); + } +} +//search +function handleClickSearchList(ev: any) { + try { + const sectionsSearch = document.querySelector('.sections-search') as HTMLElement; + makeSectionsActive(sectionsSearch) + } catch (error) { + console.error(error); + } +} +//library +function handleClickLibraryList(ev: any) { + try { + + if (!insideTheUser()) { + alert("you must to login to enter Library") + } else { + + const sectionsLibrary = document.querySelector('.sections-library') as HTMLElement; + const lists = document.querySelectorAll('.list '); + lists.forEach(list => { + list.classList.add("active") + }); + makeSectionsActive(sectionsLibrary) + + } + + } catch (error) { + console.error(error); + } +} +//Create Album +function handleClickCreateAlbumList(ev: any) { + try { + + if (!insideTheUser()) { + + alert("you must to login to enter Library") + } else { + + const sectionsCreateAlbum = document.querySelector('.sections-create-album') as HTMLElement; + const lists = document.querySelectorAll('.list '); + lists.forEach(list => { + list.classList.add("active") + }); + makeSectionsActive(sectionsCreateAlbum) + createListToOptions() + + } + + } catch (error) { + console.error(error); + } +} +//Liked Song +function handleClickLikedPhotosList(ev: any) { + try { + + if (!insideTheUser()) { + alert("you must to login to enter Library") + } else { + const sectionsLikedPhotos = document.getElementById('likedSongSection') as HTMLElement; + const lists = document.querySelectorAll('.list '); + lists.forEach(list => { + list.classList.add("active") + }); + sectionsLikedPhotos.classList.add("active") + + makeSectionsActive(sectionsLikedPhotos) + } + + } catch (error) { + console.error(error); + } +} + +function handleClickLists(ev: any): void { + try { + const sectionsHome = document.querySelectorAll('.sections-home div'); + if (!sectionsHome) throw new Error("section Home Divs not exist") + sectionsHome.forEach(e => { + e.classList.remove("active"); + if ((e.getAttribute("datalist") !== null) && e.getAttribute("datalist") === ev.target.textContent) { + const element = e as HTMLElement; + element.classList.add("active") + } + console.error(); + }) + } catch (error) { + console.error(error); + } +} + +function handleClickAddToLike(ev: any) { + const albumName = ev.target.parentElement.parentElement.parentElement.querySelector('h4').innerText; + const photoTitle = ev.target.parentElement.querySelector('h3').textContent + const btnLike = ev.target.parentElement.querySelector('button') as HTMLButtonElement + let currPhoto: Photos | undefined; + const isDefaultAlbum = ['Backgrounds', 'Animals'].includes(albumName); + if (isDefaultAlbum) { + const albumSelected = albumName === 'Animals' ? animals : backgrounds; + currPhoto = albumSelected.find(photo => photo.photoName === photoTitle); + } else { + const currAlbum = albums.find(album => album.name === albumName); + currPhoto = currAlbum!.photos.find(photo => photo.photoName === photoTitle); + } + + currPhoto!.like = !currPhoto!.like; + if (currPhoto!.like) { + btnLike.style.color = "red"; + } else { + btnLike.style.color = "black"; + } + + if (!isDefaultAlbum) updatePhotosToLocalStorage(); + else if (albumName === 'Animals') saveAnimalsToStorage(); + else if (albumName === 'Background') saveBackgroundToStorage() + + renderPhotoCard(getLikesPhotos(), "likeSongList") + +} +//----------------------Handle Submit Function left List----------------- + +function handleSubmitCreateAlbumsList(ev: any):void{ + try { + ev.preventDefault(); + const nameListValue = ev.target.elements.createListName.value as string + if(Number(nameListValue)) return alert("the value must to be string") + createNewList(nameListValue, nameListValue, "sections-library") + createListToOptions() + + ev.target.reset() + } catch (error) { + console.error(error); + } +} +function handleSubmitCreatePhoto(ev: any) { + try { + ev.preventDefault(); + + const albumName = ev.target.elements.selectList.value; + const photoName = ev.target.elements.photoNameCreateImage.value as string + const date = ev.target.elements.photoDateCreateImage.value as string + const src = ev.target.elements.photoSrcCreateImage.value as string + + const dateMounts = date.slice(5 , date.length) ; + const dateYear = date.slice(0 , 5) ; + const newDate = `< -- ${dateMounts}-${dateYear} -- >` as string + + const currAlbum = albums!.find(album => album.name === albumName) + const albumPhotos = currAlbum!.photos; + // make new Photo + albumPhotos!.push(new Photos(photoName, newDate , src)); + updatePhotosToLocalStorage() + const photoContainer = `${albumName}-photos`; + renderPhotoCard(albumPhotos, photoContainer) + ev.target.reset() + } catch (error) { + console.error(error); + } +} +function handleSubmitSearchSection(ev: any) { + try { + ev.preventDefault(); + const titleList = document.getElementById('searchSectionTitleList')! as HTMLElement; + const inputSearchValue = ev.target.elements.inputValueSearch.value + if(!inputSearchValue) return + const findSearchArr = albums.find(album => album.name.toLocaleLowerCase() === inputSearchValue.toLocaleLowerCase()) + if(!findSearchArr) return alert("the albums not found") + const {name , photos} = findSearchArr; + titleList.innerText = name + const listSearchAlbum = document.getElementById('listSearchAlbum') + + + renderPhotoCard(photos , "sections-search_photos"); + + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/control.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/control.js new file mode 100644 index 000000000..b3cb585b3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/control.js @@ -0,0 +1,376 @@ +// +//USERS LOCAL STORAGE +function createListToOptions() { + try { + // sent data list to options + var selectList_1 = document.getElementById('selectList'); + selectList_1.innerHTML = ''; + albums.forEach(function (album) { + selectList_1.innerHTML += ""; + }); + } + catch (error) { + console.error(error); + } +} +//------------------------------------ USERS SETTING +function checkMatchUserDetails(emailUser, passwordUser) { + try { + if (!users) + throw new Error("the users no exist"); + var userIndex = users.findIndex(function (user) { return emailUser.toLowerCase() === user.email.toLowerCase() && passwordUser === user.password; }); + if (userIndex === -1) + return false; + else { + localStorage.setItem("userIndex", userIndex.toString()); + return true; + } + } + catch (error) { + console.error(error); + return false; + } +} +function checksIfUserExists(emailUser) { + try { + var userCur = users.find(function (user) { return user.email === emailUser; }); + if (!userCur) + return false; + else { + return true; + } + } + catch (error) { + console.error(error); + return false; + } +} +function openMenuLogoutBtn() { + try { + var collapseUserLogout_1 = document.querySelector(".user-box-profile-collapse"); + var collapseUserLogoutIcon_1 = document.querySelector(".user-box-profile i"); + var userBoxProfileClick = document.querySelector('.user-box-profile '); + ; + userBoxProfileClick === null || userBoxProfileClick === void 0 ? void 0 : userBoxProfileClick.addEventListener('click', function (e) { + collapseUserLogout_1.classList.toggle('active'); + if (collapseUserLogout_1.classList.contains('active')) { + collapseUserLogoutIcon_1.style.rotate = '180deg'; + } + else { + collapseUserLogoutIcon_1.style.rotate = '0deg'; + } + }); + } + catch (error) { + console.error(error); + } +} +function logout() { + try { + localStorage.setItem("userLogIn", "false"); + } + catch (error) { + console.error(error); + } +} +function insideTheUser() { + try { + if (localStorage.getItem("userLogIn") === "true") { + return true; + } + else { + return false; + } + } + catch (error) { + console.error(error); + return false; + } +} +//---------------------------- LOGIN-/-Sign-Up--Pages +// LOg in function +function handleSubmitSignIn(ev) { + try { + ev.preventDefault(); + var _a = ev.target.elements, email = _a.email, password = _a.password, username = _a.username, gender = _a.gender; + var errorMsgEmailInput = document.getElementById('errorMsgEmailInput'); + var errorMsgPasswordInput = document.getElementById('errorMsgPasswordInput'); + if (checksIfUserExists(email.value)) { + errorMsgEmailInput.innerText = "This Email Exist in The System"; + errorMsgEmailInput.parentElement.classList.add("empty"); + return; + } + else { + errorMsgEmailInput.parentElement.classList.remove("empty"); + } + if (email.value == '') { + errorMsgEmailInput.innerText = "Please enter your ProList username or email address."; + errorMsgEmailInput.parentElement.classList.add("empty"); + return; + } + else { + errorMsgEmailInput.parentElement.classList.remove("empty"); + } + if (password.value == '') { + errorMsgPasswordInput.innerText = "Please enter your password."; + errorMsgPasswordInput.parentElement.classList.add("empty"); + return; + } + else if (password.value.length <= 5) { + errorMsgPasswordInput.innerText = "Password Must to be with 5 letter or more"; + errorMsgPasswordInput.parentElement.classList.add("empty"); + return; + } + else if (password.value.length <= 5) { + errorMsgPasswordInput.innerText = "Password Must to be with 5 letter or more"; + errorMsgPasswordInput.parentElement.classList.add("empty"); + return; + } + else { + errorMsgPasswordInput.parentElement.classList.remove("empty"); + } + users.push(new Users(email.value, password.value, username.value, gender.value, false)); + updateUsersToLocalStorage(); + ev.target.reset(); + return location.href = './login.html'; + } + catch (error) { + console.error(error); + } +} +// Sign IN function +function handleSubmitLogIn(ev) { + try { + ev.preventDefault(); + var _a = ev.target.elements, emailLogin = _a.emailLogin, passwordLogin = _a.passwordLogin; + var errorMsgEmailInputLog = document.getElementById('errorMsgEmailInputLOG'); + var errorMsgPasswordInputLog = document.getElementById('errorMsgPasswordInputLOG'); + if (emailLogin.value == '') { + errorMsgEmailInputLog.innerText = "Please enter your ProList username or email address."; + errorMsgEmailInputLog.parentElement.classList.add("empty"); + return; + } + else { + errorMsgEmailInputLog.parentElement.classList.remove("empty"); + } + if (passwordLogin.value == '') { + errorMsgPasswordInputLog.innerText = "Please enter your password."; + errorMsgPasswordInputLog.parentElement.classList.add("empty"); + return; + } + else { + errorMsgPasswordInputLog.parentElement.classList.remove("empty"); + } + if (checkMatchUserDetails(emailLogin.value, passwordLogin.value)) { + ifRefresh(); + ev.target.reset(); + return location.href = './index.html'; + } + else { + var textWarning = document.getElementById('pNotLoginSucc'); + textWarning.innerHTML = + "\n \n The email or password not match!\n "; + textWarning.style.color = "red"; + } + } + catch (error) { + console.error(error); + } +} +function handleClickLogOut() { + try { + logout(); + location.reload(); + } + catch (error) { + console.error(error); + } +} +//---------------------------Handle Click Function List Left----------------- +//home +function handleClickHomeList(ev) { + try { + var sectionsHome = document.querySelector('.sections-home'); + var lists = document.querySelectorAll('.list '); + makeSectionsActive(sectionsHome); + lists.forEach(function (list) { + list.classList.add("active"); + }); + } + catch (error) { + console.error(error); + } +} +//search +function handleClickSearchList(ev) { + try { + var sectionsSearch = document.querySelector('.sections-search'); + makeSectionsActive(sectionsSearch); + } + catch (error) { + console.error(error); + } +} +//library +function handleClickLibraryList(ev) { + try { + if (!insideTheUser()) { + alert("you must to login to enter Library"); + } + else { + var sectionsLibrary = document.querySelector('.sections-library'); + var lists = document.querySelectorAll('.list '); + lists.forEach(function (list) { + list.classList.add("active"); + }); + makeSectionsActive(sectionsLibrary); + } + } + catch (error) { + console.error(error); + } +} +//Create Album +function handleClickCreateAlbumList(ev) { + try { + if (!insideTheUser()) { + alert("you must to login to enter Library"); + } + else { + var sectionsCreateAlbum = document.querySelector('.sections-create-album'); + var lists = document.querySelectorAll('.list '); + lists.forEach(function (list) { + list.classList.add("active"); + }); + makeSectionsActive(sectionsCreateAlbum); + createListToOptions(); + } + } + catch (error) { + console.error(error); + } +} +//Liked Song +function handleClickLikedPhotosList(ev) { + try { + if (!insideTheUser()) { + alert("you must to login to enter Library"); + } + else { + var sectionsLikedPhotos = document.getElementById('likedSongSection'); + var lists = document.querySelectorAll('.list '); + lists.forEach(function (list) { + list.classList.add("active"); + }); + sectionsLikedPhotos.classList.add("active"); + makeSectionsActive(sectionsLikedPhotos); + } + } + catch (error) { + console.error(error); + } +} +function handleClickLists(ev) { + try { + var sectionsHome = document.querySelectorAll('.sections-home div'); + if (!sectionsHome) + throw new Error("section Home Divs not exist"); + sectionsHome.forEach(function (e) { + e.classList.remove("active"); + if ((e.getAttribute("datalist") !== null) && e.getAttribute("datalist") === ev.target.textContent) { + var element = e; + element.classList.add("active"); + } + console.error(); + }); + } + catch (error) { + console.error(error); + } +} +function handleClickAddToLike(ev) { + var albumName = ev.target.parentElement.parentElement.parentElement.querySelector('h4').innerText; + var photoTitle = ev.target.parentElement.querySelector('h3').textContent; + var btnLike = ev.target.parentElement.querySelector('button'); + var currPhoto; + var isDefaultAlbum = ['Backgrounds', 'Animals'].includes(albumName); + if (isDefaultAlbum) { + var albumSelected = albumName === 'Animals' ? animals : backgrounds; + currPhoto = albumSelected.find(function (photo) { return photo.photoName === photoTitle; }); + } + else { + var currAlbum = albums.find(function (album) { return album.name === albumName; }); + currPhoto = currAlbum.photos.find(function (photo) { return photo.photoName === photoTitle; }); + } + currPhoto.like = !currPhoto.like; + if (currPhoto.like) { + btnLike.style.color = "red"; + } + else { + btnLike.style.color = "black"; + } + if (!isDefaultAlbum) + updatePhotosToLocalStorage(); + else if (albumName === 'Animals') + saveAnimalsToStorage(); + else if (albumName === 'Background') + saveBackgroundToStorage(); + renderPhotoCard(getLikesPhotos(), "likeSongList"); +} +//----------------------Handle Submit Function left List----------------- +function handleSubmitCreateAlbumsList(ev) { + try { + ev.preventDefault(); + var nameListValue = ev.target.elements.createListName.value; + if (Number(nameListValue)) + return alert("the value must to be string"); + createNewList(nameListValue, nameListValue, "sections-library"); + createListToOptions(); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} +function handleSubmitCreatePhoto(ev) { + try { + ev.preventDefault(); + var albumName_1 = ev.target.elements.selectList.value; + var photoName = ev.target.elements.photoNameCreateImage.value; + var date = ev.target.elements.photoDateCreateImage.value; + var src = ev.target.elements.photoSrcCreateImage.value; + var dateMounts = date.slice(5, date.length); + var dateYear = date.slice(0, 5); + var newDate = "< -- " + dateMounts + "-" + dateYear + " -- >"; + var currAlbum = albums.find(function (album) { return album.name === albumName_1; }); + var albumPhotos = currAlbum.photos; + // make new Photo + albumPhotos.push(new Photos(photoName, newDate, src)); + updatePhotosToLocalStorage(); + var photoContainer = albumName_1 + "-photos"; + renderPhotoCard(albumPhotos, photoContainer); + ev.target.reset(); + } + catch (error) { + console.error(error); + } +} +function handleSubmitSearchSection(ev) { + try { + ev.preventDefault(); + var titleList = document.getElementById('searchSectionTitleList'); + var inputSearchValue_1 = ev.target.elements.inputValueSearch.value; + if (!inputSearchValue_1) + return; + var findSearchArr = albums.find(function (album) { return album.name.toLocaleLowerCase() === inputSearchValue_1.toLocaleLowerCase(); }); + if (!findSearchArr) + return alert("the albums not found"); + var name = findSearchArr.name, photos = findSearchArr.photos; + titleList.innerText = name; + var listSearchAlbum = document.getElementById('listSearchAlbum'); + renderPhotoCard(photos, "sections-search_photos"); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/dist/model.dev.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/dist/model.dev.js new file mode 100644 index 000000000..59db72e68 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/dist/model.dev.js @@ -0,0 +1,241 @@ +"use strict"; + +var __spreadArrays = void 0 && (void 0).__spreadArrays || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) { + s += arguments[i].length; + } + + for (var r = Array(s), k = 0, i = 0; i < il; i++) { + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) { + r[k] = a[j]; + } + } + + return r; +}; + +var _a, _b; + +var storageData = getUsersFromStorage(); // LocalStorage DATA + +var lastUserIn = getLastRegisterUser(); +var usernameUser; +var emailUser; + +var Albums = +/** @class */ +function () { + function Albums(name, photos) { + this.name = name; + this.photos = photos; + } + + return Albums; +}(); + +var Users = +/** @class */ +function () { + function Users(email, password, username, gender, admin, albums) { + this.email = email; + this.password = password; + this.username = username; + this.gender = gender; + this.admin = admin; + this.albums = albums; + } + + return Users; +}(); + +var Photos = +/** @class */ +function () { + function Photos(photoName, date, src) { + this.photoName = photoName; + this.date = date; + this.src = src; + this.uId = uid(); + this.like = false; + } + + return Photos; +}(); + +var users = (_a = getUsersFromStorage()) !== null && _a !== void 0 ? _a : []; // set The Album to Album Local Storage + +var likedPhotos = []; +var albums = (_b = getAlbumFromStorage()) !== null && _b !== void 0 ? _b : []; +var animals = getAnimalsAlbum(); +var backgrounds = getBackgroundAlbum(); //USERS LOCAL STORAGE + +function getLastRegisterUser() { + try { + var usersDataJson = localStorage.getItem("users"); + if (!usersDataJson) throw new Error("no found localStorage users"); + var userData = JSON.parse(usersDataJson); + var index = userData.length - 1; + var lastRegister = storageData[index]; + return lastRegister; + } catch (error) { + console.error(error); + return {}; + } +} //USERS LOCAL STORAGE + + +function updateUsersToLocalStorage() { + try { + if (!users) throw new Error("not find Users in local storage"); + localStorage.setItem("users", JSON.stringify(users)); + } catch (error) { + console.log(error); + } +} + +function getUsersFromStorage() { + try { + var dataJson = localStorage.getItem("users"); + if (!dataJson) throw new Error("not find users in local storage"); + var data = JSON.parse(dataJson); + return data; + } catch (error) { + console.log(error); + return undefined; + } +} //PHOTOS LOCAL STORAGE + + +function updatePhotosToLocalStorage() { + try { + if (!albums) throw new Error("not find albums in local storage"); + localStorage.setItem("albums", JSON.stringify(albums)); + } catch (error) { + console.log(error); + } +} + +function getAlbumFromStorage() { + try { + var dataJson = localStorage.getItem("albums"); + if (!dataJson) throw new Error("not find albums in local storage"); + var data = JSON.parse(dataJson); + return data; + } catch (error) { + console.log(error); + return undefined; + } +} //IF THE USER LOGIN SUCCESS + + +function ifRefresh() { + try { + localStorage.setItem("userLogIn", "true"); + } catch (error) { + console.log(error); + } +} //ANIMAL LOCAL STORAGE + + +function getAnimalsAlbum() { + var animalsData = [{ + uId: "01010101", + photoName: "animal2", + date: "1234", + src: "https://a-z-animals.com/media/tiger_laying_hero_background.jpg", + like: false + }, { + uId: "01010101", + photoName: "animal3", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOkwHi7EWXOBxgW_zLsTQ2ZU_qqxaxRswZkiYVxBgjndCCcFF6rwP1F6NZu8zqC1XGAMc&usqp=CAU", + like: false + }, { + uId: "01010101", + photoName: "animal4", + date: "1234", + src: "https://navs.org/wp-content/uploads/bb-plugin/cache/bunny-landscape.jpg", + like: false + }, { + uId: "01010101", + photoName: "animal5", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM0ZpNjOZUiorOad2OK0q9Dw2_hPakrXMLdQ&usqp=CAU", + like: false + }]; + var animalsAlbum = localStorage.getItem('animals'); + + if (!animalsAlbum) { + localStorage.setItem('animals', JSON.stringify(animalsData)); + } else { + animalsData = JSON.parse(animalsAlbum); + } + + return animalsData; +} + +function saveAnimalsToStorage() { + localStorage.setItem('animals', JSON.stringify(animals)); +} //BACKGROUNDS LOCAL STORAGE + + +function getBackgroundAlbum() { + var backgroundsData = [{ + uId: "01010101", + photoName: "background1", + date: "1234", + src: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg", + like: false + }, { + uId: "01010101", + photoName: "background3", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuEYSRMBGU80tU-7ycVzMZSIsau-nELR_B_y3sFsRmp7xq4BsL92fjUlR1oK63hlDm98A&usqp=CAU", + like: false + }, { + uId: "01010101", + photoName: "background3", + date: "", + src: "https://media.istockphoto.com/id/1353553203/photo/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-forest-trees-background.jpg?b=1&s=170667a&w=0&k=20&c=-jvR1WDwcloLXRgRTGeyG3frvrhPIbegdemeL6vY2Pk=", + like: false + }, { + uId: "01010101", + photoName: "background4", + date: "", + src: "https://i.pinimg.com/736x/90/36/9f/90369ff207a44eb772af864db67e1cb4.jpg", + like: false + }, { + uId: "01010101", + photoName: "background5", + date: "", + src: "https://m.media-amazon.com/images/I/31qu4ixHZ3L._SY355_.jpg", + like: false + }]; + var backgroundsAlbum = localStorage.getItem('backgrounds'); + + if (!backgroundsAlbum) { + localStorage.setItem('backgrounds', JSON.stringify(backgroundsData)); + } else { + backgroundsData = JSON.parse(backgroundsAlbum); + } + + return backgroundsData; +} + +function saveBackgroundToStorage() { + localStorage.setItem('backgrounds', JSON.stringify(backgrounds)); +} // ARR LIKED PHOTOS + + +function getLikesPhotos() { + var filterLike = function filterLike(photo) { + return photo.like; + }; + + var filteredAlbums = albums.reduce(function (photos, currAlbum) { + var filterPhotos = currAlbum.photos.filter(filterLike); + photos = __spreadArrays(photos, filterPhotos); + return photos; + }, []); + return __spreadArrays(animals.filter(filterLike), backgrounds.filter(filterLike), filteredAlbums); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/helper.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/helper.js new file mode 100644 index 000000000..180e6761c --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/helper.js @@ -0,0 +1,3 @@ +var uid = function () { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +}; diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/index.css b/02-TypeScript/18-personalProject/Checked/Orel/dist/index.css new file mode 100644 index 000000000..4445519a5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/index.css @@ -0,0 +1,457 @@ +:root { + --black-dark: #121111; + --gray-dark: #000000; + --gray-light: #1d1d1d; + --gray-no-hover: #b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; + --green: #1ed760; + --error: rgb(241, 28, 28); + --success: rgb(24, 161, 24); + --widthNavBarLeft: 250px; +} + +* { + list-style: none; + text-decoration: none; + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, +html { + font-family: "Poppins", sans-serif; + width: 100vw; + height: 100vh; + font-size: 15px; +} + +.users-options-after-login { + position: relative; + width: 180px; + flex-direction: column; + cursor: pointer; + color: #fff6f6; +} +.users-options-after-login .user-box-profile { + background-color: #968a8a64; + border-radius: 15px; + padding: 0 10px; + display: flex; + text-align: center; + align-items: center; + gap: 10px; +} +.users-options-after-login .user-box-profile img { + display: block; + margin: auto; + width: 50px; + border-radius: 50%; + height: 50px; + background-color: white; +} +.users-options-after-login .user-box-profile i { + rotate: 0deg; +} +.users-options-after-login .user-box-profile-collapse { + background-color: var(--gray-no-hover); + overflow: hidden; + position: absolute; + display: none; + z-index: 999; + width: 90%; + top: 50px; + border-radius: 0 0 50px 50px; + right: 8px; + height: 0px; + transition: 0.5s ease-in height; +} +.users-options-after-login .user-box-profile-collapse.active { + display: block; + height: 50px; +} +.users-options-after-login .user-box-profile-collapse .logout-btn { + border: none; + width: 100%; + padding: 5px; + height: 100%; + background-color: inherit; + transition: all ease-in 0.1s; +} +.users-options-after-login .user-box-profile-collapse .logout-btn:hover { + scale: 1.09; +} +.users-options-after-login .user-box-profile-collapse .logout-btn span { + padding-right: 5px; + font-size: 1.2rem; + font-weight: bold; +} +.users-options-after-login .user-box-profile-collapse .logout-btn i { + font-size: 1.2rem; +} + +.line { + display: block; + height: 1px; + background-color: var(--gray-no-hover); + opacity: 0.2; +} + +#main-section { + overflow: hidden; + position: relative; + width: inherit; + height: inherit; + background-color: var(--gray-light); +} +#main-section .sticky-navbar { + height: inherit; +} +#main-section .sticky-navbar div.left-header { + position: sticky; + top: 0; + left: 0; + padding: 15px; + width: 250px; + height: inherit; + background-color: var(--black-dark); + text-align: start; +} +#main-section .sticky-navbar div.left-header div { + margin: 20px 0; +} +#main-section .sticky-navbar div.left-header div.icon { + transform: translateX(-20px); +} +#main-section .sticky-navbar div.left-header div.icon a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; +} +#main-section .sticky-navbar div.left-header div.icon a img { + z-index: 2; + width: 100px; +} +#main-section .sticky-navbar div.left-header div.icon a span { + font-weight: 500; + color: white; + font-size: 2rem; + margin-left: -15px; +} +#main-section .sticky-navbar div.left-header div.list-up { + font-weight: 500; +} +#main-section .sticky-navbar div.left-header div.list-up .menu-navbar li button { + border: none; + width: 100%; + text-align: start; + cursor: pointer; + color: var(--gray-no-hover); + background-color: transparent; + font-size: 1rem; + padding: 10px; +} +#main-section .sticky-navbar div.left-header div.list-up .menu-navbar li button.active, #main-section .sticky-navbar div.left-header div.list-up .menu-navbar li button:hover { + color: white; +} +#main-section .sticky-navbar div.left-header div.list-up .menu-navbar li button span { + font-weight: 700; + margin-left: 20px; +} +#main-section .sticky-navbar div.left-header div.list-up .menu-navbar li button i { + font-size: 1.3rem; +} +#main-section .sticky-navbar div.left-header .list-down { + color: var(--gray-no-hover); +} +#main-section .sticky-navbar div.left-header .list-down li { + width: 100%; + text-align: start; + cursor: pointer; + color: var(--gray-no-hover); + background-color: transparent; + font-size: 1rem; + padding: 10px; +} +#main-section .sticky-navbar div.left-header .list-down li.active, #main-section .sticky-navbar div.left-header .list-down li:hover { + color: white; +} +#main-section .sticky-navbar div.left-header .list-down li span { + font-weight: 700; + margin-left: 20px; +} +#main-section .sticky-navbar div.left-header .list-down li i { + font-size: 1.5rem; +} +#main-section .sticky-navbar div.left-header div.container-playlist { + display: flex; + flex-direction: column; + text-align: start; + overflow-y: scroll; + width: 100%; + height: calc(100% - 410px); +} +#main-section .sticky-navbar div.left-header div.container-playlist::-webkit-scrollbar { + display: none; +} +#main-section .sticky-navbar div.left-header div.container-playlist button { + border: none; + color: var(--gray-no-hover); + background-color: transparent; + padding-top: 20px; + text-align: start; + font-size: 1rem; +} +#main-section .sticky-navbar div.left-header div.container-playlist button:hover { + color: white; +} +#main-section .sticky-navbar div.top-navbar { + display: flex; + justify-content: space-between; + align-items: center; + text-align: center; + padding: 0 25px; + position: absolute; + top: 0; + right: 0; + width: calc(100% - var(--widthNavBarLeft)); + height: 100px; + background-color: var(--black-dark); +} +#main-section .sticky-navbar div.top-navbar .arrow { + color: white; + display: flex; + height: inherit; +} +#main-section .sticky-navbar div.top-navbar .arrow button { + border: none; + width: 65px; + padding: 15px; + font-size: 1.5rem; + background-color: transparent; + color: var(--gray-no-hover); + cursor: pointer; +} +#main-section .sticky-navbar div.top-navbar .arrow button:hover { + color: #fff; +} +#main-section .sticky-navbar div.top-navbar .arrow button i { + font-size: 25px; +} +#main-section .sticky-navbar div.top-navbar .users-options { + padding: 0 16px; +} +#main-section .sticky-navbar div.top-navbar .users-options a { + text-decoration: none; +} +#main-section .sticky-navbar div.top-navbar .users-options a button { + padding: 10px 20px; + font-size: 1rem; + height: 55px; + width: 120px; + border-radius: 50px; + font-weight: bold; +} +#main-section .sticky-navbar div.top-navbar .users-options a button.register-btn { + background-color: transparent; + color: var(--gray-no-hover); +} +#main-section .sticky-navbar div.top-navbar .users-options a button.register-btn:hover { + color: #fff; +} +#main-section .sticky-navbar div.top-navbar .users-options a button:hover { + scale: 1.05; +} +#main-section .main-board-center { + display: none; + overflow-y: scroll; + position: absolute; + bottom: 0; + right: 0; + width: calc(100vw - var(--widthNavBarLeft)); + height: calc(100vh - 100px); + background-color: var(--gray-light); + /* width */ + /* Track */ + /* Handle */ +} +#main-section .main-board-center.active { + display: flex; +} +#main-section .main-board-center::-webkit-scrollbar { + width: 15px; +} +#main-section .main-board-center::-webkit-scrollbar-track { + background-color: #090909; +} +#main-section .main-board-center::-webkit-scrollbar-thumb { + background: var(--gray-no-hover); +} +#main-section .main-board-center main { + color: #fff; + padding: 16px; + width: 100%; +} +#main-section .main-board-center main .section { + display: none; + min-width: 700px; + padding: 25px 50px; + flex-wrap: wrap; + flex-direction: column; + text-align: center; + width: inherit; +} +#main-section .main-board-center main .section.active { + display: flex; +} +#main-section .main-board-center main .section.list { + display: none; +} +#main-section .main-board-center main .section.list.active { + display: block; +} +#main-section .main-board-center main .section h4 { + font-size: 1.5rem; + margin-top: 25px; +} +#main-section .main-board-center main .section h4:hover { + text-decoration: underline; +} +#main-section .main-board-center main .section .recommended-list, +#main-section .main-board-center main .section .list-make { + margin-top: 25px; + display: flex; + flex-wrap: wrap; + min-width: 100%; + text-align: center; + align-items: center; + justify-content: center; +} +#main-section .main-board-center main .section .recommended-list .photo-card, +#main-section .main-board-center main .section .list-make .photo-card { + position: relative; + overflow: hidden; + padding-bottom: 20px; + margin: 10px; + width: 250px; + height: 350px; + background-color: #191a19; + border-radius: 25px; + box-shadow: inset 0 0 10px 10px rgba(2, 2, 2, 0.26), 0 0 5px 5px rgba(92, 69, 69, 0.623); + transition: scale 0.2s ease-in; +} +#main-section .main-board-center main .section .recommended-list .photo-card:hover, +#main-section .main-board-center main .section .list-make .photo-card:hover { + scale: 1.01; +} +#main-section .main-board-center main .section .recommended-list .photo-card button, +#main-section .main-board-center main .section .list-make .photo-card button { + position: absolute; + top: 15px; + left: 15px; + width: 50px; + height: 50px; + font-size: 1.8rem; + color: black; + background-color: white; + border-radius: 50%; + padding: 5px; + cursor: pointer; + border: 1px solid var(--gray-no-hover); +} +#main-section .main-board-center main .section .recommended-list .photo-card button:hover, +#main-section .main-board-center main .section .list-make .photo-card button:hover { + transform: scale(1.1); +} +#main-section .main-board-center main .section .recommended-list .photo-card img, +#main-section .main-board-center main .section .list-make .photo-card img { + width: 100%; + height: 250px; + object-fit: cover; +} +#main-section .main-board-center main .sections-search .search-form { + border-radius: 15px; + margin: 20px auto; +} +#main-section .main-board-center main .sections-search .search-form input { + border-radius: 15px 0 0 15px; + padding: 10px 20px; + border: none; + outline: none; + color: #ffffff; + background-color: var(--black-dark); +} +#main-section .main-board-center main .sections-search .search-form input::placeholder { + color: #ffffff; +} +#main-section .main-board-center main .sections-search .search-form button { + border-radius: 0 15px 15px 0; + padding: auto; + background-color: var(--gray-no-hover); + padding: 10px 20px; + margin-left: -7px; + border: none; + cursor: pointer; +} +#main-section .main-board-center main .sections-search .search-form button:hover { + background-color: var(--gray-no-hover); + box-shadow: 1px 1px 15px 10px rgba(0, 0, 0, 0.295); +} +#main-section .main-board-center main #createAlbumSection { + display: none; + justify-content: center; + align-items: center; +} +#main-section .main-board-center main #createAlbumSection.active { + display: flex; +} +#main-section .main-board-center main #createAlbumSection form { + margin-top: 15px; + width: 70%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} +#main-section .main-board-center main #createAlbumSection form div { + margin-top: 15px; + height: 100px; +} +#main-section .main-board-center main #createAlbumSection form div input, #main-section .main-board-center main #createAlbumSection form div select, #main-section .main-board-center main #createAlbumSection form div button { + padding: 10px 20px; +} +#main-section .main-board-center main #createAlbumSection form div button { + display: block; + width: 150px; + margin: 10px auto; + border-radius: 15px; + border: none; + font-weight: 700; + background-color: var(--gray-no-hover); + transition: all ease 0.2s; + cursor: pointer; +} +#main-section .main-board-center main #createAlbumSection form div button:hover { + background-color: #068827; + color: #fff; +} +#main-section .main-board-center main #createAlbumSection form div span { + margin-top: 15px; + display: block; +} + +@media only screen and (max-width: 1600px) { + html, +body { + font-size: 15px; + } + html .photo-card, +body .photo-card { + width: 200px !important; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/index.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/index.js new file mode 100644 index 000000000..7ec39f420 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/index.js @@ -0,0 +1,49 @@ +var userLogInFromStorage = localStorage.getItem("userLogIn"); +var usersOptionsBtn1 = document.querySelector('.users-options-after-login'); +var usersOptionsBtn = document.querySelector('.users-options'); +//Update Date From array TO LocalStorage +// updateInfoToLocalStorage() +// of Login +if (userLogInFromStorage === "true") { + if (!usersOptionsBtn || !usersOptionsBtn1) + throw new Error("the button element not found"); + usersOptionsBtn.style.display = "none"; + usersOptionsBtn1.style.display = "flex"; +} +else { + if (usersOptionsBtn || usersOptionsBtn1) { + usersOptionsBtn1.style.display = "none"; + usersOptionsBtn.style.display = "block"; + } +} +function makeListActive() { + var lists = document.querySelectorAll('.list '); + lists.forEach(function (list) { + list.classList.add("active"); + }); +} +function renderPhotoLibrary() { + if (!albums.length) + return; + albums.forEach(function (_a) { + var name = _a.name, photos = _a.photos; + renderNewList(name, name, 'sections-library'); + var photoContainer = name + "-photos"; + renderPhotoCard(photos, photoContainer); + }); +} +function onInit() { + if (insideTheUser()) { + openMenuLogoutBtn(); + renderPhotoCard(animals, "animalsList"); + renderPhotoCard(backgrounds, "backgroundList"); + changeProfileUserName(); + createListToOptions(); + renderLists(); + } + // updateInfoToLocalStorage() + // make Show Home Page + makeListActive(); + renderPhotoLibrary(); + renderPhotoCard(getLikesPhotos(), "likeSongList"); +} diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/login.css b/02-TypeScript/18-personalProject/Checked/Orel/dist/login.css new file mode 100644 index 000000000..9e83141f4 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/login.css @@ -0,0 +1,125 @@ +:root { + --black-dark: #090909; + --gray-dark: #121212; + --gray-light: #1d1d1d; + --gray-no-hover: #b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; + --green: #1ed760; + --error: rgb(241, 28, 28); + --success: rgb(24, 161, 24); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +input { + border: 1px solid black; +} + +section.login-section { + text-align: center; +} +section.login-section div.icon { + display: flex; + align-items: center; + justify-content: center; + height: 150px; +} +section.login-section div.icon a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; +} +section.login-section div.icon a img { + z-index: 2; + width: 150px; +} +section.login-section div.icon a span { + font-weight: 500; + color: black; + font-size: 3rem; + margin-left: -15px; +} +section.login-section div.login-screen form { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + position: relative; + justify-content: center; + width: 100vw; +} +section.login-section div.login-screen form h4 { + padding: 15px; +} +section.login-section div.login-screen form div { + display: flex; + flex-direction: column; + width: 500px; + margin: 5px; +} +section.login-section div.login-screen form div input { + padding: 10px 20px; + outline: none; +} +section.login-section div.login-screen form div:nth-child(4) { + flex-direction: row; + justify-content: space-around; + width: 150px; +} +section.login-section div.login-screen form div p { + display: none; + font-size: 0.8rem; + padding: 2px; +} +section.login-section div.login-screen form div p.empty { + display: block; + color: var(--error); +} +section.login-section div.login-screen form div p.success { + display: block; + color: var(--success); +} +section.login-section div.login-screen form button { + font-family: "Poppins", sans-serif; + position: relative; + bottom: 15px; + left: 200px; + padding: 15px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + border: none; + background-color: var(--green); + transition: background-color ease 0.4s; +} +section.login-section div.login-screen form button:hover { + background-color: #53e053; + font-size: 0.99rem; +} +section.login-section footer h3 { + margin-top: 10px; + margin-bottom: 25px; +} +section.login-section footer button { + font-family: "Poppins", sans-serif; + width: 550px; + padding: 10px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + color: var(--gray-light); + border: 1px solid var(--gray-light); + background-color: transparent; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/login.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/login.js new file mode 100644 index 000000000..2ab3f82cf --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/login.js @@ -0,0 +1 @@ +getMatchUserDetail(); diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/model.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/model.js new file mode 100644 index 000000000..983c0203a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/model.js @@ -0,0 +1,231 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +var _a, _b; +var Albums = /** @class */ (function () { + function Albums(name, photos) { + this.name = name; + this.photos = photos; + } + return Albums; +}()); +var Users = /** @class */ (function () { + function Users(email, password, username, gender, admin, albums) { + this.email = email; + this.password = password; + this.username = username; + this.gender = gender; + this.admin = admin; + this.albums = albums; + } + return Users; +}()); +var Photos = /** @class */ (function () { + function Photos(photoName, date, src) { + this.photoName = photoName; + this.date = date; + this.src = src; + this.uId = uid(); + this.like = false; + } + return Photos; +}()); +var users = (_a = getUsersFromStorage()) !== null && _a !== void 0 ? _a : []; +// set The Album to Album Local Storage +var likedPhotos = []; +var albums = (_b = getAlbumFromStorage()) !== null && _b !== void 0 ? _b : []; +var animals = getAnimalsAlbum(); +var backgrounds = getBackgroundAlbum(); +function getLastRegisterUser() { + try { + var usersDataJson = localStorage.getItem("users"); + if (!usersDataJson) + throw new Error("no found localStorage users"); + var userData = JSON.parse(usersDataJson); + var lastRegister = users[getUserIndexFromLocalStorage()]; + return lastRegister; + } + catch (error) { + console.error(error); + return {}; + } +} +//USERS LOCAL STORAGE +function updateUsersToLocalStorage() { + try { + if (!users) + throw new Error("not find Users in local storage"); + localStorage.setItem("users", JSON.stringify(users)); + } + catch (error) { + console.log(error); + } +} +function getUsersFromStorage() { + try { + var dataJson = localStorage.getItem("users"); + if (!dataJson) + throw new Error("not find users in local storage"); + var data = JSON.parse(dataJson); + return data; + } + catch (error) { + console.log(error); + return undefined; + } +} +//PHOTOS LOCAL STORAGE +function updatePhotosToLocalStorage() { + try { + if (!albums) + throw new Error("not find albums in local storage"); + localStorage.setItem("albums", JSON.stringify(albums)); + } + catch (error) { + console.log(error); + } +} +function getAlbumFromStorage() { + try { + var dataJson = localStorage.getItem("albums"); + if (!dataJson) + throw new Error("not find albums in local storage"); + var data = JSON.parse(dataJson); + return data; + } + catch (error) { + console.log(error); + return undefined; + } +} +function getUserIndexFromLocalStorage() { + try { + var stringUserIndex = localStorage.getItem("userIndex"); + if (!stringUserIndex) + throw new Error("the userIndex not exist in the local storage"); + var userIndex = Number(stringUserIndex); + return userIndex; + } + catch (error) { + console.error(error); + return 0; + } +} +//IF THE USER LOGIN SUCCESS +function ifRefresh() { + try { + localStorage.setItem("userLogIn", "true"); + } + catch (error) { + console.log(error); + } +} +//ANIMAL LOCAL STORAGE +function getAnimalsAlbum() { + var animalsData = [ + { + uId: "01010101", + photoName: "animal2", + date: "1234", + src: "https://a-z-animals.com/media/tiger_laying_hero_background.jpg", + like: false + }, + { + uId: "01010101", + photoName: "animal3", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOkwHi7EWXOBxgW_zLsTQ2ZU_qqxaxRswZkiYVxBgjndCCcFF6rwP1F6NZu8zqC1XGAMc&usqp=CAU", + like: false + }, + { + uId: "01010101", + photoName: "animal4", + date: "1234", + src: "https://navs.org/wp-content/uploads/bb-plugin/cache/bunny-landscape.jpg", + like: false + }, + { + uId: "01010101", + photoName: "animal5", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM0ZpNjOZUiorOad2OK0q9Dw2_hPakrXMLdQ&usqp=CAU", + like: false + } + ]; + var animalsAlbum = localStorage.getItem('animals'); + if (!animalsAlbum) { + localStorage.setItem('animals', JSON.stringify(animalsData)); + } + else { + animalsData = JSON.parse(animalsAlbum); + } + return animalsData; +} +function saveAnimalsToStorage() { + localStorage.setItem('animals', JSON.stringify(animals)); +} +//BACKGROUNDS LOCAL STORAGE +function getBackgroundAlbum() { + var backgroundsData = [ + { + uId: "01010101", + photoName: "background1", + date: "1234", + src: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg", + like: false + }, + { + uId: "01010101", + photoName: "background3", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuEYSRMBGU80tU-7ycVzMZSIsau-nELR_B_y3sFsRmp7xq4BsL92fjUlR1oK63hlDm98A&usqp=CAU", + like: false + }, + { + uId: "01010101", + photoName: "background3", + date: "", + src: "https://media.istockphoto.com/id/1353553203/photo/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-forest-trees-background.jpg?b=1&s=170667a&w=0&k=20&c=-jvR1WDwcloLXRgRTGeyG3frvrhPIbegdemeL6vY2Pk=", + like: false + }, + { + uId: "01010101", + photoName: "background4", + date: "", + src: "https://i.pinimg.com/736x/90/36/9f/90369ff207a44eb772af864db67e1cb4.jpg", + like: false + }, + { + uId: "01010101", + photoName: "background5", + date: "", + src: "https://m.media-amazon.com/images/I/31qu4ixHZ3L._SY355_.jpg", + like: false + } + ]; + var backgroundsAlbum = localStorage.getItem('backgrounds'); + if (!backgroundsAlbum) { + localStorage.setItem('backgrounds', JSON.stringify(backgroundsData)); + } + else { + backgroundsData = JSON.parse(backgroundsAlbum); + } + return backgroundsData; +} +function saveBackgroundToStorage() { + localStorage.setItem('backgrounds', JSON.stringify(backgrounds)); +} +// ARR LIKED PHOTOS +function getLikesPhotos() { + var filterLike = function (photo) { return photo.like; }; + var filteredAlbums = albums.reduce(function (photos, currAlbum) { + var filterPhotos = currAlbum.photos.filter(filterLike); + photos = __spreadArrays(photos, filterPhotos); + return photos; + }, []); + return __spreadArrays(animals.filter(filterLike), backgrounds.filter(filterLike), filteredAlbums); +} diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/saveLocalStorage.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/saveLocalStorage.js new file mode 100644 index 000000000..186b4ae8d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/saveLocalStorage.js @@ -0,0 +1,31 @@ +// function dataFromStorage() { +// try { +// const dataFromStorageUsers = localStorage.getItem("users") +// if (!dataFromStorageUsers || dataFromStorageUsers == null) { +// updateUserToLocalStorage() +// } else if (storageData!.length <= users.length) { +// updateUserToLocalStorage() +// } else { +// const data = JSON.parse(dataFromStorageUsers); +// users.splice(0 , users.length , ...data) +// console.log("users", users); +// } +// } catch (error) { +// console.log(error); +// } +// } +// function dataFromStorage1() { +// try { +// const dataFromStorageAlbums = localStorage.getItem("albums") +// if (!dataFromStorageAlbums || dataFromStorageAlbums === null && getAlbumFromStorage()![albums.length-1].photos.length !== 0) { +// updatePhotosToLocalStorage() +// } else if (getAlbumFromStorage()!.length <= albums.length) { +// updatePhotosToLocalStorage() +// } else { +// const data = JSON.parse(dataFromStorageAlbums); +// albums.splice(0, albums.length, ...data) +// } +// } catch (error) { +// console.log(error); +// } +// } diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/sighin.css b/02-TypeScript/18-personalProject/Checked/Orel/dist/sighin.css new file mode 100644 index 000000000..c1e0fa3e2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/sighin.css @@ -0,0 +1,113 @@ +:root { + --black-dark: #090909; + --gray-dark: 121212; + --gray-light: #1d1d1d; + --gray-no-hover: #b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; + --green: #1ed760; + --error: rgb(241, 28, 28); + --success: rgb(24, 161, 24); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +section.register-section { + text-align: center; +} +section.register-section div.icon { + display: flex; + align-items: center; + justify-content: center; + height: 150px; +} +section.register-section div.icon a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; +} +section.register-section div.icon a img { + z-index: 2; + width: 150px; +} +section.register-section div.icon a span { + font-weight: 500; + color: black; + font-size: 3rem; + margin-left: -15px; +} +section.register-section div.register-screen form { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + position: relative; + justify-content: center; + width: 100vw; +} +section.register-section div.register-screen form h1 { + padding: 15px; +} +section.register-section div.register-screen form div { + display: flex; + flex-direction: column; + width: 350px; + margin: 5px; +} +section.register-section div.register-screen form div input { + padding: 10px 20px; + outline: none; +} +section.register-section div.register-screen form div p { + display: none; + font-size: 0.8rem; + padding: 2px; +} +section.register-section div.register-screen form div p.empty { + color: var(--error); + display: block; +} +section.register-section div.register-screen form div p.success { + color: var(--success); + display: block; +} +section.register-section div.register-screen form #submitBtnLogin { + font-family: "Poppins", sans-serif; + padding: 15px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + border: none; + background-color: var(--green); + transition: background-color ease 0.4s; +} +section.register-section div.register-screen form #submitBtnLogin:hover { + background-color: #53e053; + font-size: 0.99rem; +} +section.register-section footer h3 { + margin-top: 10px; + margin-bottom: 25px; +} +section.register-section footer button { + font-family: "Poppins", sans-serif; + width: 550px; + padding: 10px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + color: var(--gray-light); + border: 1px solid var(--gray-light); + background-color: transparent; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/signin.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/signin.js new file mode 100644 index 000000000..2ab3f82cf --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/signin.js @@ -0,0 +1 @@ +getMatchUserDetail(); diff --git a/02-TypeScript/18-personalProject/Checked/Orel/dist/view.js b/02-TypeScript/18-personalProject/Checked/Orel/dist/view.js new file mode 100644 index 000000000..987b31c04 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/dist/view.js @@ -0,0 +1,86 @@ +function changeProfileUserName() { + var nameProfile = document.querySelector('.user-box-profile h5'); + nameProfile.innerText = users[getUserIndexFromLocalStorage()].username; +} +function renderPhotoCard(cards, containerClass, albumName) { + var mainContainer = document.querySelector("." + containerClass); + mainContainer.innerHTML = ''; + if (mainContainer === undefined) + throw new Error('the Element not found'); + var AllCards = ""; + cards.forEach(function (photo) { + AllCards += newPhotoCard(photo.photoName, photo.date.toString(), photo.src, photo.like); + }); + mainContainer.innerHTML = AllCards; + return AllCards; +} +function renderLists() { + try { + var containerPlaylist = document.querySelector(".container-playlist"); + if (!containerPlaylist) + throw new Error("the playlist container not exist"); + containerPlaylist.innerHTML = ''; + var html_1 = ''; + albums.forEach(function (album) { + var tamp = "\n "; + html_1 += tamp; + }); + containerPlaylist.innerHTML = html_1; + return html_1; + } + catch (error) { + console.error(error); + return ""; + } +} +function createNewList(nameList, titleList, classNameContainer) { + try { + if (nameList.split(' ').join("").length < nameList.length) { + nameList = nameList.split(' ').join("-"); + } + albums.push(new Albums(nameList, [])); + renderLists(); + updatePhotosToLocalStorage(); + return renderNewList(nameList, titleList, classNameContainer); + } + catch (error) { + console.log(error); + return ''; + } +} +function renderNewList(nameList, titleList, classNameContainer) { + var sectionsHome = document.querySelector("." + classNameContainer); + var patten = "\n
                \n

                " + titleList + "

                \n
                \n
                \n
                \n "; + sectionsHome.innerHTML += patten; + return patten; +} +function newPhotoCard(namePhoto, date, src, isLike) { + try { + var index = getUserIndexFromLocalStorage(); + var patten = "\n
                \n \"\"\n

                " + namePhoto + "

                \n

                " + users[index].username + "

                \n " + date + "\n \n
                \n "; + // const findIndex = albums.findIndex(album => album.name === albumName) + // const photoArr = albums[findIndex].photos + // photoArr.push(new Photos(namePhoto,date, src)) + return patten; + } + catch (error) { + console.error(error); + return ''; + } +} +function makeSectionsActive(element) { + try { + var containerMainAppDivs = document.querySelectorAll('.container-main-app div'); + containerMainAppDivs.forEach(function (ele) { + ele.classList.remove("active"); + }); + element.classList.add('active'); + var buttons = document.querySelectorAll('.menu-navbar li button'); + buttons.forEach(function (button) { + button.classList.remove("active"); + }); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/Orel/helper.ts b/02-TypeScript/18-personalProject/Checked/Orel/helper.ts new file mode 100644 index 000000000..fb2092627 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/helper.ts @@ -0,0 +1,4 @@ +const uid = function(){ + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} + diff --git a/02-TypeScript/18-personalProject/Checked/Orel/img/logo.png b/02-TypeScript/18-personalProject/Checked/Orel/img/logo.png new file mode 100644 index 000000000..ea45fce07 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Orel/img/logo.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Orel/img/userwitoutimg.png b/02-TypeScript/18-personalProject/Checked/Orel/img/userwitoutimg.png new file mode 100644 index 000000000..4a1cb622f Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/Orel/img/userwitoutimg.png differ diff --git a/02-TypeScript/18-personalProject/Checked/Orel/index.css b/02-TypeScript/18-personalProject/Checked/Orel/index.css new file mode 100644 index 000000000..96e28932f --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/index.css @@ -0,0 +1,105 @@ +:root { + --black-dark: #090909; + --gray-dark: 121212; + --gray-light: #1d1d1d; + --gray-no-hover:#b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, html { + font-family: "Poppins", sans-serif; + width: 100vw; + height: 100vh; +} + +.line { + width: 80%; + height: 1px; + background-color: var(--gray-no-hover); + opacity: 0.2; +} + +section#main-section { + width: inherit; + height: inherit; + background-color: var(--gray-light); +} +section#main-section header { + padding: 15px; + width: 420px; + height: inherit; + background-color: var(--black-dark); + text-align: start; +} +section#main-section header div { + margin: 20px 0; +} +section#main-section header div.icon a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; +} +section#main-section header div.icon a img { + z-index: 2; + width: 100px; +} +section#main-section header div.icon a span { + font-weight: 500; + color: white; + font-size: 2rem; + margin-left: -15px; +} +section#main-section header div.list-up { + font-weight: 500; +} +section#main-section header div.list-up .menu-navbar li button { + width: 100%; + text-align: start; + cursor: pointer; + color: var(--gray-no-hover); + background-color: transparent; + font-size: 1.2rem; + padding: 10px; +} +section#main-section header div.list-up .menu-navbar li button span { + font-weight: 700; + margin-left: 20px; +} +section#main-section header div.list-up .menu-navbar li button i { + font-size: 1.7rem; +} +section#main-section header div.list-up .menu-navbar li button.active { + color: white; +} +section#main-section header .list-down { + color: var(--gray-no-hover); +} +section#main-section header .list-down li { + width: 100%; + text-align: start; + cursor: pointer; + color: var(--gray-no-hover); + background-color: transparent; + font-size: 1.2rem; + padding: 10px; +} +section#main-section header .list-down li span { + font-weight: 700; + margin-left: 20px; +} +section#main-section header .list-down li i { + font-size: 2rem; +} +section#main-section header .list-down li.active { + color: white; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/index.html b/02-TypeScript/18-personalProject/Checked/Orel/index.html new file mode 100644 index 000000000..51a1dd94e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/index.html @@ -0,0 +1,196 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + PhotoList + + + +
                +
                +
                +
                + + icon-music-control + + PhotoList + + +
                +
                +
                  + +
                • + +
                  • + +
                • + +
                  • + +
                • + +
                  • + +
                +
                + +
                  +
                • Create Album
                  • +
                • Liked Photos
                  • +
                  +
                + +
                + +
                +
                + +
                + + +
                + + + +
                + + +
                +
                + +
                +
                + + +
                +

                Home Section

                + +
                + +

                Animals

                +
                +
                +
                +
                +

                Backgrounds

                +
                +
                +
                + +
                + +
                +

                Search List

                +
                + + +
                +

                +
                +
                + +
                + + +
                +

                Library Section

                +
                + +
                +

                Create Album Section

                +
                +

                ADD NEW LIST

                +
                + + + +
                +
                + +
                +

                ADD NEW PHOTO

                +
                + + + + + + + + +
                +
                +
                + +
                +
                +

                You Liked

                +
                +
                +
                +
                + +
                +
                + +
                + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/index.scss b/02-TypeScript/18-personalProject/Checked/Orel/index.scss new file mode 100644 index 000000000..bd3d9f20e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/index.scss @@ -0,0 +1,576 @@ +:root { + //COLOR + --black-dark: #121111; + --gray-dark: #000000; + --gray-light: #1d1d1d; + --gray-no-hover: #b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; + --green: #1ed760; + --error: rgb(241, 28, 28); + --success: rgb(24, 161, 24); + --widthNavBarLeft: 250px; +} + + + + + +* { + + list-style: none; + text-decoration: none; + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, +html { + + font-family: 'Poppins', sans-serif; + width: 100vw; + height: 100vh; + font-size: 15px; +} + +.users-options-after-login { + position: relative; + width: 180px; + flex-direction: column; + cursor: pointer; + + color: rgb(255, 246, 246); + + .user-box-profile { + + background-color: #968a8a64; + border-radius: 15px; + padding: 0 10px; + display: flex; + text-align: center; + align-items: center; + gap: 10px; + + + + img { + display: block; + margin: auto; + width: 50px; + border-radius: 50%; + height: 50px; + background-color: rgb(255, 255, 255); + } + + i { + rotate: 0deg; + } + + } + + .user-box-profile-collapse { + background-color: var(--gray-no-hover); + overflow: hidden; + position: absolute; + display: none; + z-index: 999; + width: 90%; + top: 50px; + border-radius: 0 0 50px 50px; + right: 8px; + height: 0px; + transition: 0.5s ease-in height; + + &.active { + display: block; + height: 50px; + } + + .logout-btn { + border: none; + width: 100%; + padding: 5px; + height: 100%; + background-color: inherit; + transition: all ease-in 0.1s; + + &:hover { + scale: 1.09; + } + + span { + padding-right: 5px; + font-size: 1.2rem; + font-weight: bold; + } + + i { + + font-size: 1.2rem; + } + } + } + + +} + +// made line from div +.line { + display: block; + height: 1px; + background-color: var(--gray-no-hover); + opacity: 0.2; +} + + +#main-section { + + overflow: hidden; + position: relative; + width: inherit; + height: inherit; + background-color: var(--gray-light); + + .sticky-navbar { + height: inherit; + + div.left-header { + + position: sticky; + top: 0; + left: 0; + padding: 15px; + width: 250px; + height: inherit; + background-color: var(--black-dark); + text-align: start; + + div { + + margin: 20px 0; + } + + div.icon { + transform: translateX(-20px); + + a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; + + img { + z-index: 2; + width: 100px; + } + + span { + + font-weight: 500; + color: white; + font-size: 2rem; + margin-left: -15px; + } + } + } + + div.list-up { + font-weight: 500; + + .menu-navbar { + li { + + button { + border: none; + width: 100%; + text-align: start; + cursor: pointer; + color: var(--gray-no-hover); + background-color: transparent; + font-size: 1rem; + padding: 10px; + + &.active, + &:hover { + color: white; + } + + span { + font-weight: 700; + margin-left: 20px; + } + + i { + font-size: 1.3rem; + } + } + } + } + } + + .list-down { + color: var(--gray-no-hover); + + li { + width: 100%; + text-align: start; + cursor: pointer; + color: var(--gray-no-hover); + background-color: transparent; + font-size: 1rem; + padding: 10px; + + &.active, + &:hover { + color: white; + } + + span { + font-weight: 700; + margin-left: 20px; + } + + i { + font-size: 1.5rem; + + } + } + } + + div.container-playlist { + + display: flex; + flex-direction: column; + text-align: start; + overflow-y:scroll ; + width: 100%; + height:calc(100% - 410px); + + &::-webkit-scrollbar{ + display: none; + } + button { + border: none; + color: var(--gray-no-hover); + background-color: transparent; + padding-top: 20px; + text-align: start; + font-size: 1rem; + + &:hover { + color: white; + } + } + } + } + + div.top-navbar { + display: flex; + justify-content: space-between; + align-items: center; + text-align: center; + padding: 0 25px; + position: absolute; + top: 0; + right: 0; + width: calc(100% - var(--widthNavBarLeft)); + height: 100px; + background-color: var(--black-dark); + + .arrow { + color: white; + display: flex; + height: inherit; + + button { + border: none; + width: 65px; + padding: 15px; + font-size: 1.5rem; + background-color: transparent; + color: var(--gray-no-hover); + cursor: pointer; + + &:hover { + color: #fff; + } + + i { + font-size: 25px; + + } + } + } + + .users-options { + padding: 0 16px; + + a { + text-decoration: none; + + button { + padding: 10px 20px; + font-size: 1rem; + height: 55px; + width: 120px; + border-radius: 50px; + font-weight: bold; + + &.register-btn { + background-color: transparent; + color: var(--gray-no-hover); + + &:hover { + color: #fff; + } + } + + &:hover { + scale: 1.05; + } + } + } + } + } + } + + .main-board-center { + display: none; + overflow-y: scroll; + position: absolute; + bottom: 0; + right: 0; + width: calc(100vw - var(--widthNavBarLeft)); + height: calc(100vh - 100px); + background-color: var(--gray-light); + + &.active { + display: flex; + } + + /* width */ + &::-webkit-scrollbar { + width: 15px; + } + + /* Track */ + &::-webkit-scrollbar-track { + background-color: #090909; + + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + background: var(--gray-no-hover); + + } + + main { + color: #fff; + padding: 16px; + width: 100%; + + + + .section { + display: none; + min-width: 700px; + padding: 25px 50px; + flex-wrap: wrap; + flex-direction: column; + text-align: center; + width: inherit; + + &.active { + display: flex; + } + + &.list { + display: none; + + &.active{ + display: block; + } + } + + h4 { + font-size: 1.5rem; + margin-top: 25px; + + &:hover { + text-decoration: underline; + } + + + } + + + .recommended-list, + .list-make { + margin-top: 25px; + display: flex; + flex-wrap: wrap; + min-width: 100%; + text-align: center; + align-items: center; + justify-content: center; + + .photo-card { + position: relative; + overflow: hidden; + padding-bottom: 20px; + margin: 10px; + width: 250px; + height: 350px; + background-color: rgb(25, 26, 25); + border-radius: 25px; + box-shadow: inset 0 0 10px 10px rgba(2, 2, 2, 0.26), + 0 0 5px 5px rgba(92, 69, 69, 0.623); + transition: scale 0.2s ease-in; + + &:hover { + scale: 1.01; + } + +button{ + position: absolute; + top: 15px; + left: 15px; + width: 50px; + height: 50px; + font-size: 1.8rem; + color: black; + background-color: white; + border-radius: 50%; + padding: 5px; + cursor: pointer; + border: 1px solid var(--gray-no-hover); + &:hover { + transform: scale(1.1); + + } +} + + img { + width: 100%; + height: 250px; + + object-fit: cover; + } + + + } + + + } + } + .sections-search{ + .search-form{ + + border-radius: 15px; + margin:20px auto; + input{ + + border-radius: 15px 0 0 15px; + padding: 10px 20px; + border: none; + outline: none; + color: #ffffff; + background-color: var(--black-dark); + &::placeholder{ + color: #ffffff; + } + } + button{ + + border-radius: 0 15px 15px 0; + padding: auto; + background-color: var(--gray-no-hover); + padding: 10px 20px; + margin-left: -7px; + border: none; + cursor: pointer; + &:hover{ + background-color: var(--gray-no-hover); + box-shadow: 1px 1px 15px 10px rgba(0, 0, 0, 0.295); + } + } + } + } + #createAlbumSection{ + display: none; + justify-content: center; + align-items: center; + + &.active{ + display: flex; + } + + + form{ + margin-top: 15px; + width: 70%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + + div{ + margin-top: 15px; + height: 100px; + input , select , button{ + + padding: 10px 20px; + } + + button { + + display: block; + width: 150px; + margin:10px auto; + border-radius: 15px; + border: none; + font-weight: 700; + background-color: var(--gray-no-hover); + transition: all ease 0.2s; + cursor: pointer; + &:hover{ + background-color: rgb(6, 136, 39); + color: #fff; + } + + + } + span{ + margin-top: 15px; + display: block; + } + + } + + } + + } + + + } + } +} + +@media only screen and (max-width: 1600px) { + + html, + body { + font-size: 15px; + .photo-card { + width: 200px !important; + + } + } + + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/index.ts b/02-TypeScript/18-personalProject/Checked/Orel/index.ts new file mode 100644 index 000000000..61ed201ee --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/index.ts @@ -0,0 +1,58 @@ + +const userLogInFromStorage = localStorage.getItem("userLogIn") as string +const usersOptionsBtn1 = document.querySelector('.users-options-after-login')! as HTMLElement; +const usersOptionsBtn = document.querySelector('.users-options')! as HTMLElement; +//Update Date From array TO LocalStorage +// updateInfoToLocalStorage() + + + +// of Login +if (userLogInFromStorage === "true") { + if (!usersOptionsBtn || !usersOptionsBtn1) throw new Error("the button element not found") + usersOptionsBtn.style.display = "none"; + usersOptionsBtn1.style.display = "flex"; + +} else { + if (usersOptionsBtn || usersOptionsBtn1) { + usersOptionsBtn1.style.display = "none"; + usersOptionsBtn.style.display = "block"; + } + +} + +function makeListActive() { + const lists = document.querySelectorAll('.list '); + lists.forEach(list => { + list.classList.add("active") + }); +} + + +function renderPhotoLibrary() { + if (!albums.length) return; + albums.forEach(({ name, photos }) => { + renderNewList(name, name, 'sections-library'); + const photoContainer = `${name}-photos`; + renderPhotoCard(photos, photoContainer); + }) + +} + +function onInit() { + + + if (insideTheUser()) { + openMenuLogoutBtn() + renderPhotoCard(animals, "animalsList") + renderPhotoCard(backgrounds, "backgroundList") + changeProfileUserName() + createListToOptions() + renderLists() + } + // updateInfoToLocalStorage() + // make Show Home Page + makeListActive() + renderPhotoLibrary() + renderPhotoCard(getLikesPhotos(), "likeSongList"); +} diff --git a/02-TypeScript/18-personalProject/Checked/Orel/login.html b/02-TypeScript/18-personalProject/Checked/Orel/login.html new file mode 100644 index 000000000..7d8000e64 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/login.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/login.scss b/02-TypeScript/18-personalProject/Checked/Orel/login.scss new file mode 100644 index 000000000..a811dab8d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/login.scss @@ -0,0 +1,153 @@ +:root { + //COLOR + --black-dark: #090909; + --gray-dark: #121212; + --gray-light: #1d1d1d; + --gray-no-hover: #b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; + --green: #1ed760; + --error: rgb(241, 28, 28); + --success: rgb(24, 161, 24); +} + +* { + + padding: 0; + margin: 0; + box-sizing: border-box; +} + +input{ + border: 1px solid black; +} + +section.login-section { + text-align: center; + + div.icon { + display: flex; + align-items: center; + justify-content: center; + height: 150px; + + a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; + + img { + z-index: 2; + width: 150px; + } + + span { + font-weight: 500; + color: rgb(0, 0, 0); + font-size: 3rem; + margin-left: -15px; + + } + } + } + + div.login-screen { + form { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + position: relative; + justify-content: center; + width: 100vw; + + h4 { + padding: 15px; + } + + div { + display: flex; + flex-direction: column; + width: 500px; + margin: 5px; + + input { + padding: 10px 20px; + outline: none; + } + + &:nth-child(4) { + //remember me div + flex-direction: row; + justify-content: space-around; + width: 150px; + } + + p { + display: none; + font-size: 0.8rem; + padding: 2px; + + &.empty { + display: block; + color: var(--error) + } + + &.success { + display: block; + color: var(--success) + } + } + } + + button { + + font-family: 'Poppins', sans-serif; + position: relative; + bottom: 15px; + left: 200px; + padding: 15px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + border: none; + background-color: var(--green); + transition: background-color ease 0.4s; + + &:hover { + background-color: rgb(83, 224, 83); + font-size: 0.99rem; + } + + } + + } + } + + footer { + h3 { + margin-top: 10px; + margin-bottom: 25px; + } + + button { + + font-family: 'Poppins', sans-serif; + width: 550px; + padding: 10px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + color: var(--gray-light); + border: 1px solid var(--gray-light); + background-color: transparent; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/model.ts b/02-TypeScript/18-personalProject/Checked/Orel/model.ts new file mode 100644 index 000000000..ef873b8f3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/model.ts @@ -0,0 +1,236 @@ + + +class Albums { + constructor( + public name: string, + public photos: Photos[] + ) { } + +} + +class Users { + constructor( + public email: string, + public password: string, + public username: string, + public gender?: string, + public admin?: boolean, + public albums?: Array + ) { } +} +class Photos { + uId: string + like: boolean; + constructor( + public photoName: string, + public date: string, + public src: string + ) { + this.uId = uid() + this.like = false + } + +} + +const users: Users[] = getUsersFromStorage() ?? [] ; + + + +// set The Album to Album Local Storage +let likedPhotos: Photos[] = []; + +const albums: Albums[] = getAlbumFromStorage() ?? []; +const animals: Photos[] = getAnimalsAlbum(); +const backgrounds: Photos[] = getBackgroundAlbum(); + + + +function getLastRegisterUser():{}{ + try { + const usersDataJson = localStorage.getItem("users")! + if (!usersDataJson) throw new Error("no found localStorage users") + const userData = JSON.parse(usersDataJson) + const lastRegister = users[getUserIndexFromLocalStorage()] + return lastRegister + } catch (error) { + console.error(error) + return {} + } +} + +//USERS LOCAL STORAGE +function updateUsersToLocalStorage() { + try { + if (!users) throw new Error("not find Users in local storage") + localStorage.setItem("users", JSON.stringify(users)) + } catch (error) { + console.log(error); + } + +} +function getUsersFromStorage():Users[] | undefined{ + try { + const dataJson = localStorage.getItem("users") + if (!dataJson) throw new Error("not find users in local storage") +const data = JSON.parse(dataJson) + return data + + } catch (error) { + console.log(error); + return undefined + } +} + +//PHOTOS LOCAL STORAGE +function updatePhotosToLocalStorage() { + try { + if (!albums) throw new Error("not find albums in local storage") + + localStorage.setItem("albums", JSON.stringify(albums)) + + } catch (error) { + console.log(error); + } + +} + +function getAlbumFromStorage():Albums[] | undefined{ + try { + const dataJson = localStorage.getItem("albums") + if (!dataJson) throw new Error("not find albums in local storage") +const data = JSON.parse(dataJson) + return data + + } catch (error) { + console.log(error); + return undefined + } +} + +function getUserIndexFromLocalStorage():number{ + try { + const stringUserIndex = localStorage.getItem("userIndex") + if(!stringUserIndex) throw new Error("the userIndex not exist in the local storage") + const userIndex = Number(stringUserIndex); + return userIndex + } catch (error) { + console.error(error); + return 0 + } +} +//IF THE USER LOGIN SUCCESS +function ifRefresh():void { + + try { + localStorage.setItem("userLogIn", "true") + } catch (error) { + console.log(error); + } + +} + +//ANIMAL LOCAL STORAGE +function getAnimalsAlbum():Photos[] { + let animalsData = [ + { + uId: "01010101", + photoName: "animal2", + date: "1234", + src: "https://a-z-animals.com/media/tiger_laying_hero_background.jpg", + like: false + }, + { + uId: "01010101", + photoName: "animal3", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOkwHi7EWXOBxgW_zLsTQ2ZU_qqxaxRswZkiYVxBgjndCCcFF6rwP1F6NZu8zqC1XGAMc&usqp=CAU", + like: false + }, + { + uId: "01010101", + photoName: "animal4", + date: "1234", + src: "https://navs.org/wp-content/uploads/bb-plugin/cache/bunny-landscape.jpg", + like: false + }, + { + uId: "01010101", + photoName: "animal5", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM0ZpNjOZUiorOad2OK0q9Dw2_hPakrXMLdQ&usqp=CAU", + like: false + } + ]; + const animalsAlbum = localStorage.getItem('animals'); + if (!animalsAlbum) { + localStorage.setItem('animals',JSON.stringify(animalsData)) + } else { + animalsData = JSON.parse(animalsAlbum); + } + return animalsData; +} + +function saveAnimalsToStorage() { + localStorage.setItem('animals',JSON.stringify(animals)) +} +//BACKGROUNDS LOCAL STORAGE +function getBackgroundAlbum():Photos[] { + let backgroundsData = [ + { + uId: "01010101", + photoName: "background1", + date: "1234", + src: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg", + like: false + }, + { + uId: "01010101", + photoName: "background3", + date: "1234", + src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuEYSRMBGU80tU-7ycVzMZSIsau-nELR_B_y3sFsRmp7xq4BsL92fjUlR1oK63hlDm98A&usqp=CAU", + like: false + }, + { + uId: "01010101", + photoName: "background3", + date: "", + src: "https://media.istockphoto.com/id/1353553203/photo/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-forest-trees-background.jpg?b=1&s=170667a&w=0&k=20&c=-jvR1WDwcloLXRgRTGeyG3frvrhPIbegdemeL6vY2Pk=", + like: false + }, + { + uId: "01010101", + photoName: "background4", + date: "", + src: "https://i.pinimg.com/736x/90/36/9f/90369ff207a44eb772af864db67e1cb4.jpg", + like: false + }, + { + uId: "01010101", + photoName: "background5", + date: "", + src: "https://m.media-amazon.com/images/I/31qu4ixHZ3L._SY355_.jpg", + like: false + } + ]; + const backgroundsAlbum = localStorage.getItem('backgrounds'); + if (!backgroundsAlbum) { + localStorage.setItem('backgrounds',JSON.stringify(backgroundsData)) + } else { + backgroundsData = JSON.parse(backgroundsAlbum); + } + return backgroundsData; +} +function saveBackgroundToStorage() { + localStorage.setItem('backgrounds',JSON.stringify(backgrounds)) +} + +// ARR LIKED PHOTOS +function getLikesPhotos(): Photos[] { + const filterLike = (photo) => photo.like; + const filteredAlbums = albums.reduce((photos,currAlbum) => { + const filterPhotos = currAlbum.photos.filter(filterLike); + photos = [...photos,...filterPhotos]; + return photos; + },[]); + return [...animals.filter(filterLike) , ...backgrounds.filter(filterLike), ...filteredAlbums] +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/saveLocalStorage.ts b/02-TypeScript/18-personalProject/Checked/Orel/saveLocalStorage.ts new file mode 100644 index 000000000..52e5bfc54 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/saveLocalStorage.ts @@ -0,0 +1,36 @@ +// function dataFromStorage() { +// try { +// const dataFromStorageUsers = localStorage.getItem("users") +// if (!dataFromStorageUsers || dataFromStorageUsers == null) { +// updateUserToLocalStorage() +// } else if (storageData!.length <= users.length) { +// updateUserToLocalStorage() +// } else { +// const data = JSON.parse(dataFromStorageUsers); +// users.splice(0 , users.length , ...data) +// console.log("users", users); + +// } + +// } catch (error) { +// console.log(error); +// } +// } + +// function dataFromStorage1() { +// try { +// const dataFromStorageAlbums = localStorage.getItem("albums") + +// if (!dataFromStorageAlbums || dataFromStorageAlbums === null && getAlbumFromStorage()![albums.length-1].photos.length !== 0) { +// updatePhotosToLocalStorage() +// } else if (getAlbumFromStorage()!.length <= albums.length) { +// updatePhotosToLocalStorage() +// } else { +// const data = JSON.parse(dataFromStorageAlbums); +// albums.splice(0, albums.length, ...data) + +// } +// } catch (error) { +// console.log(error); +// } +// } diff --git a/02-TypeScript/18-personalProject/Checked/Orel/sighin.scss b/02-TypeScript/18-personalProject/Checked/Orel/sighin.scss new file mode 100644 index 000000000..8c4eb88c8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/sighin.scss @@ -0,0 +1,134 @@ +:root { + //COLOR + --black-dark: #090909; + --gray-dark: 121212; + --gray-light: #1d1d1d; + --gray-no-hover: #b2b2b2; + --purple: #af2896; + --blue1: #509bf5; + --blue2: #0d72ea; + --green: #1ed760; + --error: rgb(241, 28, 28); + --success: rgb(24, 161, 24); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +section.register-section { + text-align: center; + + div.icon { + display: flex; + align-items: center; + justify-content: center; + height: 150px; + + a { + display: flex; + text-align: center; + align-items: center; + justify-content: center; + text-decoration: none; + + img { + z-index: 2; + width: 150px; + } + + span { + font-weight: 500; + color: rgb(0, 0, 0); + font-size: 3rem; + margin-left: -15px; + + } + } + } + + div.register-screen { + form { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + position: relative; + justify-content: center; + width: 100vw; + + h1 { + padding: 15px; + } + + div { + display: flex; + flex-direction: column; + width: 350px; + margin: 5px; + + input { + padding: 10px 20px; + outline: none; + } + + p{ + display: none; + font-size: 0.8rem; + padding: 2px; + + &.empty { + color: var(--error); + display: block; + } + + &.success { + color: var(--success); + display: block; + } + } + } + + #submitBtnLogin { + font-family: 'Poppins', sans-serif; + padding: 15px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + border: none; + background-color: var(--green); + transition: background-color ease 0.4s; + + &:hover { + background-color: rgb(83, 224, 83); + font-size: 0.99rem; + } + } + } + } + + footer { + h3 { + margin-top: 10px; + margin-bottom: 25px; + } + + button { + font-family: 'Poppins', sans-serif; + width: 550px; + padding: 10px 25px; + font-size: 1rem; + cursor: pointer; + font-style: italic; + font-weight: 600; + border-radius: 50px; + color: var(--gray-light); + border: 1px solid var(--gray-light); + background-color: transparent; + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/signin.html b/02-TypeScript/18-personalProject/Checked/Orel/signin.html new file mode 100644 index 000000000..0d7ad38b9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/signin.html @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + Document + + + +
                +
                + + icon-music-control + + PhotoList + + + +
                +
                +

                Sign up for free to start listening..

                +
                + +
                +

                Sign up with your email address

                + + + +
                + + +

                + + Please enter your password. +

                +
                + +
                + + +

                + + Please enter your password. +

                +
                + +
                + + +

                + + Please enter your password. +

                +
                + + +
                + + + +
                + +
                + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/Orel/view.ts b/02-TypeScript/18-personalProject/Checked/Orel/view.ts new file mode 100644 index 000000000..713d0e5d0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/Orel/view.ts @@ -0,0 +1,118 @@ +function changeProfileUserName(): void{ + const nameProfile = document.querySelector('.user-box-profile h5')! as HTMLDListElement + nameProfile.innerText = users[getUserIndexFromLocalStorage()].username +} + +function renderPhotoCard(cards: Array, containerClass: string, albumName?: string): string { + const mainContainer = document.querySelector(`.${containerClass}`) as HTMLElement + mainContainer!.innerHTML = '' + if (mainContainer === undefined) throw new Error('the Element not found') + let AllCards = "" + cards.forEach(photo => { + AllCards += newPhotoCard(photo.photoName, photo.date.toString(), photo.src,photo.like) + }); + + mainContainer!.innerHTML = AllCards + + return AllCards +} + +function renderLists(): string | undefined { + try { + + const containerPlaylist = document.querySelector(".container-playlist")! as HTMLDivElement + if (!containerPlaylist) throw new Error("the playlist container not exist") + containerPlaylist.innerHTML = '' + let html = '' + albums.forEach(album => { + const tamp = ` + ` + html += tamp; + }) + + containerPlaylist.innerHTML = html + return html + } catch (error) { + console.error(error); + return "" + } +} + +function createNewList(nameList: string, titleList: string, classNameContainer: string): string { + +try { + +if(nameList.split(' ').join("").length < nameList.length){ + nameList = nameList.split(' ').join("-") +} +albums.push(new Albums(nameList, [])) +renderLists() +updatePhotosToLocalStorage(); + +return renderNewList(nameList,titleList,classNameContainer); +} catch (error) { + console.log(error); + return '' +} +} + +function renderNewList(nameList: string, titleList: string, classNameContainer: string) { + const sectionsHome = document.querySelector(`.${classNameContainer}`)! as HTMLDListElement; + + const patten = + ` +
                +

                ${titleList}

                +
                +
                +
                + ` + sectionsHome.innerHTML += patten; + return patten +} + +function newPhotoCard(namePhoto: string, date: string, src: string, isLike: boolean): string { + try { + const index = getUserIndexFromLocalStorage() + const patten = + ` +
                + +

                ${namePhoto}

                +

                ${users[index].username}

                + ${date} + +
                + ` + + // const findIndex = albums.findIndex(album => album.name === albumName) + // const photoArr = albums[findIndex].photos + // photoArr.push(new Photos(namePhoto,date, src)) + return patten + } catch (error) { + console.error(error); + return '' + } +} + +function makeSectionsActive(element: HTMLElement) { + try { + const containerMainAppDivs = document.querySelectorAll('.container-main-app div') + containerMainAppDivs.forEach(ele => { + ele.classList.remove("active") + }) + element.classList.add('active') + const buttons = document.querySelectorAll('.menu-navbar li button') + buttons.forEach(button => { + button.classList.remove("active") + }) + + } catch (error) { + console.error(error); + } + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/.vscode/settings.json b/02-TypeScript/18-personalProject/Checked/VladiBykanov/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/img/mapOne.png b/02-TypeScript/18-personalProject/Checked/VladiBykanov/img/mapOne.png new file mode 100644 index 000000000..0496c5efd Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/VladiBykanov/img/mapOne.png differ diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/img/mapTwo.png b/02-TypeScript/18-personalProject/Checked/VladiBykanov/img/mapTwo.png new file mode 100644 index 000000000..8e1a5112d Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/VladiBykanov/img/mapTwo.png differ diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/index.html b/02-TypeScript/18-personalProject/Checked/VladiBykanov/index.html new file mode 100644 index 000000000..71e8c88e8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/index.html @@ -0,0 +1,36 @@ + + + + + + + My Pacman GAME + + + + + + + + +
                +
                +
                +

                YOU WIN!

                +

                Final Score: 0

                + + + +
                +
                +

                GAME OVER!

                +

                Final Score: 0

                + + + +
                +
                +

                Score: 0

                +
                + + diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/scoreBoard.html b/02-TypeScript/18-personalProject/Checked/VladiBykanov/scoreBoard.html new file mode 100644 index 000000000..5c298cd8a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/scoreBoard.html @@ -0,0 +1,38 @@ + + + + + + + Score Board + + + + + + + + +
                +
                + + +
                +
                +
                  +
                • +

                  User Name

                  +
                    +
                  +
                  • +
                +
                  +
                • +

                  Highest Score

                  +
                    +
                    • +
                  +
                  +
                  + + diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/controls.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/controls.ts new file mode 100644 index 000000000..aaebd05e1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/controls.ts @@ -0,0 +1,126 @@ +function startGame() { + try { + getCurrentUserFromStorage(); + gameOver = false; + score = 0; + scoreEl.textContent = "0"; + winMessage.style.transform = "translateY(100vh)"; + loseMessage.style.transform = "translateY(100vh)"; + if (chosenMap) { + if (chosenMap === "mapOne") { + mazeOne.createMaze(); + palletsThisGame = palletsMapOne; + } else { + mazeTwo.createMaze(); + palletsThisGame = palletsMapTwo; + } + } + pacman.currentIndex = pacman.pacmanStrartingIndex; + pacman.draw(); + // draw ghosts to grid + ghosts.forEach((ghost) => { + ghost.isScared = false; + ghost.currentIndex = ghost.startIndex; + ghost.draw(); + ghost.move(); + }); + } catch (error) { + console.error(error); + } +} + +function checkGameStatus() { + checkForPoint(); + checkForCherry(); + checkForScaredGhost(); + checkForGamneOver(); + checkForWin(); + requestAnimationFrame(checkGameStatus); +} + +// function creatMaze(map: number[]) { +// map.forEach((value, index) => { +// const square = document.createElement("div") as HTMLDivElement; +// mazeDiv.appendChild(square); +// squares.push(square); + +// switch (value) { +// case 0: +// squares[index].classList.add("wall", "square"); +// break; +// case 1: +// squares[index].classList.add("point", "square"); +// break; +// case 2: +// cherryIndex.push(index); +// squares[index].classList.add("cherry", "square"); +// squares[index].innerHTML = ` +// +// `; +// break; +// case 9: +// squares[index].classList.add("square"); +// break; +// } +// }); +// } + +// function movePacman(direction: number) { +// if (gameOver) return; +// switch (direction) { +// case directions.moveLeft: +// if (checkForWall(pacman.currentIndex, directions.moveLeft)) { +// pacman.update(direction); +// } else if (pacman.currentIndex == 210) { +// pacman.update(direction); +// } +// break; + +// case directions.moveRight: +// if (checkForWall(pacman.currentIndex, directions.moveRight)) { +// pacman.update(direction); +// } else if (pacman.currentIndex == 230) { +// pacman.update(direction); +// } +// break; + +// case directions.moveUp: +// if (checkForWall(pacman.currentIndex, directions.moveUp)) { +// pacman.update(direction); +// } +// break; + +// case directions.movdeDown: +// if (checkForWall(pacman.currentIndex, directions.movdeDown)) { +// pacman.update(direction); +// } +// break; +// } +// } + +//move ghost function +// function moveGhost(ghost: Ghost) { +// if (gameOver) return; +// let direction = randomDirection(); + +// ghost.timerId = setInterval(() => { +// // if the square in the direction the ghost is going not containing another ghost or a wall => then he can move here +// if ( +// checkForWall(ghost.currentIndex, direction) && +// !squares[ghost.currentIndex + direction].classList.contains("ghost") +// ) { +// ghost.update(direction) +// } +// //else => find another direction +// else { +// direction = randomDirection(); +// } + +// //Change ghost color if scared +// if (ghost.isScared) { +// squares[ghost.currentIndex].classList.add("scaredGhost"); +// } +// }, ghost.speed); +// } diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/app.dev.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/app.dev.js new file mode 100644 index 000000000..68772d1b5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/app.dev.js @@ -0,0 +1,193 @@ +"use strict"; + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +console.log("Start"); +var maze = document.querySelector(".maze"); +var scoreEl = document.querySelector("#score"); +var score = 0; +var palletsLeft = 144; +var MAX_SCORE = 144; +var width = 21; +var layout = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 9, 7, 9, 9, 9, 9, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 0, 3, 3, 3, 0, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 3, 3, 3, 3, 3, 0, 9, 0, 1, 0, 0, 0, 0, 9, 9, 9, 9, 1, 9, 9, 0, 3, 3, 3, 3, 3, 0, 9, 9, 1, 9, 9, 9, 9, 0, 0, 0, 0, 1, 0, 9, 0, 3, 3, 3, 3, 3, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 9, 9, 5, 9, 9, 9, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // 0 = wall +// 1 = point +// 2 = cherry +// 3 = lair + +var squares = []; + +function creatMaze() { + for (var i = 0; i < layout.length; i++) { + var square = document.createElement("div"); + maze.appendChild(square); + squares.push(square); + + switch (layout[i]) { + case 0: + squares[i].classList.add("wall"); + break; + + case 1: + squares[i].classList.add("point"); + break; + + case 2: + squares[i].classList.add("cherry"); + break; + + case 3: + squares[i].classList.add("lair"); + break; + } + } +} + +creatMaze(layout); +var pacmanIndex = 283; +squares[pacmanIndex].classList.add("pacman"); + +function movePaman(e) { + squares[pacmanIndex].classList.remove("pacman"); + + switch (e.key) { + case "ArrowLeft": + if (!squares[pacmanIndex - 1].classList.contains("wall")) { + pacmanIndex -= 1; + } + + break; + + case "ArrowRight": + if (!squares[pacmanIndex + 1].classList.contains("wall")) { + pacmanIndex += 1; + } + + break; + + case "ArrowUp": + if (!squares[pacmanIndex - width].classList.contains("wall")) { + pacmanIndex -= width; + } + + break; + + case "ArrowDown": + if (!squares[pacmanIndex + width].classList.contains("wall") && !squares[pacmanIndex + width].classList.contains("lair")) { + pacmanIndex += width; + } + + break; + } + + squares[pacmanIndex].classList.add("pacman"); + checkForPoint(); + checkForCherry(); + checkForGamneOver(); + checkForWin(); +} + +document.addEventListener("keydown", movePaman); + +function checkForPoint() { + if (squares[pacmanIndex].classList.contains("point")) { + score++; + palletsLeft--; + scoreEl.textContent = score; + squares[pacmanIndex].classList.remove("point"); + squares[pacmanIndex].classList.add("pacman"); + } +} + +function checkForCherry() { + if (squares[pacmanIndex].classList.contains("cherry")) { + score += 10; + scoreEl.textContent = score; + squares[pacmanIndex].classList.remove("cherry"); + squares[pacmanIndex].classList.add("pacman"); + ghosts.forEach(function (ghost) { + return ghost.isScared = true; + }); + setTimeout(unScareGhosts, 10000); + } +} + +function unScareGhosts() { + ghosts.forEach(function (ghost) { + return ghost.isScared = false; + }); +} + +var Ghost = function Ghost(className, startIndex, speed) { + _classCallCheck(this, Ghost); + + this.className = className; + this.startIndex = startIndex; + this.speed = speed; + this.currentIndex = startIndex; + this.isScared = false; + this.timerId = NaN; +}; + +var ghosts = [new Ghost("blinky", 239, 250), new Ghost("pinky", 197, 400), new Ghost("inky", 201, 300), new Ghost("clyde", 243, 500)]; // draw ghosts to grid + +ghosts.forEach(function (ghost) { + squares[ghost.currentIndex].classList.add(ghost.className); + squares[ghost.currentIndex].classList.add("ghost"); +}); //move each ghost randomly + +ghosts.forEach(function (ghost) { + return moveGhost(ghost); +}); //move ghost function + +function moveGhost(ghost) { + var directions = [-1, +1, -width, width]; + var direction = directions[Math.floor(Math.random() * directions.length)]; + ghost.timerId = setInterval(function () { + // if the square in the direction the ghost is going not containing another ghost or a wall => then he can move here + if (!squares[ghost.currentIndex + direction].classList.contains("wall") && !squares[ghost.currentIndex + direction].classList.contains("ghost")) { + squares[ghost.currentIndex].classList.remove(ghost.className, "ghost", "scaredGhost"); + ghost.currentIndex += direction; + squares[ghost.currentIndex].classList.add(ghost.className, "ghost"); + } //else => find another direction + else { + direction = directions[Math.floor(Math.random() * directions.length)]; + } //Chack ghost color if scared + + + if (ghost.isScared) { + squares[ghost.currentIndex].classList.add("scaredGhost"); + } // if pacman gets to ghost when it is scared he can eat it + + + if (ghost.isScared && squares[ghost.currentIndex].classList.contains("pacman")) { + squares[ghost.currentIndex].classList.remove("ghost", ghost.className, "scaredGhost"); + score += 100; + ghost.currentIndex = ghost.startIndex; + squares[ghost.currentIndex].classList.add("ghost", ghost.className); + } + + checkForGamneOver(); + }, ghost.speed); +} + +function checkForGamneOver() { + if (squares[pacmanIndex].classList.contains("ghost") && !squares[pacmanIndex].classList.contains("scaredGhost")) { + ghosts.forEach(function (ghost) { + return clearInterval(ghost.timerId); + }); + document.removeEventListener("keydown", movePaman); + alert("Game Over"); + } +} + +function checkForWin() { + if (palletsLeft == 0) { + ghosts.forEach(function (ghost) { + return clearInterval(ghost.timerId); + }); + document.removeEventListener("keydown", movePaman); + setTimeout(function () { + alert("You Win!"); + }, 500); + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/controls.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/controls.js new file mode 100644 index 000000000..16f9b1771 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/controls.js @@ -0,0 +1,118 @@ +function startGame() { + try { + getCurrentUserFromStorage(); + gameOver = false; + score = 0; + scoreEl.textContent = "0"; + winMessage.style.transform = "translateY(100vh)"; + loseMessage.style.transform = "translateY(100vh)"; + if (chosenMap) { + if (chosenMap === "mapOne") { + mazeOne.createMaze(); + palletsThisGame = palletsMapOne; + } + else { + mazeTwo.createMaze(); + palletsThisGame = palletsMapTwo; + } + } + pacman.currentIndex = pacman.pacmanStrartingIndex; + pacman.draw(); + // draw ghosts to grid + ghosts.forEach(function (ghost) { + ghost.isScared = false; + ghost.currentIndex = ghost.startIndex; + ghost.draw(); + ghost.move(); + }); + } + catch (error) { + console.error(error); + } +} +function checkGameStatus() { + checkForPoint(); + checkForCherry(); + checkForScaredGhost(); + checkForGamneOver(); + checkForWin(); + requestAnimationFrame(checkGameStatus); +} +// function creatMaze(map: number[]) { +// map.forEach((value, index) => { +// const square = document.createElement("div") as HTMLDivElement; +// mazeDiv.appendChild(square); +// squares.push(square); +// switch (value) { +// case 0: +// squares[index].classList.add("wall", "square"); +// break; +// case 1: +// squares[index].classList.add("point", "square"); +// break; +// case 2: +// cherryIndex.push(index); +// squares[index].classList.add("cherry", "square"); +// squares[index].innerHTML = ` +// +// `; +// break; +// case 9: +// squares[index].classList.add("square"); +// break; +// } +// }); +// } +// function movePacman(direction: number) { +// if (gameOver) return; +// switch (direction) { +// case directions.moveLeft: +// if (checkForWall(pacman.currentIndex, directions.moveLeft)) { +// pacman.update(direction); +// } else if (pacman.currentIndex == 210) { +// pacman.update(direction); +// } +// break; +// case directions.moveRight: +// if (checkForWall(pacman.currentIndex, directions.moveRight)) { +// pacman.update(direction); +// } else if (pacman.currentIndex == 230) { +// pacman.update(direction); +// } +// break; +// case directions.moveUp: +// if (checkForWall(pacman.currentIndex, directions.moveUp)) { +// pacman.update(direction); +// } +// break; +// case directions.movdeDown: +// if (checkForWall(pacman.currentIndex, directions.movdeDown)) { +// pacman.update(direction); +// } +// break; +// } +// } +//move ghost function +// function moveGhost(ghost: Ghost) { +// if (gameOver) return; +// let direction = randomDirection(); +// ghost.timerId = setInterval(() => { +// // if the square in the direction the ghost is going not containing another ghost or a wall => then he can move here +// if ( +// checkForWall(ghost.currentIndex, direction) && +// !squares[ghost.currentIndex + direction].classList.contains("ghost") +// ) { +// ghost.update(direction) +// } +// //else => find another direction +// else { +// direction = randomDirection(); +// } +// //Change ghost color if scared +// if (ghost.isScared) { +// squares[ghost.currentIndex].classList.add("scaredGhost"); +// } +// }, ghost.speed); +// } diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/helpers.js new file mode 100644 index 000000000..b29323e5b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/helpers.js @@ -0,0 +1,225 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +function checkForPoint() { + try { + if (squares[pacman.currentIndex].classList.contains("point")) { + score++; + palletsThisGame--; + scoreEl.textContent = score.toString(); + squares[pacman.currentIndex].classList.remove("point"); + squares[pacman.currentIndex].classList.add("pacman"); + squares[pacman.currentIndex].classList.add("road"); + } + } + catch (error) { + console.error(error); + } +} +function checkForCherry() { + try { + if (squares[pacman.currentIndex].classList.contains("cherry")) { + if (scaredGhostsTime) + clearTimeout(scaredGhostsTime); + cherryIndex = __spreadArrays(cherryIndex.filter(function (value) { return value !== pacman.currentIndex; })); + squares[pacman.currentIndex].innerHTML = ""; + pacman.draw(); + score += 10; + scoreEl.textContent = score.toString(); + squares[pacman.currentIndex].classList.remove("cherry"); + ghosts.forEach(function (ghost) { return (ghost.isScared = true); }); + scaredGhostsTime = setTimeout(unScareGhosts, 5000); + } + } + catch (error) { + console.error(error); + } +} +function unScareGhosts() { + try { + ghosts.forEach(function (ghost) { return (ghost.isScared = false); }); + } + catch (error) { + console.error(error); + } +} +function checkForGamneOver() { + try { + if (squares[pacman.currentIndex].classList.contains("ghost") && + !squares[pacman.currentIndex].classList.contains("scaredGhost")) { + gameOver = true; + squares[pacman.currentIndex].classList.remove("pacman"); + if (score > currentUser.highScore) { + var findUser = usersList.find(function (user) { return user.userName == currentUser.userName; }); + if (findUser) + findUser.highScore = score; + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + } + resetGhosts(); + loseMessage.style.transform = "translateY(0)"; + finalScore[1].textContent = score.toString(); + clearInterval(glide); + } + } + catch (error) { + console.error(error); + } +} +function checkForWin() { + try { + if (palletsThisGame == 0) { + resetGhosts(); + squares[pacman.currentIndex].classList.remove("pacman"); + clearInterval(glide); + if (score > currentUser.highScore) { + var findUser = usersList.find(function (user) { return user.userName == currentUser.userName; }); + if (findUser) + findUser.highScore = score; + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + } + winMessage.style.transform = "translateY(0)"; + finalScore[0].textContent = score.toString(); + } + } + catch (error) { + console.error(error); + } +} +function checkForScaredGhost() { + try { + ghosts.forEach(function (ghost) { + if (squares[pacman.currentIndex].classList.contains(ghost.className) && + ghost.isScared) { + squares[pacman.currentIndex].classList.remove(ghost.className, "ghost", "scaredGhost"); + pacman.draw(); + ghost.currentIndex = ghost.resetIndex; + ghost.isScared = false; + squares[ghost.currentIndex].classList.add("ghost", ghost.className); + score += 100; + scoreEl.textContent = score.toString(); + } + }); + } + catch (error) { + console.error(error); + } +} +function checkForWall(currentIndex, direction) { + try { + return !squares[currentIndex + direction].classList.contains("wall"); + } + catch (error) { + console.error(error); + } +} +function drawCherryOnIndex(index) { + try { + squares[index].classList.add("cherry"); + squares[index].innerHTML = "\n \n "; + } + catch (error) { + console.error(error); + } +} +function removeUserChoiceFromLocalStorage() { + try { + localStorage.removeItem("userChoice"); + } + catch (error) { + console.error(error); + } +} +function addNewUserToLocalStorage() { + try { + if (userNameInput.value == "" || passwordInput.value == "") + return alert("Missing Input Field"); + if (checkIfUserExists(userNameInput.value)) + return alert("user name is taken"); + var newUser = new User(userNameInput.value, passwordInput.value); + localStorage.setItem("currentUser", JSON.stringify(newUser)); + usersList.push(newUser); + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + moveToWelcomePage(); + } + catch (error) { + console.error(error); + } +} +function checkIfUserExists(name) { + try { + return usersList.some(function (user) { return user.userName == name; }); + } + catch (error) { + console.error(error); + } +} +function verifyLogin() { + try { + var findUser = usersList.find(function (user) { + return user.userName === userNameInput.value && + user.password === passwordInput.value; + }); + if (findUser) { + localStorage.setItem("currentUser", JSON.stringify(findUser)); + return true; + } + return false; + } + catch (error) { + console.error(error); + } +} +function moveToWelcomePage() { + try { + userNameInput.value = ""; + passwordInput.value = ""; + loginPage.style.transform = "translateX(-100vw)"; + welcomePage.style.transform = "translateY(0)"; + } + catch (error) { + console.error(error); + } +} +function resetGhosts() { + try { + ghosts.forEach(function (ghost) { + squares[ghost.currentIndex].innerHTML = ""; + squares[ghost.currentIndex].classList.remove(ghost.className, "ghost", "scaredGhost"); + clearInterval(ghost.timerId); + }); + } + catch (error) { + console.error(error); + } +} +function getCurrentUserFromStorage() { + try { + var getUserFromStorage = localStorage.getItem("currentUser"); + if (getUserFromStorage) + currentUser = JSON.parse(getUserFromStorage); + var getListFromStorage = localStorage.getItem('signedUpUsers'); + if (getListFromStorage) + usersList.push.apply(usersList, JSON.parse(getListFromStorage)); + } + catch (error) { + console.error(error); + } +} +function updateUserScore() { + try { + if (score > currentUser.highScore) { + var findUser = usersList.find(function (user) { return user.userName == currentUser.userName; }); + if (findUser) + findUser.highScore = score; + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + localStorage.setItem("currentUser", JSON.stringify(findUser)); + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/main.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/main.js new file mode 100644 index 000000000..2cc89256a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/main.js @@ -0,0 +1,28 @@ +var pacman = new Pacman(150, 283); +startGame(); +checkGameStatus(); +window.addEventListener("keydown", function (e) { + if (e.repeat) + return; + switch (e.key) { + case "ArrowLeft": + pacman.move(directions.moveLeft); + break; + case "ArrowRight": + pacman.move(directions.moveRight); + break; + case "ArrowUp": + pacman.move(directions.moveUp); + break; + case "ArrowDown": + pacman.move(directions.movdeDown); + break; + } +}); +tryAgainBtn.forEach(function (btn) { return btn.addEventListener("click", startGame); }); +scoreboardBtn.forEach(function (btn) { + return btn.addEventListener("click", function () { + updateUserScore(); + window.location.href = "scoreBoard.html"; + }); +}); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/mainStyle.css b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/mainStyle.css new file mode 100644 index 000000000..fc82823ff --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/mainStyle.css @@ -0,0 +1,189 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + +:root { + --boardSize: 80vh; + --div-size: calc(var(--boardSize) / 21); +} + +body { + overflow: hidden; +} + +.gameWrapper { + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: space-around; + background-color: darkblue; +} +.gameWrapper .liveScore { + position: absolute; + color: darkblue; + font-size: 1.5rem; +} + +.maze { + box-shadow: 0 0 50px black; + width: var(--boardSize); + height: var(--boardSize); + display: flex; + flex-wrap: wrap; + position: relative; + background-color: white; +} +.maze .endGameWindow { + position: absolute; + font-size: 5vh; + z-index: 1; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + transition: all 0.5s; + font-family: Georgia, "Times New Roman", Times, serif; +} +.maze .endGameWindow button { + padding: 0.5em 1em; + font-size: 1.2rem; + border: none; + border-radius: 10px; + background-color: #333333; + color: whitesmoke; +} +.maze .endGameWindow button:hover { + cursor: pointer; + box-shadow: 0 0 20px black; + transition: box-shadow 0.5s; +} +.maze .winMessage { + color: lightcoral; + background-color: #236a46; +} +.maze .loseMessage { + color: orange; + background-color: #8d1818; +} +.maze .square { + width: var(--div-size); + height: var(--div-size); + display: flex; + align-items: center; + justify-content: center; +} +.maze .square svg { + width: calc(var(--div-size) - 1.5vh); +} +.maze .pacman { + border-radius: 50%; + background-color: darkorange; + position: relative; +} +.maze .pacman .eye { + position: absolute; + width: 0.3vw; + height: 0.3vw; + border-radius: 50%; + top: 20%; + right: 50%; + background: #333333; +} +.maze .pacman .mouth { + background: #fff; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + animation-name: eat; + animation-duration: 0.2s; + animation-iteration-count: infinite; +} +@keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } +} +.maze .wall { + background-color: black; +} +.maze .point { + border-radius: 50%; + background-color: green; + border: calc(var(--div-size) / 3) solid white; + box-sizing: border-box; +} +.maze .cherry svg { + fill: red; + filter: drop-shadow(3px 5px 2px black); +} +.maze .ghost { + border: 0px; +} +.maze .purple { + border-radius: 0; + background-color: white; +} +.maze .purple svg { + fill: purple; + filter: drop-shadow(3px 5px 2px black); +} +.maze .pink { + border-radius: 0; + background-color: white; +} +.maze .pink svg { + fill: palevioletred; + filter: drop-shadow(3px 5px 2px black); +} +.maze .blue { + border-radius: 0; + background-color: white; +} +.maze .blue svg { + fill: blue; + filter: drop-shadow(3px 5px 2px black); +} +.maze .green { + border-radius: 0; + background-color: white; +} +.maze .green svg { + fill: darkgreen; + filter: drop-shadow(3px 5px 2px black); +} +.maze .scaredGhost svg { + animation-name: scared; + animation-duration: 1s; + animation-iteration-count: infinite; +} +@keyframes scared { + 0% { + fill: #333333; + } + 50% { + fill: aquamarine; + } + 100% { + fill: #333333; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/model.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/model.js new file mode 100644 index 000000000..14eb9bfaa --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/model.js @@ -0,0 +1,242 @@ +var mapOne = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, + 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, + 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, + 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 9, + 9, 9, 9, 9, 9, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, + 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 9, 9, 9, 9, 9, 0, 9, 0, 1, 0, 0, + 0, 0, 9, 9, 9, 9, 1, 9, 9, 0, 9, 9, 9, 9, 9, 0, 9, 9, 1, 9, 9, 9, 9, 0, 0, 0, + 0, 1, 0, 9, 0, 9, 9, 9, 9, 9, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, + 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 9, 9, 5, 9, 9, + 9, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, + 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, + 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, + 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; +var mapTwo = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, + 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, + 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, 9, + 9, 9, 9, 9, 9, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, 9, 9, 9, 9, 9, 9, + 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, + 1, 0, 0, 1, 0, 0, 1, 9, 9, 0, 9, 9, 9, 9, 9, 0, 9, 9, 1, 0, 0, 1, 0, 0, 1, 0, + 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, + 9, 9, 9, 9, 9, 9, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, 9, 9, 5, 9, 9, + 9, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, + 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, + 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, + 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; +// 0 = wall +// 1 = point +// 2 = cherry +// an array that wil hold all the divs and their classes +var squares = []; +var Pacman = /** @class */ (function () { + function Pacman(pacmanSpeed, pacmanStrartingIndex) { + this.pacmanSpeed = pacmanSpeed; + this.pacmanStrartingIndex = pacmanStrartingIndex; + this.velocity = this.pacmanSpeed; + this.currentIndex = this.pacmanStrartingIndex; + } + Pacman.prototype.draw = function () { + var eye = document.createElement("div"); + eye.classList.add("eye"); + var mouth = document.createElement("div"); + mouth.classList.add("mouth"); + squares[pacman.currentIndex].innerHTML = ""; + squares[this.currentIndex].classList.add("pacman", "square"); + squares[this.currentIndex].append(eye); + squares[this.currentIndex].append(mouth); + }; + Pacman.prototype.update = function (direction) { + squares[pacman.currentIndex].classList.remove("pacman"); + clearInterval(glide); + squares[pacman.currentIndex].removeAttribute("style"); + if (pacman.currentIndex == 210) + pacman.currentIndex = 229; + else if (pacman.currentIndex == 230) + pacman.currentIndex = 211; + else + pacman.currentIndex += direction; + if (direction == 21) { + squares[pacman.currentIndex].style.transform = "rotate(90deg)"; + } + else if (direction == -21) { + squares[pacman.currentIndex].style.transform = "rotate(-90deg)"; + } + else { + squares[pacman.currentIndex].style.transform = "scaleX(" + direction + ")"; + } + glide = setInterval(this.move, pacman.velocity, direction); + this.draw(); + }; + Pacman.prototype.move = function (direction) { + if (gameOver) + return; + switch (direction) { + case directions.moveLeft: + if (checkForWall(pacman.currentIndex, directions.moveLeft)) { + pacman.update(direction); + } + else if (pacman.currentIndex == 210) { + pacman.update(direction); + } + break; + case directions.moveRight: + if (checkForWall(pacman.currentIndex, directions.moveRight)) { + pacman.update(direction); + } + else if (pacman.currentIndex == 230) { + pacman.update(direction); + } + break; + case directions.moveUp: + if (checkForWall(pacman.currentIndex, directions.moveUp)) { + pacman.update(direction); + } + break; + case directions.movdeDown: + if (checkForWall(pacman.currentIndex, directions.movdeDown)) { + pacman.update(direction); + } + break; + } + }; + return Pacman; +}()); +var Ghost = /** @class */ (function () { + function Ghost(className, startIndex, speed, resetIndex) { + this.className = className; + this.startIndex = startIndex; + this.speed = speed; + this.resetIndex = resetIndex; + this.className = className; + this.startIndex = startIndex; + this.speed = speed; + this.currentIndex = startIndex; + this.isScared = false; + this.resetIndex = resetIndex; + } + Ghost.prototype.draw = function () { + squares[this.currentIndex].classList.add(this.className, "ghost"); + squares[this.currentIndex].innerHTML = + ''; + }; + Ghost.prototype.update = function (direction) { + squares[this.currentIndex].innerHTML = ""; + squares[this.currentIndex].classList.remove(this.className, "ghost", "scaredGhost"); + this.currentIndex += direction; + this.draw(); + if (squares[this.currentIndex - direction].classList.contains("cherry")) { + drawCherryOnIndex(this.currentIndex - direction); + } + }; + Ghost.prototype.move = function () { + var _this = this; + if (gameOver) + return; + var direction = randomDirection(); + this.timerId = setInterval(function () { + // if the square in the direction the ghost is going not containing another ghost or a wall => then he can move here + if (checkForWall(_this.currentIndex, direction) && + !squares[_this.currentIndex + direction].classList.contains("ghost")) { + _this.update(direction); + } + //else => find another direction + else { + direction = randomDirection(); + } + //Change ghost color if scared + if (_this.isScared) { + squares[_this.currentIndex].classList.add("scaredGhost"); + } + }, this.speed); + }; + return Ghost; +}()); +var ghosts = [ + new Ghost("purple", 22, 250, 279), + new Ghost("pink", 40, 400, 287), + new Ghost("blue", 400, 300, 161), + new Ghost("green", 418, 200, 153), +]; +var glide; //pacman glide interval +var scaredGhostsTime; //scared ghosts timeout +var score; +var cherryIndex = []; +var directions = { + moveLeft: -1, + moveRight: 1, + moveUp: -21, + movdeDown: 21 +}; +var randomDirection = function () { + return directions[Object.keys(directions)[Math.floor(Math.random() * Object.keys(directions).length)]]; +}; +var chosenMap = localStorage.getItem("userChoice"); +var palletsMapOne = 144; +var palletsMapTwo = 161; +var palletsThisGame; +var gameOver; +var Maze = /** @class */ (function () { + function Maze(maze, name) { + this.maze = maze; + this.name = name; + } + Maze.prototype.createMaze = function () { + this.maze.forEach(function (value, index) { + var square = document.createElement("div"); + mazeDiv.appendChild(square); + squares.push(square); + switch (value) { + case 0: + squares[index].classList.add("wall", "square"); + break; + case 1: + squares[index].classList.add("point", "square"); + break; + case 2: + cherryIndex.push(index); + squares[index].classList.add("cherry", "square"); + squares[index].innerHTML = "\n \n "; + break; + case 9: + squares[index].classList.add("square"); + break; + } + }); + }; + return Maze; +}()); +var mazeOne = new Maze(mapOne, "Map One"); +var mazeTwo = new Maze(mapTwo, "Map Two"); +var User = /** @class */ (function () { + function User(userName, password, highScore) { + if (highScore === void 0) { highScore = 0; } + this.userName = userName; + this.password = password; + this.highScore = highScore; + } + User.prototype.setHighScore = function (newScore) { + this.highScore = newScore; + }; + return User; +}()); +var preMadeUserList = [ + new User("cruseder123", "12345678", 345), + new User("johnny123", "87654321", 254), + new User("vladb89", "vladislav1989", 984), +]; +if (!localStorage.getItem('signedUpUsers')) + localStorage.setItem('signedUpUsers', JSON.stringify(preMadeUserList)); +var currentUser; diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/scoreBoard.css b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/scoreBoard.css new file mode 100644 index 000000000..488157216 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/scoreBoard.css @@ -0,0 +1,85 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +.scoreBoardWrapper { + margin: auto; + background-color: dodgerblue; + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 20vw 80vw; +} +.scoreBoardWrapper .tableDiv { + font-size: 3rem; + display: flex; + justify-content: space-around; + overflow-y: auto; +} +.scoreBoardWrapper .tableDiv__listTitle { + font-weight: bold; + width: 100%; + padding: 1em; +} +.scoreBoardWrapper .tableDiv__listTitle .userScore { + margin-left: 2em; +} +.scoreBoardWrapper .tableDiv li { + display: block; + font-weight: 400; + margin-top: 1em; +} +.scoreBoardWrapper .buttonDiv { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +.scoreBoardWrapper .buttonDiv button { + appearance: none; + background-color: #ffffff; + border-radius: 40em; + border-style: none; + box-shadow: #adcfff 0 -12px 6px inset; + box-sizing: border-box; + color: #000000; + cursor: pointer; + display: inline-block; + font-family: -apple-system, sans-serif; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: -0.24px; + margin: 0; + outline: none; + padding: 1rem 1.3rem; + quotes: auto; + text-align: center; + text-decoration: none; + transition: all 0.15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} +.scoreBoardWrapper .buttonDiv button:hover { + background-color: #ffc229; + box-shadow: #ff6314 0 -6px 8px inset; + transform: scale(1.125); +} +.scoreBoardWrapper .buttonDiv button:active { + transform: scale(1.025); +} + +@media (min-width: 768px) { + button { + font-size: 1.5rem; + padding: 0.75rem 2rem; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/scoreBoard.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/scoreBoard.js new file mode 100644 index 000000000..e5a7bab66 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/scoreBoard.js @@ -0,0 +1,28 @@ +var users = localStorage.getItem("signedUpUsers"); +var sortedUsers = JSON.parse(users).sort(function (a, b) { return b.highScore - a.highScore; }); +console.table(sortedUsers); +var userNamesListElement = document.querySelector(".userNames"); +var userScoreListElement = document.querySelector(".userScore"); +var newPlayerBtn = document.querySelectorAll(".newPlayerBtn"); +newPlayerBtn.forEach(function (btn) { + return btn.addEventListener("click", function () { + localStorage.removeItem("currentUser"); + window.location.href = "startPage.html"; + }); +}); +function renderScoreTable() { + try { + sortedUsers.forEach(function (user) { + var liNameElement = document.createElement("li"); + liNameElement.textContent = user.userName; + userNamesListElement.append(liNameElement); + var liScoreElement = document.createElement("li"); + liScoreElement.textContent = user.highScore.toString(); + userScoreListElement.append(liScoreElement); + }); + } + catch (error) { + console.log(error); + } +} +renderScoreTable(); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/startPage.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/startPage.js new file mode 100644 index 000000000..ce2a28490 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/startPage.js @@ -0,0 +1,37 @@ +window.onload = function () { + removeUserChoiceFromLocalStorage(); + var getListFromLS = localStorage.getItem('signedUpUsers'); + if (getListFromLS) + usersList.push.apply(usersList, JSON.parse(getListFromLS)); + if (localStorage.getItem("currentUser")) + moveToWelcomePage(); +}; +window.addEventListener("click", function (e) { + var target = e.target; + if (target.nodeName == "IMG") { + mapImgElement.forEach(function (img) { return (img.style.boxShadow = "0 0 0 black"); }); + target.style.boxShadow = "0 0 50px black"; + localStorage.setItem("userChoice", target.id); + } + if (target.innerHTML === "START") { + if (!localStorage.getItem("userChoice")) + return alert("no map has been chosen"); + window.location.href = "index.html"; + } + if (target.innerHTML === "SCOREBOARD") { + if (!localStorage.getItem('signedUpUsers')) + return alert("scoreboard is empty"); + window.location.href = "scoreBoard.html"; + } + if (target.innerHTML === "Create New User") { + addNewUserToLocalStorage(); + } + if (target.innerHTML === "Login") { + if (verifyLogin()) { + moveToWelcomePage(); + } + else { + alert("incorrect user name or password"); + } + } +}); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/startPageStyle.css b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/startPageStyle.css new file mode 100644 index 000000000..cdb6c74ba --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/startPageStyle.css @@ -0,0 +1,144 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + +body { + overflow: hidden; +} + +.welcomePageWrapper { + background-color: darkblue; + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: space-around; +} + +.loginPage { + position: absolute; + aspect-ratio: 1/1; + height: 80vh; + background-color: darkseagreen; + border: 5px solid black; + border-radius: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font-size: 1.5rem; + transition: transform 0.1s linear; +} +.loginPage .inputDiv { + display: flex; + flex-direction: column; + align-items: center; +} +.loginPage .inputDiv input { + font-size: 1.5rem; + margin-bottom: 2em; + margin-top: 1em; + border: 1px solid rgba(0, 0, 0, 0.092); + outline: none; + padding: 0.2em; +} +.loginPage .buttonDiv { + margin-top: 2em; + width: 100%; + display: flex; + justify-content: space-evenly; +} +.loginPage .buttonDiv button { + font-size: 1.5rem; + padding: 0.5em; + min-width: 30%; + border: none; + border-radius: 10px; + cursor: pointer; + position: relative; + z-index: 1; +} +.loginPage .buttonDiv button:before { + content: ""; + position: absolute; + border-radius: 10px; + background: goldenrod; + bottom: 0; + left: 0; + top: 0; + right: 100%; + z-index: -1; + transition: right 0.2s linear; +} +.loginPage .buttonDiv button:hover:before { + right: 0; +} + +.welcomePage { + position: absolute; + aspect-ratio: 3/2; + max-height: 80vh; + max-width: 80vw; + background-color: darkgoldenrod; + border-radius: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + transform: translateX(100vw); + transition: transform 0.1s linear; +} +.welcomePage__choices { + width: 100%; + height: 70%; + display: flex; + justify-content: center; + gap: 1vw; +} +.welcomePage__choices__choice { + display: flex; + justify-content: center; + width: 45%; + cursor: pointer; +} +.welcomePage__choices__choice img { + width: 100%; +} +.welcomePage .btnDiv { + width: 100%; + display: flex; + justify-content: space-evenly; +} +.welcomePage__button { + position: relative; + padding: 0.5em 1em; + font-size: 1.5rem; + border: none; + border-radius: 10px; + letter-spacing: 2px; + outline: 0; + z-index: 1; + cursor: pointer; +} +.welcomePage__button:hover { + color: whitesmoke; +} +.welcomePage__button:before { + content: ""; + position: absolute; + border-radius: 10px; + background: #383736; + bottom: 0; + left: 0; + right: 0; + top: 100%; + z-index: -1; + transition: top 0.09s ease-in; +} +.welcomePage__button:hover:before { + top: 0; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/view.js b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/view.js new file mode 100644 index 000000000..13b1265af --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/dist/view.js @@ -0,0 +1,20 @@ +var mazeDiv = document.querySelector(".maze"); +var scoreEl = document.querySelector("#score"); +var winMessage = document.querySelector(".winMessage"); +var loseMessage = document.querySelector(".loseMessage"); +var finalScore = document.querySelectorAll(".finalScore"); +var backToStartingPageBtn = document.querySelectorAll(".backToStartingPageBtn"); +var tryAgainBtn = document.querySelectorAll(".tryAgainBtn"); +var scoreboardBtn = document.querySelectorAll(".scoreboardBtn"); +var loginPage = document.querySelector(".loginPage"); +var welcomePage = document.querySelector(".welcomePage"); +var userNameInput = document.querySelector("#userName"); +var passwordInput = document.querySelector("#password"); +var mapImgElement = document.querySelectorAll(".mapImg"); +var usersList = []; +backToStartingPageBtn.forEach(function (btn) { + btn.addEventListener("click", function () { + window.location.href = "startPage.html"; + localStorage.removeItem("userChoice"); + }); +}); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/helpers.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/helpers.ts new file mode 100644 index 000000000..39fb4180c --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/helpers.ts @@ -0,0 +1,241 @@ +function checkForPoint() { + try { + if (squares[pacman.currentIndex].classList.contains("point")) { + score++; + palletsThisGame--; + scoreEl.textContent = score.toString(); + squares[pacman.currentIndex].classList.remove("point"); + squares[pacman.currentIndex].classList.add("pacman"); + squares[pacman.currentIndex].classList.add("road"); + } + } catch (error) { + console.error(error); + } +} + +function checkForCherry() { + try { + if (squares[pacman.currentIndex].classList.contains("cherry")) { + if (scaredGhostsTime) clearTimeout(scaredGhostsTime); + cherryIndex = [ + ...cherryIndex.filter((value) => value !== pacman.currentIndex), + ]; + squares[pacman.currentIndex].innerHTML = ""; + pacman.draw(); + + score += 10; + scoreEl.textContent = score.toString(); + squares[pacman.currentIndex].classList.remove("cherry"); + ghosts.forEach((ghost) => (ghost.isScared = true)); + scaredGhostsTime = setTimeout(unScareGhosts, 5000); + } + } catch (error) { + console.error(error); + } +} + +function unScareGhosts() { + try { + ghosts.forEach((ghost) => (ghost.isScared = false)); + } catch (error) { + console.error(error); + } +} + +function checkForGamneOver() { + try { + if ( + squares[pacman.currentIndex].classList.contains("ghost") && + !squares[pacman.currentIndex].classList.contains("scaredGhost") + ) { + gameOver = true; + squares[pacman.currentIndex].classList.remove("pacman"); + if (score > currentUser.highScore) { + const findUser = usersList.find( + (user) => user.userName == currentUser.userName + ); + if (findUser) findUser.highScore = score; + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + } + resetGhosts(); + loseMessage.style.transform = "translateY(0)"; + finalScore[1].textContent = score.toString(); + clearInterval(glide); + } + } catch (error) { + console.error(error); + } +} + +function checkForWin() { + try { + if (palletsThisGame == 0) { + resetGhosts(); + squares[pacman.currentIndex].classList.remove("pacman"); + clearInterval(glide); + if (score > currentUser.highScore) { + const findUser = usersList.find( + (user) => user.userName == currentUser.userName + ); + if (findUser) findUser.highScore = score; + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + } + winMessage.style.transform = "translateY(0)"; + finalScore[0].textContent = score.toString(); + } + } catch (error) { + console.error(error); + } +} + +function checkForScaredGhost() { + try { + ghosts.forEach((ghost) => { + if ( + squares[pacman.currentIndex].classList.contains(ghost.className) && + ghost.isScared + ) { + squares[pacman.currentIndex].classList.remove( + ghost.className, + "ghost", + "scaredGhost" + ); + pacman.draw(); + ghost.currentIndex = ghost.resetIndex; + ghost.isScared = false; + squares[ghost.currentIndex].classList.add("ghost", ghost.className); + score += 100; + scoreEl.textContent = score.toString(); + } + }); + } catch (error) { + console.error(error); + } +} + +function checkForWall(currentIndex: number, direction: number) { + try { + return !squares[currentIndex + direction].classList.contains("wall"); + } catch (error) { + console.error(error); + } +} + +function drawCherryOnIndex(index: number) { + try { + squares[index].classList.add("cherry"); + squares[index].innerHTML = ` + + `; + } catch (error) { + console.error(error); + } +} + +function removeUserChoiceFromLocalStorage() { + try { + localStorage.removeItem("userChoice"); + } catch (error) { + console.error(error); + } +} + +function addNewUserToLocalStorage() { + try { + if (userNameInput.value == "" || passwordInput.value == "") + return alert("Missing Input Field"); + + if (checkIfUserExists(userNameInput.value)) + return alert("user name is taken"); + + const newUser = new User(userNameInput.value, passwordInput.value); + localStorage.setItem("currentUser", JSON.stringify(newUser)); + usersList.push(newUser); + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + moveToWelcomePage(); + } catch (error) { + console.error(error); + } +} + +function checkIfUserExists(name: string) { + try { + return usersList.some((user) => user.userName == name); + } catch (error) { + console.error(error); + } +} + +function verifyLogin(): boolean | void { + try { + const findUser = usersList.find( + (user) => + user.userName === userNameInput.value && + user.password === passwordInput.value + ); + if (findUser) { + localStorage.setItem("currentUser", JSON.stringify(findUser)); + return true; + } + + return false; + } catch (error) { + console.error(error); + } +} + +function moveToWelcomePage() { + try { + userNameInput.value = ""; + passwordInput.value = ""; + loginPage.style.transform = "translateX(-100vw)"; + welcomePage.style.transform = "translateY(0)"; + } catch (error) { + console.error(error); + } +} + +function resetGhosts() { + try { + ghosts.forEach((ghost) => { + squares[ghost.currentIndex].innerHTML = ""; + squares[ghost.currentIndex].classList.remove( + ghost.className, + "ghost", + "scaredGhost" + ); + clearInterval(ghost.timerId); + }); + } catch (error) { + console.error(error); + } +} + +function getCurrentUserFromStorage() { + try { + const getUserFromStorage = localStorage.getItem("currentUser"); + if (getUserFromStorage) currentUser = JSON.parse(getUserFromStorage); + const getListFromStorage = localStorage.getItem('signedUpUsers'); + if (getListFromStorage) + usersList.push.apply(usersList, JSON.parse(getListFromStorage)); + } catch (error) { + console.error(error); + } +} + +function updateUserScore() { + try { + if (score > currentUser.highScore) { + const findUser = usersList.find( + (user) => user.userName == currentUser.userName + ) as User; + if (findUser) findUser.highScore = score; + localStorage.setItem('signedUpUsers', JSON.stringify(usersList)); + localStorage.setItem("currentUser", JSON.stringify(findUser)); + } + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/main.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/main.ts new file mode 100644 index 000000000..c0b27a4c2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/main.ts @@ -0,0 +1,33 @@ +const pacman = new Pacman(150, 283); + +startGame(); +checkGameStatus(); + +window.addEventListener("keydown", (e) => { + if (e.repeat) return; + switch (e.key) { + case "ArrowLeft": + pacman.move(directions.moveLeft); + break; + + case "ArrowRight": + pacman.move(directions.moveRight); + break; + + case "ArrowUp": + pacman.move(directions.moveUp); + break; + case "ArrowDown": + pacman.move(directions.movdeDown); + break; + } +}); + +tryAgainBtn.forEach((btn) => btn.addEventListener("click", startGame)); + +scoreboardBtn.forEach((btn) => + btn.addEventListener("click", () => { + updateUserScore(); + window.location.href = "scoreBoard.html"; + }) +); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/mainStyle.scss b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/mainStyle.scss new file mode 100644 index 000000000..fab9c601c --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/mainStyle.scss @@ -0,0 +1,203 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + +:root { + --boardSize: 80vh; + --div-size: calc(var(--boardSize) / 21); +} + +body { + overflow: hidden; +} + +.gameWrapper { + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: space-around; + background-color: darkblue; + + .liveScore { + position: absolute; + color: darkblue; + font-size: 1.5rem; + } +} + +.maze { + box-shadow: 0 0 50px black; + width: var(--boardSize); + height: var(--boardSize); + display: flex; + flex-wrap: wrap; + position: relative; + background-color: white; + .endGameWindow { + position: absolute; + font-size: 5vh; + z-index: 1; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + transition: all 0.5s; + font-family: Georgia, "Times New Roman", Times, serif; + button { + // width: 40%; + padding: 0.5em 1em; + font-size: 1.2rem; + border: none; + border-radius: 10px; + background-color: #333333; + color: whitesmoke; + } + button:hover { + cursor: pointer; + box-shadow: 0 0 20px black; + transition: box-shadow 0.5s; + } + } + .winMessage { + color: lightcoral; + background-color: rgb(35, 106, 70); + // transform: translateY(100vh); + } + .loseMessage { + color: orange; + background-color: rgb(141, 24, 24); + // transform: translateY(100vh); + } + .square { + width: var(--div-size); + height: var(--div-size); + display: flex; + align-items: center; + justify-content: center; + svg { + width: calc(var(--div-size) - 1.5vh); + } + } + .pacman { + border-radius: 50%; + background-color: darkorange; + position: relative; + // transform: scaleY(1); + .eye { + position: absolute; + width: 0.3vw; + height: 0.3vw; + border-radius: 50%; + top: 20%; + right: 50%; + background: #333333; + } + .mouth { + background: #fff; + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + animation-name: eat; + animation-duration: 0.2s; + animation-iteration-count: infinite; + } + @keyframes eat { + 0% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + 25% { + clip-path: polygon(100% 60%, 44% 48%, 100% 40%); + } + + 50% { + clip-path: polygon(100% 50%, 44% 48%, 100% 50%); + } + + 75% { + clip-path: polygon(100% 59%, 44% 48%, 100% 35%); + } + + 100% { + clip-path: polygon(100% 74%, 44% 48%, 100% 21%); + } + } + } + + .wall { + background-color: black; + } + .point { + border-radius: 50%; + background-color: green; + border: calc(var(--div-size) / 3) solid white; + box-sizing: border-box; + } + .cherry { + // box-sizing: border-box; + svg { + fill: red; + filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 1)); + } + } + .ghost { + border: 0px; + } + .purple { + border-radius: 0; + background-color: white; + svg { + fill: purple; + filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 1)); + } + } + .pink { + border-radius: 0; + background-color: white; + svg { + fill: palevioletred; + filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 1)); + } + } + .blue { + border-radius: 0; + background-color: white; + svg { + fill: blue; + filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 1)); + } + } + .green { + border-radius: 0; + background-color: white; + svg { + fill: darkgreen; + filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 1)); + } + } + .scaredGhost { + svg { + animation-name: scared; + animation-duration: 1s; + animation-iteration-count: infinite; + } + } + @keyframes scared { + 0% { + fill: #333333; + } + 50% { + fill: aquamarine; + } + 100% { + fill: #333333; + } + } +} diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/model.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/model.ts new file mode 100644 index 000000000..34bae0a6a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/model.ts @@ -0,0 +1,268 @@ +const mapOne: number[] = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, + 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, + 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, + 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 9, + 9, 9, 9, 9, 9, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, + 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, 9, 9, 9, 9, 9, 0, 9, 0, 1, 0, 0, + 0, 0, 9, 9, 9, 9, 1, 9, 9, 0, 9, 9, 9, 9, 9, 0, 9, 9, 1, 9, 9, 9, 9, 0, 0, 0, + 0, 1, 0, 9, 0, 9, 9, 9, 9, 9, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 0, + 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 9, 9, 9, 9, 5, 9, 9, + 9, 9, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, + 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, + 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, + 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; + +const mapTwo: number[] = [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, + 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, + 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, 9, + 9, 9, 9, 9, 9, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, 9, 9, 9, 9, 9, 9, + 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, + 1, 0, 0, 1, 0, 0, 1, 9, 9, 0, 9, 9, 9, 9, 9, 0, 9, 9, 1, 0, 0, 1, 0, 0, 1, 0, + 0, 1, 0, 9, 0, 0, 0, 0, 0, 0, 0, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, + 9, 9, 9, 9, 9, 9, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 9, 9, 9, 9, 5, 9, 9, + 9, 9, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 9, 0, 9, 0, 0, 0, 0, 1, 0, + 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, + 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 2, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, + 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, +]; + +// 0 = wall +// 1 = point +// 2 = cherry + +// an array that wil hold all the divs and their classes +const squares = [] as Array; + +class Pacman { + public currentIndex: number; + public velocity: number; + constructor( + private pacmanSpeed: number, + public pacmanStrartingIndex: number + ) { + this.velocity = this.pacmanSpeed; + this.currentIndex = this.pacmanStrartingIndex; + } + draw() { + const eye = document.createElement("div") as HTMLDivElement; + eye.classList.add("eye"); + const mouth = document.createElement("div") as HTMLDivElement; + mouth.classList.add("mouth"); + squares[pacman.currentIndex].innerHTML = ""; + squares[this.currentIndex].classList.add("pacman", "square"); + squares[this.currentIndex].append(eye); + squares[this.currentIndex].append(mouth); + } + update(direction: number) { + squares[pacman.currentIndex].classList.remove("pacman"); + clearInterval(glide); + squares[pacman.currentIndex].removeAttribute("style"); + if (pacman.currentIndex == 210) pacman.currentIndex = 229; + else if (pacman.currentIndex == 230) pacman.currentIndex = 211; + else pacman.currentIndex += direction; + if (direction == 21) { + squares[pacman.currentIndex].style.transform = "rotate(90deg)"; + } else if (direction == -21) { + squares[pacman.currentIndex].style.transform = "rotate(-90deg)"; + } else { + squares[pacman.currentIndex].style.transform = `scaleX(${direction})`; + } + glide = setInterval(this.move, pacman.velocity, direction); + this.draw(); + } + move(direction: number) { + if (gameOver) return; + switch (direction) { + case directions.moveLeft: + if (checkForWall(pacman.currentIndex, directions.moveLeft)) { + pacman.update(direction); + } else if (pacman.currentIndex == 210) { + pacman.update(direction); + } + break; + + case directions.moveRight: + if (checkForWall(pacman.currentIndex, directions.moveRight)) { + pacman.update(direction); + } else if (pacman.currentIndex == 230) { + pacman.update(direction); + } + break; + + case directions.moveUp: + if (checkForWall(pacman.currentIndex, directions.moveUp)) { + pacman.update(direction); + } + break; + + case directions.movdeDown: + if (checkForWall(pacman.currentIndex, directions.movdeDown)) { + pacman.update(direction); + } + break; + } + } +} + +class Ghost { + public currentIndex: number; + public isScared: boolean; + public timerId: number; + constructor( + public className: string, + public startIndex: number, + public speed: number, + public resetIndex: number + ) { + this.className = className; + this.startIndex = startIndex; + this.speed = speed; + this.currentIndex = startIndex; + this.isScared = false; + this.resetIndex = resetIndex; + } + draw() { + squares[this.currentIndex].classList.add(this.className, "ghost"); + squares[this.currentIndex].innerHTML = + ''; + } + update(direction: number) { + squares[this.currentIndex].innerHTML = ""; + squares[this.currentIndex].classList.remove( + this.className, + "ghost", + "scaredGhost" + ); + this.currentIndex += direction; + this.draw(); + if (squares[this.currentIndex - direction].classList.contains("cherry")) { + drawCherryOnIndex(this.currentIndex - direction); + } + } + + move() { + if (gameOver) return; + let direction = randomDirection(); + + this.timerId = setInterval(() => { + // if the square in the direction the ghost is going not containing another ghost or a wall => then he can move here + if ( + checkForWall(this.currentIndex, direction) && + !squares[this.currentIndex + direction].classList.contains("ghost") + ) { + this.update(direction); + } + //else => find another direction + else { + direction = randomDirection(); + } + + //Change ghost color if scared + if (this.isScared) { + squares[this.currentIndex].classList.add("scaredGhost"); + } + }, this.speed); + } +} + +const ghosts = [ + new Ghost("purple", 22, 250, 279), + new Ghost("pink", 40, 400, 287), + new Ghost("blue", 400, 300, 161), + new Ghost("green", 418, 200, 153), +]; + +let glide: number; //pacman glide interval +let scaredGhostsTime: number; //scared ghosts timeout +let score: number; +let cherryIndex: number[] = []; + +const directions = { + moveLeft: -1, + moveRight: 1, + moveUp: -21, + movdeDown: 21, +}; + +const randomDirection = () => + directions[ + Object.keys(directions)[ + Math.floor(Math.random() * Object.keys(directions).length) + ] + ]; + +const chosenMap = localStorage.getItem("userChoice"); +const palletsMapOne = 144; +const palletsMapTwo = 161; +let palletsThisGame: number; + +let gameOver: boolean; + +class Maze { + constructor(public maze: number[], public name: string) {} + createMaze() { + this.maze.forEach((value, index) => { + const square = document.createElement("div") as HTMLDivElement; + mazeDiv.appendChild(square); + squares.push(square); + + switch (value) { + case 0: + squares[index].classList.add("wall", "square"); + break; + case 1: + squares[index].classList.add("point", "square"); + break; + case 2: + cherryIndex.push(index); + squares[index].classList.add("cherry", "square"); + squares[index].innerHTML = ` + + `; + break; + case 9: + squares[index].classList.add("square"); + break; + } + }); + } +} + +const mazeOne = new Maze(mapOne, "Map One"); +const mazeTwo = new Maze(mapTwo, "Map Two"); + +class User { + constructor( + public userName: string, + public password: string, + public highScore: number = 0 + ) {} + setHighScore(newScore: number) { + this.highScore = newScore; + } +} + +const preMadeUserList: User[] = [ + new User("cruseder123", "12345678", 345), + new User("johnny123", "87654321", 254), + new User("vladb89", "vladislav1989", 984), +]; + +if (!localStorage.getItem('signedUpUsers')) + localStorage.setItem('signedUpUsers', JSON.stringify(preMadeUserList)); + +let currentUser: User; diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/scoreBoard.scss b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/scoreBoard.scss new file mode 100644 index 000000000..7838f30f9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/scoreBoard.scss @@ -0,0 +1,87 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; +} + +.scoreBoardWrapper { + margin: auto; + background-color: dodgerblue; + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: 20vw 80vw; + .tableDiv { + font-size: 3rem; + display: flex; + justify-content: space-around; + overflow-y: auto; + &__listTitle { + font-weight: bold; + width: 100%; + padding: 1em; + .userScore { + margin-left: 2em; + } + } + li { + display: block; + font-weight: 400; + margin-top: 1em; + } + } + .buttonDiv { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + button { + appearance: none; + background-color: #ffffff; + border-radius: 40em; + border-style: none; + box-shadow: #adcfff 0 -12px 6px inset; + box-sizing: border-box; + color: #000000; + cursor: pointer; + display: inline-block; + font-family: -apple-system, sans-serif; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: -0.24px; + margin: 0; + outline: none; + padding: 1rem 1.3rem; + quotes: auto; + text-align: center; + text-decoration: none; + transition: all 0.15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + } + + button:hover { + background-color: #ffc229; + box-shadow: #ff6314 0 -6px 8px inset; + transform: scale(1.125); + } + + button:active { + transform: scale(1.025); + } + } +} + +@media (min-width: 768px) { + button { + font-size: 1.5rem; + padding: 0.75rem 2rem; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/scoreBoard.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/scoreBoard.ts new file mode 100644 index 000000000..4fbf5faf1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/scoreBoard.ts @@ -0,0 +1,41 @@ +const users = localStorage.getItem("signedUpUsers") as string; +const sortedUsers = JSON.parse(users).sort( + (a: User, b: User) => b.highScore - a.highScore +); + +console.table(sortedUsers); + +const userNamesListElement = document.querySelector( + ".userNames" +) as HTMLUListElement; +const userScoreListElement = document.querySelector( + ".userScore" +) as HTMLUListElement; + +const newPlayerBtn = document.querySelectorAll( + ".newPlayerBtn" +) as NodeListOf; + +newPlayerBtn.forEach((btn) => + btn.addEventListener("click", () => { + localStorage.removeItem("currentUser"); + window.location.href = "startPage.html"; + }) +); + +function renderScoreTable() { + try { + sortedUsers.forEach((user: User) => { + const liNameElement = document.createElement("li") as HTMLElement; + liNameElement.textContent = user.userName; + userNamesListElement.append(liNameElement); + const liScoreElement = document.createElement("li") as HTMLElement; + liScoreElement.textContent = user.highScore.toString(); + userScoreListElement.append(liScoreElement); + }); + } catch (error) { + console.log(error); + } +} + +renderScoreTable(); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/startPage.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/startPage.ts new file mode 100644 index 000000000..f7a5417f0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/startPage.ts @@ -0,0 +1,39 @@ +window.onload = () => { + removeUserChoiceFromLocalStorage(); + const getListFromLS = localStorage.getItem('signedUpUsers'); + if (getListFromLS) usersList.push.apply(usersList, JSON.parse(getListFromLS)); + if (localStorage.getItem("currentUser")) moveToWelcomePage(); +}; + +window.addEventListener("click", (e) => { + const target = e.target as HTMLElement; + + if (target.nodeName == "IMG") { + mapImgElement.forEach((img) => (img.style.boxShadow = "0 0 0 black")); + target.style.boxShadow = "0 0 50px black"; + localStorage.setItem("userChoice", target.id); + } + + if (target.innerHTML === "START") { + if (!localStorage.getItem("userChoice")) + return alert("no map has been chosen"); + window.location.href = "index.html"; + } + + if (target.innerHTML === "SCOREBOARD") { + if (!localStorage.getItem('signedUpUsers')) return alert("scoreboard is empty"); + window.location.href = "scoreBoard.html"; + } + + if (target.innerHTML === "Create New User") { + addNewUserToLocalStorage(); + } + + if (target.innerHTML === "Login") { + if (verifyLogin()) { + moveToWelcomePage(); + } else { + alert("incorrect user name or password"); + } + } +}); diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/startPageStyle.scss b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/startPageStyle.scss new file mode 100644 index 000000000..2903c47ba --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/startPageStyle.scss @@ -0,0 +1,150 @@ +*, +::before, +::after { + padding: 0; + margin: 0; + font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; +} + + +body{ + overflow: hidden; + } + +.welcomePageWrapper { + background-color: darkblue; + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: space-around; +} + +.loginPage { + position: absolute; + aspect-ratio: 1/1; + height: 80vh; + background-color: darkseagreen; + border: 5px solid black; + border-radius: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + font-size: 1.5rem; + transition: transform 0.1s linear; + .inputDiv { + display: flex; + flex-direction: column; + align-items: center; + input { + font-size: 1.5rem; + margin-bottom: 2em; + margin-top: 1em; + border: 1px solid rgba(0, 0, 0, 0.092); + outline: none; + padding: 0.2em; + } + } + .buttonDiv { + margin-top: 2em; + width: 100%; + display: flex; + justify-content: space-evenly; + button { + font-size: 1.5rem; + padding: 0.5em; + min-width: 30%; + border: none; + border-radius: 10px; + cursor: pointer; + position: relative; + z-index: 1; + } + + button:before { + content: ""; + position: absolute; + border-radius: 10px; + background: goldenrod; + bottom: 0; + left: 0; + top: 0; + right: 100%; + z-index: -1; + transition: right 0.2s linear; + } + + button:hover:before { + right: 0; + } + } +} + +.welcomePage { + position: absolute; + aspect-ratio: 3/2; + max-height: 80vh; + max-width: 80vw; + background-color: darkgoldenrod; + border-radius: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + transform: translateX(100vw); + transition: transform 0.1s linear; + &__choices { + width: 100%; + height: 70%; + display: flex; + justify-content: center; + gap: 1vw; + &__choice { + display: flex; + justify-content: center; + width: 45%; + cursor: pointer; + img { + width: 100%; + } + } + } + .btnDiv { + width: 100%; + display: flex; + justify-content: space-evenly; + } + &__button { + position: relative; + padding: 0.5em 1em; + font-size: 1.5rem; + border: none; + border-radius: 10px; + letter-spacing: 2px; + outline: 0; + z-index: 1; + cursor: pointer; + } + + &__button:hover { + color: whitesmoke; + } + + &__button:before { + content: ""; + position: absolute; + border-radius: 10px; + background: #383736; + bottom: 0; + left: 0; + right: 0; + top: 100%; + z-index: -1; + transition: top 0.09s ease-in; + } + + &__button:hover:before { + top: 0; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/view.ts b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/view.ts new file mode 100644 index 000000000..3bbaac87e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/src/view.ts @@ -0,0 +1,37 @@ +const mazeDiv = document.querySelector(".maze") as HTMLDivElement; +const scoreEl = document.querySelector("#score") as HTMLSpanElement; + +const winMessage = document.querySelector(".winMessage") as HTMLHeadElement; +const loseMessage = document.querySelector(".loseMessage") as HTMLHeadElement; +const finalScore = document.querySelectorAll( + ".finalScore" +) as NodeListOf; + +const backToStartingPageBtn = document.querySelectorAll( + ".backToStartingPageBtn" +) as NodeListOf; +const tryAgainBtn = document.querySelectorAll( + ".tryAgainBtn" +) as NodeListOf; +const scoreboardBtn = document.querySelectorAll( + ".scoreboardBtn" +) as NodeListOf; + +const loginPage = document.querySelector(".loginPage") as HTMLDivElement; +const welcomePage = document.querySelector(".welcomePage") as HTMLDivElement; +const userNameInput = document.querySelector("#userName") as HTMLInputElement; +const passwordInput = document.querySelector("#password") as HTMLInputElement; + +const mapImgElement = document.querySelectorAll( + ".mapImg" +) as NodeListOf; + +let usersList: User[] = []; + +backToStartingPageBtn.forEach((btn) => { + btn.addEventListener("click", () => { + window.location.href = "startPage.html"; + localStorage.removeItem("userChoice"); + }); +}); + diff --git a/02-TypeScript/18-personalProject/Checked/VladiBykanov/startPage.html b/02-TypeScript/18-personalProject/Checked/VladiBykanov/startPage.html new file mode 100644 index 000000000..28d2cb47c --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/VladiBykanov/startPage.html @@ -0,0 +1,51 @@ + + + + + + + Starting Page + + + + + + + + + +
                  +
                  +

                  Choose a map and start

                  +
                  +
                  + +
                  +
                  + +
                  +
                  +
                  + + + +
                  +
                  +
                  +

                  Login Page

                  +
                  + + +
                  +
                  + + +
                  +
                  + + +
                  +
                  +
                  + + diff --git a/02-TypeScript/18-personalProject/Checked/angela/dist/index.css b/02-TypeScript/18-personalProject/Checked/angela/dist/index.css new file mode 100644 index 000000000..e5e2f6e0e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/angela/dist/index.css @@ -0,0 +1,160 @@ +body { + overflow-x: hidden; + overflow-y: hidden; +} + +.barItem { + min-height: 5rem; + min-width: 5rem; + background-size: contain; + background-repeat: no-repeat; + display: inline-flex; + align-self: flex-end; + z-index: 5; + background-position: bottom; +} + +.display { + display: none; + opacity: 0; +} + +.bar { + background-image: url(../imgs/pub.png); + height: 100vh; + width: 100vw; + z-index: 2; +} +.bar__shelf { + border-bottom: solid 40px; + height: 160px; + border-color: #C55001; + background-image: repeating-linear-gradient(90deg, rgba(237, 151, 75, 0.25), rgba(238, 133, 88, 0.142) 1px, transparent 1px, transparent 7px); + background-size: 16px; + background-color: #f0d7a6; + display: flex; + z-index: -1; +} +.bar__shelf--timer { + height: 4rem; + width: 10rem; + background-color: #e2c5b2; + border: 0.5rem double black; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 2em; +} +.bar__servingPoint { + height: auto; + width: 20rem; + display: flex; + align-items: flex-end; +} +.bar__servingPoint--shaker { + min-height: 5rem; + min-width: 5rem; + background-image: url(../imgs/shaker.png); + background-size: contain; + background-repeat: no-repeat; + display: inline-flex; + margin-left: 20px; + align-self: flex-end; + z-index: 999; + background-position: bottom; +} +.bar__servingPoint--serve { + height: 3rem; + width: 5rem; + background-color: #e2c5b2; + border: 0.5rem double black; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5em; + cursor: pointer; +} +.bar__scoreTab { + height: 3rem; + width: 28vw; + margin-left: 30%; + display: flex; + justify-content: center; + justify-content: space-evenly; + position: absolute; + left: 64vw; +} +.bar__scoreTab--highScore { + background-color: #e2c5b2; + border: 0.5rem double black; + font-size: x-large; + color: black; + width: auto; +} +.bar__scoreTab--points { + background-color: #e2c5b2; + border: 0.5rem double black; + font-size: x-large; + color: black; +} +.bar__customerDialog { + height: 6rem; + width: 25rem; + background-color: #e2c5b2; + border: 0.5rem double black; + font-size: x-large; + color: black; + border-radius: 5rem; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.2rem; +} +.bar__hint { + height: auto; + width: 15rem; + background-color: #e2c5b2; + border: 0.5rem double black; + margin-left: 5rem; + display: flex; + justify-content: center; +} + +.barItem:hover:after { + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + position: relative; + left: 1rem; + top: 5rem; + background-color: #e2c5b2; + border-radius: 8px; + color: black; + content: attr(title); + width: auto; + height: 2rem; + align-items: center; +} + +.barItem:hover { + cursor: grab; +} + +.bar__servingPoint--shaker:hover:after { + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + position: relative; + left: 1rem; + top: -1rem; + background-color: #e2c5b2; + border-radius: 8px; + color: black; + content: attr(title); + width: auto; + height: 2rem; + align-items: center; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/angela/dist/index.js b/02-TypeScript/18-personalProject/Checked/angela/dist/index.js new file mode 100644 index 000000000..66d565274 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/angela/dist/index.js @@ -0,0 +1,241 @@ +var _a, _b, _c; +//why do you use let? please use types. +var selectedDrink = null; +var drinksToServe = []; +var allBarItems = []; +var points = 50; +var hiScore = 50; +(_a = document.getElementById("points")) === null || _a === void 0 ? void 0 : _a.innerHTML = "your score is " + points; +try { + if (localStorage.getItem("hiScore") == null) { + localStorage.setItem("hiScore", 50); + } + else { + hiScore = localStorage.getItem("hiScore"); + } +} +catch (error) { + localStorage.setItem("hiScore", 50); +} +(_b = document.getElementById("highScore")) === null || _b === void 0 ? void 0 : _b.innerHTML = + "your high score is " + hiScore; +var barItem = /** @class */ (function () { + function barItem(name, alchol) { + this.name = name; + this.alchol = alchol; + } + return barItem; +}()); +var coctail = /** @class */ (function () { + function coctail(name, ingredients) { + this.name = name; + this.ingredients = ingredients; + } + return coctail; +}()); +var bi_ice = new barItem("ice", false); +var bi_soda = new barItem("soda", false); +var bi_lemon = new barItem("lemon", false); +var bi_cranberry = new barItem("cranberry", false); +var bi_lime = new barItem("lime", false); +var bi_vodka = new barItem("vodka", true); +var bi_brandy = new barItem("brandy", true); +var bi_champagne = new barItem("champagne", true); +var bi_gin = new barItem("gin", true); +var bi_rum = new barItem("rum", true); +var bi_tequila = new barItem("tequila", true); +var bi_tripleSec = new barItem("tripleSec", true); +var bi_whiskey = new barItem("whiskey", true); +var bi_whiteRum = new barItem("whiteRum", true); +var bi_mint = new barItem("mint", false); +var bi_vermouth = new barItem("vermouth", true); +var bi_campari = new barItem("campari", true); +var bi_Angostura = new barItem("Angostura", false); +var bi_sugar = new barItem("sugar", false); +var bi_syrup = new barItem("syrup", false); +var bi_coffee = new barItem("coffee", false); +var bi_orange = new barItem("orange", false); +var bi_grapefruit = new barItem("grapefruit", false); +var bi_ginger = new barItem("ginger", false); +var bi_olives = new barItem("olives", false); +var drink_1 = new coctail("vodka_soda", [bi_vodka, bi_soda]); +var drink_2 = new coctail("mojito", [bi_lime, bi_mint, bi_whiteRum, bi_soda]); +var drink_3 = new coctail("cosmopolitan", [ + bi_vodka, + bi_cranberry, + bi_lime, + bi_ice, + bi_tripleSec, +]); +var drink_4 = new coctail("Negroni", [bi_gin, bi_campari, bi_vermouth]); +var drink_5 = new coctail("Manhattan", [ + bi_whiskey, + bi_vermouth, + bi_Angostura, + bi_ice, +]); +var drink_6 = new coctail("Old Fashioned", [ + bi_whiskey, + bi_Angostura, + bi_sugar, +]); +var drink_7 = new coctail("Moscow Mule", [bi_vodka, bi_ginger, bi_lime]); +var drink_8 = new coctail("Whiskey Sour", [bi_whiskey, bi_lemon, bi_sugar]); +var drink_9 = new coctail("French 75", [ + bi_gin, + bi_syrup, + bi_lemon, + bi_champagne, +]); +var drink_10 = new coctail("gimlet", [bi_gin, bi_syrup, bi_lime]); +var drink_11 = new coctail("mimosa", [bi_champagne, bi_orange]); +var drink_12 = new coctail("paloma", [bi_tequila, bi_lime, bi_grapefruit]); +var drink_13 = new coctail("Daiquiri", [bi_whiteRum, bi_syrup, bi_lime]); +var drink_14 = new coctail("black russian", [bi_vodka, bi_coffee]); +var drink_15 = new coctail("martini", [bi_gin, bi_olives]); +var drink_16 = new coctail("all", [ + bi_tequila, + bi_rum, + bi_champagne, + bi_brandy, +]); +//why dont you push the drinks directly to drinksToServe +for (var nickName in this) { + if (nickName.startsWith("drink_")) { + drinksToServe.push(this[nickName]); + console.log(nickName); + } +} +//code can be much clearer, if you use functions +for (var i = 0; i < drinksToServe.length; i++) { + var currntDrink = drinksToServe[i].ingredients; + for (var x = 0; x < currntDrink.length; x++) { + var drinkName = currntDrink[x].name; + if (allBarItems.indexOf(drinkName) == -1) { + allBarItems.push(drinkName); + } + } +} +for (var i = 0; i < allBarItems.length; i++) { + var imgPath = "./imgs/" + allBarItems[i] + ".png"; + var newDiv = document.createElement("div"); + newDiv.id = allBarItems[i]; + newDiv.className = "barItem"; + newDiv.title = allBarItems[i]; + newDiv.style = "background-image: url('" + imgPath + "');"; + newDiv.draggable = true; + newDiv.setAttribute("ondragstart", "drag(event)"); + (_c = document.getElementById("shelf1")) === null || _c === void 0 ? void 0 : _c.appendChild(newDiv); + if (document.getElementById("shelf1").children.length > 19) { + document.getElementById("shelf2").append(newDiv); + } +} +function allowDrop(ev) { + ev.preventDefault(); +} +function drag(ev) { + ev.dataTransfer.setData("text", ev.target.id); + // ev.target.style= 'display:none'; +} +function drop(ev) { + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); + var obj = "#" + data; + $(obj).fadeOut(1000); +} +function generateRandomInteger(max) { + return Math.floor(Math.random() * max); +} +function selectCocktail() { + var _a, _b, _c, _d, _e, _f; + var drinkId = generateRandomInteger(drinksToServe.length); + window.selectedDrink = drinksToServe[drinkId]; + var text = ""; + for (var i = 0; i < selectedDrink.ingredients.length; i++) { + text = text + selectedDrink.ingredients[i].name + "
                  "; + } + (_a = document.getElementById("hint")) === null || _a === void 0 ? void 0 : _a.innerHTML = text; + $("#hint").fadeOut(5000); + (_b = document.getElementById("customerDialog")) === null || _b === void 0 ? void 0 : _b.innerHTML = + "hello please give me " + selectedDrink.name; + while (((_c = document.getElementById("shaker")) === null || _c === void 0 ? void 0 : _c.children.length) > 0) { + $("#" + ((_d = document.getElementById("shaker")) === null || _d === void 0 ? void 0 : _d.children[0].id)).fadeIn(500); + var targetShelf = "shelf1"; + if (((_e = document.getElementById("shelf1")) === null || _e === void 0 ? void 0 : _e.children.length) > 19) { + targetShelf = "shelf2"; + } + document + .getElementById(targetShelf) + .append((_f = document.getElementById("shaker")) === null || _f === void 0 ? void 0 : _f.children[0]); + } +} +selectCocktail(); +function serve() { + var _a, _b, _c, _d, _e, _f, _g; + var drinkTaste = true; + var shakerContent = (_a = document.getElementById("shaker")) === null || _a === void 0 ? void 0 : _a.children; + if ((shakerContent === null || shakerContent === void 0 ? void 0 : shakerContent.length) != selectedDrink.ingredients.length) { + //loose + (_b = document.getElementById("customerDialog")) === null || _b === void 0 ? void 0 : _b.innerHTML = + "wft is this abomination , taste like shit"; + console.log("lose1"); + points = points - 10; + } + else { + try { + var _loop_1 = function (i) { + if (selectedDrink.ingredients.findIndex(function (s) { return s.name === shakerContent[i].id; }) == -1) { + drinkTaste = false; + } + }; + for (var i = 0; i < (shakerContent === null || shakerContent === void 0 ? void 0 : shakerContent.length); i++) { + _loop_1(i); + } + if (drinkTaste == true) { + //win + (_c = document.getElementById("customerDialog")) === null || _c === void 0 ? void 0 : _c.innerHTML = + "thank you, that was very tasty"; + points = points + 5; + console.log("win"); + } + else { + //loose + (_d = document.getElementById("customerDialog")) === null || _d === void 0 ? void 0 : _d.innerHTML = + "give this cocktail to your manger"; + console.log("lose2"); + points = points - 10; + } + } + catch (_h) { + console.error(); + } + } + if (points > hiScore) { + hiScore = points; + localStorage.setItem("hiScore", points); + (_e = document.getElementById("highScore")) === null || _e === void 0 ? void 0 : _e.innerHTML = "your highest score : " + points; + } + (_f = document.getElementById("points")) === null || _f === void 0 ? void 0 : _f.innerHTML = "currnet score " + points + ": "; + if (points < 1) { + (_g = document.getElementById("customerDialog")) === null || _g === void 0 ? void 0 : _g.innerHTML = + "YOU ARE FIRED , go home and learn some js"; + } + else { + setTimeout(selectCocktail, 3000); + } +} +var timer; +var count = document.querySelector("#timer"); +(function () { + var sec = 0; + timer = setInterval(function () { + count === null || count === void 0 ? void 0 : count.innerHTML = "00:" + sec; + sec++; + if (sec > 59) { + var min = 1; + min++; + count === null || count === void 0 ? void 0 : count.innerHTML = "00:" + sec; + } + }, 1000); +})(); diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/Angostura.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/Angostura.png new file mode 100644 index 000000000..dbab915af Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/Angostura.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/Campari.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/Campari.png new file mode 100644 index 000000000..812aa2900 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/Campari.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/brandy.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/brandy.png new file mode 100644 index 000000000..7e26b8a03 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/brandy.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/champagne.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/champagne.png new file mode 100644 index 000000000..733992433 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/champagne.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/coffee.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/coffee.png new file mode 100644 index 000000000..ff3c99db1 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/coffee.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/cranberry.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/cranberry.png new file mode 100644 index 000000000..abbe3dd52 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/cranberry.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/gin.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/gin.png new file mode 100644 index 000000000..6ee67566e Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/gin.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/ginger.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/ginger.png new file mode 100644 index 000000000..6b8371843 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/ginger.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/grapefruit.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/grapefruit.png new file mode 100644 index 000000000..a3ebe2144 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/grapefruit.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/ice.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/ice.png new file mode 100644 index 000000000..493efef97 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/ice.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/lemon.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/lemon.png new file mode 100644 index 000000000..fa12e9b45 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/lemon.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/lime.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/lime.png new file mode 100644 index 000000000..75493695a Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/lime.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/liquor.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/liquor.png new file mode 100644 index 000000000..41a77c200 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/liquor.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/mint.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/mint.png new file mode 100644 index 000000000..3ff5b5b73 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/mint.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/olives.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/olives.png new file mode 100644 index 000000000..167c4b858 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/olives.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/orange.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/orange.png new file mode 100644 index 000000000..c8946b80b Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/orange.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background - Copy.jpg b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background - Copy.jpg new file mode 100644 index 000000000..7f9221836 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background - Copy.jpg differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background - Copy.psd b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background - Copy.psd new file mode 100644 index 000000000..add5713e7 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background - Copy.psd differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background.jpg b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background.jpg new file mode 100644 index 000000000..064cdbb44 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub-background.jpg differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/pub.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub.png new file mode 100644 index 000000000..6d0bfeb20 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/pub.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/rum.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/rum.png new file mode 100644 index 000000000..806eabcb8 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/rum.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/shaker.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/shaker.png new file mode 100644 index 000000000..1380c7a95 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/shaker.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/soda.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/soda.png new file mode 100644 index 000000000..51eade4ab Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/soda.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/sugar.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/sugar.png new file mode 100644 index 000000000..733e6bb75 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/sugar.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/syrup.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/syrup.png new file mode 100644 index 000000000..ec21c2f24 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/syrup.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/tequila.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/tequila.png new file mode 100644 index 000000000..54effd341 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/tequila.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/tripleSec.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/tripleSec.png new file mode 100644 index 000000000..24176ee94 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/tripleSec.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/vermouth.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/vermouth.png new file mode 100644 index 000000000..9f25d8531 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/vermouth.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/vodka.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/vodka.png new file mode 100644 index 000000000..cbcf241ca Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/vodka.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/whiskey.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/whiskey.png new file mode 100644 index 000000000..0a84246b1 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/whiskey.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/imgs/whiteRum.png b/02-TypeScript/18-personalProject/Checked/angela/imgs/whiteRum.png new file mode 100644 index 000000000..5275a6024 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/angela/imgs/whiteRum.png differ diff --git a/02-TypeScript/18-personalProject/Checked/angela/index.html b/02-TypeScript/18-personalProject/Checked/angela/index.html new file mode 100644 index 000000000..df7aae78e --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/angela/index.html @@ -0,0 +1,40 @@ + + + + + + + tipsy + + + + + + +
                  +
                  +
                  +
                  00:00
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  serve
                  +
                  + + +
                  +
                  + +
                  +
                  + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/angela/index.scss b/02-TypeScript/18-personalProject/Checked/angela/index.scss new file mode 100644 index 000000000..d732158c1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/angela/index.scss @@ -0,0 +1,174 @@ +body{ + overflow-x: hidden; + overflow-y: hidden; +} +.barItem { + min-height: 5rem; + min-width: 5rem; + background-size:contain; + background-repeat: no-repeat; + display:inline-flex; + align-self: flex-end; + z-index: 5; + background-position: bottom; + + // .tooltip { + // display: inline; + // position: relative; + // } + + } +.display{ + display: none; + opacity: 0; +} +.bar{ + background-image: url(../imgs/pub.png); + height: 100vh; + width: 100vw; + z-index: 2; + + + &__shelf{ + + border-bottom:solid 40px; + height:160px; + border-color: #C55001; + background-image: repeating-linear-gradient(90deg, rgba(237, 151, 75, 0.25), rgba(238, 133, 88, 0.142) 1px, transparent 1px, transparent 7px); + background-size: 16px; + background-color: #f0d7a6; + display: flex; + z-index: -1; + + &--timer{ + height: 4rem; + width: 10rem; + background-color: #e2c5b2; + border: 0.5rem double black; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 2em; + + } + + + } + &__servingPoint{ + + height: auto; + width: 20rem; + display: flex; + align-items: flex-end; + + + &--shaker{ + min-height: 5rem; + min-width: 5rem; + background-image: url(../imgs/shaker.png); + background-size:contain; + background-repeat: no-repeat; + display:inline-flex; + margin-left:20px; + align-self: flex-end; + z-index: 999; + background-position: bottom; + } + &--serve{ + height: 3rem; + width: 5rem; + background-color: #e2c5b2; + border: 0.5rem double black; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5em; + cursor: pointer; + + + } + } + &__scoreTab{ + height: 3rem; + width: 28vw; + margin-left: 30%; + display: flex; + justify-content: center; + justify-content: space-evenly; + position: absolute; + left: 64vw; + &--highScore{ + background-color: #e2c5b2; + border: 0.5rem double black; + font-size: x-large; + color: black; + width: auto; + } + &--points{ + background-color: #e2c5b2; + border: 0.5rem double black; + font-size: x-large; + color: rgb(0, 0, 0); + } + } + &__customerDialog{ + height: 6rem; + width: 25rem; + background-color: #e2c5b2; + border: 0.5rem double black; + font-size: x-large; + color: black; + border-radius: 5rem; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.2rem; + } + &__hint{ + height: auto; + width: 15rem; + background-color: #e2c5b2; + border: 0.5rem double black; + margin-left: 5rem; + display: flex; + justify-content: center; + + } +} +.barItem:hover:after{ + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + position: relative; + left: 1rem; + top: 5rem; + background-color: #e2c5b2; + border-radius: 8px; + color: rgb(0, 0, 0); + content: attr(title); + width: auto; + height: 2rem; + align-items: center; + } + .barItem:hover{ + cursor: grab; + } + .bar__servingPoint--shaker:hover:after{ + display: -webkit-flex; + display: flex; + -webkit-justify-content: center; + justify-content: center; + position: relative; + left: 1rem; + top: -1rem; + background-color: #e2c5b2; + border-radius: 8px; + color: rgb(0, 0, 0); + content: attr(title); + width: auto; + height: 2rem; + align-items: center; + } + diff --git a/02-TypeScript/18-personalProject/Checked/angela/index.ts b/02-TypeScript/18-personalProject/Checked/angela/index.ts new file mode 100644 index 000000000..47e03017a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/angela/index.ts @@ -0,0 +1,252 @@ +//why do you use let? please use types. +let selectedDrink = null; +let drinksToServe = []; +let allBarItems = []; +let points = 50; +let hiScore = 50; +document.getElementById("points")?.innerHTML = "your score is " + points; +try { + if (localStorage.getItem("hiScore") == null) { + localStorage.setItem("hiScore", 50); + } else { + hiScore = localStorage.getItem("hiScore"); + } +} catch (error) { + localStorage.setItem("hiScore", 50); +} +document.getElementById("highScore")?.innerHTML = + "your high score is " + hiScore; + +class barItem { + name: string; + alchol: boolean; + constructor(name: string, alchol: boolean) { + this.name = name; + this.alchol = alchol; + } +} +class coctail { + name: string; + ingredients: barItem[]; + constructor(name: string, ingredients: barItem[]) { + this.name = name; + this.ingredients = ingredients; + } +} + +const bi_ice = new barItem("ice", false); +const bi_soda = new barItem("soda", false); +const bi_lemon = new barItem("lemon", false); +const bi_cranberry = new barItem("cranberry", false); +const bi_lime = new barItem("lime", false); +const bi_vodka = new barItem("vodka", true); +const bi_brandy = new barItem("brandy", true); +const bi_champagne = new barItem("champagne", true); +const bi_gin = new barItem("gin", true); +const bi_rum = new barItem("rum", true); +const bi_tequila = new barItem("tequila", true); +const bi_tripleSec = new barItem("tripleSec", true); +const bi_whiskey = new barItem("whiskey", true); +const bi_whiteRum = new barItem("whiteRum", true); +const bi_mint = new barItem("mint", false); +const bi_vermouth = new barItem("vermouth", true); +const bi_campari = new barItem("campari", true); +const bi_Angostura = new barItem("Angostura", false); +const bi_sugar = new barItem("sugar", false); +const bi_syrup = new barItem("syrup", false); +const bi_coffee = new barItem("coffee", false); +const bi_orange = new barItem("orange", false); +const bi_grapefruit = new barItem("grapefruit", false); +const bi_ginger = new barItem("ginger", false); +const bi_olives = new barItem("olives", false); + +let drink_1 = new coctail("vodka_soda", [bi_vodka, bi_soda]); +let drink_2 = new coctail("mojito", [bi_lime, bi_mint, bi_whiteRum, bi_soda]); +let drink_3 = new coctail("cosmopolitan", [ + bi_vodka, + bi_cranberry, + bi_lime, + bi_ice, + bi_tripleSec, +]); +let drink_4 = new coctail("Negroni", [bi_gin, bi_campari, bi_vermouth]); +let drink_5 = new coctail("Manhattan", [ + bi_whiskey, + bi_vermouth, + bi_Angostura, + bi_ice, +]); +let drink_6 = new coctail("Old Fashioned", [ + bi_whiskey, + bi_Angostura, + bi_sugar, +]); +let drink_7 = new coctail("Moscow Mule", [bi_vodka, bi_ginger, bi_lime]); +let drink_8 = new coctail("Whiskey Sour", [bi_whiskey, bi_lemon, bi_sugar]); +let drink_9 = new coctail("French 75", [ + bi_gin, + bi_syrup, + bi_lemon, + bi_champagne, +]); +let drink_10 = new coctail("gimlet", [bi_gin, bi_syrup, bi_lime]); +let drink_11 = new coctail("mimosa", [bi_champagne, bi_orange]); +let drink_12 = new coctail("paloma", [bi_tequila, bi_lime, bi_grapefruit]); +let drink_13 = new coctail("Daiquiri", [bi_whiteRum, bi_syrup, bi_lime]); +let drink_14 = new coctail("black russian", [bi_vodka, bi_coffee]); +let drink_15 = new coctail("martini", [bi_gin, bi_olives]); +let drink_16 = new coctail("all", [ + bi_tequila, + bi_rum, + bi_champagne, + bi_brandy, +]); +//why dont you push the drinks directly to drinksToServe + +for (var nickName in this) { + if (nickName.startsWith("drink_")) { + drinksToServe.push(this[nickName]); + console.log(nickName); + } +} + +//code can be much clearer, if you use functions +for (let i = 0; i < drinksToServe.length; i++) { + let currntDrink = drinksToServe[i].ingredients; + for (let x = 0; x < currntDrink.length; x++) { + let drinkName = currntDrink[x].name; + if (allBarItems.indexOf(drinkName) == -1) { + allBarItems.push(drinkName); + } + } +} +for (let i = 0; i < allBarItems.length; i++) { + var imgPath = "./imgs/" + allBarItems[i] + ".png"; + const newDiv = document.createElement("div"); + newDiv.id = allBarItems[i]; + newDiv.className = "barItem"; + newDiv.title = allBarItems[i]; + newDiv.style = "background-image: url('" + imgPath + "');"; + newDiv.draggable = true; + newDiv.setAttribute("ondragstart", "drag(event)"); + + document.getElementById("shelf1")?.appendChild(newDiv); + if (document.getElementById("shelf1").children.length > 19) { + document.getElementById("shelf2").append(newDiv); + } +} +function allowDrop(ev) { + ev.preventDefault(); +} + +function drag(ev) { + ev.dataTransfer.setData("text", ev.target.id); + // ev.target.style= 'display:none'; +} + +function drop(ev) { + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); + let obj = "#" + data; + $(obj).fadeOut(1000); +} + +function generateRandomInteger(max) { + return Math.floor(Math.random() * max); +} + +function selectCocktail() { + const drinkId = generateRandomInteger(drinksToServe.length); + window.selectedDrink = drinksToServe[drinkId]; + let text = ""; + for (let i = 0; i < selectedDrink.ingredients.length; i++) { + text = text + selectedDrink.ingredients[i].name + "
                  "; + } + document.getElementById("hint")?.innerHTML = text; + + $("#hint").fadeOut(5000); + + document.getElementById("customerDialog")?.innerHTML = + "hello please give me " + selectedDrink.name; + while (document.getElementById("shaker")?.children.length > 0) { + $("#" + document.getElementById("shaker")?.children[0].id).fadeIn(500); + var targetShelf = "shelf1"; + if (document.getElementById("shelf1")?.children.length > 19) { + targetShelf = "shelf2"; + } + document + .getElementById(targetShelf) + .append(document.getElementById("shaker")?.children[0]); + } +} + +selectCocktail(); + +function serve() { + let drinkTaste = true; + let shakerContent = document.getElementById("shaker")?.children; + if (shakerContent?.length != selectedDrink.ingredients.length) { + //loose + document.getElementById("customerDialog")?.innerHTML = + "wft is this abomination , taste like shit"; + console.log("lose1"); + points = points - 10; + } else { + try { + for (let i = 0; i < shakerContent?.length; i++) { + if ( + selectedDrink.ingredients.findIndex( + (s) => s.name === shakerContent[i].id + ) == -1 + ) { + drinkTaste = false; + } + } + if (drinkTaste == true) { + //win + document.getElementById("customerDialog")?.innerHTML = + "thank you, that was very tasty"; + points = points + 5; + console.log("win"); + } else { + //loose + document.getElementById("customerDialog")?.innerHTML = + "give this cocktail to your manger"; + console.log("lose2"); + points = points - 10; + } + } catch { + console.error(); + } + } + if (points > hiScore) { + hiScore = points; + localStorage.setItem("hiScore", points); + document.getElementById( + "highScore" + )?.innerHTML = `your highest score : ${points}`; + } + document.getElementById("points")?.innerHTML = `currnet score ${points}: `; + if (points < 1) { + document.getElementById("customerDialog")?.innerHTML = + "YOU ARE FIRED , go home and learn some js"; + } else { + setTimeout(selectCocktail, 3000); + } +} + +let timer; +let count = document.querySelector("#timer"); +(function () { + let sec = 0; + timer = setInterval(() => { + count?.innerHTML = "00:" + sec; + sec++; + if (sec > 59) { + let min = 1; + min++; + count?.innerHTML = "00:" + sec; + } + }, 1000); +})(); diff --git a/02-TypeScript/18-personalProject/Checked/angela/second.html b/02-TypeScript/18-personalProject/Checked/angela/second.html new file mode 100644 index 000000000..56efbdba6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/angela/second.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/control.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/control.ts new file mode 100644 index 000000000..0000adb41 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/control.ts @@ -0,0 +1,109 @@ +let scores: number = 0; +let time = 60; + +const startBtn: any = document.querySelector(".startBtn"); +const removeAnimalFromScreen = (className: string) => { + const elem = document.querySelector(className) as HTMLElement; + elem?.remove(); +}; +startBtn.addEventListener(`click`, () => { + try { + if (!container) throw new Error("could not find container"); + const timer = setInterval(() => { + const scoreBorders: any = document.querySelector(".scoreboard"); + const timer: any = document.querySelector(".timer"); + timer.innerHTML = "TIME: " + time; + time--; + if (time === 0) { + timer.innerHTML = "TIME: 0"; + scoreBorders.style.display = "block"; + } + }, 1000); + const mosquitoInterval = setInterval(() => { + const elem = document.querySelector(".mosquito") as HTMLElement; + + mosquito.update(); + + elem.remove(); + }, 1000); + + const beeInterval = setInterval(() => { + const elem = document.querySelector(".bee") as HTMLElement; + + bee.update(); + elem.remove(); + }, 1000); + setInterval(() => { + if (time === 0) { + clearInterval(mosquitoInterval); + clearInterval(beeInterval); + clearInterval(timer); + removeAnimalFromScreen(".bee"); + removeAnimalFromScreen(".mosquito"); + } + }, 1000); + + const bloodSpot: any = document.querySelector(".bloodSpot"); + window.addEventListener("click", (e) => { + bloodSpot.style.top = e.pageY + "px"; + bloodSpot.style.left = e.pageX + "px"; + if (e.target?.className === `mosquito`) { + scores++; + } else if (e.target?.className === `bee`) { + scores--; + } + startBtn.innerHTML = "SCORE: " + scores; + }); + } catch (error) { + console.error(error); + } +}); + +function addToLocalStorage(event: any) { + try { + event.preventDefault(); + const name = event.target.elements.name.value; + const age = event.target.elements.age.value; + const email = event.target.elements.email.value; + const score = event.target.elements.email.value; + + event.target.reset(); + users.push(new User(name, age, email, scores)); + + if (!itemsRoot) throw new Error("itemsRoot is null"); + renderUsers(users, "itemsRoot"); + } catch (error) { + console.error(error); + } +} + +function renderUsers(users: User[], renderElementId: string): void { + try { + if (!users || !Array.isArray(users)) + throw new Error("users is not an array"); + + const html = users + .map((users) => { + return `
                    +
                  • ${users.name}
                    -- ${users.age} -- ${users.email} -- score: ${users.score}
                  + `; + }) + .join(` `); + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error(`couldent find element `); + element.innerHTML = html; + } catch (error) { + console.error(error); + } +} + +function saveTolocalStorge() { + localStorage.setItem(`users`, JSON.stringify(users)); +}0 + + +function btnAppears() { + const start: any = document.getElementById("start"); + start.style.display = "block"; + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/control.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/control.js new file mode 100644 index 000000000..5316783a2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/control.js @@ -0,0 +1,101 @@ +var scores = 0; +var time = 60; +var startBtn = document.querySelector(".startBtn"); +var removeAnimalFromScreen = function (className) { + var elem = document.querySelector(className); + elem === null || elem === void 0 ? void 0 : elem.remove(); +}; +startBtn.addEventListener("click", function () { + try { + if (!container) + throw new Error("could not find container"); + var timer_1 = setInterval(function () { + var scoreBorders = document.querySelector(".scoreboard"); + var timer = document.querySelector(".timer"); + timer.innerHTML = "TIME: " + time; + time--; + if (time === 0) { + timer.innerHTML = "TIME: 0"; + scoreBorders.style.display = "block"; + } + }, 1000); + var mosquitoInterval_1 = setInterval(function () { + var elem = document.querySelector(".mosquito"); + mosquito.update(); + elem.remove(); + }, 1000); + var beeInterval_1 = setInterval(function () { + var elem = document.querySelector(".bee"); + bee.update(); + elem.remove(); + }, 1000); + setInterval(function () { + if (time === 0) { + clearInterval(mosquitoInterval_1); + clearInterval(beeInterval_1); + clearInterval(timer_1); + removeAnimalFromScreen(".bee"); + removeAnimalFromScreen(".mosquito"); + } + }, 1000); + var bloodSpot_1 = document.querySelector(".bloodSpot"); + window.addEventListener("click", function (e) { + var _a, _b; + bloodSpot_1.style.top = e.pageY + "px"; + bloodSpot_1.style.left = e.pageX + "px"; + if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.className) === "mosquito") { + scores++; + } + else if (((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === "bee") { + scores--; + } + startBtn.innerHTML = "SCORE: " + scores; + }); + } + catch (error) { + console.error(error); + } +}); +function addToLocalStorage(event) { + try { + event.preventDefault(); + var name = event.target.elements.name.value; + var age = event.target.elements.age.value; + var email = event.target.elements.email.value; + var score = event.target.elements.email.value; + event.target.reset(); + users.push(new User(name, age, email, scores)); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + renderUsers(users, "itemsRoot"); + } + catch (error) { + console.error(error); + } +} +function renderUsers(users, renderElementId) { + try { + if (!users || !Array.isArray(users)) + throw new Error("users is not an array"); + var html = users + .map(function (users) { + return "
                    \n
                  • " + users.name + "
                    -- " + users.age + " -- " + users.email + " -- score: " + users.score + "
                  \n "; + }) + .join(" "); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("couldent find element "); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function saveTolocalStorge() { + localStorage.setItem("users", JSON.stringify(users)); +} +0; +function btnAppears() { + var start = document.getElementById("start"); + start.style.display = "block"; +} diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/helpers.js new file mode 100644 index 000000000..6cc08a33d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/helpers.js @@ -0,0 +1,5 @@ +var crusor = document.querySelector('.cursor'); +window.addEventListener('mousemove', function (e) { + crusor.style.top = e.pageY + 'px'; + crusor.style.left = e.pageX + 'px'; +}); diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/html-style.css b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/html-style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/index.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/index.js new file mode 100644 index 000000000..56b998e06 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/index.js @@ -0,0 +1,5 @@ +var _users = getItemsFromStorage(); +if (_users) { + users.push.apply(users, _users); +} +renderUsers(users, "itemsRoot"); diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/main.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/model.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/model.js new file mode 100644 index 000000000..692866f1f --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/model.js @@ -0,0 +1,40 @@ +var User = /** @class */ (function () { + function User(name, age, email, score) { + this.name = name; + this.age = age; + this.email = email; + this.score = score; + } + return User; +}()); +var users = []; +var Animal = /** @class */ (function () { + function Animal(name, imageUrl, display) { + if (display === void 0) { display = "flex"; } + this.name = name; + this.imageUrl = imageUrl; + this.display = display; + this.positionX = randomX(); + this.positionY = randomY(); + } + Animal.prototype.draw = function () { + var animal = document.createElement("img"); + container.appendChild(animal); + animal.setAttribute("class", this.name); + animal.setAttribute("src", this.imageUrl); + animal.style.position = "absolute"; + animal.style.top = this.positionY + "px"; + animal.style.left = this.positionX + "px"; + animal.style.display = this.display; + }; + Animal.prototype.update = function () { + this.draw(); + this.positionX = randomX(); + this.positionY = randomY(); + }; + return Animal; +}()); +var randomY = function () { return Math.random() * (contHeight - 100); }; +var randomX = function () { return Math.random() * (contWidth - 100); }; +var mosquito = new Animal("mosquito", "https://www.pngarts.com/files/4/Mosquito-Transparent-Background-PNG.png"); +var bee = new Animal("bee", "https://www.freepnglogos.com/uploads/bee-png/bee-the-economic-value-pollination-modern-agriculture-8.png"); diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/scoreboard-style.css b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/scoreboard-style.css new file mode 100644 index 000000000..b8cb6197b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/scoreboard-style.css @@ -0,0 +1,25 @@ +body { + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmJfT6IuuG7TYPUVKMYeg89PC4ZR83OS03sq_aM5Ux-xMo3rVzuCY256NtrJOD7yIhOHg&usqp=CAU); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 100vh; + width: 70vw; +} + +.conteiner { + width: 450px; + height: 350px; + border: 2px solid red; + background-color: black; + color: gold; + margin-left: 150px; +} + +h1, h2 { + color: black; +} + +h3 { + color: black; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/second-style.css b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/second-style.css new file mode 100644 index 000000000..158bf87a2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/second-style.css @@ -0,0 +1,112 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + cursor: none; +} + +.cursor { + position: absolute; + height: 50px; + width: 50px; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 2; + transition: 0.3s transform ease; + transform-origin: 100% 100%; +} + +body { + background-image: url(https://static.vecteezy.com/system/resources/thumbnails/003/386/371/original/windy-plain-near-the-jungle-and-rocks-free-video.jpg); + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + text-align: center; +} + +.container { + position: relative; + height: 100%; + overflow: hidden; + display: grid; + justify-content: center; + gap: 3rem; +} +.container .startBtn { + outline: none; + cursor: none; + color: black; + border: 2px solid #0cea2e; + padding: 15px 45px; + font-size: 1.1rem; + margin-top: 3em; + background: transparent; + position: relative; + height: 55px; + width: 350px; + text-align: center; + margin-left: 3em; +} +.container .timer { + outline: none; + cursor: none; + color: black; + border: 2px solid black; + padding: 15px 45px; + font-size: 1.1rem; + margin-top: 3em; + background: transparent; + position: relative; + height: 55px; + width: 350px; + text-align: center; + margin-left: 3em; + position: absolute; + right: 0; +} +.container .scoreboard { + outline: none; + cursor: none; + color: black; + border: 2px solid black; + padding: 15px 45px; + font-size: 1.1rem; + height: 55px; + width: 350px; + text-align: center; + margin-left: 3em; + display: none; +} +.container .endBtn { + outline: none; + cursor: none; + color: black; + border: 2px solid black; + padding: 15px 45px; + font-size: 1.1rem; + margin-top: 3em; + background: transparent; + position: absolute; + height: 55px; + width: 350px; + text-align: center; +} +.container .endBtn a { + outline: none; + cursor: none; +} +.container .bloodSpot { + position: absolute; + height: 50px; + z-index: 2; + transform: translate(-50%, -50%); +} +.container .mosquito { + height: 100px; +} +.container .bee { + width: 100px; +} +.container .img::selection { + background: transparent; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/second.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/second.js new file mode 100644 index 000000000..40ff85e71 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/second.js @@ -0,0 +1,5 @@ +var _users = getItemsFromStorage(); +if (_users) { + users.push.apply(users, _users); +} +// renderUsers(users,"itemsRoot"); diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/style.css b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/style.css new file mode 100644 index 000000000..2b3fb6f2a --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/style.css @@ -0,0 +1,55 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-image: url(https://i0.wp.com/animationscreencaps.com/wp-content/uploads/2022/01/4kbugslife-animationscreencaps.com--scaled.jpg?fit=2560%2C1109&ssl=1); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 100vh; + width: 70vw; + margin-left: 15px; +} + +.container .form { + display: flex; + flex-direction: column; + gap: 2rem; + width: 400px; + align-items: center; + padding-top: 8rem; + padding-left: 11rem; +} +.container .form .input { + background-color: bisque; + width: 550px; + height: 3rem; +} +.container .form .btn, .container .form .rules, .container .form a { + background-color: mediumseagreen; + width: 450px; + height: 3rem; + font-size: 2rem; + outline: none; +} +.container .form #start { + background-color: mediumseagreen; + width: 450px; + height: 3rem; + font-size: 2rem; + outline: none; + display: none; +} +.container .form .card { + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + max-width: 300px; + position: absolute; +} +.container .form .card img { + width: 100%; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/view.js b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/view.js new file mode 100644 index 000000000..92851ecae --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/dist/view.js @@ -0,0 +1,18 @@ +var container = document.querySelector(".container"); +var itemsRoot = document.querySelector('#itemsRoot'); +var contWidth = container.offsetWidth; +var contHeight = container.offsetHeight; +var form = document.getElementById("form"); +function getItemsFromStorage() { + try { + var usersString = localStorage.getItem("users"); + if (!usersString) + throw new Error("cant find"); + var users = JSON.parse(usersString); + return users; + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/helpers.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/helpers.ts new file mode 100644 index 000000000..d7a33f662 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/helpers.ts @@ -0,0 +1,9 @@ +const crusor: any = document.querySelector('.cursor'); +window.addEventListener('mousemove', (e) =>{ + + crusor.style.top = e.pageY + 'px'; + crusor.style.left = e.pageX + 'px'; + +}); + + diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/images/blood-spot.png b/02-TypeScript/18-personalProject/Checked/itayAmosi/images/blood-spot.png new file mode 100644 index 000000000..0998432e0 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/itayAmosi/images/blood-spot.png differ diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/images/crosshair.png b/02-TypeScript/18-personalProject/Checked/itayAmosi/images/crosshair.png new file mode 100644 index 000000000..b3f392e73 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/itayAmosi/images/crosshair.png differ diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/images/favicon.png b/02-TypeScript/18-personalProject/Checked/itayAmosi/images/favicon.png new file mode 100644 index 000000000..f310e17d1 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/itayAmosi/images/favicon.png differ diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/index.html b/02-TypeScript/18-personalProject/Checked/itayAmosi/index.html new file mode 100644 index 000000000..e9ed2fa06 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/index.html @@ -0,0 +1,34 @@ + + + + + + + + A Bugs Life - menu + + + + + + + + + + +
                  +
                  + + + + + + + + + +
                  +
                  + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/index.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/index.ts new file mode 100644 index 000000000..b45b251d1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/index.ts @@ -0,0 +1,8 @@ +const _users= getItemsFromStorage(); + +if(_users){ + users.push(..._users); + +} +renderUsers(users,"itemsRoot"); + diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/main.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/main.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/model.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/model.ts new file mode 100644 index 000000000..2962162ee --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/model.ts @@ -0,0 +1,46 @@ +class User { + constructor( + public name: string, + public age: string, + public email: string, + public score: number + ) {} +} + +const users: User[] = []; + +class Animal { + public positionX = randomX(); + public positionY = randomY(); + constructor( + public name: string, + public imageUrl: string, + public display = "flex" + ) {} + draw() { + const animal = document.createElement("img"); + container.appendChild(animal); + animal.setAttribute("class", this.name); + animal.setAttribute("src", this.imageUrl); + animal.style.position = "absolute"; + animal.style.top = `${this.positionY}px`; + animal.style.left = `${this.positionX}px`; + animal.style.display = this.display; + } + update() { + this.draw(); + this.positionX = randomX(); + this.positionY = randomY(); + } +} +const randomY = () => Math.random() * (contHeight - 100); +const randomX = () => Math.random() * (contWidth - 100); + +const mosquito = new Animal( + "mosquito", + "https://www.pngarts.com/files/4/Mosquito-Transparent-Background-PNG.png" +); +const bee = new Animal( + "bee", + "https://www.freepnglogos.com/uploads/bee-png/bee-the-economic-value-pollination-modern-agriculture-8.png" +); diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/rules.html b/02-TypeScript/18-personalProject/Checked/itayAmosi/rules.html new file mode 100644 index 000000000..4b14d051d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/rules.html @@ -0,0 +1,19 @@ + + + + + + + Rules Page + + + +

                  Rules!

                  +

                    +

                    Hi welcome to the game


                    +

                    Clicking on the mosquito gives one point On the other hand, clicking on the bee will lower a point.

                    +

                    For a limited time game of 60 seconds, at the end of the time the insects will disappear and in their place a scoreboard will pop up, look for your name there!

                    + +
                    + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/scoreboard-style.scss b/02-TypeScript/18-personalProject/Checked/itayAmosi/scoreboard-style.scss new file mode 100644 index 000000000..cd2e053fa --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/scoreboard-style.scss @@ -0,0 +1,27 @@ +body{ + background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmJfT6IuuG7TYPUVKMYeg89PC4ZR83OS03sq_aM5Ux-xMo3rVzuCY256NtrJOD7yIhOHg&usqp=CAU); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 100vh; + width: 70vw; +} + +.conteiner{ +width: 450px; +height: 350px; +border: 2px solid red; +background-color: black; +color: gold; +margin-left: 150px; + + +} + +h1, h2{ + color:black; + +} +h3{ + color: black; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/scoreboard.html b/02-TypeScript/18-personalProject/Checked/itayAmosi/scoreboard.html new file mode 100644 index 000000000..c1d781f8c --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/scoreboard.html @@ -0,0 +1,36 @@ + + + + + + + + Scoreboard + + + + + + + + + + +

                    Scoreboard!

                    +
                    +
                    +
                      +
                    • itayAmosi
                      --23 -- itayAmosi@gmail.com -- score: 145628

                      • +
                    • tomer
                      -- 12 -- tomer@gmail.com -- score: 15

                      • +
                    • itai
                      -- 28 -- itai@gmail.com -- score: 25

                      • +
                    • vladi
                      -- 24 -- vladi@gmail.com -- score: 214

                      • +
                    • matan
                      -- 33 -- matan@gmail.com -- score: 35

                      • +
                    +
                    + + +
                    + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/second-style.scss b/02-TypeScript/18-personalProject/Checked/itayAmosi/second-style.scss new file mode 100644 index 000000000..7d58c5775 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/second-style.scss @@ -0,0 +1,123 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + cursor: none; +} + +.cursor { + position: absolute; + height: 50px; + width: 50px; + transform: translate(-50%, -50%); + + pointer-events: none; + z-index: 2; + transition: 0.3s transform ease; + transform-origin: 100% 100%; +} + + +body { + background-image: url(https://static.vecteezy.com/system/resources/thumbnails/003/386/371/original/windy-plain-near-the-jungle-and-rocks-free-video.jpg); + // background-image: url(https://img.freepik.com/premium-vector/empty-kitchen-interior-design-with-furniture_1308-77125.jpg?w=2000); + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + text-align: center; +} + +.container { + position: relative; + height: 100%; + overflow: hidden; + display: grid; + justify-content: center; + gap: 3rem; + + .startBtn { + outline: none; + cursor: none; + color: black; + border: 2px solid rgb(12, 234, 46); + padding: 15px 45px; + font-size: 1.1rem; + margin-top: 3em; + background: transparent; + position: relative; + height: 55px; + width: 350px; + text-align: center; + margin-left: 3em; + } + .timer { + outline: none; + cursor: none; + color: black; + border: 2px solid rgb(0, 0, 0); + padding: 15px 45px; + font-size: 1.1rem; + margin-top: 3em; + background: transparent; + position: relative; + height: 55px; + width: 350px; + text-align: center; + margin-left: 3em; + position: absolute; + right: 0; + } + .scoreboard { + outline: none; + + cursor: none; + color: black; + border: 2px solid rgb(0, 0, 0); + padding: 15px 45px; + font-size: 1.1rem; + // background: transparent; + height: 55px; + width: 350px; + text-align: center; + margin-left: 3em; + display: none; + } + .endBtn { + outline: none; + cursor: none; + color: black; + border: 2px solid rgb(0, 0, 0); + padding: 15px 45px; + font-size: 1.1rem; + margin-top: 3em; + background: transparent; + position: absolute; + height: 55px; + width: 350px; + text-align: center; + + a{ + outline: none; + cursor: none; + } + } + + .bloodSpot { + position: absolute; + height: 50px; + z-index: 2; + transform: translate(-50%, -50%); + } + .mosquito{ + height: 100px; + } + .bee{ + width: 100px; + // height: 10px; + + } + .img::selection { + background: transparent; + } + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/second.html b/02-TypeScript/18-personalProject/Checked/itayAmosi/second.html new file mode 100644 index 000000000..2d568ea0b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/second.html @@ -0,0 +1,32 @@ + + + + + + + + A Bugs Life - Game + + + + + + + + + + + +
                    + blood-spot + + crosshair + + + + +
                    + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/second.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/second.ts new file mode 100644 index 000000000..e85dfab86 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/second.ts @@ -0,0 +1,7 @@ +const _users= getItemsFromStorage(); + +if(_users){ + users.push(..._users); + +} +// renderUsers(users,"itemsRoot"); diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/style.scss b/02-TypeScript/18-personalProject/Checked/itayAmosi/style.scss new file mode 100644 index 000000000..c2ed54099 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/style.scss @@ -0,0 +1,87 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + // cursor: none; +} +body { + background-image: url(https://i0.wp.com/animationscreencaps.com/wp-content/uploads/2022/01/4kbugslife-animationscreencaps.com--scaled.jpg?fit=2560%2C1109&ssl=1); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 100vh; + width: 70vw; +margin-left: 15px; + + +} + +.container { + + + .form { + display: flex; + flex-direction: column; + gap: 2rem; + width: 400px; + align-items: center; + padding-top: 8rem; + padding-left: 11rem; + // margin-left: 5rem; + // padding: 1rem; + + + + .input { + background-color: bisque; + width: 550px; + height: 3rem; + + } + + .btn , .rules, a{ + background-color:mediumseagreen; + width: 450px; + height: 3rem; + font-size: 2rem; + outline: none; + } + #start{ + background-color:mediumseagreen; + width: 450px; + height: 3rem; + font-size: 2rem; + outline: none; + display: none; + } + + .card{ + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.394); + max-width: 300px; + position: absolute; + + img{ + width: 100%; + } + } + + } + + + + + + + + + + + + + + + + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/itayAmosi/view.ts b/02-TypeScript/18-personalProject/Checked/itayAmosi/view.ts new file mode 100644 index 000000000..f51405339 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/itayAmosi/view.ts @@ -0,0 +1,23 @@ +const container: any = document.querySelector(`.container`); +const itemsRoot = document.querySelector('#itemsRoot'); + + +const contWidth = container.offsetWidth; +const contHeight = container.offsetHeight; + +const form = document.getElementById("form"); + + +function getItemsFromStorage(): User[]|undefined{ + try { + const usersString= localStorage.getItem("users"); + if(!usersString)throw new Error(`cant find`); + + const users= JSON.parse(usersString); + return users; + + } catch (error) { + console.error(error) + return undefined; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/control.ts b/02-TypeScript/18-personalProject/Checked/noa-meillet/control.ts new file mode 100644 index 000000000..f62623f3d --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/control.ts @@ -0,0 +1,180 @@ +function goToUserProfile(event): void { + try { + event.preventDefault(); + const userId = event.target.elements.userId.value; + const password = event.target.elements.userPassword.value; + if (!usersList) + throw new Error( + `We don't have any users that have an account to our site` + ); + const user: User | undefined = usersList.find( + (user) => user.userId == userId + ); + if (!user) { + alert( + `We can't find an account that match to your ID number... You can create an account if you want :)` + ); + } else if (password != user.userPassword) { + alert( + `${user.userFullName} the password don't match to your ID number... Try again` + ); + } else { + if (!link) throw new Error(`We can't show the user page`); + localStorage.setItem("user id", user.userId); + localStorage.setItem("user name", user.userFullName); + link.click(); + } + } catch (error) { + console.error(`something don't work with the log in function`); + } +} + +function btnAdd() { + try { + if (!form) throw new Error(`We don't have any element to add your user`); + form.innerHTML = ` +

                    Create a user:

                    + + `; + } catch (error) { + console.error(`The form to add users have a problem`); + } +} + +function addUser(event) { + try { + event.preventDefault(); + const newUserId = event.target.elements.newUserId.value; + const newUserPassword = event.target.elements.newUserPassword.value; + const newUserFullName = event.target.elements.newUserFullName.value; + const newUserBirthday = event.target.elements.newUserBirthday.value; + const newUserEmail = event.target.elements.newUserEmail.value; + const newUserPhone = event.target.elements.newUserPhone.value; + usersList.push( + new User( + newUserId, + newUserPassword, + newUserFullName, + newUserBirthday, + newUserEmail, + newUserPhone + ) + ); + localStorage.setItem("users", JSON.stringify(usersList)); + if (!link) throw new Error(`The user page cant be open`); + newUserLogIn(newUserId, newUserFullName); + if (form) + form.innerHTML = ` +

                    The user has been succesfully created

                    + `; + } catch (error) { + console.error(`We didnt succeed to add the new user`); + } +} + +function showClubCards(clubCardsList) { + try { + if (!localStorage.getItem("user id")) + throw new Error(`No user is log to the system`); + if (clubCardsList.length == 0) + throw new Error(`There is no club cards registed in the system`); + const userClubCards = clubCardsList.filter( + (user) => user.userId == localStorage.getItem("user id") + ); + if (!clubCards) + throw new Error(`We don't have a culb cards div to show you your cards`); + if (userClubCards.length == 0) + clubCards.innerHTML += `

                    You don't have card member in any store...


                    +

                    ${localStorage.getItem( + "user name" + )}, it's time to go shopping

                    `; + else { + clubCards.innerHTML = `

                    Welcome ${localStorage.getItem( + "user name" + )}

                    `; + for (let i = 0; i < userClubCards.length; i++) { + clubCards.innerHTML += `
                    +

                    Store: ${userClubCards[i].store.storeName}

                    +

                    Amount of points: ${getAmountOfPoints( + userClubCards[i].store.amountOfPoints, + userClubCards[i].amountOfPoints + )}

                    +
                    + `; + } + } + } catch (error) { + console.error(`error loading club cards for user`); + } +} + +/* + +////....PROBLEM WITH THE LOCAL STORAGE....////// +////....MY LOCAL STORAGE UPDATE MY DATA BUT WITHOUT REPLACING IT BY THE NEW DATA....//// +///....IT KEEP ACCUMULATE MY NEW DATA TO THE OLD DATA....////// + +//ADD TO THE INNERHTML + + + +//SET AND DELETE FUNCTION +function handleUpdateCard(userId: string, storeName: string) { + try { + let newPoints; + newPoints = prompt( + "Enter the correct amount of your points for this store:" + ); + while (!newPoints || isNaN(newPoints)) { + newPoints = prompt("You need to enter a number:"); + newPoints = parseInt(newPoints); + } + const selectedClubCardIndex = clubCardsList.findIndex( + (card) => card.userId == userId && card.store.storeName == storeName + ); + if (selectedClubCardIndex == -1) throw new Error("item not found"); + clubCardsList[selectedClubCardIndex].amountOfPoints = newPoints; + if (!clubCards) throw new Error("ItemRoot is undefined"); + localStorage.setItem("cards", JSON.stringify(clubCardsList)); + showClubCards(clubCardsList); + } catch (error) { + console.error(error); + } +} + +function handleDeleteCard(userId: string, storeName: string) { + try { + const index = clubCardsList.findIndex( + (card) => card.userId == userId && card.store.storeName == storeName + ); + if (index === -1) throw new Error("item not found"); + clubCardsList.splice(index, 1); + + if (!clubCards) throw new Error("store is available"); + localStorage.setItem("cards", JSON.stringify(clubCardsList)); + showClubCards(clubCardsList); + } catch (error) { + console.error(error); + } +} +*/ diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/control.js b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/control.js new file mode 100644 index 000000000..45d24dde2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/control.js @@ -0,0 +1,133 @@ +function goToUserProfile(event) { + try { + event.preventDefault(); + var userId_1 = event.target.elements.userId.value; + var password = event.target.elements.userPassword.value; + if (!usersList) + throw new Error("We don't have any users that have an account to our site"); + var user = usersList.find(function (user) { return user.userId == userId_1; }); + if (!user) { + alert("We can't find an account that match to your ID number... You can create an account if you want :)"); + } + else if (password != user.userPassword) { + alert(user.userFullName + " the password don't match to your ID number... Try again"); + } + else { + if (!link) + throw new Error("We can't show the user page"); + localStorage.setItem("user id", user.userId); + localStorage.setItem("user name", user.userFullName); + link.click(); + } + } + catch (error) { + console.error("something don't work with the log in function"); + } +} +function btnAdd() { + try { + if (!form) + throw new Error("We don't have any element to add your user"); + form.innerHTML = "\n

                    Create a user:

                    \n
                    \n \n
                    \n \n
                    \n \n
                    \n Enter your date of birth: \n
                    \n \n
                    \n \n
                    \n \n
                    \n \n
                    \n "; + } + catch (error) { + console.error("The form to add users have a problem"); + } +} +function addUser(event) { + try { + event.preventDefault(); + var newUserId = event.target.elements.newUserId.value; + var newUserPassword = event.target.elements.newUserPassword.value; + var newUserFullName = event.target.elements.newUserFullName.value; + var newUserBirthday = event.target.elements.newUserBirthday.value; + var newUserEmail = event.target.elements.newUserEmail.value; + var newUserPhone = event.target.elements.newUserPhone.value; + usersList.push(new User(newUserId, newUserPassword, newUserFullName, newUserBirthday, newUserEmail, newUserPhone)); + localStorage.setItem("users", JSON.stringify(usersList)); + if (!link) + throw new Error("The user page cant be open"); + newUserLogIn(newUserId, newUserFullName); + if (form) + form.innerHTML = "\n

                    The user has been succesfully created

                    \n "; + } + catch (error) { + console.error("We didnt succeed to add the new user"); + } +} +function showClubCards(clubCardsList) { + try { + if (!localStorage.getItem("user id")) + throw new Error("No user is log to the system"); + if (clubCardsList.length == 0) + throw new Error("There is no club cards registed in the system"); + var userClubCards = clubCardsList.filter(function (user) { return user.userId == localStorage.getItem("user id"); }); + if (!clubCards) + throw new Error("We don't have a culb cards div to show you your cards"); + if (userClubCards.length == 0) + clubCards.innerHTML += "

                    You don't have card member in any store...


                    \n

                    " + localStorage.getItem("user name") + ", it's time to go shopping

                    "; + else { + clubCards.innerHTML = "

                    Welcome " + localStorage.getItem("user name") + "

                    "; + for (var i = 0; i < userClubCards.length; i++) { + clubCards.innerHTML += "
                    \n

                    Store: " + userClubCards[i].store.storeName + "

                    \n

                    Amount of points: " + getAmountOfPoints(userClubCards[i].store.amountOfPoints, userClubCards[i].amountOfPoints) + "

                    \n
                    \n "; + } + } + } + catch (error) { + console.error("error loading club cards for user"); + } +} +/* + +////....PROBLEM WITH THE LOCAL STORAGE....////// +////....MY LOCAL STORAGE UPDATE MY DATA BUT WITHOUT REPLACING IT BY THE NEW DATA....//// +///....IT KEEP ACCUMULATE MY NEW DATA TO THE OLD DATA....////// + +//ADD TO THE INNERHTML + + + +//SET AND DELETE FUNCTION +function handleUpdateCard(userId: string, storeName: string) { + try { + let newPoints; + newPoints = prompt( + "Enter the correct amount of your points for this store:" + ); + while (!newPoints || isNaN(newPoints)) { + newPoints = prompt("You need to enter a number:"); + newPoints = parseInt(newPoints); + } + const selectedClubCardIndex = clubCardsList.findIndex( + (card) => card.userId == userId && card.store.storeName == storeName + ); + if (selectedClubCardIndex == -1) throw new Error("item not found"); + clubCardsList[selectedClubCardIndex].amountOfPoints = newPoints; + if (!clubCards) throw new Error("ItemRoot is undefined"); + localStorage.setItem("cards", JSON.stringify(clubCardsList)); + showClubCards(clubCardsList); + } catch (error) { + console.error(error); + } +} + +function handleDeleteCard(userId: string, storeName: string) { + try { + const index = clubCardsList.findIndex( + (card) => card.userId == userId && card.store.storeName == storeName + ); + if (index === -1) throw new Error("item not found"); + clubCardsList.splice(index, 1); + + if (!clubCards) throw new Error("store is available"); + localStorage.setItem("cards", JSON.stringify(clubCardsList)); + showClubCards(clubCardsList); + } catch (error) { + console.error(error); + } +} +*/ diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/helpers.js new file mode 100644 index 000000000..1edb67208 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/helpers.js @@ -0,0 +1,35 @@ +function getClubCardsForUser(id) { + try { + if (!clubCardsList) { + console.error("there is no club cards at all"); + return undefined; + } + return clubCardsList.filter(function (user) { return user.userId == id; }); + } + catch (error) { + console.error("error loading club cards for user"); + } +} +function getAmountOfPoints(storePoints, userPoints) { + try { + if (storePoints == -1) + return "this store do not acumulate points"; + else + return userPoints; + } + catch (error) { + console.error("error loading amount of points for user"); + return -1; + } +} +function newUserLogIn(newUserId, newUserFullName) { + try { + if (!link) + throw new Error("We can't show the user page"); + localStorage.setItem("user id", newUserId); + localStorage.setItem("user name", newUserFullName); + } + catch (error) { + console.error("We can't log with the new user to the system"); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/index.js b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/index.js new file mode 100644 index 000000000..80fdb0469 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/index.js @@ -0,0 +1,5 @@ +var _cards = getCardsFromStorage(); +if (_cards) { + clubCardsList.push.apply(clubCardsList, _cards); +} +showClubCards(_cards); diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/logIn.css b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/logIn.css new file mode 100644 index 000000000..81156bae6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/logIn.css @@ -0,0 +1,56 @@ +body { + background-color: #E9DCBE; +} +body .nav_bar { + width: 80%; + margin: auto; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +body .nav_bar img { + width: 15%; + padding: 5px; +} +body .nav_bar h2 { + color: #343434; + text-align: center; +} +body .form { + height: 330px; + width: 250px; + background-color: #F3F3F3; + border-radius: 10px; + border: 1.5px solid #8E8B82; + padding: 4%; + margin: auto; + margin-top: 2%; +} +body .form h3, body .form h4, body .form lable { + margin: 5% 15%; + text-align: center; +} +body .form h1 { + margin: 30% auto; + width: 80%; + text-align: center; +} +body .form .input { + margin: 4% 15%; +} +body .form #log_in_btn, body .form #sign_in_btn { + color: #F3F3F3; + background-color: #72b1a0; + margin: 3% 40%; +} +body .form #btn_new_user_login { + color: #F3F3F3; + background-color: #72b1a0; + margin: 5% 40%; +} +body #add_user button, body #add_user img { + width: 40px; + border: none; + border-radius: 100%; + margin-left: 36%; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/logIn.js b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/logIn.js new file mode 100644 index 000000000..3d773fe92 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/logIn.js @@ -0,0 +1,4 @@ +var _users = getUsersFromStorage(); +if (_users) { + usersList.push.apply(usersList, _users); +} diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/model.js b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/model.js new file mode 100644 index 000000000..e9a4338e7 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/model.js @@ -0,0 +1,120 @@ +//class for details about the condition of club member in each store +var Store = /** @class */ (function () { + function Store(storeName, amountOfPoints, //-1== no points, 0== points + bdayDscntDuration, //in days + bithdayDiscount //amount of bitrhday discount + ) { + this.storeName = storeName; + this.amountOfPoints = amountOfPoints; + this.bdayDscntDuration = bdayDscntDuration; + this.bithdayDiscount = bithdayDiscount; + } + return Store; +}()); +//data +var castro = new Store("Castro", 0, 45, "20%"); +var renuar = new Store("Renuar", 0, 30, "20%"); +var theNorthFace = new Store("The North Face", 0, 1, "20%"); +var colombia = new Store("Colombia", 0, 1, "20%"); +var zara = new Store("Zara", -1, 7, "20%"); +var hamashbir = new Store("Hamashbir", -1, 30, "20%"); +var dreamCard = new Store("Fox, FoxHome, Mango, BillaBong, Laline, Yanga, FootLocker", 0, 30, "20%"); +var nike = new Store("Nike", 0, 14, "20%"); +var adidas = new Store("Adidas", -1, 14, "20%"); +var zometSefarim = new Store("Zomet Sefarim", -1, 45, "20%"); +var golf = new Store("Golf", 0, 30, "20%"); +//array of stores +var storeList = [ + castro, + renuar, + theNorthFace, + colombia, + zara, + hamashbir, + dreamCard, + nike, + adidas, + zometSefarim, + golf, +]; +//class for details about each club member that belong to a user +var ClubCards = /** @class */ (function () { + function ClubCards(userId, store, amountOfPoints) { + this.userId = userId; + this.store = store; + this.amountOfPoints = amountOfPoints; + } + return ClubCards; +}()); +//data +var noaCastro = new ClubCards("209966001", castro, 23.6); +var noaDreamCard = new ClubCards("209966001", dreamCard, 201.5); +var noatheNorthFace = new ClubCards("209966001", theNorthFace, 70.8); +var sagivDreamCard = new ClubCards("301154268", dreamCard, 0); +var sagivNike = new ClubCards("301154268", nike, 40.2); +var sagivZometSefarim = new ClubCards("301154268", zometSefarim, 0); +var sagivZara = new ClubCards("301154268", zara, 0); +var talCastro = new ClubCards("209966019", castro, 57); +var talAdidas = new ClubCards("209966019", adidas, 0); +var nirColombia = new ClubCards("052406521", colombia, 32.3); +var nirRenuar = new ClubCards("052406521", renuar, 6.17); +var shalevZara = new ClubCards("332640564", zara, 0); +var hilaGolf = new ClubCards("058796554", golf, 41.2); +var hilaDreamCard = new ClubCards("058796554", dreamCard, 94.7); +var hilaHamashbir = new ClubCards("058796554", hamashbir, 0); +var ethanGolf = new ClubCards("400625435", golf, 15.2); +var LaviDreamCard = new ClubCards("235588649", dreamCard, 85.6); +var Lavi = new ClubCards("235588649", hamashbir, 0); +//array of all club cards for all the users +var clubCardsList = [ + noaCastro, + noaDreamCard, + noatheNorthFace, + sagivDreamCard, + sagivNike, + sagivZometSefarim, + sagivZara, + talCastro, + talAdidas, + nirColombia, + nirRenuar, + shalevZara, + hilaGolf, + hilaDreamCard, + hilaHamashbir, + ethanGolf, +]; +//class for details about each user +var User = /** @class */ (function () { + function User(userId, userPassword, userFullName, dateOfBirth, email, phoneNumber, clubCard) { + this.userId = userId; + this.userPassword = userPassword; + this.userFullName = userFullName; + this.dateOfBirth = dateOfBirth; + this.email = email; + this.phoneNumber = phoneNumber; + this.clubCard = clubCard; + this.clubCard = getClubCardsForUser(this.userId); + } + return User; +}()); +//data +var noaMeillet = new User("209966001", "noa0512", "Noa Meillet", "2001-02-05", "noam@gmail.com", "0525643254"); +var sagivKelly = new User("301154268", "sagiv1908", "Sagiv Kelly", "2000-05-19", "sagivk@gmail.com", "0529531221"); +var talVaknin = new User("209966019", "tal0301", "Tal Vaknin", "1999-03-01", "talv@gmail.com", "0505785965"); +var nirJacob = new User("052406521", "nir2511", "Nir Jacob", "1986-11-25", "nirj@gmail.com", "0548579658"); +var shalevLevi = new User("332640564", "shalev0204", "shalev Levi", "1978-11-14", "shalevl@gmail.com", "0521225436"); +var hilaWasker = new User("058796554", "hila2809", "Hila Wasker", "2000-09-28", "hilaw@gmail.com", "0525381648"); +var ethanAzriel = new User("400625435", "ethan1405", "Ethan Azriel", "1997-04-05", "ethana@gmail.com", "0505649254"); +var jhonSmith = new User("745820011", "jhon0805", "Jhon Smith", "2000-05-08", "jhons@gmail.com", "058-9405856"); +//array for all the users +var usersList = [ + noaMeillet, + sagivKelly, + talVaknin, + nirJacob, + shalevLevi, + hilaWasker, + ethanAzriel, + jhonSmith, +]; diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/style.css b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/style.css new file mode 100644 index 000000000..91a098ab0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/style.css @@ -0,0 +1,43 @@ +body { + background-color: #E9DCBE; + color: #343434; +} +body img { + width: 8%; + margin: 5px 0 0 5px; +} +body .nav_bar { + width: 80%; + margin: auto; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} +body .nav_bar img { + width: 15%; + padding: 5px; +} +body .nav_bar h2 { + color: #343434; + text-align: center; +} +body .club_cards { + width: 70%; + margin: auto; +} +body .club_cards h2 { + text-align: center; +} +body .club_cards__store { + margin-top: 4%; + padding: 5px; + background-color: #F3F3F3; + border-radius: 10px; + border: 1.5px solid #8E8B82; +} +body .club_cards__store h3 { + font-style: oblique; + text-align: center; + width: 80%; + margin: 5px auto; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/view.js b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/view.js new file mode 100644 index 000000000..c1a8c74f1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/dist/view.js @@ -0,0 +1,30 @@ +var form = document.querySelector(".form"); +var link = document.querySelector("#link_to_main"); +var clubCards = document.querySelector(".club_cards"); +function getUsersFromStorage() { + try { + var usersString = localStorage.getItem("users"); + if (!usersString) + throw new Error("Couldn't find users in storage"); + var users = JSON.parse(usersString); + return users; + } + catch (error) { + console.error(error); + return undefined; + } +} +function getCardsFromStorage() { + try { + localStorage.setItem("cards", JSON.stringify(clubCardsList)); + var cardsString = localStorage.getItem("cards"); + if (!cardsString) + throw new Error("Couldn't find cards in storage"); + var cards = JSON.parse(cardsString); + return cards; + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/helpers.ts b/02-TypeScript/18-personalProject/Checked/noa-meillet/helpers.ts new file mode 100644 index 000000000..0c65c4703 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/helpers.ts @@ -0,0 +1,31 @@ +function getClubCardsForUser(id: string): ClubCards[] | undefined { + try { + if (!clubCardsList) { + console.error("there is no club cards at all"); + return undefined; + } + return clubCardsList.filter((user) => user.userId == id); + } catch (error) { + console.error(`error loading club cards for user`); + } +} + +function getAmountOfPoints(storePoints, userPoints): number | string { + try { + if (storePoints == -1) return "this store do not acumulate points"; + else return userPoints; + } catch (error) { + console.error(`error loading amount of points for user`); + return -1; + } +} + +function newUserLogIn(newUserId, newUserFullName): void { + try { + if (!link) throw new Error(`We can't show the user page`); + localStorage.setItem("user id", newUserId); + localStorage.setItem("user name", newUserFullName); + } catch (error) { + console.error("We can't log with the new user to the system"); + } +} diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/image/add.png b/02-TypeScript/18-personalProject/Checked/noa-meillet/image/add.png new file mode 100644 index 000000000..3d0b46fd4 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/noa-meillet/image/add.png differ diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/image/favicon-vip.jpg b/02-TypeScript/18-personalProject/Checked/noa-meillet/image/favicon-vip.jpg new file mode 100644 index 000000000..c4565c33f Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/noa-meillet/image/favicon-vip.jpg differ diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/image/favicon.ico b/02-TypeScript/18-personalProject/Checked/noa-meillet/image/favicon.ico new file mode 100644 index 000000000..102c08c07 Binary files /dev/null and b/02-TypeScript/18-personalProject/Checked/noa-meillet/image/favicon.ico differ diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/index.html b/02-TypeScript/18-personalProject/Checked/noa-meillet/index.html new file mode 100644 index 000000000..34fce2b54 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/index.html @@ -0,0 +1,27 @@ + + + + + + + My Club Cards + + + + + + + + + + icon +
                    + logo-img +

                    Member Card Wallet

                    + logo-img +
                    +
                    + + diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/index.ts b/02-TypeScript/18-personalProject/Checked/noa-meillet/index.ts new file mode 100644 index 000000000..5f8064127 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/index.ts @@ -0,0 +1,5 @@ +const _cards = getCardsFromStorage(); +if (_cards) { + clubCardsList.push(..._cards); +} +showClubCards(_cards); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/logIn.scss b/02-TypeScript/18-personalProject/Checked/noa-meillet/logIn.scss new file mode 100644 index 000000000..fdf3310e4 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/logIn.scss @@ -0,0 +1,67 @@ +body{ + background-color:#E9DCBE; + .nav_bar{ + width: 80%; + margin: auto; + display: flex; + flex-direction: row; + justify-content: space-evenly; + + img{ + width:15%; + padding: 5px; + } + + h2{ + color: #343434; + text-align: center; + } + } + + .form{ + height: 330px; + width: 250px; + background-color: #F3F3F3; + border-radius: 10px; + border: 1.5px solid #8E8B82; + padding: 4%; + margin: auto; + margin-top: 2%; + + h3, h4, lable{ + margin: 5% 15% ; + text-align: center; + } + + h1{ + margin: 30% auto; + width: 80%; + text-align: center; + } + + .input{ + margin: 4% 15% ; + } + + #log_in_btn , #sign_in_btn{ + color: #F3F3F3; + background-color: #72b1a0; + margin: 3% 40% ; + } + + #btn_new_user_login{ + color: #F3F3F3; + background-color: #72b1a0; + margin: 5% 40% ; + } + } + + #add_user{ + button, img{ + width: 40px; + border: none; + border-radius: 100%; + margin-left: 36%; + } + } +} diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/logIn.ts b/02-TypeScript/18-personalProject/Checked/noa-meillet/logIn.ts new file mode 100644 index 000000000..717c60adc --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/logIn.ts @@ -0,0 +1,4 @@ +const _users = getUsersFromStorage(); +if (_users) { + usersList.push(..._users); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/logInPage.html b/02-TypeScript/18-personalProject/Checked/noa-meillet/logInPage.html new file mode 100644 index 000000000..c2ca2e910 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/logInPage.html @@ -0,0 +1,50 @@ + + + + + + + My Club Cards- Log In + + + + + + + + + +
                    + logo-img +

                    Member Card Wallet

                    + logo-img +
                    +
                    + +
                    + + diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/model.ts b/02-TypeScript/18-personalProject/Checked/noa-meillet/model.ts new file mode 100644 index 000000000..afcec201b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/model.ts @@ -0,0 +1,185 @@ +//class for details about the condition of club member in each store +class Store { + constructor( + public storeName: string, + public amountOfPoints: number, //-1== no points, 0== points + public bdayDscntDuration: number, //in days + public bithdayDiscount: string //amount of bitrhday discount + ) {} +} + +//data +const castro = new Store("Castro", 0, 45, "20%"); +const renuar = new Store("Renuar", 0, 30, "20%"); +const theNorthFace = new Store("The North Face", 0, 1, "20%"); +const colombia = new Store("Colombia", 0, 1, "20%"); +const zara = new Store("Zara", -1, 7, "20%"); +const hamashbir = new Store("Hamashbir", -1, 30, "20%"); +const dreamCard = new Store( + "Fox, FoxHome, Mango, BillaBong, Laline, Yanga, FootLocker", + 0, + 30, + "20%" +); +const nike = new Store("Nike", 0, 14, "20%"); +const adidas = new Store("Adidas", -1, 14, "20%"); +const zometSefarim = new Store("Zomet Sefarim", -1, 45, "20%"); +const golf = new Store("Golf", 0, 30, "20%"); + +//array of stores +const storeList: Store[] = [ + castro, + renuar, + theNorthFace, + colombia, + zara, + hamashbir, + dreamCard, + nike, + adidas, + zometSefarim, + golf, +]; + +//class for details about each club member that belong to a user +class ClubCards { + constructor( + public userId: string, + public store: Store, + public amountOfPoints: number + ) {} +} + +//data +const noaCastro = new ClubCards("209966001", castro, 23.6); +const noaDreamCard = new ClubCards("209966001", dreamCard, 201.5); +const noatheNorthFace = new ClubCards("209966001", theNorthFace, 70.8); +const sagivDreamCard = new ClubCards("301154268", dreamCard, 0); +const sagivNike = new ClubCards("301154268", nike, 40.2); +const sagivZometSefarim = new ClubCards("301154268", zometSefarim, 0); +const sagivZara = new ClubCards("301154268", zara, 0); +const talCastro = new ClubCards("209966019", castro, 57); +const talAdidas = new ClubCards("209966019", adidas, 0); +const nirColombia = new ClubCards("052406521", colombia, 32.3); +const nirRenuar = new ClubCards("052406521", renuar, 6.17); +const shalevZara = new ClubCards("332640564", zara, 0); +const hilaGolf = new ClubCards("058796554", golf, 41.2); +const hilaDreamCard = new ClubCards("058796554", dreamCard, 94.7); +const hilaHamashbir = new ClubCards("058796554", hamashbir, 0); +const ethanGolf = new ClubCards("400625435", golf, 15.2); +const LaviDreamCard = new ClubCards("235588649", dreamCard, 85.6); +const Lavi = new ClubCards("235588649", hamashbir, 0); + +//array of all club cards for all the users +const clubCardsList: ClubCards[] = [ + noaCastro, + noaDreamCard, + noatheNorthFace, + sagivDreamCard, + sagivNike, + sagivZometSefarim, + sagivZara, + talCastro, + talAdidas, + nirColombia, + nirRenuar, + shalevZara, + hilaGolf, + hilaDreamCard, + hilaHamashbir, + ethanGolf, +]; + +//class for details about each user +class User { + clubCards: ClubCards[] | undefined; + constructor( + public userId: string, + public userPassword: string, + public userFullName: string, + public dateOfBirth: string, + public email: string, + public phoneNumber: string, + public clubCard?: ClubCards[] + ) { + this.clubCard = getClubCardsForUser(this.userId); + } +} + +//data +const noaMeillet = new User( + "209966001", + "noa0512", + "Noa Meillet", + "2001-02-05", + "noam@gmail.com", + "0525643254" +); +const sagivKelly = new User( + "301154268", + "sagiv1908", + "Sagiv Kelly", + "2000-05-19", + "sagivk@gmail.com", + "0529531221" +); +const talVaknin = new User( + "209966019", + "tal0301", + "Tal Vaknin", + "1999-03-01", + "talv@gmail.com", + "0505785965" +); +const nirJacob = new User( + "052406521", + "nir2511", + "Nir Jacob", + "1986-11-25", + "nirj@gmail.com", + "0548579658" +); +const shalevLevi = new User( + "332640564", + "shalev0204", + "shalev Levi", + "1978-11-14", + "shalevl@gmail.com", + "0521225436" +); +const hilaWasker = new User( + "058796554", + "hila2809", + "Hila Wasker", + "2000-09-28", + "hilaw@gmail.com", + "0525381648" +); +const ethanAzriel = new User( + "400625435", + "ethan1405", + "Ethan Azriel", + "1997-04-05", + "ethana@gmail.com", + "0505649254" +); +const jhonSmith = new User( + "745820011", + "jhon0805", + "Jhon Smith", + "2000-05-08", + "jhons@gmail.com", + "058-9405856" +); + +//array for all the users +const usersList: User[] = [ + noaMeillet, + sagivKelly, + talVaknin, + nirJacob, + shalevLevi, + hilaWasker, + ethanAzriel, + jhonSmith, +]; diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/style.scss b/02-TypeScript/18-personalProject/Checked/noa-meillet/style.scss new file mode 100644 index 000000000..6147abac5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/style.scss @@ -0,0 +1,48 @@ +body{ + background-color:#E9DCBE; + color: #343434; + img{ + width: 8%; + margin: 5px 0 0 5px; + } + .nav_bar{ + width: 80%; + margin: auto; + display: flex; + flex-direction: row; + justify-content: space-evenly; + + img{ + width:15%; + padding: 5px; + } + + h2{ + color: #343434; + text-align: center; + } + } + .club_cards{ + width: 70%; + margin: auto; + + h2{ + text-align: center; + } + + &__store{ + margin-top: 4%; + padding: 5px; + background-color: #F3F3F3; + border-radius: 10px; + border: 1.5px solid #8E8B82; + + h3{ + font-style: oblique; + text-align: center; + width: 80%; + margin: 5px auto; + } + } +} +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/noa-meillet/view.ts b/02-TypeScript/18-personalProject/Checked/noa-meillet/view.ts new file mode 100644 index 000000000..3fd9a4b7f --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/noa-meillet/view.ts @@ -0,0 +1,28 @@ +const form: HTMLDivElement | null = document.querySelector(".form"); +const link: HTMLAnchorElement | null = document.querySelector("#link_to_main"); +const clubCards: HTMLDivElement | null = document.querySelector(".club_cards"); + +function getUsersFromStorage(): User[] | undefined { + try { + const usersString = localStorage.getItem("users"); + if (!usersString) throw new Error("Couldn't find users in storage"); + const users = JSON.parse(usersString); + return users; + } catch (error) { + console.error(error); + return undefined; + } +} + +function getCardsFromStorage():ClubCards[] | undefined{ + try { + localStorage.setItem("cards", JSON.stringify(clubCardsList)); + const cardsString = localStorage.getItem("cards"); + if (!cardsString) throw new Error("Couldn't find cards in storage"); + const cards = JSON.parse(cardsString); + return cards; + } catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/control.ts b/02-TypeScript/18-personalProject/Checked/tomer-project-3/control.ts new file mode 100644 index 000000000..ce5bc8fde --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/control.ts @@ -0,0 +1,86 @@ + + +function addToLocalStorage(event:any){ + try { + event.preventDefault(); + const name= event.target.elements.name.value; + const bookName= event.target.elements.bookName.value; + const review= event.target.elements.review.value; + const stars= event.target.elements.stars.value; + event.target.reset(); + reviews.push(new UserReview(name,review,stars, bookName)) + if(!itemsRoot)throw new Error("itemsRoot is null"); + renderReviews(reviews,"itemsRoot") + } catch (error) { + console.error(error) + } +}; + +function renderBooks(books:Book[],renderElementId):void{ + try { + if(!books|| !Array.isArray(books)) + throw new Error(`books is not an array`) + const htmlBook= books + .map((books)=>{ + return` +
                    +
                    +
                    ${books.name}
                    + Book Picture +
                    Summary:${books.summary}
                    +
                    Price:${books.price}
                    +
                    +
                    + +
                    + ` + }) + .join(` `) + const element = document.querySelector(`#${renderElementId}`); + if(!element) throw new Error(`couldent find element `) + element.innerHTML=htmlBook; + } catch (error) { + console.error(error) + } +} + + +function renderReviews(reviews: UserReview[], renderElementId:string):void{ + try { + + if(!reviews|| !Array.isArray(reviews)) + throw new Error('reviews is not an array') + + const html = reviews + .map((review) => { + return ` + +
                    +
                    +
                    User Name: ${review.name}
                    +
                    Name: ${review.bookName}
                    +
                    Star: ${review.stars}
                    +
                    Review: ${review.review}
                    + +
                    +
                    + `; + }) + .join(` `); + + console.log(reviews) + const element = document.querySelector(`#${renderElementId}`); + if(!element) throw new Error(`couldent find element `) + element.innerHTML=html; + } catch (error) { + console.error(error) + + } + +} + +function saveTolocalStorge(){ + localStorage.setItem(`reviews`,JSON.stringify(reviews)) +} + + diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/control.js b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/control.js new file mode 100644 index 000000000..7fee29b33 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/control.js @@ -0,0 +1,58 @@ +function addToLocalStorage(event) { + try { + event.preventDefault(); + var name = event.target.elements.name.value; + var bookName = event.target.elements.bookName.value; + var review = event.target.elements.review.value; + var stars = event.target.elements.stars.value; + event.target.reset(); + reviews.push(new UserReview(name, review, stars, bookName)); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + renderReviews(reviews, "itemsRoot"); + } + catch (error) { + console.error(error); + } +} +; +function renderBooks(books, renderElementId) { + try { + if (!books || !Array.isArray(books)) + throw new Error("books is not an array"); + var htmlBook = books + .map(function (books) { + return "\n
                    \n
                    \n
                    " + books.name + "
                    \n \"Book\n
                    Summary:" + books.summary + "
                    \n
                    Price:" + books.price + "
                    \n
                    \n
                    \n \n
                    \n "; + }) + .join(" "); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("couldent find element "); + element.innerHTML = htmlBook; + } + catch (error) { + console.error(error); + } +} +function renderReviews(reviews, renderElementId) { + try { + if (!reviews || !Array.isArray(reviews)) + throw new Error('reviews is not an array'); + var html = reviews + .map(function (review) { + return "\n \n
                    \n
                    \n
                    User Name: " + review.name + "
                    \n
                    Name: " + review.bookName + "
                    \n
                    Star: " + review.stars + "
                    \n
                    Review: " + review.review + "
                    \n\n
                    \n
                    \n "; + }) + .join(" "); + console.log(reviews); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("couldent find element "); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function saveTolocalStorge() { + localStorage.setItem("reviews", JSON.stringify(reviews)); +} diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/helpers.js b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/helpers.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/index.js b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/index.js new file mode 100644 index 000000000..6e42e8e35 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/index.js @@ -0,0 +1,7 @@ +var _reviews = getItemsFromStorage(); +if (_reviews) { + reviews.push.apply(reviews, _reviews); +} +renderReviews(reviews, "itemsRoot"); +console.log(reviews); +renderBooks(books, "bookContainer"); diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/model.js b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/model.js new file mode 100644 index 000000000..fb57f33a2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/model.js @@ -0,0 +1,25 @@ +var UserReview = /** @class */ (function () { + function UserReview( + // public books:Book, + name, review, stars, bookName) { + this.name = name; + this.review = review; + this.stars = stars; + this.bookName = bookName; + } + return UserReview; +}()); +var Book = /** @class */ (function () { + function Book(name, url, price, summary) { + this.name = name; + this.url = url; + this.price = price; + this.summary = summary; + } + return Book; +}()); +var reviews = []; +var books = []; +books.push(new Book("MASTER & APPRENTICE", "https://images.penguinrandomhouse.com/cover/9780525619376", "100", "about star wars")); +books.push(new Book("THE HIGH REPUBLIC: THE FALLEN STAR", "https://cdn.waterstones.com/bookjackets/large/9781/5291/9781529150162.jpg", "100", "about star wars")); +books.push(new Book("ATTACK OF THE CLONES", "https://images.penguinrandomhouse.com/cover/9780345428820", "100", "about star wars")); diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/second.js b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/second.js new file mode 100644 index 000000000..e5df3eedb --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/second.js @@ -0,0 +1,6 @@ +var _reviews = getItemsFromStorage(); +if (_reviews) { + reviews.push.apply(reviews, _reviews); +} +renderReviews(reviews, "itemsRoot"); +// console.log(reviews) diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/style.css b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/style.css new file mode 100644 index 000000000..5df8d8870 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/style.css @@ -0,0 +1,226 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans); +body { + background-color: #e887bd; + font-family: "Open Sans", sans-serif; +} + +.nutBar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #333; + color: #fff; +} +.nutBar a:hover { + background-color: white; +} +.nutBar a:visited { + text-decoration: none; + color: orange; +} + +.userIcon { + padding-left: 10px; +} + +.infoContact { + padding-right: 10px; +} + +.search { + width: 100%; + position: relative; + display: flex; +} + +.searchTerm { + width: 100%; + border: 3px solid #00B4CC; + border-right: none; + padding: 5px; + height: 20px; + border-radius: 5px 0 0 5px; + outline: none; + color: #9DBFAF; +} + +.searchTerm:focus { + color: #00B4CC; +} + +.searchButton { + width: 40px; + height: 36px; + border: 1px solid #00B4CC; + background: #00B4CC; + text-align: center; + color: #fff; + border-radius: 0 5px 5px 0; + cursor: pointer; + font-size: 20px; +} + +/*Resize the wrap to see the search bar change!*/ +.wrap { + width: 30%; + position: relative; + left: 50%; + transform: translate(-50%, -50%); + margin-top: 36px; + padding: 10px; + text-align: center; +} + +.bookContainer { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin-top: 10px; +} + +#usersReviews { + border-radius: 2px solid black; +} + +.bookFrame { + width: 350px; + height: 450px; + border: 3px solid #333; + margin: 10px; + text-align: center; +} + +.bookName { + font-size: 20px; + margin-top: 10px; +} + +.bookPicture { + width: 250px; + height: 300px; + margin-top: 10px; +} + +#itemsRoot { + display: flex; + flex-direction: column; + align-items: center; + width: 250px; + gap: 30px; + height: 100%; + margin: 0 auto; + padding: 20px; + background-color: #24bed6; + border-radius: 10px; +} +#itemsRoot .item { + display: flex; + align-items: center; + width: 100%; + padding: 20px; + border-bottom: 1px solid black; + background-color: #f98a8a; + border-radius: 10px; + box-shadow: 0 0 10px #ccc; +} +#itemsRoot .item .item-details { + display: flex; + flex-direction: column; +} +#itemsRoot .item .item-details .item-title { + font-weight: bold; + margin-bottom: 10px; +} +#itemsRoot .item .item-details .item-description { + font-size: 14px; + color: #300404; +} + +.review-form { + width: 500px; + margin: 0 auto; + text-align: center; +} +.review-form .form-group { + margin: 20px 0; +} +.review-form .form-group label { + display: block; + font-weight: bold; + margin-bottom: 10px; +} +.review-form .form-group input, +.review-form .form-group select, +.review-form .form-group textarea { + width: 100%; + padding: 10px; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; + box-sizing: border-box; +} +.review-form button[type=submit] { + width: 150px; + padding: 10px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; +} + +.button-64 { + margin-left: 44%; + align-items: center; + background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); + border: 0; + border-radius: 8px; + box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; + box-sizing: border-box; + color: #FFFFFF; + display: flex; + font-family: Phantomsans, sans-serif; + font-size: 20px; + justify-content: center; + line-height: 1em; + max-width: 100%; + min-width: 140px; + padding: 3px; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + cursor: pointer; +} + +.button-64:active, +.button-64:hover { + outline: 0; +} + +.button-64 span { + background-color: #05062d; + padding: 16px 24px; + border-radius: 6px; + width: 100%; + height: 100%; + transition: 300ms; +} + +.button-64:hover span { + background: none; +} + +@media (min-width: 768px) { + .button-64 { + font-size: 24px; + min-width: 196px; + } +} +.addReview { + padding-top: 1rem; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/view.js b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/view.js new file mode 100644 index 000000000..774804575 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/dist/view.js @@ -0,0 +1,14 @@ +var itemsRoot = document.querySelector('#itemsRoot'); +function getItemsFromStorage() { + try { + var reviewsString = localStorage.getItem("reviews"); + if (!reviewsString) + throw new Error("cant find"); + var reviews = JSON.parse(reviewsString); + return reviews; + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/helpers.ts b/02-TypeScript/18-personalProject/Checked/tomer-project-3/helpers.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/index.html b/02-TypeScript/18-personalProject/Checked/tomer-project-3/index.html new file mode 100644 index 000000000..b0caf851b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/index.html @@ -0,0 +1,41 @@ + + + + + + + Document + + + + + + + + + +
                    + User Icon +
                    Book Review Site
                    + Information & Contact +
                    +
                    +
                    + + +
                    +
                    +
                    + +
                    +
                    + +
                    +
                    + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/index.ts b/02-TypeScript/18-personalProject/Checked/tomer-project-3/index.ts new file mode 100644 index 000000000..dc8df6bd4 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/index.ts @@ -0,0 +1,11 @@ +const _reviews= getItemsFromStorage(); + +if(_reviews){ + reviews.push(..._reviews); + +} +renderReviews(reviews,"itemsRoot"); +console.log(reviews) + + +renderBooks(books,"bookContainer") \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/model.ts b/02-TypeScript/18-personalProject/Checked/tomer-project-3/model.ts new file mode 100644 index 000000000..54104e08b --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/model.ts @@ -0,0 +1,30 @@ +class UserReview{ + constructor( + // public books:Book, + public name:string, + public review:string, + public stars:string, + public bookName: string + ){ + + } +} + +class Book{ + constructor( + public name:string, + public url:string, + public price:string, + public summary:string, + + ){ + + } +} +const reviews: UserReview[]=[]; +const books: Book[]=[] + +books.push(new Book(`MASTER & APPRENTICE`,`https://images.penguinrandomhouse.com/cover/9780525619376`,`100`,`about star wars`)) +books.push(new Book(`THE HIGH REPUBLIC: THE FALLEN STAR`,`https://cdn.waterstones.com/bookjackets/large/9781/5291/9781529150162.jpg`,`100`,`about star wars`)) +books.push(new Book(`ATTACK OF THE CLONES`,`https://images.penguinrandomhouse.com/cover/9780345428820`,`100`,`about star wars`)) + diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/second.html b/02-TypeScript/18-personalProject/Checked/tomer-project-3/second.html new file mode 100644 index 000000000..cc03f75b6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/second.html @@ -0,0 +1,56 @@ + + + + + + + Document + + + + + + + + +
                    +
                    +
                    + + +
                    +
                    + + +
                    +
                    + + +
                    +
                    + + +
                    +
                    +
                    + +
                    +
                    +
                    +
                    + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/second.ts b/02-TypeScript/18-personalProject/Checked/tomer-project-3/second.ts new file mode 100644 index 000000000..05e8c7d67 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/second.ts @@ -0,0 +1,8 @@ +const _reviews= getItemsFromStorage(); + +if(_reviews){ + reviews.push(..._reviews); + +} +renderReviews(reviews,"itemsRoot"); +// console.log(reviews) diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/style.scss b/02-TypeScript/18-personalProject/Checked/tomer-project-3/style.scss new file mode 100644 index 000000000..1198d72d7 --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/style.scss @@ -0,0 +1,242 @@ +body{ + background-color: #e887bd; + font-family: 'Open Sans', sans-serif; + +} +.nutBar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #333; + color: #fff; + a:hover{ + background-color: rgb(255, 255, 255); + } + a:visited { + text-decoration: none; + color: orange; + } + } + + + .userIcon { + padding-left: 10px; + } + + + .infoContact { + padding-right: 10px; + } + @import url(https://fonts.googleapis.com/css?family=Open+Sans); + .search { + width: 100%; + position: relative; + display: flex; + } + + .searchTerm { + width: 100%; + border: 3px solid #00B4CC; + border-right: none; + padding: 5px; + height: 20px; + border-radius: 5px 0 0 5px; + outline: none; + color: #9DBFAF; + } + + .searchTerm:focus{ + color: #00B4CC; + } + + .searchButton { + width: 40px; + height: 36px; + border: 1px solid #00B4CC; + background: #00B4CC; + text-align: center; + color: #fff; + border-radius: 0 5px 5px 0; + cursor: pointer; + font-size: 20px; + } + + /*Resize the wrap to see the search bar change!*/ + .wrap{ + width: 30%; + position: relative; + + left: 50%; + transform: translate(-50%, -50%); + margin-top: 36px; + padding: 10px; + text-align: center; + } + + .bookContainer { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin-top: 10px; + } + + #usersReviews{ + border-radius: 2px solid black; + } + + .bookFrame { + width: 350px; + height: 450px; + border: 3px solid #333; + margin: 10px; + text-align: center; + } + .bookName { + font-size: 20px; + margin-top: 10px; + } + + .bookPicture { + width: 250px; + height: 300px; + margin-top: 10px; + } + +#itemsRoot{ + display: flex; + flex-direction: column; + align-items: center; + width: 250px; + gap: 30px; + height: 100%; + margin: 0 auto; + padding: 20px; + background-color: #24bed6; + border-radius: 10px; + + .item { + display: flex; + align-items: center; + width: 100%; + padding: 20px; + border-bottom: 1px solid rgb(0, 0, 0); + background-color: rgb(249, 138, 138); + border-radius: 10px; + box-shadow: 0 0 10px #ccc; + + + .item-details { + display: flex; + flex-direction: column; + + .item-title { + font-weight: bold; + margin-bottom: 10px; + } + + .item-description { + font-size: 14px; + + color: rgb(48, 4, 4); + } + } + } + } + + +.review-form { + width: 500px; + margin: 0 auto; + text-align: center; + + .form-group { + margin: 20px 0; + + label { + display: block; + font-weight: bold; + margin-bottom: 10px; + } + + input, + select, + textarea { + width: 100%; + padding: 10px; + font-size: 16px; + border-radius: 5px; + border: 1px solid #ccc; + box-sizing: border-box; + } + } + + button[type="submit"] { + width: 150px; + padding: 10px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + } + } + + + .button-64 { + + margin-left: 44%; + align-items: center; + background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); + border: 0; + border-radius: 8px; + box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; + box-sizing: border-box; + color: #FFFFFF; + display: flex; + font-family: Phantomsans, sans-serif; + font-size: 20px; + justify-content: center; + line-height: 1em; + max-width: 100%; + min-width: 140px; + padding: 3px; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + cursor: pointer; + } + + .button-64:active, + .button-64:hover { + outline: 0; + } + + .button-64 span { + background-color: rgb(5, 6, 45); + padding: 16px 24px; + border-radius: 6px; + width: 100%; + height: 100%; + transition: 300ms; + } + + .button-64:hover span { + background: none; + } + + @media (min-width: 768px) { + .button-64 { + font-size: 24px; + min-width: 196px; + } + } + + .addReview{ + padding-top: 1rem; + } + diff --git a/02-TypeScript/18-personalProject/Checked/tomer-project-3/view.ts b/02-TypeScript/18-personalProject/Checked/tomer-project-3/view.ts new file mode 100644 index 000000000..85df0a84c --- /dev/null +++ b/02-TypeScript/18-personalProject/Checked/tomer-project-3/view.ts @@ -0,0 +1,15 @@ +const itemsRoot = document.querySelector('#itemsRoot'); + +function getItemsFromStorage(): UserReview[]|undefined{ + try { + const reviewsString= localStorage.getItem("reviews"); + if(!reviewsString)throw new Error(`cant find`); + + const reviews= JSON.parse(reviewsString); + return reviews; + + } catch (error) { + console.error(error) + return undefined; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/control.ts b/02-TypeScript/18-personalProject/CouldntRun/Raanan/control.ts new file mode 100644 index 000000000..9e3a9950b --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/control.ts @@ -0,0 +1,62 @@ +// control.ts + + +// Function to adjust the ranking of a movie by its ID +// If the adjustment fails, the error message is logged to the console + function adjustRanking(movieId: string) { + try { + MovieList.adjustRanking(movieId, 1); + updateMovieListDisplay(); + } catch (error) { + console.error(error); + } +} + +// Function to sort the movie list by either ranking or name +// If the sorting fails, the error message is logged to the console + function sortMovies(sortBy: "ranking" | "name") { + try { + MovieList.sortMovies(sortBy); + updateMovieListDisplay(); + } catch (error) { + console.error(error); + } +} + +// Function to update the display of the movie list +// If the update fails, the error message is logged to the console +function updateMovieListDisplay() { + try { + // Selecting the movie list element from the DOM + const movieListElement = document.querySelector("#movie-list"); + // Checking if the movie list element was found in the DOM + if (!movieListElement) { + throw new Error("Unable to find the movie list element in the DOM"); + } + // Clearing the inner HTML of the movie list element + movieListElement.innerHTML = ""; + // Iterating over each movie in the movie list + for (const movie of MovieList.movies) { + // Creating a movie element for each movie + const movieElement = createMovieElement(movie); + // Appending the movie element to the movie list element only if it's not null + if (movieElement) { + movieListElement.appendChild(movieElement); + } + } + } catch (error) { + console.error(error); + } + } + +// reviews.html---------------------------------------------------------------- + +// Define the functions that will handle the like and unlike buttons + function likeReview(id: number) { + console.log(`Like review with ID ${id}`); +} + + function unlikeReview(id: number) { + console.log(`Unlike review with ID ${id}`); +} + diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/control.js b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/control.js new file mode 100644 index 000000000..7a84438fc --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/control.js @@ -0,0 +1,58 @@ +// control.ts +// Function to adjust the ranking of a movie by its ID +// If the adjustment fails, the error message is logged to the console +function adjustRanking(movieId) { + try { + MovieList.adjustRanking(movieId, 1); + updateMovieListDisplay(); + } + catch (error) { + console.error(error); + } +} +// Function to sort the movie list by either ranking or name +// If the sorting fails, the error message is logged to the console +function sortMovies(sortBy) { + try { + MovieList.sortMovies(sortBy); + updateMovieListDisplay(); + } + catch (error) { + console.error(error); + } +} +// Function to update the display of the movie list +// If the update fails, the error message is logged to the console +function updateMovieListDisplay() { + try { + // Selecting the movie list element from the DOM + var movieListElement = document.querySelector("#movie-list"); + // Checking if the movie list element was found in the DOM + if (!movieListElement) { + throw new Error("Unable to find the movie list element in the DOM"); + } + // Clearing the inner HTML of the movie list element + movieListElement.innerHTML = ""; + // Iterating over each movie in the movie list + for (var _i = 0, _a = MovieList.movies; _i < _a.length; _i++) { + var movie = _a[_i]; + // Creating a movie element for each movie + var movieElement = createMovieElement(movie); + // Appending the movie element to the movie list element only if it's not null + if (movieElement) { + movieListElement.appendChild(movieElement); + } + } + } + catch (error) { + console.error(error); + } +} +// reviews.html---------------------------------------------------------------- +// Define the functions that will handle the like and unlike buttons +function likeReview(id) { + console.log("Like review with ID " + id); +} +function unlikeReview(id) { + console.log("Unlike review with ID " + id); +} diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/helpers.js b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/helpers.js new file mode 100644 index 000000000..095427c2d --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/helpers.js @@ -0,0 +1 @@ +//helpers.ts diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/index.js b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/index.js new file mode 100644 index 000000000..514beb900 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/index.js @@ -0,0 +1,42 @@ +// index.ts +// index.ts +// declare movieList variable of type MovieList +var movieList; +// wait for the window to load, then execute the code inside +window.addEventListener("load", function () { + try { + // create a new instance of MovieList + movieList = new MovieList(); + // initialize the movie list with pre-defined movies + MovieList.movies = [ + new Movie("1", "The Shawshank Redemption", "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", 9.2, "shawshank.jpg"), + new Movie("2", "The Godfather", "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", 9.2, "godfather.jpg"), + new Movie("3", "The Godfather: Part II", "The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.", 9.0, "godfather2.jpg"), + new Movie("4", "The Dark Knight", "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.", 9.0, "darkknight.jpg"), + new Movie("5", "12 Angry Men", "A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.", 8.9, "12angrymen.jpg"), + ]; + // get the movie container element + var movieContainer_1 = document.getElementById('movie-container'); + // check if the movie container element exists + if (movieContainer_1) { + // loop through each movie and render the movie element in the movie container + MovieList.movies.forEach(function (movie) { + try { + // create a movie element using the createMovieElement method from the view module + var movieElement = createMovieElement(movie); + // check if the movie element is not null + if (movieElement) { + // append the movie element to the movie container + movieContainer_1.appendChild(movieElement); + } + } + catch (error) { + console.error(error); + } + }); + } + } + catch (error) { + console.error(error); + } +}); diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/model.js b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/model.js new file mode 100644 index 000000000..677c9c9e2 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/model.js @@ -0,0 +1,87 @@ +// Define an array of review objects +var reviews = [ + { + title: "The Matrix", + description: "An action-packed sci-fi classic!", + username: "John Doe", + id: 1 + }, + { + title: "Inception", + description: "A mind-bending thriller!", + username: "Jane Doe", + id: 2 + }, +]; +var MovieList = /** @class */ (function () { + function MovieList() { + } + // Adjust the ranking of a movie + MovieList.adjustRanking = function (movieId, amount) { + try { + var movieIndex = this.movies.findIndex(function (movie) { return movie.id === movieId; }); + if (movieIndex === -1) { + throw new Error("Movie with id " + movieId + " not found"); + } + this.movies[movieIndex].ranking += amount; + } + catch (error) { + console.error(error); + } + }; + // Sort the movies in the list by either ranking or name + MovieList.sortMovies = function (sortBy) { + if (sortBy === void 0) { sortBy = "ranking"; } + try { + if (sortBy === "ranking") { + this.movies.sort(function (a, b) { return b.ranking - a.ranking; }); + } + else if (sortBy === "name") { + this.movies.sort(function (a, b) { return (a.name > b.name ? 1 : -1); }); + } + } + catch (error) { + console.error(error); + } + }; + // Add a movie to the list + MovieList.addMovie = function (movie) { + try { + this.movies.push(movie); + } + catch (error) { + console.error(error); + } + }; + // Get the current list of movies + MovieList.getMovies = function () { + try { + return this.movies; + } + catch (error) { + console.error(error); + return []; + } + }; + MovieList.movies = []; + return MovieList; +}()); +var Movie = /** @class */ (function () { + /** + + Constructor for the Movie class + @param id Unique identifier for the movie + @param name Title of the movie + @param description Description of the movie + @param ranking Ranking of the movie + @param poster URL of the movie poster + */ + function Movie(id, name, description, ranking, poster) { + this.id = id; + this.name = name; + this.description = description; + this.ranking = ranking; + this.poster = poster; + } + return Movie; +}()); diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/style.css b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/style.css new file mode 100644 index 000000000..9d59ae8b8 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/style.css @@ -0,0 +1,101 @@ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; +} +header h1 { + font-size: 24px; +} +header nav a { + padding: 10px; + text-decoration: none; + color: #333; + font-weight: bold; +} +header nav a:hover { + color: #000; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} +main .movie-list { + display: flex; + flex-wrap: wrap; + width: fit-content; +} +main .movie-list .movie { + width: 300px; + margin: 20px; + text-align: center; +} +main .movie-list .movie img { + width: 100%; + height: auto; +} +main .movie-list .movie h3 { + font-size: 18px; + margin-top: 10px; +} +main .movie-list .movie p { + font-size: 14px; + margin: 10px 0; +} +main button { + padding: 10px 20px; + margin-top: 20px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + font-weight: bold; +} +main button:hover { + background-color: #000; +} + +.review-list { + display: flex; + flex-wrap: wrap; +} +.review-list .review { + width: 300px; + margin: 20px; + text-align: center; + background-color: #eee; + padding: 20px; + border-radius: 5px; +} +.review-list .review h3 { + font-size: 18px; + margin-top: 10px; +} +.review-list .review p { + font-size: 14px; + margin: 10px 0; +} +.review-list .review button { + padding: 10px 20px; + margin: 10px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + font-weight: bold; +} +.review-list .review button:hover { + background-color: #000; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + background-color: #333; + color: #fff; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/view.js b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/view.js new file mode 100644 index 000000000..19cfc6a10 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/dist/view.js @@ -0,0 +1,137 @@ +// view.ts +// Displays the movie list on the page by updating the innerHTML of the `movieListElement` and adding click event listeners to the ranking buttons in the `rankingBar`. +function displayMovieList(MovieList, rankingBar, movieListElement) { + try { + // Clears the current content of the `movieListElement`. + movieListElement.innerHTML = ""; + // Adds the movie elements to the `movieListElement`. + for (var _i = 0, MovieList_1 = MovieList; _i < MovieList_1.length; _i++) { + var movie = MovieList_1[_i]; + var movieElement = createMovieElement(movie); + movieListElement.appendChild(movieElement); + } + // Adds click event listeners to the ranking buttons in the `rankingBar`. + var rankingElements = rankingBar.querySelectorAll("button"); + for (var _a = 0, rankingElements_1 = rankingElements; _a < rankingElements_1.length; _a++) { + var rankingElement = rankingElements_1[_a]; + rankingElement.addEventListener("click", handleRankingButtonClick(MovieList, rankingBar, movieListElement)); + } + } + catch (error) { + console.error("Error displaying movie list:", error); + } +} +// Creates a HTML element for a single movie +function createMovieElement(movie) { + try { + // Create the main movie container element + var movieElement = document.createElement("div"); + movieElement.classList.add("movie"); + // Create the poster element and set its attributes + var posterElement = document.createElement("img"); + posterElement.src = movie.poster; + posterElement.alt = "Poster for " + movie.name; + movieElement.appendChild(posterElement); + // Create the title element and set its inner text + var titleElement = document.createElement("h3"); + titleElement.innerText = movie.name; + movieElement.appendChild(titleElement); + // Create the description element and set its inner text + var descriptionElement = document.createElement("p"); + descriptionElement.innerText = movie.description; + movieElement.appendChild(descriptionElement); + // Create the ranking element and set its inner text + var rankingElement = document.createElement("p"); + rankingElement.innerText = "Ranking: " + movie.ranking; + movieElement.appendChild(rankingElement); + return movieElement; + } + catch (error) { + console.error("Error creating movie element:", error); + return null; + } +} +// Creates a HTML element that represents the entire movie list +function createMovieListElement(movies) { + try { + // Create a div element to represent the movie list + var movieListElement = document.createElement("div"); + movieListElement.id = "movie-list"; + // Loop through each movie in the list + for (var _i = 0, movies_1 = movies; _i < movies_1.length; _i++) { + var movie = movies_1[_i]; + // Create a HTML element for each movie + var movieElement = createMovieElement(movie); + if (!movieElement) { + return null; + } + // Append the movie element to the movie list element + movieListElement.appendChild(movieElement); + } + // Return the movie list element + return movieListElement; + } + catch (error) { + // Log an error message if something goes wrong + console.error("Error creating movie list element:", error); + return null; + } +} +// Handles the ranking button click event and updates the movie ranking +function handleRankingButtonClick(movieList, rankingBar, movieListElement) { + return function (event) { + try { + // Get the target element that was clicked + var target = event.target; + // Get the movie id from the target element's data-movie-id attribute + var movieIdString = target.getAttribute("data-movie-id"); + // Validate that movie id string is a valid number + if (!movieIdString || isNaN(Number(movieIdString))) { + console.error("Error: Invalid movie id."); + return; + } + // Convert the movie id string to a number + var movieId_1 = Number(movieIdString); + // Prompt the user to enter a new ranking + var newRankingString = prompt("Enter new ranking:"); + // Validate that the new ranking string is a valid number + if (!newRankingString || isNaN(Number(newRankingString))) { + alert("Invalid ranking value. Please enter a number."); + return; + } + // Convert the new ranking string to a number + var newRanking = Number(newRankingString); + // Find the movie in the list + var movie = movieList.find(function (movie) { return movie.id.toString() === movieId_1.toString(); }); + if (!movie) { + console.error("Error: Could not find movie in list."); + return; + } + // Update the movie's ranking + movie.ranking = newRanking; + // Redisplay the movie list + displayMovieList(movieList, rankingBar, movieListElement); + } + catch (error) { + console.error("Error handling ranking button click:", error); + } + }; +} +// reviews.ts---------------------------------------------------------------- +// Import the array of review objects from the Model +// Get a reference to the element that will display the reviews +var reviewList = document.querySelector(".review-list"); +// Loop through the array of reviews and generate the HTML for each one +reviews.forEach(function (review) { + var reviewElement = document.createElement("div"); + reviewElement.classList.add("review"); + var titleElement = document.createElement("h3"); + titleElement.textContent = review.title; + reviewElement.appendChild(titleElement); + var descriptionElement = document.createElement("p"); + descriptionElement.textContent = review.description; + reviewElement.appendChild(descriptionElement); + var usernameElement = document.createElement("p"); + usernameElement.textContent = review.username; + reviewElement.appendChild(usernameElement); +}); diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/helpers.ts b/02-TypeScript/18-personalProject/CouldntRun/Raanan/helpers.ts new file mode 100644 index 000000000..444c9edf2 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/helpers.ts @@ -0,0 +1 @@ +//helpers.ts \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/index.html b/02-TypeScript/18-personalProject/CouldntRun/Raanan/index.html new file mode 100644 index 000000000..67efd6c5c --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + Movie Review Website + + + +
                    +

                    Movie Review Website

                    + +
                    + +
                    +

                    Movie List

                    + +
                    + +
                    + +
                    +
                    +
                    + +
                    +

                    © 2023 Movie Review Website

                    +
                    + + diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/index.ts b/02-TypeScript/18-personalProject/CouldntRun/Raanan/index.ts new file mode 100644 index 000000000..d767c1d8c --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/index.ts @@ -0,0 +1,46 @@ +// index.ts + +// index.ts + + +// declare movieList variable of type MovieList +let movieList: MovieList; + +// wait for the window to load, then execute the code inside +window.addEventListener("load", () => { + try { + // create a new instance of MovieList + movieList = new MovieList(); + + // initialize the movie list with pre-defined movies + MovieList.movies = [ + new Movie("1", "The Shawshank Redemption", "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", 9.2, "shawshank.jpg"), + new Movie("2", "The Godfather", "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", 9.2, "godfather.jpg"), + new Movie("3", "The Godfather: Part II", "The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.", 9.0, "godfather2.jpg"), + new Movie("4", "The Dark Knight", "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.", 9.0, "darkknight.jpg"), + new Movie("5", "12 Angry Men", "A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.", 8.9, "12angrymen.jpg"), + ]; + + // get the movie container element + const movieContainer = document.getElementById('movie-container'); + // check if the movie container element exists + if (movieContainer) { + // loop through each movie and render the movie element in the movie container + MovieList.movies.forEach((movie) => { + try { + // create a movie element using the createMovieElement method from the view module + const movieElement = createMovieElement(movie); + // check if the movie element is not null + if (movieElement) { + // append the movie element to the movie container + movieContainer.appendChild(movieElement); + } + } catch (error) { + console.error(error); + } + }); + } + } catch (error) { + console.error(error); + } +}); diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/model.ts b/02-TypeScript/18-personalProject/CouldntRun/Raanan/model.ts new file mode 100644 index 000000000..80a16bae4 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/model.ts @@ -0,0 +1,108 @@ +// model.ts +interface Review { + title: string; + description: string; + username: string; + id: number; +} + +// Define an array of review objects +const reviews: Review[] = [ + { + title: "The Matrix", + description: "An action-packed sci-fi classic!", + username: "John Doe", + id: 1, + }, + { + title: "Inception", + description: "A mind-bending thriller!", + username: "Jane Doe", + id: 2, + }, +]; + +class MovieList { + public static movies: Movie[] = []; + + // Adjust the ranking of a movie + static adjustRanking(movieId: string, amount: number) { + try { + const movieIndex = this.movies.findIndex((movie) => movie.id === movieId); + if (movieIndex === -1) { + throw new Error(`Movie with id ${movieId} not found`); + } + this.movies[movieIndex].ranking += amount; + } catch (error) { + console.error(error); + } + } + + // Sort the movies in the list by either ranking or name + static sortMovies(sortBy: "ranking" | "name" = "ranking") { + try { + if (sortBy === "ranking") { + this.movies.sort((a, b) => b.ranking - a.ranking); + } else if (sortBy === "name") { + this.movies.sort((a, b) => (a.name > b.name ? 1 : -1)); + } + } catch (error) { + console.error(error); + } + } + + // Add a movie to the list + static addMovie(movie: Movie) { + try { + this.movies.push(movie); + } catch (error) { + console.error(error); + } + } + + // Get the current list of movies + static getMovies(): Movie[] { + try { + return this.movies; + } catch (error) { + console.error(error); + return []; + } + } +} + +class Movie { + // Unique identifier for the movie + id: string; + // Title of the movie + name: string; + // Description of the movie + description: string; + // Ranking of the movie + ranking: number; + // URL of the movie poster + poster: string; + + /** + + Constructor for the Movie class + @param id Unique identifier for the movie + @param name Title of the movie + @param description Description of the movie + @param ranking Ranking of the movie + @param poster URL of the movie poster + */ + constructor( + id: string, + name: string, + description: string, + ranking: number, + poster: string + ) { + this.id = id; + this.name = name; + this.description = description; + this.ranking = ranking; + this.poster = poster; + } +} diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/reviews.html b/02-TypeScript/18-personalProject/CouldntRun/Raanan/reviews.html new file mode 100644 index 000000000..e72727f8a --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/reviews.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + Movie Review Website + + + +
                    +

                    Movie Review Website

                    + +
                    + +
                    +

                    Movie Reviews

                    +
                    + +
                    +

                    Movie Title

                    +

                    Review description

                    +

                    Username

                    + + +

                    +

                    +
                    +
                    +
                    +
                    +

                    © 2023 Movie Review Website

                    +
                    + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/style.scss b/02-TypeScript/18-personalProject/CouldntRun/Raanan/style.scss new file mode 100644 index 000000000..c075d4d71 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/style.scss @@ -0,0 +1,118 @@ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + + h1 { + font-size: 24px; + } + + nav { + a { + padding: 10px; + text-decoration: none; + color: #333; + font-weight: bold; + + &:hover { + color: #000; + } + } + } +} + +main { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + + .movie-list { + display: flex; + flex-wrap: wrap; + width:fit-content; + + .movie { + width: 300px; + margin: 20px; + text-align: center; + + img { + width: 100%; + height: auto; + } + + h3 { + font-size: 18px; + margin-top: 10px; + } + + p { + font-size: 14px; + margin: 10px 0; + } + } + } + + button { + padding: 10px 20px; + margin-top: 20px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + font-weight: bold; + + &:hover { + background-color: #000; + } + } +} + +.review-list { + display: flex; + flex-wrap: wrap; + + .review { + width: 300px; + margin: 20px; + text-align: center; + background-color: #eee; + padding: 20px; + border-radius: 5px; + + h3 { + font-size: 18px; + margin-top: 10px; + } + + p { + font-size: 14px; + margin: 10px 0; + } + + button { + padding: 10px 20px; + margin: 10px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + font-weight: bold; + + &:hover { + background-color: #000; + } + } + } +} + +footer { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + background-color: #333; + color: #fff; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/Raanan/view.ts b/02-TypeScript/18-personalProject/CouldntRun/Raanan/view.ts new file mode 100644 index 000000000..066bcd8a2 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/Raanan/view.ts @@ -0,0 +1,171 @@ +// view.ts + +// Displays the movie list on the page by updating the innerHTML of the `movieListElement` and adding click event listeners to the ranking buttons in the `rankingBar`. +function displayMovieList( + MovieList: Movie[], + rankingBar: HTMLElement, + movieListElement: HTMLElement +): void { + try { + // Clears the current content of the `movieListElement`. + movieListElement.innerHTML = ""; + + // Adds the movie elements to the `movieListElement`. + for (const movie of MovieList) { + const movieElement: any = createMovieElement(movie); + movieListElement.appendChild(movieElement); + } + + // Adds click event listeners to the ranking buttons in the `rankingBar`. + const rankingElements = rankingBar.querySelectorAll("button"); + for (const rankingElement of rankingElements) { + rankingElement.addEventListener( + "click", + handleRankingButtonClick(MovieList, rankingBar, movieListElement) + ); + } + } catch (error) { + console.error("Error displaying movie list:", error); + } +} + +// Creates a HTML element for a single movie +function createMovieElement(movie: Movie): HTMLElement | null { + try { + // Create the main movie container element + const movieElement = document.createElement("div"); + movieElement.classList.add("movie"); + + // Create the poster element and set its attributes + const posterElement = document.createElement("img"); + posterElement.src = movie.poster; + posterElement.alt = `Poster for ${movie.name}`; + movieElement.appendChild(posterElement); + + // Create the title element and set its inner text + const titleElement = document.createElement("h3"); + titleElement.innerText = movie.name; + movieElement.appendChild(titleElement); + + // Create the description element and set its inner text + const descriptionElement = document.createElement("p"); + descriptionElement.innerText = movie.description; + movieElement.appendChild(descriptionElement); + + // Create the ranking element and set its inner text + const rankingElement = document.createElement("p"); + rankingElement.innerText = `Ranking: ${movie.ranking}`; + movieElement.appendChild(rankingElement); + + return movieElement; + } catch (error) { + console.error("Error creating movie element:", error); + return null; + } +} + +// Creates a HTML element that represents the entire movie list +function createMovieListElement(movies: Movie[]): HTMLElement | null { + try { + // Create a div element to represent the movie list + const movieListElement = document.createElement("div"); + movieListElement.id = "movie-list"; + + // Loop through each movie in the list + for (const movie of movies) { + // Create a HTML element for each movie + const movieElement = createMovieElement(movie); + if (!movieElement) { + return null; + } + + // Append the movie element to the movie list element + movieListElement.appendChild(movieElement); + } + + // Return the movie list element + return movieListElement; + } catch (error) { + // Log an error message if something goes wrong + console.error("Error creating movie list element:", error); + return null; + } +} + +// Handles the ranking button click event and updates the movie ranking +function handleRankingButtonClick( + movieList: Movie[], + rankingBar: HTMLElement, + movieListElement: HTMLElement +): (event: Event) => void { + return function (event: Event) { + try { + // Get the target element that was clicked + const target = event.target as HTMLElement; + // Get the movie id from the target element's data-movie-id attribute + const movieIdString = target.getAttribute("data-movie-id"); + + // Validate that movie id string is a valid number + if (!movieIdString || isNaN(Number(movieIdString))) { + console.error("Error: Invalid movie id."); + return; + } + + // Convert the movie id string to a number + const movieId = Number(movieIdString); + + // Prompt the user to enter a new ranking + const newRankingString = prompt("Enter new ranking:"); + + // Validate that the new ranking string is a valid number + if (!newRankingString || isNaN(Number(newRankingString))) { + alert("Invalid ranking value. Please enter a number."); + return; + } + + // Convert the new ranking string to a number + const newRanking = Number(newRankingString); + + // Find the movie in the list + const movie = movieList.find( + (movie) => movie.id.toString() === movieId.toString() + ); + if (!movie) { + console.error("Error: Could not find movie in list."); + return; + } + // Update the movie's ranking + movie.ranking = newRanking; + + // Redisplay the movie list + displayMovieList(movieList, rankingBar, movieListElement); + } catch (error) { + console.error("Error handling ranking button click:", error); + } + }; +} + +// reviews.ts---------------------------------------------------------------- + +// Import the array of review objects from the Model + +// Get a reference to the element that will display the reviews +const reviewList = document.querySelector(".review-list") as HTMLElement; + +// Loop through the array of reviews and generate the HTML for each one +reviews.forEach((review) => { + const reviewElement = document.createElement("div"); + reviewElement.classList.add("review"); + + const titleElement = document.createElement("h3"); + titleElement.textContent = review.title; + reviewElement.appendChild(titleElement); + + const descriptionElement = document.createElement("p"); + descriptionElement.textContent = review.description; + reviewElement.appendChild(descriptionElement); + + const usernameElement = document.createElement("p"); + usernameElement.textContent = review.username; + reviewElement.appendChild(usernameElement); +}); diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/Logo.PNG b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/Logo.PNG new file mode 100644 index 000000000..c4317e2b0 Binary files /dev/null and b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/Logo.PNG differ diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/control.ts b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/control.ts new file mode 100644 index 000000000..09ee85e4b --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/control.ts @@ -0,0 +1,231 @@ + +function renderStory() { + + + const postsString = localStorage.getItem("users"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + + let storyPage = ""; + let k = 0; + for (k = 0; k <= newUsers.length - 1; k++) { + storyPage += `
                    +
                    ${newUsers[k].name}
                    +
                    ` + ; + } + const htmlStory: HTMLDivElement | null = document.querySelector("#storyBox"); + if (htmlStory !== null) { + htmlStory.innerHTML = storyPage; + } + // loadUsersToSorage() + render(getItemsFromStorage()) + // loadUsersToSorage() +} + + + + +function renderusers(users: User[]) { + + let page = ""; + let j = 0; + for (j = 0; j <= users.length - 1; j++) { + page += `
                    + + +
                    `; + } + + // + + const html: HTMLDivElement | null = document.querySelector("#listofUsers"); + if (html !== null) { + html.innerHTML = page; + } + + localStorage.setItem("users", JSON.stringify(users)); +} + +function handleDeleteUser(uid: string) { + try { + + const postsString = localStorage.getItem("users"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + const index = newUsers.findIndex((User) => User.uid === uid); + if (index === -1) throw new Error("item not found"); + newUsers.splice(index, 1); + localStorage.setItem("users", JSON.stringify(newUsers)) + renderusers(newUsers); + + + } catch (error) { + console.error(error); + } +} + + + +function handleAddItem(ev) { + try { + const postsString = localStorage.getItem("posts"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + + ev.preventDefault(); + const name = ev.target.elements.name.value; + const BigPictureURL = ev.target.elements.BigPictureURL.value; + const smallPictureURL = ev.target.elements.smallPictureURL.value; + + items.push(new Post(name, BigPictureURL, smallPictureURL)); + + ev.target.reset(); + localStorage.setItem("posts", JSON.stringify(items)); + + render(items); + } catch (error) { + console.error(error); + } +} + +function handleaddUser(ev) { + try { + + ev.preventDefault(); + + const postsString = localStorage.getItem("users"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + + const name = ev.target.elements.name.value; + const PictureURL = ev.target.elements.PictureURL.value; + + newUsers.push(new User(name, PictureURL)); + + ev.target.reset(); + localStorage.setItem("users", JSON.stringify(newUsers)); + renderusers(newUsers) + + } catch (error) { + console.error(error); + } + +} + +function render(posts: Post[]) { + let page = ""; + let j = 0; + for (j = 0; j <= posts.length - 1; j++) { + page += `
                    +
                    + + +

                    ${posts[j].name}

                    +
                    + + +

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

                    +
                    +
                    `; + } + + const html: HTMLDivElement | null = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + + } + localStorage.setItem("posts", JSON.stringify(posts)); +} + +function handleDeleteItem(uid: string) { + try { + const postsString = localStorage.getItem("posts"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + + const index = items.findIndex((Post) => Post.uid === uid); + if (index === -1) throw new Error("item not found"); + items.splice(index, 1); + localStorage.setItem("posts", JSON.stringify(items)) + render(items); + + + } catch (error) { + console.error(error); + } +} + +function handleUpdatePic(uid: string) { + try { + const postsString = localStorage.getItem("posts"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + + const index = items.findIndex((Post) => Post.uid === uid); + if (index === -1) throw new Error("item not found"); + const newPic = prompt("Enter a new URL pic"); + if (!newPic) throw new Error("Please enter a valid URL"); + items[index].smallPictureURL = newPic; + localStorage.setItem("posts", JSON.stringify(items)); + render(items); + } catch (error) { + console.error(error); + } +} + + +function filterUser(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + + ev.target.reset(); + + const postsString = localStorage.getItem("posts"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + + + renderfilterUser(items, name); + } catch (error) { + console.error(error); + } +} + + + +function renderfilterUser(posts: Post[], user: string) { + try { + let page = ""; + let j = 0; + for (j = 0; j <= posts.length - 1; j++) { + if (posts[j].name === user) { + page += `
                    +
                    + + +

                    ${posts[j].name}

                    +
                    + + +

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

                    +
                    +
                  `; + } + } + console.log(page); + const html: HTMLDivElement | null = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + } + // localStorage.setItem("posts", JSON.stringify(posts)); + } catch (error) { + alert("no post availble") + console.error(error); + } + +} + diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/control.js b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/control.js new file mode 100644 index 000000000..0fe69110a --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/control.js @@ -0,0 +1,200 @@ +function renderStory() { + debugger; + const postsString = localStorage.getItem("users"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + let storyPage = ""; + let k = 0; + for (k = 0; k <= newUsers.length - 1; k++) { + storyPage += `
                  +
                  ${newUsers[k].name}
                  +
                  `; + } + const htmlStory = document.querySelector("#storyBox"); + if (htmlStory !== null) { + htmlStory.innerHTML = storyPage; + } + // loadUsersToSorage() + render(getItemsFromStorage()); + // loadUsersToSorage() +} +function renderusers(users) { + let page = ""; + let j = 0; + for (j = 0; j <= users.length - 1; j++) { + page += `
                  + + +
                  `; + } + // + const html = document.querySelector("#listofUsers"); + if (html !== null) { + html.innerHTML = page; + } + localStorage.setItem("users", JSON.stringify(users)); +} +function handleDeleteUser(uid) { + try { + debugger; + const postsString = localStorage.getItem("users"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + const index = newUsers.findIndex((User) => User.uid === uid); + if (index === -1) + throw new Error("item not found"); + newUsers.splice(index, 1); + localStorage.setItem("users", JSON.stringify(newUsers)); + renderusers(newUsers); + } + catch (error) { + console.error(error); + } +} +function handleAddItem(ev) { + try { + const postsString = localStorage.getItem("posts"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + ev.preventDefault(); + const name = ev.target.elements.name.value; + const BigPictureURL = ev.target.elements.BigPictureURL.value; + const smallPictureURL = ev.target.elements.smallPictureURL.value; + items.push(new Post(name, BigPictureURL, smallPictureURL)); + ev.target.reset(); + localStorage.setItem("posts", JSON.stringify(items)); + render(items); + } + catch (error) { + console.error(error); + } +} +function handleaddUser(ev) { + try { + debugger; + ev.preventDefault(); + const postsString = localStorage.getItem("users"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + const name = ev.target.elements.name.value; + const PictureURL = ev.target.elements.PictureURL.value; + newUsers.push(new User(name, PictureURL)); + ev.target.reset(); + localStorage.setItem("users", JSON.stringify(newUsers)); + renderusers(newUsers); + } + catch (error) { + console.error(error); + } +} +function render(posts) { + let page = ""; + let j = 0; + for (j = 0; j <= posts.length - 1; j++) { + page += `
                  +
                  + + +

                  ${posts[j].name}

                  +
                  + + +

                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

                  +
                  + `; + } + const html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + } + localStorage.setItem("posts", JSON.stringify(posts)); +} +function handleDeleteItem(uid) { + try { + const postsString = localStorage.getItem("posts"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + const index = items.findIndex((Post) => Post.uid === uid); + if (index === -1) + throw new Error("item not found"); + items.splice(index, 1); + localStorage.setItem("posts", JSON.stringify(items)); + render(items); + } + catch (error) { + console.error(error); + } +} +function handleUpdatePic(uid) { + try { + const postsString = localStorage.getItem("posts"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + const index = items.findIndex((Post) => Post.uid === uid); + if (index === -1) + throw new Error("item not found"); + const newPic = prompt("Enter a new URL pic"); + if (!newPic) + throw new Error("Please enter a valid URL"); + items[index].smallPictureURL = newPic; + localStorage.setItem("posts", JSON.stringify(items)); + render(items); + } + catch (error) { + console.error(error); + } +} +function filterUser(ev) { + try { + ev.preventDefault(); + const name = ev.target.elements.name.value; + ev.target.reset(); + const postsString = localStorage.getItem("posts"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + renderfilterUser(items, name); + } + catch (error) { + console.error(error); + } +} +function renderfilterUser(posts, user) { + try { + let page = ""; + let j = 0; + for (j = 0; j <= posts.length - 1; j++) { + if (posts[j].name === user) { + page += `
                  +
                  + + +

                  ${posts[j].name}

                  +
                  + + +

                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est minima officiis nam delectus, a, debitis dolore tempore doloremque fugiat ea, assumenda quos facere aspernatur eius ipsa voluptas qui pariatur. Doloremque!

                  +
                  + `; + } + } + console.log(page); + const html = document.querySelector("#list"); + if (html !== null) { + html.innerHTML = page; + } + // localStorage.setItem("posts", JSON.stringify(posts)); + } + catch (error) { + alert("no post availble"); + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/helpers.js b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/helpers.js new file mode 100644 index 000000000..bbfdcdaee --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36); +} diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/model.js b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/model.js new file mode 100644 index 000000000..b79f49670 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/model.js @@ -0,0 +1,40 @@ +var Post = /** @class */ (function () { + function Post(name, BigPictureURL, smallPictureURL) { + this.name = name; + this.BigPictureURL = BigPictureURL; + this.smallPictureURL = smallPictureURL; + this.uid = uid(); + } + return Post; +}()); +var User = /** @class */ (function () { + function User(name, pictureURL) { + this.name = name; + this.pictureURL = pictureURL; + this.uid = uid(); + } + return User; +}()); +var posts = []; +// posts.push(new Post("dad","data:image/jpeg;base64,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","data:image/jpeg;base64,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")); +// posts.push(new Post("son","data:image/jpeg;base64,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","data:image/jpeg;base64,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")) +// posts.push(new Post("mom","data:image/jpeg;base64,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","data:image/jpeg;base64,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")) +var users = []; +// users.push( +// new User( +// "dad", +// "data:image/png;base64,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" +// ) +// ); +// users.push( +// new User( +// "mom", +// "data:image/png;base64,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" +// ) +// ); +// users.push( +// new User( +// "son", +// "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDim2kq_9yyl5gxJEgCiqPV1Zh0OEUvmz07w&usqp=CAU" +// ) +// ); diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/style.css b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/style.css new file mode 100644 index 000000000..42e61e85f --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/style.css @@ -0,0 +1,312 @@ +.bodyHomePage { + background-color: rgba(9, 179, 179, 0.555); +} +.bodyHomePage__userForm { + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border-radius: 10px; + position: relative; + left: 70px; +} +.bodyHomePage__mainLogo { + width: 300px; + margin-left: 42%; + border: 1px solid black; + border-radius: 10px; +} + +.form { + position: relative; + left: 120px; +} + +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + border: solid coral; + padding: 50px; +} +.list img { + width: 100%; +} + +#listofUsers { + display: flex; + flex-direction: row; + width: 1000px; + margin: auto; +} + +.linkButton { + height: 100px; + width: 100px; +} + +.userForm { + background-color: #c215c2; + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.recurring_div { + display: flex; + flex-direction: column; + background-color: white; + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.userImg { + height: 100%; + width: 100%; +} + +.recurring_user { + display: flex; + flex-direction: column; + background-color: #ececee; + border: 5px black; + width: 300px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.headline { + display: flex; + flex-direction: row; + height: 90px; + border: 1px solid rgba(0, 0, 0, 0.3151); + border-radius: 10px; + position: sticky; + top: 0px; + background-color: white; + z-index: 1; +} +.headline__instegram_logo { + position: relative; + left: 10px; + top: 20px; + height: 70px; +} +.headline__formClass { + padding-left: 50%; + padding-top: 5%; + padding-left: 40%; +} + +#id_heart { + position: relative; + left: 140px; + bottom: 85px; + height: 60px; + width: 60px; + margin: auto; + margin-bottom: 8px; +} + +input[type=search] { + width: 230px; + height: 30px; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + background-color: white; + padding: 12px 20px 12px 40px; + position: relative; + bottom: 40px; + right: 100px; +} + +.body_background_color { + background-color: #cbcbcb; +} + +.h1_design { + position: relative; + left: 10px; + font-size: 20px; +} + +.small_logo { + width: 50px; + height: 50px; + border-radius: 100px; + float: left; + position: relative; + right: 10; +} + +.bottom_headline { + display: flex; + flex-direction: row; + height: 60px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: white; + z-index: 1; +} + +#storyBox { + background-color: #ececee; + width: 650px; + height: 100px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} + +#storyBox2 { + background-color: #ececee; + width: 650px; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} + +#storyBox3 { + background-color: #ececee; + width: 16%; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; + position: relative; + top: 20px; +} + +.frame { + background-color: aliceblue; + width: 800px; + height: 100%; + margin: auto; + border-radius: 10px; +} + +.img_story { + border-radius: 180px; + width: 50px; + height: 50px; + border: 2px solid #ec2525; + border-image: repeat; + position: relative; + top: 20px; +} + +.bottom_headline { + height: 50px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: white; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-radius: 10px; +} + +.img_bottom_headline { + width: 30px; + height: 30px; + position: relative; + top: 10px; +} + +.story_text { + position: relative; + top: 21px; + font-size: 17px; +} + +.dots { + width: 30px; + height: 30px; + position: relative; + left: 470px; + top: 20px; + display: inline; +} + +.recurring_div_headline { + display: flex; + flex-direction: row; +} + +@keyframes color { + 0% { + background: #33CCCC; + } + 20% { + background: #33CC36; + } + 40% { + background: #B8CC33; + } + 60% { + background: #FCCA00; + } + 80% { + background: #33CC36; + } + 100% { + background: #33CCCC; + } +} +body { + background: #33CCCC; + /* Fallback */ + animation: color 9s infinite linear; +} + +.story { + display: flex; + flex-direction: column; +} + +.releaseFilter{ + width: 60px; + height: 20px; + position: relative; + top: 40px; + right: 20px; + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/view.js b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/view.js new file mode 100644 index 000000000..e96b3ce98 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/dist/view.js @@ -0,0 +1,45 @@ +function loadpostsPage() { + debugger; + // loadpostsToSorage(); + renderStory(); + render(getItemsFromStorage()); +} +function loadpostsToSorage() { + localStorage.setItem("posts", JSON.stringify(posts)); +} +function loadUsersPage() { + debugger; + getUserFromStorage(); + // loadUsersToSorage(); + renderusers(getUserFromStorage()); +} +function loadUsersToSorage() { + localStorage.setItem("users", JSON.stringify(users)); +} +function getItemsFromStorage() { + try { + debugger; + const postsString = localStorage.getItem("posts"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + return (items); + } + catch (error) { + console.error(error); + return (undefined); + } +} +function getUserFromStorage() { + try { + const postsString = localStorage.getItem("users"); + if (!postsString) + throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + return (newUsers); + } + catch (error) { + console.error(error); + return (undefined); + } +} diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/helpers.ts b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/helpers.ts new file mode 100644 index 000000000..6cf771409 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/helpers.ts @@ -0,0 +1,7 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36); + } + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/index.html b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/index.html new file mode 100644 index 000000000..0d01bfcbf --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/index.html @@ -0,0 +1,56 @@ + + + + + + + Document + + + + + + + + + + +
                  +
                  + +
                  + + +
                  + +
                  + + + +
                  + + + + +
                  + + + + +
                  + + +
                  +
                  +
                  + + + +
                  +
                  + + diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/model.ts b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/model.ts new file mode 100644 index 000000000..d4aad0bf0 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/model.ts @@ -0,0 +1,46 @@ +class Post { + uid: string; + + constructor( + public name: string, + public BigPictureURL: string, + public smallPictureURL: string + ) { + this.uid = uid(); + } +} + +class User { + uid: string; + constructor(public name: string, public pictureURL: string) + { + this.uid = uid(); + } +} + +const posts: Post[] = []; + +// posts.push(new Post("dad","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAwwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQIDBgABB//EAEQQAAIBAwIDBQYDBQUFCQAAAAECAwAEERIhBTFBBhMiUWEycYGRobEUUsEVI9Hh8CQzQmKCBxY00vElQ0VTY3KTo8L/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMEAAX/xAAnEQACAgEEAgICAgMAAAAAAAAAAQIRAwQSITETQRQiUWEycQUV4f/aAAwDAQACEQMRAD8Ax3d1clvkcqZfs1s8se8VabJ0XIO9bd5iWMWRx92RtTKBkKgEVRJFKD4lqvLKaD5HTaLr6+FlNaRJqYXMvd48ts5qz8EskhLrv5Uj4rNq4rwhTnaZm+QrUQXKldhn70kW1ZSSTSsHn4YgiJ25daSy2eCcGtU7a1GrOfKl1wihiSBvRUmK4RZm5ICp86r0kU6mgBGQKDe3Y9KZSJuFAaEg0faaZG0vuKHEDasYq1UaM6gDXNhjENNiCGYAhRyxS6WFlcgLt501tr1tAibZCNwBV10sUkeIxj4Uu5opsTEqRto57VZBEH2xyPOrZEPIKQM1ZBGyb8qDZyiVm3CHOOdd3RkzpU++nFtaG5YKw36YG1azhPZ6yWHVPIhJX2RvU5ZdpaOLcfN0sJZDsrHHpTPh/Zy6un9ghR1xW9Th9lZAskYlZvZGaiZ7yRdFgsCFBlnyDpFDzTkd4IQ7Edrwq34UO9ugAq9ccz8avXjiyxmMxl87qkYxj3+dU8XgkMqC9ujcZHhAcEfyqpES3Gv+7b/N099Mkq57A2/6QxCGJQ8sAQHkhNCXXEGVgqxhU8xzqmfikJXTLLqOOlK57oSEiJWbzwCTTwxN9k550uExwLpTvqH0rys4bqMEjQ9dVPEiXnNohsplBMg35H+NQfhrOMxosoPIqRWdivXVdLwRMRydV0sPlV9rxG5gyFZtBOdJNO9I10ZY/wCTxy7GH4F43KvCwB8+VIOPSfguJ2NuqKUuXZWPlttTY8Wn6k48s1nu018XvODzNGPBeKDj123qc8M4qy+PVY8ktqAOMJo43wlSAdTMB8RTaOSKOeKGSTTJICUHnjn96V3d/b8U49wC4hjZIn1kDbPUfpR1zAtz2rgSFywt4Hznoxx+hFSt8mhpDrQCgKyb+tL7lJNQ1ZNGSWd5bco2xz3FBTXEoPiyCPSmBaoiHwMMprh3ZqS3bOul1B9wqttySBXMCZxiTOVqSwhvj0ryMjfP1qasocE0jsoqLl4Y4UOFqZtbgKTjHpR9pxGLChjuKvN+e91Qxxt5Nik+xT6iM2cx3dSAeRxRlpw+TfUq+XirY8I4cvEoTJMcEjkBjFNB2di7nQuon87GoSz06Lxw8WYu3tpBjUDjGPDTK3kZEeKOJ86eZNOoezJiuRqkOjmSPtRd7wyNFKQIx1czSef9DLF+zK3SyxQ5d1DLsFI1ZPvoO1wrsriSQOPDGh5+/batGvCIzmKY6V1ZyR9qru7GxhDKJ2QEf92PvTrP6FeH2JJ5kgdW0Ro/JVRfY+PnS284s847h7WMKpycgnJHrU+IWzKZHgulaNeY5f0ay87O7EHOPfWvE49mPOp9ItupFeTUXxvyzUTeKiHEjKSOSDTn30MImzscHzrhZvIep9TWh5b4MkcO12QN22dgMV1W/s9fzD511C0dtZqRaEVMW3pRyQnpVoiaq+YxfHX4FhgrJ9r5Q8FxAiFZLRoZw2eYJK/St+0JxWL7b2ognS5ICxXFs9rIx5Ag60yfeKjmy3GjTpsKjOzM8Nk03nAyFyI1YY98sgrTcDVz2h4rNE7KY5NAIPoF/wDwayfBpo4uKcPedgkUBy5PkGd/rsK23YeBpuHzXbjx3M7OTnP9bk1mxy+yRuzR+rfv/ppI+IcSXH9rkYDo/iH1qct7POhW6htpQfzQKD8xirY4NuVW9wK1OUH2jCvKupMQz8Oidi9ujQNzwrHH1qpLSdjmQjPuFaT8MD0r0Wo/KPnU5bGVhOa7M0bAsxZkyM8hQlzYyrkqmhfWtrDaRAYPtHzO1DXVvxGIeBQ8f+Ug1Cc1FmvGnNGOtYijgGSMZPlmtjwW1tJEzcyTy4/9Ij7ClE9pJI+plGs8sqK9F3eQxBHSRwvLxED6VCeTd7NOOG03S39rZqPwdtMzcs6SB8aOjvb+VVMdtkEZAB+5r51Ydo7mxlV+5D4PJtzimp7TtxEx2sr3EccrYYeEADz2GfrUap8ln1wbGbjEFov/AGjLGrjcRI+W+VBR8TveISsba2ZYOQZ8A560Aez9m0oEd2C+MlWTGfUZNN+G8Na3hxDk774UJ9s0JTxpUuwRjO7fCB57xrT24zM/LGk4pQYYLpmklsY1LdO/UfTNPLm8uLZiriP0DLqNKru+e4BRuHBH3GoHGakssWWcH6F9z2esriM6SyOeSmVSB9aWnstBbqWnvbeP/wB0gP2oXipmEpBEijOBjelDRzTN3YMjHou5rVCVrszTVPobzcM4dF/4rbfCM5oJrG0ZFLcRjUHoOfyqy17MX1wQWTuEJ9ubw/StJw7sZYqmqa5Fw3UDYD5VR5YxXZJY5SdUZgcL4YRvxH/6v515Wx/3as+iqB0/d11J8kf46KVgPpVghPlVSXHmFxVy3KjmBWX5kx1/j0d3J8qE4jwyC+tngu4FlibmrCjDdJn21H+qvGukKnDpny1Ch8yX4O+DTPkMfBILjtZJwpDJHbpKyhlbxBVGeZrfcTe27P8AA1VI9ESgQpp5rnYH51nOFgH/AGk3hJXSrSEnO3IU8/2i4k7MTGIqSsiHIOcb4/WqvO1JL8glp3JW/RoOHSC5thIVAIZlIznGCR+lF6RSDsxxGA8IjlnmRDPLI6ZO5UsdJ+WKdm4TAOpcHkcjepz1coujlot3JaAPKpBQelU98PSguLXaCwl0yANtjB8iKVayTYfg0NMCpxu8edEjqD0DYFCNMQjMMMQM6QevlQHDeKJPFb5ckzI0niO4GoBfvil+W2OtE0O3dnXS+iQeTqG+9VPFAyaZbSFl6+HH2qoaW5nHzrxX0P4XIbyqMtWi8NHJewabhXCpXz3UyEc1jbP3roeEcKwV/tZPw2pilwCCr4JB22xVy3AyCSCfU5rFk19GuOmaI8P4bCCDBfPg4ws0asPrT5OGNbxB1uIl/wBAH1FB8Pu0iYZAx76dm8g7vUSpXyq2ky4c0W5Sp/3RlzvJGVRQonfUNJuVZvPA2oNkGCJblXz0YD+NS4pxa3gkUthNbBUUYyxP/Sl8gjncMJZfPHeZ+hzWR6mO40wxycQn9m20i/vHDrnIAHKrUtbe0jLW2IfzFYtz8QKWSRLqDIrZ/KsgX9Kg6hY2JlkG24J/UVohqVxTOlhkMbS4tr+zivLZ2uIp0DpI2R4TyODyoW64olqxUXKKfyg1juwF9LLaCKSZ1ihsrURqv+E4cH54BrTXV0qoDI+tNSrh01DJYAcx5kVplkcMm2yCxKUdyRL/AHgP/nx//IK9oX+yHBKWu4zsi11HzRB4pHypuO8Qdu8WaTSdioJHr/GjE7QlmCzrJkKM5FLUkhlKKUZFU7aB+nxo9bFrhy4ZdPIak59a9BquyEU30wo8ciVdwxOM6Qu9WW/H1diEjYoBnJNAmFBII2RZCoOSGwQf4VZptdIM6ohB2GTScjpfsBXiD2vH5+IJylLjG2cf0Kvk4zPem6RHk0SxsiJgE5IxvnpXn4WNJVZ2MibkMuOf61UYIgyiNUVmG4GwoSbAoOuxra8btVsUhSPS0CBFEnM4GKF/b5Q4ZVzzA5fKqJrJXhj7x8yKdzjpUWt0aBlV+vhV8b/GhVhqSYzTtBFLH40bX+UtkVVxHi8Etsv4dzFOkigaeRBYZBz86Upw9gC2jvCF1aY2wRv9auma1sV8dskpZQMyLsG3zv0NDbzwO5OuRu/Gx3s9vDJNIgtXXvANWWzufmSTS/s7evbuO/fEccQUEtgKNRbGffQC8Zc+GNjGM8lyRjOQAPTHxo830s1hJ+LQiR1wUZSCQcYYeben6V0o7V0CMt3NjscYtdYw0OcnB1+VTl7QRhWvPFJHGpGtWO7ZXbPxzWVsoO7uQ0kL28sYLxhoySw3BGRyxXR39wl06tcBco2WZcg89tOCN87DFTeniP8AJkjRDt3PHIwMT+HbDty5cwaItu2F07SySOFUoxUEZ91IFvEvuGSy3tusskeCkkeNa+ecdOXPy67UBFe65BE6YGc4I69KlLS45J/UdajImrkfTOGdpllslkmkGpUQuV8yPKoT9sCmZIW1x69PiNYu4mWNPEuhcafawB6j+utUa4zaMGBOXJ9OlY/9dibujRLUejQ3HF4xxArfapkbcEHYcyMV5w7j8dncI0Ny7QnA0y7ADkRty/lWelk75cjIZRp93kaEVo1wsmrSdiAeYrRHTRaqiMtQ07R9JPaJZJGEMqNpPJTmq5+0axRsZ2CjHWsBFLGqOyS9245HqfSqu6N3etGJWmSILgq2AMjJ508NHBcglqpNUhz2I4zFw+yujIQXKRLhj+UEfc1bfdtLiSKaIBQDIrRk9ArBgPpSKDhE0EUqvIuttgqnI99AyWf7tW79SSdwTjFa/FBybZmc8qikOh2suwqqCqhQAB3ecAfGurNm2bJ/5a6n8GP8EvLk/I3IjKl0OmXmqnl/W1Ww3cqjMrd2VI/xc8e73iqje2EpZnj0NzDg79aV3NwplJXLb5BJ5VVJvsVySfA5uZmJzaXEjHOcMc/Kg55JJWXvyRgbkbEj30uF0W8gfMComYlQzb4wB8qZQ4A8g9guIomC2+shhpXJx96ruOL94oTSoxvmlVvcESN1zG2w67Gpx2+tnIQ6AQQSM4GKXYvYfI/Qat87hT3mPfVycQV20MU1A5NURWMTJ42kBO40jY58vlQslvJCyrJrRsgnUNwD96XZF9DbpIcxTQkkFdD7YIbY46fWgb69BgZYEEjMD4mJBXOxxvvkVe4tY5VVNbKQNZB5Z5/alLWqswLHJzyzXRx88nTyuimGKeWHuxpUA5GRg1quF8RMcRW+0zg4bcagpAyT/QPKs3PJ3blV2x9alZ3LI6PjIVtRAOCev6UcmPchceTaw+9vpmlJjuTLF3hx4sE7Yzp+G/8AOll2JXmjaIEllz4d8709j4dLxjuJrdohIjhX71tOQeQJJyTgHHXnvyoyHgNja3OniWpu8uRDm3uP7rK9dtznFSWSMVRV4m5X6F8/EjaolkwZ0icqAX6b49/8hVDXMcMuu2jCysCA5G/w8qZxcP4e7y3GhZWA7oWUjFis2vBzjBIxv8aV8Ut2tOMXNlCrRxrLoTvNiB0+FdBwfCDPf2B3V68rtqdmPqc5NMbGSNocsvg1gEkZ6frTQcF4bbreTSym5ktMRmGYaA7n2SMHOn2vpRfFbO0srW9S0jES24icszk69fMHfnnGMeVTllg/qkPDHNPcxJG8XegBSdR3OPOhZXV3Z3Xw8tjioWVpd3GfwtvNMQNykZIGD5ipzi4szovrWSN3XK94uM1ZRSZOUrRWWaNlKKwYqDhxjY1480xUDulDN8qta9Lx92AQiL4d9h03oZ5iTkeEZ5VWKISaXQxtpDHaSSM6JOjhkJHtAjBHwwp+dUXU91NgaoSOoAFRt2aKKdZufc6gPzDINVyGYo5UqVUZ23poxQJSkqLdU+BhIj72rqXd/Kd8Gup9iE3sHEcrY55Axyr1oWwV1dMVfIrMN2ZvM9TUABp3DZ9eVdQEQjjwTkZyetTMJAAw3PbaphY9BLaiRjAxt86jIpyFXbPQYrgnqKsbIWzkHar/AMTKsRK5IHUdKojhXTrkl0rzwMZPxqF04K60UFc409RQaO3UHx3Ms1vKXlLCJclSeeM7Z91Uy8Va4LKBojI/u85GAdvjQ1k6rHKJWYIylWOeuKH0MgZmI8yQaVRSY7m2ghrhicrz8jyq6O7j6rg+lLRIT0GPfmrIwW2AAB6ZpidFlzMJW1KDn16infZaO9kumNnA7sEK60wDGTyIzzOx28qS92RyWiLe9lt1ZUUMjEEqdtxyIPQ0s03GkPBpSTZo+KcQv2EtpxYMYkXIiMWhkI5FdhjzpZ+0ZVdnaTXq0szY6qdmx54qxrxL+z7n8Z3TA6kWfxMhOcgPj2TtzpVeWjWNxpklDZX2txn4c8evWs8IpLazRO7Uk+DSd07x3fF5mNtJcN/ZlDY31cifPbp/CnBu5uICKe2Ma3ItGSRlI1wyZ1bjyOCM+tZa4H4AGKZ2udIIiXTohAOPEMHfz+9VR3i96JI7U2kujSstrIRj1PPPxNSeGUqaLLLGLpjPtJxO3uJUmtTpaWALPGx9rzHoVOfLpTPh81xF2cF9G6PqbVM0h1K+PAEYEbbYI9enWsneQrJbfiY5pZdEgEvejDb8j6jmKplvZYdaRM8cEpGpVB0nTuKfwfVRXoXy1Jt+zT3XaHvoTCB3eiJMFRpCSIdWQBtnPWg+L3kt9w+1UxE3FxcvJHgZYg4BwOmW5fGkt07dypaSIkg6URwSM9TTzh9y0EXDWfh88k1ugMc0j93GoJJBzjcCucFCmkBSc7TYm4hY3vDtKXsaqGB0MrBgccxttmglkIOG1aR5Vp+9shw1ob9bWVVDukscjd4JG6AEefzpPaJC0heSGXu1B1aNsH31eEpOP2M+SEd1Jl1vPHJHAu/NkOfJhj7ihZJSsYOCwPPp1qMDskjJLGVbTka1x12OKmkcsgdsYAY56Yp00mLLkG764PJXA91e0yS2coCWwfLVy+ldR8iJ7JAOksfZA95NevEMbYzjrUjy9oeHlnrUTq55B9QKqKQ7oDPOqZFZGyrgjGdmBojQxYlvEMZGNq5IwhLHCrjkDg5oUGwd5n7sLj41Qe8J2yT9KLOnluD59ami7hR8yKDRwAVIVVJydWrbfpVkQABB3z1PSmiW8YVgyg521Y+tcLNF3b6/pXbWcqAFgEmW5461dHAAORPuNW6QFYR+Ig4NeEKCpUAZO29ckGyto1UZLN7scqkIwfMg7jHlUzvjWAcDlnBq1Y3kcdyrZPhx51zORbZ91DHJNNiTuFykRX2mOw38gRmk3EJZJLl5pZGkeRizM3M5ptJFlpg4AGAToOdxSO7LGTLggnp5VNR+zZVy+lIacDmM91FZy6pbeVwrRk7Ln/EPIjBNE3ds9hcOjK0WD4TyDCs/FM8TBkYqw6g4IpxaXtvLYrHfXBBicldKFm0ncjy3O9CnGVroKayR2vsaWkq3Ng3DDHped9RdQCWHMZJ6A77UieSWaODh+U/dSNpbOxJO5+lWy37Sr+E4dG0UUh8RYjW/vPQegoKS3aFlBU6ueoeVKo82GUuKXIz4faDTKgAklLaYiRkMvM6fX0511xdASaZe8duRYHl6VYHa5s5pFRgNUbPnlG+dIIPmaJvNLqzzur3QIUsB7QG3iBHPYb75poSp0dkhwmhah1ZDsd+S4yMUdZvOTGZPFEcpo1chnnih3kCkIgBXnuAMUMJC0pUABBzGdxTy5VEoS2uxujIOKO12qOG8L6yDgeY/h+lSPd+NhJ+6RsBl6g0qWYo+VPiJ8JjPXlv7+VWtcPLGUVVZwQSNG+Kk4uyu9NBaXTaRiQ499dS3vpxs0B1dcwtnNdXbELvYPbsTkEnGOVE3AHfIMeX2rq6tBALTkvurm/h9q6upvRxSwAZsAV7F7fwrq6lCH2H/ABBPXQPtXl2SzyBiThMjPTcV1dVPQoIyhbfIAB18wKpbm5/y/qK6upPYT1CdfwFV8Q/ukHrn6mva6lY66JcP3UE7nQaA4p/xLDp/0ryupfYz/iBj2ql5e+va6iSGVkqjuGAAYlsnHpRluT33Pk23pyrq6lRaXRZA7GGJSxKtfRgjOx2oedmLkljknc5515XUi/kNL+BTLz+FQuNtxtlhy99dXVRkTrvwPJo8ONWMbY51EMQEYE6vBv8A6RXtdQfQy7HBdmJLMSSckk11dXVE0H//2Q==","data:image/jpeg;base64,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")); +// posts.push(new Post("son","data:image/jpeg;base64,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","data:image/jpeg;base64,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")) +// posts.push(new Post("mom","data:image/jpeg;base64,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","data:image/jpeg;base64,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")) + +const users: User[] = []; + +// users.push( +// new User( +// "dad", +// "data:image/png;base64,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" +// ) +// ); +// users.push( +// new User( +// "mom", +// "data:image/png;base64,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" +// ) +// ); +// users.push( +// new User( +// "son", +// "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDim2kq_9yyl5gxJEgCiqPV1Zh0OEUvmz07w&usqp=CAU" +// ) +// ); diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/selectUser.html b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/selectUser.html new file mode 100644 index 000000000..b0f53a75c --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/selectUser.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + + + + + + + + +
                  + + + +
                  +
                  click any picture to enter the album
                  +
                  + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/style.scss b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/style.scss new file mode 100644 index 000000000..18df0dd57 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/style.scss @@ -0,0 +1,333 @@ +.bodyHomePage { + background-color: rgba(9, 179, 179, 0.555); + + &__userForm { + // background-color: rgb(194, 21, 194); + // border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + // border: 1px solid black; + border-radius: 10px; + position: relative; + left: 70px; + } + + &__mainLogo { + width: 300px; + margin-left: 42%; + border: 1px solid black; + border-radius: 10px; + } +} + +.form { + position: relative; + left: 120px; +} + +.list { + height: auto; + width: 200px; + margin: auto; + background-color: rgba(0, 255, 255, 0.123); + + img { + width: 100%; + } + + border: solid coral; + padding: 50px; +} + +#listofUsers { + display: flex; + flex-direction: row; + width: 1000px; + margin: auto; +} + +.linkButton { + height: 100px; + width: 100px; +} + +.userForm { + background-color: rgb(194, 21, 194); + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.recurring_div { + display: flex; + flex-direction: column; + background-color: rgba(255, 255, 255, 1); + border: 5px black; + width: 550px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.userImg { + height: 100%; + width: 100%; +} + +.recurring_user { + display: flex; + flex-direction: column; + background-color: rgb(236, 236, 238); + border: 5px black; + width: 300px; + height: 100%; + margin: auto; + margin-top: 30px; + padding-top: 0.5%; + padding-bottom: 0.5%; + border: 1px solid black; + border-radius: 10px; +} + +.headline { + display: flex; + flex-direction: row; + height: 90px; + border: 1px solid rgba(0, 0, 0, 0.3151); + border-radius: 10px; + position: sticky; + top: 0px; + background-color: rgba(255, 255, 255, 1); + z-index: 1; + + &__instegram_logo { + position: relative; + left: 10px; + top: 20px; + height: 70px; + } + + &__formClass { + padding-left: 50%; + padding-top: 5%; + padding-left: 40%; + } +} + +#id_heart { + position: relative; + left: 140px; + bottom: 85px; + height: 60px; + width: 60px; + margin: auto; + margin-bottom: 8px; +} + +input[type="search"] { + width: 230px; + height: 30px; + box-sizing: border-box; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + background-color: white; + padding: 12px 20px 12px 40px; + position: relative; + bottom: 40px; + right: 100px; +} + + + +.body_background_color { + background-color: rgb(203, 203, 203); +} + +.h1_design { + position: relative; + left: 10px; + font-size: 20px; +} + +.small_logo { + width: 50px; + height: 50px; + border-radius: 100px; + + float: left; + position: relative; + right: 10; +} + +.bottom_headline { + display: flex; + flex-direction: row; + height: 60px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: rgba(255, 255, 255, 1); + z-index: 1; +} + +#storyBox { + background-color: rgb(236, 236, 238); + width: 650px; + height: 100px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} + +#storyBox2 { + background-color: rgb(236, 236, 238); + width: 650px; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; +} + +#storyBox3 { + background-color: rgb(236, 236, 238); + width: 16%; + height: 15px; + margin: auto; + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + text-align: center; + position: relative; + top: 20px; +} + +.frame { + background-color: aliceblue; + width: 800px; + height: 100%; + margin: auto; + border-radius: 10px; +} + +.img_story { + border-radius: 180px; + width: 50px; + height: 50px; + border: 2px solid rgb(236, 37, 37); + border-image: repeat; + position: relative; + top: 20px; +} + +.bottom_headline { + height: 50px; + border: 1px solid rgba(0, 0, 0, 0.3151); + position: sticky; + bottom: 0px; + background-color: rgba(255, 255, 255, 1); + z-index: 1; + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-radius: 10px; +} + +.img_bottom_headline { + width: 30px; + height: 30px; + position: relative; + top: 10px; +} + +.story_text { + position: relative; + top: 21px; + font-size: 17px; +} + +.dots { + width: 30px; + height: 30px; + position: relative; + left: 470px; + top: 20px; + display: inline; +} + +.recurring_div_headline { + display: flex; + flex-direction: row; +} + +@keyframes color { + 0% { + background: #33CCCC; + } + + 20% { + background: #33CC36; + } + + 40% { + background: #B8CC33; + } + + 60% { + background: #FCCA00; + } + + 80% { + background: #33CC36; + } + + 100% { + background: #33CCCC; + } +} + +body { + background: #33CCCC; + /* Fallback */ + animation: color 9s infinite linear; +} + +.story { + display: flex; + flex-direction: column; +} + +.releaseFilter { + width: 60px; + height: 20px; + position: relative; + top: 40px; + right: 20px; +} + + + diff --git a/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/view.ts b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/view.ts new file mode 100644 index 000000000..69f748791 --- /dev/null +++ b/02-TypeScript/18-personalProject/CouldntRun/shlomi-samai/view.ts @@ -0,0 +1,56 @@ + + +function loadpostsPage() { + + // loadpostsToSorage(); + renderStory() + render(getItemsFromStorage()) +} + +function loadpostsToSorage() { + localStorage.setItem("posts", JSON.stringify(posts)); +} + + + +function loadUsersPage() { + + getUserFromStorage(); + // loadUsersToSorage(); + renderusers(getUserFromStorage()); +} + +function loadUsersToSorage() { + localStorage.setItem("users", JSON.stringify(users)); +} + + + +function getItemsFromStorage() { + try { + + const postsString = localStorage.getItem("posts"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const items = JSON.parse(postsString); + return (items) + } + catch (error) { + console.error(error); + return (undefined) + } +} + +function getUserFromStorage() { + try { + const postsString = localStorage.getItem("users"); + if (!postsString) throw new Error("Couldn't find items in storage"); + const newUsers = JSON.parse(postsString); + return (newUsers) + + } + catch (error) { + console.error(error); + return (undefined) + } +} + diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/App.html b/02-TypeScript/18-personalProject/Delays/Ayala/App.html new file mode 100644 index 000000000..91feaf228 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/App.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + +
                  + +
                  + + +

                  המתכונים שלי

                  + + + + + + + +
                  +
                  + + + + + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/control.ts b/02-TypeScript/18-personalProject/Delays/Ayala/control.ts new file mode 100644 index 000000000..c59a76e20 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/control.ts @@ -0,0 +1,120 @@ +// function handleAddItem(ev:any){ +// try{ +// ev.preventDefault(); +// console.log(ev); +// const name =ev.target.elements.name.value; +// const price =ev.target.elements.price.value; +// const category =ev.target.elements.category.value; + + +// recipes.push(new Recipe(name,price, category,img )); +// console.log(recipes); +// ev.target.reset(); + +// console.log(name); +// if (!itemsRoot) throw new Error("itemsRoot is null"); +// itemsRoot.innerHTML = renderItems(recipe); + +// }catch(error){ +// console.error(error); + +// } + +// } + function handleAddItem(ev:any){ + try { + + ev.preventDefault(); + console.log(ev); + const name = ev.target.elements.name.value; + const img = ev.target.elements.name.value; + const price = ev.target.elements.name.value; + const category = ev.target.elements.name.value; + + recipes.push(new Recipe(name,img, price, category,)); + console.log(recipes); + ev.target.reset(); + + console.log(name) + if(!itemsRoot) throw new Error("itemRoot is null"); + renderItems(recipes) + // itemsRoot.innerHTML=renderItems(recipes) + + + } catch (error) { + console.error(error); + } + } + + + + + + + // function handleUpdatePrice(uid){ + // try { + // console.log(uid); + // const index = recipe.findIndex((item) => item.uid === uid); + // if (index === -1) throw new Error("item not found"); + // recipe[index].price = Number(form.elements.recipe.value); + + // if (!itemsRoot) throw new Error("ItemRoot is undefined"); + // itemsRoot.innerHTML = renderItems(recipe); + // } catch (error) { + // console.error(error); + // } + // } + + + function renderItems(items: Recipe[]): void { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + + const html = recipes.map((recipe) => { + + return ` +
                  +

                  ${recipe.name}

                  + +

                  ${recipe.price}

                  +

                  ${recipe.category}

                  +
                  + + + `; + //
                  + //

                  ${recipe.name}

                  + //
                  Price: ${recipe.price}
                  + //
                  Category: ${item.category}
                  + // + //
                  + }) + .join(" "); + // console.log(html); + itemsRoot!.innerHTML=html + } catch (error) { + console.error(error); + + } + } + function handleLoad(){ + renderItems(recipes) + } + // function handleDeleteItem(uid: string) { + // try { + // console.log(uid); + // const index = recipe.findIndex((recipe) => recipe.uid === uid); + // if (index === -1) throw new Error("item not found"); + // recipe.splice(index, 1); + + // if (!itemsRoot) throw new Error("ItemRoot is undefined"); + // itemsRoot.innerHTML = renderItems(recipe); + // } catch (error) { + // console.error(error); + // } + // } + + // function submitForm() { + // //קוד לפעולה הרצוייה כאשר לוחצים על כפתור "חיפוש" + // } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/dist/control.js b/02-TypeScript/18-personalProject/Delays/Ayala/dist/control.js new file mode 100644 index 000000000..6db5b1d34 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/dist/control.js @@ -0,0 +1,89 @@ +// function handleAddItem(ev:any){ +// try{ +// ev.preventDefault(); +// console.log(ev); +// const name =ev.target.elements.name.value; +// const price =ev.target.elements.price.value; +// const category =ev.target.elements.category.value; +// recipes.push(new Recipe(name,price, category,img )); +// console.log(recipes); +// ev.target.reset(); +// console.log(name); +// if (!itemsRoot) throw new Error("itemsRoot is null"); +// itemsRoot.innerHTML = renderItems(recipe); +// }catch(error){ +// console.error(error); +// } +// } +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var img = ev.target.elements.name.value; + var price = ev.target.elements.name.value; + var category = ev.target.elements.name.value; + recipes.push(new Recipe(name, img, price, category)); + console.log(recipes); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemRoot is null"); + renderItems(recipes); + // itemsRoot.innerHTML=renderItems(recipes) + } + catch (error) { + console.error(error); + } +} +// function handleUpdatePrice(uid){ +// try { +// console.log(uid); +// const index = recipe.findIndex((item) => item.uid === uid); +// if (index === -1) throw new Error("item not found"); +// recipe[index].price = Number(form.elements.recipe.value); +// if (!itemsRoot) throw new Error("ItemRoot is undefined"); +// itemsRoot.innerHTML = renderItems(recipe); +// } catch (error) { +// console.error(error); +// } +// } +function renderItems(items) { + try { + if (!items || !Array.isArray(items)) + throw new Error("items is not an array"); + var html = recipes.map(function (recipe) { + return "\n
                  \n

                  " + recipe.name + "

                  \n \n

                  " + recipe.price + "

                  \n

                  " + recipe.category + "

                  \n
                  \n \n\n "; + //
                  + //

                  ${recipe.name}

                  + //
                  Price: ${recipe.price}
                  + //
                  Category: ${item.category}
                  + // + //
                  + }) + .join(" "); + // console.log(html); + itemsRoot.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function handleLoad() { + renderItems(recipes); +} +// function handleDeleteItem(uid: string) { +// try { +// console.log(uid); +// const index = recipe.findIndex((recipe) => recipe.uid === uid); +// if (index === -1) throw new Error("item not found"); +// recipe.splice(index, 1); +// if (!itemsRoot) throw new Error("ItemRoot is undefined"); +// itemsRoot.innerHTML = renderItems(recipe); +// } catch (error) { +// console.error(error); +// } +// } +// function submitForm() { +// //קוד לפעולה הרצוייה כאשר לוחצים על כפתור "חיפוש" +// } diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/dist/index.js b/02-TypeScript/18-personalProject/Delays/Ayala/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/dist/model.js b/02-TypeScript/18-personalProject/Delays/Ayala/dist/model.js new file mode 100644 index 000000000..5eba6776d --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/dist/model.js @@ -0,0 +1,23 @@ +// class Poduct { +// constructor(public name:string, ) { +// } +// } +// // const recipe: Recipe[] = []; +// // recipe.push(new Recipe('cake', '')) +// // console.log(recipe) +var Recipe = /** @class */ (function () { + function Recipe(name, price, category, img) { + this.name = name; + this.price = price; + this.category = category; + this.img = img; + this.uid = name + price + category; + } + return Recipe; +}()); +var recipes = [ + new Recipe('Chocolate Cake', 120, 'cakes', "https://sivan-ohayon.co.il/wp-content/uploads/2023/01/20230127_205310-2048x1968.jpg"), + new Recipe('Cheese Cake ', 130, 'cakes', "https://sivan-ohayon.co.il/wp-content/uploads/2022/05/20220524_130803-scaled.jpg"), + new Recipe('Yeast Cake ', 100, 'cakes', "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuXsK6hmfw2HDaAiohCfC3lnXGuDKXPf6dVA&usqp=CAU"), +]; +// console.log(recipes) diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/dist/style.css b/02-TypeScript/18-personalProject/Delays/Ayala/dist/style.css new file mode 100644 index 000000000..bc8bbedf8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/dist/style.css @@ -0,0 +1,47 @@ +* { + margin: auto; + padding: 0; + border-radius: 1px; + background-color: antiquewhite; +} + +.form__input { + display: block; + margin-bottom: 10px; + background-color: lemonchiffon; +} +.form__select { + display: block; + margin-bottom: 10px; + background-color: bisque; + width: 150px; +} +.form__option { + display: block; +} +.form__submit { + width: 60px; + display: block; + background-color: darksalmon; +} + +h2 { + font-size: 36px; + text-decoration: underline; + margin-left: -10px; + padding: 50px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} + +#itemsRoot { + display: flex; + justify-content: space-between; +} +#itemsRoot .recipe-item { + border: 1px solid black; +} +#itemsRoot .recipe-item .recipe-img { + width: 200px; + height: 200px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/dist/view.js b/02-TypeScript/18-personalProject/Delays/Ayala/dist/view.js new file mode 100644 index 000000000..35d03d40c --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/dist/view.js @@ -0,0 +1,4 @@ +var itemsRoot = document.querySelector('#itemsRoot'); +var form = document.querySelector('form'); +// const addFoodBtn = document.querySelector('#add-food-btn'); +// const foodList = document.querySelector('#food-list'); diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/index.ts b/02-TypeScript/18-personalProject/Delays/Ayala/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/model.ts b/02-TypeScript/18-personalProject/Delays/Ayala/model.ts new file mode 100644 index 000000000..720e0a140 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/model.ts @@ -0,0 +1,44 @@ + + +// class Poduct { +// constructor(public name:string, ) { + +// } +// } + + +// // const recipe: Recipe[] = []; +// // recipe.push(new Recipe('cake', '')) +// // console.log(recipe) + + +class Recipe { + + uid: string; + + constructor( + public name: string, + public price: number, + public category: string, + public img: string + + ) { + + this.uid = name + price + category; + + } + +} + + + +const recipes: Recipe[] = [ + new Recipe('Chocolate Cake', 120, 'cakes', "https://sivan-ohayon.co.il/wp-content/uploads/2023/01/20230127_205310-2048x1968.jpg"), + new Recipe('Cheese Cake ', 130, 'cakes', "https://sivan-ohayon.co.il/wp-content/uploads/2022/05/20220524_130803-scaled.jpg"), + new Recipe('Yeast Cake ',100,'cakes',"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuXsK6hmfw2HDaAiohCfC3lnXGuDKXPf6dVA&usqp=CAU"), + + +]; + + +// console.log(recipes) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/recipes.html b/02-TypeScript/18-personalProject/Delays/Ayala/recipes.html new file mode 100644 index 000000000..f872a039e --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/recipes.html @@ -0,0 +1,47 @@ + + + + + + + + APP + + + + + + + + + + + +

                  Recipes

                  + + + +
                  + +
                  + +
                  + +
                  + + + +
                  + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/style.scss b/02-TypeScript/18-personalProject/Delays/Ayala/style.scss new file mode 100644 index 000000000..6fd78d95e --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/style.scss @@ -0,0 +1,61 @@ +*{ + margin: auto; + padding: 0; + border-radius: 1px; +background-color: antiquewhite; +} + +.form { + &__input { + display: block; + margin-bottom: 10px; + background-color: lemonchiffon; + + } + + &__select { + display: block; + margin-bottom: 10px; + background-color: bisque; + width: 150px; + } + + &__option { + display: block; + + } + + &__submit { + + width: 60px; + display: block; + background-color: darksalmon; + + } +} + +h2{ + font-size: 36px; + text-decoration: underline; + margin-left: -10px; + padding: 50px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} + + +#itemsRoot{ + display: flex; + justify-content: space-between; + + + .recipe-item{ + border: 1px solid black; + + + .recipe-img{ + width: 200px; + height: 200px; + } + } +} diff --git a/02-TypeScript/18-personalProject/Delays/Ayala/view.ts b/02-TypeScript/18-personalProject/Delays/Ayala/view.ts new file mode 100644 index 000000000..ff66d73c2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala/view.ts @@ -0,0 +1,7 @@ + +const itemsRoot = document.querySelector('#itemsRoot'); +const form = document.querySelector('form'); + +// const addFoodBtn = document.querySelector('#add-food-btn'); +// const foodList = document.querySelector('#food-list'); + diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/control.ts b/02-TypeScript/18-personalProject/Delays/Ayala1/control.ts new file mode 100644 index 000000000..dd6cb64ac --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/control.ts @@ -0,0 +1,117 @@ +const form = document.querySelector("#theForm"); +const itemsRoot = document.querySelector('#itemsRoot'); + +function handleAddItem(event: any) { + try { + + event.preventDefault(); + console.log(event); + const name = event.target.elements.name.value; + const image = event.target.elements.image.value; + const link = event.target.elements.link.value; + const category = event.target.elements.category.value; + const allRecipies = getItemsFromStorage(); + const newRecipe = new Recipe(name, link, category, image); + allRecipies.push(newRecipe); + localStorage.setItem('recipes', JSON.stringify(allRecipies)); + // const value = localStorage.getItem('recipes'); + // console.log(recipes); + // event.target.resert(); + // recipes.push(newRecipe) + // renderItems(recipes,'itemRoot'); + // console.dir(recipes) + console.log(name); + + window.location.href = './index.html'; + } catch (error) { + console.error(error); + + } + + +} + + + +function renderItems(recipes: Recipe[]): void { + try { + if (!recipes || !Array.isArray(recipes)) + throw new Error("recipes is not an array"); + console.dir(recipes) + const html = recipes.map((recipe) => { + + return ` + +

                  ${recipe.name}

                  + +

                  ${recipe.category}

                  + + +                   + + `; + + }) + .join(" "); + // console.log(html); + itemsRoot!.innerHTML = html + } catch (error) { + console.error(error); + + } +} + + + + + +// function handleLoad() { +// // const tempRecipes=JSON.parse(localStorage.getItem("Recipes")); +// renderItems(recipes) +// } + + + + + + + +// function handleDeleteItem(uid) { +// try { +// console.log(uid); +// var index = recipes.findIndex(function (item) { return item.uid === uid; }); +// if (index === -1) +// throw new Error("item not found"); +// recipes.splice(index, 1); +// if (!itemsRoot) +// throw new Error("ItemRoot is undefined"); +// renderItems(recipes); +// localStorage.setItem("items", JSON.stringify(recipes)) +// } +// catch (error) { +// console.error(error); +// } +// } + +function getItemsFromStorage() { + try { + const recipeString = localStorage.getItem("recipes"); + if (!recipeString) throw new Error("Couldn't find items in the storage"); + console.dir({ recipeString, msg: "This is recipe string" }); + + const recipes = JSON.parse(recipeString); + console.dir({ recipes, msg: "This is recipes after parsed in JSON" }); + return recipes + + } catch (error) { + console.error(error); + return []; + } +} + +// function handleSaveRecipe() { +// console.log('save recipes'); +// localStorage.setRecipe('items', JSON.stringify(recipes || [])); +// } + diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/dist/control.js b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/control.js new file mode 100644 index 000000000..0f52d1a4e --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/control.js @@ -0,0 +1,82 @@ +var form = document.querySelector("#theForm"); +var itemsRoot = document.querySelector('#itemsRoot'); +function handleAddItem(event) { + try { + event.preventDefault(); + console.log(event); + var name = event.target.elements.name.value; + var image = event.target.elements.image.value; + var link = event.target.elements.link.value; + var category = event.target.elements.category.value; + var allRecipies = getItemsFromStorage(); + var newRecipe = new Recipe(name, link, category, image); + allRecipies.push(newRecipe); + localStorage.setItem('recipes', JSON.stringify(allRecipies)); + // const value = localStorage.getItem('recipes'); + // console.log(recipes); + // event.target.resert(); + // recipes.push(newRecipe) + // renderItems(recipes,'itemRoot'); + // console.dir(recipes) + console.log(name); + window.location.href = './index.html'; + } + catch (error) { + console.error(error); + } +} +function renderItems(recipes) { + try { + if (!recipes || !Array.isArray(recipes)) + throw new Error("recipes is not an array"); + console.dir(recipes); + var html = recipes.map(function (recipe) { + return "\n \n

                  " + recipe.name + "

                  \n \n

                  " + recipe.category + "

                  \n \n \n                   \n\n "; + }) + .join(" "); + // console.log(html); + itemsRoot.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +// function handleLoad() { +// // const tempRecipes=JSON.parse(localStorage.getItem("Recipes")); +// renderItems(recipes) +// } +// function handleDeleteItem(uid) { +// try { +// console.log(uid); +// var index = recipes.findIndex(function (item) { return item.uid === uid; }); +// if (index === -1) +// throw new Error("item not found"); +// recipes.splice(index, 1); +// if (!itemsRoot) +// throw new Error("ItemRoot is undefined"); +// renderItems(recipes); +// localStorage.setItem("items", JSON.stringify(recipes)) +// } +// catch (error) { +// console.error(error); +// } +// } +function getItemsFromStorage() { + try { + var recipeString = localStorage.getItem("recipes"); + if (!recipeString) + throw new Error("Couldn't find items in the storage"); + console.dir({ recipeString: recipeString, msg: "This is recipe string" }); + var recipes = JSON.parse(recipeString); + console.dir({ recipes: recipes, msg: "This is recipes after parsed in JSON" }); + return recipes; + } + catch (error) { + console.error(error); + return []; + } +} +// function handleSaveRecipe() { +// console.log('save recipes'); +// localStorage.setRecipe('items', JSON.stringify(recipes || [])); +// } diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/dist/model.js b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/model.js new file mode 100644 index 000000000..d3e180c61 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/model.js @@ -0,0 +1,19 @@ +var Recipe = /** @class */ (function () { + function Recipe(name, link, category, img) { + this.name = name; + this.link = link; + this.category = category; + this.img = img; + this.uid = name + link + category + img; + } + return Recipe; +}()); +var defaultRecipies = [ + new Recipe('Chocolate Cake', "https://www.carine.co.il/foody_recipe/%d7%a2%d7%95%d7%92%d7%aa-%d7%a9%d7%95%d7%a7%d7%95%d7%9c%d7%93-%d7%a2%d7%a1%d7%99%d7%a1%d7%99%d7%aa-%d7%91%d7%98%d7%99%d7%a8%d7%95%d7%a3-%d7%a9%d7%9c-%d7%a7%d7%a8%d7%99%d7%9f-%d7%92%d7%95%d7%a8%d7%9f/", 'cakes', "https://d3o5sihylz93ps.cloudfront.net/wp-content/uploads/sites/2/2021/11/29100848/homeubuntureleasesrelease_20211121093812webappmu-pluginsfoody-white-labeltmp61a48a8fd4101-IHCW3t.jpg"), + new Recipe('Cheese Cake', "https://sivan-ohayon.co.il/2022/05/24/%d7%a2%d7%95%d7%92%d7%aa-%d7%92%d7%91%d7%99%d7%a0%d7%94-%d7%90%d7%a4%d7%95%d7%99%d7%94-%d7%9c%d7%9c%d7%90-%d7%94%d7%a4%d7%a8%d7%93%d7%aa-%d7%91%d7%99%d7%a6%d7%99%d7%9d/", 'cakes', "https://sivan-ohayon.co.il/wp-content/uploads/2022/05/20220524_130803-scaled.jpg"), + new Recipe('Yeast Cake', "https://www.foodsdictionary.co.il/Recipes/10198", 'cakes', "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuXsK6hmfw2HDaAiohCfC3lnXGuDKXPf6dVA&usqp=CAU"), + new Recipe('Cookies', "https://www.markivsodi.co.il/2021/02/%D7%A2%D7%95%D7%92%D7%99%D7%95%D7%AA-%D7%A9%D7%95%D7%A7%D7%95%D7%9C%D7%93-%D7%98%D7%91%D7%A2%D7%95%D7%A0%D7%99%D7%95%D7%AA-%D7%A4%D7%A9%D7%95%D7%98%D7%95%D7%AA/", 'cookies', "https://www.markivsodi.co.il/wp-content/uploads/2021/02/%D7%A2%D7%95%D7%92%D7%99%D7%95%D7%AA-%D7%A9%D7%95%D7%A7%D7%95%D7%9C%D7%93-%D7%98%D7%91%D7%A2%D7%95%D7%A0%D7%99%D7%95%D7%AA-%D7%A4%D7%A9%D7%95%D7%98%D7%95%D7%AA_%D7%9E%D7%A7%D7%95%D7%A9%D7%98%D7%95%D7%AA_1000.jpg"), + new Recipe('Chocolate Mousse', "https://www.oogio.net/decadent_chocolate_mousse_cake/", 'קינוחים', "https://www.oogio.net/wp-content/uploads/2021/03/decadent_chocolate_cake9-s-2.jpg") +]; +console.log("model"); +// console.log(recipes) diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/dist/recipe.js b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/recipe.js new file mode 100644 index 000000000..d9b582e24 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/recipe.js @@ -0,0 +1,11 @@ +// console.log('renderItems') +// const savedRecipies= getItemsFromStorage(); +// let recipies; +// if(savedRecipies.length > 0) { +// recipies = [...savedRecipies]; +// } else { +// recipies = [...defaultRecipies, ...savedRecipies]; +// } +// localStorage.setItem('recipes', JSON.stringify(recipies)); +// renderItems(recipies); +// console.log(recipies) diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/dist/recipes.js b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/recipes.js new file mode 100644 index 000000000..a4de3d1c8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/recipes.js @@ -0,0 +1,19 @@ +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +console.log('renderItems'); +var savedRecipies = getItemsFromStorage(); +var recipies; +if (savedRecipies.length > 0) { + recipies = __spreadArrays(savedRecipies); +} +else { + recipies = __spreadArrays(defaultRecipies, savedRecipies); +} +localStorage.setItem('recipes', JSON.stringify(recipies)); +renderItems(recipies); +console.log(recipies); diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/dist/style.css b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/style.css new file mode 100644 index 000000000..01e56c49f --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/style.css @@ -0,0 +1,101 @@ +* { + margin: auto; + padding: 0; + text-align: center; +} + +body { + background-color: pink; + justify-content: center; + align-items: center; +} + +.form { + display: flex; + flex-direction: column; + margin: 40px; + justify-content: center; + align-items: center; +} +.form__input { + justify-content: center; + padding: 9px; + font-size: xx-large; + margin-bottom: 10px; + background-color: whitesmoke; +} +.form__select { + margin-bottom: 10px; + background-color: whitesmoke; + width: 410px; + font-size: xx-large; + margin-bottom: 10px; +} +.form__submit { + width: 60px; + background-color: lemonchiffon; +} + +h2 { + font-size: 30px; + text-decoration: underline; + margin-left: -10px; + padding: 50px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: purple; +} + +#itemsRoot { + display: grid; + gap: 30px; + grid-template-columns: repeat(5, 1fr); + margin: 50px; +} +#itemsRoot .recipe-item { + background-color: aliceblue; + border-radius: 10px; +} +#itemsRoot .recipe-item .recipe-img { + width: 200px; + height: 200px; + margin: auto; + margin-left: auto; +} +#itemsRoot .recipe-item .recipe-link { + text-decoration: underline; +} +#itemsRoot h1 { + font-size: 30px; + color: black; +} +#itemsRoot p { + color: #f05858; + text-align: center; +} + +.form__submit { + background-color: blueviolet; + color: white; + padding: 10px 20px; + border-radius: 5px; + border: none; + cursor: pointer; + width: 70px; +} +.form__submit:hover { + background-color: darkgreen; +} + +button a { + text-decoration: none; + color: black; + padding: 15px 50px; + background-color: palevioletred; + border-radius: 3px; + border: 2px solid black; + display: inline-block; +} +button a:hover { + background-color: violet; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/dist/view.js b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/view.js new file mode 100644 index 000000000..b2099b20b --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/dist/view.js @@ -0,0 +1,16 @@ +function renderItemsFromStoreage() { + try { + var recipesString = localStorage.getItem('recipes'); + //recipies can be null or undefined, because nobody added any recipes yet + //It is not an error, but we need to handle it + if (!recipesString) + throw new Error('Couldnt find items in storage'); + var recipes = JSON.parse(recipesString); + return recipes; + console.log(recipes); + } + catch (error) { + console.error(error); + return undefined; + } +} diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/index.html b/02-TypeScript/18-personalProject/Delays/Ayala1/index.html new file mode 100644 index 000000000..8180ba261 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/index.html @@ -0,0 +1,41 @@ + + + + + + + + עמוד הבית איילה + + + + + + + + + + + + + + + +

                  אתר המתכונים

                  + + + + + + + + + + +
                  +
                  + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/index.ts b/02-TypeScript/18-personalProject/Delays/Ayala1/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/model.ts b/02-TypeScript/18-personalProject/Delays/Ayala1/model.ts new file mode 100644 index 000000000..a7c4752a8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/model.ts @@ -0,0 +1,36 @@ + + + +class Recipe { + + uid: string; + + constructor( + public name: string, + public link: string, + public category: string, + public img: string + + ) { + + this.uid = name + link + category+img; + + } + +} +const defaultRecipies: Recipe[] = +[ + new Recipe('Chocolate Cake',"https://www.carine.co.il/foody_recipe/%d7%a2%d7%95%d7%92%d7%aa-%d7%a9%d7%95%d7%a7%d7%95%d7%9c%d7%93-%d7%a2%d7%a1%d7%99%d7%a1%d7%99%d7%aa-%d7%91%d7%98%d7%99%d7%a8%d7%95%d7%a3-%d7%a9%d7%9c-%d7%a7%d7%a8%d7%99%d7%9f-%d7%92%d7%95%d7%a8%d7%9f/",'cakes', "https://d3o5sihylz93ps.cloudfront.net/wp-content/uploads/sites/2/2021/11/29100848/homeubuntureleasesrelease_20211121093812webappmu-pluginsfoody-white-labeltmp61a48a8fd4101-IHCW3t.jpg"), + new Recipe('Cheese Cake',"https://sivan-ohayon.co.il/2022/05/24/%d7%a2%d7%95%d7%92%d7%aa-%d7%92%d7%91%d7%99%d7%a0%d7%94-%d7%90%d7%a4%d7%95%d7%99%d7%94-%d7%9c%d7%9c%d7%90-%d7%94%d7%a4%d7%a8%d7%93%d7%aa-%d7%91%d7%99%d7%a6%d7%99%d7%9d/",'cakes',"https://sivan-ohayon.co.il/wp-content/uploads/2022/05/20220524_130803-scaled.jpg"), + new Recipe('Yeast Cake',"https://www.foodsdictionary.co.il/Recipes/10198",'cakes',"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuXsK6hmfw2HDaAiohCfC3lnXGuDKXPf6dVA&usqp=CAU"), + new Recipe('Cookies',"https://www.markivsodi.co.il/2021/02/%D7%A2%D7%95%D7%92%D7%99%D7%95%D7%AA-%D7%A9%D7%95%D7%A7%D7%95%D7%9C%D7%93-%D7%98%D7%91%D7%A2%D7%95%D7%A0%D7%99%D7%95%D7%AA-%D7%A4%D7%A9%D7%95%D7%98%D7%95%D7%AA/",'cookies',"https://www.markivsodi.co.il/wp-content/uploads/2021/02/%D7%A2%D7%95%D7%92%D7%99%D7%95%D7%AA-%D7%A9%D7%95%D7%A7%D7%95%D7%9C%D7%93-%D7%98%D7%91%D7%A2%D7%95%D7%A0%D7%99%D7%95%D7%AA-%D7%A4%D7%A9%D7%95%D7%98%D7%95%D7%AA_%D7%9E%D7%A7%D7%95%D7%A9%D7%98%D7%95%D7%AA_1000.jpg"), + new Recipe('Chocolate Mousse',"https://www.oogio.net/decadent_chocolate_mousse_cake/",'קינוחים',"https://www.oogio.net/wp-content/uploads/2021/03/decadent_chocolate_cake9-s-2.jpg") +]; + + +console.log("model") + + + +// console.log(recipes) + diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/recipe.ts b/02-TypeScript/18-personalProject/Delays/Ayala1/recipe.ts new file mode 100644 index 000000000..1c71548f9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/recipe.ts @@ -0,0 +1,14 @@ +// console.log('renderItems') +// const savedRecipies= getItemsFromStorage(); +// let recipies; + +// if(savedRecipies.length > 0) { +// recipies = [...savedRecipies]; +// } else { +// recipies = [...defaultRecipies, ...savedRecipies]; +// } + +// localStorage.setItem('recipes', JSON.stringify(recipies)); + +// renderItems(recipies); +// console.log(recipies) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/recipes.html b/02-TypeScript/18-personalProject/Delays/Ayala1/recipes.html new file mode 100644 index 000000000..eaf14e158 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/recipes.html @@ -0,0 +1,50 @@ + + + + + + + + Recipes + + + + + + + + + + + + + +

                  המתכונים

                  + + + + +
                  + +
                  + +
                  + +
                  + + + + +
                  + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/recipes.ts b/02-TypeScript/18-personalProject/Delays/Ayala1/recipes.ts new file mode 100644 index 000000000..5e7df1065 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/recipes.ts @@ -0,0 +1,14 @@ +console.log('renderItems') +const savedRecipies= getItemsFromStorage(); +let recipies; + +if(savedRecipies.length > 0) { + recipies = [...savedRecipies]; +} else { + recipies = [...defaultRecipies, ...savedRecipies]; +} + +localStorage.setItem('recipes', JSON.stringify(recipies)); + +renderItems(recipies); +console.log(recipies) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/style.scss b/02-TypeScript/18-personalProject/Delays/Ayala1/style.scss new file mode 100644 index 000000000..c4a4689b6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/style.scss @@ -0,0 +1,137 @@ +*{ + margin: auto; + padding: 0; +// border-radius: 1px; +// background-color: rgb(247, 208, 215); +text-align: center; +} + +body{ + background-color:pink; + justify-content: center; + align-items: center; +} +.form { + display: flex; + flex-direction: column; + margin: 40px; + + justify-content: center; + align-items: center; + + &__input { + justify-content: center; + + padding: 9px; + font-size: xx-large; + margin-bottom: 10px; + background-color: whitesmoke; + + + + } + + &__select { + // display: block; + margin-bottom: 10px; + background-color:whitesmoke; + width:410px; + font-size: xx-large; + margin-bottom: 10px; + + + } + + + + &__submit { + + + width: 60px; + // display: block; + background-color: lemonchiffon; + + + } +} + +h2{ + font-size: 30px; + text-decoration: underline; + margin-left: -10px; + padding: 50px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color:purple; +} + + +#itemsRoot{ + display: grid; + gap: 30px; + grid-template-columns: repeat(5,1fr); + margin: 50px; + + + + + .recipe-item{ + + background-color: aliceblue; + // border: 1px solid black; + border-radius: 10px; + + + .recipe-img{ + + width: 200px; + height: 200px; + margin: auto; + margin-left: auto; + } + + .recipe-link { + // color: blue; + text-decoration: underline; + } + } + h1{ + font-size: 30px; + color: black; + + } + p{ + color: rgb(240, 88, 88); + text-align: center; + } +} +.form__submit { + background-color: blueviolet; + color: white; + padding: 10px 20px; + border-radius: 5px; + border: none; + cursor: pointer; + width: 70px; + + &:hover { + background-color: darkgreen; + } +} + +button { + a { + + text-decoration: none; + color: black; + padding: 15px 50px; + background-color: palevioletred; + border-radius: 3px; + border: 2px solid black; + display: inline-block; + + &:hover { + background-color: violet; + } + } +} diff --git a/02-TypeScript/18-personalProject/Delays/Ayala1/view.ts b/02-TypeScript/18-personalProject/Delays/Ayala1/view.ts new file mode 100644 index 000000000..88f2d523d --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/Ayala1/view.ts @@ -0,0 +1,21 @@ + + + + + +function renderItemsFromStoreage():Recipe[]| undefined{ + try { + const recipesString=localStorage.getItem('recipes'); + //recipies can be null or undefined, because nobody added any recipes yet + //It is not an error, but we need to handle it + + if(!recipesString) throw new Error('Couldnt find items in storage'); + + const recipes=JSON.parse(recipesString); + return recipes; + console.log(recipes) + } catch (error) { + console.error(error) + return undefined; + } +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/control.ts b/02-TypeScript/18-personalProject/Delays/shai-li/control.ts new file mode 100644 index 000000000..1f8a9a56e --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/control.ts @@ -0,0 +1,24 @@ +const addTask = (title, description, dueTime) => { + const newTask = document.createElement("li"); + const bTag = document.createElement("b"); + bTag.append(title); + newTask.append(bTag); + newTask.append(`- ${dueTime}, ${description}`); + tasksContainer?.append(newTask); +}; + +function addTaskToModel(title: string, description: string, dueTime: string) { + try { + tasks.push(new Task(title, description, dueTime, username)); + localStorage.setItem("tasks", JSON.stringify(tasks)); + console.log(tasks); + } catch (error) { + console.error(error); + } +} + +function renderTasks(tasksToAdd) { + tasksToAdd.forEach((task) => + addTask(task.title, task.description, task.dueTime) + ); +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/control.js b/02-TypeScript/18-personalProject/Delays/shai-li/dist/control.js new file mode 100644 index 000000000..10a0770e6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/control.js @@ -0,0 +1,23 @@ +var addTask = function (title, description, dueTime) { + var newTask = document.createElement("li"); + var bTag = document.createElement("b"); + bTag.append(title); + newTask.append(bTag); + newTask.append("- " + dueTime + ", " + description); + tasksContainer === null || tasksContainer === void 0 ? void 0 : tasksContainer.append(newTask); +}; +function addTaskToModel(title, description, dueTime) { + try { + tasks.push(new Task(title, description, dueTime, username)); + localStorage.setItem("tasks", JSON.stringify(tasks)); + console.log(tasks); + } + catch (error) { + console.error(error); + } +} +function renderTasks(tasksToAdd) { + tasksToAdd.forEach(function (task) { + return addTask(task.title, task.description, task.dueTime); + }); +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/index.js b/02-TypeScript/18-personalProject/Delays/shai-li/dist/index.js new file mode 100644 index 000000000..f479fc631 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/index.js @@ -0,0 +1,4 @@ +renderTasks(tasks.filter(function (task) { return task.username === username; })); +if (usernamePlaceholder) { + usernamePlaceholder.innerText = "Hello " + username + " - "; +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/logIn.css b/02-TypeScript/18-personalProject/Delays/shai-li/dist/logIn.css new file mode 100644 index 000000000..330d4fab5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/logIn.css @@ -0,0 +1,35 @@ +body { + margin: 0; + padding: 0; + background-color: #3a7842; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; + background-image: url(https://images.pexels.com/photos/6965700/pexels-photo-6965700.jpeg?auto=compress&cs=tinysrgb&w=600); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; +} + +.container { + display: flex; + margin-left: 6rem; + margin-top: 6rem; +} +.container input { + display: block; + text-align: center; + margin: 2rem; + border-radius: 5px; + padding: 5px; + background-color: #dfe1e3; +} +.container h3 { + margin-left: 6rem; +} +.container button { + margin-left: 6rem; + border-radius: 5px; + padding: 5px; + cursor: pointer; + background-color: #383737; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/logIn.js b/02-TypeScript/18-personalProject/Delays/shai-li/dist/logIn.js new file mode 100644 index 000000000..80fd377b7 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/logIn.js @@ -0,0 +1,25 @@ +var form = document.querySelector("#loginForm"); +if (form) { + form.addEventListener("submit", function (e) { + e.preventDefault(); + addUser(); + }); +} +function addUser() { + var username = document.getElementById("username").value; + var password = document.getElementById("password").value; + var matchingUser = users.find(function (existingUser) { return existingUser.username === username; }); + if (!matchingUser) { + var user = new User(username, password); + users.push(user); + localStorage.setItem("users", JSON.stringify(users)); + } + else { + if (matchingUser.password !== password) { + alert("Wrong Password!"); + return; + } + } + localStorage.setItem("current-user", username); + window.location.assign("./index.html"); +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/model.js b/02-TypeScript/18-personalProject/Delays/shai-li/dist/model.js new file mode 100644 index 000000000..719ebb419 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/model.js @@ -0,0 +1,21 @@ +var _a, _b; +var Task = /** @class */ (function () { + function Task(title, description, dueTime, username, completed) { + if (completed === void 0) { completed = false; } + this.title = title; + this.description = description; + this.dueTime = dueTime; + this.username = username; + this.completed = completed; + } + return Task; +}()); +var tasks = JSON.parse((_a = localStorage.getItem("tasks")) !== null && _a !== void 0 ? _a : "[]"); +var User = /** @class */ (function () { + function User(username, password) { + this.username = username; + this.password = password; + } + return User; +}()); +var users = JSON.parse((_b = localStorage.getItem("users")) !== null && _b !== void 0 ? _b : "[]"); diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/style.css b/02-TypeScript/18-personalProject/Delays/shai-li/dist/style.css new file mode 100644 index 000000000..9bb6f7c55 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/style.css @@ -0,0 +1,62 @@ +body { + margin: 0; + padding: 0; + background-color: #517f6a; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: beige; +} + +* { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +form { + display: flex; + justify-content: space-around; +} +form button { + border: 2px solid black; + border-radius: 10px; + width: 300px; + background-color: #4c7366; + cursor: pointer; + padding: 7px; + margin-top: 10px; +} +form input, +form select { + width: 300px; + margin-top: 20px; + border: 2px solid black; + border-radius: 7px; + background-color: rgba(60, 99, 86, 0.629); + color: black; +} +form select { + width: 200px; +} + +.wrapper .top_bar { + height: 5rem; + width: 100%; + background-color: #385448; + display: flex; + justify-content: center; + color: beige; +} +.wrapper .categories { + display: flex; + justify-content: space-evenly; + gap: 15px; +} +.wrapper .box { + display: block; + background-color: #b4e2d3; + height: 100%; + width: 500px; + margin: 20px; + color: #1c1919; + font-weight: 800; + padding: 10px; + border-radius: 10px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/dist/view.js b/02-TypeScript/18-personalProject/Delays/shai-li/dist/view.js new file mode 100644 index 000000000..8e99a638c --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/dist/view.js @@ -0,0 +1,32 @@ +var _a; +var addNewTaskButton = document.querySelector("#addNewTaskBtn"); +var tasksContainer = document.querySelector("#newTask"); +var filterInput = document.querySelector(".filter"); +var usernamePlaceholder = document.querySelector("#usernamePlaceholder"); +var username = (_a = localStorage.getItem("current-user")) !== null && _a !== void 0 ? _a : ""; +if (filterInput) { + filterInput.addEventListener("change", function (e) { + var filterValue = e.target.value; + var tasksToRender = filterValue === "all" + ? tasks + : tasks.filter(function (task) { + return (filterValue === "completed" && task.completed) || + (filterValue === "incomplete" && !task.completed); + }); + if (tasksContainer) { + tasksContainer.innerHTML = ""; + renderTasks(tasksToRender); + } + }); +} +addNewTaskButton === null || addNewTaskButton === void 0 ? void 0 : addNewTaskButton.addEventListener("submit", function (e) { + e.preventDefault(); + var titleInput = document.querySelectorAll("input")[0]; + var descriptionInput = document.querySelectorAll("input")[1]; + var dueTimeInput = document.querySelectorAll("select")[0]; + addTask(titleInput.value, descriptionInput.value, dueTimeInput.value); + addTaskToModel(titleInput.value, descriptionInput.value, dueTimeInput.value); + titleInput.value = ""; + descriptionInput.value = ""; + dueTimeInput.value = ""; +}); diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/index.html b/02-TypeScript/18-personalProject/Delays/shai-li/index.html new file mode 100644 index 000000000..304557f4d --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/index.html @@ -0,0 +1,96 @@ + + + + + + + + + + + To Do List :) + + + + + + + + + +
                  +
                  +

                  What's on your todo?

                  +
                  + +
                  + + + + + + +
                  +
                  + +
                  + Tasks +
                    +
                    +
                    +
                    + + diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/index.ts b/02-TypeScript/18-personalProject/Delays/shai-li/index.ts new file mode 100644 index 000000000..404ba4fb8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/index.ts @@ -0,0 +1,5 @@ +renderTasks(tasks.filter((task) => task.username === username)); + +if(usernamePlaceholder){ + usernamePlaceholder.innerText = `Hello ${username} - `; +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/logIn.html b/02-TypeScript/18-personalProject/Delays/shai-li/logIn.html new file mode 100644 index 000000000..99301e4c0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/logIn.html @@ -0,0 +1,26 @@ + + + + + + + Log-In + + + + + +
                    + +
                    + +
                    +

                    Login

                    +

                    Username:

                    +

                    Password:

                    +
                    + +
                    +
                    + + diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/logIn.scss b/02-TypeScript/18-personalProject/Delays/shai-li/logIn.scss new file mode 100644 index 000000000..3b988e93c --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/logIn.scss @@ -0,0 +1,40 @@ +body { + margin: 0; + padding: 0; + // background-color: aqua; + background-color: rgb(58, 120, 66); + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; + background-image: url(https://images.pexels.com/photos/6965700/pexels-photo-6965700.jpeg?auto=compress&cs=tinysrgb&w=600); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; +} + +.container { + display: flex; + margin-left: 6rem; + margin-top: 6rem; + + input { + display: block; + text-align: center; + margin: 2rem; + border-radius: 5px; + padding: 5px; + background-color: rgb(223, 225, 227); + } + + h3 { + margin-left: 6rem; + } + + button { + margin-left: 6rem; + border-radius: 5px; + padding: 5px; + cursor: pointer; + background-color: rgb(56, 55, 55); + } +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/logIn.ts b/02-TypeScript/18-personalProject/Delays/shai-li/logIn.ts new file mode 100644 index 000000000..6142bcec1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/logIn.ts @@ -0,0 +1,31 @@ +const form: HTMLElement | null = document.querySelector("#loginForm"); + +if (form) { + form.addEventListener("submit", (e) => { + e.preventDefault(); + addUser(); + }); +} + + +function addUser() { + let username = (document.getElementById("username")).value; + let password = (document.getElementById("password")).value; + const matchingUser = users.find( + (existingUser) => existingUser.username === username + ); + if (!matchingUser) { + let user = new User(username, password); + users.push(user); + localStorage.setItem("users", JSON.stringify(users)); + } else { + if (matchingUser.password !== password) { + alert("Wrong Password!"); + return; + } + } + localStorage.setItem("current-user", username); + window.location.assign("./index.html"); +} + + diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/model.ts b/02-TypeScript/18-personalProject/Delays/shai-li/model.ts new file mode 100644 index 000000000..189d9e97d --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/model.ts @@ -0,0 +1,25 @@ + +class Task { + constructor( + public title: string, + public description: string, + public dueTime: string, + public username: string, + public completed = false + ) {} +} + +const tasks: Task[] = JSON.parse(localStorage.getItem("tasks") ?? "[]"); + +class User { + public username: string; + public password: string; + constructor(username: string, password: string) { + this.username = username; + this.password = password; + } +} + + +const users: User[] = JSON.parse(localStorage.getItem("users") ?? "[]"); + diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/pic/background2.jpeg b/02-TypeScript/18-personalProject/Delays/shai-li/pic/background2.jpeg new file mode 100644 index 000000000..3116942ae Binary files /dev/null and b/02-TypeScript/18-personalProject/Delays/shai-li/pic/background2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/pic/pic.webp b/02-TypeScript/18-personalProject/Delays/shai-li/pic/pic.webp new file mode 100644 index 000000000..26668234a Binary files /dev/null and b/02-TypeScript/18-personalProject/Delays/shai-li/pic/pic.webp differ diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/style.scss b/02-TypeScript/18-personalProject/Delays/shai-li/style.scss new file mode 100644 index 000000000..1157aba1d --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/style.scss @@ -0,0 +1,65 @@ +body { + margin: 0; + padding: 0; + background-color: rgb(81, 127, 106); + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: beige; +} + +* { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} +form { + display: flex; + justify-content: space-around; + button { + border: 2px solid black; + border-radius: 10px; + width: 300px; + background-color: rgb(76, 115, 102); + cursor: pointer; + padding: 7px; + margin-top: 10px; + } + input, + select { + width: 300px; + + margin-top: 20px; + border: 2px solid black; + border-radius: 7px; + background-color: rgba(60, 99, 86, 0.629); + color: rgb(0, 0, 0); + } + + select { + width: 200px; + } +} + +.wrapper { + .top_bar { + height: 5rem; + width: 100%; + background-color: rgb(56, 84, 72); + display: flex; + justify-content: center; + color: rgb(245, 245, 220); + } + .categories { + display: flex; + justify-content: space-evenly; + gap: 15px; + } + .box { + display: block; + background-color: rgb(180, 226, 211); + height: 100%; + width: 500px; + margin: 20px; + color: rgb(28, 25, 25); + font-weight: 800; + padding: 10px; + border-radius: 10px; + } +} diff --git a/02-TypeScript/18-personalProject/Delays/shai-li/view.ts b/02-TypeScript/18-personalProject/Delays/shai-li/view.ts new file mode 100644 index 000000000..f09d59589 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shai-li/view.ts @@ -0,0 +1,41 @@ +const addNewTaskButton: HTMLElement | null = document.querySelector("#addNewTaskBtn"); +const tasksContainer: HTMLElement | null = document.querySelector("#newTask"); +const filterInput = document.querySelector(".filter"); +const usernamePlaceholder: HTMLElement | null =document.querySelector("#usernamePlaceholder"); +const username = localStorage.getItem("current-user") ?? ""; + + + +if(filterInput){ + filterInput.addEventListener("change", (e) => { + const filterValue: "all" | "completed" | "incomplete" = e.target.value; + const tasksToRender = + filterValue === "all" + ? tasks + : tasks.filter( + (task) => + (filterValue === "completed" && task.completed) || + (filterValue === "incomplete" && !task.completed) + ); + if (tasksContainer) { + tasksContainer.innerHTML = ""; + renderTasks(tasksToRender); + } + + }); +} + +addNewTaskButton?.addEventListener("submit", (e) => { + e.preventDefault(); + const titleInput = document.querySelectorAll("input")[0]; + const descriptionInput = document.querySelectorAll("input")[1]; + const dueTimeInput = document.querySelectorAll("select")[0]; + + addTask(titleInput.value, descriptionInput.value, dueTimeInput.value); + addTaskToModel(titleInput.value, descriptionInput.value, dueTimeInput.value); + + titleInput.value = ""; + descriptionInput.value = ""; + dueTimeInput.value = ""; +}); + diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/control.ts b/02-TypeScript/18-personalProject/Delays/shalom_copperman/control.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/control.js b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/control.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/helpers.js b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/helpers.js new file mode 100644 index 000000000..eed9a456b --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/helpers.js @@ -0,0 +1,23 @@ +function uid(length) { + var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split(""); + if (!length) { + length = Math.floor(Math.random() * chars.length); + } + var str = ""; + for (var i = 0; i < length; i++) { + str += chars[Math.floor(Math.random() * chars.length)]; + } + return str; +} +function dropdown(arr, selectId) { + var select = document.getElementById(selectId); + for (var i = 0; i < arr.length; i++) { + var option = document.createElement("option"); + var txt = document.createTextNode(arr[i]); + option.appendChild(txt); + option.setAttribute("value", arr[i]); + if (select) { + select.insertBefore(option, select.lastChild); + } + } +} diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/index.css b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/model.js b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/model.js new file mode 100644 index 000000000..faebc61b9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/model.js @@ -0,0 +1,30 @@ +var Donor = /** @class */ (function () { + function Donor(Name, TotalIncomTax, LinkedOrganizationId, LinkedOrganizationPercentage, DonatedOrganizaions) { + if (DonatedOrganizaions === void 0) { DonatedOrganizaions = []; } + this.Name = Name; + this.TotalIncomTax = TotalIncomTax; + this.LinkedOrganizationId = LinkedOrganizationId; + this.LinkedOrganizationPercentage = LinkedOrganizationPercentage; + this.DonatedOrganizaions = DonatedOrganizaions; + this.uid = 'D' + uid(12); + } + return Donor; +}()); +var Donors = []; +var Organization = /** @class */ (function () { + function Organization(Name, FieldOfActivity, AnnualBudget, MyDonors) { + if (MyDonors === void 0) { MyDonors = []; } + this.Name = Name; + this.FieldOfActivity = FieldOfActivity; + this.AnnualBudget = AnnualBudget; + this.MyDonors = MyDonors; + this.uid = 'O' + uid(12); + } + return Organization; +}()); +var organizations = []; +organizations.push(new Organization('latet', 'charity', 50, [{ Id: 'shalom', Contribution: 100 }, { Id: 'alex', Contribution: 500 }])); +organizations.push(new Organization('yad sara', 'charity', 120)); +organizations.push(new Organization('yad vashem', 'charity', 78)); +organizations.push(new Organization('libi', 'charity', 45)); +console.log(organizations); diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/view.js b/02-TypeScript/18-personalProject/Delays/shalom_copperman/dist/view.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/donors.html b/02-TypeScript/18-personalProject/Delays/shalom_copperman/donors.html new file mode 100644 index 000000000..6577027a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/donors.html @@ -0,0 +1,32 @@ + + + + + + + Document + + + + + + + +

                    Set product

                    + Store +
                    + + + + + + + +
                    +
                    + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/helpers.ts b/02-TypeScript/18-personalProject/Delays/shalom_copperman/helpers.ts new file mode 100644 index 000000000..bdca7b820 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/helpers.ts @@ -0,0 +1,29 @@ +function uid(length) { + const chars = + "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split(""); + + if (!length) { + length = Math.floor(Math.random() * chars.length); + } + + let str = ""; + for (var i = 0; i < length; i++) { + str += chars[Math.floor(Math.random() * chars.length)]; + } + return str; +} + +function dropdown(arr: [], selectId: string) { + const select:HTMLElement | null = document.getElementById(selectId); + for (let i = 0; i < arr.length; i++) { + const option = document.createElement("option"); + const txt = document.createTextNode(arr[i]); + option.appendChild(txt); + option.setAttribute("value", arr[i]); + if (select) { + select.insertBefore(option, select.lastChild); + } + + } + +} diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/index.html b/02-TypeScript/18-personalProject/Delays/shalom_copperman/index.html new file mode 100644 index 000000000..d8431df3f --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + + + + +
                    + Donors +
                    + + + diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/index.scss b/02-TypeScript/18-personalProject/Delays/shalom_copperman/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/model.ts b/02-TypeScript/18-personalProject/Delays/shalom_copperman/model.ts new file mode 100644 index 000000000..df9d650da --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/model.ts @@ -0,0 +1,44 @@ +interface DonatedOrganizaion { + Id: string; + Percentage : number; +} + + +class Donor { + uid:string; + + constructor( + public Name: string, + public TotalIncomTax: number, + public LinkedOrganizationId: string, + public LinkedOrganizationPercentage: number, + public DonatedOrganizaions :DonatedOrganizaion[] =[], + ) { + this.uid = 'D'+uid(12); + } +} +const Donors: Donor[]=[]; + +interface MyDonor { + Id:string; + Contribution: number +} +class Organization { + uid:string; + constructor( + public Name :string, + public FieldOfActivity: string, + public AnnualBudget: number, + public MyDonors:MyDonor[]=[], + ) { + this.uid = 'O'+uid(12); + } +} + +const organizations: Organization[]=[]; + +organizations.push(new Organization('latet','charity',50,[{ Id:'shalom', Contribution: 100},{Id:'alex',Contribution:500}])); +organizations.push(new Organization('yad sara','charity',120)); +organizations.push(new Organization('yad vashem','charity',78)); +organizations.push(new Organization('libi','charity',45)); +console.log(organizations) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/organizations.html b/02-TypeScript/18-personalProject/Delays/shalom_copperman/organizations.html new file mode 100644 index 000000000..3184300b8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Delays/shalom_copperman/organizations.html @@ -0,0 +1,17 @@ + + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Delays/shalom_copperman/view.ts b/02-TypeScript/18-personalProject/Delays/shalom_copperman/view.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/EstiMauda/controle.ts b/02-TypeScript/18-personalProject/EstiMauda/controle.ts new file mode 100644 index 000000000..0c31d639d --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/controle.ts @@ -0,0 +1,121 @@ + +function hendelClearTheBoard(){ + drawBox() +} + + +function playInGrid(){ + try { + + const inputAll = document.querySelectorAll(".sodoku__box__input"); + inputAll.forEach((inputs, indexInput) =>{ + inputs.addEventListener('input', function (event) { + const target = event.target as HTMLInputElement; + let trueValue = false + let checkError:any = "" + + for (let i=0; i < 9; i++){ + if (target.value === i.toString()){ + trueValue = true + checkError = check_grid(target.value, indexInput) + + if(checkError != "" && checkError != undefined) { + target.value = "" + checkError = "" + } + console.log(`target.value ${target.value}`); + + } + } + if(!trueValue){ + alert("Only number bettwin 1-9") + target.value = "" + } + }) + + }) + + } catch (error) { + console.error(error) + } +} + + +function check_grid(targetValue:string, inputIndex:number) { //check fields!!! +try { + + for (let i=0; i < 8; i++ ){ + for (let j=0; j < 8; j++ ){ + if (rowBox[i][j] == inputIndex){ + tmpArr[i][j] = parseInt(targetValue) + let checkError = check_value(i, j, targetValue, inputIndex) + if(checkError != "") return checkError + break + } + } + } + + } catch (error) { + console.error(error) + } +} + +function check_value(indexRow:number, indexCol:number, targetValue:string, inputIndex:number) { + try { + let errorChack = "" + let indexI = 0 + let indexJ = 0 + let indexBoxI = 0 + let indexBoxJ = 0 + console.log("start"); + + for (let i=0; i < 9; i++ ){ + for (let j=0; j < 9; j++ ){ + if (rowBox[i][j] == inputIndex){ + indexI = i + indexJ = j + } + if(boxBox[i][j] == inputIndex) { + indexBoxI = i + indexBoxJ = j + console.log(`j ${j}`); + + } + } + } + + console.log(indexBoxI + " indexBoxI"); + + for (let i=0; i < 9; i++ ){ + if((i != indexI) && (i != indexJ)){ + if((tmpArr[indexI][i] == targetValue && tmpArr[indexI][i] != 0) || (tmpArr[i][indexJ] == targetValue && tmpArr[i][indexJ] != 0)){ + errorChack = ("Duplicate number in the row or column") + console.log("row"); + + } + } + } + + + for (let i=0; i < 3; i++ ){ + for (let j=0; j < 3; j++ ){ + if((i != indexBoxI) && (i != indexBoxJ)){ + if((tmpArr[box[indexBoxI].row1][box[indexBoxI].col1] == targetValue) && + (tmpArr[box[indexBoxI].row1][box[indexBoxI].col1] != 0)) + errorChack = ("Duplicate number in the Box") + + + } + } + } + if(errorChack != ""){ + alert(errorChack) + let checkError = "true" + return checkError + } + + } catch (error) { + console.error(error) + } + +} diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/controle.js b/02-TypeScript/18-personalProject/EstiMauda/dist/controle.js new file mode 100644 index 000000000..a5f3adfa3 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/controle.js @@ -0,0 +1,100 @@ +function hendelClearTheBoard() { + drawBox(); +} +function playInGrid() { + try { + var inputAll = document.querySelectorAll(".sodoku__box__input"); + inputAll.forEach(function (inputs, indexInput) { + inputs.addEventListener('input', function (event) { + var target = event.target; + var trueValue = false; + var checkError = ""; + for (var i = 0; i < 9; i++) { + if (target.value === i.toString()) { + trueValue = true; + checkError = check_grid(target.value, indexInput); + if (checkError != "" && checkError != undefined) { + target.value = ""; + checkError = ""; + } + console.log("target.value " + target.value); + } + } + if (!trueValue) { + alert("Only number bettwin 1-9"); + target.value = ""; + } + }); + }); + } + catch (error) { + console.error(error); + } +} +function check_grid(targetValue, inputIndex) { + try { + for (var i = 0; i < 8; i++) { + for (var j = 0; j < 8; j++) { + if (rowBox[i][j] == inputIndex) { + tmpArr[i][j] = parseInt(targetValue); + var checkError = check_value(i, j, targetValue, inputIndex); + if (checkError != "") + return checkError; + break; + } + } + } + } + catch (error) { + console.error(error); + } +} +function check_value(indexRow, indexCol, targetValue, inputIndex) { + try { + var errorChack = ""; + var indexI = 0; + var indexJ = 0; + var indexBoxI = 0; + var indexBoxJ = 0; + console.log("start"); + for (var i = 0; i < 9; i++) { + for (var j = 0; j < 9; j++) { + if (rowBox[i][j] == inputIndex) { + indexI = i; + indexJ = j; + } + if (boxBox[i][j] == inputIndex) { + indexBoxI = i; + indexBoxJ = j; + console.log("j " + j); + } + } + } + console.log(indexBoxI + " indexBoxI"); + for (var i = 0; i < 9; i++) { + if ((i != indexI) && (i != indexJ)) { + if ((tmpArr[indexI][i] == targetValue && tmpArr[indexI][i] != 0) || (tmpArr[i][indexJ] == targetValue && tmpArr[i][indexJ] != 0)) { + errorChack = ("Duplicate number in the row or column"); + console.log("row"); + } + } + } + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { + if ((i != indexBoxI) && (i != indexBoxJ)) { + if ((tmpArr[box[indexBoxI].row1][box[indexBoxI].col1] == targetValue) && + (tmpArr[box[indexBoxI].row1][box[indexBoxI].col1] != 0)) + errorChack = ("Duplicate number in the Box"); + } + } + } + if (errorChack != "") { + alert(errorChack); + var checkError = "true"; + return checkError; + } + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/drawBox.js b/02-TypeScript/18-personalProject/EstiMauda/dist/drawBox.js new file mode 100644 index 000000000..53bbf9b75 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/drawBox.js @@ -0,0 +1,40 @@ +var numBox = 81; +var indexRowBox = 1; +var indexRow = 0; +var indexCol = 0; +var grayBox = true; +function drawBox() { + try { + console.log(tmpArr); + var html = ""; + if (document.querySelector(".sodoku__box__input") != null) { + document.querySelector(".sodoku__box__input").remove; + } + for (var i = 0; i < numBox; i++) { + var easyStr = ""; + if ((tmpArr[indexRow][indexCol]) != 0) + easyStr = (tmpArr[indexRow][indexCol]).toString(); + if (((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i < 21) || + ((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i < 27) || + ((i % 9 == 3 || i % 9 == 4 || i % 9 == 5) && (i > 27 && i < 53)) || + ((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i > 53) || + ((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i > 53)) { + html += ""; + } + else { + html += ""; + } + if (i == 8 || i == 17 || i == 26 || i == 35 || i == 44 || i == 53 || i == 62 || i == 71) { + indexRow++; + } + indexCol++; + if (indexCol == 9) + indexCol = 0; + } + var box = document.querySelector(".sodoku__box"); + box.innerHTML = html; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/helper.js b/02-TypeScript/18-personalProject/EstiMauda/dist/helper.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/helper.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/index.js b/02-TypeScript/18-personalProject/EstiMauda/dist/index.js new file mode 100644 index 000000000..5fb5691b4 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/index.js @@ -0,0 +1,106 @@ +var formSingin = document.querySelector(".formSingin"); +var formSingup = document.querySelector(".formSingup"); +function handleSingin(event) { + var password = event.target.elements.password.valueAsNumber; +} +function handleSingup(event) { + var userName = event.target.elements.name.value; + var password = event.target.elements.password.valueAsNumber; + // const passwordRepeat = event.target.elements.passwordRepeat.valueAsNumber; + console.log("handleSingup"); + chackPassword(); + users.push(new Users(userName, password)); + randelDetails(); +} +function handleAddUsers(ev) { + try { + ev.preventDefault(); + // console.log(ev); + // const name = ev.target.elements.name.value; + // const password = ev.target.elements.password.valueAsNumber; + // const level = ev.target.elements.level.valueAsNumber; + // users.push(new Users(name, password, level)); + // // localStorage.setUsers('users',JSON.stringify(users)); + // console.log(users); + // ev.target.reset(); + // console.log(name); + // if (!usersRoot) throw new Error("usersRoot is null"); + // renderusers(users, "usersRoot"); + } + catch (error) { + console.error(error); + } +} +function handleViewPassword() { + try { + var passwordElement = document.querySelector(".pass"); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + console.log(passwordElement.type); + } + else { + passwordElement.type = "password"; + console.log(passwordElement.type); + } + } + catch (error) { + console.error(error); + } +} +function chackPassword() { + try { + var passwordElement = document.querySelector(".password"); + var passwordReapetElement = document.querySelector(".passwordRepeat"); + console.dir(passwordElement); + console.dir(passwordReapetElement); + do { + alert("The password is not same Try again"); + passwordElement.inputIndex = 0; + passwordReapetElement.innerHTML = 0; + } while (passwordElement.inputIndex != passwordReapetElement.innerHTML); + } + catch (error) { + console.error(error); + } +} +function renderusers(users, renderElementId) { + try { + if (!users || !Array.isArray(users)) + throw new Error("users is not an array"); + var html = users + .map(function (Users) { + return "\n
                    \n

                    " + Users.name + "

                    \n
                    level: " + Users.level + "
                    \n
                    \n "; + }) + .join(" "); + console.log(html); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +function handleDeleteUsers(uid) { + try { + console.log(uid); + var index = users.findIndex(function (Users) { return Users.uid === uid; }); + if (index === -1) + throw new Error("Users not found"); + users.splice(index, 1); + if (!usersRoot) + throw new Error("UsersRoot is undefined"); + renderusers(users, "usersRoot"); + // localStorage.setUsers("users", JSON.stringify(users)) + } + catch (error) { + console.error(error); + } +} +function handleSaveusers() { + console.log('save users'); + localStorage.setUsers('users', JSON.stringify(users)); +} +// renderUsers(users, "usersRoot"); diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/login.js b/02-TypeScript/18-personalProject/EstiMauda/dist/login.js new file mode 100644 index 000000000..855fa3b6a --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/login.js @@ -0,0 +1,119 @@ +var form = document.querySelector("#form"); +console.log(form); +function handleLogin(event) { + try { + if (!event) + throw new Error("Form Empty"); + event.preventDefault(); + console.log(event); + var userName = event.target.elements.username.value; + var password = event.target.elements.password.value; + var passwordRepeat = event.target.elements.passwordRepeat.value; + var level = event.target.elements.level.value; + console.log("pass " + password + " passR " + passwordRepeat + " userName log" + userName); + var passwordSame = true; + do { + if (passwordRepeat != password) { + event.target.elements.password.value = ""; + event.target.elements.passwordRepeat.value = ""; + alert("The password is not same Try again"); + } + } while (!passwordSame); + console.log(userName); + users.push(new Users(userName, password, level)); + console.log(users); + var tmpUser = users[users.length - 1].userName + "-" + users[users.length - 1].level; + var setStorg = localStorage.setItem("user", tmpUser); + location.href = 'soduko.html'; + } + catch (error) { + console.error(error); + } +} +// function renderUsers(users: Users[]): void { +// try { +// if (!users || !Array.isArray(users)) +// throw new Error("items is not an array"); +// // const storgUser = localStorage.setItem("user", ) +// } catch (error) { +// console.error(error); +// } +// } +// // function handleAddUsers(ev: any) { +// try { +// ev.preventDefault(); +// console.log(ev); +// const name = ev.target.elements.name.value; +// const password = ev.target.elements.password.valueAsNumber; +// users.push(new Users(userName, password, level)); +// localStorage.setUsers('users',JSON.stringify(users)); +// console.log(users); +// ev.target.reset(); +// console.log(name); +// if (!`ditail`) throw new Error("usersRoot is null"); +// renderusers(users, "ditail"); +// } catch (error) { +// console.error(error); +// } +// } +// function handleSaveItems(){ +// console.log('save items'); +// localStorage.setItem('items',JSON.stringify(items)); +// } +function handleViewPassword(classNAme) { + try { + var passwordElement = document.querySelector(classNAme); + console.dir(passwordElement); + if (passwordElement.type === "password") { + passwordElement.type = "text"; + console.log(passwordElement.type); + } + else { + passwordElement.type = "password"; + console.log(passwordElement.type); + } + } + catch (error) { + console.error(error); + } +} +// function renderusers(users: Users[], renderElementId: string): void { +// try { +// if (!users || !Array.isArray(users)) +// throw new Error("users is not an array"); +// const html = users +// .map((Users) => { +// return ` +//
                    +//

                    ${Users.userName}

                    +//
                    level: ${Users.password}
                    +//
                    +// `; +// }) +// .join(" "); +// console.log(html); +// const element = document.querySelector(`#${renderElementId}`); +// if (!element) throw new Error("Couldnt find element in the DOM"); +// element.innerHTML = html; +// } catch (error) { +// console.error(error); +// } +// } +// function handleDeleteUsers(uid: string) { +// try { +// console.log(uid); +// const index = users.findIndex((Users) => Users.uid === uid); +// if (index === -1) throw new Error("Users not found"); +// users.splice(index, 1); +// if (!usersRoot) throw new Error("UsersRoot is undefined"); +// renderusers(users, "usersRoot"); +// // localStorage.setUsers("users", JSON.stringify(users)) +// } catch (error) { +// console.error(error); +// } +// } +// function handleSaveusers(){ +// console.log('save users'); +// localStorage.setUsers('users',JSON.stringify(users)); +// } +// renderUsers(users, "usersRoot"); diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/model.js b/02-TypeScript/18-personalProject/EstiMauda/dist/model.js new file mode 100644 index 000000000..fab5bd0c6 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/model.js @@ -0,0 +1,76 @@ +var Users = /** @class */ (function () { + function Users(userName, password, level) { + this.userName = userName; + this.password = password; + this.level = level; + this.uid = uid(); + } + return Users; +}()); +var users = []; +var rowBox = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8], + [9, 10, 11, 12, 13, 14, 15, 16, 17], + [18, 19, 20, 21, 22, 23, 24, 25, 26], + [27, 28, 29, 30, 31, 32, 33, 34, 35], + [36, 37, 38, 39, 40, 41, 42, 43, 44], + [45, 46, 47, 48, 49, 50, 51, 52, 53], + [54, 55, 56, 57, 58, 59, 60, 61, 62], + [63, 64, 65, 66, 67, 68, 69, 70, 71], + [72, 73, 74, 75, 76, 77, 78, 79, 80], +]; +var boxBox = [ + [0, 1, 2, 9, 10, 11, 18, 19, 20], + [3, 4, 5, 12, 13, 14, 21, 22, 23], + [6, 7, 8, 15, 16, 17, 24, 25, 26], + [27, 28, 29, 36, 37, 38, 45, 46, 47], + [30, 31, 32, 39, 40, 41, 48, 49, 50], + [33, 34, 35, 42, 43, 44, 51, 52, 53], + [54, 55, 56, 63, 64, 65, 72, 73, 74], + [57, 58, 59, 66, 67, 68, 75, 76, 77], + [60, 61, 62, 69, 70, 71, 78, 79, 80], +]; +var box = [ + { row1: 0, row2: 1, row3: 2, col1: 0, col2: 1, col3: 2 }, + { row1: 0, row2: 1, row3: 2, col1: 3, col2: 4, col3: 5 }, + { row1: 0, row2: 1, row3: 2, col1: 6, col2: 7, col3: 8 }, + { row1: 3, row2: 4, row3: 5, col1: 0, col2: 1, col3: 2 }, + { row1: 3, row2: 4, row3: 5, col1: 3, col2: 4, col3: 5 }, + { row1: 3, row2: 4, row3: 5, col1: 6, col2: 7, col3: 8 }, + { row1: 6, row2: 7, row3: 8, col1: 0, col2: 1, col3: 2 }, + { row1: 6, row2: 7, row3: 8, col1: 3, col2: 4, col3: 5 }, + { row1: 6, row2: 7, row3: 8, col1: 6, col2: 7, col3: 8 }, +]; +var difficult = [ + [3, 0, 6, 5, 0, 8, 4, 0, 0], + [5, 2, 0, 0, 0, 0, 0, 0, 0], + [0, 8, 7, 0, 0, 0, 0, 3, 1], + [0, 0, 3, 0, 1, 0, 0, 8, 0], + [9, 0, 0, 8, 6, 3, 0, 0, 5], + [0, 5, 0, 0, 9, 0, 6, 0, 0], + [1, 3, 0, 0, 0, 0, 2, 5, 0], + [0, 0, 0, 0, 0, 0, 0, 7, 4], + [0, 0, 5, 2, 0, 6, 3, 0, 0], +]; +var middum = [ + [0, 1, 6, 5, 7, 8, 0, 9, 2], + [5, 0, 9, 1, 3, 4, 7, 6, 8], + [4, 8, 7, 6, 2, 9, 5, 3, 1], + [2, 6, 0, 4, 1, 0, 9, 8, 7], + [9, 7, 4, 8, 6, 3, 1, 0, 5], + [8, 5, 1, 7, 9, 2, 6, 4, 3], + [1, 3, 8, 9, 4, 0, 2, 5, 6], + [6, 0, 0, 3, 5, 1, 8, 7, 4], + [0, 4, 5, 2, 0, 6, 3, 1, 0] +]; +var easy = [ + [5, 3, 4, 6, 7, 0, 9, 1, 2], + [6, 7, 0, 1, 9, 5, 3, 4, 8], + [1, 9, 8, 3, 4, 2, 5, 6, 7], + [8, 5, 9, 7, 6, 0, 4, 2, 3], + [4, 2, 0, 8, 5, 3, 7, 9, 1], + [7, 1, 3, 9, 2, 4, 8, 5, 6], + [0, 6, 1, 5, 3, 7, 0, 8, 4], + [2, 8, 7, 4, 1, 9, 6, 3, 5], + [3, 0, 5, 2, 8, 6, 1, 0, 9] +]; diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/sodoku.js b/02-TypeScript/18-personalProject/EstiMauda/dist/sodoku.js new file mode 100644 index 000000000..ac25b1523 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/sodoku.js @@ -0,0 +1,27 @@ +// const storgUser = localStorage.getItem("user", users[1].uid) +var __spreadArrays = (this && this.__spreadArrays) || function () { + for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; + for (var r = Array(s), k = 0, i = 0; i < il; i++) + for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) + r[k] = a[j]; + return r; +}; +// drawBox() +var getInfo = localStorage.getItem("user"); +var tmpArr = []; +var getInfoStr = []; +if (getInfo != null) { + getInfoStr = getInfo.split('-'); + console.log(getInfoStr); + if (getInfoStr[1] == "easy") + tmpArr = __spreadArrays(easy); + if (getInfoStr[1] == "middum") + tmpArr = __spreadArrays(middum); + if (getInfoStr[1] == "difficalt") + tmpArr = __spreadArrays(difficult); +} +var element = document.querySelector("h2"); +element.innerHTML = getInfoStr[0] + " Welcome to " + getInfoStr[1] + " game"; +console.log(tmpArr); +drawBox(); +playInGrid(); diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/style.css b/02-TypeScript/18-personalProject/EstiMauda/dist/style.css new file mode 100644 index 000000000..eb1a64681 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/style.css @@ -0,0 +1,89 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + border-spacing: 0; +} + +html { + font-family: Georgia, sans-serif; + background-color: #ebf2f5; + height: 100%; +} + +h1 { + color: #358ec9; + font-size: 35px; + letter-spacing: 1px; + margin: 30px 0px 10px 0px; + text-align: center; +} + +h2 { + color: #358ec9; + font-size: 25px; + letter-spacing: 1px; + margin: 10px 0px 3px 0px; + text-align: center; +} + +.sodoku { + margin: auto; + width: 50%; +} +.sodoku__box { + width: 450px; + height: 450px; + margin-left: 400px; +} +.sodoku__box__input { + text-align: center; + font-size: 30px; + width: 50px; + height: 50px; + background: #808080; + border: 1px black solid; +} +.sodoku__box__inputWhite { + background: #d3d3d3; +} +.sodoku__box__empty-el { + color: #4848d4; +} + +.btnDiv { + display: inline-block; + align-items: center; + margin-left: 520px; + margin-top: 5px; +} +.btnDiv__btn { + background: #358ec9; + border: none; + border-radius: 3px; + color: white; + padding: 10px 23px; + text-align: center; + font-size: 15px; + letter-spacing: 1px; + cursor: pointer; +} + +.pass { + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; +} + +form { + font-size: 30px; + text-align: center; +} + +input { + border-radius: 2px black solid; + padding: 6px; + border-radius: 3px; + font-family: georgia; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/EstiMauda/dist/test.js b/02-TypeScript/18-personalProject/EstiMauda/dist/test.js new file mode 100644 index 000000000..0db5be6a6 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/dist/test.js @@ -0,0 +1,28 @@ +var form = document.querySelector("#theForm"); +function handleAddItem(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var color = ev.target.elements.color.value; + var price = ev.target.elements.price.valueAsNumber; + var category = ev.target.elements.category.value; + var size = ev.target.elements.size.valueAsNumber; + var sn = ev.target.elements.sn.value; + items.push(new Item(name, color, price, category, size, sn)); + // localStorage.setItem('items',JSON.stringify(items)); + console.log(items); + ev.target.reset(); + console.log(name); + if (!itemsRoot) + throw new Error("itemsRoot is null"); + renderItems(items, "itemsRoot"); + } + catch (error) { + console.error(error); + } +} +function handleSaveItems() { + console.log('save items'); + localStorage.setItem('items', JSON.stringify(items)); +} diff --git a/02-TypeScript/18-personalProject/EstiMauda/drawBox.ts b/02-TypeScript/18-personalProject/EstiMauda/drawBox.ts new file mode 100644 index 000000000..e59a16ee4 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/drawBox.ts @@ -0,0 +1,49 @@ + +const numBox = 81 +let indexRowBox = 1 +let indexRow = 0 +let indexCol = 0 +let grayBox = true + +function drawBox(){ + try{ + console.log(tmpArr); + + let html = ""; + if(document.querySelector(".sodoku__box__input") != null ){ + document.querySelector(".sodoku__box__input")!.remove + } + for(let i = 0; i < numBox; i++ ){ + let easyStr:string = "" + if((tmpArr[indexRow] [indexCol]) != 0) + easyStr = (tmpArr[indexRow] [indexCol]).toString() + + if (((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i < 21) || + ((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i < 27) || + ((i % 9 == 3 || i % 9 == 4 || i % 9 == 5) && (i > 27 && i < 53)) || + ((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i > 53) || + ((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i > 53)){ + html += `` + }else{ + html += `` + } + if(i==8 || i==17 || i==26 || i==35 || i==44 || i==53 || i==62 || i==71 ){ + indexRow ++ + } + + indexCol ++ + if (indexCol == 9) indexCol = 0 + + } + + + let box = document.querySelector(".sodoku__box") as HTMLDivElement; + box.innerHTML = html + + + + }catch(error){ + console.error(error) + } +} + diff --git a/02-TypeScript/18-personalProject/EstiMauda/helper.ts b/02-TypeScript/18-personalProject/EstiMauda/helper.ts new file mode 100644 index 000000000..699c7218e --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/helper.ts @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/EstiMauda/login.html b/02-TypeScript/18-personalProject/EstiMauda/login.html new file mode 100644 index 000000000..dfa76cd54 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/login.html @@ -0,0 +1,37 @@ + + + + + + + + Login + + + + + + + + + + + +
                    + +

                    Login

                    +
                    +
                    +
                    +

                    + +

                    + +
                    +
                    + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/EstiMauda/login.ts b/02-TypeScript/18-personalProject/EstiMauda/login.ts new file mode 100644 index 000000000..2dbe2cb0e --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/login.ts @@ -0,0 +1,154 @@ + +const form = document.querySelector("#form") as HTMLFormElement; +console.log(form) + +function handleLogin(event){ + try { + if(!event) throw new Error("Form Empty"); + + event.preventDefault(); + console.log(event); + + const userName = event.target.elements.username.value; + const password = event.target.elements.password.value; + const passwordRepeat = event.target.elements.passwordRepeat.value; + const level = event.target.elements.level.value; + + console.log(`pass ${password} passR ${passwordRepeat} userName log${userName}`) + let passwordSame = true + do{ + if(passwordRepeat != password){ + event.target.elements.password.value = "" + event.target.elements.passwordRepeat.value = "" + alert("The password is not same Try again") + + } + } while (!passwordSame) + + console.log(userName); + + users.push(new Users(userName, password, level)); + console.log(users) + const tmpUser = `${users[users.length-1].userName}-${users[users.length-1].level}` + const setStorg = localStorage.setItem("user", tmpUser) + + + location.href = 'soduko.html' + + } catch (error) { + console.error(error) + } +} + + +// function renderUsers(users: Users[]): void { +// try { +// if (!users || !Array.isArray(users)) +// throw new Error("items is not an array"); + + +// // const storgUser = localStorage.setItem("user", ) + + +// } catch (error) { +// console.error(error); +// } +// } +// // function handleAddUsers(ev: any) { +// try { +// ev.preventDefault(); + +// console.log(ev); + +// const name = ev.target.elements.name.value; +// const password = ev.target.elements.password.valueAsNumber; + +// users.push(new Users(userName, password, level)); +// localStorage.setUsers('users',JSON.stringify(users)); +// console.log(users); +// ev.target.reset(); + +// console.log(name); +// if (!`ditail`) throw new Error("usersRoot is null"); + +// renderusers(users, "ditail"); +// } catch (error) { +// console.error(error); +// } +// } + +// function handleSaveItems(){ +// console.log('save items'); +// localStorage.setItem('items',JSON.stringify(items)); +// } + +function handleViewPassword(classNAme:string): void { + + try { + const passwordElement: any = document.querySelector(classNAme); + console.dir(passwordElement); + + + if (passwordElement.type === "password") { + passwordElement.type = "text"; + console.log(passwordElement.type); + + } else { + passwordElement.type = "password"; + console.log(passwordElement.type); + } + + } catch (error) { + console.error(error); + } +} + + + +// function renderusers(users: Users[], renderElementId: string): void { +// try { +// if (!users || !Array.isArray(users)) +// throw new Error("users is not an array"); + +// const html = users +// .map((Users) => { +// return ` +//
                    +//

                    ${Users.userName}

                    +//
                    level: ${Users.password}
                    +//
                    +// `; +// }) +// .join(" "); +// console.log(html); +// const element = document.querySelector(`#${renderElementId}`); +// if (!element) throw new Error("Couldnt find element in the DOM"); +// element.innerHTML = html; +// } catch (error) { +// console.error(error); +// } +// } + + +// function handleDeleteUsers(uid: string) { +// try { + // console.log(uid); + // const index = users.findIndex((Users) => Users.uid === uid); + // if (index === -1) throw new Error("Users not found"); + // users.splice(index, 1); + + // if (!usersRoot) throw new Error("UsersRoot is undefined"); + // renderusers(users, "usersRoot"); + // // localStorage.setUsers("users", JSON.stringify(users)) +// } catch (error) { +// console.error(error); +// } +// } + + +// function handleSaveusers(){ +// console.log('save users'); + // localStorage.setUsers('users',JSON.stringify(users)); +// } + +// renderUsers(users, "usersRoot"); diff --git a/02-TypeScript/18-personalProject/EstiMauda/model.ts b/02-TypeScript/18-personalProject/EstiMauda/model.ts new file mode 100644 index 000000000..d7b0f6867 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/model.ts @@ -0,0 +1,100 @@ + +class Users { + uid: string; + + + constructor( + public userName: string, + public password: number, + public level:string + ){ + this.uid = uid(); + } +} + +const users: Users[] = []; + + + +const rowBox = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8], + [9, 10, 11, 12, 13, 14, 15, 16, 17], + [18, 19, 20, 21, 22, 23, 24, 25, 26], + [27, 28, 29, 30, 31, 32, 33, 34, 35], + [36, 37, 38, 39, 40, 41, 42, 43, 44], + [45, 46, 47, 48, 49, 50, 51, 52, 53], + [54, 55, 56, 57, 58, 59, 60, 61, 62], + [63, 64, 65, 66, 67, 68, 69, 70, 71], + [72, 73, 74, 75, 76, 77, 78, 79, 80], +] + + +const boxBox = [ + [0, 1, 2, 9, 10, 11, 18, 19, 20], + [3, 4, 5, 12, 13, 14, 21, 22, 23], + [6, 7, 8, 15, 16, 17, 24, 25, 26], + [27, 28, 29, 36, 37, 38, 45, 46, 47], + [30, 31, 32, 39, 40, 41, 48, 49, 50], + [33, 34, 35, 42, 43, 44, 51, 52, 53], + [54, 55, 56, 63, 64, 65, 72, 73, 74], + [57, 58, 59, 66, 67, 68, 75, 76, 77], + [60, 61, 62, 69, 70, 71, 78, 79, 80], + +] + +const box : {row1: number, row2:number, row3:number, col1: number, col2: number, col3: number} []= [ + {row1: 0, row2:1, row3:2, col1: 0, col2: 1, col3: 2}, + {row1: 0, row2:1, row3:2, col1: 3, col2: 4, col3: 5}, + {row1: 0, row2:1, row3:2, col1: 6, col2: 7, col3: 8}, + {row1: 3, row2:4, row3:5, col1: 0, col2: 1, col3: 2}, + {row1: 3, row2:4, row3:5, col1: 3, col2: 4, col3: 5}, + {row1: 3, row2:4, row3:5, col1: 6, col2: 7, col3: 8}, + {row1: 6, row2:7, row3:8, col1: 0, col2: 1, col3: 2}, + {row1: 6, row2:7, row3:8, col1: 3, col2: 4, col3: 5}, + {row1: 6, row2:7, row3:8, col1: 6, col2: 7, col3: 8}, +] + + + + + + + +const difficult = [ + [3, 0, 6, 5, 0, 8, 4, 0, 0], + [5, 2, 0, 0, 0, 0, 0, 0, 0], + [0, 8, 7, 0, 0, 0, 0, 3, 1], + [0, 0, 3, 0, 1, 0, 0, 8, 0], + [9, 0, 0, 8, 6, 3, 0, 0, 5], + [0, 5, 0, 0, 9, 0, 6, 0, 0], + [1, 3, 0, 0, 0, 0, 2, 5, 0], + [0, 0, 0, 0, 0, 0, 0, 7, 4], + [0, 0, 5, 2, 0, 6, 3, 0, 0], + ] + + const middum = [ + [0, 1, 6, 5, 7, 8, 0, 9, 2], + [5, 0, 9, 1, 3, 4, 7, 6, 8], + [4, 8, 7, 6, 2, 9, 5, 3, 1], + [2, 6, 0, 4, 1, 0, 9, 8, 7], + [9, 7, 4, 8, 6, 3, 1, 0, 5], + [8, 5, 1, 7, 9, 2, 6, 4, 3], + [1, 3, 8, 9, 4, 0, 2, 5, 6], + [6, 0, 0, 3, 5, 1, 8, 7, 4], + [0, 4, 5, 2, 0, 6, 3, 1, 0] + ] + + + const easy = [ + [5, 3, 4, 6, 7, 0, 9, 1, 2], + [6, 7, 0, 1, 9, 5, 3, 4, 8], + [1, 9, 8, 3, 4, 2, 5, 6, 7], + [8, 5, 9, 7, 6, 0, 4, 2, 3], + [4, 2, 0, 8, 5, 3, 7, 9, 1], + [7, 1, 3, 9, 2, 4, 8, 5, 6], + [0, 6, 1, 5, 3, 7, 0, 8, 4], + [2, 8, 7, 4, 1, 9, 6, 3, 5], + [3, 0, 5, 2, 8, 6, 1, 0, 9] +] + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/EstiMauda/sodoku.ts b/02-TypeScript/18-personalProject/EstiMauda/sodoku.ts new file mode 100644 index 000000000..6887ead56 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/sodoku.ts @@ -0,0 +1,28 @@ + + +// const storgUser = localStorage.getItem("user", users[1].uid) + +// drawBox() + +const getInfo = localStorage.getItem("user") +let tmpArr:any = []; +let getInfoStr:any = []; + +if(getInfo != null){ + getInfoStr = getInfo.split('-') + console.log(getInfoStr); + + if (getInfoStr[1] == "easy") tmpArr = [...easy] + if (getInfoStr[1] == "middum") tmpArr = [...middum] + if (getInfoStr[1] == "difficalt") tmpArr = [...difficult] +} + + const element = document.querySelector("h2") as HTMLElement; + element.innerHTML = `${getInfoStr[0]} Welcome to ${getInfoStr[1]} game` ; + console.log(tmpArr); + + +drawBox() + +playInGrid() + diff --git a/02-TypeScript/18-personalProject/EstiMauda/soduko.html b/02-TypeScript/18-personalProject/EstiMauda/soduko.html new file mode 100644 index 000000000..790761598 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/soduko.html @@ -0,0 +1,29 @@ + + + + + + + Sodoku + + + + + + + + Go to Home Page + +

                    Sodoku

                    +

                    +
                    +
                    +
                    +
                    + +
                    + + +
                    + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/EstiMauda/style.scss b/02-TypeScript/18-personalProject/EstiMauda/style.scss new file mode 100644 index 000000000..a284f1399 --- /dev/null +++ b/02-TypeScript/18-personalProject/EstiMauda/style.scss @@ -0,0 +1,99 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + border-spacing: 0; + +} + +html { + font-family: Georgia, sans-serif; + background-color: #ebf2f5; + height: 100%; + +} +h1 { + color: #358ec9; + font-size: 35px; + letter-spacing: 1px; + margin: 30px 0px 10px 0px; + text-align: center; +} +h2 { + color: #358ec9; + font-size: 25px; + letter-spacing: 1px; + margin: 10px 0px 3px 0px; + text-align: center; +} + + +.sodoku{ + margin: auto; + width: 50%; + + + &__box{ + width: 450px; + height: 450px; + margin-left: 400px; + + + + &__input { + text-align: center; + font-size: 30px; + width: 50px; + height: 50px; + background: #808080; + border: 1px black solid; + } + + &__inputWhite { + background: #d3d3d3; + } + + &__empty-el { + color: #4848d4; + } + } + +} + +.btnDiv{ + + display: inline-block; + align-items: center; + margin-left: 520px; + margin-top: 5px; + + &__btn{ + background: #358ec9; + border: none; + border-radius: 3px; + color: white; + padding: 10px 23px; + text-align: center; + font-size: 15px; + letter-spacing: 1px; + cursor: pointer; + } +} +.pass{ + background-image: url(https://cdn-icons-png.flaticon.com/128/2767/2767146.png); + background-position: right; + background-size: 20px; + background-repeat: no-repeat; +} + +form{ + font-size: 30px; + text-align: center; +} + +input{ + border-radius: 2px black solid; + padding: 6px; + border-radius: 3px; + font-family: georgia; +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/.gitignore b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/index.html b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/index.html new file mode 100644 index 000000000..e9e80cc2c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/index.html @@ -0,0 +1,29 @@ + + + + + + + classroom + + + + + + + + + +
                    + + + diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/package-lock.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/package-lock.json new file mode 100644 index 000000000..cea9239e2 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/package-lock.json @@ -0,0 +1,2224 @@ +{ + "name": "classroom-project", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "classroom-project", + "version": "0.0.0", + "dependencies": { + "@emotion/react": "^11.10.4", + "@emotion/styled": "^11.10.4", + "@mui/material": "^5.10.4", + "axios": "^1.2.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^5.3.0" + }, + "devDependencies": { + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "@types/react-router-dom": "^5.3.3", + "@vitejs/plugin-react": "^3.0.0", + "typescript": "^4.9.3", + "vite": "^4.0.0" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", + "dependencies": { + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", + "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "dependencies": { + "@babel/highlight": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.20.10", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.10.tgz", + "integrity": "sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz", + "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==", + "dependencies": { + "@ampproject/remapping": "^2.1.0", + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.7", + "@babel/helper-compilation-targets": "^7.20.7", + "@babel/helper-module-transforms": "^7.20.11", + "@babel/helpers": "^7.20.7", + "@babel/parser": "^7.20.7", + "@babel/template": "^7.20.7", + "@babel/traverse": "^7.20.12", + "@babel/types": "^7.20.7", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.2", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.7.tgz", + "integrity": "sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==", + "dependencies": { + "@babel/types": "^7.20.7", + "@jridgewell/gen-mapping": "^0.3.2", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz", + "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==", + "dependencies": { + "@babel/compat-data": "^7.20.5", + "@babel/helper-validator-option": "^7.18.6", + "browserslist": "^4.21.3", + "lru-cache": "^5.1.1", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", + "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", + "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "dependencies": { + "@babel/template": "^7.18.10", + "@babel/types": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", + "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", + "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.20.11", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz", + "integrity": "sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==", + "dependencies": { + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-simple-access": "^7.20.2", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/helper-validator-identifier": "^7.19.1", + "@babel/template": "^7.20.7", + "@babel/traverse": "^7.20.10", + "@babel/types": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", + "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz", + "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==", + "dependencies": { + "@babel/types": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", + "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz", + "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.7.tgz", + "integrity": "sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==", + "dependencies": { + "@babel/template": "^7.20.7", + "@babel/traverse": "^7.20.7", + "@babel/types": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz", + "integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==", + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz", + "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz", + "integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.19.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz", + "integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz", + "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==", + "dependencies": { + "regenerator-runtime": "^0.13.11" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/template": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", + "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==", + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.12.tgz", + "integrity": "sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==", + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.7", + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-function-name": "^7.19.0", + "@babel/helper-hoist-variables": "^7.18.6", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz", + "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==", + "dependencies": { + "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-validator-identifier": "^7.19.1", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/babel-plugin": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz", + "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/plugin-syntax-jsx": "^7.17.12", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/serialize": "^1.1.1", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.1.3" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/cache": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz", + "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==", + "dependencies": { + "@emotion/memoize": "^0.8.0", + "@emotion/sheet": "^1.2.1", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "stylis": "4.1.3" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz", + "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/react": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz", + "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.5", + "@emotion/cache": "^11.10.5", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0", + "@emotion/weak-memoize": "^0.3.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==", + "dependencies": { + "@emotion/hash": "^0.9.0", + "@emotion/memoize": "^0.8.0", + "@emotion/unitless": "^0.8.0", + "@emotion/utils": "^1.2.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, + "node_modules/@emotion/sheet": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz", + "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==" + }, + "node_modules/@emotion/styled": { + "version": "11.10.5", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz", + "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.10.5", + "@emotion/is-prop-valid": "^1.2.0", + "@emotion/serialize": "^1.1.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@emotion/utils": "^1.2.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", + "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz", + "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz", + "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==" + }, + "node_modules/@esbuild/android-arm": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.14.tgz", + "integrity": "sha512-u0rITLxFIeYAvtJXBQNhNuV4YZe+MD1YvIWT7Nicj8hZAtRVZk2PgNH6KclcKDVHz1ChLKXRfX7d7tkbQBUfrg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.16.14.tgz", + "integrity": "sha512-hTqB6Iq13pW4xaydeqQrs8vPntUnMjbkq+PgGiBMi69eYk74naG2ftHWqKnxn874kNrt5Or3rQ0PJutx2doJuQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.16.14.tgz", + "integrity": "sha512-jir51K4J0K5Rt0KOcippjSNdOl7akKDVz5I6yrqdk4/m9y+rldGptQUF7qU4YpX8U61LtR+w2Tu2Ph+K/UaJOw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.16.14.tgz", + "integrity": "sha512-vrlaP81IuwPaw1fyX8fHCmivP3Gr73ojVEZy+oWJLAiZVcG8o8Phwun/XDnYIFUHxIoUnMFEpg9o38MIvlw8zw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.16.14.tgz", + "integrity": "sha512-KV1E01eC2hGYA2qzFDRCK4wdZCRUvMwCNcobgpiiOzp5QXpJBqFPdxI69j8vvzuU7oxFXDgANwEkXvpeQqyOyg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.14.tgz", + "integrity": "sha512-xRM1RQsazSvL42BNa5XC7ytD4ZDp0ZyJcH7aB0SlYUcHexJUKiDNKR7dlRVlpt6W0DvoRPU2nWK/9/QWS4u2fw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.16.14.tgz", + "integrity": "sha512-7ALTAn6YRRf1O6fw9jmn0rWmOx3XfwDo7njGtjy1LXhDGUjTY/vohEPM3ii5MQ411vJv1r498EEx2aBQTJcrEw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.16.14.tgz", + "integrity": "sha512-X6xULug66ulrr4IzrW7qq+eq9n4MtEyagdWvj4o4cmWr+JXOT47atjpDF9j5M2zHY0UQBmqnHhwl+tXpkpIb2w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.16.14.tgz", + "integrity": "sha512-TLh2OcbBUQcMYRH4GbiDkDZfZ4t1A3GgmeXY27dHSI6xrU7IkO00MGBiJySmEV6sH3Wa6pAN6UtaVL0DwkGW4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.16.14.tgz", + "integrity": "sha512-oBZkcZ56UZDFCAfE3Fd/Jgy10EoS7Td77NzNGenM+HSY8BkdQAcI9VF9qgwdOLZ+tuftWD7UqZ26SAhtvA3XhA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.16.14.tgz", + "integrity": "sha512-udz/aEHTcuHP+xdWOJmZ5C9RQXHfZd/EhCnTi1Hfay37zH3lBxn/fNs85LA9HlsniFw2zccgcbrrTMKk7Cn1Qg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.16.14.tgz", + "integrity": "sha512-kJ2iEnikUOdC1SiTGbH0fJUgpZwa0ITDTvj9EHf9lm3I0hZ4Yugsb3M6XSl696jVxrEocLe519/8CbSpQWFSrg==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.16.14.tgz", + "integrity": "sha512-kclKxvZvX5YhykwlJ/K9ljiY4THe5vXubXpWmr7q3Zu3WxKnUe1VOZmhkEZlqtnJx31GHPEV4SIG95IqTdfgfg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.16.14.tgz", + "integrity": "sha512-fdwP9Dc+Kx/cZwp9T9kNqjAE/PQjfrxbio4rZ3XnC3cVvZBjuxpkiyu/tuCwt6SbAK5th6AYNjFdEV9kGC020A==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.16.14.tgz", + "integrity": "sha512-++fw3P4fQk9nqvdzbANRqimKspL8pDCnSpXomyhV7V/ISha/BZIYvZwLBWVKp9CVWKwWPJ4ktsezuLIvlJRHqA==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.16.14.tgz", + "integrity": "sha512-TomtswAuzBf2NnddlrS4W01Tv85RM9YtATB3OugY6On0PLM4Ksz5qvQKVAjtzPKoLgL1FiZtfc8mkZc4IgoMEA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.16.14.tgz", + "integrity": "sha512-U06pfx8P5CqyoPNfqIJmnf+5/r4mJ1S62G4zE6eOjS59naQcxi6GnscUCPH3b+hRG0qdKoGX49RAyiqW+M9aSw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.16.14.tgz", + "integrity": "sha512-/Jl8XVaWEZNu9rZw+n792GIBupQwHo6GDoapHSb/2xp/Ku28eK6QpR2O9cPBkzHH4OOoMH0LB6zg/qczJ5TTGg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.16.14.tgz", + "integrity": "sha512-2iI7D34uTbDn/TaSiUbEHz+fUa8KbN90vX5yYqo12QGpu6T8Jl+kxODsWuMCwoTVlqUpwfPV22nBbFPME9OPtw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.16.14.tgz", + "integrity": "sha512-SjlM7AHmQVTiGBJE/nqauY1aDh80UBsXZ94g4g60CDkrDMseatiqALVcIuElg4ZSYzJs8hsg5W6zS2zLpZTVgg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.16.14.tgz", + "integrity": "sha512-z06t5zqk8ak0Xom5HG81z2iOQ1hNWYsFQp3sczVLVx+dctWdgl80tNRyTbwjaFfui2vFO12dfE3trCTvA+HO4g==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.16.14.tgz", + "integrity": "sha512-ED1UpWcM6lAbalbbQ9TrGqJh4Y9TaASUvu8bI/0mgJcxhSByJ6rbpgqRhxYMaQ682WfA71nxUreaTO7L275zrw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", + "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", + "dependencies": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + } + }, + "node_modules/@mui/base": { + "version": "5.0.0-alpha.112", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.112.tgz", + "integrity": "sha512-KPwb1iYPXsV/P8uu0SNQrj7v7YU6wdN4Eccc2lZQyRDW+f6PJYjHBuFUTYKc408B98Jvs1XbC/z5MN45a2DWrQ==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@emotion/is-prop-valid": "^1.2.0", + "@mui/types": "^7.2.3", + "@mui/utils": "^5.11.2", + "@popperjs/core": "^2.11.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/core-downloads-tracker": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.3.tgz", + "integrity": "sha512-Bgb6//KtxY7IC7M5Pa5RKFX1wttc213mqpKqydnz3wn4BGDXfA5c0vf5nTu5zqsJeB4T3ysAJTRJhQ/E1GsZDQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + } + }, + "node_modules/@mui/material": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.3.tgz", + "integrity": "sha512-Oz+rMFiMtxzzDLUxKyyj4mSxF9ShmsBoJ9qvglXCYqklgSrEl1R/Z4hfPZ+2pWd5CriO8U/0CFHr4DksrlTiCw==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@mui/base": "5.0.0-alpha.112", + "@mui/core-downloads-tracker": "^5.11.3", + "@mui/system": "^5.11.2", + "@mui/types": "^7.2.3", + "@mui/utils": "^5.11.2", + "@types/react-transition-group": "^4.4.5", + "clsx": "^1.2.1", + "csstype": "^3.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.2.tgz", + "integrity": "sha512-qZwMaqRFPwlYmqwVKblKBGKtIjJRAj3nsvX93pOmatsXyorW7N/0IPE/swPgz1VwChXhHO75DwBEx8tB+aRMNg==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@mui/utils": "^5.11.2", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/styled-engine": { + "version": "5.11.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz", + "integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==", + "dependencies": { + "@babel/runtime": "^7.20.6", + "@emotion/cache": "^11.10.5", + "csstype": "^3.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.2.tgz", + "integrity": "sha512-PPkYhrcP2MkhscX6SauIl0wPgra0w1LGPtll+hIKc2Z2JbGRSrUCFif93kxejB7I1cAoCay9jWW4mnNhsOqF/g==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@mui/private-theming": "^5.11.2", + "@mui/styled-engine": "^5.11.0", + "@mui/types": "^7.2.3", + "@mui/utils": "^5.11.2", + "clsx": "^1.2.1", + "csstype": "^3.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/types": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz", + "integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.2.tgz", + "integrity": "sha512-AyizuHHlGdAtH5hOOXBW3kriuIwUIKUIgg0P7LzMvzf6jPhoQbENYqY6zJqfoZ7fAWMNNYT8mgN5EftNGzwE2w==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@types/prop-types": "^15.7.5", + "@types/react-is": "^16.7.1 || ^17.0.0", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" + }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "node_modules/@types/react": { + "version": "18.0.26", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz", + "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz", + "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-is": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", + "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "dev": true, + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dev": true, + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, + "node_modules/@vitejs/plugin-react": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.0.1.tgz", + "integrity": "sha512-mx+QvYwIbbpOIJw+hypjnW1lAbKDHtWK5ibkF/V1/oMBu8HU/chb+SnqJDAsLq1+7rGqjktCEomMTM5KShzUKQ==", + "dev": true, + "dependencies": { + "@babel/core": "^7.20.7", + "@babel/plugin-transform-react-jsx-self": "^7.18.6", + "@babel/plugin-transform-react-jsx-source": "^7.19.6", + "magic-string": "^0.27.0", + "react-refresh": "^0.14.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.0.0" + } + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz", + "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/browserslist": { + "version": "4.21.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", + "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001400", + "electron-to-chromium": "^1.4.251", + "node-releases": "^2.0.6", + "update-browserslist-db": "^1.0.9" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001442", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz", + "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.4.284", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", + "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/esbuild": { + "version": "0.16.14", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.14.tgz", + "integrity": "sha512-6xAn3O6ZZyoxZAEkwfI9hw4cEqSr/o1ViJtnkvImVkblmUN65Md04o0S/7H1WNu1XGf1Cjij/on7VO4psIYjkw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.16.14", + "@esbuild/android-arm64": "0.16.14", + "@esbuild/android-x64": "0.16.14", + "@esbuild/darwin-arm64": "0.16.14", + "@esbuild/darwin-x64": "0.16.14", + "@esbuild/freebsd-arm64": "0.16.14", + "@esbuild/freebsd-x64": "0.16.14", + "@esbuild/linux-arm": "0.16.14", + "@esbuild/linux-arm64": "0.16.14", + "@esbuild/linux-ia32": "0.16.14", + "@esbuild/linux-loong64": "0.16.14", + "@esbuild/linux-mips64el": "0.16.14", + "@esbuild/linux-ppc64": "0.16.14", + "@esbuild/linux-riscv64": "0.16.14", + "@esbuild/linux-s390x": "0.16.14", + "@esbuild/linux-x64": "0.16.14", + "@esbuild/netbsd-x64": "0.16.14", + "@esbuild/openbsd-x64": "0.16.14", + "@esbuild/sunos-x64": "0.16.14", + "@esbuild/win32-arm64": "0.16.14", + "@esbuild/win32-ia32": "0.16.14", + "@esbuild/win32-x64": "0.16.14" + } + }, + "node_modules/escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "engines": { + "node": ">=4" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/magic-string": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", + "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "dev": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", + "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==" + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "node_modules/path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "dependencies": { + "isarray": "0.0.1" + } + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, + "node_modules/postcss": { + "version": "8.4.20", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz", + "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/react-refresh": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz", + "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz", + "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router/node_modules/mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "dependencies": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, + "node_modules/react-router/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "engines": { + "node": ">=4" + } + }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, + "node_modules/rollup": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.9.1.tgz", + "integrity": "sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stylis": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", + "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==" + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "engines": { + "node": ">=4" + } + }, + "node_modules/typescript": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", + "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist-lint": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, + "node_modules/vite": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz", + "integrity": "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==", + "dev": true, + "dependencies": { + "esbuild": "^0.16.3", + "postcss": "^8.4.20", + "resolve": "^1.22.1", + "rollup": "^3.7.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + } + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/package.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/package.json new file mode 100644 index 000000000..6c555ffa5 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/package.json @@ -0,0 +1,28 @@ +{ + "name": "classroom-project", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.10.4", + "@emotion/styled": "^11.10.4", + "@mui/material": "^5.10.4", + "axios": "^1.2.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^5.3.0" + }, + "devDependencies": { + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "@types/react-router-dom": "^5.3.3", + "@vitejs/plugin-react": "^3.0.0", + "typescript": "^4.9.3", + "vite": "^4.0.0" + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/public/vite.svg b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/App.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/App.tsx new file mode 100644 index 000000000..d7c72902a --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/App.tsx @@ -0,0 +1,25 @@ +import Navbar from "./componenets/Navbar/Navbar"; +import { Switch, Route, Redirect } from "react-router-dom"; +import RouteMaster from "./routes/routes"; +import { CLASSES_PATH } from "./consts/routes"; + + +function App() { + return ( +
                    + + + {RouteMaster.map((routeElement, index) => ( + } + /> + ))} + + +
                    + ); +} + +export default App; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/GenericFeild.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/GenericFeild.tsx new file mode 100644 index 000000000..be6b12165 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/GenericFeild.tsx @@ -0,0 +1,37 @@ +import { FC } from "react"; + +// interfaces +import { IGenericFeild } from "./IGenericFeild"; + +// css & mui +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import "./genericfield.css"; +import { useColorUpdate } from "../../context/contextTheme"; + +const GenericFeild: FC = ({ + formTitle, + formFeilds, + buttonTitle, +}) => { + const { currColor } = useColorUpdate(); + return ( +
                    +
                    {formTitle}
                    + + {formFeilds.map((element,index) => ( +
                    + { + console.log(value.target.value) + }}/> +
                    + ))} + + +
                    + ); +}; + +export default GenericFeild; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/IGenericFeild.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/IGenericFeild.ts new file mode 100644 index 000000000..f1b220074 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/IGenericFeild.ts @@ -0,0 +1,5 @@ +export interface IGenericFeild { + formTitle: string + formFeilds: string[] + buttonTitle: string +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/genericfield.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/genericfield.css new file mode 100644 index 000000000..c05331438 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericFeild.tsx/genericfield.css @@ -0,0 +1,11 @@ +.formWrapper{ + padding-top: 1rem; +} + +.formTitle{ + font-size: 2rem; + padding-bottom: 1rem; +} +.formField{ + padding-bottom: 1rem; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/GenericPopup.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/GenericPopup.tsx new file mode 100644 index 000000000..37c0e3c8c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/GenericPopup.tsx @@ -0,0 +1,61 @@ +import { FC } from "react"; + +// hooks +import { useColorUpdate } from "../../context/contextTheme"; + +// interfaces +import { IGenericPopup } from "./IGenericPopup"; + +// css & mui +import { + Dialog, + DialogTitle, + DialogContent, + DialogContentText, +} from "@mui/material"; +import "./genericPopup.css"; + +const GenericPopup: FC = ({ + leftIcon, + rightIcon, + objectsToDisplay, + textDisplayHandler, + setIsPopupOpen, + isPopupOpen, + rightIconFunc, +}) => { + const { currColor } = useColorUpdate(); + return ( +
                    + + Class Students + + {objectsToDisplay.map((element, index) => ( + + + {leftIcon} + + + {textDisplayHandler(element)} + + { + rightIconFunc(element); + setIsPopupOpen(false); + }} + > + {rightIcon} + + + ))} + +
                    + ); +}; + +export default GenericPopup; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/IGenericPopup.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/IGenericPopup.tsx new file mode 100644 index 000000000..80bf1d97a --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/IGenericPopup.tsx @@ -0,0 +1,11 @@ +export interface IGenericPopup { + objectsToDisplay: any[] + textDisplayHandler: (obj:any) => string + leftIcon: string + rightIcon: string + isPopupOpen: boolean + setIsPopupOpen: React.Dispatch> + rightIconFunc: any +} + +//need to add a right icon function \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/genericPopup.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/genericPopup.css new file mode 100644 index 000000000..78c7241ff --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/GenericPopup/genericPopup.css @@ -0,0 +1,10 @@ +.popupText{ + display: flex; + align-items: center; + justify-content: space-between; + width: 15rem; +} + +.mainText{ + color: black; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Navbar.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Navbar.tsx new file mode 100644 index 000000000..870136606 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Navbar.tsx @@ -0,0 +1,35 @@ +import { FC } from "react"; + +//components +import Sidebar from "./Sidebar/Sidebar"; + +//hooks +import { useColorUpdate } from "../../context/contextTheme"; + +//css +import "./navbar.css"; + +const Navbar: FC = () => { + const { currColor, toggleColor } = useColorUpdate(); + return ( +
                    +
                    + +
                    Shob Classes
                    +
                    + {" "} + { + toggleColor(); + }} + > + loyalty + +
                    +
                    +
                    + ); +}; + +export default Navbar; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/Sidebar.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/Sidebar.tsx new file mode 100644 index 000000000..cb945b8d7 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/Sidebar.tsx @@ -0,0 +1,45 @@ +import { FC, useState } from "react"; + +//components +import SingleSidebarOption from "./SingleSidebarOption/SingleSidebarOption"; + +// consts +import { SIDEBAR_ELEMENTS } from "../../../consts/sidebarElements"; + +// css +import './sidebar.css' +import { Drawer } from "@mui/material"; + +const Sidebar: FC = () => { + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + + return ( +
                    + {setIsSidebarOpen(true)}}>menu + { + setIsSidebarOpen(false); + }} + PaperProps={{ + sx: { + paddingTop: "6vh", + width: "25vh", + }, + }} + > + {SIDEBAR_ELEMENTS.map((element, index) => ( + + ))} + +
                    + ); +}; + +export default Sidebar; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/ISingleSidebarOption.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/ISingleSidebarOption.ts new file mode 100644 index 000000000..49eae04a2 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/ISingleSidebarOption.ts @@ -0,0 +1,5 @@ +export interface ISingleSidebarOption { + title: string, + path: string, + setIsSidebarOpen: React.Dispatch> +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/SingleSidebarOption.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/SingleSidebarOption.css new file mode 100644 index 000000000..4514687e8 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/SingleSidebarOption.css @@ -0,0 +1,5 @@ +.sidebarOption{ + padding-left: 5vh; + padding-bottom: 5vh; + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/SingleSidebarOption.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/SingleSidebarOption.tsx new file mode 100644 index 000000000..1e4e5451c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/SingleSidebarOption/SingleSidebarOption.tsx @@ -0,0 +1,29 @@ +import { FC } from "react"; +import { useHistory } from "react-router-dom"; +import { ISingleSidebarOption } from "./ISingleSidebarOption"; + +// css +import './SingleSidebarOption.css' + +const SingleSidebarOption: FC = ({ + title, + path, + setIsSidebarOpen, +}) => { + let history = useHistory() + + const optionClicked = () => { + history.push(path) + setIsSidebarOpen(false) + } + + return( +
                    + {optionClicked()} }> + {title} + +
                    + ) +}; + +export default SingleSidebarOption; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/sidebar.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/sidebar.css new file mode 100644 index 000000000..1681a9cce --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/Sidebar/sidebar.css @@ -0,0 +1,3 @@ +.sidebarMenuIcon { + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/navbar.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/navbar.css new file mode 100644 index 000000000..759464ea9 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/Navbar/navbar.css @@ -0,0 +1,19 @@ +.navbarWrapper{ + width: 100%; + height: 4rem; + background-color: rgb(71, 71, 255); + display: flex; + align-items: center; +} + +.leftSideWrapper{ + display: flex; + justify-content: space-around; + width: 22vw; + color: white; + font-size: 1.5rem; +} + +.themeButton{ + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/SingleClassCard/SingleClassCard.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/SingleClassCard/SingleClassCard.css new file mode 100644 index 000000000..afe13b9be --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/SingleClassCard/SingleClassCard.css @@ -0,0 +1,21 @@ +#title{ + font-weight: bold; +} +.bold{ + font-weight: bold; +} + +.lightText{ + color: gray; +} + +.studentsButtonWarpper{ + display: flex; + justify-content: space-around; + align-items: center; + cursor: pointer; +} + +.deleteButton{ + color: rgb(71, 71, 255); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/SingleClassCard/SingleClassCard.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/SingleClassCard/SingleClassCard.tsx new file mode 100644 index 000000000..56e3f7511 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/componenets/SingleClassCard/SingleClassCard.tsx @@ -0,0 +1,111 @@ +import { FC, useState } from "react"; +import axios from "axios"; + +//components +import GenericPopup from "../GenericPopup/GenericPopup"; + +//hooks +import { useColorUpdate } from "../../context/contextTheme"; + +//interfaces +import { IClass, IClassCard } from "../../pages/Classes/IClass"; +import { IStudent } from "../../pages/Students/IStudent"; + +//css & mui +import "./SingleClassCard.css"; +import Card from "@mui/material/Card"; +import CardActions from "@mui/material/CardActions"; +import CardContent from "@mui/material/CardContent"; +import Typography from "@mui/material/Typography"; + +const SingleClassCard: FC = ({ + availableSeats, + classId, + className, + classSeats, + students, + classGotDeleted, +}) => { + const [isPopupOpen, setIsPopupOpen] = useState(false); + const { currColor } = useColorUpdate(); + const [currStudents, setCurrStudents] = useState(students); + + const textDisplayHandler = (singleStudent: IStudent): string => { + return singleStudent.firstName + " " + singleStudent.lastName; + }; + + const unAssignStudent = (student: IStudent) => { + axios.post(`http://localhost:3000/students/tz/${student.tz}/classId/${classId}`).then(() => { + setCurrStudents( + currStudents.filter((stud) => { + return stud.tz !== student.tz; + }) + ); + }); + }; + + const handleClose = () => { + setIsPopupOpen(false); + }; + + const deleteClass = () => { + axios + .delete(`http://localhost:3000/classes/${classId}`) + .then(() => { + classGotDeleted(classId); + }) + .catch((error) => alert(error.response.data.message)); + }; + + return ( +
                    + + + {className} + + there are + {availableSeats} + seats left + + + out of {classSeats} + + + +
                    { + if (currStudents.length > 0) { + setIsPopupOpen(true); + } else { + alert("There are no students assigned to the class"); + } + }} + > + STUDENTS LIST +
                    + { + deleteClass(); + }} + > + delete + +                     +                     + + +
                    + ); +}; + +export default SingleClassCard; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createClass.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createClass.ts new file mode 100644 index 000000000..2e050af8c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createClass.ts @@ -0,0 +1,2 @@ + +export const CREATE_CLASS_HEADERS = ['Class ID *', 'Name *', 'Max Seats *'] \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createForms.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createForms.tsx new file mode 100644 index 000000000..973784e3f --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createForms.tsx @@ -0,0 +1,44 @@ +export {}; +interface IGenericForm { + feildName: string; + isRequired: boolean; + validationFuncs?: string[] +} + +export const createClass: IGenericForm[] = [ + { + feildName: "Class ID", + isRequired: true, + }, + { + feildName: "Name", + isRequired: true, + }, + { + feildName: "Max Seats", + isRequired: true, + }, +]; + +export const addNewStudent: IGenericForm[] = [ + { + feildName: "ID", + isRequired: true, + }, + { + feildName: "First Name", + isRequired: true, + }, + { + feildName: "Last Name", + isRequired: true, + }, + { + feildName: "Age", + isRequired: false, + }, + { + feildName: "Proffesion", + isRequired: true, + }, +]; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createStudent.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createStudent.ts new file mode 100644 index 000000000..f9153744d --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/createStudent.ts @@ -0,0 +1 @@ +export const CREATE_STUDENT_HEADERS = ['FIrst Name *', 'Last Name *', 'Age *', 'Profession *'] \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/routes.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/routes.tsx new file mode 100644 index 000000000..cacf35cca --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/routes.tsx @@ -0,0 +1,6 @@ +export const CLASSES_PATH = '/classes' + +export const CREATE_PATH = '/create' + +export const STUDENTS_PATH = '/students' + diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/sidebarElements.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/sidebarElements.tsx new file mode 100644 index 000000000..9c4df5a1f --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/sidebarElements.tsx @@ -0,0 +1,17 @@ +import { CLASSES_PATH, STUDENTS_PATH, CREATE_PATH } from "./routes"; + +export const SIDEBAR_ELEMENTS = [ + { + elementName: 'Classes', + path: CLASSES_PATH + }, + { + elementName: 'Students', + path: STUDENTS_PATH + }, + { + elementName: 'Create', + path: CREATE_PATH + }, + +] diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/tableHeaders.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/tableHeaders.ts new file mode 100644 index 000000000..d89bb97c2 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/consts/tableHeaders.ts @@ -0,0 +1 @@ +export const TABLE_HEADERS = ['ID', 'First Name', 'Last Name', 'Age', 'Profession', 'Assign', 'Delete'] \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/context/contextTheme.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/context/contextTheme.tsx new file mode 100644 index 000000000..8d0ee2f1c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/context/contextTheme.tsx @@ -0,0 +1,27 @@ +import { createContext, useContext, useState, FC } from 'react'; + +interface IColorToggle { + currColor: string + toggleColor: () => void +} + +const ThemeContext = createContext({} as IColorToggle); + +export const useColorUpdate = (): IColorToggle => useContext(ThemeContext); + +export const ColorTogglerProvider: FC<{ children: React.ReactNode; }> = ({ children }) => { + const [currColor, setCurrColor] = useState('blue'); + + const toggleColor = () => { + setCurrColor(currColor === 'blue' ? 'red' : 'blue') + } + + const value: IColorToggle = { + toggleColor,currColor + } + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/index.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/index.css new file mode 100644 index 000000000..e70c4d775 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/index.css @@ -0,0 +1,4 @@ +body { + margin: 0; + font-family: 'Work Sans', sans-serif; +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/main.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/main.tsx new file mode 100644 index 000000000..9ec22cff6 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/main.tsx @@ -0,0 +1,17 @@ +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.css"; + +//react router +import { BrowserRouter as Router } from "react-router-dom"; + +//react context +import { ColorTogglerProvider } from "./context/contextTheme"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + + + +); diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/Classes.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/Classes.css new file mode 100644 index 000000000..e28155408 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/Classes.css @@ -0,0 +1,5 @@ +.classesWrapper{ + display: flex; + padding: 3vh 3vh 0vh 3vh; + max-height: 87vh; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/Classes.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/Classes.tsx new file mode 100644 index 000000000..02689f67c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/Classes.tsx @@ -0,0 +1,50 @@ +import { FC, useEffect, useState } from "react"; +import axios from "axios"; + +//components +import SingleClassCard from "../../componenets/SingleClassCard/SingleClassCard"; + +//interfaces +import { IClass } from "./IClass"; + +//css & mui +import "./Classes.css"; +import Grid from "@mui/material/Grid"; + +const Classes: FC = () => { + const [classes, setClasses] = useState([]); + + const deleteClass = (classId: number) => { + setClasses( + classes.filter((singleClass) => { + return singleClass.classId !== classId; + }) + ); + }; + + useEffect(() => { + try { + axios.get("http://localhost:3000/classes/all").then(({ data }) => { + setClasses(data); + }); + } catch (error) { + console.log(error) + } + }, []); + + return ( +
                    + {classes.length > 0 && ( + + {classes.map((element, index) => ( + + + + ))} + + )} +
                    + ); +}; + +export default Classes; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/IClass.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/IClass.tsx new file mode 100644 index 000000000..c7de1827a --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Classes/IClass.tsx @@ -0,0 +1,14 @@ +import { IStudent } from "../Students/IStudent" + +export interface IClass { + classId: number + className: string + classSeats: number + availableSeats: number + students: IStudent[] + +} + +export interface IClassCard extends IClass { + classGotDeleted: (classId: number) => void +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Create/Create.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Create/Create.tsx new file mode 100644 index 000000000..ba69df803 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Create/Create.tsx @@ -0,0 +1,31 @@ +import { FC } from "react"; + +//componenets +import GenericFeild from "../../componenets/GenericFeild.tsx/GenericFeild"; + +//consts +import { CREATE_CLASS_HEADERS } from "../../consts/createClass"; +import { CREATE_STUDENT_HEADERS } from "../../consts/createStudent"; + +//css & mui +import './create.css' + +const Create: FC = () => { + return ( +
                    + + + +
                    + ); +}; + +export default Create; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Create/create.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Create/create.css new file mode 100644 index 000000000..1e86257fb --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Create/create.css @@ -0,0 +1,4 @@ +.formsWrapper{ + display: flex; + justify-content: space-around; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/IStudent.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/IStudent.ts new file mode 100644 index 000000000..058aa74e3 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/IStudent.ts @@ -0,0 +1,8 @@ +export interface IStudent { + tz: number + firstName: string + lastName: string + age: number + profession: string + classId: number +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/Students.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/Students.tsx new file mode 100644 index 000000000..ec05a3639 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/Students.tsx @@ -0,0 +1,179 @@ +import { FC, useEffect, useState } from "react"; +import axios from "axios"; + +// components +import GenericPopup from "../../componenets/GenericPopup/GenericPopup"; + +// hooks +import { useColorUpdate } from "../../context/contextTheme"; + +// css & mui +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import "./students.css"; +import Button from "@mui/material/Button"; + +//consts +import { TABLE_HEADERS } from "../../consts/tableHeaders"; + +// interfaces +import { IStudent } from "./IStudent"; +import { IClass } from "../Classes/IClass"; + +const Students: FC = () => { + const { currColor } = useColorUpdate(); + const [isPopupOpen, setIsPopupOpen] = useState(false); + const [students, setStudents] = useState([]); + const [availableClasses, setAvailableClasses] = useState([]); + const [isDoneLoading, setIsDoneLoading] = useState(false); + const [currAssignedStudent, setCurrAssignedStudent] = useState( + {} as IStudent + ); + + + + useEffect(() => { + const getAllStudents = async () => { + return await axios.get("http://localhost:3000/students/all"); + }; + + const getAvailableClasses = async () => { + return await axios.get("http://localhost:3000/classes/available"); + }; + + Promise.all([getAllStudents(), getAvailableClasses()]).then( + ([students, availableClasses]) => { + setStudents(students.data); + setAvailableClasses(availableClasses.data); + setIsDoneLoading(true); + } + ); + }, []); + + const textDisplayHandler = (singleClass: IClass): string => { + return singleClass.className; + }; + + const assignToClass = (classId: number) => { + classId + ? alert("The student is already assigned to a class") + : setIsPopupOpen(true); + }; + + const addStudentToClass = (singleClass: IClass) => { + try { + axios + .post( + `http://localhost:3000/students/tz/${currAssignedStudent.tz}/classId/${singleClass.classId}` + ) + .then(() => { + setStudents((prevStudents) => { + const tempStudents = [...prevStudents]; + tempStudents.forEach((element) => { + if (element.tz === currAssignedStudent.tz) { + element.classId = singleClass.classId; + return; + } + }); + return tempStudents; + }); + }); + } catch (error) { + } + }; + + const handleClose = () => { + setIsPopupOpen(false); + }; + + const deleteStudent = (tz: number) => { + axios.delete(`http://localhost:3000/students/${tz}`).then((element) => { + setStudents( + students.filter((stud) => { + return stud.tz !== tz; + }) + ); + }); + }; + + return ( + <> + {isDoneLoading && ( +
                    + + + + + {TABLE_HEADERS.map((element, index) => ( + + {element} + + ))} + + + + {students.map((element, index) => ( + + {element.tz} + {element.firstName} + {element.lastName} + {element.age} + {element.profession} + + + + + + + + ))} + +
                    +                     + + +
                    + )} + + ); +}; + +export default Students; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/students.css b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/students.css new file mode 100644 index 000000000..eae44d42f --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/pages/Students/students.css @@ -0,0 +1,9 @@ +.tableWrapper { + display: flex; + align-items: center; + justify-content: center; + margin-left: 10rem; + margin-right: 10rem; + border: 0.5px solid rgb(209, 209, 209); + margin-top: 1rem; +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/routes/routes.tsx b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/routes/routes.tsx new file mode 100644 index 000000000..60f409ccf --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/routes/routes.tsx @@ -0,0 +1,21 @@ +import Classes from "../pages/Classes/Classes"; +import Students from "../pages/Students/Students"; +import Create from "../pages/Create/Create"; + +import { CLASSES_PATH, CREATE_PATH, STUDENTS_PATH } from "../consts/routes"; + +const RouteMaster = [ + { + path: CLASSES_PATH, + component: Classes, + }, + { + path: CREATE_PATH, + component: Create, + }, + { + path: STUDENTS_PATH, + component: Students, + }, +]; +export default RouteMaster; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/vite-env.d.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/tsconfig.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/tsconfig.json new file mode 100644 index 000000000..3d0a51a86 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/tsconfig.node.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/tsconfig.node.json new file mode 100644 index 000000000..9d31e2aed --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/vite.config.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/vite.config.ts new file mode 100644 index 000000000..5a33944a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.eslintrc.js b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.eslintrc.js new file mode 100644 index 000000000..259de13c7 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.eslintrc.js @@ -0,0 +1,25 @@ +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: 'tsconfig.json', + tsconfigRootDir: __dirname, + sourceType: 'module', + }, + plugins: ['@typescript-eslint/eslint-plugin'], + extends: [ + 'plugin:@typescript-eslint/recommended', + 'plugin:prettier/recommended', + ], + root: true, + env: { + node: true, + jest: true, + }, + ignorePatterns: ['.eslintrc.js'], + rules: { + '@typescript-eslint/interface-name-prefix': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/no-explicit-any': 'off', + }, +}; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.gitignore b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.gitignore new file mode 100644 index 000000000..814601096 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.gitignore @@ -0,0 +1,35 @@ +# compiled output +/dist +/node_modules + +# Logs +logs +*.log +npm-debug.log* +pnpm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# OS +.DS_Store +.env +# Tests +/coverage +/.nyc_output + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.prettierrc b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.prettierrc new file mode 100644 index 000000000..dcb72794f --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "all" +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/README.md b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/README.md new file mode 100644 index 000000000..00a13b112 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/README.md @@ -0,0 +1,73 @@ +

                    + Nest Logo +

                    + +[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456 +[circleci-url]: https://circleci.com/gh/nestjs/nest + +

                    A progressive Node.js framework for building efficient and scalable server-side applications.

                    +

                    +NPM Version +Package License +NPM Downloads +CircleCI +Coverage +Discord +Backers on Open Collective +Sponsors on Open Collective + + Support us + +

                    + + +## Description + +[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository. + +## Installation + +```bash +$ npm install +``` + +## Running the app + +```bash +# development +$ npm run start + +# watch mode +$ npm run start:dev + +# production mode +$ npm run start:prod +``` + +## Test + +```bash +# unit tests +$ npm run test + +# e2e tests +$ npm run test:e2e + +# test coverage +$ npm run test:cov +``` + +## Support + +Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support). + +## Stay in touch + +- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com) +- Website - [https://nestjs.com](https://nestjs.com/) +- Twitter - [@nestframework](https://twitter.com/nestframework) + +## License + +Nest is [MIT licensed](LICENSE). diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/nest-cli.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/nest-cli.json new file mode 100644 index 000000000..f9aa683b1 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/nest-cli.json @@ -0,0 +1,8 @@ +{ + "$schema": "https://json.schemastore.org/nest-cli", + "collection": "@nestjs/schematics", + "sourceRoot": "src", + "compilerOptions": { + "deleteOutDir": true + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/package-lock.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/package-lock.json new file mode 100644 index 000000000..d4d8a4245 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/package-lock.json @@ -0,0 +1,8638 @@ +{ + "name": "clasroom-server", + "version": "0.0.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "clasroom-server", + "version": "0.0.1", + "license": "UNLICENSED", + "dependencies": { + "@nestjs/common": "^9.0.0", + "@nestjs/core": "^9.0.0", + "@nestjs/mapped-types": "*", + "@nestjs/platform-express": "^9.0.0", + "reflect-metadata": "^0.1.13", + "rxjs": "^7.2.0", + "sequelize-typescript": "^2.1.5" + }, + "devDependencies": { + "@nestjs/cli": "^9.0.0", + "@nestjs/schematics": "^9.0.0", + "@nestjs/testing": "^9.0.0", + "@types/express": "^4.17.13", + "@types/jest": "29.2.4", + "@types/node": "18.11.18", + "@types/supertest": "^2.0.11", + "@typescript-eslint/eslint-plugin": "^5.0.0", + "@typescript-eslint/parser": "^5.0.0", + "dotenv": "^8.6.0", + "eslint": "^8.0.1", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^4.0.0", + "jest": "29.3.1", + "pg": "^8.7.1", + "prettier": "^2.3.2", + "source-map-support": "^0.5.20", + "supertest": "^6.1.3", + "ts-jest": "29.0.3", + "ts-loader": "^9.2.3", + "ts-node": "^10.0.0", + "tsconfig-paths": "4.1.1", + "typescript": "^4.7.4" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@angular-devkit/core": { + "version": "15.0.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-15.0.4.tgz", + "integrity": "sha512-4ITpRAevd652SxB+qNesIQ9qfbm7wT5UBU5kJOPPwGL77I21g8CQpkmV1n5VSacPvC9Zbz90feOWexf7w7JzcA==", + "dev": true, + "dependencies": { + "ajv": "8.11.0", + "ajv-formats": "2.1.1", + "jsonc-parser": "3.2.0", + "rxjs": "6.6.7", + "source-map": "0.7.4" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^3.5.2" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, + "node_modules/@angular-devkit/core/node_modules/rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "dev": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "engines": { + "npm": ">=2.0.0" + } + }, + "node_modules/@angular-devkit/core/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, + "node_modules/@angular-devkit/schematics": { + "version": "15.0.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-15.0.4.tgz", + "integrity": "sha512-/gXiLFS0+xFdx6wPoBpe/c6/K9I5edMpaASqPf4XheKtrsSvL+qTlIi3nsbfItzOiDXbaBmlbxGfkMHz/yg0Ig==", + "dev": true, + "dependencies": { + "@angular-devkit/core": "15.0.4", + "jsonc-parser": "3.2.0", + "magic-string": "0.26.7", + "ora": "5.4.1", + "rxjs": "6.6.7" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular-devkit/schematics-cli": { + "version": "15.0.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics-cli/-/schematics-cli-15.0.4.tgz", + "integrity": "sha512-rEzkpjiQcJqCgbZ1Ns8jn1BL4724jcj+YFS7Qw5d4v6yQYA8iSLz12HDTH0TiNEv7u5S55fYuRz2QreI0QUT8A==", + "dev": true, + "dependencies": { + "@angular-devkit/core": "15.0.4", + "@angular-devkit/schematics": "15.0.4", + "ansi-colors": "4.1.3", + "inquirer": "8.2.4", + "symbol-observable": "4.0.0", + "yargs-parser": "21.1.1" + }, + "bin": { + "schematics": "bin/schematics.js" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular-devkit/schematics-cli/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@angular-devkit/schematics-cli/node_modules/inquirer": { + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.4.tgz", + "integrity": "sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==", + "dev": true, + "dependencies": { + "ansi-escapes": "^4.2.1", + "chalk": "^4.1.1", + "cli-cursor": "^3.1.0", + "cli-width": "^3.0.0", + "external-editor": "^3.0.3", + "figures": "^3.0.0", + "lodash": "^4.17.21", + "mute-stream": "0.0.8", + "ora": "^5.4.1", + "run-async": "^2.4.0", + "rxjs": "^7.5.5", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0", + "through": "^2.3.6", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/@angular-devkit/schematics/node_modules/rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "dev": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "engines": { + "npm": ">=2.0.0" + } + }, + "node_modules/@angular-devkit/schematics/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, + "node_modules/@babel/code-frame": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", + "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "dev": true, + "dependencies": { + "@babel/highlight": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.20.10", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.10.tgz", + "integrity": "sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz", + "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==", + "dev": true, + "dependencies": { + "@ampproject/remapping": "^2.1.0", + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.7", + "@babel/helper-compilation-targets": "^7.20.7", + "@babel/helper-module-transforms": "^7.20.11", + "@babel/helpers": "^7.20.7", + "@babel/parser": "^7.20.7", + "@babel/template": "^7.20.7", + "@babel/traverse": "^7.20.12", + "@babel/types": "^7.20.7", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.2", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/core/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true + }, + "node_modules/@babel/core/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/generator": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.7.tgz", + "integrity": "sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.20.7", + "@jridgewell/gen-mapping": "^0.3.2", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz", + "integrity": "sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==", + "dev": true, + "dependencies": { + "@babel/compat-data": "^7.20.5", + "@babel/helper-validator-option": "^7.18.6", + "browserslist": "^4.21.3", + "lru-cache": "^5.1.1", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", + "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", + "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "dev": true, + "dependencies": { + "@babel/template": "^7.18.10", + "@babel/types": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", + "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", + "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.20.11", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz", + "integrity": "sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==", + "dev": true, + "dependencies": { + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-simple-access": "^7.20.2", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/helper-validator-identifier": "^7.19.1", + "@babel/template": "^7.20.7", + "@babel/traverse": "^7.20.10", + "@babel/types": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", + "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.20.2", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz", + "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==", + "dev": true, + "dependencies": { + "@babel/types": "^7.20.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", + "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "dev": true, + "dependencies": { + "@babel/types": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.19.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz", + "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.7.tgz", + "integrity": "sha512-PBPjs5BppzsGaxHQCDKnZ6Gd9s6xl8bBCluz3vEInLGRJmnZan4F6BYCeqtyXqkk4W5IlPmjK4JlOuZkpJ3xZA==", + "dev": true, + "dependencies": { + "@babel/template": "^7.20.7", + "@babel/traverse": "^7.20.7", + "@babel/types": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/highlight/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/parser": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz", + "integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==", + "dev": true, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-syntax-async-generators": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz", + "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-bigint": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz", + "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-class-properties": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz", + "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.12.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-import-meta": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz", + "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.10.4" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-json-strings": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz", + "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz", + "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-logical-assignment-operators": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz", + "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.10.4" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz", + "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-numeric-separator": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz", + "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.10.4" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-object-rest-spread": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz", + "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-optional-catch-binding": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz", + "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-optional-chaining": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz", + "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-top-level-await": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz", + "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.14.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-typescript": { + "version": "7.20.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz", + "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.19.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", + "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.20.12", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.12.tgz", + "integrity": "sha512-MsIbFN0u+raeja38qboyF8TIT7K0BFzz/Yd/77ta4MsUsmP2RAnidIlwq7d5HFQrH/OZJecGV6B71C4zAgpoSQ==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.18.6", + "@babel/generator": "^7.20.7", + "@babel/helper-environment-visitor": "^7.18.9", + "@babel/helper-function-name": "^7.19.0", + "@babel/helper-hoist-variables": "^7.18.6", + "@babel/helper-split-export-declaration": "^7.18.6", + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/types": { + "version": "7.20.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz", + "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-validator-identifier": "^7.19.1", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@bcoe/v8-coverage": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", + "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", + "dev": true + }, + "node_modules/@colors/colors": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", + "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", + "dev": true, + "optional": true, + "engines": { + "node": ">=0.1.90" + } + }, + "node_modules/@cspotcode/source-map-support": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", + "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "0.3.9" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz", + "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.4.0", + "globals": "^13.19.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/eslintrc/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.11.8", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", + "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==", + "dev": true, + "dependencies": { + "@humanwhocodes/object-schema": "^1.2.1", + "debug": "^4.1.1", + "minimatch": "^3.0.5" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", + "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", + "dev": true + }, + "node_modules/@istanbuljs/load-nyc-config": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", + "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==", + "dev": true, + "dependencies": { + "camelcase": "^5.3.1", + "find-up": "^4.1.0", + "get-package-type": "^0.1.0", + "js-yaml": "^3.13.1", + "resolve-from": "^5.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dev": true, + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@jest/console": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.3.1.tgz", + "integrity": "sha512-IRE6GD47KwcqA09RIWrabKdHPiKDGgtAL31xDxbi/RjQMsr+lY+ppxmHwY0dUEV3qvvxZzoe5Hl0RXZJOjQNUg==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "@types/node": "*", + "chalk": "^4.0.0", + "jest-message-util": "^29.3.1", + "jest-util": "^29.3.1", + "slash": "^3.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/console/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@jest/core": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.3.1.tgz", + "integrity": "sha512-0ohVjjRex985w5MmO5L3u5GR1O30DexhBSpuwx2P+9ftyqHdJXnk7IUWiP80oHMvt7ubHCJHxV0a0vlKVuZirw==", + "dev": true, + "dependencies": { + "@jest/console": "^29.3.1", + "@jest/reporters": "^29.3.1", + "@jest/test-result": "^29.3.1", + "@jest/transform": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "ansi-escapes": "^4.2.1", + "chalk": "^4.0.0", + "ci-info": "^3.2.0", + "exit": "^0.1.2", + "graceful-fs": "^4.2.9", + "jest-changed-files": "^29.2.0", + "jest-config": "^29.3.1", + "jest-haste-map": "^29.3.1", + "jest-message-util": "^29.3.1", + "jest-regex-util": "^29.2.0", + "jest-resolve": "^29.3.1", + "jest-resolve-dependencies": "^29.3.1", + "jest-runner": "^29.3.1", + "jest-runtime": "^29.3.1", + "jest-snapshot": "^29.3.1", + "jest-util": "^29.3.1", + "jest-validate": "^29.3.1", + "jest-watcher": "^29.3.1", + "micromatch": "^4.0.4", + "pretty-format": "^29.3.1", + "slash": "^3.0.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" + }, + "peerDependenciesMeta": { + "node-notifier": { + "optional": true + } + } + }, + "node_modules/@jest/core/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@jest/environment": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.3.1.tgz", + "integrity": "sha512-pMmvfOPmoa1c1QpfFW0nXYtNLpofqo4BrCIk6f2kW4JFeNlHV2t3vd+3iDLf31e2ot2Mec0uqZfmI+U0K2CFag==", + "dev": true, + "dependencies": { + "@jest/fake-timers": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "jest-mock": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/expect": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.3.1.tgz", + "integrity": "sha512-QivM7GlSHSsIAWzgfyP8dgeExPRZ9BIe2LsdPyEhCGkZkoyA+kGsoIzbKAfZCvvRzfZioKwPtCZIt5SaoxYCvg==", + "dev": true, + "dependencies": { + "expect": "^29.3.1", + "jest-snapshot": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/expect-utils": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.3.1.tgz", + "integrity": "sha512-wlrznINZI5sMjwvUoLVk617ll/UYfGIZNxmbU+Pa7wmkL4vYzhV9R2pwVqUh4NWWuLQWkI8+8mOkxs//prKQ3g==", + "dev": true, + "dependencies": { + "jest-get-type": "^29.2.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/fake-timers": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.3.1.tgz", + "integrity": "sha512-iHTL/XpnDlFki9Tq0Q1GGuVeQ8BHZGIYsvCO5eN/O/oJaRzofG9Xndd9HuSDBI/0ZS79pg0iwn07OMTQ7ngF2A==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "@sinonjs/fake-timers": "^9.1.2", + "@types/node": "*", + "jest-message-util": "^29.3.1", + "jest-mock": "^29.3.1", + "jest-util": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/globals": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.3.1.tgz", + "integrity": "sha512-cTicd134vOcwO59OPaB6AmdHQMCtWOe+/DitpTZVxWgMJ+YvXL1HNAmPyiGbSHmF/mXVBkvlm8YYtQhyHPnV6Q==", + "dev": true, + "dependencies": { + "@jest/environment": "^29.3.1", + "@jest/expect": "^29.3.1", + "@jest/types": "^29.3.1", + "jest-mock": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/reporters": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.3.1.tgz", + "integrity": "sha512-GhBu3YFuDrcAYW/UESz1JphEAbvUjaY2vShRZRoRY1mxpCMB3yGSJ4j9n0GxVlEOdCf7qjvUfBCrTUUqhVfbRA==", + "dev": true, + "dependencies": { + "@bcoe/v8-coverage": "^0.2.3", + "@jest/console": "^29.3.1", + "@jest/test-result": "^29.3.1", + "@jest/transform": "^29.3.1", + "@jest/types": "^29.3.1", + "@jridgewell/trace-mapping": "^0.3.15", + "@types/node": "*", + "chalk": "^4.0.0", + "collect-v8-coverage": "^1.0.0", + "exit": "^0.1.2", + "glob": "^7.1.3", + "graceful-fs": "^4.2.9", + "istanbul-lib-coverage": "^3.0.0", + "istanbul-lib-instrument": "^5.1.0", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.0", + "istanbul-reports": "^3.1.3", + "jest-message-util": "^29.3.1", + "jest-util": "^29.3.1", + "jest-worker": "^29.3.1", + "slash": "^3.0.0", + "string-length": "^4.0.1", + "strip-ansi": "^6.0.0", + "v8-to-istanbul": "^9.0.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" + }, + "peerDependenciesMeta": { + "node-notifier": { + "optional": true + } + } + }, + "node_modules/@jest/reporters/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@jest/schemas": { + "version": "29.0.0", + "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.0.0.tgz", + "integrity": "sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==", + "dev": true, + "dependencies": { + "@sinclair/typebox": "^0.24.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/source-map": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.2.0.tgz", + "integrity": "sha512-1NX9/7zzI0nqa6+kgpSdKPK+WU1p+SJk3TloWZf5MzPbxri9UEeXX5bWZAPCzbQcyuAzubcdUHA7hcNznmRqWQ==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.15", + "callsites": "^3.0.0", + "graceful-fs": "^4.2.9" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/test-result": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.3.1.tgz", + "integrity": "sha512-qeLa6qc0ddB0kuOZyZIhfN5q0e2htngokyTWsGriedsDhItisW7SDYZ7ceOe57Ii03sL988/03wAcBh3TChMGw==", + "dev": true, + "dependencies": { + "@jest/console": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/istanbul-lib-coverage": "^2.0.0", + "collect-v8-coverage": "^1.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/test-sequencer": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.3.1.tgz", + "integrity": "sha512-IqYvLbieTv20ArgKoAMyhLHNrVHJfzO6ARZAbQRlY4UGWfdDnLlZEF0BvKOMd77uIiIjSZRwq3Jb3Fa3I8+2UA==", + "dev": true, + "dependencies": { + "@jest/test-result": "^29.3.1", + "graceful-fs": "^4.2.9", + "jest-haste-map": "^29.3.1", + "slash": "^3.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/transform": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.3.1.tgz", + "integrity": "sha512-8wmCFBTVGYqFNLWfcOWoVuMuKYPUBTnTMDkdvFtAYELwDOl9RGwOsvQWGPFxDJ8AWY9xM/8xCXdqmPK3+Q5Lug==", + "dev": true, + "dependencies": { + "@babel/core": "^7.11.6", + "@jest/types": "^29.3.1", + "@jridgewell/trace-mapping": "^0.3.15", + "babel-plugin-istanbul": "^6.1.1", + "chalk": "^4.0.0", + "convert-source-map": "^2.0.0", + "fast-json-stable-stringify": "^2.1.0", + "graceful-fs": "^4.2.9", + "jest-haste-map": "^29.3.1", + "jest-regex-util": "^29.2.0", + "jest-util": "^29.3.1", + "micromatch": "^4.0.4", + "pirates": "^4.0.4", + "slash": "^3.0.0", + "write-file-atomic": "^4.0.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/transform/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@jest/types": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.3.1.tgz", + "integrity": "sha512-d0S0jmmTpjnhCmNpApgX3jrUZgZ22ivKJRvL2lli5hpCRoNnp1f85r2/wpKfXuYu8E7Jjh1hGfhPyup1NM5AmA==", + "dev": true, + "dependencies": { + "@jest/schemas": "^29.0.0", + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^3.0.0", + "@types/node": "*", + "@types/yargs": "^17.0.8", + "chalk": "^4.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/types/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", + "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" + } + }, + "node_modules/@nestjs/cli": { + "version": "9.1.8", + "resolved": "https://registry.npmjs.org/@nestjs/cli/-/cli-9.1.8.tgz", + "integrity": "sha512-53laCMoPLAkjyz3405FlMSrHnbr3DGeoaQjY963bEroezLlm/qfQhwj6oGJwtgA28eNFgx68mvQV2f1VZNUJtw==", + "dev": true, + "dependencies": { + "@angular-devkit/core": "15.0.4", + "@angular-devkit/schematics": "15.0.4", + "@angular-devkit/schematics-cli": "15.0.4", + "@nestjs/schematics": "^9.0.0", + "chalk": "3.0.0", + "chokidar": "3.5.3", + "cli-table3": "0.6.3", + "commander": "4.1.1", + "fork-ts-checker-webpack-plugin": "7.2.14", + "inquirer": "7.3.3", + "node-emoji": "1.11.0", + "ora": "5.4.1", + "os-name": "4.0.1", + "rimraf": "3.0.2", + "shelljs": "0.8.5", + "source-map-support": "0.5.21", + "tree-kill": "1.2.2", + "tsconfig-paths": "4.1.1", + "tsconfig-paths-webpack-plugin": "4.0.0", + "typescript": "4.9.4", + "webpack": "5.75.0", + "webpack-node-externals": "3.0.0" + }, + "bin": { + "nest": "bin/nest.js" + }, + "engines": { + "node": ">= 12.9.0" + } + }, + "node_modules/@nestjs/common": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-9.2.1.tgz", + "integrity": "sha512-nZuo3oDsSSlC5mti/M2aCWTEIfHPGDXmBwWgPeCpRbrNz3IWd109rkajll+yxgidVjznAdBS9y00JkAVJblNYw==", + "dependencies": { + "iterare": "1.2.1", + "tslib": "2.4.1", + "uuid": "9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nest" + }, + "peerDependencies": { + "cache-manager": "<=5", + "class-transformer": "*", + "class-validator": "*", + "reflect-metadata": "^0.1.12", + "rxjs": "^7.1.0" + }, + "peerDependenciesMeta": { + "cache-manager": { + "optional": true + }, + "class-transformer": { + "optional": true + }, + "class-validator": { + "optional": true + } + } + }, + "node_modules/@nestjs/core": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@nestjs/core/-/core-9.2.1.tgz", + "integrity": "sha512-a9GkXuu8uXgNgCVW+17iI8kLCltO+HwHpU2IhR+32JKnN2WEQ1YEWU4t3GJ2MNq44YkjIw9zrKvFkjJBlYrNbQ==", + "hasInstallScript": true, + "dependencies": { + "@nuxtjs/opencollective": "0.3.2", + "fast-safe-stringify": "2.1.1", + "iterare": "1.2.1", + "object-hash": "3.0.0", + "path-to-regexp": "3.2.0", + "tslib": "2.4.1", + "uuid": "9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nest" + }, + "peerDependencies": { + "@nestjs/common": "^9.0.0", + "@nestjs/microservices": "^9.0.0", + "@nestjs/platform-express": "^9.0.0", + "@nestjs/websockets": "^9.0.0", + "reflect-metadata": "^0.1.12", + "rxjs": "^7.1.0" + }, + "peerDependenciesMeta": { + "@nestjs/microservices": { + "optional": true + }, + "@nestjs/platform-express": { + "optional": true + }, + "@nestjs/websockets": { + "optional": true + } + } + }, + "node_modules/@nestjs/mapped-types": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@nestjs/mapped-types/-/mapped-types-1.2.0.tgz", + "integrity": "sha512-NTFwPZkQWsArQH8QSyFWGZvJ08gR+R4TofglqZoihn/vU+ktHEJjMqsIsADwb7XD97DhiD+TVv5ac+jG33BHrg==", + "peerDependencies": { + "@nestjs/common": "^7.0.8 || ^8.0.0 || ^9.0.0", + "class-transformer": "^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0", + "class-validator": "^0.11.1 || ^0.12.0 || ^0.13.0", + "reflect-metadata": "^0.1.12" + }, + "peerDependenciesMeta": { + "class-transformer": { + "optional": true + }, + "class-validator": { + "optional": true + } + } + }, + "node_modules/@nestjs/platform-express": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@nestjs/platform-express/-/platform-express-9.2.1.tgz", + "integrity": "sha512-7PecaXt8lrdS1p6Vb1X/am3GGv+EO1VahyDzaEGOK6C0zwhc0VPfLtwihkjjfhS6BjpRIXXgviwEjONUvxVZnA==", + "dependencies": { + "body-parser": "1.20.1", + "cors": "2.8.5", + "express": "4.18.2", + "multer": "1.4.4-lts.1", + "tslib": "2.4.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nest" + }, + "peerDependencies": { + "@nestjs/common": "^9.0.0", + "@nestjs/core": "^9.0.0" + } + }, + "node_modules/@nestjs/schematics": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@nestjs/schematics/-/schematics-9.0.4.tgz", + "integrity": "sha512-egurCfAc4e5i1r2TmeAF0UrOKejFmT5oTdv4b7HcOVPupc3QGU7CbEfGleL3mkM5AjrixTQeMxU9bJ00ttAbGg==", + "dev": true, + "dependencies": { + "@angular-devkit/core": "15.0.4", + "@angular-devkit/schematics": "15.0.4", + "fs-extra": "11.1.0", + "jsonc-parser": "3.2.0", + "pluralize": "8.0.0" + }, + "peerDependencies": { + "typescript": "^4.3.5" + } + }, + "node_modules/@nestjs/testing": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@nestjs/testing/-/testing-9.2.1.tgz", + "integrity": "sha512-lemXZdRSuqoZ87l0orCrS/c7gqwxeduIFOd21g9g2RUeQ4qlWPegbQDKASzbfC28klPyrgJLW4MNq7uv2JwV8w==", + "dev": true, + "dependencies": { + "tslib": "2.4.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nest" + }, + "peerDependencies": { + "@nestjs/common": "^9.0.0", + "@nestjs/core": "^9.0.0", + "@nestjs/microservices": "^9.0.0", + "@nestjs/platform-express": "^9.0.0" + }, + "peerDependenciesMeta": { + "@nestjs/microservices": { + "optional": true + }, + "@nestjs/platform-express": { + "optional": true + } + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nuxtjs/opencollective": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@nuxtjs/opencollective/-/opencollective-0.3.2.tgz", + "integrity": "sha512-um0xL3fO7Mf4fDxcqx9KryrB7zgRM5JSlvGN5AGkP6JLM5XEKyjeAiPbNxdXVXQ16isuAhYpvP88NgL2BGd6aA==", + "dependencies": { + "chalk": "^4.1.0", + "consola": "^2.15.0", + "node-fetch": "^2.6.1" + }, + "bin": { + "opencollective": "bin/opencollective.js" + }, + "engines": { + "node": ">=8.0.0", + "npm": ">=5.0.0" + } + }, + "node_modules/@nuxtjs/opencollective/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@sinclair/typebox": { + "version": "0.24.51", + "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz", + "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==", + "dev": true + }, + "node_modules/@sinonjs/commons": { + "version": "1.8.6", + "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", + "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==", + "dev": true, + "dependencies": { + "type-detect": "4.0.8" + } + }, + "node_modules/@sinonjs/fake-timers": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz", + "integrity": "sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==", + "dev": true, + "dependencies": { + "@sinonjs/commons": "^1.7.0" + } + }, + "node_modules/@tsconfig/node10": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", + "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==", + "dev": true + }, + "node_modules/@tsconfig/node12": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", + "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", + "dev": true + }, + "node_modules/@tsconfig/node14": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", + "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", + "dev": true + }, + "node_modules/@tsconfig/node16": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz", + "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==", + "dev": true + }, + "node_modules/@types/babel__core": { + "version": "7.1.20", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.20.tgz", + "integrity": "sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.6.4", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz", + "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz", + "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.3.tgz", + "integrity": "sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.3.0" + } + }, + "node_modules/@types/body-parser": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", + "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==", + "dev": true, + "dependencies": { + "@types/connect": "*", + "@types/node": "*" + } + }, + "node_modules/@types/connect": { + "version": "3.4.35", + "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", + "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/cookiejar": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@types/cookiejar/-/cookiejar-2.1.2.tgz", + "integrity": "sha512-t73xJJrvdTjXrn4jLS9VSGRbz0nUY3cl2DMGDU48lKl+HR9dbbjW2A9r3g40VA++mQpy6uuHg33gy7du2BKpog==", + "dev": true + }, + "node_modules/@types/debug": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz", + "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==", + "peer": true, + "dependencies": { + "@types/ms": "*" + } + }, + "node_modules/@types/eslint": { + "version": "8.4.10", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz", + "integrity": "sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==", + "dev": true, + "dependencies": { + "@types/estree": "*", + "@types/json-schema": "*" + } + }, + "node_modules/@types/eslint-scope": { + "version": "3.7.4", + "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz", + "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==", + "dev": true, + "dependencies": { + "@types/eslint": "*", + "@types/estree": "*" + } + }, + "node_modules/@types/estree": { + "version": "0.0.51", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz", + "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==", + "dev": true + }, + "node_modules/@types/express": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.15.tgz", + "integrity": "sha512-Yv0k4bXGOH+8a+7bELd2PqHQsuiANB+A8a4gnQrkRWzrkKlb6KHaVvyXhqs04sVW/OWlbPyYxRgYlIXLfrufMQ==", + "dev": true, + "dependencies": { + "@types/body-parser": "*", + "@types/express-serve-static-core": "^4.17.31", + "@types/qs": "*", + "@types/serve-static": "*" + } + }, + "node_modules/@types/express-serve-static-core": { + "version": "4.17.32", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.32.tgz", + "integrity": "sha512-aI5h/VOkxOF2Z1saPy0Zsxs5avets/iaiAJYznQFm5By/pamU31xWKL//epiF4OfUA2qTOc9PV6tCUjhO8wlZA==", + "dev": true, + "dependencies": { + "@types/node": "*", + "@types/qs": "*", + "@types/range-parser": "*" + } + }, + "node_modules/@types/graceful-fs": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz", + "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/istanbul-lib-coverage": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", + "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==", + "dev": true + }, + "node_modules/@types/istanbul-lib-report": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", + "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==", + "dev": true, + "dependencies": { + "@types/istanbul-lib-coverage": "*" + } + }, + "node_modules/@types/istanbul-reports": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz", + "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==", + "dev": true, + "dependencies": { + "@types/istanbul-lib-report": "*" + } + }, + "node_modules/@types/jest": { + "version": "29.2.4", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.4.tgz", + "integrity": "sha512-PipFB04k2qTRPePduVLTRiPzQfvMeLwUN3Z21hsAKaB/W9IIzgB2pizCL466ftJlcyZqnHoC9ZHpxLGl3fS86A==", + "dev": true, + "dependencies": { + "expect": "^29.0.0", + "pretty-format": "^29.0.0" + } + }, + "node_modules/@types/json-schema": { + "version": "7.0.11", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", + "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", + "dev": true + }, + "node_modules/@types/mime": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", + "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==", + "dev": true + }, + "node_modules/@types/ms": { + "version": "0.7.31", + "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz", + "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==", + "peer": true + }, + "node_modules/@types/node": { + "version": "18.11.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz", + "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==" + }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", + "dev": true + }, + "node_modules/@types/prettier": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz", + "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==", + "dev": true + }, + "node_modules/@types/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", + "dev": true + }, + "node_modules/@types/range-parser": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", + "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", + "dev": true + }, + "node_modules/@types/semver": { + "version": "7.3.13", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", + "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==", + "dev": true + }, + "node_modules/@types/serve-static": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz", + "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==", + "dev": true, + "dependencies": { + "@types/mime": "*", + "@types/node": "*" + } + }, + "node_modules/@types/stack-utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", + "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==", + "dev": true + }, + "node_modules/@types/superagent": { + "version": "4.1.16", + "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-4.1.16.tgz", + "integrity": "sha512-tLfnlJf6A5mB6ddqF159GqcDizfzbMUB1/DeT59/wBNqzRTNNKsaw79A/1TZ84X+f/EwWH8FeuSkjlCLyqS/zQ==", + "dev": true, + "dependencies": { + "@types/cookiejar": "*", + "@types/node": "*" + } + }, + "node_modules/@types/supertest": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@types/supertest/-/supertest-2.0.12.tgz", + "integrity": "sha512-X3HPWTwXRerBZS7Mo1k6vMVR1Z6zmJcDVn5O/31whe0tnjE4te6ZJSJGq1RiqHPjzPdMTfjCFogDJmwng9xHaQ==", + "dev": true, + "dependencies": { + "@types/superagent": "*" + } + }, + "node_modules/@types/validator": { + "version": "13.7.11", + "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.11.tgz", + "integrity": "sha512-WqTos+CnAKN64YwyBMhgUYhb5VsTNKwUY6AuzG5qu9/pFZJar/RJFMZBXwX7VS+uzYi+lIAr3WkvuWqEI9F2eg==", + "peer": true + }, + "node_modules/@types/yargs": { + "version": "17.0.19", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.19.tgz", + "integrity": "sha512-cAx3qamwaYX9R0fzOIZAlFpo4A+1uBVCxqpKz9D26uTF4srRXaGTTsikQmaotCtNdbhzyUH7ft6p9ktz9s6UNQ==", + "dev": true, + "dependencies": { + "@types/yargs-parser": "*" + } + }, + "node_modules/@types/yargs-parser": { + "version": "21.0.0", + "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz", + "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", + "dev": true + }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz", + "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.48.1", + "@typescript-eslint/type-utils": "5.48.1", + "@typescript-eslint/utils": "5.48.1", + "debug": "^4.3.4", + "ignore": "^5.2.0", + "natural-compare-lite": "^1.4.0", + "regexpp": "^3.2.0", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^5.0.0", + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz", + "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.48.1", + "@typescript-eslint/types": "5.48.1", + "@typescript-eslint/typescript-estree": "5.48.1", + "debug": "^4.3.4" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz", + "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.48.1", + "@typescript-eslint/visitor-keys": "5.48.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz", + "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "5.48.1", + "@typescript-eslint/utils": "5.48.1", + "debug": "^4.3.4", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/types": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz", + "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz", + "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.48.1", + "@typescript-eslint/visitor-keys": "5.48.1", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz", + "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.9", + "@types/semver": "^7.3.12", + "@typescript-eslint/scope-manager": "5.48.1", + "@typescript-eslint/types": "5.48.1", + "@typescript-eslint/typescript-estree": "5.48.1", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0", + "semver": "^7.3.7" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "5.48.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz", + "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.48.1", + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@webassemblyjs/ast": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", + "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==", + "dev": true, + "dependencies": { + "@webassemblyjs/helper-numbers": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1" + } + }, + "node_modules/@webassemblyjs/floating-point-hex-parser": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz", + "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==", + "dev": true + }, + "node_modules/@webassemblyjs/helper-api-error": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz", + "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==", + "dev": true + }, + "node_modules/@webassemblyjs/helper-buffer": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz", + "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==", + "dev": true + }, + "node_modules/@webassemblyjs/helper-numbers": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz", + "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==", + "dev": true, + "dependencies": { + "@webassemblyjs/floating-point-hex-parser": "1.11.1", + "@webassemblyjs/helper-api-error": "1.11.1", + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@webassemblyjs/helper-wasm-bytecode": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz", + "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==", + "dev": true + }, + "node_modules/@webassemblyjs/helper-wasm-section": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz", + "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-buffer": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/wasm-gen": "1.11.1" + } + }, + "node_modules/@webassemblyjs/ieee754": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz", + "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==", + "dev": true, + "dependencies": { + "@xtuc/ieee754": "^1.2.0" + } + }, + "node_modules/@webassemblyjs/leb128": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz", + "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==", + "dev": true, + "dependencies": { + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@webassemblyjs/utf8": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz", + "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==", + "dev": true + }, + "node_modules/@webassemblyjs/wasm-edit": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz", + "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-buffer": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/helper-wasm-section": "1.11.1", + "@webassemblyjs/wasm-gen": "1.11.1", + "@webassemblyjs/wasm-opt": "1.11.1", + "@webassemblyjs/wasm-parser": "1.11.1", + "@webassemblyjs/wast-printer": "1.11.1" + } + }, + "node_modules/@webassemblyjs/wasm-gen": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz", + "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/ieee754": "1.11.1", + "@webassemblyjs/leb128": "1.11.1", + "@webassemblyjs/utf8": "1.11.1" + } + }, + "node_modules/@webassemblyjs/wasm-opt": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz", + "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-buffer": "1.11.1", + "@webassemblyjs/wasm-gen": "1.11.1", + "@webassemblyjs/wasm-parser": "1.11.1" + } + }, + "node_modules/@webassemblyjs/wasm-parser": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz", + "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/helper-api-error": "1.11.1", + "@webassemblyjs/helper-wasm-bytecode": "1.11.1", + "@webassemblyjs/ieee754": "1.11.1", + "@webassemblyjs/leb128": "1.11.1", + "@webassemblyjs/utf8": "1.11.1" + } + }, + "node_modules/@webassemblyjs/wast-printer": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz", + "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==", + "dev": true, + "dependencies": { + "@webassemblyjs/ast": "1.11.1", + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@xtuc/ieee754": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", + "dev": true + }, + "node_modules/@xtuc/long": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", + "dev": true + }, + "node_modules/accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/acorn": { + "version": "8.8.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", + "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-import-assertions": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", + "dev": true, + "peerDependencies": { + "acorn": "^8" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/acorn-walk": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", + "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/ajv": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz", + "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ajv-formats": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", + "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", + "dev": true, + "dependencies": { + "ajv": "^8.0.0" + }, + "peerDependencies": { + "ajv": "^8.0.0" + }, + "peerDependenciesMeta": { + "ajv": { + "optional": true + } + } + }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/ansi-escapes": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", + "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.21.3" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==" + }, + "node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true + }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" + }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==", + "dev": true + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true + }, + "node_modules/babel-jest": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.3.1.tgz", + "integrity": "sha512-aard+xnMoxgjwV70t0L6wkW/3HQQtV+O0PEimxKgzNqCJnbYmroPojdP2tqKSOAt8QAKV/uSZU8851M7B5+fcA==", + "dev": true, + "dependencies": { + "@jest/transform": "^29.3.1", + "@types/babel__core": "^7.1.14", + "babel-plugin-istanbul": "^6.1.1", + "babel-preset-jest": "^29.2.0", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "slash": "^3.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.8.0" + } + }, + "node_modules/babel-jest/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/babel-plugin-istanbul": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", + "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.0.0", + "@istanbuljs/load-nyc-config": "^1.0.0", + "@istanbuljs/schema": "^0.1.2", + "istanbul-lib-instrument": "^5.0.4", + "test-exclude": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/babel-plugin-jest-hoist": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.2.0.tgz", + "integrity": "sha512-TnspP2WNiR3GLfCsUNHqeXw0RoQ2f9U5hQ5L3XFpwuO8htQmSrhh8qsB6vi5Yi8+kuynN1yjDjQsPfkebmB6ZA==", + "dev": true, + "dependencies": { + "@babel/template": "^7.3.3", + "@babel/types": "^7.3.3", + "@types/babel__core": "^7.1.14", + "@types/babel__traverse": "^7.0.6" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/babel-preset-current-node-syntax": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz", + "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==", + "dev": true, + "dependencies": { + "@babel/plugin-syntax-async-generators": "^7.8.4", + "@babel/plugin-syntax-bigint": "^7.8.3", + "@babel/plugin-syntax-class-properties": "^7.8.3", + "@babel/plugin-syntax-import-meta": "^7.8.3", + "@babel/plugin-syntax-json-strings": "^7.8.3", + "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3", + "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", + "@babel/plugin-syntax-numeric-separator": "^7.8.3", + "@babel/plugin-syntax-object-rest-spread": "^7.8.3", + "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", + "@babel/plugin-syntax-optional-chaining": "^7.8.3", + "@babel/plugin-syntax-top-level-await": "^7.8.3" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/babel-preset-jest": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.2.0.tgz", + "integrity": "sha512-z9JmMJppMxNv8N7fNRHvhMg9cvIkMxQBXgFkane3yKVEvEOP+kB50lk8DFRvF9PGqbyXxlmebKWhuDORO8RgdA==", + "dev": true, + "dependencies": { + "babel-plugin-jest-hoist": "^29.2.0", + "babel-preset-current-node-syntax": "^1.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/bl": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", + "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", + "dev": true, + "dependencies": { + "buffer": "^5.5.0", + "inherits": "^2.0.4", + "readable-stream": "^3.4.0" + } + }, + "node_modules/bl/node_modules/readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/body-parser": { + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", + "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", + "dependencies": { + "bytes": "3.1.2", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "on-finished": "2.4.1", + "qs": "6.11.0", + "raw-body": "2.5.1", + "type-is": "~1.6.18", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/body-parser/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/body-parser/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.21.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", + "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001400", + "electron-to-chromium": "^1.4.251", + "node-releases": "^2.0.6", + "update-browserslist-db": "^1.0.9" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/bs-logger": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz", + "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==", + "dev": true, + "dependencies": { + "fast-json-stable-stringify": "2.x" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/bser": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz", + "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==", + "dev": true, + "dependencies": { + "node-int64": "^0.4.0" + } + }, + "node_modules/buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" + }, + "node_modules/buffer-writer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz", + "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dependencies": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001444", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001444.tgz", + "integrity": "sha512-ecER9xgJQVMqcrxThKptsW0pPxSae8R2RB87LNa+ivW9ppNWRHEplXcDzkCOP4LYWGj8hunXLqaiC41iBATNyg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + } + ] + }, + "node_modules/chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/char-regex": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", + "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/chardet": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", + "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", + "dev": true + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chrome-trace-event": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", + "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", + "dev": true, + "engines": { + "node": ">=6.0" + } + }, + "node_modules/ci-info": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.1.tgz", + "integrity": "sha512-4jYS4MOAaCIStSRwiuxc4B8MYhIe676yO1sYGzARnjXkWpmzZMMYxY6zu8WYWDhSuth5zhrQ1rhNSibyyvv4/w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/sibiraj-s" + } + ], + "engines": { + "node": ">=8" + } + }, + "node_modules/cjs-module-lexer": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", + "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", + "dev": true + }, + "node_modules/cli-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", + "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", + "dev": true, + "dependencies": { + "restore-cursor": "^3.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/cli-spinners": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz", + "integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==", + "dev": true, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cli-table3": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz", + "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0" + }, + "engines": { + "node": "10.* || >= 12.*" + }, + "optionalDependencies": { + "@colors/colors": "1.5.0" + } + }, + "node_modules/cli-width": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz", + "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/clone": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", + "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==", + "dev": true, + "engines": { + "node": ">=0.8" + } + }, + "node_modules/co": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", + "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==", + "dev": true, + "engines": { + "iojs": ">= 1.0.0", + "node": ">= 0.12.0" + } + }, + "node_modules/collect-v8-coverage": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", + "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==", + "dev": true + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", + "dev": true + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, + "node_modules/concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "engines": [ + "node >= 0.8" + ], + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/consola": { + "version": "2.15.3", + "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz", + "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==" + }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, + "node_modules/cookie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" + }, + "node_modules/cookiejar": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.4.tgz", + "integrity": "sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==", + "dev": true + }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" + }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/create-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", + "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", + "dev": true + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/dedent": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", + "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==", + "dev": true + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true + }, + "node_modules/deepmerge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/defaults": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", + "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==", + "dev": true, + "dependencies": { + "clone": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/destroy": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", + "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/detect-newline": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", + "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/dezalgo": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz", + "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==", + "dev": true, + "dependencies": { + "asap": "^2.0.0", + "wrappy": "1" + } + }, + "node_modules/diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true, + "engines": { + "node": ">=0.3.1" + } + }, + "node_modules/diff-sequences": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.3.1.tgz", + "integrity": "sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ==", + "dev": true, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/dottie": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.2.tgz", + "integrity": "sha512-fmrwR04lsniq/uSr8yikThDTrM7epXHBAAjH9TbeH3rEA8tdCO7mRzB9hdmdGyJCxF8KERo9CITcm3kGuoyMhg==", + "peer": true + }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" + }, + "node_modules/electron-to-chromium": { + "version": "1.4.284", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", + "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", + "dev": true + }, + "node_modules/emittery": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz", + "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sindresorhus/emittery?sponsor=1" + } + }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dev": true, + "dependencies": { + "once": "^1.4.0" + } + }, + "node_modules/enhanced-resolve": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz", + "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/es-module-lexer": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", + "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==", + "dev": true + }, + "node_modules/escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint": { + "version": "8.31.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz", + "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==", + "dev": true, + "dependencies": { + "@eslint/eslintrc": "^1.4.1", + "@humanwhocodes/config-array": "^0.11.8", + "@humanwhocodes/module-importer": "^1.0.1", + "@nodelib/fs.walk": "^1.2.8", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.1.1", + "eslint-utils": "^3.0.0", + "eslint-visitor-keys": "^3.3.0", + "espree": "^9.4.0", + "esquery": "^1.4.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "globals": "^13.19.0", + "grapheme-splitter": "^1.0.4", + "ignore": "^5.2.0", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "js-sdsl": "^4.1.4", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "regexpp": "^3.2.0", + "strip-ansi": "^6.0.1", + "strip-json-comments": "^3.1.0", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-config-prettier": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz", + "integrity": "sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, + "node_modules/eslint-plugin-prettier": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz", + "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==", + "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "eslint": ">=7.28.0", + "prettier": ">=2.0.0" + }, + "peerDependenciesMeta": { + "eslint-config-prettier": { + "optional": true + } + } + }, + "node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/eslint-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", + "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^2.0.0" + }, + "engines": { + "node": "^10.0.0 || ^12.0.0 || >= 14.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/mysticatea" + }, + "peerDependencies": { + "eslint": ">=5" + } + }, + "node_modules/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz", + "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/eslint/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/eslint/node_modules/eslint-scope": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", + "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/eslint/node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/eslint/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/eslint/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/espree": { + "version": "9.4.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz", + "integrity": "sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==", + "dev": true, + "dependencies": { + "acorn": "^8.8.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true, + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/esquery": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", + "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", + "dev": true, + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esquery/node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esrecurse/node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/events": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", + "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", + "dev": true, + "engines": { + "node": ">=0.8.x" + } + }, + "node_modules/execa": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", + "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", + "is-stream": "^2.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", + "strip-final-newline": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sindresorhus/execa?sponsor=1" + } + }, + "node_modules/exit": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", + "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/expect": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/expect/-/expect-29.3.1.tgz", + "integrity": "sha512-gGb1yTgU30Q0O/tQq+z30KBWv24ApkMgFUpvKBkyLUBL68Wv8dHdJxTBZFl/iT8K/bqDHvUYRH6IIN3rToopPA==", + "dev": true, + "dependencies": { + "@jest/expect-utils": "^29.3.1", + "jest-get-type": "^29.2.0", + "jest-matcher-utils": "^29.3.1", + "jest-message-util": "^29.3.1", + "jest-util": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/express": { + "version": "4.18.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", + "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", + "dependencies": { + "accepts": "~1.3.8", + "array-flatten": "1.1.1", + "body-parser": "1.20.1", + "content-disposition": "0.5.4", + "content-type": "~1.0.4", + "cookie": "0.5.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "2.0.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "1.2.0", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.7", + "qs": "6.11.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "0.18.0", + "serve-static": "1.15.0", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/express/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/express/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/express/node_modules/path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" + }, + "node_modules/external-editor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", + "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==", + "dev": true, + "dependencies": { + "chardet": "^0.7.0", + "iconv-lite": "^0.4.24", + "tmp": "^0.0.33" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "node_modules/fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, + "node_modules/fast-glob": { + "version": "3.2.12", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", + "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true + }, + "node_modules/fast-safe-stringify": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz", + "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==" + }, + "node_modules/fastq": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", + "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", + "dev": true, + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/fb-watchman": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz", + "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==", + "dev": true, + "dependencies": { + "bser": "2.1.1" + } + }, + "node_modules/figures": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", + "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.5" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/figures/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/finalhandler": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", + "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "statuses": "2.0.1", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/finalhandler/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/finalhandler/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", + "dev": true, + "dependencies": { + "flatted": "^3.1.0", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/flatted": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", + "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==", + "dev": true + }, + "node_modules/fork-ts-checker-webpack-plugin": { + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.2.14.tgz", + "integrity": "sha512-Tg2feh/n8k486KX0EbXVUfJj3j0xnnbKYTJw0fnIb2QdV0+lblOYZSal5ed9hARoWVwKeOC7sYE2EakSRLo5ZA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.16.7", + "chalk": "^4.1.2", + "chokidar": "^3.5.3", + "cosmiconfig": "^7.0.1", + "deepmerge": "^4.2.2", + "fs-extra": "^10.0.0", + "memfs": "^3.4.1", + "minimatch": "^3.0.4", + "node-abort-controller": "^3.0.1", + "schema-utils": "^3.1.1", + "semver": "^7.3.5", + "tapable": "^2.2.1" + }, + "engines": { + "node": ">=12.13.0", + "yarn": ">=1.0.0" + }, + "peerDependencies": { + "typescript": ">3.6.0", + "vue-template-compiler": "*", + "webpack": "^5.11.0" + }, + "peerDependenciesMeta": { + "vue-template-compiler": { + "optional": true + } + } + }, + "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dev": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/formidable": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/formidable/-/formidable-2.1.1.tgz", + "integrity": "sha512-0EcS9wCFEzLvfiks7omJ+SiYJAiD+TzK4Pcw1UlUoGnhUxDcMKjt0P7x8wEb0u6OHu8Nb98WG3nxtlF5C7bvUQ==", + "dev": true, + "dependencies": { + "dezalgo": "^1.0.4", + "hexoid": "^1.0.0", + "once": "^1.4.0", + "qs": "^6.11.0" + }, + "funding": { + "url": "https://ko-fi.com/tunnckoCore/commissions" + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fs-extra": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz", + "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "node_modules/fs-monkey": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz", + "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==", + "dev": true + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, + "node_modules/get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dependencies": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-package-type": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", + "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==", + "dev": true, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/glob-to-regexp": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", + "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==", + "dev": true + }, + "node_modules/globals": { + "version": "13.19.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz", + "integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.10", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", + "dev": true + }, + "node_modules/grapheme-splitter": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz", + "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", + "dev": true + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hexoid": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz", + "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + }, + "node_modules/http-errors": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", + "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "dependencies": { + "depd": "2.0.0", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "toidentifier": "1.0.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/human-signals": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", + "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", + "dev": true, + "engines": { + "node": ">=10.17.0" + } + }, + "node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/ignore": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", + "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/import-local": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz", + "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==", + "dev": true, + "dependencies": { + "pkg-dir": "^4.2.0", + "resolve-cwd": "^3.0.0" + }, + "bin": { + "import-local-fixture": "fixtures/cli.js" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "engines": { + "node": ">=0.8.19" + } + }, + "node_modules/inflection": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.4.tgz", + "integrity": "sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==", + "engines": [ + "node >= 0.4.0" + ], + "peer": true + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "node_modules/inquirer": { + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz", + "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==", + "dev": true, + "dependencies": { + "ansi-escapes": "^4.2.1", + "chalk": "^4.1.0", + "cli-cursor": "^3.1.0", + "cli-width": "^3.0.0", + "external-editor": "^3.0.3", + "figures": "^3.0.0", + "lodash": "^4.17.19", + "mute-stream": "0.0.8", + "run-async": "^2.4.0", + "rxjs": "^6.6.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0", + "through": "^2.3.6" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/inquirer/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/inquirer/node_modules/rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "dev": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "engines": { + "npm": ">=2.0.0" + } + }, + "node_modules/inquirer/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, + "node_modules/interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dev": true, + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-generator-fn": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz", + "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-interactive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", + "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/is-path-inside": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-unicode-supported": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", + "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true + }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz", + "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-instrument": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz", + "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==", + "dev": true, + "dependencies": { + "@babel/core": "^7.12.3", + "@babel/parser": "^7.14.7", + "@istanbuljs/schema": "^0.1.2", + "istanbul-lib-coverage": "^3.2.0", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-instrument/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", + "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==", + "dev": true, + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^3.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-source-maps": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz", + "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==", + "dev": true, + "dependencies": { + "debug": "^4.1.1", + "istanbul-lib-coverage": "^3.0.0", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-lib-source-maps/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/istanbul-reports": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz", + "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==", + "dev": true, + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/iterare": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/iterare/-/iterare-1.2.1.tgz", + "integrity": "sha512-RKYVTCjAnRthyJes037NX/IiqeidgN1xc3j1RjFfECFp28A1GVwK9nA+i0rJPaHqSZwygLzRnFlzUuHFoWWy+Q==", + "engines": { + "node": ">=6" + } + }, + "node_modules/jest": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest/-/jest-29.3.1.tgz", + "integrity": "sha512-6iWfL5DTT0Np6UYs/y5Niu7WIfNv/wRTtN5RSXt2DIEft3dx3zPuw/3WJQBCJfmEzvDiEKwoqMbGD9n49+qLSA==", + "dev": true, + "dependencies": { + "@jest/core": "^29.3.1", + "@jest/types": "^29.3.1", + "import-local": "^3.0.2", + "jest-cli": "^29.3.1" + }, + "bin": { + "jest": "bin/jest.js" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" + }, + "peerDependenciesMeta": { + "node-notifier": { + "optional": true + } + } + }, + "node_modules/jest-changed-files": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.2.0.tgz", + "integrity": "sha512-qPVmLLyBmvF5HJrY7krDisx6Voi8DmlV3GZYX0aFNbaQsZeoz1hfxcCMbqDGuQCxU1dJy9eYc2xscE8QrCCYaA==", + "dev": true, + "dependencies": { + "execa": "^5.0.0", + "p-limit": "^3.1.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-circus": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.3.1.tgz", + "integrity": "sha512-wpr26sEvwb3qQQbdlmei+gzp6yoSSoSL6GsLPxnuayZSMrSd5Ka7IjAvatpIernBvT2+Ic6RLTg+jSebScmasg==", + "dev": true, + "dependencies": { + "@jest/environment": "^29.3.1", + "@jest/expect": "^29.3.1", + "@jest/test-result": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "chalk": "^4.0.0", + "co": "^4.6.0", + "dedent": "^0.7.0", + "is-generator-fn": "^2.0.0", + "jest-each": "^29.3.1", + "jest-matcher-utils": "^29.3.1", + "jest-message-util": "^29.3.1", + "jest-runtime": "^29.3.1", + "jest-snapshot": "^29.3.1", + "jest-util": "^29.3.1", + "p-limit": "^3.1.0", + "pretty-format": "^29.3.1", + "slash": "^3.0.0", + "stack-utils": "^2.0.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-circus/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-cli": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.3.1.tgz", + "integrity": "sha512-TO/ewvwyvPOiBBuWZ0gm04z3WWP8TIK8acgPzE4IxgsLKQgb377NYGrQLc3Wl/7ndWzIH2CDNNsUjGxwLL43VQ==", + "dev": true, + "dependencies": { + "@jest/core": "^29.3.1", + "@jest/test-result": "^29.3.1", + "@jest/types": "^29.3.1", + "chalk": "^4.0.0", + "exit": "^0.1.2", + "graceful-fs": "^4.2.9", + "import-local": "^3.0.2", + "jest-config": "^29.3.1", + "jest-util": "^29.3.1", + "jest-validate": "^29.3.1", + "prompts": "^2.0.1", + "yargs": "^17.3.1" + }, + "bin": { + "jest": "bin/jest.js" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" + }, + "peerDependenciesMeta": { + "node-notifier": { + "optional": true + } + } + }, + "node_modules/jest-cli/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-config": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-29.3.1.tgz", + "integrity": "sha512-y0tFHdj2WnTEhxmGUK1T7fgLen7YK4RtfvpLFBXfQkh2eMJAQq24Vx9472lvn5wg0MAO6B+iPfJfzdR9hJYalg==", + "dev": true, + "dependencies": { + "@babel/core": "^7.11.6", + "@jest/test-sequencer": "^29.3.1", + "@jest/types": "^29.3.1", + "babel-jest": "^29.3.1", + "chalk": "^4.0.0", + "ci-info": "^3.2.0", + "deepmerge": "^4.2.2", + "glob": "^7.1.3", + "graceful-fs": "^4.2.9", + "jest-circus": "^29.3.1", + "jest-environment-node": "^29.3.1", + "jest-get-type": "^29.2.0", + "jest-regex-util": "^29.2.0", + "jest-resolve": "^29.3.1", + "jest-runner": "^29.3.1", + "jest-util": "^29.3.1", + "jest-validate": "^29.3.1", + "micromatch": "^4.0.4", + "parse-json": "^5.2.0", + "pretty-format": "^29.3.1", + "slash": "^3.0.0", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "@types/node": "*", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, + "node_modules/jest-config/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-diff": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.3.1.tgz", + "integrity": "sha512-vU8vyiO7568tmin2lA3r2DP8oRvzhvRcD4DjpXc6uGveQodyk7CKLhQlCSiwgx3g0pFaE88/KLZ0yaTWMc4Uiw==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "diff-sequences": "^29.3.1", + "jest-get-type": "^29.2.0", + "pretty-format": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-diff/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-docblock": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.2.0.tgz", + "integrity": "sha512-bkxUsxTgWQGbXV5IENmfiIuqZhJcyvF7tU4zJ/7ioTutdz4ToB5Yx6JOFBpgI+TphRY4lhOyCWGNH/QFQh5T6A==", + "dev": true, + "dependencies": { + "detect-newline": "^3.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-each": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-29.3.1.tgz", + "integrity": "sha512-qrZH7PmFB9rEzCSl00BWjZYuS1BSOH8lLuC0azQE9lQrAx3PWGKHTDudQiOSwIy5dGAJh7KA0ScYlCP7JxvFYA==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "chalk": "^4.0.0", + "jest-get-type": "^29.2.0", + "jest-util": "^29.3.1", + "pretty-format": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-each/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-environment-node": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.3.1.tgz", + "integrity": "sha512-xm2THL18Xf5sIHoU7OThBPtuH6Lerd+Y1NLYiZJlkE3hbE+7N7r8uvHIl/FkZ5ymKXJe/11SQuf3fv4v6rUMag==", + "dev": true, + "dependencies": { + "@jest/environment": "^29.3.1", + "@jest/fake-timers": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "jest-mock": "^29.3.1", + "jest-util": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-get-type": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.2.0.tgz", + "integrity": "sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA==", + "dev": true, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-haste-map": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.3.1.tgz", + "integrity": "sha512-/FFtvoG1xjbbPXQLFef+WSU4yrc0fc0Dds6aRPBojUid7qlPqZvxdUBA03HW0fnVHXVCnCdkuoghYItKNzc/0A==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "@types/graceful-fs": "^4.1.3", + "@types/node": "*", + "anymatch": "^3.0.3", + "fb-watchman": "^2.0.0", + "graceful-fs": "^4.2.9", + "jest-regex-util": "^29.2.0", + "jest-util": "^29.3.1", + "jest-worker": "^29.3.1", + "micromatch": "^4.0.4", + "walker": "^1.0.8" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "optionalDependencies": { + "fsevents": "^2.3.2" + } + }, + "node_modules/jest-leak-detector": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.3.1.tgz", + "integrity": "sha512-3DA/VVXj4zFOPagGkuqHnSQf1GZBmmlagpguxEERO6Pla2g84Q1MaVIB3YMxgUaFIaYag8ZnTyQgiZ35YEqAQA==", + "dev": true, + "dependencies": { + "jest-get-type": "^29.2.0", + "pretty-format": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-matcher-utils": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.3.1.tgz", + "integrity": "sha512-fkRMZUAScup3txIKfMe3AIZZmPEjWEdsPJFK3AIy5qRohWqQFg1qrmKfYXR9qEkNc7OdAu2N4KPHibEmy4HPeQ==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "jest-diff": "^29.3.1", + "jest-get-type": "^29.2.0", + "pretty-format": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-matcher-utils/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-message-util": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.3.1.tgz", + "integrity": "sha512-lMJTbgNcDm5z+6KDxWtqOFWlGQxD6XaYwBqHR8kmpkP+WWWG90I35kdtQHY67Ay5CSuydkTBbJG+tH9JShFCyA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.12.13", + "@jest/types": "^29.3.1", + "@types/stack-utils": "^2.0.0", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "micromatch": "^4.0.4", + "pretty-format": "^29.3.1", + "slash": "^3.0.0", + "stack-utils": "^2.0.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-message-util/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-mock": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.3.1.tgz", + "integrity": "sha512-H8/qFDtDVMFvFP4X8NuOT3XRDzOUTz+FeACjufHzsOIBAxivLqkB1PoLCaJx9iPPQ8dZThHPp/G3WRWyMgA3JA==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "@types/node": "*", + "jest-util": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-pnp-resolver": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", + "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", + "dev": true, + "engines": { + "node": ">=6" + }, + "peerDependencies": { + "jest-resolve": "*" + }, + "peerDependenciesMeta": { + "jest-resolve": { + "optional": true + } + } + }, + "node_modules/jest-regex-util": { + "version": "29.2.0", + "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.2.0.tgz", + "integrity": "sha512-6yXn0kg2JXzH30cr2NlThF+70iuO/3irbaB4mh5WyqNIvLLP+B6sFdluO1/1RJmslyh/f9osnefECflHvTbwVA==", + "dev": true, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-resolve": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.3.1.tgz", + "integrity": "sha512-amXJgH/Ng712w3Uz5gqzFBBjxV8WFLSmNjoreBGMqxgCz5cH7swmBZzgBaCIOsvb0NbpJ0vgaSFdJqMdT+rADw==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "jest-haste-map": "^29.3.1", + "jest-pnp-resolver": "^1.2.2", + "jest-util": "^29.3.1", + "jest-validate": "^29.3.1", + "resolve": "^1.20.0", + "resolve.exports": "^1.1.0", + "slash": "^3.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-resolve-dependencies": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.3.1.tgz", + "integrity": "sha512-Vk0cYq0byRw2WluNmNWGqPeRnZ3p3hHmjJMp2dyyZeYIfiBskwq4rpiuGFR6QGAdbj58WC7HN4hQHjf2mpvrLA==", + "dev": true, + "dependencies": { + "jest-regex-util": "^29.2.0", + "jest-snapshot": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-resolve/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-runner": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.3.1.tgz", + "integrity": "sha512-oFvcwRNrKMtE6u9+AQPMATxFcTySyKfLhvso7Sdk/rNpbhg4g2GAGCopiInk1OP4q6gz3n6MajW4+fnHWlU3bA==", + "dev": true, + "dependencies": { + "@jest/console": "^29.3.1", + "@jest/environment": "^29.3.1", + "@jest/test-result": "^29.3.1", + "@jest/transform": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "chalk": "^4.0.0", + "emittery": "^0.13.1", + "graceful-fs": "^4.2.9", + "jest-docblock": "^29.2.0", + "jest-environment-node": "^29.3.1", + "jest-haste-map": "^29.3.1", + "jest-leak-detector": "^29.3.1", + "jest-message-util": "^29.3.1", + "jest-resolve": "^29.3.1", + "jest-runtime": "^29.3.1", + "jest-util": "^29.3.1", + "jest-watcher": "^29.3.1", + "jest-worker": "^29.3.1", + "p-limit": "^3.1.0", + "source-map-support": "0.5.13" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-runner/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-runner/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/jest-runner/node_modules/source-map-support": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz", + "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==", + "dev": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/jest-runtime": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.3.1.tgz", + "integrity": "sha512-jLzkIxIqXwBEOZx7wx9OO9sxoZmgT2NhmQKzHQm1xwR1kNW/dn0OjxR424VwHHf1SPN6Qwlb5pp1oGCeFTQ62A==", + "dev": true, + "dependencies": { + "@jest/environment": "^29.3.1", + "@jest/fake-timers": "^29.3.1", + "@jest/globals": "^29.3.1", + "@jest/source-map": "^29.2.0", + "@jest/test-result": "^29.3.1", + "@jest/transform": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "chalk": "^4.0.0", + "cjs-module-lexer": "^1.0.0", + "collect-v8-coverage": "^1.0.0", + "glob": "^7.1.3", + "graceful-fs": "^4.2.9", + "jest-haste-map": "^29.3.1", + "jest-message-util": "^29.3.1", + "jest-mock": "^29.3.1", + "jest-regex-util": "^29.2.0", + "jest-resolve": "^29.3.1", + "jest-snapshot": "^29.3.1", + "jest-util": "^29.3.1", + "slash": "^3.0.0", + "strip-bom": "^4.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-runtime/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-snapshot": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.3.1.tgz", + "integrity": "sha512-+3JOc+s28upYLI2OJM4PWRGK9AgpsMs/ekNryUV0yMBClT9B1DF2u2qay8YxcQd338PPYSFNb0lsar1B49sLDA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.11.6", + "@babel/generator": "^7.7.2", + "@babel/plugin-syntax-jsx": "^7.7.2", + "@babel/plugin-syntax-typescript": "^7.7.2", + "@babel/traverse": "^7.7.2", + "@babel/types": "^7.3.3", + "@jest/expect-utils": "^29.3.1", + "@jest/transform": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/babel__traverse": "^7.0.6", + "@types/prettier": "^2.1.5", + "babel-preset-current-node-syntax": "^1.0.0", + "chalk": "^4.0.0", + "expect": "^29.3.1", + "graceful-fs": "^4.2.9", + "jest-diff": "^29.3.1", + "jest-get-type": "^29.2.0", + "jest-haste-map": "^29.3.1", + "jest-matcher-utils": "^29.3.1", + "jest-message-util": "^29.3.1", + "jest-util": "^29.3.1", + "natural-compare": "^1.4.0", + "pretty-format": "^29.3.1", + "semver": "^7.3.5" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-snapshot/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-util": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.3.1.tgz", + "integrity": "sha512-7YOVZaiX7RJLv76ZfHt4nbNEzzTRiMW/IiOG7ZOKmTXmoGBxUDefgMAxQubu6WPVqP5zSzAdZG0FfLcC7HOIFQ==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "@types/node": "*", + "chalk": "^4.0.0", + "ci-info": "^3.2.0", + "graceful-fs": "^4.2.9", + "picomatch": "^2.2.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-util/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-validate": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.3.1.tgz", + "integrity": "sha512-N9Lr3oYR2Mpzuelp1F8negJR3YE+L1ebk1rYA5qYo9TTY3f9OWdptLoNSPP9itOCBIRBqjt/S5XHlzYglLN67g==", + "dev": true, + "dependencies": { + "@jest/types": "^29.3.1", + "camelcase": "^6.2.0", + "chalk": "^4.0.0", + "jest-get-type": "^29.2.0", + "leven": "^3.1.0", + "pretty-format": "^29.3.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-validate/node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/jest-validate/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-watcher": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.3.1.tgz", + "integrity": "sha512-RspXG2BQFDsZSRKGCT/NiNa8RkQ1iKAjrO0//soTMWx/QUt+OcxMqMSBxz23PYGqUuWm2+m2mNNsmj0eIoOaFg==", + "dev": true, + "dependencies": { + "@jest/test-result": "^29.3.1", + "@jest/types": "^29.3.1", + "@types/node": "*", + "ansi-escapes": "^4.2.1", + "chalk": "^4.0.0", + "emittery": "^0.13.1", + "jest-util": "^29.3.1", + "string-length": "^4.0.1" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-watcher/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-worker": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.3.1.tgz", + "integrity": "sha512-lY4AnnmsEWeiXirAIA0c9SDPbuCBq8IYuDVL8PMm0MZ2PEs2yPvRA/J64QBXuZp7CYKrDM/rmNrc9/i3KJQncw==", + "dev": true, + "dependencies": { + "@types/node": "*", + "jest-util": "^29.3.1", + "merge-stream": "^2.0.0", + "supports-color": "^8.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/jest-worker/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "node_modules/js-sdsl": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", + "integrity": "sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/js-sdsl" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, + "node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/jsonc-parser": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", + "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", + "dev": true + }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/kleur": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", + "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/leven": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", + "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true + }, + "node_modules/loader-runner": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", + "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==", + "dev": true, + "engines": { + "node": ">=6.11.5" + } + }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash.memoize": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", + "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", + "dev": true + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, + "node_modules/log-symbols": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", + "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "is-unicode-supported": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-symbols/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/macos-release": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz", + "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==", + "dev": true, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/magic-string": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "dev": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/make-error": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", + "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", + "dev": true + }, + "node_modules/makeerror": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz", + "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==", + "dev": true, + "dependencies": { + "tmpl": "1.0.5" + } + }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/memfs": { + "version": "3.4.13", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz", + "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==", + "dev": true, + "dependencies": { + "fs-monkey": "^1.0.3" + }, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" + }, + "node_modules/merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "dependencies": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mimic-fn": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", + "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/minimist": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "peer": true, + "engines": { + "node": "*" + } + }, + "node_modules/moment-timezone": { + "version": "0.5.40", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.40.tgz", + "integrity": "sha512-tWfmNkRYmBkPJz5mr9GVDn9vRlVZOTe6yqY92rFxiOdWXbjaR0+9LwQnZGGuNR63X456NqmEkbskte8tWL5ePg==", + "peer": true, + "dependencies": { + "moment": ">= 2.9.0" + }, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "node_modules/multer": { + "version": "1.4.4-lts.1", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.4-lts.1.tgz", + "integrity": "sha512-WeSGziVj6+Z2/MwQo3GvqzgR+9Uc+qt8SwHKh3gvNPiISKfsMfG4SvCOFYlxxgkXt7yIV2i1yczehm0EOKIxIg==", + "dependencies": { + "append-field": "^1.0.0", + "busboy": "^1.0.0", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.4", + "object-assign": "^4.1.1", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/mute-stream": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", + "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", + "dev": true + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true + }, + "node_modules/natural-compare-lite": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz", + "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==", + "dev": true + }, + "node_modules/negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", + "dev": true + }, + "node_modules/node-abort-controller": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.0.1.tgz", + "integrity": "sha512-/ujIVxthRs+7q6hsdjHMaj8hRG9NuWmwrz+JdRwZ14jdFoKSkm+vDsCbF9PLpnSqjaWQJuTmVtcWHNLr+vrOFw==", + "dev": true + }, + "node_modules/node-emoji": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz", + "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==", + "dev": true, + "dependencies": { + "lodash": "^4.17.21" + } + }, + "node_modules/node-fetch": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.8.tgz", + "integrity": "sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/node-int64": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz", + "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==", + "dev": true + }, + "node_modules/node-releases": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", + "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==", + "dev": true + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/npm-run-path": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", + "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", + "dev": true, + "dependencies": { + "path-key": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "engines": { + "node": ">= 6" + } + }, + "node_modules/object-inspect": { + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", + "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/onetime": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", + "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", + "dev": true, + "dependencies": { + "mimic-fn": "^2.1.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "dev": true, + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/ora": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", + "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==", + "dev": true, + "dependencies": { + "bl": "^4.1.0", + "chalk": "^4.1.0", + "cli-cursor": "^3.1.0", + "cli-spinners": "^2.5.0", + "is-interactive": "^1.0.0", + "is-unicode-supported": "^0.1.0", + "log-symbols": "^4.1.0", + "strip-ansi": "^6.0.0", + "wcwidth": "^1.0.1" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ora/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/os-name": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/os-name/-/os-name-4.0.1.tgz", + "integrity": "sha512-xl9MAoU97MH1Xt5K9ERft2YfCAoaO6msy1OBA0ozxEC0x0TmIoE6K3QvgJMMZA9yKGLmHXNY/YZoDbiGDj4zYw==", + "dev": true, + "dependencies": { + "macos-release": "^2.5.0", + "windows-release": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/os-tmpdir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/packet-reader": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/packet-reader/-/packet-reader-1.0.0.tgz", + "integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==", + "dev": true + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/path-to-regexp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.2.0.tgz", + "integrity": "sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA==" + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/pg": { + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/pg/-/pg-8.9.0.tgz", + "integrity": "sha512-ZJM+qkEbtOHRuXjmvBtOgNOXOtLSbxiMiUVMgE4rV6Zwocy03RicCVvDXgx8l4Biwo8/qORUnEqn2fdQzV7KCg==", + "dev": true, + "dependencies": { + "buffer-writer": "2.0.0", + "packet-reader": "1.0.0", + "pg-connection-string": "^2.5.0", + "pg-pool": "^3.5.2", + "pg-protocol": "^1.6.0", + "pg-types": "^2.1.0", + "pgpass": "1.x" + }, + "engines": { + "node": ">= 8.0.0" + }, + "peerDependencies": { + "pg-native": ">=3.0.1" + }, + "peerDependenciesMeta": { + "pg-native": { + "optional": true + } + } + }, + "node_modules/pg-connection-string": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz", + "integrity": "sha512-r5o/V/ORTA6TmUnyWZR9nCj1klXCO2CEKNRlVuJptZe85QuhFayC7WeMic7ndayT5IRIR0S0xFxFi2ousartlQ==" + }, + "node_modules/pg-int8": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", + "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==", + "dev": true, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/pg-pool": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.5.2.tgz", + "integrity": "sha512-His3Fh17Z4eg7oANLob6ZvH8xIVen3phEZh2QuyrIl4dQSDVEabNducv6ysROKpDNPSD+12tONZVWfSgMvDD9w==", + "dev": true, + "peerDependencies": { + "pg": ">=8.0" + } + }, + "node_modules/pg-protocol": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.6.0.tgz", + "integrity": "sha512-M+PDm637OY5WM307051+bsDia5Xej6d9IR4GwJse1qA1DIhiKlksvrneZOYQq42OM+spubpcNYEo2FcKQrDk+Q==", + "dev": true + }, + "node_modules/pg-types": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz", + "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==", + "dev": true, + "dependencies": { + "pg-int8": "1.0.1", + "postgres-array": "~2.0.0", + "postgres-bytea": "~1.0.0", + "postgres-date": "~1.0.4", + "postgres-interval": "^1.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/pgpass": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz", + "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==", + "dev": true, + "dependencies": { + "split2": "^4.1.0" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pirates": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", + "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/pkg-dir": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", + "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", + "dev": true, + "dependencies": { + "find-up": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/pkg-dir/node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/pkg-dir/node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/pkg-dir/node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pkg-dir/node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/pluralize": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz", + "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/postgres-array": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz", + "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/postgres-bytea": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz", + "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postgres-date": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz", + "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postgres-interval": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz", + "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==", + "dev": true, + "dependencies": { + "xtend": "^4.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/prettier": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz", + "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/pretty-format": { + "version": "29.3.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.3.1.tgz", + "integrity": "sha512-FyLnmb1cYJV8biEIiRyzRFvs2lry7PPIvOqKVe1GCUEYg4YGmlx1qG9EJNMxArYm7piII4qb8UV1Pncq5dxmcg==", + "dev": true, + "dependencies": { + "@jest/schemas": "^29.0.0", + "ansi-styles": "^5.0.0", + "react-is": "^18.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/pretty-format/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, + "node_modules/prompts": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", + "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==", + "dev": true, + "dependencies": { + "kleur": "^3.0.3", + "sisteransi": "^1.0.5" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/pump": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", + "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", + "dev": true, + "dependencies": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, + "node_modules/punycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.2.0.tgz", + "integrity": "sha512-LN6QV1IJ9ZhxWTNdktaPClrNfp8xdSAYS0Zk2ddX7XsXZAxckMHPCBcHRo0cTcEIgYPRiGEkmji3Idkh2yFtYw==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/qs": { + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", + "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "dependencies": { + "side-channel": "^1.0.4" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dev": true, + "dependencies": { + "safe-buffer": "^5.1.0" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", + "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", + "dependencies": { + "bytes": "3.1.2", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "dev": true + }, + "node_modules/readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/readable-stream/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", + "dev": true, + "dependencies": { + "resolve": "^1.1.6" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/reflect-metadata": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz", + "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==" + }, + "node_modules/regexpp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz", + "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/mysticatea" + } + }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-cwd": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz", + "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==", + "dev": true, + "dependencies": { + "resolve-from": "^5.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/resolve-cwd/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/resolve.exports": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz", + "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/restore-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", + "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", + "dev": true, + "dependencies": { + "onetime": "^5.1.0", + "signal-exit": "^3.0.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/retry-as-promised": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-7.0.3.tgz", + "integrity": "sha512-SEvMa4khHvpU/o6zgh7sK24qm6rxVgKnrSyzb5POeDvZx5N9Bf0s5sQsQ4Fl+HjRp0X+w2UzACGfUnXtx6cJ9Q==", + "peer": true + }, + "node_modules/reusify": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/run-async": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", + "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/rxjs": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", + "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "node_modules/schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/schema-utils/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/schema-utils/node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true, + "peerDependencies": { + "ajv": "^6.9.1" + } + }, + "node_modules/schema-utils/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/semver": { + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/semver/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/semver/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + }, + "node_modules/send": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", + "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "dependencies": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "2.4.1", + "range-parser": "~1.2.1", + "statuses": "2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/send/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/send/node_modules/debug/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/send/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/sequelize": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.28.0.tgz", + "integrity": "sha512-+WHqvUQgTp19GLkt+gyQ+F6qg+FIEO2O5F9C0TOYV/PjZ2a/XwWvVkL1NCkS4VSIjVVvAUutiW6Wv9ofveGaVw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/sequelize" + } + ], + "peer": true, + "dependencies": { + "@types/debug": "^4.1.7", + "@types/validator": "^13.7.1", + "debug": "^4.3.3", + "dottie": "^2.0.2", + "inflection": "^1.13.2", + "lodash": "^4.17.21", + "moment": "^2.29.1", + "moment-timezone": "^0.5.34", + "pg-connection-string": "^2.5.0", + "retry-as-promised": "^7.0.3", + "semver": "^7.3.5", + "sequelize-pool": "^7.1.0", + "toposort-class": "^1.0.1", + "uuid": "^8.3.2", + "validator": "^13.7.0", + "wkx": "^0.5.0" + }, + "engines": { + "node": ">=10.0.0" + }, + "peerDependenciesMeta": { + "ibm_db": { + "optional": true + }, + "mariadb": { + "optional": true + }, + "mysql2": { + "optional": true + }, + "oracledb": { + "optional": true + }, + "pg": { + "optional": true + }, + "pg-hstore": { + "optional": true + }, + "snowflake-sdk": { + "optional": true + }, + "sqlite3": { + "optional": true + }, + "tedious": { + "optional": true + } + } + }, + "node_modules/sequelize-pool": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/sequelize-pool/-/sequelize-pool-7.1.0.tgz", + "integrity": "sha512-G9c0qlIWQSK29pR/5U2JF5dDQeqqHRragoyahj/Nx4KOOQ3CPPfzxnfqFPCSB7x5UgjOgnZ61nSxz+fjDpRlJg==", + "peer": true, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/sequelize-typescript": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/sequelize-typescript/-/sequelize-typescript-2.1.5.tgz", + "integrity": "sha512-x1CNODct8gJyfZPwEZBU5uVGNwgJI2Fda913ZxD5ZtCSRyTDPBTS/0uXciF+MlCpyqjpmoCAPtudQWzw579bzA==", + "dependencies": { + "glob": "7.2.0" + }, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "@types/node": "*", + "@types/validator": "*", + "reflect-metadata": "*", + "sequelize": ">=6.20.1" + } + }, + "node_modules/sequelize-typescript/node_modules/glob": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", + "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sequelize/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "peer": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/serialize-javascript": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz", + "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==", + "dev": true, + "dependencies": { + "randombytes": "^2.1.0" + } + }, + "node_modules/serve-static": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", + "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "dependencies": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.18.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/shelljs": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", + "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", + "dev": true, + "dependencies": { + "glob": "^7.0.0", + "interpret": "^1.0.0", + "rechoir": "^0.6.2" + }, + "bin": { + "shjs": "bin/shjs" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/side-channel": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", + "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", + "dependencies": { + "call-bind": "^1.0.0", + "get-intrinsic": "^1.0.2", + "object-inspect": "^1.9.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/signal-exit": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", + "dev": true + }, + "node_modules/sisteransi": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", + "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", + "dev": true + }, + "node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/source-map-support/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "deprecated": "Please use @jridgewell/sourcemap-codec instead", + "dev": true + }, + "node_modules/split2": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/split2/-/split2-4.1.0.tgz", + "integrity": "sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ==", + "dev": true, + "engines": { + "node": ">= 10.x" + } + }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "dev": true + }, + "node_modules/stack-utils": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz", + "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/stack-utils/node_modules/escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, + "node_modules/string_decoder/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "node_modules/string-length": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", + "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==", + "dev": true, + "dependencies": { + "char-regex": "^1.0.2", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-bom": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz", + "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-final-newline": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", + "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/superagent": { + "version": "8.0.6", + "resolved": "https://registry.npmjs.org/superagent/-/superagent-8.0.6.tgz", + "integrity": "sha512-HqSe6DSIh3hEn6cJvCkaM1BLi466f1LHi4yubR0tpewlMpk4RUFFy35bKz8SsPBwYfIIJy5eclp+3tCYAuX0bw==", + "dev": true, + "dependencies": { + "component-emitter": "^1.3.0", + "cookiejar": "^2.1.3", + "debug": "^4.3.4", + "fast-safe-stringify": "^2.1.1", + "form-data": "^4.0.0", + "formidable": "^2.1.1", + "methods": "^1.1.2", + "mime": "2.6.0", + "qs": "^6.11.0", + "semver": "^7.3.8" + }, + "engines": { + "node": ">=6.4.0 <13 || >=14" + } + }, + "node_modules/superagent/node_modules/mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/supertest": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/supertest/-/supertest-6.3.3.tgz", + "integrity": "sha512-EMCG6G8gDu5qEqRQ3JjjPs6+FYT1a7Hv5ApHvtSghmOFJYtsU5S+pSb6Y2EUeCEY3CmEL3mmQ8YWlPOzQomabA==", + "dev": true, + "dependencies": { + "methods": "^1.1.2", + "superagent": "^8.0.5" + }, + "engines": { + "node": ">=6.4.0" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/symbol-observable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", + "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==", + "dev": true, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/tapable": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/terser": { + "version": "5.16.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz", + "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==", + "dev": true, + "dependencies": { + "@jridgewell/source-map": "^0.3.2", + "acorn": "^8.5.0", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser-webpack-plugin": { + "version": "5.3.6", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz", + "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.14", + "jest-worker": "^27.4.5", + "schema-utils": "^3.1.1", + "serialize-javascript": "^6.0.0", + "terser": "^5.14.1" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "uglify-js": { + "optional": true + } + } + }, + "node_modules/terser-webpack-plugin/node_modules/jest-worker": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", + "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==", + "dev": true, + "dependencies": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^8.0.0" + }, + "engines": { + "node": ">= 10.13.0" + } + }, + "node_modules/terser-webpack-plugin/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "node_modules/terser/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/test-exclude": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", + "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==", + "dev": true, + "dependencies": { + "@istanbuljs/schema": "^0.1.2", + "glob": "^7.1.4", + "minimatch": "^3.0.4" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true + }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", + "dev": true + }, + "node_modules/tmp": { + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", + "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", + "dev": true, + "dependencies": { + "os-tmpdir": "~1.0.2" + }, + "engines": { + "node": ">=0.6.0" + } + }, + "node_modules/tmpl": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", + "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==", + "dev": true + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/toposort-class": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toposort-class/-/toposort-class-1.0.1.tgz", + "integrity": "sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg==", + "peer": true + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, + "node_modules/tree-kill": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", + "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", + "dev": true, + "bin": { + "tree-kill": "cli.js" + } + }, + "node_modules/ts-jest": { + "version": "29.0.3", + "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.0.3.tgz", + "integrity": "sha512-Ibygvmuyq1qp/z3yTh9QTwVVAbFdDy/+4BtIQR2sp6baF2SJU/8CKK/hhnGIDY2L90Az2jIqTwZPnN2p+BweiQ==", + "dev": true, + "dependencies": { + "bs-logger": "0.x", + "fast-json-stable-stringify": "2.x", + "jest-util": "^29.0.0", + "json5": "^2.2.1", + "lodash.memoize": "4.x", + "make-error": "1.x", + "semver": "7.x", + "yargs-parser": "^21.0.1" + }, + "bin": { + "ts-jest": "cli.js" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + }, + "peerDependencies": { + "@babel/core": ">=7.0.0-beta.0 <8", + "@jest/types": "^29.0.0", + "babel-jest": "^29.0.0", + "jest": "^29.0.0", + "typescript": ">=4.3" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@jest/types": { + "optional": true + }, + "babel-jest": { + "optional": true + }, + "esbuild": { + "optional": true + } + } + }, + "node_modules/ts-loader": { + "version": "9.4.2", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz", + "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "typescript": "*", + "webpack": "^5.0.0" + } + }, + "node_modules/ts-loader/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/ts-node": { + "version": "10.9.1", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz", + "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==", + "dev": true, + "dependencies": { + "@cspotcode/source-map-support": "^0.8.0", + "@tsconfig/node10": "^1.0.7", + "@tsconfig/node12": "^1.0.7", + "@tsconfig/node14": "^1.0.0", + "@tsconfig/node16": "^1.0.2", + "acorn": "^8.4.1", + "acorn-walk": "^8.1.1", + "arg": "^4.1.0", + "create-require": "^1.1.0", + "diff": "^4.0.1", + "make-error": "^1.1.1", + "v8-compile-cache-lib": "^3.0.1", + "yn": "3.1.1" + }, + "bin": { + "ts-node": "dist/bin.js", + "ts-node-cwd": "dist/bin-cwd.js", + "ts-node-esm": "dist/bin-esm.js", + "ts-node-script": "dist/bin-script.js", + "ts-node-transpile-only": "dist/bin-transpile.js", + "ts-script": "dist/bin-script-deprecated.js" + }, + "peerDependencies": { + "@swc/core": ">=1.2.50", + "@swc/wasm": ">=1.2.50", + "@types/node": "*", + "typescript": ">=2.7" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "@swc/wasm": { + "optional": true + } + } + }, + "node_modules/tsconfig-paths": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.1.1.tgz", + "integrity": "sha512-VgPrtLKpRgEAJsMj5Q/I/mXouC6A/7eJ/X4Nuk6o0cRPwBtznYxTCU4FodbexbzH9somBPEXYi0ZkUViUpJ21Q==", + "dev": true, + "dependencies": { + "json5": "^2.2.1", + "minimist": "^1.2.6", + "strip-bom": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tsconfig-paths-webpack-plugin": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.0.0.tgz", + "integrity": "sha512-fw/7265mIWukrSHd0i+wSwx64kYUSAKPfxRDksjKIYTxSAp9W9/xcZVBF4Kl0eqQd5eBpAQ/oQrc5RyM/0c1GQ==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.7.0", + "tsconfig-paths": "^4.0.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/tsconfig-paths/node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/tslib": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", + "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + }, + "node_modules/tsutils": { + "version": "3.21.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", + "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==", + "dev": true, + "dependencies": { + "tslib": "^1.8.1" + }, + "engines": { + "node": ">= 6" + }, + "peerDependencies": { + "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" + } + }, + "node_modules/tsutils/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==" + }, + "node_modules/typescript": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", + "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist-lint": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "dependencies": { + "punycode": "^2.1.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, + "node_modules/utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/v8-compile-cache-lib": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", + "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", + "dev": true + }, + "node_modules/v8-to-istanbul": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz", + "integrity": "sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.12", + "@types/istanbul-lib-coverage": "^2.0.1", + "convert-source-map": "^1.6.0" + }, + "engines": { + "node": ">=10.12.0" + } + }, + "node_modules/v8-to-istanbul/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true + }, + "node_modules/validator": { + "version": "13.7.0", + "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz", + "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==", + "peer": true, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/walker": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz", + "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==", + "dev": true, + "dependencies": { + "makeerror": "1.0.12" + } + }, + "node_modules/watchpack": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", + "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", + "dev": true, + "dependencies": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/wcwidth": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", + "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==", + "dev": true, + "dependencies": { + "defaults": "^1.0.3" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/webpack": { + "version": "5.75.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz", + "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==", + "dev": true, + "dependencies": { + "@types/eslint-scope": "^3.7.3", + "@types/estree": "^0.0.51", + "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/wasm-edit": "1.11.1", + "@webassemblyjs/wasm-parser": "1.11.1", + "acorn": "^8.7.1", + "acorn-import-assertions": "^1.7.6", + "browserslist": "^4.14.5", + "chrome-trace-event": "^1.0.2", + "enhanced-resolve": "^5.10.0", + "es-module-lexer": "^0.9.0", + "eslint-scope": "5.1.1", + "events": "^3.2.0", + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.2.9", + "json-parse-even-better-errors": "^2.3.1", + "loader-runner": "^4.2.0", + "mime-types": "^2.1.27", + "neo-async": "^2.6.2", + "schema-utils": "^3.1.0", + "tapable": "^2.1.1", + "terser-webpack-plugin": "^5.1.3", + "watchpack": "^2.4.0", + "webpack-sources": "^3.2.3" + }, + "bin": { + "webpack": "bin/webpack.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependenciesMeta": { + "webpack-cli": { + "optional": true + } + } + }, + "node_modules/webpack-node-externals": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz", + "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/webpack-sources": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", + "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==", + "dev": true, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/windows-release": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/windows-release/-/windows-release-4.0.0.tgz", + "integrity": "sha512-OxmV4wzDKB1x7AZaZgXMVsdJ1qER1ed83ZrTYd5Bwq2HfJVg3DJS8nqlAG4sMoJ7mu8cuRmLEYyU13BKwctRAg==", + "dev": true, + "dependencies": { + "execa": "^4.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/windows-release/node_modules/execa": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz", + "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.0", + "get-stream": "^5.0.0", + "human-signals": "^1.1.1", + "is-stream": "^2.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^4.0.0", + "onetime": "^5.1.0", + "signal-exit": "^3.0.2", + "strip-final-newline": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sindresorhus/execa?sponsor=1" + } + }, + "node_modules/windows-release/node_modules/get-stream": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", + "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", + "dev": true, + "dependencies": { + "pump": "^3.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/windows-release/node_modules/human-signals": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", + "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==", + "dev": true, + "engines": { + "node": ">=8.12.0" + } + }, + "node_modules/wkx": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/wkx/-/wkx-0.5.0.tgz", + "integrity": "sha512-Xng/d4Ichh8uN4l0FToV/258EjMGU9MGcA0HV2d9B/ZpZB3lqQm7nkOdZdm5GhKtLLhAE7PiVQwN4eN+2YJJUg==", + "peer": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/word-wrap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + }, + "node_modules/write-file-atomic": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz", + "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "signal-exit": "^3.0.7" + }, + "engines": { + "node": "^12.13.0 || ^14.15.0 || >=16.0.0" + } + }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "engines": { + "node": ">=0.4" + } + }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/yargs": { + "version": "17.6.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz", + "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/yn": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", + "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + } + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/package.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/package.json new file mode 100644 index 000000000..1a913516a --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/package.json @@ -0,0 +1,66 @@ +{ + "name": "clasroom-server", + "version": "0.0.1", + "description": "", + "author": "", + "private": true, + "license": "UNLICENSED", + "scripts": { + "build": "nest build", + "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", + "dev": "nest start --watch", + "start:debug": "nest start --debug --watch", + "start:prod": "node dist/main" + }, + "dependencies": { + "@nestjs/common": "^9.0.0", + "@nestjs/core": "^9.0.0", + "@nestjs/mapped-types": "*", + "@nestjs/platform-express": "^9.0.0", + "reflect-metadata": "^0.1.13", + "rxjs": "^7.2.0", + "sequelize-typescript": "^2.1.5" + }, + "devDependencies": { + "@nestjs/cli": "^9.0.0", + "@nestjs/schematics": "^9.0.0", + "@nestjs/testing": "^9.0.0", + "@types/express": "^4.17.13", + "@types/jest": "29.2.4", + "@types/node": "18.11.18", + "@types/supertest": "^2.0.11", + "@typescript-eslint/eslint-plugin": "^5.0.0", + "@typescript-eslint/parser": "^5.0.0", + "eslint": "^8.0.1", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^4.0.0", + "jest": "29.3.1", + "prettier": "^2.3.2", + "pg": "^8.7.1", + "dotenv": "^8.6.0", + "source-map-support": "^0.5.20", + "supertest": "^6.1.3", + "ts-jest": "29.0.3", + "ts-loader": "^9.2.3", + "ts-node": "^10.0.0", + "tsconfig-paths": "4.1.1", + "typescript": "^4.7.4" + }, + "jest": { + "moduleFileExtensions": [ + "js", + "json", + "ts" + ], + "rootDir": "src", + "testRegex": ".*\\.spec\\.ts$", + "transform": { + "^.+\\.(t|j)s$": "ts-jest" + }, + "collectCoverageFrom": [ + "**/*.(t|j)s" + ], + "coverageDirectory": "../coverage", + "testEnvironment": "node" + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.controller.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.controller.ts new file mode 100644 index 000000000..cce879ee6 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.controller.ts @@ -0,0 +1,12 @@ +import { Controller, Get } from '@nestjs/common'; +import { AppService } from './app.service'; + +@Controller() +export class AppController { + constructor(private readonly appService: AppService) {} + + @Get() + getHello(): string { + return this.appService.getHello(); + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.module.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.module.ts new file mode 100644 index 000000000..e56f69911 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.module.ts @@ -0,0 +1,13 @@ +import { Module } from '@nestjs/common'; +import { AppController } from './app.controller'; +import { AppService } from './app.service'; +import { ClassesModule } from './models/classes/classes.module'; +import { StudentsModule } from './models/students/students.module'; +import { DatabaseModule } from './providers/database'; + +@Module({ + imports: [ClassesModule, StudentsModule,DatabaseModule], + controllers: [AppController], + providers: [AppService], +}) +export class AppModule {} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.service.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.service.ts new file mode 100644 index 000000000..0f3842d62 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/app.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@nestjs/common'; + +@Injectable() +export class AppService { + getHello(): string { + return 'Ksen is learning server side and loves it!'; + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/index.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/index.ts new file mode 100644 index 000000000..3c8f748ec --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/index.ts @@ -0,0 +1,2 @@ +export * from './ormOp'; +export * from './providers'; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/ormOp.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/ormOp.ts new file mode 100644 index 000000000..b25700dec --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/ormOp.ts @@ -0,0 +1,16 @@ +// Sequelize +import { Op } from "sequelize"; + +export const operatorsORM = { + in: Op.in, + or: Op.or, + gt: Op.gt, + lt: Op.lt, + lte: Op.lte, + not: Op.not, + gte: Op.gte, + and: Op.and, + equal: Op.eq, + like: Op.like, + notEqual: Op.ne +}; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/providers.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/providers.ts new file mode 100644 index 000000000..a8bdc3700 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/constants/providers.ts @@ -0,0 +1,7 @@ +export const SEQUELIZE = 'SEQUELIZE'; + +export const CLASS = 'CLASS'; + +export const STUDENT = 'STUDENT'; + + diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interceptors/index.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interceptors/index.ts new file mode 100644 index 000000000..3293e5fd8 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interceptors/index.ts @@ -0,0 +1 @@ +export * from './serialize.interceptor'; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interceptors/serialize.interceptor.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interceptors/serialize.interceptor.ts new file mode 100644 index 000000000..30fe11fb1 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interceptors/serialize.interceptor.ts @@ -0,0 +1,31 @@ +// Utils +import { serializeSequelize } from '../utils'; + +// External libraries +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { + Injectable, + NestInterceptor, + ExecutionContext, + CallHandler, +} from '@nestjs/common'; + +@Injectable() +export class SerializeInterceptor implements NestInterceptor { + intercept(context: ExecutionContext, next: CallHandler): Observable { + return next.handle().pipe( + map((value) => { + return !value + ? {} + : Array.isArray(value) + ? value.map((item) => this.serializeObject(item)) + : this.serializeObject(value); + }), + ); + } + + private serializeObject(value) { + return { ...serializeSequelize(value) }; + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/index.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/index.ts new file mode 100644 index 000000000..58cc5dab4 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/index.ts @@ -0,0 +1,2 @@ +export * from './orm.interface'; +export * from './memory.interface'; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/memory.interface.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/memory.interface.ts new file mode 100644 index 000000000..baba7cf53 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/memory.interface.ts @@ -0,0 +1,26 @@ +export interface OperatorsANDORMemory { + and: Array>; + or: OperatorsOptionsMemory | Array | primitiveTypes | OperatorsANDORMemory>; +} + +export interface OperatorsOptionsMemory { + like?: string; + gt?: number | Date; + lt?: number | Date; + gte?: number | Date; + lte?: number | Date; + equal?: primitiveTypes; + notEqual?: primitiveTypes; + in?: Array; + not?: Array> | primitiveTypes; +} + +export type KeyWhereOptionsMemory = { + // eslint-disable-next-line no-unused-vars + [P in keyof Required]?: Date | string | number | Partial>; +}; + +export type WhereOptionsMemory = + | KeyWhereOptionsMemory + | Omit, "or"> + | Omit, "and">; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/orm.interface.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/orm.interface.ts new file mode 100644 index 000000000..ac44991f8 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/interfaces/orm.interface.ts @@ -0,0 +1,67 @@ +export interface OperatorsANDOR { + and: Array>; + or: OperatorsOptions | Array | primitiveTypes | OperatorsANDOR>; +} + +export interface OperatorsOptions { + like?: string; + gt?: number | Date; + lt?: number | Date; + gte?: number | Date; + lte?: number | Date; + equal?: primitiveTypes; + notEqual?: primitiveTypes; + in?: Array; + not?: Array> | primitiveTypes; +} + +type KeyWhereOptions = { + // eslint-disable-next-line no-unused-vars + [P in keyof Required]?: Date | string | number | boolean | Partial>; +}; + +export type WhereOptions = + | KeyWhereOptions + | Omit, "or"> + | Omit, "and">; + +export interface FunctionOptions { + column: string; + fn: "COUNT" | "SUM" | "MAX" | "MIN" | "AVG" | "UPPER"; +} + +export type JoinOptions = "LEFT" | "RIGHT" | "INNER"; +export type OrderOptions = Array<{ by: string | FunctionOptions; order: "DESC" | "ASC" }>; + +export type AliasOptions = { name: string; alias: string }; +export type GroupOptions = Array; +export type FindObjectAttributesOptions = + | { include: FindArrayAttributesOptions } + | { exclude: Readonly> }; +export type FindAttributesOptions = FindArrayAttributesOptions | FindObjectAttributesOptions; +export type FindArrayAttributesOptions = Array<(FunctionOptions & { alias: string }) | string | AliasOptions>; + +export interface RelationObjectOptions { + alias?: string; + limit?: number; + join?: JoinOptions; + order?: OrderOptions; + on?: WhereOptions; + model?: Constructor; + where?: WhereOptions; + relations?: RelationOptions; + all?: boolean; + nested?: boolean; +} + +export type RelationOptions = RelationObjectOptions | Array>; + +export interface FindOptions { + limit?: number; + order?: OrderOptions; + group?: GroupOptions; + where?: WhereOptions; + attributes?: FindAttributesOptions; +} + +export type Keys = Array>; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/index.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/index.ts new file mode 100644 index 000000000..df5197a7d --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/index.ts @@ -0,0 +1,2 @@ +export * from "./orm.serializer"; +export * from "./memory.serializer"; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/memory.serializer.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/memory.serializer.ts new file mode 100644 index 000000000..881508997 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/memory.serializer.ts @@ -0,0 +1,37 @@ +// Constants +import { Op } from "../utils"; + +// Utils +import { isOperatorsOptionsMemory } from "../utils"; + +// Interfaces +import { OperatorsOptionsMemory, KeyWhereOptionsMemory, WhereOptionsMemory } from "../interfaces"; + +export function serializerKeyWhereOptionsMemory(object: object, objectWhere: KeyWhereOptionsMemory) { + return Object.keys(objectWhere) + .map(keyWhere => { + const compareWhere = objectWhere[keyWhere]; + if (isOperatorsOptionsMemory(compareWhere)) { + return (Object.keys(compareWhere) as Array>) + .map((operators): boolean => { + return Op[operators](object, compareWhere[operators], keyWhere); + }) + .every(Boolean); + } + + return Op.equal(object, compareWhere, keyWhere); + }) + .every(Boolean); +} + +export function serializerWhereOptionsMemory(object: object, where: WhereOptionsMemory): boolean { + if ("and" in where) { + return Op.and(object, where.and); + } + + if ("or" in where) { + return Op.or(object, where.or); + } + + return serializerKeyWhereOptionsMemory(object, where); +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/orm.serializer.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/orm.serializer.ts new file mode 100644 index 000000000..5a12bcd08 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/serializers/orm.serializer.ts @@ -0,0 +1,173 @@ +// Interfaces +import { + Keys, + JoinOptions, + FindOptions, + OrderOptions, + WhereOptions, + GroupOptions, + FunctionOptions, + RelationOptions, + RelationObjectOptions, + FindAttributesOptions, + FindArrayAttributesOptions +} from "../interfaces"; + +// Utils +import { transformObj, isObject } from "../utils"; + +// Constants +import { operatorsORM } from "../constants"; + +// Sequelize +import { + Order, + OrderItem, + Includeable, + ProjectionAlias, + fn as SequelizeFn, + col as SequelizeCol, + FindAttributeOptions, + FindOptions as SequelizeFindOptions, + GroupOption as SequelizeGroupOptions, + WhereOptions as SequelizeWhereOptions + // UpdateOptions, + // CreateOptions, + // DestroyOptions, + // FindOrCreateOptions +} from "sequelize"; +import { Model } from "sequelize-typescript"; + +function serializerFunctionOptions({ fn, column }: FunctionOptions) { + return SequelizeFn(fn, SequelizeCol(column)); +} + +function serializerFindArrayAttributesOptions( + attributes: FindArrayAttributesOptions +): Array { + if (!Array.isArray(attributes)) { + // nothing we can do + return; + } + + return attributes.map(attribute => { + if (typeof attribute === "string") { + return attribute; + } else if ("fn" in attribute) { + return [serializerFunctionOptions(attribute), attribute.alias]; + } + + return [attribute.name, attribute.alias]; + }); +} + +function serializerFindAttributesOptions(attributes: FindAttributesOptions): FindAttributeOptions { + if (typeof attributes !== "object" || attributes === null) { + // nothing we can do + return; + } + + if (Array.isArray(attributes)) { + return serializerFindArrayAttributesOptions(attributes); + } else if ("include" in attributes) { + return { include: serializerFindArrayAttributesOptions(attributes.include) }; + } else if ("exclude" in attributes) { + return { exclude: attributes.exclude as Keys }; + } +} + +function serializerOrderOptions(orderOptions: OrderOptions): Order { + if (!Array.isArray(orderOptions)) { + // nothing we can do + return; + } + + return orderOptions.map(({ by, order }) => [ + typeof by === "string" ? by : serializerFunctionOptions(by), + order + ]); +} + +function serializerJoinOptions(joinOptions: JoinOptions) { + switch (joinOptions) { + case "INNER": { + return { required: true }; + } + case "RIGHT": { + return { required: false, right: true }; + } + case "LEFT": + default: { + return { required: false, right: false }; + } + } +} + +export function serializerRelationOptions>(relations: RelationOptions): Includeable[] { + if (!relations) { + // nothing we can do + return []; + } + + if (Array.isArray(relations)) { + return relations.map(serializerRelationObjectOptions); + } + + return [serializerRelationObjectOptions(relations)]; +} + +function serializerRelationObjectOptions>( + relationObject: RelationObjectOptions +): Includeable { + if (!isObject(relationObject)) { + // nothing we can do + return; + } + + const { on, join, order, where, relations, ...relationshipsOptions } = relationObject; + return { + ...relationshipsOptions, + ...serializerJoinOptions(join), + on: serializerWhereOptions(on), + order: serializerOrderOptions(order), + where: serializerWhereOptions(where), + include: serializerRelationOptions(relations) + }; +} + +export function serializerGroupOptions(groupOptions: GroupOptions): SequelizeGroupOptions { + if (!Array.isArray(groupOptions)) { + // nothing we can do + return; + } + + return groupOptions.map(groupOption => { + if (typeof groupOption === "string") { + return groupOption; + } + + return serializerFunctionOptions(groupOption); + }); +} + +export function serializerWhereOptions(whereOptions: WhereOptions): SequelizeWhereOptions { + const keys = (key: string): symbol | string => operatorsORM[key] || key; + + return transformObj(whereOptions, { keys }); +} + +export function serializerFindOptions>({ + order, + where, + group, + attributes, + ...findOptions +}: FindOptions): SequelizeFindOptions { + return { + ...findOptions, + group: serializerGroupOptions(group), + order: serializerOrderOptions(order), + where: serializerWhereOptions(where), + attributes: serializerFindAttributesOptions(attributes) + }; +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/check-type.utils.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/check-type.utils.ts new file mode 100644 index 000000000..49a1a10ca --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/check-type.utils.ts @@ -0,0 +1,17 @@ +// Interfaces +import { OperatorsOptionsMemory } from "../interfaces"; + +export const isNumber = (value: unknown): value is number => + typeof value === "number" || value instanceof Number; + +export const isString = (value: unknown): value is string => + typeof value === "string" || value instanceof String; + +export const isDate = (value: unknown): value is Date => value instanceof Date; + +export const isObject = (value: unknown): value is object => + value === null ? false : typeof value === "function" || typeof value === "object"; + +export function isOperatorsOptionsMemory(obj: unknown): obj is OperatorsOptionsMemory { + return typeof obj === "object" && !(obj instanceof Date); +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/index.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/index.ts new file mode 100644 index 000000000..4196ea579 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/index.ts @@ -0,0 +1,4 @@ +export * from './check-type.utils'; +export * from './transform-obj.utils'; +export * from './operators-memory.utils'; +export * from './serialize-sequelize.utils'; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/objectUtils.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/objectUtils.ts new file mode 100644 index 000000000..3c7b5ecb5 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/objectUtils.ts @@ -0,0 +1,3 @@ +export const isObject = property => { + return property !== null && typeof property === "object"; +}; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/operators-memory.utils.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/operators-memory.utils.ts new file mode 100644 index 000000000..6b6aee544 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/operators-memory.utils.ts @@ -0,0 +1,39 @@ +// Utils +import { isDate, isObject } from "."; + +// Interfaces +import { OperatorsANDORMemory } from "../interfaces"; + +// Serializers +import { serializerKeyWhereOptionsMemory, serializerWhereOptionsMemory } from "../serializers"; + +export const Op = { + or: or, + and: and, + gt: (object: object, compare: primitiveTypes, key: string) => object[key] > compare, + lt: (object: object, compare: primitiveTypes, key: string) => object[key] < compare, + like: (object: object, like: primitiveTypes, key: string) => object[key].match(like), + lte: (object: object, compare: primitiveTypes, key: string) => object[key] <= compare, + gte: (object: object, compare: primitiveTypes, key: string) => object[key] >= compare, + equal: (object: object, compare: primitiveTypes, key: string) => object[key] === compare, + notEqual: (object: object, compare: primitiveTypes, key: string) => object[key] !== compare, + in: (object: object, compare: Array, key: string) => compare.includes(object[key]) +}; + +function and(object: object, compare: OperatorsANDORMemory["and"]) { + return compare.map(objectWhere => serializerKeyWhereOptionsMemory(object, objectWhere)).every(Boolean); +} + +function or(object: object, compare: OperatorsANDORMemory["or"], key?: string) { + if (Array.isArray(compare)) { + return compare + .map(objectWhere => { + if (isObject(objectWhere) && !isDate(objectWhere)) { + return serializerWhereOptionsMemory(object, objectWhere); + } + + return Op.equal(object, objectWhere, key); + }) + .some(Boolean); + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/serialize-sequelize.utils.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/serialize-sequelize.utils.ts new file mode 100644 index 000000000..6f18f8573 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/serialize-sequelize.utils.ts @@ -0,0 +1,10 @@ +// External libraries +import { Model } from "sequelize"; + +export function serializeSequelize(value: Model | object) { + if (value instanceof Model) { + return value.toJSON(); + } + + return value; +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/transform-obj.utils.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/transform-obj.utils.ts new file mode 100644 index 000000000..74e3c58a2 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/common/utils/transform-obj.utils.ts @@ -0,0 +1,66 @@ +/** + * Recursively transform key/values in object, including array values + * + * Also can act as a basic deep clone method + * @param {Object} obj - Object to transform + * @param {Object} [transforms={}] - Object containing transformation functions + * @param {Function} [transform.keys] - Function for transforming keys from 'obj' + * @param {Function} [transform.values] - Function for transforming values from 'obj' + * @returns {Object} Transformed object + * + * @example + * transformObj({ + * apple: 'Green', + * orange: 'Orange', + * cherry: { + * color: 'Red' + * } + * }, { + * keys: (key, level) => { + * return level === 0 ? `fruit_${key}` : key; + * }, + * values: (value) => { + * return value.toUpperCase(); + * } + * }); // { fruit_apple: 'GREEN', fruit_orange: 'ORANGE', fruit_cherry: { fruit_color: 'RED' } } + */ + +type values = (values: string) => string; +type keys = (key: string) => string | symbol; + +export function transformObj( + obj: T, + transforms: { values?: values; keys?: keys } +): U { + if (typeof obj !== "object" || obj === null) { + // nothing we can do + return; + } + + function convertValue(value) { + if (Array.isArray(value)) { + return value.map(convertValue); + } else if (typeof value === "object") { + return transformObj(value, transforms); + } else if ("values" in transforms) { + // transform value + return transforms.values(value); + } else { + return value; + } + } + + return Object.keys(obj).reduce((result, key) => { + const value = obj[key]; + let newKey: string | symbol = key; + + if ("keys" in transforms) { + // transform key + newKey = transforms.keys(key); + } + + result[newKey] = convertValue(value); + + return result; + }, {} as U); +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/main.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/main.ts new file mode 100644 index 000000000..4bd78623b --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/main.ts @@ -0,0 +1,8 @@ +import { NestFactory } from '@nestjs/core'; +import { AppModule } from './app.module'; + +async function bootstrap() { + const app = await NestFactory.create(AppModule,{cors: true}); + await app.listen(3000); +} +bootstrap(); diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/class.providers.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/class.providers.ts new file mode 100644 index 000000000..c373890cd --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/class.providers.ts @@ -0,0 +1,17 @@ +// Shift +import { Class } from './entities/class.entity'; + +// Constants +import { CLASS, STUDENT } from '../../common/constants'; +import { Student } from '../students/entities/student.entity'; + +export const classProviders = [ + { + provide: CLASS, + useValue: Class, + }, + { + provide: STUDENT, + useValue: Student, + }, +]; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.controller.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.controller.ts new file mode 100644 index 000000000..58a8c54bd --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.controller.ts @@ -0,0 +1,29 @@ +import { Controller, Get, Param, Delete, Post } from '@nestjs/common'; +import { ClassesService } from './classes.service'; + + +@Controller('classes') +export class ClassesController { + constructor(private readonly classesService: ClassesService) {} + + + @Get('/all') + findAll() { + return this.classesService.findAll(); + } + + @Get('available') + availableClasses(){ + return this.classesService.availableClasses() + } + + @Get(':id') + findOne(@Param('id') id: string) { + return this.classesService.findOne(+id); + } + + @Delete(':id') + removeOne(@Param('id') id:string) { + return this.classesService.removeOne(+id) + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.module.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.module.ts new file mode 100644 index 000000000..2ee319440 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.module.ts @@ -0,0 +1,18 @@ +import { Module } from '@nestjs/common'; +import { ClassesService } from './classes.service'; +import { ClassesController } from './classes.controller'; +import { ClassRepository } from './classes.repository'; +import { classProviders } from './class.providers'; +import { StudentsService } from '../students/students.service'; +import { StudentRepository } from '../students/students.repository'; +import { studentProviders } from '../students/students.providers'; + +@Module({ + controllers: [ClassesController], + providers: [ + ClassesService, + ClassRepository, + ...classProviders, + ], +}) +export class ClassesModule {} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.repository.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.repository.ts new file mode 100644 index 000000000..718cc2f0b --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.repository.ts @@ -0,0 +1,62 @@ +// Constraint +import { Class } from './entities/class.entity'; + +// External libraries +import { + Inject, + Injectable, + InternalServerErrorException, +} from '@nestjs/common'; + +import { ModelStatic, Op } from 'sequelize'; +import { Student } from '../students/entities/student.entity'; +import { CLASS } from 'src/common/constants'; + +@Injectable() +export class ClassRepository { + constructor(@Inject(CLASS) public classModel: ModelStatic) {} + + async findAll() { + return this.classModel.findAll({ + include: [ + { + model: Student, + }, + ], + }); + } + + async findOne(classId: number) { + return this.classModel.findByPk(classId); + } + + incrementSeats(classId: number){ + Class.increment('availableSeats', { + by: 1, + where: {classId} + }) + } + + decrementSeats(classId: number){ + Class.decrement('availableSeats', { + by: 1, + where: {classId} + }) + } + + availableClasses() { + return this.classModel.findAll({ + where: { + availableSeats: { [Op.gt]: 0 }, + }, + }); + } + + removeOne(classId: number) { + return this.classModel.destroy({ + where: { + classId, + }, + }); + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.service.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.service.ts new file mode 100644 index 000000000..c7ad0ef7f --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/classes.service.ts @@ -0,0 +1,43 @@ +import { + Injectable, + InternalServerErrorException, + NotFoundException, +} from '@nestjs/common'; +import { IStudent } from '../students/interfaces/student.interface'; +import { StudentsService } from '../students/students.service'; +import { ClassRepository } from './classes.repository'; +import { Class } from './entities/class.entity'; +import { IClass } from './interfaces/classes.interface'; + +@Injectable() +export class ClassesService { + constructor(private readonly classRepository: ClassRepository) {} + + async findAll() { + const classes: Class[] = await this.classRepository.findAll(); + if (!classes.length) throw new NotFoundException('Classes not found'); + return classes; + } + + incrementSeats(classId: number) { + this.classRepository.incrementSeats(classId); + } + + decrementSeats(classId: number) { + this.classRepository.incrementSeats(classId); + } + + findOne(classId: number) { + return this.classRepository.findOne(classId); + } + availableClasses() { + return this.classRepository.availableClasses(); + } + + async removeOne(classId: number) { + const currClass = await this.findOne(classId); + if (currClass.availableSeats > 0) + throw new Error('Class has assigned students'); + return this.classRepository.removeOne(classId); + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/entities/class.entity.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/entities/class.entity.ts new file mode 100644 index 000000000..f907106e4 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/entities/class.entity.ts @@ -0,0 +1,31 @@ +import { + Table, + Model, + Column, + HasMany, + DataType, + PrimaryKey, + } from 'sequelize-typescript'; +import { Student } from 'src/models/students/entities/student.entity'; +import { IClass } from '../interfaces/classes.interface'; + + + @Table({ tableName: 'Classes', updatedAt: false, createdAt: false }) + export class Class extends Model implements IClass { + @PrimaryKey + @Column({ type: DataType.INTEGER }) + public classId: number; + + @Column({ type: DataType.TEXT }) + public className: string; + + @Column({ type: DataType.INTEGER }) + public classSeats: number; + + @Column({ type: DataType.INTEGER }) + public availableSeats: number; + + @HasMany(() => Student) + public students: Student[]; + } + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/interfaces/classes.interface.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/interfaces/classes.interface.ts new file mode 100644 index 000000000..88f5990de --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/classes/interfaces/classes.interface.ts @@ -0,0 +1,6 @@ +export interface IClass { + classId: number + className: string + classSeats: number + availableSeats: number +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/orm/model.repository-orm.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/orm/model.repository-orm.ts new file mode 100644 index 000000000..fbd3a1274 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/orm/model.repository-orm.ts @@ -0,0 +1,97 @@ +// Serializers +import { + serializerFindOptions, + serializerWhereOptions, + serializerRelationOptions, +} from '../../common/serializers'; + +// Interfaces +import { + FindOptions, + RelationOptions, + WhereOptions, + Keys, +} from '../../common/interfaces'; + +// External libraries +import { Model } from 'sequelize-typescript'; +import { + UpdateOptions, + CreateOptions, + DestroyOptions, + FindOrCreateOptions, +} from 'sequelize'; + +// Type `ModelType` would basically wrap & satisfy the 'this' context of any sequelize helper methods +export type ModelType> = Constructor & typeof Model; +export type ModelOmit, K extends Keys[number]> = Omit< + T, + K +>; + +export abstract class BaseRepositoryORM> { + constructor(protected module: ModelType) {} + + public async all< + K extends Keys[number] = undefined, + R extends Model = Model, + >( + where?: WhereOptions, + relation?: RelationOptions, + ): Promise[]> { + return await this.module.findAll({ + where: where && serializerWhereOptions(where), + include: relation && serializerRelationOptions(relation), + }); + } + + public async findBy< + K extends Keys[number] = undefined, + R extends Model = Model, + >( + where: WhereOptions, + options: FindOptions = {}, + relation?: RelationOptions, + ): Promise[]> { + return await this.module.findAll({ + ...serializerFindOptions(options), + where: serializerWhereOptions(where), + include: relation && serializerRelationOptions(relation), + }); + } + + public async findByPk< + K extends Keys[number] = undefined, + R extends Model = Model, + >( + id: number | string, + options: FindOptions = {}, + relation?: RelationOptions, + ): Promise> { + return await this.module.findByPk(id, { + ...serializerFindOptions(options), + include: relation && serializerRelationOptions(relation), + }); + } + + public async create( + attributes: DTO, + options: CreateOptions = {}, + ): Promise> { + return await this.module.create(attributes as any, options); + } + + public async update( + id: any, + attributes: Partial, + { where, ...options }: UpdateOptions = { where: {} }, + ) { + const [, modules] = await this.module.update(attributes, { + ...options, + returning: true, + where: { id, ...where }, + }); + return modules; + } + +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/entities/student.entity.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/entities/student.entity.ts new file mode 100644 index 000000000..b910f77d1 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/entities/student.entity.ts @@ -0,0 +1,37 @@ +import { + Table, + Model, + Column, + DataType, + PrimaryKey, + BelongsTo, + ForeignKey, +} from 'sequelize-typescript'; +import { Class } from 'src/models/classes/entities/class.entity'; +import { IStudent } from '../interfaces/student.interface'; + +@Table({ tableName: 'Students', updatedAt: false, createdAt: false }) +export class Student extends Model implements IStudent { + @PrimaryKey + @Column({ type: DataType.INTEGER }) + public tz: number; + + @Column({ type: DataType.TEXT }) + public firstName: string; + + @Column({ type: DataType.TEXT }) + public lastName: string; + + @Column({ type: DataType.TEXT }) + public profession: string; + + @Column({ type: DataType.INTEGER }) + public age: number; + + @ForeignKey(() => Class) + @Column({ type: DataType.INTEGER }) + public classId: number; + + @BelongsTo(() => Class) + Classes: Class[]; +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/interfaces/student.interface.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/interfaces/student.interface.ts new file mode 100644 index 000000000..058aa74e3 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/interfaces/student.interface.ts @@ -0,0 +1,8 @@ +export interface IStudent { + tz: number + firstName: string + lastName: string + age: number + profession: string + classId: number +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.controller.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.controller.ts new file mode 100644 index 000000000..93aec3047 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.controller.ts @@ -0,0 +1,27 @@ +import { Controller, Get, Param, Delete, Post } from '@nestjs/common'; +import { StudentsService } from './students.service'; + +@Controller('students') +export class StudentsController { + constructor(private readonly studentsService: StudentsService) {} + + @Get('/all') + findAll() { + return this.studentsService.findAll(); + } + + @Post('/tz/:id/classId/:classId') + unAssignStudent(@Param('id') id: string, @Param('classId') classId: string) { + return this.studentsService.unAssignStudent(+id, +classId) ; + } + + @Post('/tz/:id/classId/:classId') + assignStudent(@Param('id') id:string, @Param('classId') classId: string){ + return this.studentsService.assignStudent(+id, +classId) + } + + @Delete(':id') + removeOne(@Param('id') id:string) { + return this.studentsService.removeOne(+id) + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.module.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.module.ts new file mode 100644 index 000000000..8a34bb624 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.module.ts @@ -0,0 +1,17 @@ +import { Module } from '@nestjs/common'; +import { StudentsService } from './students.service'; +import { StudentsController } from './students.controller'; +import { StudentRepository } from './students.repository'; +import { studentProviders } from './students.providers'; +import { ClassesService } from '../classes/classes.service'; +import { ClassRepository } from '../classes/classes.repository'; +import { classProviders } from '../classes/class.providers'; + +@Module({ + controllers: [StudentsController], + providers: [StudentsService, StudentRepository, ...studentProviders, + ClassesService, + ClassRepository, + ...classProviders,], +}) +export class StudentsModule {} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.providers.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.providers.ts new file mode 100644 index 000000000..23144e711 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.providers.ts @@ -0,0 +1,17 @@ +// Shift +import { Student } from './entities/student.entity'; + +// Constants +import { CLASS, STUDENT } from '../../common/constants'; +import { Class } from '../classes/entities/class.entity'; + +export const studentProviders = [ + { + provide: STUDENT, + useValue: Student, + }, + { + provide: CLASS, + useValue: Class, + }, +]; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.repository.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.repository.ts new file mode 100644 index 000000000..d99d17c1c --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.repository.ts @@ -0,0 +1,40 @@ +import { Inject, Injectable } from '@nestjs/common'; +import { ModelStatic } from 'sequelize'; +import { STUDENT } from 'src/common/constants'; +import { Class } from '../classes/entities/class.entity'; +import { Student } from '../students/entities/student.entity'; + +@Injectable() +export class StudentRepository { + constructor(@Inject(STUDENT) public studentModel: ModelStatic) {} + + async findAll() { + return this.studentModel.findAll({ + include: [ + { + model: Class, + }, + ], + }); + } + + getAssignedStudents(classId: number) { + return this.studentModel.findAll({ where: { classId } }); + } + + assignStudent(tz: number, classId: number) { + return this.studentModel.update({ classId }, { where: { tz } }); + } + + unAssignStudent(tz: number, classId: number) { + return this.studentModel.update({ classId: null }, { where: { tz } }); + } + + removeOne(tz: number) { + return this.studentModel.destroy({ + where: { + tz, + }, + }); + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.service.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.service.ts new file mode 100644 index 000000000..04022924e --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/models/students/students.service.ts @@ -0,0 +1,35 @@ +import { Injectable, NotFoundException } from '@nestjs/common'; +import { ClassesService } from '../classes/classes.service'; +import { Student } from './entities/student.entity'; +import { StudentRepository } from './students.repository'; + +@Injectable() +export class StudentsService { + constructor( + private readonly studentRepository: StudentRepository, + private readonly classService: ClassesService, + ) {} + + async findAll() { + const students: Student[] = await this.studentRepository.findAll(); + if (!students.length) throw new NotFoundException('Classes not found'); + return students; + } + + unAssignStudent(id: number, classId: number) { + return this.studentRepository.unAssignStudent(id, classId); + } + + getAssignedStudents(classId: number) { + return this.studentRepository.getAssignedStudents(classId); + } + + assignStudent(id: number, classId: number) { + this.classService.decrementSeats(classId); + return this.studentRepository.assignStudent(id, classId); + } + + removeOne(id: number) { + return this.studentRepository.removeOne(id); + } +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/index.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/index.ts new file mode 100644 index 000000000..3d07f8b5b --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/index.ts @@ -0,0 +1 @@ +export * from "./postgres/provider.module"; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/postgres/provider.module.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/postgres/provider.module.ts new file mode 100644 index 000000000..724923004 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/postgres/provider.module.ts @@ -0,0 +1,11 @@ +// External libraries +import { Module } from "@nestjs/common"; + +// Provider +import { databaseProviders } from "./provider.providers"; + +@Module({ + providers: [...databaseProviders], + exports: [...databaseProviders] +}) +export class DatabaseModule {} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/postgres/provider.providers.ts b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/postgres/provider.providers.ts new file mode 100644 index 000000000..7ace1ca37 --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/src/providers/database/postgres/provider.providers.ts @@ -0,0 +1,34 @@ +// External libraries +import { Sequelize } from 'sequelize-typescript'; +import { Class } from 'src/models/classes/entities/class.entity'; +import { Student } from 'src/models/students/entities/student.entity'; + +require('dotenv').config() + +export const databaseProviders = [ + { + provide: 'SEQUELIZE', + useFactory: () => { + const sequelize = new Sequelize({ + database: process.env.DB_DATABASE, + host: process.env.DB_HOST, + port: 5432, + schema: 'hafifa', + username: process.env.DB_USERNAME, + password: process.env.DB_PASSWORD, + dialect: 'postgres', + ssl: true, + dialectOptions: { + ssl: { + require: true, + }, + }, + models: [Class, Student], + }); + + sequelize.addModels([Class, Student]); + + return sequelize; + }, + }, +]; diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/tsconfig.build.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/tsconfig.build.json new file mode 100644 index 000000000..64f86c6bd --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["node_modules", "test", "dist", "**/*spec.ts"] +} diff --git a/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/tsconfig.json b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/tsconfig.json new file mode 100644 index 000000000..adb614cab --- /dev/null +++ b/02-TypeScript/18-personalProject/KSENIYA-CLASSROOM/classroom-server/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "module": "commonjs", + "declaration": true, + "removeComments": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "target": "es2017", + "sourceMap": true, + "outDir": "./dist", + "baseUrl": "./", + "incremental": true, + "skipLibCheck": true, + "strictNullChecks": false, + "noImplicitAny": false, + "strictBindCallApply": false, + "forceConsistentCasingInFileNames": false, + "noFallthroughCasesInSwitch": false + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/.vscode/settings.json b/02-TypeScript/18-personalProject/Need improvment/Dayan/.vscode/settings.json new file mode 100644 index 000000000..28a51d58b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/index.html b/02-TypeScript/18-personalProject/Need improvment/Dayan/index.html new file mode 100644 index 000000000..34a2ef0a8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/index.html @@ -0,0 +1,159 @@ + + + + Responsive Website + + + + + + + + + + + + + + + + + + + + + + +
                    +
                    +
                    +

                    Your Daily Yoga Practice

                    +

                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse harum ad vero quia corporis excepturi earum vel rerum optio! Maiores quae voluptatem aspernatur quaerat voluptates reprehenderit corporis tempora molestiae dicta.

                    +
                    +
                    + + +
                    +
                    + hero-img +
                    + + +
                    +
                    +
                    + +
                    +
                    +

                    About Us

                    +

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore blanditiis vitae, culpa quis sint commodi saepe ut dolores quod. Culpa omnis amet sit quidem in obcaecati quas vitae rem? Mollitia!

                    +

                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat corrupti harum sint blanditiis nesciunt sed, nobis aperiam nisi excepturi minus molestiae quas ipsa repudiandae, officiis, nihil laudantium ab doloremque distinctio.

                    +
                    +
                    +
                    + + +
                    +

                    Benefits

                    +
                    +
                    +
                    + icon +
                    +

                    Keep your mind healthy and strong

                    +

                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente qui modi nostrum nisi vel deserunt numquam, libero cupiditate ea natus nam architecto fugiat eligendi et dicta tempore illum? Quae ratione aliquam, unde maiores modi expedita?

                    +
                    +
                    +
                    + icon +
                    +

                    Increase happiness and well being and reduce depression

                    +

                    Lorem ipsum dolor sit amet consectetur adipisicing elit. At, voluptas ducimus delectus asperiores saepe quaerat dolor aspernatur cupiditate facilis? Molestiae porro officiis iusto quibusdam, ducimus aut nulla possimus molestias consequuntur. Similique suscipit provident id iusto!

                    +
                    +
                    +
                    + icon +
                    +

                    Reduce stress and promote relaxation

                    +

                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, ab corporis. Repellat natus consectetur, perspiciatis eaque exercitationem autem? Quia maxime alias debitis magnam ullam tempore officia consectetur quas nulla? Similique doloribus nobis ea totam nihil!

                    +
                    +
                    +
                    + + + + + +
                    +
                    +
                    +
                    +

                    Phone

                    +

                    +972 123456789

                    +
                    +
                    +

                    Email

                    +

                    yogaclinic@domain.com

                    +
                    +
                    +

                    Address

                    +

                    Tel-Aviv, Israel

                    +
                    +
                    +
                    + + + + + + + + + +
                    +
                    +
                    + + +
                    +

                    Copyright 𝕔 2023 by YogaClinic. All rights reserved.

                    +
                    + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/login.html b/02-TypeScript/18-personalProject/Need improvment/Dayan/login.html new file mode 100644 index 000000000..9738816a1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/login.html @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + Login + + + + + + +
                    +
                    + +
                    + +
                    + + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/login.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/login.scss new file mode 100644 index 000000000..9d862d00a --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/login.scss @@ -0,0 +1,179 @@ + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --blackShade3: #999; + --baseFontSize1: 1.6rem; + --baseFontSize2: 1.2rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +.container{ + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 7rem; + padding: 0.2rem; + + .img{ + display: flex; + justify-content: flex-end; + align-items: center; + + + img{ + width: 500px; + } + } + + .login-container{ + display: flex; + align-items: center; + text-align: center; + + form{ + width: 360px; + + .avatar{ + width: 100px; + } + + h2{ + font-size: var(--headingFontSize2); + margin: 15px 0; + color: var(--blackShade1); + } + + .input-div{ + position: relative; + display: grid; + grid-template-columns: 7% 93%; + margin: 25px 0; + padding: 5px 0; + border-bottom: 2px solid #d9d9d9; + + .i{ + display: flex; + justify-content: center; + align-items: center; + + i{ + font-size: var(--baseFontSize1); + color: var(--blackShade3); + } + } + + div{ + position: relative; + height: 45px; + + h5{ + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + color: var(--blackShade3); + font-size: var(--baseFontSize1); + transition: all 0.3s ease; + } + + input{ + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border: none; + outline: none; + background: none; + padding: 0.5rem 0.7rem; + font-size: var(--baseFontSize1); + color: var(--blackShade2); + + } + } + } + + .input-div::before, .input-div::after{ + content: ''; + position: absolute; + bottom: -2px; + width: 0%; + height: 2px; + background-color: var(--baseShade1); + transition: all 0.4s ease; + } + + .input-div::before{ + right: 50%; + } + + .input-div::after{ + left: 50%; + } + + .input-div.focus::before, .input-div.focus::after{ + width: 50%; + } + + .input-div.focus{ + div{ + h5{ + top: -5px; + font-size: 15px; + } + } + } + + a{ + display: block; + text-align: right; + text-decoration: none; + color: var(--blackShade2); + font-size: var(--baseFontSize2); + transition: all 0.3s ease; + + &:hover{ + color: var(--baseShade1); + } + } + + .btn{ + display: block; + width: 100%; + height: 50px; + border-radius: var(--borderRadius2); + margin: 1rem 0; + font-size: var(--baseFontSize1); + outline: none; + border: none; + background-color: var(--baseShade1); + cursor: pointer; + color: var(--whiteShade1); + transition: all 0.5s ease; + + &:hover{ + background-color: var(--baseShade2); + } + } + } + } +} + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/login.ts b/02-TypeScript/18-personalProject/Need improvment/Dayan/login.ts new file mode 100644 index 000000000..e78801dcb --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/login.ts @@ -0,0 +1,84 @@ +//-----Login Script-----// +const inputs = document.querySelectorAll("input") + +inputs.forEach(input => { + input.addEventListener('focus', focusFunc) + input.addEventListener('blur', blurFunc) +}) + +function focusFunc(){ + let parent = this.parentNode.parentNode + parent.classList.add('focus') +} + +function blurFunc(){ + let parent = this.parentNode.parentNode + if(this.value == ""){ + parent.classList.remove('focus') + } + +} + +//----- Event listener +const form = document.querySelector("form") as HTMLFormElement +const userName = document.querySelector("#username") as HTMLInputElement +const userPassword = document.querySelector("#password") as HTMLInputElement + +function handleSubmit(event){ + try{ + event.preventDefault() + + //----- Get values from the elements + const { username, password } = event.target.elements + + if(username.value == ""){ + alert("Please enter your username") + } + if(password.value == ""){ + alert("Please enter your password") + } + if(checkUserDetails(userName.value, userPassword.value) == false){ + alert("Incorrect username or password") + + } + else{ + event.target.reset() + + return location.href = './userProfile.html' + } + }catch(error){ + console.error(error) + } +} + +//----- Check user's details +function getDataFromStorage(){ + try{ + //----- Get Data from Storage + const dataString = localStorage.getItem("users") as string + // if(!dataString) throw new Error ("Couldn't find data in storage") + + //----- Convert to array + let data = JSON.parse(dataString) + return data + }catch(error){ + console.error(error) + return undefined + } +} + +function checkUserDetails(username:string, password:string | number){ + try{ + let data = getDataFromStorage() + for(let i = 0; i < data.length; i++){ + if(username == data[i].username && password == data[i].password){ + return true + } + } + return false + + }catch(error){ + console.error(error) + } +} + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/model.ts b/02-TypeScript/18-personalProject/Need improvment/Dayan/model.ts new file mode 100644 index 000000000..869ac55ff --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/model.ts @@ -0,0 +1,56 @@ +//-----Class User-----// +class User{ + constructor( + public name: string, + public username: string, + public email: string, + public phone: number, + public password: string | number, + public gender: string + ){} +} + +const users:User[] = [] + +//-----Class Video Library-----// +class Video{ + constructor( + public title: string, + public url: string, + public id: string | number, + ){} +} + +const videoLibrary:Video[] = [ + { + title:"Full Body Yoga for Strength & Flexibility | 25 Minute At Home Mobility Routine", + url:"https://www.youtube.com/watch?v=Eml2xnoLpYE&t=1s", + id:"video_1" + }, + { + title:"15 Minute Yoga Stretch Break | Open Your Body & Feel Amazing!", + url:"https://www.youtube.com/watch?v=xfhfltT2Keo&t=1s", + id:"video_2" + }, + { + title:"Yoga To Ease Into The Day | Full Body - 20 Minute Morning Yoga Flow", + url:"https://www.youtube.com/watch?v=-l2rrLp9ePk", + id:"video_3" + }, + { + title:"15 MIN MORNING YOGA FLOW || Wake Up & Feel Energised", + url:"https://www.youtube.com/watch?v=Vr3h5X9kmUo", + id:"video_4" + }, + { + title:"30-Minute Energizing Power Vinyasa Flow with Briohny Smyth", + url:"https://www.youtube.com/watch?v=A4ViwsLKoSY", + id:"video_5" + }, + { + title:"10 MIN YOGA FLOW - for Full Body Strength & Flowy Stretching", + url:"https://www.youtube.com/watch?v=_XBVI0HeegQ", + id:"video_6" + }, +] + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/login.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/login.css new file mode 100644 index 000000000..f1278a33f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/login.css @@ -0,0 +1,150 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --blackShade3: #999; + --baseFontSize1: 1.6rem; + --baseFontSize2: 1.2rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +.container { + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 7rem; + padding: 0.2rem; +} +.container .img { + display: flex; + justify-content: flex-end; + align-items: center; +} +.container .img img { + width: 500px; +} +.container .login-container { + display: flex; + align-items: center; + text-align: center; +} +.container .login-container form { + width: 360px; +} +.container .login-container form .avatar { + width: 100px; +} +.container .login-container form h2 { + font-size: var(--headingFontSize2); + margin: 15px 0; + color: var(--blackShade1); +} +.container .login-container form .input-div { + position: relative; + display: grid; + grid-template-columns: 7% 93%; + margin: 25px 0; + padding: 5px 0; + border-bottom: 2px solid #d9d9d9; +} +.container .login-container form .input-div .i { + display: flex; + justify-content: center; + align-items: center; +} +.container .login-container form .input-div .i i { + font-size: var(--baseFontSize1); + color: var(--blackShade3); +} +.container .login-container form .input-div div { + position: relative; + height: 45px; +} +.container .login-container form .input-div div h5 { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + color: var(--blackShade3); + font-size: var(--baseFontSize1); + transition: all 0.3s ease; +} +.container .login-container form .input-div div input { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border: none; + outline: none; + background: none; + padding: 0.5rem 0.7rem; + font-size: var(--baseFontSize1); + color: var(--blackShade2); +} +.container .login-container form .input-div::before, .container .login-container form .input-div::after { + content: ""; + position: absolute; + bottom: -2px; + width: 0%; + height: 2px; + background-color: var(--baseShade1); + transition: all 0.4s ease; +} +.container .login-container form .input-div::before { + right: 50%; +} +.container .login-container form .input-div::after { + left: 50%; +} +.container .login-container form .input-div.focus::before, .container .login-container form .input-div.focus::after { + width: 50%; +} +.container .login-container form .input-div.focus div h5 { + top: -5px; + font-size: 15px; +} +.container .login-container form a { + display: block; + text-align: right; + text-decoration: none; + color: var(--blackShade2); + font-size: var(--baseFontSize2); + transition: all 0.3s ease; +} +.container .login-container form a:hover { + color: var(--baseShade1); +} +.container .login-container form .btn { + display: block; + width: 100%; + height: 50px; + border-radius: var(--borderRadius2); + margin: 1rem 0; + font-size: var(--baseFontSize1); + outline: none; + border: none; + background-color: var(--baseShade1); + cursor: pointer; + color: var(--whiteShade1); + transition: all 0.5s ease; +} +.container .login-container form .btn:hover { + background-color: var(--baseShade2); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/login.js b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/login.js new file mode 100644 index 000000000..61cffe710 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/login.js @@ -0,0 +1,72 @@ +//-----Login Script-----// +var inputs = document.querySelectorAll("input"); +inputs.forEach(function (input) { + input.addEventListener('focus', focusFunc); + input.addEventListener('blur', blurFunc); +}); +function focusFunc() { + var parent = this.parentNode.parentNode; + parent.classList.add('focus'); +} +function blurFunc() { + var parent = this.parentNode.parentNode; + if (this.value == "") { + parent.classList.remove('focus'); + } +} +//----- Event listener +var form = document.querySelector("form"); +var userName = document.querySelector("#username"); +var userPassword = document.querySelector("#password"); +function handleSubmit(event) { + try { + event.preventDefault(); + //----- Get values from the elements + var _a = event.target.elements, username = _a.username, password = _a.password; + if (username.value == "") { + alert("Please enter your username"); + } + if (password.value == "") { + alert("Please enter your password"); + } + if (checkUserDetails(userName.value, userPassword.value) == false) { + alert("Incorrect username or password"); + } + else { + event.target.reset(); + return location.href = './userProfile.html'; + } + } + catch (error) { + console.error(error); + } +} +//----- Check user's details +function getDataFromStorage() { + try { + //----- Get Data from Storage + var dataString = localStorage.getItem("users"); + // if(!dataString) throw new Error ("Couldn't find data in storage") + //----- Convert to array + var data = JSON.parse(dataString); + return data; + } + catch (error) { + console.error(error); + return undefined; + } +} +function checkUserDetails(username, password) { + try { + var data = getDataFromStorage(); + for (var i = 0; i < data.length; i++) { + if (username == data[i].username && password == data[i].password) { + return true; + } + } + return false; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/model.js b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/model.js new file mode 100644 index 000000000..76b742d10 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/model.js @@ -0,0 +1,54 @@ +//-----Class User-----// +var User = /** @class */ (function () { + function User(name, username, email, phone, password, gender) { + this.name = name; + this.username = username; + this.email = email; + this.phone = phone; + this.password = password; + this.gender = gender; + } + return User; +}()); +var users = []; +//-----Class Video Library-----// +var Video = /** @class */ (function () { + function Video(title, url, id) { + this.title = title; + this.url = url; + this.id = id; + } + return Video; +}()); +var videoLibrary = [ + { + title: "Full Body Yoga for Strength & Flexibility | 25 Minute At Home Mobility Routine", + url: "https://www.youtube.com/watch?v=Eml2xnoLpYE&t=1s", + id: "video_1" + }, + { + title: "15 Minute Yoga Stretch Break | Open Your Body & Feel Amazing!", + url: "https://www.youtube.com/watch?v=xfhfltT2Keo&t=1s", + id: "video_2" + }, + { + title: "Yoga To Ease Into The Day | Full Body - 20 Minute Morning Yoga Flow", + url: "https://www.youtube.com/watch?v=-l2rrLp9ePk", + id: "video_3" + }, + { + title: "15 MIN MORNING YOGA FLOW || Wake Up & Feel Energised", + url: "https://www.youtube.com/watch?v=Vr3h5X9kmUo", + id: "video_4" + }, + { + title: "30-Minute Energizing Power Vinyasa Flow with Briohny Smyth", + url: "https://www.youtube.com/watch?v=A4ViwsLKoSY", + id: "video_5" + }, + { + title: "10 MIN YOGA FLOW - for Full Body Strength & Flowy Stretching", + url: "https://www.youtube.com/watch?v=_XBVI0HeegQ", + id: "video_6" + }, +]; diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-Login.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-Login.css new file mode 100644 index 000000000..366a68873 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-Login.css @@ -0,0 +1,14 @@ +@media screen and (max-width: 991px) { + .container { + max-width: 100%; + grid-template-columns: 1fr; + } + + .img img { + display: none; + } + + .login-container { + justify-content: center; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-signUp.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-signUp.css new file mode 100644 index 000000000..274d85137 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-signUp.css @@ -0,0 +1,19 @@ +@media (max-width: 584px) { + .container { + max-width: 100%; + } + .container form .user-details { + max-height: 300px; + overflow-y: scroll; + } + .container form .user-details::-webkit-scrollbar { + width: 0; + } + .container form .user-details .input-box { + margin-bottom: 15px; + width: 100%; + } + .container form .gender-details .category { + width: 50%; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-userProfile.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-userProfile.css new file mode 100644 index 000000000..18b1c38f2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries-userProfile.css @@ -0,0 +1,25 @@ +@media (max-width: 1092px) { + + section { + padding: 30px 10px; + } + section .container { + width: 100%; + display: grid; + grid-template-columns: repeat(1, 1fr); + overflow: hidden; + } + section .container #main-Video { + height: 100%; + } + section .container .playlistBx { + height: 380px; + margin-top: 10px; + } + section .container .playlistBx .playlist { + position: absolute; + width: 100%; + height: calc(100% - 40px); + overflow-y: scroll; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries.css new file mode 100644 index 000000000..ae95fa0e2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/queries.css @@ -0,0 +1,119 @@ +@media only screen and (max-width: 575px) { + html { + font-size: 46.87%; + } + + nav .fas, #logo { + font-size: var(--headingFontSize3); + } + + nav ul { + height: calc(100vh - 52.13px); + top: 52.13px; + } + + .hero-btns { + width: 100%; + } + + section, footer { + padding: 5rem 2rem; + } + + .newsletter { + padding: 3rem 2rem; + } + .newsletter form { + flex-direction: column; + gap: 2rem; + } + .newsletter form input[type=email] { + padding: 1rem 2rem; + width: 100%; + } + .newsletter form button { + display: block; + margin: auto; + } +} +@media only screen and (max-width: 767px) { + html { + font-size: 50%; + } + + nav .fas { + display: block; + } + nav .fas:hover { + cursor: pointer; + } + nav ul { + height: calc(100vh - 53.4px); + width: 100vw; + position: fixed; + top: 53.4px; + left: -100vw; + display: flex; + flex-direction: column; + align-items: center; + background: linear-gradient(135deg, var(--baseShade1), var(--baseShade2)); + transition: 1s; + } + nav ul li a::before { + background-color: transparent; + } + nav ul li a:hover::before { + background-color: var(--whiteShade1); + } + + section, footer { + padding: 5rem; + } + + .newsletter { + padding: 3rem 5rem; + } + .newsletter .wrapper { + padding: 3rem 4rem; + } + + #scroll-top-btn { + height: 5rem; + width: 5rem; + } +} +@media only screen and (max-width: 991px) { + html { + font-size: 56.25%; + } + + header { + grid-template-columns: 1fr; + } + header img { + grid-row: 1; + } + header .hero-btns { + width: 70%; + margin: auto; + justify-content: space-around; + gap: 0; + } + + .about img { + width: 50%; + margin: auto; + } + + footer .row { + padding: 4rem 0; + } + + footer .row:nth-child(2) { + flex-direction: row; + } + + section .row, footer .row { + flex-direction: column; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/script.js b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/script.js new file mode 100644 index 000000000..bc6459830 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/script.js @@ -0,0 +1,27 @@ +//-----Toggle SideMenu-----// +var navBar = document.querySelector("nav"); +var myNav = document.getElementById("nav-bar"); +var navLinks = myNav.querySelectorAll("li"); +var hamMenu = document.getElementById("ham-menu"); +hamMenu.addEventListener("click", function () { + myNav.classList.toggle("active"); //פתיחת תפריט בכל לחיצה על ההמבורגר + hamMenu.classList.toggle("fa-times"); //הופך את האייקון של ההמבורגר לאיקס לאחר הקליק +}); +navLinks.forEach(function (navLink) { + navLink.addEventListener("click", function () { + myNav.classList.remove("active"); //בכל לחיצה על אחד מכפתורי התפריט, התפריט נעלם + hamMenu.classList.toggle("fa-times"); //לחיצה על אחד מלחצני התפריט ישנה את האייקון את האיקס בחזרה לאייקון של ההמבורגר + }); +}); +//-----Scroll to top button-----// +var scrollTopButton = document.getElementById("scroll-top-btn"); +scrollTopButton.addEventListener("click", function () { + document.documentElement.scrollTop = 0; +}); +//-----Gallery Script-----// +var galleryConteiner = document.querySelector(".gallery-container"); +for (var i = 0; i < gallery.length; i++) { + var img = document.createElement("img"); + img.src = gallery[i].src; + galleryConteiner.appendChild(img); +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/signUp.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/signUp.css new file mode 100644 index 000000000..3d1ccb13c --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/signUp.css @@ -0,0 +1,139 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --blackShade3: #999; + --blackShade4: #ccc; + --baseFontSize1: 1.6rem; + --baseFontSize2: 1.2rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +body { + display: flex; + height: 100vh; + justify-content: center; + align-items: center; + background-color: var(--baseShade1); +} + +.container { + max-width: 700px; + width: 100%; + background-color: var(--whiteShade2); + padding: 25px 30px; + border-radius: var(--borderRadius2); +} +.container .title { + font-size: var(--headingFontSize2); + font-weight: 500; + position: relative; +} +.container .title::before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 35px; + background: linear-gradient(135deg, var(--baseShade1), var(--blackShade2)); +} +.container form .user-details { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} +.container form .user-details .input-box { + margin-bottom: 15px; + width: calc(100% / 2 - 20px); +} +.container form .user-details .input-box .details { + display: block; + font-weight: 500; + margin-bottom: 5px; + font-size: var(--baseFontSize1); +} +.container form .user-details .input-box input { + height: 45px; + width: 100%; + outline: none; + border-radius: var(--borderRadius2); + border: 1px solid var(--blackShade4); + padding-left: 15px; + font-size: var(--baseFontSize1); + border-bottom-width: 2px; + transition: all 0.3s ease; +} +.container form .user-details .input-box input:focus, .container form .user-details .input-box input:valid { + border-color: var(--baseShade2); +} +.container form .gender-details .gender-title { + font-size: var(--baseFontSize1); + font-weight: 500; +} +.container form .gender-details .category { + display: flex; + width: 30%; + margin: 14px 0; + justify-content: space-between; +} +.container form .gender-details .category label { + display: flex; + align-items: center; +} +.container form .gender-details .category label .dot { + height: 18px; + width: 18px; + background: var(--blackShade4); + border-radius: 50%; + margin-right: 10px; + border: 5px solid transparent; + transition: all 0.3s ease; +} +.container form .gender-details .category label .gender { + font-size: var(--baseFontSize1); +} +.container form .gender-details #dot-1:checked ~ .category label .one, +.container form .gender-details #dot-2:checked ~ .category label .two { + border-color: var(--blackShade4); + background: var(--baseShade2); +} +.container form input[type=radio] { + display: none; +} +.container form .button { + height: 45px; + margin: 45px 0; +} +.container form .button input { + height: 100%; + width: 100%; + outline: none; + border-radius: var(--borderRadius2); + margin: 1rem 0; + font-size: var(--baseFontSize1); + border: none; + background-color: var(--baseShade1); + cursor: pointer; + color: var(--whiteShade1); + transition: all 0.5s ease; +} +.container form .button input:hover { + background-color: var(--baseShade2); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/signUp.js b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/signUp.js new file mode 100644 index 000000000..bbe93cf99 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/signUp.js @@ -0,0 +1,61 @@ +//-----SignUp Script-----// +var form = document.querySelector("form"); +var userEmail = document.querySelector("#email"); +//----- Event listener +function handleAddDetail(event) { + try { + event.preventDefault(); + //----- Get values from the elements + var _a = event.target.elements, name = _a.name, username = _a.username, email = _a.email, phone = _a.phone, password = _a.password, gender = _a.gender; + if (checksIfUserExists(userEmail.value) == false) { + alert("This email is already exist"); + } + else { + users.push(new User(name.value, username.value, email.value, phone.value, password.value, gender.value)); + /* The setItem method is used to store a key-value pair in the + localStorage object of a web browser. + */ + localStorage.setItem('users', JSON.stringify(users)); + console.log(users); + /* The reset method of an event target (usually a form element) + is used to reset all its controls to their initial values. + */ + event.target.reset(); + return location.href = './login.html'; + } + } + catch (error) { + console.error(error); + } +} +//----- Password verification test +//----- Check is the user is already exist +function getDataFromStorage() { + try { + //----- Get Data from Storage + var dataString = localStorage.getItem("users"); + // if(!dataString) throw new Error ("Couldn't find data in storage") + //----- Convert to array + var data = JSON.parse(dataString); + return data; + } + catch (error) { + console.error(error); + return undefined; + } +} +function checksIfUserExists(email) { + try { + var data = getDataFromStorage(); + for (var i = 0; data.length; i++) { + // console.log(email + "," + data[i].email) + if (email == data[i].email) { + return false; + } + } + return true; + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/style.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/style.css new file mode 100644 index 000000000..8d20b4d00 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/style.css @@ -0,0 +1,330 @@ +*, +*::before, +*::after { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +*:not(i) { + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --baseFontSize: 1.6rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +html { + font-size: 62.5%; + scroll-behavior: smooth; +} + +.btn-primary, .btn-secondary { + padding: 1rem 2rem; + border-radius: var(--borderRadius2); + border: none; + outline: none; + transition: 0.5s; +} +.btn-primary:hover, .btn-secondary:hover { + cursor: pointer; +} + +.btn-primary { + background-color: var(--baseShade1); + color: var(--whiteShade1); +} +.btn-primary:hover { + background-color: var(--baseShade2); +} + +.btn-secondary { + background-color: var(--whiteShade1); + border: 0.3rem solid var(--baseShade1); + color: var(--baseShade1); +} +.btn-secondary:hover { + border: 0.3rem solid var(--baseShade2); + color: var(--baseShade2); +} + +section, footer { + padding: 5rem 7rem; +} +section .row, footer .row { + display: flex; + justify-content: space-around; + gap: 3rem; +} + +h1 { + font-size: var(--headingFontSize1); + margin-bottom: 2rem; + word-spacing: 1rem; + line-height: 1.6; +} + +h2 { + font-size: var(--headingFontSize2); + color: var(--blackShade1); + font-weight: 700; + margin: 2rem 0 5rem 0; + text-align: center; +} + +h3 { + font-size: var(--headingFontSize3); + color: var(--blackShade1); + font-weight: 700; + margin: 1.5rem 0; +} + +h4 { + font-size: var(--headingFontSize4); + color: var(--blackShade2); + margin: 1.5rem 0; +} + +button, p, input[type=email] { + font-size: var(--baseFontSize); + color: var(--blackShade2); + line-height: 1.8; + font-weight: 400; +} + +input[type=email] { + padding: 0.8rem 2rem; + border-radius: var(--borderRadius2); + outline: none; +} +input[type=email]:focus { + border: 0.1rem solid var(--baseShade1); +} + +nav { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + position: fixed; + top: 0; + left: 0; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(0.8rem); +} +nav #logo { + font-weight: 700; +} +nav ul { + list-style: none; + display: flex; + justify-content: space-around; + gap: 2rem; +} +nav ul li a::before { + content: ""; + position: absolute; + background-color: transparent; + width: 0; + height: 50%; + bottom: 0; + z-index: -1; + margin-left: -5%; + transition: all 0.5s; +} +nav ul li a:hover::before { + background-color: var(--baseShade1); + width: 110%; +} +nav a { + color: var(--blackShade1); + text-decoration: none; + display: block; + position: relative; + font-size: var(--headingFontSize4); +} +nav .fas, nav #logo { + font-size: var(--headingFontSize4); +} +nav .fas { + display: none; +} +nav ul.active { + left: 0; +} +nav ul.active li a { + font-size: var(--headingFontSize3); +} + +header { + padding: 5rem; + display: grid; + grid-template-columns: 4fr 6fr; + align-items: center; +} +header .hero-text p { + text-align: justify; +} +header img { + display: block; + width: 100%; +} +header .hero-btns { + display: flex; + gap: 2rem; +} +header .hero-btns button { + margin-top: 2rem; +} + +.about .row { + align-items: center; +} +.about .row .column { + width: 100%; + padding: 0; +} +.about .row .column img { + display: block; + width: 80%; +} +.about .row .column p { + text-align: justify; +} + +.benefits .column { + padding: 4rem 2rem; + border-radius: var(--borderRadius1); +} +.benefits .column:hover { + background-color: var(--baseShade1); +} +.benefits .column:hover p { + color: var(--whiteShade1); +} +.benefits .column .img-container { + height: 10rem; + width: 10rem; + background-color: var(--whiteShade1); + margin: auto; + border-radius: 50%; +} +.benefits .column .img-container img { + width: 7rem; + display: block; + margin: auto; + padding: 1.1rem 0; +} +.benefits .column h3 { + text-align: center; +} +.benefits .column p { + text-align: center; +} + +.newsletter { + background: linear-gradient(var(--whiteShade1) 60%, var(--baseShade1) 60%); +} +.newsletter .wrapper { + background-color: var(--whiteShade1); + padding: 3rem 1rem; + border-radius: var(--borderRadius1); + box-shadow: 0 -10px 25px rgba(60, 60, 200, 0.05); +} +.newsletter .wrapper h3 { + color: var(--blackShade1); + text-align: center; +} +.newsletter .wrapper p { + text-align: center; +} +.newsletter .wrapper form { + margin: 3rem 0 1rem 0; + display: flex; + justify-content: space-between; +} +.newsletter .wrapper form input { + width: 60%; + border: 0.1rem solid var(--blackShade1); +} +.newsletter .wrapper form button { + width: 30%; +} + +footer { + background-color: var(--baseShade1); + text-align: center; +} +footer .row { + padding: 3rem 0; +} +footer .row .column { + width: 100%; +} +footer .row:nth-child(1) { + display: flex; + justify-content: center; + border-bottom: 0.2rem solid var(--whiteShade1); +} +footer .row:nth-child(2) { + display: flex; + justify-content: center; + gap: 20rem; +} +footer h3 { + color: var(--blackShade1); +} +footer p { + color: var(--whiteShade2); +} +footer i { + color: var(--blackShade1); + font-size: 3rem; +} +footer i:hover { + cursor: pointer; +} + +.copyright { + padding: 2.5rem 0; + background-color: var(--whiteShade2); + text-align: center; +} +.copyright p { + color: var(--blackShade1); +} + +#scroll-top-btn { + display: grid; + place-items: center; + height: 4rem; + width: 4rem; + position: fixed; + right: 2rem; + bottom: 2rem; + background-color: var(--baseShade1); + border: 0.4rem solid var(--whiteShade1); + border-radius: var(--borderRadius2); + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.12); +} +#scroll-top-btn .fas { + color: var(--whiteShade1); + font-size: 2rem; + line-height: 0; +} +#scroll-top-btn .fas:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/userProfile.css b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/userProfile.css new file mode 100644 index 000000000..6c5f4fd18 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/userProfile.css @@ -0,0 +1,130 @@ +@charset "UTF-8"; +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --blackShade3: #999; + --blackShade4: #ccc; + --baseFontSize1: 1.6rem; + --baseFontSize2: 1.2rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +body::-webkit-scrollbar { + width: 10px; +} + +body::-webkit-scrollbar-thumb { + height: 80px; + background: var(--baseShade2); +} + +body::-webkit-scrollbar-thumb:active { + background: var(--baseShade2); +} + +body { + background: var(--baseShade2); +} + +section { + display: flex; + height: 100vh; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 2.5%; + min-height: 100vh; +} +section .title { + font-size: var(--baseFontSize1); + font-weight: 600; + color: var(--whiteShade2); + text-align: left; + width: 100%; + margin-top: 60px; + margin-bottom: 10px; +} +section .container { + position: relative; + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 2fr 1fr; + overflow: hidden; +} +section .container #main-Video { + position: relative; + width: 100%; + height: auto; + overflow: hidden; + outline: none; +} +section .container .playlistBx { + position: relative; + height: 100%; + margin: 0 10px 0 10px; +} +section .container .playlist { + position: absolute; + width: 100%; + height: calc(100% - 40px); + overflow-y: scroll; + border-top: 1px solid var(--whiteShade2); +} +section .container .playlist li { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + color: var(--whiteShade2); + cursor: pointer; + border: 1px solid transparent; + padding: 15px 20px; + border-radius: var(--borderRadius2); +} +section .container .playlist li:hover { + border: 0.5px solid var(--blackShade3); +} +section .container .playlist li .row span { + font-size: var(--baseFontSize2); + font-weight: 400; + color: var(--whiteShade2); + text-decoration: none; + display: inline-block; + text-align: left; +} +section .container .playlist li .row span::before { + content: ""; + font-family: FontAwesome; + color: var(--whiteShade2); + margin-right: 15px; + font-size: var(--baseFontSize1); +} +section .container .playlist::-webkit-scrollbar { + width: 0px; +} +section .container .playlistBx .row .AllLessons { + display: block; + text-align: left; + color: var(--whiteShade2); + font-size: var(--baseFontSize2); + font-weight: 700; + margin-left: 40px; + line-height: 40px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/userProfile.js b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/userProfile.js new file mode 100644 index 000000000..3af5ac2a8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/public/dist/userProfile.js @@ -0,0 +1,61 @@ +var mainVideo = document.querySelector('#main-Video'); +var musicList = document.querySelector('.music-list'); +var playlist = document.querySelector('#playlist'); +var AllLessons = document.querySelector('.AllLessons'); +var videoTitle = document.querySelector('.title'); +var ulTag = document.querySelector("ul"); +AllLessons.innerHTML = videoLibrary.length + " Lessons"; +var musicIndex = 1; +window.addEventListener('load', function () { + loadMusic(musicIndex); + playingNow(); +}); +function playMusic() { + mainVideo.play(); + playlist.classList.add('active'); +} +function loadMusic(indexNumb) { + mainVideo.src = videoLibrary[indexNumb - 1].url + ".mp4"; + videoTitle.innerHTML = indexNumb + ". " + videoLibrary[indexNumb - 1].title; +} +var _loop_1 = function (i) { + var liTag = "
                  • \n
                    \n " + (i + 1) + ". " + videoLibrary[i].title + "\n
                    \n \n \n
                    • "; + playlist.insertAdjacentHTML('beforeend', liTag); + var liVideoDuration = ulTag.querySelector("#" + videoLibrary[i].id); + var liVideoTag = ulTag.querySelector("." + videoLibrary[i].id); + liVideoTag.addEventListener("loadeddata", function () { + var videoDuration = liVideoTag.duration; + var totalMin = Math.floor(videoDuration / 60); + var totalSec = Math.floor(videoDuration % 60); + // if totalSec is less then 10 then add 0 at the beginging + totalSec < 10 ? totalSec = "0" + totalSec : totalSec; + liVideoDuration.textContent = totalMin + ":" + totalSec; + // adding t duration attribe which we'll use below + liVideoDuration.setAttribute("t-duration", totalMin + ":" + totalSec); + }); +}; +for (var i = 0; i < videoLibrary.length; i++) { + _loop_1(i); +} +// let's work on play particular song on click +var allLiTags = playlist.querySelectorAll('li'); +function playingNow() { + for (var j = 0; j < videoLibrary.length; j++) { + if (allLiTags[j].classList.contains('playing')) { + allLiTags[j].classList.remove("playing"); + } + if (allLiTags[j].getAttribute('li-index') == musicIndex) { + allLiTags[j].classList.add('playing'); + } + // adding onclick attribute in all li tags + allLiTags[j].setAttribute("onclick", "clicked(this)"); + } +} +function clicked(element) { + // getting li index of particular clicked li tag + var getIndex = element.getAttribute("li-index"); + musicIndex = getIndex; + loadMusic(musicIndex); + playMusic(); + playingNow(); +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-Login.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-Login.scss new file mode 100644 index 000000000..f6c553cb3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-Login.scss @@ -0,0 +1,17 @@ +@media screen and (max-width: 991px){ + + .container{ + max-width: 100%; + grid-template-columns: 1fr; + } + + .img{ + img{ + display: none; + } + } + + .login-container{ + justify-content: center; + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-signUp.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-signUp.scss new file mode 100644 index 000000000..604b97905 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-signUp.scss @@ -0,0 +1,29 @@ +@media (max-width: 584px) { + .container{ + max-width: 100%; + + form{ + + .user-details{ + max-height: 300px; + overflow-y: scroll; + + &::-webkit-scrollbar{ + width: 0; + } + + .input-box{ + margin-bottom:15px; + width: 100%; + } + } + + .gender-details{ + + .category{ + width: 50%; + } + } + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-userProfile.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-userProfile.scss new file mode 100644 index 000000000..60c2d592e --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries-userProfile.scss @@ -0,0 +1,28 @@ +@media(max-width: 1092px){ + section { + padding: 30px 10px; + + .container { + width: 100%; + display: grid; + grid-template-columns: repeat(1,1fr); + overflow: hidden; + + #main-Video { + height: 100%; + } + + .playlistBx { + height: 380px; + margin-top: 10px; + + .playlist { + position: absolute; + width: 100%; + height: calc(100% - 40px); + overflow-y: scroll; + } + } + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/queries.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries.scss new file mode 100644 index 000000000..99bbe2c35 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/queries.scss @@ -0,0 +1,132 @@ +@media only screen and (max-width:575px){ + html{ + font-size: 46.87%; + } + + nav .fas, #logo{ + font-size: var(--headingFontSize3); + } + + nav ul{ + height: calc(100vh - 52.13px); + top: 52.13px; + } + + .hero-btns{ + width: 100%; + } + + section, footer{ + padding: 5rem 2rem; + } + + .newsletter{ + padding: 3rem 2rem; + + form{ + flex-direction: column; + gap: 2rem; + + input[type="email"]{ + padding: 1rem 2rem; + width: 100%; + } + + button{ + display: block; + margin: auto; + } + } + } +} + +@media only screen and (max-width:767px){ + html{ + font-size: 50%; + } + + nav{ + .fas{ + display: block; + + &:hover{ + cursor: pointer; + } + } + + ul{ + height: calc(100vh - 53.4px); + width: 100vw; + position: fixed; + top: 53.4px; + left: -100vw; + display: flex; + flex-direction: column; + align-items: center; + background: linear-gradient(135deg, var(--baseShade1), var(--baseShade2)); + transition: 1s; + + li a::before{ + background-color: transparent; + } + + li a:hover::before{ + background-color: var(--whiteShade1); + } + } + } + + section, footer{ + padding: 5rem; + } + + .newsletter{ + padding: 3rem 5rem; + + .wrapper{ + padding: 3rem 4rem; + } + } + + #scroll-top-btn{ + height: 5rem; + width: 5rem; + } +} + +@media only screen and (max-width:991px) { + html{ + font-size: 56.25%; + } + header{ + grid-template-columns: 1fr; //סידור כל האלמנטים בטור + + img{ + grid-row: 1; //העברת התמונה למקום ה-1 בטור + } + + .hero-btns{ + width: 70%; + margin: auto; + justify-content: space-around; + gap: 0; + } + } + + .about img{ + width: 50%; + margin: auto; + } + + footer .row{ + padding: 4rem 0; + } + + footer .row:nth-child(2){ + flex-direction: row; + } + + section .row, footer .row{ + flex-direction: column; //סידור כל האלמנטים בטור + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/script.ts b/02-TypeScript/18-personalProject/Need improvment/Dayan/script.ts new file mode 100644 index 000000000..66f52d467 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/script.ts @@ -0,0 +1,34 @@ +//-----Toggle SideMenu-----// +let navBar = document.querySelector("nav") as HTMLElement +let myNav = document.getElementById("nav-bar") as HTMLElement +let navLinks = myNav.querySelectorAll("li") +let hamMenu = document.getElementById("ham-menu") as HTMLElement + +hamMenu.addEventListener("click", ()=>{ + myNav.classList.toggle("active") //פתיחת תפריט בכל לחיצה על ההמבורגר + hamMenu.classList.toggle("fa-times") //הופך את האייקון של ההמבורגר לאיקס לאחר הקליק +}) + +navLinks.forEach((navLink)=>{ + navLink.addEventListener("click", ()=>{ + myNav.classList.remove("active") //בכל לחיצה על אחד מכפתורי התפריט, התפריט נעלם + hamMenu.classList.toggle("fa-times") //לחיצה על אחד מלחצני התפריט ישנה את האייקון את האיקס בחזרה לאייקון של ההמבורגר + }) +}) + +//-----Scroll to top button-----// +let scrollTopButton = document.getElementById("scroll-top-btn") as HTMLElement +scrollTopButton.addEventListener("click", ()=>{ + document.documentElement.scrollTop = 0 +}) + +//-----Gallery Script-----// +let galleryConteiner = document.querySelector(".gallery-container") as HTMLElement + +for(let i = 0; i < gallery.length; i++){ + const img = document.createElement("img") as HTMLImageElement + img.src = gallery[i].src + galleryConteiner.appendChild(img) +} + + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.html b/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.html new file mode 100644 index 000000000..68488517f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + Sign Up + + + + + + + +
                    +
                    Registration
                    +
                    +
                    +
                    + Full Name + +
                    +
                    + Username + +
                    +
                    + Email + +
                    +
                    + Phone Number + +
                    +
                    + Password + +
                    +
                    +
                    + + + Gender +
                    + + +
                    +
                    +
                    + +
                    +
                    +
                    + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.scss new file mode 100644 index 000000000..af7c04a3b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.scss @@ -0,0 +1,163 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --blackShade3: #999; + --blackShade4: #ccc; + --baseFontSize1: 1.6rem; + --baseFontSize2: 1.2rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +body{ + display: flex; + height: 100vh; + justify-content: center; + align-items: center; + background-color: var(--baseShade1); +} + +.container{ + max-width: 700px; + width: 100%; + background-color: var(--whiteShade2); + padding: 25px 30px; + border-radius: var(--borderRadius2); + + .title{ + font-size: var(--headingFontSize2); + font-weight: 500; + position: relative; + + &::before{ + content: ''; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 35px; + background: linear-gradient(135deg, var(--baseShade1), var(--blackShade2)); + } + } + + form{ + + .user-details{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; + + .input-box{ + margin-bottom: 15px; + width: calc(100% / 2 - 20px); + + .details{ + display: block; + font-weight: 500; + margin-bottom: 5px; + font-size: var(--baseFontSize1); + } + + input{ + height: 45px; + width: 100%; + outline: none; + border-radius: var(--borderRadius2); + border: 1px solid var(--blackShade4); + padding-left: 15px; + font-size: var(--baseFontSize1); + border-bottom-width: 2px; + transition: all 0.3s ease; + + &:focus, &:valid{ + border-color: var(--baseShade2) ; + } + } + } + } + + .gender-details{ + + .gender-title{ + font-size: var(--baseFontSize1); + font-weight: 500; + } + + .category{ + display: flex; + width: 30%; + margin: 14px 0; + justify-content: space-between; + + label{ + display: flex; + align-items: center; + + .dot{ + height: 18px; + width: 18px; + background: var(--blackShade4); + border-radius: 50%; + margin-right: 10px; + border: 5px solid transparent; + transition: all 0.3s ease; + } + + .gender{ + font-size: var(--baseFontSize1); + } + } + } + + #dot-1:checked ~ .category label .one, + #dot-2:checked ~ .category label .two{ + border-color: var(--blackShade4); + background: var(--baseShade2); + + } + } + + input[type="radio"]{ + display: none; + } + + .button{ + height: 45px; + margin: 45px 0; + + input{ + height: 100%; + width: 100%; + outline: none; + border-radius: var(--borderRadius2); + margin: 1rem 0; + font-size: var(--baseFontSize1); + border: none; + background-color: var(--baseShade1); + cursor: pointer; + color: var(--whiteShade1); + transition: all 0.5s ease; + + &:hover{ + background-color: var(--baseShade2); + } + } + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.ts b/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.ts new file mode 100644 index 000000000..190fd9535 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/signUp.ts @@ -0,0 +1,77 @@ +//-----SignUp Script-----// +const form = document.querySelector("form") as HTMLFormElement +const userEmail = document.querySelector("#email") as HTMLInputElement + +//----- Event listener +function handleAddDetail(event){ + try{ + event.preventDefault() + + //----- Get values from the elements + const{ name, username, email, phone, password, gender} = event.target.elements + + if(checksIfUserExists(userEmail.value) == false){ + alert("This email is already exist") + } + else{ + users.push(new User(name.value, username.value, email.value, phone.value, password.value, gender.value)) + /* The setItem method is used to store a key-value pair in the + localStorage object of a web browser. + */ + localStorage.setItem('users', JSON.stringify(users)) + + console.log(users) + + /* The reset method of an event target (usually a form element) + is used to reset all its controls to their initial values. + */ + event.target.reset() + + return location.href = './login.html' + } + + + + }catch(error){ + console.error(error) + } +} + +//----- Password verification test + + +//----- Check is the user is already exist +function getDataFromStorage(){ + try{ + //----- Get Data from Storage + const dataString = localStorage.getItem("users") as string + // if(!dataString) throw new Error ("Couldn't find data in storage") + + //----- Convert to array + let data = JSON.parse(dataString) + return data + }catch(error){ + console.error(error) + return undefined + } +} + +function checksIfUserExists(email:string){ + try{ + let data = getDataFromStorage() + for(let i = 0; data.length; i++){ + // console.log(email + "," + data[i].email) + if(email == data[i].email){ + return false + } + + } + return true + }catch(error){ + console.error(error) + + } +} + + + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/style.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/style.scss new file mode 100644 index 000000000..153b9c0b2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/style.scss @@ -0,0 +1,394 @@ +//-----Base Styles-----// +*, +*::before, //* הוספת תכונה מסוימת לפני כל +*::after{ //* הוספת תכונה מסוימת אחרי כל + padding: 0; + margin: 0; + box-sizing: border-box; +} + +//i הגדרת פונט לכל התגים המכילים טקסט, למעט התג +*:not(i){ + font-family: "Poppins", sans-serif; +} + +//הגדרת צבעים, גודל פונטים, ופינות מעוגלות לעמוד +:root{ + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + + --baseFontSize: 1.6rem; + + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +html{ + font-size: 62.5%; + scroll-behavior: smooth; //הוספת אלמנט גלילה חלק למסך +} + +// Utility Classes // +.btn-primary, .btn-secondary{ + padding: 1rem 2rem; + border-radius: var(--borderRadius2); + border: none; + outline: none; + transition: 0.5s; + + &:hover{ + cursor: pointer; + } +} + +.btn-primary{ + background-color: var(--baseShade1); + color: var(--whiteShade1); + + &:hover{ + background-color: var(--baseShade2); + } +} + +.btn-secondary{ + background-color: var(--whiteShade1); + border: 0.3rem solid var(--baseShade1); + color: var(--baseShade1); + + &:hover{ + border: 0.3rem solid var(--baseShade2); + color: var(--baseShade2); + } +} + +section, footer{ + padding: 5rem 7rem; + + .row{ + display: flex; + justify-content: space-around; + gap: 3rem; + } +} + +h1{ + font-size: var(--headingFontSize1); + margin-bottom: 2rem; + word-spacing: 1rem; + line-height: 1.6; +} + +h2{ + font-size: var(--headingFontSize2); + color: var(--blackShade1); + font-weight: 700; + margin: 2rem 0 5rem 0; + text-align: center; +} + +h3{ + font-size: var(--headingFontSize3); + color: var(--blackShade1); + font-weight: 700; + margin: 1.5rem 0; +} + +h4{ + font-size: var(--headingFontSize4); + color: var(--blackShade2); + margin: 1.5rem 0; +} + +button, p, input[type="email"]{ + font-size: var(--baseFontSize); + color: var(--blackShade2); + line-height: 1.8; + font-weight: 400; +} + +input[type="email"]{ + padding: 0.8rem 2rem; + border-radius: var(--borderRadius2); + outline: none; //הגדרת השורה מסביב לאלמנט, מחוץ למסגרת + + &:focus{ + border: 0.1rem solid var(--baseShade1); + } +} + +// Nav Bar // +nav{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + position: fixed; + top: 0; + left: 0; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(0.8rem); //אפקט של טשטוש מאחורי האלמנט + + #logo{ + font-weight: 700; + } + + ul{ + list-style: none; + display: flex; + justify-content: space-around; + gap: 2rem; + + // Navigation Link Hover // + li a::before{ + content: ""; + position: absolute; + background-color: transparent; + width: 0; + height: 50%; + bottom: 0; + z-index: -1; + margin-left: -5%; + transition: all 0.5s; + } + + li a:hover::before{ + background-color: var(--baseShade1); + width: 110%; + } + + } + + a{ + color: var(--blackShade1); + text-decoration: none; + display: block; + position: relative; + font-size: var(--headingFontSize4); + } + + .fas, #logo{ + font-size: var(--headingFontSize4); + } + + .fas{ + display: none; + } + + // Active SideNav Menu // + ul.active{ + left: 0; + + li a{ + font-size: var(--headingFontSize3); + } + } +} + +// Header // +header{ + padding: 5rem; + display: grid; + grid-template-columns: 4fr 6fr; + align-items: center; + + .hero-text p{ + text-align: justify; + } + + img{ + display: block; + width: 100%; + } + + .hero-btns{ + display: flex; + gap: 2rem; + + button{ + margin-top: 2rem; + + } + } +} + +// Section: About // +.about .row{ + align-items: center; + + .column{ + width: 100%; + padding: 0; + + img{ + display: block; + width: 80%; + } + + p{ + text-align: justify; //מיישר את הפסקה + } + } +} + +// Section: Benefits // +.benefits .column{ + padding: 4rem 2rem; + border-radius: var(--borderRadius1); + + &:hover{ + background-color: var(--baseShade1); + + p{ + color: var(--whiteShade1); + } + } + + .img-container{ + height: 10rem; + width: 10rem; + background-color: var(--whiteShade1); + margin: auto; + border-radius: 50%; + + img{ + width: 7rem; + display: block; + margin: auto; + padding: 1.1rem 0; + } + } + + h3{ + text-align: center; + } + + p{ + text-align: center; + } +} + +// Section: Newsletters // +.newsletter{ + background: linear-gradient(var(--whiteShade1) 60%, var(--baseShade1) 60%); + + .wrapper{ + background-color: var(--whiteShade1); + padding: 3rem 1rem; + border-radius: var(--borderRadius1); + box-shadow: 0 -10px 25px rgba(60,60,200,0.05); + + h3{ + color: var(--blackShade1); + text-align: center; + } + + p{ + text-align: center; + } + + form{ + margin: 3rem 0 1rem 0; + display: flex; + justify-content: space-between; + + input{ + width: 60%; + border: 0.1rem solid var(--blackShade1); + } + + button{ + width: 30%; + } + } + } +} + +// Footer // +footer{ + background-color: var(--baseShade1); + text-align: center; + + .row{ + padding: 3rem 0; + + .column{ + width: 100%; + } + } + .row:nth-child(1){ + display: flex; + justify-content: center; + border-bottom: 0.2rem solid var(--whiteShade1); + } + + .row:nth-child(2){ + display: flex; + justify-content: center; + gap: 20rem; + } + + h3{ + color: var(--blackShade1); + } + + p{ + color: var(--whiteShade2); + } + + i{ + color: var(--blackShade1); + font-size: 3rem; + + &:hover{ + cursor: pointer; + } + } +} + +// Copyright // +.copyright{ + padding: 2.5rem 0; + background-color: var(--whiteShade2); + text-align: center; + + p{ + color: var(--blackShade1); + } +} + +// Scroll To Top Button // +#scroll-top-btn{ + display: grid; + place-items: center; + height: 4rem; + width: 4rem; + position: fixed; + right: 2rem; + bottom: 2rem; + background-color: var(--baseShade1); + border: 0.4rem solid var(--whiteShade1); + border-radius: var(--borderRadius2); + box-shadow: 0 10px 15px rgba(0,0,0,0.12); + + .fas{ + color: var(--whiteShade1); + font-size: 2rem; + line-height: 0; + + &:hover{ + cursor: pointer; + } + } +} + + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.html b/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.html new file mode 100644 index 000000000..eafb7211a --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + User Profile + + + + + + + +
                    +

                    +
                    +
                    + +
                    +
                    +
                    +
                    + +
                    +
                    +
                      +
                      +
                      +
                      + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.scss b/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.scss new file mode 100644 index 000000000..871ce155b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.scss @@ -0,0 +1,172 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +:root { + --baseShade1: #54cc85; + --baseShade2: #479264; + --whiteShade1: #ffffff; + --whiteShade2: #f8fafb; + --blackShade1: #231c3d; + --blackShade2: #575a7b; + --blackShade3: #999; + --blackShade4: #ccc; + --baseFontSize1: 1.6rem; + --baseFontSize2: 1.2rem; + --headingFontSize1: 4rem; + --headingFontSize2: 3.2rem; + --headingFontSize3: 2rem; + --headingFontSize4: 1.8rem; + --borderRadius1: 1rem; + --borderRadius2: 0.5rem; +} + +body::-webkit-scrollbar { + width: 10px; +} + +body::-webkit-scrollbar-thumb { + height: 80px; + background: var(--baseShade2); +} + +body::-webkit-scrollbar-thumb:active { + background: var(--baseShade2); +} + +body { + background: var(--baseShade2); + +} + +section { + display: flex; + height: 100vh; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 2.5%; + min-height: 100vh; + + .title { + font-size: var(--baseFontSize1); + font-weight: 600; + color: var(--whiteShade2); + text-align: left; + width: 100%; + margin-top: 60px; + margin-bottom: 10px; + } + + .container { + position: relative; + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 2fr 1fr; + overflow: hidden; + + #main-Video { + position: relative; + width: 100%; + height: auto; + overflow: hidden; + outline: none; + } + + .playlistBx { + position: relative; + height: 100%; + margin: 0 10px 0 10px; + } + + .playlist { + position: absolute; + width: 100%; + height: calc(100% - 40px); + overflow-y: scroll; + border-top: 1px solid var(--whiteShade2); + + li { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + color: var(--whiteShade2); + cursor: pointer; + border: 1px solid transparent; + padding: 15px 20px; + border-radius: var(--borderRadius2); + + &:hover { + border: 0.5px solid var(--blackShade3); + } + } + + li .row span { + font-size: var(--baseFontSize2); + font-weight: 400; + color: var(--whiteShade2); + text-decoration: none; + display: inline-block; + text-align: left; + } + + li .row span::before { + content: '\f01d'; + font-family: FontAwesome; + color: var(--whiteShade2); + margin-right: 15px; + font-size: var(--baseFontSize1); + } + } + + .playlist::-webkit-scrollbar { + width: 0px; + } + + .playlistBx .row .AllLessons { + display: block; + text-align: left; + color: var(--whiteShade2); + font-size: var(--baseFontSize2); + font-weight: 700; + margin-left: 40px; + line-height: 40px; + } + } +} + + + + +// ul li.playing .row span::before +// { +// content: '\f28c'; +// font-family: FontAwesome; +// color: #fff; +// margin-right: 15px; +// font-size: 20px; +// } +// .playlist li.playing .row span +// { +// color: #fff; +// } +// .playlist li span.duration +// { +// font-size: 15px; +// font-weight: 400; +// display: inline-block; +// color: #dcdee1; +// text-align: right; +// } +// .playlist li.playing +// { +// pointer-events: none; +// background: #1d3541; +// border: 0.5px solid #1d3541; +// } + diff --git a/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.ts b/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.ts new file mode 100644 index 000000000..2de7a2918 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Dayan/userProfile.ts @@ -0,0 +1,70 @@ +const mainVideo = document.querySelector('#main-Video') as HTMLVideoElement +const musicList = document.querySelector('.music-list') +const playlist = document.querySelector('#playlist') as HTMLElement +const AllLessons = document.querySelector('.AllLessons') as HTMLElement +const videoTitle = document.querySelector('.title') as HTMLElement +const ulTag = document.querySelector("ul") as HTMLUListElement + +AllLessons.innerHTML = `${videoLibrary.length} Lessons` +let musicIndex:number = 1 +window.addEventListener('load', () => { + loadMusic(musicIndex) + playingNow() +}) + +function playMusic(){ + mainVideo.play() + playlist.classList.add('active') +} + +function loadMusic(indexNumb){ + mainVideo.src = `${videoLibrary[indexNumb - 1].url}.mp4` + videoTitle.innerHTML = `${indexNumb}. ${videoLibrary[indexNumb - 1].title}` +} + +for(let i = 0; i < videoLibrary.length; i++){ + let liTag = `
                    • +
                      + ${i + 1}. ${videoLibrary[i].title} +
                      + + +
                      • ` + playlist.insertAdjacentHTML('beforeend',liTag) + let liVideoDuration = ulTag.querySelector(`#${videoLibrary[i].id}`) as Element + let liVideoTag = ulTag.querySelector(`.${videoLibrary[i].id}`) as HTMLVideoElement + + liVideoTag.addEventListener("loadeddata", ()=>{ + let videoDuration:number = liVideoTag.duration + let totalMin:number = Math.floor(videoDuration / 60) + let totalSec:number = Math.floor(videoDuration % 60) + // if totalSec is less then 10 then add 0 at the beginging + totalSec < 10 ? totalSec = "0" + totalSec : totalSec + liVideoDuration.textContent = `${totalMin}:${totalSec}` + // adding t duration attribe which we'll use below + liVideoDuration.setAttribute("t-duration", `${totalMin}:${totalSec}`) + }) +} + +// let's work on play particular song on click +const allLiTags = playlist.querySelectorAll('li') as NodeListOf +function playingNow(){ + for(let j = 0; j < videoLibrary.length; j++){ + if(allLiTags[j].classList.contains('playing')){ + allLiTags[j].classList.remove("playing") + } + if(allLiTags[j].getAttribute('li-index') == musicIndex){ + allLiTags[j].classList.add('playing') + } + // adding onclick attribute in all li tags + allLiTags[j].setAttribute("onclick", "clicked(this)") + } +} +function clicked(element){ + // getting li index of particular clicked li tag + let getIndex = element.getAttribute("li-index") + musicIndex = getIndex + loadMusic(musicIndex) + playMusic() + playingNow() +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.html b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.html new file mode 100644 index 000000000..9b83560c3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.html @@ -0,0 +1,69 @@ + + + + + + + app-n&n + + + + + + + +

                      welcome

                      + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.scss b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.scss new file mode 100644 index 000000000..921a04421 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.scss @@ -0,0 +1,71 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Montserrat:ital,wght@1,300&display=swap'); + +$primaryback:linear-gradient(120deg,#2980b9, #8e44ad); +$pickcolor:rgb(194, 42, 174); +$bluecolor:rgb(104, 151, 240); +$aquacolor:rgb(14, 245, 245); + +body{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + background:linear-gradient(120deg,#2980b9, #8e44ad); + font-family: 'Montserrat', sans-serif; + height:100vh; + + .targ{ + display: flex; + justify-content: center; + color: rgb(242, 14, 212); + font-family: 'Lato', sans-serif; + font-size: 42px; + + } + nav{ + width: 100vw; + height: 100vh; + margin: 50px 0px; + position: relative; + + } + nav li a{ + text-decoration: none; + font-size: 26px; + padding: 30px; + + + } + li, a{ + width:20%; + + } + + + li{ + list-style-type: none; + padding: 10px; + } + a{ + color: aqua; + } + a:hover{ + transition-property: color; + transition-duration: 1s; + color:rgb(242, 14, 212); + + } + .box{ + position: absolute; + justify-content: center; + display: flex; + width: 50vw; + height: 70vh; + margin-right: 300px; + + } + + #newC, #dairy, #clinet, #mlay, #sapak, #todo{ + display: none; +} +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.ts b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.ts new file mode 100644 index 000000000..df0d25a15 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/app.ts @@ -0,0 +1,121 @@ + +// catch all navbar +const welcomeH1 = document.querySelector(".targ")as HTMLHeadElement; +startApp() +let newc = document.querySelector("#newC")as HTMLDivElement; + let dairy = document.querySelector("#dairy")as HTMLDivElement; + let clinet = document.querySelector("#clinet")as HTMLDivElement; + let mlay = document.querySelector("#mlay")as HTMLDivElement; + let sapak = document.querySelector("#sapak")as HTMLDivElement; + let todo = document.querySelector("#todo")!as HTMLDivElement; + + + + function startApp(){ + + const firstName = (JSON.parse(localStorage.getItem("userName")!)) + const password = (JSON.parse(localStorage.getItem("userPass")!)); + welcomeH1.textContent = "welcome "+firstName; + + + } + + + function renderNewCustomer(){ + try { + todo.style.display = "none" + newc.style.display = "block" + dairy.style.display = "none" + clinet.style.display = "none" + mlay.style.display = "none" + sapak.style.display = "none" + } catch (error) { + console.error(error); + } + } +function renderDairy(){ + try { + todo.style.display = "none" + newc.style.display = "none" + dairy.style.display = "block" + clinet.style.display = "none" + mlay.style.display = "none" + sapak.style.display = "none" + } catch (error) { + console.error(error); + } + } +function renderCustomer(){ + try { + sapak.style.display = "none" + todo.style.display = "none" + newc.style.display = "none" + dairy.style.display = "none" + clinet.style.display = "block" + mlay.style.display = "none" + } catch (error) { + console.error(error); + } + } +function renderMlay(){ + try { + sapak.style.display = "none" + todo.style.display = "none" + newc.style.display = "none" + dairy.style.display = "none" + clinet.style.display = "none" + mlay.style.display = "block" + } catch (error) { + console.error(error); + } + } +function renderSapakim(){ + try { + sapak.style.display = "block" + todo.style.display = "none" + newc.style.display = "none" + dairy.style.display = "none" + clinet.style.display = "none" + mlay.style.display = "none" + + } catch (error) { + console.error(error); + } + } + +function renderTodolist(){ + try { + todo.style.display = "block" + newc.style.display = "none" + dairy.style.display = "none" + clinet.style.display = "none" + mlay.style.display = "none" + sapak.style.display = "none" + todoListRuns() + } catch (error) { + console.error(error); + } + } + + + +function todoListRuns(){ + const btnadd = document.querySelector("#btnadd")as HTMLButtonElement; + const inp = document.querySelector + (".addMession")as HTMLInputElement; + const padd = document.querySelector(".pAdd")as HTMLDivElement; + inp.dir = "rtl" + btnadd.addEventListener("click",()=>{ + const newp = document.createElement("p")as HTMLParagraphElement; + padd.appendChild(newp) + newp.innerHTML = inp.value; + inp.value = "" + + newp.addEventListener("click",()=>{ + newp.style.textDecoration = "line-through"; + }) + newp.addEventListener("dblclick",()=>{ + padd.removeChild(newp) + }) + }) +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/app.css b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/app.css new file mode 100644 index 000000000..ae433c13a --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/app.css @@ -0,0 +1,54 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Montserrat:ital,wght@1,300&display=swap"); +body { + margin: 0px; + padding: 0px; + box-sizing: border-box; + background: linear-gradient(120deg, #2980b9, #8e44ad); + font-family: "Montserrat", sans-serif; + height: 100vh; +} +body .targ { + display: flex; + justify-content: center; + color: #f20ed4; + font-family: "Lato", sans-serif; + font-size: 42px; +} +body nav { + width: 100vw; + height: 100vh; + margin: 50px 0px; + position: relative; +} +body nav li a { + text-decoration: none; + font-size: 26px; + padding: 30px; +} +body li, body a { + width: 20%; +} +body li { + list-style-type: none; + padding: 10px; +} +body a { + color: aqua; +} +body a:hover { + transition-property: color; + transition-duration: 1s; + color: #f20ed4; +} +body .box { + position: absolute; + justify-content: center; + display: flex; + width: 50vw; + height: 70vh; + margin-right: 300px; +} +body #newC, body #dairy, body #clinet, body #mlay, body #sapak, body #todo { + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/app.js b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/app.js new file mode 100644 index 000000000..8da741f3d --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/app.js @@ -0,0 +1,111 @@ +// catch all navbar +var welcomeH1 = document.querySelector(".targ"); +startApp(); +var newc = document.querySelector("#newC"); +var dairy = document.querySelector("#dairy"); +var clinet = document.querySelector("#clinet"); +var mlay = document.querySelector("#mlay"); +var sapak = document.querySelector("#sapak"); +var todo = document.querySelector("#todo"); +function startApp() { + var firstName = (JSON.parse(localStorage.getItem("userName"))); + var password = (JSON.parse(localStorage.getItem("userPass"))); + welcomeH1.textContent = "welcome " + firstName; +} +function renderNewCustomer() { + try { + todo.style.display = "none"; + newc.style.display = "block"; + dairy.style.display = "none"; + clinet.style.display = "none"; + mlay.style.display = "none"; + sapak.style.display = "none"; + } + catch (error) { + console.error(error); + } +} +function renderDairy() { + try { + todo.style.display = "none"; + newc.style.display = "none"; + dairy.style.display = "block"; + clinet.style.display = "none"; + mlay.style.display = "none"; + sapak.style.display = "none"; + } + catch (error) { + console.error(error); + } +} +function renderCustomer() { + try { + sapak.style.display = "none"; + todo.style.display = "none"; + newc.style.display = "none"; + dairy.style.display = "none"; + clinet.style.display = "block"; + mlay.style.display = "none"; + } + catch (error) { + console.error(error); + } +} +function renderMlay() { + try { + sapak.style.display = "none"; + todo.style.display = "none"; + newc.style.display = "none"; + dairy.style.display = "none"; + clinet.style.display = "none"; + mlay.style.display = "block"; + } + catch (error) { + console.error(error); + } +} +function renderSapakim() { + try { + sapak.style.display = "block"; + todo.style.display = "none"; + newc.style.display = "none"; + dairy.style.display = "none"; + clinet.style.display = "none"; + mlay.style.display = "none"; + } + catch (error) { + console.error(error); + } +} +function renderTodolist() { + try { + todo.style.display = "block"; + newc.style.display = "none"; + dairy.style.display = "none"; + clinet.style.display = "none"; + mlay.style.display = "none"; + sapak.style.display = "none"; + todoListRuns(); + } + catch (error) { + console.error(error); + } +} +function todoListRuns() { + var btnadd = document.querySelector("#btnadd"); + var inp = document.querySelector(".addMession"); + var padd = document.querySelector(".pAdd"); + inp.dir = "rtl"; + btnadd.addEventListener("click", function () { + var newp = document.createElement("p"); + padd.appendChild(newp); + newp.innerHTML = inp.value; + inp.value = ""; + newp.addEventListener("click", function () { + newp.style.textDecoration = "line-through"; + }); + newp.addEventListener("dblclick", function () { + padd.removeChild(newp); + }); + }); +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/index.js b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/index.js new file mode 100644 index 000000000..bab238ec3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/index.js @@ -0,0 +1,19 @@ +var form = document.querySelector("form"); +form.addEventListener("submit", runform); +var inp_Name = document.querySelector(".inpn"); +var inp_pass = document.querySelector(".inp_pass"); +function runform(e) { + e.preventDefault(); + inp_Name.required; + inp_pass.required; + var inp_NameValue = inp_Name.value; + var inp_passValue = inp_pass.value; + localStorage.setItem("userName", JSON.stringify(inp_NameValue)); + localStorage.setItem("userPass", JSON.stringify(inp_passValue)); + if (inp_Name.value == "" && inp_pass.value == "") { + alert("pls fill the login"); + return false; + } + window.location.href = "app.html"; + startApp(); +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/style.css b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/style.css new file mode 100644 index 000000000..e3507c3ce --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/dist/style.css @@ -0,0 +1,62 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap"); +body { + margin: 0px; + padding: 0px; + box-sizing: border-box; + background: linear-gradient(120deg, #2980b9, #8e44ad); + font-family: "Montserrat", sans-serif; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +body .main, body .main_Info span { + margin-top: -450px; + font-family: sans-serif; +} +body .span2 { + color: #6897f0; +} +body .span3 { + color: whitesmoke; +} +body .main_Info { + color: #f20ed4; + font-weight: bolder; +} +body .container { + position: absolute; + width: 400px; + height: 250px; + border-radius: 10%; + background-color: #c22aae; +} +body .container .m_h1 { + text-align: center; + border-bottom: 1px solid black; +} +body .container form { + padding: 0 40px; +} +body .container form .formMain { + position: relative; + border-bottom: 2px solid #943593; + margin: 30px 0px; +} +body .container form .formMain, body .container form input { + width: 100%; + padding: 0 5px; + height: 30px; + font-size: 16px; + outline: none; + border: none; + background-color: #6897f0; +} +body .container form .btn_Login { + margin: 0px 125px; + background-color: #6897f0; + outline: none; + border: #c22aae; + font-size: 20px; + border-radius: 50%; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/index.html b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/index.html new file mode 100644 index 000000000..cfd3d33a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/index.html @@ -0,0 +1,36 @@ + + + + + + + Nihol-Nachon + + + + + + +
                      +

                      + N&N your Business run with no problems. +

                      +
                      +
                      +

                      Login

                      +
                      +
                      + + +
                      +
                      + + + +
                      + +
                      +
                      + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/index.ts b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/index.ts new file mode 100644 index 000000000..7bcbdb881 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/index.ts @@ -0,0 +1,26 @@ +const form = document.querySelector("form")as HTMLFormElement; +form.addEventListener("submit", runform)!; +let inp_Name = document.querySelector(".inpn") as HTMLInputElement; + let inp_pass = document.querySelector(".inp_pass") as HTMLInputElement; + + + function runform(e){ + e.preventDefault() + inp_Name.required + inp_pass.required + const inp_NameValue = inp_Name.value; + const inp_passValue = inp_pass.value; + + localStorage.setItem("userName", JSON.stringify(inp_NameValue)); + localStorage.setItem("userPass", JSON.stringify(inp_passValue)); + + if(inp_Name.value == "" && inp_pass.value == ""){ + alert("pls fill the login") + return false + } + window.location.href = "app.html" + startApp() + } + + + diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style.scss b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style.scss new file mode 100644 index 000000000..cbf82c800 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style.scss @@ -0,0 +1,77 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap'); + +$primaryback:linear-gradient(120deg,#2980b9, #8e44ad); +$pickcolor:rgb(194, 42, 174); +$bluecolor:rgb(104, 151, 240); + + +body{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + background:linear-gradient(120deg,#2980b9, #8e44ad); + font-family: 'Montserrat', sans-serif; + height:100vh; + display: flex; + justify-content: center; + align-items: center; + + + .main, .main_Info span{ + margin-top: -450px; + font-family:sans-serif; + + } + .span2{ + color:rgb(104, 151, 240); + } + .span3{ + color: whitesmoke; + } + .main_Info{ + color: rgb(242, 14, 212); + font-weight: bolder; + } + .container{ + position: absolute; + width:400px; + height: 250px; + border-radius: 10%; + background-color: rgb(194, 42, 174); + + + .m_h1{ + text-align: center; + border-bottom: 1px solid black; + } + + form{ + padding: 0 40px; + + .formMain{ + position: relative; + border-bottom: 2px solid #943593; + margin: 30px 0px; + } + + .formMain, input{ + width: 100%; + padding: 0 5px; + height: 30px; + font-size: 16px; + outline: none; + border: none; + background-color: rgb(104, 151, 240); + } + .btn_Login{ + margin: 0px 125px; + background-color: rgb(104, 151, 240); + outline: none; + border: rgb(194, 42, 174); + font-size: 20px; + border-radius: 50%; + } + } + } +} + diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/dist/newc.css b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/dist/newc.css new file mode 100644 index 000000000..91807f0a0 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/dist/newc.css @@ -0,0 +1,31 @@ +#newC { + height: 70vh; + display: flex; + justify-content: center; +} +#newC #newCform { + margin: 150px 0px; +} +#newC #newCform label { + color: #f20ed4; + font-size: 24px; +} +#newC #newCform label, #newC #newCform input { + padding: 10px 15px; + margin: 10px 0px; + outline: none; +} +#newC #newCform input { + color: aqua; + background-color: black; + font-size: 22px; + border-bottom: 3px solid #f20ed4; + border-radius: 12% 12%; +} +#newC #newCform button { + margin-right: 200px; + background-color: aqua; + color: #f20ed4; + font-size: 20px; + outline: none; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/dist/todo.css b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/dist/todo.css new file mode 100644 index 000000000..a6a021134 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/dist/todo.css @@ -0,0 +1,4 @@ +.mesi { + color: #0ef5f5; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/newc.scss b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/newc.scss new file mode 100644 index 000000000..875c0112d --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/newc.scss @@ -0,0 +1,46 @@ +$primaryback:linear-gradient(120deg,#2980b9, #8e44ad); +$pickcolor:rgb(194, 42, 174); +$bluecolor:rgb(104, 151, 240); +$aquacolor:rgb(14, 245, 245); +$overallpink:rgb(242, 14, 212); + +#newC{ +height: 70vh; +display: flex; +justify-content: center; + +#newCform{ +margin: 150px 0px; + + +label{ + color:$overallpink; + font-size: 24px; + +} + +label, input{ + padding: 10px 15px; + margin: 10px 0px; + outline: none; +} + +input{ +color: aqua; +background-color: black; +font-size: 22px; +border-bottom: 3px solid rgb(242, 14, 212); +border-radius: 12% 12%; +} + + +button{ + margin-right: 200px; + background-color: aqua; + color:rgb(242, 14, 212); + font-size: 20px; + outline: none; +} +} + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/todo.scss b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/todo.scss new file mode 100644 index 000000000..03e6da740 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/App-N&N/style/todo.scss @@ -0,0 +1,14 @@ +$primaryback:linear-gradient(120deg,#2980b9, #8e44ad); +$pickcolor:rgb(194, 42, 174); +$bluecolor:rgb(104, 151, 240); +$aquacolor:rgb(14, 245, 245); + + +.mesi{ +color: $aquacolor; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + + + + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/dist/index.js b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/dist/index.js new file mode 100644 index 000000000..9b2f88184 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/dist/index.js @@ -0,0 +1,109 @@ +var counter = 0; +var firstCard = ""; +var secondCard = ""; +var cards = document.getElementsByClassName('card'); +setInterval(function () { +}, 1000); +var cardsImg = [ + "./images/bibi.jpeg", + "./images/bibi.jpeg", + "./images/ahtibi.jpeg", + "./images/ahtibi.jpeg", + "./images/bengvir.jpeg", + "./images/bengvir.jpeg", + "./images/deri.jpeg", + "./images/deri.jpeg", + "./images/gantz.jpeg", + "./images/gantz.jpeg", + "./images/merav.jpeg", + "./images/merav.jpeg", + "./images/mirir.jpeg", + "./images/mirir.jpeg", + "./images/ylapid.jpeg", + "./images/ylapid.jpeg", +]; +function fixAllCards() { + var array = shuffle(cardsImg); + var click = null; + var _loop_1 = function (i) { + var img = document.createElement("img"); + img.src = array[i]; + img.style.display = "none"; + cards[i].appendChild(img); + cards[i].addEventListener("click", function () { + if (img.src == "./images/ylapid.jpeg") { + var audio = new Audio('./sound/lapid.mpeg'); + audio.play(); + } + if (img.src == "./images/mirir.jpeg") { + var audio = new Audio('./sound/miri.mpeg'); + audio.play(); + } + if (img.src == "./images/merav.jpeg") { + var audio = new Audio('./sound/merav.mpeg'); + audio.play(); + } + if (img.src == "./images/gantz.jpeg") { + var audio = new Audio('./sound/gantz.mpeg'); + audio.play(); + } + if (img.src == "./images/deri.jpeg") { + var audio = new Audio('./sound/deri.mpeg'); + audio.play(); + } + if (img.src == "./images/bengvir.jpeg") { + var audio = new Audio('./sound/bengvir.mpeg'); + audio.play(); + } + if (img.src == "./images/ahtibi.jpeg") { + var audio = new Audio('./sound/ahmed.mpeg'); + audio.play(); + } + if (img.src == "./images/bibi.jpeg") { + var audio = new Audio('./sound/bibi.mpeg'); + audio.play(); + } + if (click && img !== click) { + if (click.src == img.src) { + // if its success + var audio = new Audio('./sound/success.mp3'); + audio.play(); + img.style.display = "block"; + click.style.display = "block"; + click.parentElement.style.background = "red"; + cards[i].style.backgroundColor = "red"; + click = null; + } + // if not success + else { + var audio = new Audio('./sound/ohno.mp3'); + audio.play(); + img.style.display = "block"; + setTimeout(function () { + click.style.display = "none"; + img.style.display = "none"; + click = null; + }, 500); + } + } + else { + click = img; + img.style.display = "block"; + } + }); + }; + for (var i = 0; i < cards.length; i++) { + _loop_1(i); + } +} +function shuffle(array) { + var tmp, current, top = array.length; + if (top) + while (--top) { + current = Math.floor(Math.random() * (top + 1)); + tmp = array[current]; + array[current] = array[top]; + array[top] = tmp; + } + return array; +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/dist/style.css b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/dist/style.css new file mode 100644 index 000000000..0e44de591 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/dist/style.css @@ -0,0 +1,24 @@ +.wrapper { + display: grid; + place-items: center; + min-height: 100vh; +} +.wrapper .cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 2em; +} +.wrapper .cards .card { + height: 140px; + width: 140px; + background-color: dodgerblue; + border-radius: 10px; + cursor: pointer; + display: grid; + place-items: center; +} + +img { + width: 120px; + height: 120px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ahtibi.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ahtibi.jpeg new file mode 100644 index 000000000..f9d22f992 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ahtibi.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ahtibi2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ahtibi2.jpeg new file mode 100644 index 000000000..f9d22f992 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ahtibi2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bengvir.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bengvir.jpeg new file mode 100644 index 000000000..1b69d0eae Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bengvir.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bengvir2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bengvir2.jpeg new file mode 100644 index 000000000..1b69d0eae Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bengvir2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bibi.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bibi.jpeg new file mode 100644 index 000000000..9d84b65b5 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bibi.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bibi2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bibi2.jpeg new file mode 100644 index 000000000..9d84b65b5 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/bibi2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/deri.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/deri.jpeg new file mode 100644 index 000000000..8ee7e644c Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/deri.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/deri2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/deri2.jpeg new file mode 100644 index 000000000..8ee7e644c Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/deri2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/gantz.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/gantz.jpeg new file mode 100644 index 000000000..88988e592 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/gantz.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/gantz2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/gantz2.jpeg new file mode 100644 index 000000000..88988e592 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/gantz2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/merav.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/merav.jpeg new file mode 100644 index 000000000..de5f96fca Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/merav.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/merav2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/merav2.jpeg new file mode 100644 index 000000000..de5f96fca Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/merav2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/mirir.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/mirir.jpeg new file mode 100644 index 000000000..e9324ac61 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/mirir.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/mirir2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/mirir2.jpeg new file mode 100644 index 000000000..e9324ac61 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/mirir2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ylapid.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ylapid.jpeg new file mode 100644 index 000000000..266abb2d9 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ylapid.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ylapid2.jpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ylapid2.jpeg new file mode 100644 index 000000000..266abb2d9 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/images/ylapid2.jpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/index.html b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/index.html new file mode 100644 index 000000000..18829aa3b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/index.html @@ -0,0 +1,36 @@ + + + + + + + Document + + + +
                      +

                      Check Your Memory

                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      + +
                      +
                      + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/index.ts b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/index.ts new file mode 100644 index 000000000..d971db4fe --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/index.ts @@ -0,0 +1,117 @@ +let counter = 0; +let firstCard = ""; +let secondCard = ""; +let cards = document.getElementsByClassName('card')!as HTMLCollectionOf + +setInterval(()=>{ + +},1000) + + + +let cardsImg = [ + "./images/bibi.jpeg", + "./images/bibi.jpeg", + "./images/ahtibi.jpeg", + "./images/ahtibi.jpeg", + "./images/bengvir.jpeg", + "./images/bengvir.jpeg", + "./images/deri.jpeg", + "./images/deri.jpeg", + "./images/gantz.jpeg", + "./images/gantz.jpeg", + "./images/merav.jpeg", + "./images/merav.jpeg", + "./images/mirir.jpeg", + "./images/mirir.jpeg", + "./images/ylapid.jpeg", + "./images/ylapid.jpeg", +] +function fixAllCards(){ + let array = shuffle(cardsImg); + let click:null | HTMLImageElement =null; + + for(let i=0; i< cards.length;i++){ + let img = document.createElement("img")as HTMLImageElement; + img.src= array[i]; + img.style.display = "none"; + cards[i].appendChild(img); + cards[i].addEventListener("click", ()=>{ + if(img.src == "./images/ylapid.jpeg"){ + var audio = new Audio('./sound/lapid.mpeg'); + audio.play(); + + } + if(img.src == "./images/mirir.jpeg"){ + var audio = new Audio('./sound/miri.mpeg'); + audio.play(); + } + if(img.src == "./images/merav.jpeg"){ + var audio = new Audio('./sound/merav.mpeg'); + audio.play(); + } + if(img.src == "./images/gantz.jpeg"){ + var audio = new Audio('./sound/gantz.mpeg'); + audio.play(); + } + if(img.src == "./images/deri.jpeg"){ + var audio = new Audio('./sound/deri.mpeg'); + audio.play(); + } + if(img.src == "./images/bengvir.jpeg"){ + var audio = new Audio('./sound/bengvir.mpeg'); + audio.play(); + } + if(img.src == "./images/ahtibi.jpeg"){ + var audio = new Audio('./sound/ahmed.mpeg'); + audio.play(); + } + if(img.src == "./images/bibi.jpeg"){ + var audio = new Audio('./sound/bibi.mpeg'); + audio.play(); + } + + + if(click && img !== click ){ + if(click.src == img.src ){ + // if its success + var audio = new Audio('./sound/success.mp3'); + audio.play(); + img.style.display = "block"; + click.style.display = "block"; + click.parentElement!.style.background = "red" + cards[i].style.backgroundColor = "red"; + click = null; + } + // if not success + else { + var audio = new Audio('./sound/ohno.mp3'); + audio.play(); + img.style.display = "block"; + setTimeout(()=>{ + click!.style.display = "none" + img.style.display = "none"; + click = null; + },500) + } + } + else { + click = img; + img.style.display = "block"; + } + + }) + } +} + +function shuffle(array) { + var tmp, current, top = array.length; + if(top) while(--top) { + current = Math.floor(Math.random() * (top + 1)); + tmp = array[current]; + array[current] = array[top]; + array[top] = tmp; + } + return array; +} + diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/ahmed.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/ahmed.mpeg new file mode 100644 index 000000000..a803af377 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/ahmed.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bad-luck.mp3 b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bad-luck.mp3 new file mode 100644 index 000000000..a47993c25 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bad-luck.mp3 differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bengvir.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bengvir.mpeg new file mode 100644 index 000000000..c3ea5ef6d Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bengvir.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bibi.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bibi.mpeg new file mode 100644 index 000000000..d5ed2ab75 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/bibi.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/deri.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/deri.mpeg new file mode 100644 index 000000000..a2a0c231c Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/deri.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/gantz.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/gantz.mpeg new file mode 100644 index 000000000..77c869a14 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/gantz.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/lapid.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/lapid.mpeg new file mode 100644 index 000000000..a5ce9d189 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/lapid.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/merav.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/merav.mpeg new file mode 100644 index 000000000..1915c8903 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/merav.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/miri.mpeg b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/miri.mpeg new file mode 100644 index 000000000..b97cbc051 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/miri.mpeg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/ohno.mp3 b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/ohno.mp3 new file mode 100644 index 000000000..631c1b93e Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/ohno.mp3 differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/success.mp3 b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/success.mp3 new file mode 100644 index 000000000..68dad2d8a Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/sound/success.mp3 differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/style.scss b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/style.scss new file mode 100644 index 000000000..c1da8352e --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Itsik-B/Card_Game/style.scss @@ -0,0 +1,28 @@ +.wrapper{ + display: grid; + place-items: center; + min-height: 100vh; + + +.cards{ +display: grid; +grid-template-columns: repeat(4, 1fr); +grid-gap: 2em; + + +.card{ +height: 140px; +width: 140px; +background-color: dodgerblue; +border-radius: 10px; +cursor: pointer; +display: grid; +place-items: center; +} +} +} + +img{ + width: 120px; + height: 120px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/controls.ts b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/controls.ts new file mode 100644 index 000000000..c6e425969 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/controls.ts @@ -0,0 +1,60 @@ + +function enterToMainPage(ev: any){ + try { + ev.preventDefault() + console.log(ev); + const name = ev.target.elements.name.value; + const lastName = ev.target.elements.lastName.value; + const email = ev.target.elements.email.value; + users.push(new User(name, lastName, email)) + console.log("enterToMainPage Function Work"); + console.log(users); + ev.target.reset(); + + + + } catch (error) { + console.error(error) + + } + location.href = 'main.html' + +} + +function handleRecipeToArray(ev: any){ + try { + ev.preventDefault() + console.log(ev); + const category = ev.target.elements.category.value; + const name = ev.target.elements.name.value; + const ingredients = ev.target.elements.ingredients.value; + const preparation = ev.target.elements.preparation.value; + const image = ev.target.elements.image.value; + + recipes.push(new Recipe(category, name, ingredients,preparation,image)) + ev.target.reset(); + handleSaveRecipe() + console.log(recipes); + + } catch (error) { + console.error(error); + } +} + +function handleSaveUsers(){ + console.log('save users'); + localStorage.setItem('users',JSON.stringify(users)); + } +function handleSaveRecipe(){ + console.log('save recipe'); + localStorage.setItem('recipes',JSON.stringify(recipes)); + } + + function showName(){ + const mainHeader = document.querySelector(".mainHeader")! + console.log("showName function activated"); + const name = (JSON.parse(localStorage.getItem("users")!)) + mainHeader.textContent = `Welcome ${name[0].name} to Your Recipes page` +} + +showName() diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/controls.js b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/controls.js new file mode 100644 index 000000000..88b61c6b5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/controls.js @@ -0,0 +1,50 @@ +function enterToMainPage(ev) { + try { + ev.preventDefault(); + console.log(ev); + var name = ev.target.elements.name.value; + var lastName = ev.target.elements.lastName.value; + var email = ev.target.elements.email.value; + users.push(new User(name, lastName, email)); + console.log("enterToMainPage Function Work"); + console.log(users); + ev.target.reset(); + } + catch (error) { + console.error(error); + } + location.href = 'main.html'; +} +function handleRecipeToArray(ev) { + try { + ev.preventDefault(); + console.log(ev); + var category = ev.target.elements.category.value; + var name = ev.target.elements.name.value; + var ingredients = ev.target.elements.ingredients.value; + var preparation = ev.target.elements.preparation.value; + var image = ev.target.elements.image.value; + recipes.push(new Recipe(category, name, ingredients, preparation, image)); + ev.target.reset(); + handleSaveRecipe(); + console.log(recipes); + } + catch (error) { + console.error(error); + } +} +function handleSaveUsers() { + console.log('save users'); + localStorage.setItem('users', JSON.stringify(users)); +} +function handleSaveRecipe() { + console.log('save recipe'); + localStorage.setItem('recipes', JSON.stringify(recipes)); +} +function showName() { + var mainHeader = document.querySelector(".mainHeader"); + console.log("showName function activated"); + var name = (JSON.parse(localStorage.getItem("users"))); + mainHeader.textContent = "Welcome " + name[0].name + " to Your Recipes page"; +} +showName(); diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/helpers.js b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/helpers.js new file mode 100644 index 000000000..5390f36a9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/helpers.js @@ -0,0 +1,3 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/index.js b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/james-lee-Mfjq1hi-lVg-unsplash.jpg b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/james-lee-Mfjq1hi-lVg-unsplash.jpg new file mode 100644 index 000000000..ec50fa82a Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/james-lee-Mfjq1hi-lVg-unsplash.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/login.css b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/login.css new file mode 100644 index 000000000..efdc59932 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/login.css @@ -0,0 +1,32 @@ +html { + width: 100%; + height: 100%; + background-image: url(https://i.pinimg.com/564x/e6/7d/af/e67daf68a6e8f6d4a9283cb7d64b098c.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +body { + text-align: center; + color: #b2f608; +} +body .loginForm { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +body h1 { + position: absolute; + top: 35%; + left: 50%; + transform: translate(-50%, -50%); +} +body h3 { + position: absolute; + top: 43%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/main.css b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/main.css new file mode 100644 index 000000000..3fbdf723b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/main.css @@ -0,0 +1,73 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: #F2F2F2; + height: 100vh; +} + +.mainHeader { + margin-top: 20px; + font-size: 36px; + font-weight: bold; + text-align: center; +} + +.headDiv { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.headDiv a { + margin-right: 20px; +} + +h2 { + margin-top: 40px; + font-size: 24px; + text-align: center; +} + +.mainForm { + display: flex; + flex-direction: column; + align-items: center; + background-color: white; + padding: 40px; + border-radius: 10px; + box-shadow: 0px 0px 10px #BBBBBB; + margin-top: 40px; +} + +.mainForm label { + margin-top: 20px; + font-size: 18px; +} + +.mainForm select, .mainForm input[type=text], .mainForm input[type=url], .mainForm textarea { + width: 60%; + height: 40px; + font-size: 18px; + padding: 10px; + margin-top: 10px; + border-radius: 10px; + border: none; + box-shadow: 0px 0px 10px #BBBBBB; +} + +.mainForm input[type=submit] { + width: 60%; + height: 40px; + font-size: 18px; + margin-top: 20px; + border-radius: 10px; + border: none; + background-color: #4CAF50; + color: white; + cursor: pointer; +} + +.mainForm input[type=submit]:hover { + background-color: #3E8E41; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/model.js b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/model.js new file mode 100644 index 000000000..a7274f265 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/model.js @@ -0,0 +1,23 @@ +var User = /** @class */ (function () { + function User(name, lastName, email) { + this.name = name; + this.lastName = lastName; + this.email = email; + this.uid = uid(); + } + return User; +}()); +var users = []; +var Recipe = /** @class */ (function () { + function Recipe(sort, name, ingredients, preparation, image, user) { + this.sort = sort; + this.name = name; + this.ingredients = ingredients; + this.preparation = preparation; + this.image = image; + this.user = user; + this.uid = uid(); + } + return Recipe; +}()); +var recipes = []; diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/second.css b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/second.css new file mode 100644 index 000000000..979f631db --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/second.css @@ -0,0 +1,125 @@ +body { + font-family: Arial, sans-serif; + padding: 30px; +} + +.myRecipe { + text-align: center; + margin-bottom: 50px; +} + +.item { + background-color: #f2f2f2; + padding: 20px; + margin-bottom: 30px; + border-radius: 10px; + box-shadow: 0px 0px 10px #ccc; +} + +.item h3 { + margin-bottom: 10px; +} + +.item div { + margin-bottom: 10px; +} + +.item img { + width: 100%; + height: auto; + margin-bottom: 10px; +} + +button { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + float: right; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +.topnav { + overflow: hidden; + background-color: #e9e9e9; +} + +.topnav a { + float: left; + display: block; + color: black; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topnav a:hover { + background-color: #ddd; + color: black; +} + +.topnav a.active { + background-color: #2196F3; + color: white; +} + +.topnav .search-container { + float: right; +} + +.topnav input[type=text] { + padding: 6px; + margin-top: 8px; + font-size: 17px; + border: none; +} + +.topnav .search-container button { + float: right; + padding: 6px 10px; + margin-top: 8px; + margin-right: 16px; + background: #ddd; + font-size: 17px; + border: none; + cursor: pointer; +} + +.topnav .search-container button:hover { + background: #ccc; +} + +@media screen and (max-width: 600px) { + .topnav .search-container { + float: none; + } + + .topnav a, .topnav input[type=text], .topnav .search-container button { + float: none; + display: block; + text-align: left; + width: 100%; + margin: 0; + padding: 14px; + } + + .topnav input[type=text] { + border: 1px solid #ccc; + } +} +.searchBtn { + width: 30px; + height: 20px; + background: none; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/view.js b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/view.js new file mode 100644 index 000000000..37aa0248c --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/view.js @@ -0,0 +1,17 @@ +var mainHeader = document.querySelector(".mainHeader"); +// function showName(){ +// console.log("showName function activated"); +// const name = (JSON.parse(localStorage.getItem("users")!)) +// console.log(name); +// mainHeader.textContent = `Welcome ${name[0].name} to Your Recipes page` +// } +// showName() +// function showMyRecipe(){ +// // ev.preventDefault() +// console.log("showMyRecipes function activated"); +// location.href = 'second.html' +// const myRecipeHead = document.querySelector(".myRecipe") as HTMLElement +// console.log(myRecipeHead); +// console.log(mainHeader); +// // myRecipeHead.textContent = "Hello you have new recipes" +// } diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/view2.js b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/view2.js new file mode 100644 index 000000000..6e39a3854 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/dist/view2.js @@ -0,0 +1,72 @@ +var itemsRoot = document.querySelector("#itemsRoot"); +function showMyRecipe() { + console.log("showMyRecipes function activated"); + var name = (JSON.parse(localStorage.getItem("users"))); + var myRecipeHead = document.querySelector(".myRecipe"); + myRecipeHead.textContent = name[0].name + " recipe page"; +} +showMyRecipe(); +var showRecipe = (JSON.parse(localStorage.getItem("recipes"))); +console.log(showRecipe); +function renderItems(showRecipe, renderElementId) { + console.log("Reneder Function activated"); + try { + if (!showRecipe || !Array.isArray(showRecipe)) + throw new Error("items is not an array"); + var html = showRecipe.map(function (showRecipe) { + console.log("---" + showRecipe.uid + "---"); + return "\n
                      \n

                      " + showRecipe.name + "

                      \n
                      Sort: " + showRecipe.sort + "
                      \n
                      Name: " + showRecipe.name + "
                      \n
                      Ingredients: " + showRecipe.ingredients + "
                      \n
                      How to Make: " + showRecipe.preparation + "
                      \n
                      \"recipe
                      \n\n \n
                      \n "; + }) + .join(" "); + console.log(showRecipe[0].name + "line 42"); + var element = document.querySelector("#" + renderElementId); + if (!element) + throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } + catch (error) { + console.error(error); + } +} +renderItems(showRecipe, "itemsRoot"); +// function handleDeleteItem(uid: string, ) { +// console.log("Delete function activated"); +// console.log(showRecipe); +// try { +// console.log(uid); +// // const index = showRecipe.findIndex((showRecipe) => showRecipe.uid === uid); +// // console.log(index); +// // console.log("my new recipe" + showRecipe); +// const index = showRecipe.findIndex((recipe) => { +// console.log(recipe.uid, uid); +// return recipe.uid === uid; +// }); +// console.log(index); +// if (index === -1) throw new Error("recipe not found"); +// showRecipe.splice(index, 1); +// if (!itemsRoot) throw new Error("ItemRoot is undefined"); +// renderItems(showRecipe, "itemsRoot"); +// // localStorage.setItem("items", JSON.stringify(items)) +// } catch (error) { +// console.error(error); +// } +// } +function handleDeleteItem(uid) { + console.log("Delete function activated"); + try { + console.log(uid); + var index = showRecipe.findIndex(function (showRecipe) { return showRecipe.uid === uid; }); + console.log(index); + console.log("my new recipe" + showRecipe); + if (index === -1) + throw new Error("Recipe with specified uid not found"); + showRecipe.splice(index, 1); + if (!itemsRoot) + throw new Error("ItemRoot is undefined"); + renderItems(showRecipe, "itemsRoot"); + localStorage.removeItem("recipe_" + uid); + } + catch (error) { + console.error(error); + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/helpers.ts b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/helpers.ts new file mode 100644 index 000000000..95191593b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/helpers.ts @@ -0,0 +1,4 @@ +function uid() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/index.ts b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/login.html b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/login.html new file mode 100644 index 000000000..6557412cc --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/login.html @@ -0,0 +1,27 @@ + + + + + + + Log in + + + + + + + + + +

                      Welcome to Your Favorite recipes

                      +

                      Please Log in

                      +
                      + + +
                      + +
                      + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/login.scss b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/login.scss new file mode 100644 index 000000000..59e7b2f5d --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/login.scss @@ -0,0 +1,34 @@ +html{ + width: 100%; + height: 100%; + background-image: url(https://i.pinimg.com/564x/e6/7d/af/e67daf68a6e8f6d4a9283cb7d64b098c.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + ; +} +body{ + text-align: center; + + color: rgb(178, 246, 8); + .loginForm { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + h1{ + position: absolute; + top: 35%; + left: 50%; + transform: translate(-50%, -50%); + } + h3{ + position: absolute; + top: 43%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + } + +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/main.html b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/main.html new file mode 100644 index 000000000..f9d2a1875 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/main.html @@ -0,0 +1,41 @@ + + + + + + + Main + + + + + + + + +

                      +
                      + + + +
                      +

                      Here you can Add your favorite recipe

                      +
                      + +
                      + +
                      + +
                      + +
                      + +
                      + +
                      + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/main.scss b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/main.scss new file mode 100644 index 000000000..9e984126f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/main.scss @@ -0,0 +1,73 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: #F2F2F2; + height: 100vh; + } + + .mainHeader { + margin-top: 20px; + font-size: 36px; + font-weight: bold; + text-align: center; + } + + .headDiv { + display: flex; + justify-content: center; + margin-top: 20px; + } + + .headDiv a { + margin-right: 20px; + } + + h2 { + margin-top: 40px; + font-size: 24px; + text-align: center; + } + + .mainForm { + display: flex; + flex-direction: column; + align-items: center; + background-color: white; + padding: 40px; + border-radius: 10px; + box-shadow: 0px 0px 10px #BBBBBB; + margin-top: 40px; + } + + .mainForm label { + margin-top: 20px; + font-size: 18px; + } + + .mainForm select, .mainForm input[type="text"], .mainForm input[type="url"], .mainForm textarea { + width: 60%; + height: 40px; + font-size: 18px; + padding: 10px; + margin-top: 10px; + border-radius: 10px; + border: none; + box-shadow: 0px 0px 10px #BBBBBB; + } + + .mainForm input[type="submit"] { + width: 60%; + height: 40px; + font-size: 18px; + margin-top: 20px; + border-radius: 10px; + border: none; + background-color: #4CAF50; + color: white; + cursor: pointer; + } + + .mainForm input[type="submit"]:hover { + background-color: #3E8E41; + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/model.ts b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/model.ts new file mode 100644 index 000000000..6b132e00b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/model.ts @@ -0,0 +1,28 @@ +class User { + + uid: string; + + constructor( + public name: string, + public lastName: string, + public email: number, + ) { + this.uid = uid(); + } + } + const users:User[] = []; + +class Recipe { + uid: string; + constructor( + public sort: string, + public name: string, + public ingredients: string, + public preparation: string, + public image: string, + public user?: string, + ) { + this.uid = uid(); + } + } +const recipes:Recipe[] = [] diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/second.html b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/second.html new file mode 100644 index 000000000..7e36b9731 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/second.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + Personal Area + +
                      + Main + About + Change user +
                      +
                      + + +
                      +
                      +
                      + +

                      +
                      + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/second.scss b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/second.scss new file mode 100644 index 000000000..dc062dd7c --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/second.scss @@ -0,0 +1,126 @@ +body { + font-family: Arial, sans-serif; + padding: 30px; + } + + .myRecipe { + text-align: center; + margin-bottom: 50px; + } + + .item { + background-color: #f2f2f2; + padding: 20px; + margin-bottom: 30px; + border-radius: 10px; + box-shadow: 0px 0px 10px #ccc; + } + + .item h3 { + margin-bottom: 10px; + } + + .item div { + margin-bottom: 10px; + } + + .item img { + width: 100%; + height: auto; + margin-bottom: 10px; + } + + button { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + float: right; + } + + + + + + + * {box-sizing: border-box;} + + body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + + .topnav { + overflow: hidden; + background-color: #e9e9e9; + } + + .topnav a { + float: left; + display: block; + color: black; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + .topnav a:hover { + background-color: #ddd; + color: black; + } + + .topnav a.active { + background-color: #2196F3; + color: white; + } + + .topnav .search-container { + float: right; + } + + .topnav input[type=text] { + padding: 6px; + margin-top: 8px; + font-size: 17px; + border: none; + } + + .topnav .search-container button { + float: right; + padding: 6px 10px; + margin-top: 8px; + margin-right: 16px; + background: #ddd; + font-size: 17px; + border: none; + cursor: pointer; + } + + .topnav .search-container button:hover { + background: #ccc; + } + + @media screen and (max-width: 600px) { + .topnav .search-container { + float: none; + } + .topnav a, .topnav input[type=text], .topnav .search-container button { + float: none; + display: block; + text-align: left; + width: 100%; + margin: 0; + padding: 14px; + } + .topnav input[type=text] { + border: 1px solid #ccc; + } + } + .searchBtn{ + width: 30px; + height: 20px; + background: none; + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/view.ts b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/view.ts new file mode 100644 index 000000000..02b9706d3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/view.ts @@ -0,0 +1,26 @@ +const mainHeader = document.querySelector(".mainHeader")! + +// function showName(){ +// console.log("showName function activated"); +// const name = (JSON.parse(localStorage.getItem("users")!)) + +// console.log(name); + +// mainHeader.textContent = `Welcome ${name[0].name} to Your Recipes page` +// } + +// showName() + +// function showMyRecipe(){ + +// // ev.preventDefault() +// console.log("showMyRecipes function activated"); +// location.href = 'second.html' + +// const myRecipeHead = document.querySelector(".myRecipe") as HTMLElement +// console.log(myRecipeHead); +// console.log(mainHeader); + + +// // myRecipeHead.textContent = "Hello you have new recipes" +// } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/view2.ts b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/view2.ts new file mode 100644 index 000000000..8d0828663 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Maxim Rozenberg/view2.ts @@ -0,0 +1,106 @@ +const itemsRoot = document.querySelector("#itemsRoot"); + +function showMyRecipe(){ + + + console.log("showMyRecipes function activated"); + + const name = (JSON.parse(localStorage.getItem("users")!)) + + const myRecipeHead = document.querySelector(".myRecipe") as HTMLElement + myRecipeHead.textContent = `${name[0].name} recipe page` + + + +} +showMyRecipe() + + +const showRecipe = (JSON.parse(localStorage.getItem("recipes")!)) +console.log(showRecipe); + +function renderItems(showRecipe: Recipe[], renderElementId: string): void { + console.log("Reneder Function activated"); + + try { + if (!showRecipe || !Array.isArray(showRecipe)) + throw new Error("items is not an array"); + + + const html = showRecipe.map((showRecipe) => { + console.log(`---${showRecipe.uid}---`); + return ` +
                      +

                      ${showRecipe.name}

                      +
                      Sort: ${showRecipe.sort}
                      +
                      Name: ${showRecipe.name}
                      +
                      Ingredients: ${showRecipe.ingredients}
                      +
                      How to Make: ${showRecipe.preparation}
                      +
                      recipe img
                      + + +
                      + `; + }) + .join(" "); + console.log(showRecipe[0].name + "line 42"); + const element = document.querySelector(`#${renderElementId}`); + if (!element) throw new Error("Couldnt find element in the DOM"); + element.innerHTML = html; + } catch (error) { + console.error(error); + } + + } + +renderItems(showRecipe, "itemsRoot") + + +// function handleDeleteItem(uid: string, ) { +// console.log("Delete function activated"); +// console.log(showRecipe); +// try { +// console.log(uid); +// // const index = showRecipe.findIndex((showRecipe) => showRecipe.uid === uid); +// // console.log(index); +// // console.log("my new recipe" + showRecipe); +// const index = showRecipe.findIndex((recipe) => { +// console.log(recipe.uid, uid); +// return recipe.uid === uid; +// }); +// console.log(index); + + +// if (index === -1) throw new Error("recipe not found"); +// showRecipe.splice(index, 1); + +// if (!itemsRoot) throw new Error("ItemRoot is undefined"); +// renderItems(showRecipe, "itemsRoot"); +// // localStorage.setItem("items", JSON.stringify(items)) +// } catch (error) { +// console.error(error); +// } + +// } + + + function handleDeleteItem(uid: string) { + console.log("Delete function activated"); + + try { + console.log(uid); + const index = showRecipe.findIndex((showRecipe) => showRecipe.uid === uid); + console.log(index); + console.log("my new recipe" + showRecipe); + + if (index === -1) throw new Error("Recipe with specified uid not found"); + showRecipe.splice(index, 1); + + if (!itemsRoot) throw new Error("ItemRoot is undefined"); + renderItems(showRecipe, "itemsRoot"); + localStorage.removeItem("recipe_" + uid); + } catch (error) { + console.error(error); + } + + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/1.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/1.jpg new file mode 100644 index 000000000..89e665e38 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/1.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/10.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/10.jpg new file mode 100644 index 000000000..31a5bcbeb Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/10.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/2.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/2.jpg new file mode 100644 index 000000000..a6cd37bf4 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/2.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/3.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/3.jpg new file mode 100644 index 000000000..6f10a1091 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/3.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/4.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/4.jpg new file mode 100644 index 000000000..28da4aa9f Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/4.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/5.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/5.jpg new file mode 100644 index 000000000..77d9c273f Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/5.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/6.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/6.jpg new file mode 100644 index 000000000..3c3236a94 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/6.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/7.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/7.jpg new file mode 100644 index 000000000..6e7a8cf4d Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/7.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/8.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/8.jpg new file mode 100644 index 000000000..b1a3527ca Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/8.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/9.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/9.jpg new file mode 100644 index 000000000..7d78b4bc9 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/9.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/movie-theater.jpg b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/movie-theater.jpg new file mode 100644 index 000000000..271a9a8b9 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/movie-theater.jpg differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/ticket.png b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/ticket.png new file mode 100644 index 000000000..012d19752 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/images/ticket.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/controller.js b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/controller.js new file mode 100644 index 000000000..bedeef9ae --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/controller.js @@ -0,0 +1,18 @@ +if (!allUsersString) { + var emptyArray = []; + localStorage.setItem('allUsers', JSON.stringify(emptyArray)); +} +var moviesString = localStorage.getItem('movies'); +var moviesSeatsString = localStorage.getItem('moviesSeats'); +if (!moviesString && !moviesSeatsString) { + var emptyMoviesArray = []; + var emptyMoviesSeatsArray = []; + for (var id = 1; id <= 10; id++) { + var movie = new Movie('Movie Name', id, "../public/images/" + id + ".jpg", "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dicta at officia facilis eligendi maiores, aperiam expedita nemo cumque, sequi explicabo. Quaerat nisi porro pariatur vitae, earum facilis obcaecati minus?", 'none'); + var movieSeats = new MovieSeats(id, 48); + emptyMoviesArray.push(movie); + emptyMoviesSeatsArray.push(movieSeats); + localStorage.setItem('movies', JSON.stringify(emptyMoviesArray)); + localStorage.setItem('moviesSeats', JSON.stringify(emptyMoviesSeatsArray)); + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/index.js b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/index.js new file mode 100644 index 000000000..fc22f7775 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/index.js @@ -0,0 +1,186 @@ +function renderMovies() { + try { + if (isLoggedIn) { + if (isLoggedIn == true) { + var moviesContainer = document.querySelector('.main__moviesContainer'); + if (moviesContainer) { + var moviesString = localStorage.getItem('movies'); + if (moviesString) { + var moviesArray = JSON.parse(moviesString); + if (moviesArray) { + for (var i = 0; i < moviesArray.length; i++) { + var movieDivs = "
                      \n
                      \n

                      " + moviesArray[i].name + "

                      \n \n

                      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dicta at officia facilis eligendi maiores, aperiam expedita nemo cumque, sequi explicabo. Quaerat nisi porro pariatur vitae, earum facilis obcaecati minus?

                      \n
                      \n \n
                      "; + moviesContainer.insertAdjacentHTML('beforeend', movieDivs); + } + } + } + } + } + else { + location.href = 'login.html'; + } + } + else { + location.href = 'login.html'; + } + var logoutButton = document.querySelector('#logoutBtn'); + logoutButton === null || logoutButton === void 0 ? void 0 : logoutButton.addEventListener('click', function (e) { + localStorage.removeItem('isLoggedIn'); + location.href = 'login.html'; + }); + } + catch (error) { + console.error(error); + } +} +function renderUsername() { + var usernameHtml = document.querySelector('.username'); + var usernameString = localStorage.getItem('isLoggedIn'); + if (usernameHtml && usernameString) { + var username = JSON.parse(usernameString); + usernameHtml.innerHTML = "

                      Welcome: " + username['username'] + "

                      "; + } +} +function showMovieSeats(id) { + var moviesContainer = document.querySelector(".main__moviesContainer"); + var main = document.querySelector(".main"); + var moviesString = localStorage.getItem('movies'); + var seatStatus = ''; + if (moviesContainer && main && moviesString) { + var movies = JSON.parse(moviesString); + moviesContainer.style.display = 'none'; + var seatsString = localStorage.getItem('moviesSeats'); + if (seatsString) { + var seats = JSON.parse(seatsString); + var seatsId = seats[id - 1]; + var seatsDiv = '
                      '; + var seatIndex = 0; + // console.log(seatsId) + var seatsRows = (seatsId['seatsArray'].length - 1) / 8; + for (var k = 1; k <= seatsRows; k++) { + seatsDiv += '
                      '; + for (var i = 1; i <= (seatsId['seatsArray'].length - 1) / 6; i++) { + seatIndex += 1; + if (seatsId['seatsArray'][seatIndex]['isFree'] == false) { + seatStatus = 'occupied'; + } + else { + seatStatus = ''; + } + seatsDiv += "
                      "; + } + seatsDiv += '
                      '; + } + seatsDiv += '
                      '; + main.style.flexDirection = 'column'; + main.insertAdjacentHTML('beforebegin', "

                      " + movies[id - 1].name + "

                      " + movies[id - 1].description + "

                      "); + main.insertAdjacentHTML('afterbegin', seatsDiv); + main.insertAdjacentHTML('afterbegin', '
                      • Available
                      • Selected
                      • Occupied
                      '); + } + } +} +function chooseSeats(info) { + var seatNumber = parseInt((info.split(':'))[1]); + var seatIdString = "" + info; + var movieIdIndex = (info.split(':'))[0] - 1; + var seatId = document.getElementById(seatIdString); + var moviesSeatsIdString = localStorage.getItem('moviesSeats'); + var userIndex = null; + var allUsersString = localStorage.getItem('allUsers'); + var userMovieId = false; + if (moviesSeatsIdString && allUsersString) { + var moviesSeatsIdObject = JSON.parse(moviesSeatsIdString); + if (seatId && moviesSeatsIdObject) { + var allUsersObject = JSON.parse(allUsersString); + for (var i in allUsersObject) { + if (allUsersObject[i].username.toLowerCase() == loggedInUser.toLowerCase()) { + userIndex = parseInt(i); + } + } + var movieId = (moviesSeatsIdObject[movieIdIndex])['id']; + // console.log(movieId['seatsArray'][seatNumber]) + if (userIndex != null) { + var userMovies = allUsersObject[userIndex]['movies']; + for (var i = 0; i < userMovies.length; i++) { + if (userMovies[i]['movieId'] == movieId) { + userMovieId = true; + } + } + if (!userMovieId) { + var movieObject = { 'movieId': "" + movieId, 'seatNumber': [] }; + userMovies.push(movieObject); + } + for (var i = 0; i < userMovies.length; i++) { + if (parseInt(userMovies[i]['movieId']) == movieId) { + if (!(userMovies[i]['seatNumber']).includes(seatNumber)) { + userMovies[i]['seatNumber'].push(seatNumber); + localStorage.setItem('allUsers', JSON.stringify(allUsersObject)); + } + } + } + } + // if (movieId[(info.split(':'))[1]] ){ + // } + // if(moviesSeatsIdObject) + var movieSeatsArray = moviesSeatsIdObject[movieIdIndex]['seatsArray']; + if (movieSeatsArray[seatNumber]['isFree']) { + movieSeatsArray[seatNumber]['isFree'] = false; + localStorage.setItem('moviesSeats', JSON.stringify(moviesSeatsIdObject)); + seatId.style.backgroundColor = '#2ecc71'; + } + // for () + } + } +} +function isAdmin() { + if (allUsersString) { + var allUsersObject = JSON.parse(allUsersString); + console.log(allUsersObject); + for (var i = 0; i < allUsersObject.length; i++) { + if (allUsersObject[i].username == loggedInUser && allUsersObject[i].isAdmin == true) { + var goHome = document.querySelector('#goHome'); + if (goHome) { + goHome.insertAdjacentHTML('afterend', ''); + } + break; + } + } + } +} +function addNewMovieContainer() { + var moviesContainer = document.querySelector('.moviesContainer'); + if (moviesContainer) { + moviesContainer.insertAdjacentHTML('beforebegin', '

                      Add New Movie

                      '); + } + var addNewMovieContainer = document.querySelector('.addNewMovieContainer'); + var closeAddMovie = document.querySelector('.closeAddMovie'); + if (addNewMovieContainer && closeAddMovie) { + closeAddMovie.addEventListener('click', function (e) { + addNewMovieContainer.remove(); + }); + } +} +function addNewMovie(info) { + info.preventDefault(); + var newMovieName = info.target.elements.name.value; + var newMovieImage = info.target.elements.image.value; + var newMoviecategory = info.target.elements.category.value; + var moviesString = localStorage.getItem('movies'); + var moviesSeatsString = localStorage.getItem('moviesSeats'); + if (moviesString && moviesSeatsString) { + var movies = JSON.parse(moviesString); + var moviesSeats = JSON.parse(moviesSeatsString); + var id = movies.length + 1; + var movie = new Movie(newMovieName, id, newMovieImage, "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dicta at officia facilis eligendi maiores, aperiam expedita nemo cumque, sequi explicabo. Quaerat nisi porro pariatur vitae, earum facilis obcaecati minus?", newMoviecategory); + var newMovieSeats = new MovieSeats(id, 48); + movies.push(movie); + moviesSeats.push(newMovieSeats); + localStorage.setItem('movies', JSON.stringify(movies)); + localStorage.setItem('moviesSeats', JSON.stringify(moviesSeats)); + renderMovies(); + location.href = 'index.html'; + } +} +isAdmin(); +renderMovies(); +renderUsername(); diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/login.js b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/login.js new file mode 100644 index 000000000..dd4f15d44 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/login.js @@ -0,0 +1,29 @@ +function loginHandler(e) { + e.preventDefault(); + var allUsersString = localStorage.getItem('allUsers'); + var username = e.target.elements.username.value; + var password = e.target.elements.password.value; + var passwordInput = document.querySelector("#password"); + var popMessage = document.querySelector('#loginPopMessage'); + localStorage.setItem('isLoggedIn', 'false'); + if (allUsersString) { + var allUsersArray = JSON.parse(allUsersString); + var foundUser_1 = false; + if (username && password) { + allUsersArray.forEach(function (user) { + if (user.username.toLowerCase() === username.toLowerCase() && user.password === password) { + console.log("okay"); + foundUser_1 = true; + var isLoggedInString = "{\"isLoggedIn\":true,\"username\":\"" + user.username + "\"}"; + localStorage.setItem('isLoggedIn', isLoggedInString); + location.href = 'index.html'; + } + }); + if (!foundUser_1) { + if (passwordInput && !popMessage) { + passwordInput.insertAdjacentHTML("afterend", "Username don't exists or wrong password!"); + } + } + } + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/model.js b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/model.js new file mode 100644 index 000000000..e083d18d3 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/model.js @@ -0,0 +1,42 @@ +var User = /** @class */ (function () { + function User(username, password) { + this.username = username; + this.password = password; + this.movies = []; + this.isAdmin = this.isNikita(username); + } + User.prototype.isNikita = function (username) { + if (username.toLowerCase() == 'nikita') { + return true; + } + else { + return false; + } + }; + return User; +}()); +var Movie = /** @class */ (function () { + function Movie(name, id, image, description, category) { + this.name = name; + this.id = id; + this.image = image; + this.description = description; + this.category = category; + } + return Movie; +}()); +var MovieSeats = /** @class */ (function () { + function MovieSeats(id, seats) { + this.id = id; + this.seatsArray = this.seatsCount(seats); + } + MovieSeats.prototype.seatsCount = function (seats) { + var seatsArray = [{}]; + for (var i = 1; i <= seats; i++) { + var seatObject = { seatNumber: i, selectedBy: '', isFree: true }; + seatsArray.push(seatObject); + } + return seatsArray; + }; + return MovieSeats; +}()); diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/register.js b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/register.js new file mode 100644 index 000000000..8c1f0fba2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/register.js @@ -0,0 +1,70 @@ +function registerHandler(e) { + e.preventDefault(); + var username = e.target.elements.username.value; + var password = e.target.elements.password.value; + var passwordConfirm = e.target.elements.passwordConfirm.value; + var passwordConfirmInput = document.querySelector("#passwordConfirm"); + var usernameInput = document.querySelector("#username"); + var popMessage = document.querySelector('#regitserPopMessage'); + if (username && password && passwordConfirm) { + if (password != passwordConfirm) { + if (passwordConfirmInput && !popMessage) { + passwordConfirmInput.insertAdjacentHTML("afterend", "Passwords don't match!"); + passwordConfirmInput.addEventListener("click", function (e) { + var popMessage = document.querySelector('#regitserPopMessage'); + if (popMessage) { + popMessage.remove(); + } + }); + var passwordInput = document.querySelector("#password"); + if (passwordInput) { + passwordInput.addEventListener("click", function (e) { + var popMessage = document.querySelector('#regitserPopMessage'); + if (popMessage) { + popMessage.remove(); + } + }); + } + } + return false; + } + else { + var allUsersStringRegister = localStorage.getItem('allUsers'); + if (allUsersStringRegister) { + if (allUsersStringRegister) { + var allUsersArray = JSON.parse(allUsersStringRegister); + if (allUsersArray.length > 0) { + var userExist_1 = false; + allUsersArray.forEach(function (user) { + if (user.username.toLowerCase() == username.toLowerCase()) { + if (passwordConfirmInput && !popMessage && usernameInput) { + passwordConfirmInput.insertAdjacentHTML("afterend", "This Username is already exists!"); + usernameInput.addEventListener("click", function (e) { + var popMessage = document.querySelector('#regitserPopMessage'); + if (popMessage) { + popMessage.remove(); + } + }); + } + userExist_1 = true; + return; + } + }); + if (!userExist_1) { + var newUser = new User(username, password); + allUsersArray.push(newUser); + localStorage.setItem('allUsers', JSON.stringify(allUsersArray)); + location.href = 'login.html'; + } + } + else { + var newUser = new User(username, password); + allUsersArray.push(newUser); + localStorage.setItem('allUsers', JSON.stringify(allUsersArray)); + location.href = 'login.html'; + } + } + } + } + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/views.js b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/views.js new file mode 100644 index 000000000..a86a3b0d8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/scripts/views.js @@ -0,0 +1,12 @@ +var allUsersString = localStorage.getItem('allUsers'); +var isLoggedInString = localStorage.getItem('isLoggedIn'); +var isLoggedIn = false; +var loggedInUser = ''; +if (isLoggedInString) { + var isLoggedInObject = JSON.parse(isLoggedInString); + isLoggedIn = isLoggedInObject['isLoggedIn']; + loggedInUser = isLoggedInObject['username']; +} +else { + isLoggedIn = false; +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/styles/style.css b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/styles/style.css new file mode 100644 index 000000000..d791f9440 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/public/styles/style.css @@ -0,0 +1,495 @@ +* { + color: black; +} + +html { + min-width: 100vw; + min-height: 100vh; +} + +body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + overflow-x: hidden; + overflow-y: hidden; + display: flex; + justify-content: space-between; + background-color: #10171B; +} + +.imageContainer { + width: 100vw; + height: 100vh; + background-size: cover; + z-index: -1; + background-image: url("../images/movie-theater.jpg"); +} + +.loginAndRegisterContainer { + background-color: white; + width: 30%; + min-width: 400px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.loginAndRegisterContainer h1 { + position: absolute; + top: 20px; + font-size: 60px; +} +.loginAndRegisterContainer .main { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 50px; + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5); + width: 100%; + height: 450px; + border: 3px; + gap: 20px; + left: 100px; +} +.loginAndRegisterContainer .main h2 { + padding: 0; + margin: 0; + font-size: 50px; +} +.loginAndRegisterContainer .main a { + all: unset; + cursor: pointer; + text-decoration: underline; +} +.loginAndRegisterContainer .main form { + width: 100%; + height: 250px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 25px; +} +.loginAndRegisterContainer .main form input { + height: 40px; + width: 260px; + font-size: 20px; + border-radius: 10px; + border: none; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); +} +.loginAndRegisterContainer .main form #regitserPopMessage { + position: absolute; + bottom: 130px; + padding: 0; + margin: 0; + color: red; +} +.loginAndRegisterContainer .main form #loginPopMessage { + position: absolute; + bottom: 165px; + padding: 0; + margin: 0; + color: red; +} +.loginAndRegisterContainer .main form #submitBtn { + box-shadow: none; + width: 150px; + height: 45px; + transition: 500ms; + backface-visibility: hidden; + margin-top: 10px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + background: linear-gradient(180deg, #f9f9f9 0%, #e0e0e0 100%); + border-radius: 50px; + padding: 4px 22px 5px 22px; + color: black; + font-size: 18px; + border: 1px solid #7F594A; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + font-weight: 900; + font-style: normal; +} +.loginAndRegisterContainer .main form #submitBtn:hover { + background: #B4AAA1; + border: 1px solid white; +} + +.navBar { + width: 100%; + height: 60px; + background-color: #31211F; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + z-index: 1; +} +.navBar__icons { + width: 100%; + width: 1546px; + height: 60px; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; +} +.navBar__icons__menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 80px; + height: 100%; +} +.navBar__icons__menu__container { + display: none; + flex-direction: column; + width: auto; + height: auto; + position: absolute; + left: -10px; + top: 60px; + background-color: #31211F; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + padding: 12px 16px; + z-index: 1; + gap: 20px; +} +.navBar__icons__menu:hover .navBar__icons__menu__container { + display: flex; +} +.navBar__icons h1 { + font-size: 30px; + color: white; + margin-left: 20px; +} +.navBar__icons button { + box-shadow: none; + width: 80px; + height: 30px; + transition: 500ms; + backface-visibility: hidden; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + background: linear-gradient(180deg, #f9f9f9 0%, #e0e0e0 100%); + border-radius: 10px; + color: black; + font-size: 14px; + border: 1px solid #7F594A; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + font-weight: 900; + font-style: normal; +} +.navBar__icons button:hover { + background: #B4AAA1; + border: 1px solid white; +} +.navBar__icons #addNewMovie { + width: 150px; +} + +.moviesContainer { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(rgba(0, 0, 0, 0.5), #10171b), url("../images/movie-theater.jpg"); + background-size: cover; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + gap: 60px; + overflow-y: auto; +} +.moviesContainer .username { + margin-top: 100px; + color: white; + width: auto; + height: 100px; + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5); + border-radius: 30px; + display: flex; + justify-content: center; + align-items: center; + background-color: #222f3889; +} +.moviesContainer .username p { + margin-left: 10px; + margin-right: 10px; + color: white; + font-size: 30px; +} +.moviesContainer .main { + position: relative; + width: 100%; + height: auto; + display: flex; + justify-content: center; + align-items: center; +} +.moviesContainer .main__moviesContainer { + position: relative; + width: 1546px; + height: auto; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 10px; +} +.moviesContainer .main__moviesContainer__movie { + position: relative; + width: 300px; + height: 373px; + object-fit: cover; +} +.moviesContainer .main__moviesContainer__movie__details { + position: absolute; + display: none; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + justify-content: space-between; + align-items: center; + flex-direction: column; +} +.moviesContainer .main__moviesContainer__movie__details button { + box-shadow: none; + width: 120px; + height: 45px; + transition: 500ms; + backface-visibility: hidden; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + background: linear-gradient(180deg, #f9f9f9 0%, #e0e0e0 100%); + border-radius: 10px; + color: black; + font-size: 18px; + border: 1px solid #7F594A; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + font-weight: 900; + font-style: normal; +} +.moviesContainer .main__moviesContainer__movie__details button:hover { + transition: 500ms; + background: #B4AAA1; + border: 1px solid white; +} +.moviesContainer .main__moviesContainer__movie__details h1 { + margin-left: 10px; + color: white; +} +.moviesContainer .main__moviesContainer__movie__details p { + margin-left: 10px; + color: white; +} +.moviesContainer .main__moviesContainer__movie img { + width: 100%; + height: 100%; +} +.moviesContainer .main__moviesContainer__movie:hover .main__moviesContainer__movie__details { + display: flex; +} +.moviesContainer .footer { + position: relative; + display: flex; + align-items: center; + width: 100%; + height: 40px; + background-color: #31211F; + z-index: 1; +} +.moviesContainer .footer p { + margin-left: 20px; + color: #b2aaaa; +} + +@media only screen and (max-width: 1540px) { + .navBar__icons { + max-width: 1250px; + } +} +@media only screen and (max-width: 1225px) { + .navBar__icons { + max-width: 935px; + } +} +@media only screen and (max-width: 936px) { + .navBar__icons { + max-width: 625px; + } +} +.SeatsContainer { + perspective: 1000px; + width: 600px; + height: 400px; + margin-bottom: 3px; + display: flex; + align-items: center; + flex-direction: column; + border-radius: 10px; + box-shadow: 0px 0px 30px 0px black; + /* Selects the second row f*/ +} +.SeatsContainer__seat { + background-color: #7f594a; + height: 36px; + width: 45px; + margin: 9px; + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} +.SeatsContainer__seat:hover { + background-color: #a2a2a2; +} +.SeatsContainer__seat.selected { + background-color: #2ecc71; +} +.SeatsContainer__seat.occupied { + background-color: #fff; +} +.SeatsContainer__seat:nth-of-type(2) { + margin-right: 54px; +} +.SeatsContainer__seat:nth-last-of-type(2) { + margin-left: 54px; +} +.SeatsContainer__seat:not(.occupied) { + cursor: pointer; + transform: scale(1.1); +} +.SeatsContainer__row { + display: flex; +} +.SeatsContainer__screen { + background-color: #fff; + height: 70px; + width: 94%; + margin-bottom: 20px; + margin-top: 5px; + transform: rotateX(-45deg); + box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7); +} + +.showcase .SeatsContainer__seat:not(.occupied) { + cursor: default; + transform: scale(1); +} + +.showcase { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 30px 0px black; + padding: 5px 10px; + border-radius: 10px; + color: white; + list-style-type: none; + display: flex; + justify-content: space-between; +} + +.showcase li { + display: flex; + align-items: center; + justify-content: center; + margin: 0 10px; +} + +.showcase li small { + margin-left: 2px; + color: white; +} + +p.text { + margin: 5px 0; +} + +p.text span { + color: #6feaf6; +} + +.movieShowcase { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + width: 100%; +} +.movieShowcase img { + max-width: 500px; + max-height: 721px; +} +.movieShowcase h1 { + color: white; +} +.movieShowcase p { + width: 480px; + color: white; + font-size: 20px; +} + +.addNewMovieContainer { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + display: flex; + align-items: center; + justify-content: center; +} +.addNewMovieContainer .closeAddMovie { + position: absolute; + width: 100%; + height: 100%; + z-index: 3; +} +.addNewMovieContainer__info { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 500px; + height: auto; + background-color: #7f594a; + border-radius: 20px; + box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.774); + z-index: 4; +} +.addNewMovieContainer__info h1 { + color: white; +} +.addNewMovieContainer__info form { + display: flex; + align-items: center; + justify-content: center; + width: 500px; + height: 300px; + flex-direction: column; + gap: 30px; +} +.addNewMovieContainer__info form input, .addNewMovieContainer__info form select { + height: 40px; + width: 260px; + font-size: 20px; + border-radius: 10px; + border: none; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); +} +.addNewMovieContainer__info form #addMovie { + width: 100px; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/controller.ts b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/controller.ts new file mode 100644 index 000000000..49617052d --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/controller.ts @@ -0,0 +1,21 @@ + +if (!allUsersString){ + const emptyArray:Array = []; + localStorage.setItem('allUsers',JSON.stringify(emptyArray)) +} + +let moviesString = localStorage.getItem('movies'); +let moviesSeatsString = localStorage.getItem('moviesSeats'); + +if (!moviesString && !moviesSeatsString){ + const emptyMoviesArray:Array = []; + const emptyMoviesSeatsArray:Array = []; + for (let id = 1 ; id<=10 ; id++){ + const movie = new Movie('Movie Name', id, `../public/images/${id}.jpg`,"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dicta at officia facilis eligendi maiores, aperiam expedita nemo cumque, sequi explicabo. Quaerat nisi porro pariatur vitae, earum facilis obcaecati minus?",'none'); + const movieSeats = new MovieSeats(id,48); + emptyMoviesArray.push(movie); + emptyMoviesSeatsArray.push(movieSeats); + localStorage.setItem('movies',JSON.stringify(emptyMoviesArray)) + localStorage.setItem('moviesSeats',JSON.stringify(emptyMoviesSeatsArray)) + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/index.html b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/index.html new file mode 100644 index 000000000..9b642e191 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + Cinema World + + +
                      +
                      +
                      + +
                      + +
                      +
                      +

                      Cinema World

                      + +
                      +
                      +
                      +

                      Welcome: Username

                      +
                      +
                      +
                      +
                      +

                      © 2023 Nikita Rossenko

                      +
                      +
                      + + diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/index.ts b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/index.ts new file mode 100644 index 000000000..742cac8dc --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/index.ts @@ -0,0 +1,213 @@ +function renderMovies(){ + try { + if (isLoggedIn){ + if (isLoggedIn == true){ + const moviesContainer = document.querySelector('.main__moviesContainer'); + if (moviesContainer){ + const moviesString:string | null = localStorage.getItem('movies'); + + if(moviesString){ + const moviesArray:Array = JSON.parse(moviesString) + + if (moviesArray){ + for (let i = 0 ; i +
                      +

                      ${moviesArray[i].name}

                      + +

                      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dicta at officia facilis eligendi maiores, aperiam expedita nemo cumque, sequi explicabo. Quaerat nisi porro pariatur vitae, earum facilis obcaecati minus?

                      +
                      + + ` + moviesContainer.insertAdjacentHTML('beforeend', movieDivs) + } + } + } + } + } else { + location.href = 'login.html'; + } + } else { + location.href = 'login.html'; + } + + const logoutButton = document.querySelector('#logoutBtn'); + + logoutButton?.addEventListener('click', e => { + localStorage.removeItem('isLoggedIn') + location.href = 'login.html' + }) + } catch (error) { + console.error(error); + } +} + +function renderUsername(){ + const usernameHtml = document.querySelector('.username'); + const usernameString = localStorage.getItem('isLoggedIn'); + if (usernameHtml && usernameString){ + const username = JSON.parse(usernameString); + usernameHtml.innerHTML = `

                      Welcome: ${username['username']}

                      `; + } +} + +function showMovieSeats(id){ + const moviesContainer:HTMLDivElement | null = document.querySelector(".main__moviesContainer"); + const main:HTMLDivElement | null = document.querySelector(".main"); + const moviesString = localStorage.getItem('movies'); + let seatStatus:string = ''; + + if (moviesContainer && main && moviesString){ + const movies = JSON.parse(moviesString); + moviesContainer.style.display = 'none'; + const seatsString = localStorage.getItem('moviesSeats'); + if (seatsString){ + const seats = JSON.parse(seatsString); + const seatsId = seats[id-1]; + + let seatsDiv = '
                      ' + let seatIndex = 0; + // console.log(seatsId) + const seatsRows = (seatsId['seatsArray'].length-1)/8; + for (let k = 1 ; k<=seatsRows ; k++){ + seatsDiv += '
                      ' + + for (let i = 1 ; i<=(seatsId['seatsArray'].length-1)/6 ; i++){ + seatIndex +=1; + if(seatsId['seatsArray'][seatIndex]['isFree'] == false){ + seatStatus = 'occupied' + } else { + seatStatus = '' + } + seatsDiv += `
                      ` + } + seatsDiv += '
                      ' + } + seatsDiv += '
                      ' + main.style.flexDirection = 'column' + main.insertAdjacentHTML('beforebegin', `

                      ${movies[id-1].name}

                      ${movies[id-1].description}

                      `); + main.insertAdjacentHTML('afterbegin', seatsDiv); + main.insertAdjacentHTML('afterbegin', '
                      • Available
                      • Selected
                      • Occupied
                      '); + + } + } +} + +function chooseSeats(info){ + const seatNumber = parseInt((info.split(':'))[1]); + const seatIdString = `${info}` + const movieIdIndex = (info.split(':'))[0]-1 + const seatId:HTMLElement | null = document.getElementById(seatIdString); + const moviesSeatsIdString = localStorage.getItem('moviesSeats'); + let userIndex:number | null = null; + const allUsersString = localStorage.getItem('allUsers'); + let userMovieId = false; + + if (moviesSeatsIdString && allUsersString){ + const moviesSeatsIdObject = JSON.parse(moviesSeatsIdString); + + if (seatId && moviesSeatsIdObject){ + const allUsersObject = JSON.parse(allUsersString); + for (let i in allUsersObject){ + if(allUsersObject[i].username.toLowerCase() == loggedInUser.toLowerCase()){ + userIndex = parseInt(i); + } + } + const movieId = (moviesSeatsIdObject[movieIdIndex])['id'] + + // console.log(movieId['seatsArray'][seatNumber]) + if (userIndex != null){ + const userMovies = allUsersObject[userIndex]['movies'] + for (let i = 0 ; i < userMovies.length ; i++){ + if (userMovies[i]['movieId'] == movieId){ + userMovieId = true; + } + } + if (!userMovieId){ + const movieObject:object = {'movieId': `${movieId}`, 'seatNumber':[]} + userMovies.push(movieObject); + } + for (let i = 0 ; iAdd New Movie'); + } + break; + } + } + } + +} + +function addNewMovieContainer(){ + const moviesContainer = document.querySelector('.moviesContainer'); + + if (moviesContainer){ + moviesContainer.insertAdjacentHTML('beforebegin', '

                      Add New Movie

                      ') + } + + const addNewMovieContainer = document.querySelector('.addNewMovieContainer'); + const closeAddMovie = document.querySelector('.closeAddMovie'); + if (addNewMovieContainer && closeAddMovie){ + closeAddMovie.addEventListener('click', e => { + addNewMovieContainer.remove(); + }) + } + +} + +function addNewMovie(info) { + info.preventDefault(); + const newMovieName = info.target.elements.name.value; + const newMovieImage = info.target.elements.image.value; + const newMoviecategory = info.target.elements.category.value; + const moviesString = localStorage.getItem('movies'); + const moviesSeatsString = localStorage.getItem('moviesSeats'); + + if (moviesString && moviesSeatsString){ + const movies = JSON.parse(moviesString); + const moviesSeats = JSON.parse(moviesSeatsString); + const id = movies.length+1; + const movie = new Movie(newMovieName, id, newMovieImage,"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae dicta at officia facilis eligendi maiores, aperiam expedita nemo cumque, sequi explicabo. Quaerat nisi porro pariatur vitae, earum facilis obcaecati minus?",newMoviecategory); + const newMovieSeats = new MovieSeats(id,48); + movies.push(movie); + moviesSeats.push(newMovieSeats); + localStorage.setItem('movies',JSON.stringify(movies)); + localStorage.setItem('moviesSeats',JSON.stringify(moviesSeats)); + + renderMovies(); + location.href='index.html' + } +} +isAdmin(); +renderMovies(); +renderUsername(); diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/login.html b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/login.html new file mode 100644 index 000000000..2d378701b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/login.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + Cinema World - Login + + +
                      +

                      Cinema World

                      +
                      +

                      Login

                      +
                      + + + +
                      + Don't have a user? Register +
                      +
                      +
                      +
                      + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/login.ts b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/login.ts new file mode 100644 index 000000000..c29a93809 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/login.ts @@ -0,0 +1,33 @@ +function loginHandler(e){ + e.preventDefault(); + const allUsersString = localStorage.getItem('allUsers'); + const username = e.target.elements.username.value; + const password = e.target.elements.password.value; + const passwordInput = document.querySelector("#password"); + const popMessage = document.querySelector('#loginPopMessage'); + localStorage.setItem('isLoggedIn','false'); + + if(allUsersString){ + const allUsersArray = JSON.parse(allUsersString); + let foundUser = false; + if (username && password){ + allUsersArray.forEach(user => { + if (user.username.toLowerCase() === username.toLowerCase() && user.password === password){ + console.log("okay") + foundUser = true; + const isLoggedInString = `{"isLoggedIn":true,"username":"${user.username}"}` + localStorage.setItem('isLoggedIn',isLoggedInString) + location.href = 'index.html' + } + }); + if (!foundUser){ + if (passwordInput && !popMessage) { + passwordInput.insertAdjacentHTML( + "afterend", + "Username don't exists or wrong password!" + ); + } + } + } + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/model.ts b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/model.ts new file mode 100644 index 000000000..d3a0e2cf5 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/model.ts @@ -0,0 +1,55 @@ +class User { + username: string; + password: string; + movies:Array; + isAdmin:boolean; + + constructor(username, password) { + this.username = username; + this.password = password; + this.movies = [] + this.isAdmin = this.isNikita(username) + } + + isNikita(username){ + if (username.toLowerCase() == 'nikita'){ + return true; + } else { + return false; + } + } +} + +class Movie { + name: string; + id: number; + image: string; + description: string; + category:string; + + constructor(name, id, image, description,category) { + this.name = name; + this.id = id; + this.image = image; + this.description = description; + this.category = category; + } +} + +class MovieSeats { + id: number; + seatsArray: Array; + + constructor(id, seats) { + this.id = id; + this.seatsArray = this.seatsCount(seats); + } + seatsCount (seats) { + const seatsArray:Array = [{}] + for (let i = 1 ; i <= seats ; i++){ + let seatObject = {seatNumber:i,selectedBy:'',isFree:true} + seatsArray.push(seatObject); + } + return seatsArray; + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/register.html b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/register.html new file mode 100644 index 000000000..1754d5867 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/register.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + Cinema World - Register + + +
                      +

                      Cinema World

                      +
                      +

                      Register

                      +
                      + + + + +
                      + Already have a user? Login +
                      +
                      +
                      +
                      + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/register.ts b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/register.ts new file mode 100644 index 000000000..2b03db1d9 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/register.ts @@ -0,0 +1,80 @@ +function registerHandler(e) { + e.preventDefault(); + const username = e.target.elements.username.value; + const password = e.target.elements.password.value; + const passwordConfirm = e.target.elements.passwordConfirm.value; + const passwordConfirmInput = document.querySelector("#passwordConfirm"); + const usernameInput = document.querySelector("#username"); + const popMessage = document.querySelector('#regitserPopMessage'); + + if (username && password && passwordConfirm){ + if (password != passwordConfirm) { + + if (passwordConfirmInput && !popMessage) { + passwordConfirmInput.insertAdjacentHTML( + "afterend", + "Passwords don't match!" + ); + passwordConfirmInput.addEventListener("click", (e) => { + const popMessage = document.querySelector('#regitserPopMessage'); + if (popMessage){ + popMessage.remove(); + } + }); + + const passwordInput = document.querySelector("#password"); + + if (passwordInput) { + passwordInput.addEventListener("click", (e) => { + const popMessage = document.querySelector('#regitserPopMessage'); + if (popMessage){ + popMessage.remove(); + } + }); + } + } + return false; + } else { + const allUsersStringRegister = localStorage.getItem('allUsers'); + if (allUsersStringRegister){ + if (allUsersStringRegister){ + const allUsersArray:Array = JSON.parse(allUsersStringRegister); + if (allUsersArray.length > 0){ + let userExist = false + allUsersArray.forEach(user => { + if (user.username.toLowerCase() == username.toLowerCase()){ + if (passwordConfirmInput && !popMessage && usernameInput) { + passwordConfirmInput.insertAdjacentHTML( + "afterend", + "This Username is already exists!" + ); + usernameInput.addEventListener("click", (e) => { + const popMessage = document.querySelector('#regitserPopMessage'); + if (popMessage){ + popMessage.remove(); + } + }); + } + userExist=true; + return; + } + }); + if (!userExist){ + const newUser = new User(username, password); + allUsersArray.push(newUser); + localStorage.setItem('allUsers', JSON.stringify(allUsersArray)); + location.href = 'login.html' + } + } else { + const newUser = new User(username, password); + allUsersArray.push(newUser); + localStorage.setItem('allUsers', JSON.stringify(allUsersArray)); + location.href = 'login.html' + } + } + } + } + + } + +} diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/style.scss b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/style.scss new file mode 100644 index 000000000..d89bae23e --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/style.scss @@ -0,0 +1,548 @@ +* { + color: black; + +} +html { + min-width: 100vw; + min-height: 100vh; + +} +body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + overflow-x: hidden; + overflow-y: hidden; + display: flex; + justify-content: space-between; + background-color: #10171B; + +} +.imageContainer{ + width: 100vw; + height: 100vh; + background-size:cover; + z-index: -1; + background-image: url('../images/movie-theater.jpg'); + +} + +.loginAndRegisterContainer{ + background-color: white; + width: 30%; + min-width: 400px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + h1 { + position: absolute; + top: 20px; + font-size: 60px; + } + + .main { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 50px; + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5); + width: 100%; + height: 450px; + border: 3px; + gap: 20px; + left: 100px; + + h2 { + padding: 0; + margin: 0; + font-size: 50px; + } + a { + all: unset; + cursor: pointer; + text-decoration: underline + } + form { + width: 100%; + height: 250px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 25px; + + input { + height: 40px; + width: 260px; + font-size: 20px; + border-radius: 10px; + border: none; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); + } + + #regitserPopMessage { + position: absolute; + bottom: 130px; + padding: 0; + margin: 0; + color: red; + } + #loginPopMessage { + position: absolute; + bottom: 165px; + padding: 0; + margin: 0; + color: red; + } + + #submitBtn { + box-shadow:none; + width: 150px; + height: 45px; + transition : 500ms; + backface-visibility: hidden; + margin-top: 10px; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + background: linear-gradient(180deg,#f9f9f9 0%,#e0e0e0 100%); + border-radius: 50px; + padding: 4px 22px 5px 22px; + color: black; + font-size: 18px; + border: 1px solid #7F594A; + font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-weight: 900; + font-style: normal + + } + + #submitBtn:hover{ + background: #B4AAA1; + border: 1px solid white; + } + } + } +} +.navBar{ + width: 100%; + height: 60px; + background-color: #31211F; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + z-index: 1; + + &__icons { + width: 100%; + width: 1546px; + height: 60px; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; + + &__menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 80px; + height: 100%; + + &__container{ + display: none; + flex-direction: column; + width: auto; + height: auto; + position: absolute; + left: -10px; + top: 60px; + background-color:#31211F; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 12px 16px; + z-index: 1; + gap: 20px; + } + } + &__menu:hover .navBar__icons__menu__container { + display: flex; + } + + h1 { + font-size: 30px; + color: white; + margin-left: 20px; + } + button { + box-shadow:none; + width: 80px; + height: 30px; + transition : 500ms; + backface-visibility: hidden; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + background: linear-gradient(180deg,#f9f9f9 0%,#e0e0e0 100%); + border-radius: 10px; + // padding: 10px 22px 10px 22px; + color: black; + font-size: 14px; + border: 1px solid #7F594A; + font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-weight: 900; + font-style: normal + + } + + button:hover{ + background: #B4AAA1; + border: 1px solid white; + } + #addNewMovie { + width: 150px; + } + + } + +} +.moviesContainer{ + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(rgba(0, 0, 0, 0.5), #10171b), url('../images/movie-theater.jpg'); + background-size:cover; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + gap: 60px; + overflow-y:auto; + + .username{ + margin-top: 100px; + color: white; + width: auto; + height: 100px; + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5); + border-radius: 30px; + display: flex; + justify-content: center; + align-items: center; + background-color: #222f3889; + + p { + margin-left: 10px; + margin-right: 10px; + color: white; + font-size: 30px; + } + } + + .main{ + position: relative; + width: 100%; + height: auto; + display: flex; + justify-content: center; + align-items: center; + + &__moviesContainer { + position: relative; + width: 1546px; + height: auto; + display: flex; + // grid-template-columns: repeat( 5, 1fr); + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 10px; + + &__movie { + position: relative; + width: 300px; + height: 373px; + object-fit: cover; + + &__details { + position: absolute; + display: none; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + justify-content: space-between; + align-items: center; + flex-direction: column; + + button { + box-shadow:none; + width: 120px; + height: 45px; + transition : 500ms; + backface-visibility: hidden; + position: relative; + cursor: pointer; + display: inline-block; + white-space: nowrap; + background: linear-gradient(180deg,#f9f9f9 0%,#e0e0e0 100%); + border-radius: 10px; + // padding: 10px 22px 10px 22px; + color: black; + font-size: 18px; + border: 1px solid #7F594A; + font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-weight: 900; + font-style: normal + + } + + button:hover{ + transition : 500ms; + background: #B4AAA1; + border: 1px solid white; + } + + h1 { + margin-left: 10px; + color: white; + } + p { + margin-left: 10px; + color: white; + } + } + + img { + width: 100%; + height: 100%; + } + } + + &__movie:hover { + .main__moviesContainer__movie__details{ + display: flex; + } + } + } + } + .footer{ + position: relative; + display: flex; + align-items: center; + width: 100%; + height: 40px; + background-color: #31211F; + z-index: 1; + + p { + margin-left: 20px; + color: rgb(178, 170, 170); + } + } +} + +@media only screen and (max-width: 1540px) { + .navBar__icons { + max-width: 1250px; + } +} + +@media only screen and (max-width: 1225px) { + .navBar__icons { + max-width: 935px; + } +} + +@media only screen and (max-width: 936px) { + .navBar__icons { + max-width: 625px; + } +} + +.SeatsContainer { + perspective: 1000px; + width: 600px; + height: 400px; + margin-bottom: 3px; + display: flex; + align-items: center; + flex-direction: column; + // background-color: #7f594a; + border-radius: 10px; + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); + + &__seat { + background-color: #7f594a; + height: 12*3px; + width: 15*3px; + margin: 3*3px; + border-top-left-radius: 10*3px; + border-top-right-radius: 10*3px; + } + + &__seat:hover { + background-color: rgb(162, 162, 162); + } + + &__seat.selected { + background-color: #2ecc71; + } + + &__seat.occupied { + background-color: #fff; + } + + /* Selects the second row f*/ + &__seat:nth-of-type(2) { + margin-right: 18*3px; + } + + &__seat:nth-last-of-type(2) { + margin-left: 18*3px; + } + + &__seat:not(.occupied) { + cursor: pointer; + transform: scale(1.1); + } + + &__row { + display: flex; + } + + &__screen { + background-color: #fff; + height: 70px; + width: 94%; + margin-bottom: 20px; + margin-top: 5px; + transform: rotateX(-45deg); + box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7); + } + } + + + + .showcase .SeatsContainer__seat:not(.occupied) { + cursor: default; + transform: scale(1); + } + + .showcase { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1); + padding: 5px 10px; + border-radius: 10px; + color: rgb(255, 255, 255); + list-style-type: none; + display: flex; + justify-content: space-between; + } + + .showcase li { + display: flex; + align-items: center; + justify-content: center; + margin: 0 10px; + } + + .showcase li small { + margin-left: 2px; + color: white; + } + + + p.text { + margin: 5px 0; + } + + p.text span { + color: #6feaf6; + } + + .movieShowcase { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + width: 100%; + img { + max-width: 500px; + max-height: 721px; + } + h1 { + color: white; + } + p { + width: 480px; + color: white; + font-size: 20px; + } + } + + .addNewMovieContainer{ + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + + .closeAddMovie{ + position: absolute; + width: 100%; + height: 100%; + z-index: 3; + } + + &__info { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 500px; + height: auto; + background-color: #7f594a; + border-radius: 20px; + box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.774); + z-index: 4; + h1 { + color: white; + } + form { + display: flex; + align-items: center; + justify-content: center; + width: 500px; + height: 300px; + flex-direction: column; + gap: 30px; + + + input, select{ + height: 40px; + width: 260px; + font-size: 20px; + border-radius: 10px; + border: none; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); + } + #addMovie { + width: 100px; + } + } + } + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/views.ts b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/views.ts new file mode 100644 index 000000000..bbb969fe8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/Nikita Rossenko/src/views.ts @@ -0,0 +1,12 @@ +const allUsersString = localStorage.getItem('allUsers'); +const isLoggedInString:string | null = localStorage.getItem('isLoggedIn'); +let isLoggedIn:boolean = false; +let loggedInUser = ''; + +if(isLoggedInString){ + const isLoggedInObject = JSON.parse(isLoggedInString); + isLoggedIn = isLoggedInObject['isLoggedIn']; + loggedInUser = isLoggedInObject['username'] +} else { + isLoggedIn = false +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/dist/index.dev.js b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/dist/index.dev.js new file mode 100644 index 000000000..0a5d49c22 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/dist/index.dev.js @@ -0,0 +1,54 @@ +"use strict"; + +window.addEventListener('load', function () { + var form = document.querySelector("#new-task-form"); + var input = document.querySelector("#new-task-input"); + var list_el = document.querySelector("#tasks"); + form.addEventListener('submit', function (e) { + e.preventDefault(); + var task = input.value; + + if (!task) { + alert("Please fill out the task"); + return; + } + + var task_el = document.createElement("div"); + task_el.classList.add("task"); + var task_content_el = document.createElement("div"); + task_content_el.classList.add("content"); + task_el.appendChild(task_content_el); + var task_input_el = document.createElement("input"); + task_input_el.classList.add("text"); + task_input_el.type = "text"; + task_input_el.value = task; + task_input_el.setAttribute("readonly", "readonly"); + task_content_el.appendChild(task_input_el); + var task_actions_el = document.createElement("div"); + task_actions_el.classList.add("actions"); + var task_edit_el = document.createElement("button"); + task_edit_el.classList.add("edit"); + task_edit_el.innerHTML = "Edit"; + var task_delete_el = document.createElement("button"); + task_delete_el.classList.add("delete"); + task_delete_el.innerHTML = "Delete"; + task_actions_el.appendChild(task_edit_el); + task_actions_el.appendChild(task_delete_el); + task_el.appendChild(task_actions_el); + list_el.appendChild(task_el); + input.value = ""; + task_edit_el.addEventListener('click', function () { + if (task_edit_el.innerText.toLowerCase() == "edit") { + task_input_el.removeAttribute("readonly"); + task_input_el.focus(); + task_edit_el.innerText = "Save"; + } else { + task_input_el.setAttribute("readonly", "readonly"); + task_edit_el.innerText = "Edit"; + } + }); + task_delete_el.addEventListener('click', function () { + list_el.removeChild(task_el); + }); + }); +}); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.css b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.css new file mode 100644 index 000000000..7c82ff835 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.css @@ -0,0 +1,138 @@ +:root{ + --dark: #374151; + --darker: #1f2937; + --darkest: #111827; + --grey:#6b7280; + --light:#eee; + --pink: #ec4899; + --purple:#8b5cf6; + --aqua:#00d9ff; +} + +*{ + box-sizing: border-box; + margin: 0; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} +body{ + display: flex; + flex-direction: column; + min-height: 100vh; + background: var(--dark); + color: white; +} + +header{ + padding: 2rem 1rem; + max-width: 800px; + width: 100%; + margin: 0 auto; +} +header h1{ + font-size: 2.5rem; + font-weight: 300; + margin-bottom: 1rem; + color: var(--grey); +} + +#new-task-form{ + display: flex; +} +input,button{ + appearance: none; + border: none; + outline: none; + background: none; +} +#new-task-input{ + flex: 1 1 0%; + background-color: var(--darker); + padding: 1rem; + border-radius: 1rem; + margin-right: 1rem; + color: var(--light); + font-size: 1.25rem; +} +#new-task-input::placeholder{ + color: var(--grey); +} +#new-task-submit{ + color: var(--pink); + font-size: 1.25rem; + font-weight: 700; + background-image: linear-gradient(to right, var(--purple), var(--aqua)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + cursor: pointer; + transition: 0.4s; +} +#new-task-submit:hover{ + opacity: 0.8; +} +#new-task-submit:active{ + opacity: 0.6; +} + +main{ + flex: 1 1 0%; + padding: 2rem 1rem; + max-width: 800px; + width: 100%; + margin: 0 auto; +} +.task-list{ + padding: 1rem; +} +.task-list h2{ + font-size: 1.5rem; + font-weight: 300; + color: var(--grey); + margin-bottom: 1rem; +} +#tasks .task{ + display: flex; + justify-content: space-between; + background-color: var(--darkest); + padding: 1rem; + border-radius: 1rem; + margin-bottom: 1rem; +} +#tasks .task .content{ + flex: 1 1 0%; +} +#tasks .task .content .text{ + color: #fff; + font-size: 1.125rem; + width: 100%; + display: block; + transition: 0.4s; +} +#tasks .task .content .text:not(:read-only){ + color: var(--pink); +} +#tasks .task .actions{ + display: flex; + margin: 0 --0.5rem; +} +.task .actions button{ + cursor: pointer; + margin: 0 0.5rem; + font-size: 1.125rem; + font-weight: 700; + text-transform: uppercase; + transition: 0.4s; +} +.task .actions button:hover{ + opacity: 0.8; +} +.task .actions button:active{ + opacity: 0.6; +} +.task .actions .edit{ + background-image: linear-gradient(to right, var(--pink), var(--purple)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.task .actions .delete{ + color: crimson; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.html b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.html new file mode 100644 index 000000000..68b6147c2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.html @@ -0,0 +1,36 @@ + + + + + + + Task List + + + +

                      Task List

                      +
                      + + +
                      +
                      +
                      +
                      +

                      Tasks

                      +
                      + +
                      +
                      +
                      + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.js b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.js new file mode 100644 index 000000000..392eafb57 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/TaskList - yuval.p/index.js @@ -0,0 +1,51 @@ +window.addEventListener('load', () =>{ + const form = document.querySelector("#new-task-form") + const input = document.querySelector("#new-task-input") + const list_el = document.querySelector("#tasks") + form.addEventListener('submit',(e) =>{ + e.preventDefault(); + const task = input.value; + if(!task){ + alert("Please fill out the task") + return; + } + const task_el = document.createElement("div") + task_el.classList.add("task") + const task_content_el = document.createElement("div") + task_content_el.classList.add("content") + task_el.appendChild(task_content_el) + const task_input_el = document.createElement("input") + task_input_el.classList.add("text") + task_input_el.type = "text" + task_input_el.value = task + task_input_el.setAttribute("readonly","readonly") + task_content_el.appendChild(task_input_el) + const task_actions_el = document.createElement("div") + task_actions_el.classList.add("actions") + const task_edit_el = document.createElement("button") + task_edit_el.classList.add("edit") + task_edit_el.innerHTML = "Edit" + const task_delete_el = document.createElement("button") + task_delete_el.classList.add("delete") + task_delete_el.innerHTML = "Delete" + task_actions_el.appendChild(task_edit_el) + task_actions_el.appendChild(task_delete_el) + task_el.appendChild(task_actions_el) + list_el.appendChild(task_el) + input.value = "" + + task_edit_el.addEventListener('click', () => { + if(task_edit_el.innerText.toLowerCase() == "edit"){ + task_input_el.removeAttribute("readonly") + task_input_el.focus(); + task_edit_el.innerText = "Save" + }else { + task_input_el.setAttribute("readonly","readonly") + task_edit_el.innerText = "Edit" + } + }) + task_delete_el.addEventListener('click',() => { + list_el.removeChild(task_el) + }) + }) +}) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/index.css b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/index.css new file mode 100644 index 000000000..ef5208983 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/index.css @@ -0,0 +1,120 @@ +* { + padding: 0; + margin: 0; +} + +body { + background-color: lightgoldenrodyellow; + height: 100%; + width: 100%; + position: relative; + font-family: "Itim", cursive; +} + +html { + height: 100%; + width: 100%; +} + +header { + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} + +#divContainer { + padding: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} +#divContainer .teams { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin: 20px 5px 0px 5px; + padding: 25px; + height: 300px; + width: 200px; + border: 4px solid #18389b; + border-radius: 10px; +} +#divContainer .teams img { + padding-top: 10px; + height: 150px; +} +#divContainer .teams h3 { + padding: 20px; +} +#divContainer .teams .deleteTeam { + height: 25px; + position: absolute; + top: -3px; + left: 2px; +} + +.teams:hover { + transition: all 1s ease-in-out; + cursor: pointer; + color: lightgoldenrodyellow; + background-color: rgba(28, 59, 151, 0.952); +} + +a img { + height: 80px; + position: absolute; + top: 30px; + right: 30px; +} + +.hide { + display: none; +} + +.btn { + box-shadow: 0 0 10px 2px; + background-color: #F6BF05; + border-radius: 10px; + padding: 10px; + position: absolute; + left: 50px; + top: 45px; +} + +.btn:hover { + cursor: pointer; + box-shadow: 0 0 13px 4px; +} + +.adminLoginForm { + border-radius: 10px; + text-align: center; + padding: 10px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + background-color: #F6BF05; + box-shadow: 0 0 10px 2px; +} + +.adminNewTeamForm { + border-radius: 10px; + text-align: center; + padding: 8px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + box-shadow: 0 0 10px 2px; + background-color: #F6BF05; +} + +.welcomeMsg { + text-align: center; + padding: 30px 0 0 0; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/index.js b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/index.js new file mode 100644 index 000000000..ffeb1507d --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/index.js @@ -0,0 +1,87 @@ +var teamNameInput = document.querySelector("#teamName"); +var badgeImgInput = document.querySelector("#badgeImg"); +var leagueInput = document.querySelector("#league"); +var adminLoginForm = document.querySelector("#adminLoginForm"); +var adminLoginBtn = document.querySelector(".adminLoginBtn"); +var adminName = document.querySelector("#adminName"); +var newTeamForm = document.querySelector("#addTeamForm"); +var addTeamBtn = document.querySelector(".addTeamBtn"); +var welcomeMsg = document.querySelector(".welcomeMsg") || null; +var divContainer = document.querySelector("#divContainer"); +var username = localStorage.getItem("username"); +if (username) { + adminLoginBtn.classList.add("hide"); + welcomeMsg.innerText = "Hello " + username + " , Welcome to FOOTOP"; + addTeamBtn.classList.remove("hide"); + addTeamBtn.addEventListener("click", function () { + newTeamForm.classList.remove("hide"); + }); +} +adminLoginBtn.addEventListener("click", function () { + adminLoginForm.classList.remove("hide"); +}); +var FootballTeam = /** @class */ (function () { + function FootballTeam(name, image, league) { + this.name = name; + this.image = image; + this.league = league; + } + return FootballTeam; +}()); +//dont use let, use const +var footballTeams = []; +var storedFootballTeams = localStorage.getItem("footballTeams"); +if (storedFootballTeams) { + footballTeams = JSON.parse(storedFootballTeams); +} +else { + footballTeams = [ + new FootballTeam("Manchester United", "./photos/man united.png", "Premier League"), + new FootballTeam("Real Madrid", "./photos/real madrid.png", "La Liga"), + new FootballTeam("Barcelona", "./photos/barcelona.png", "La Liga"), + new FootballTeam("Bayern Munich", "./photos/bayern.png", "Bundesliga"), + new FootballTeam("Manchester City", "./photos/Manchester_City.png", "Premier League"), + ]; +} +//should enter in to a function, and rune when needed. +footballTeams.forEach(function (team) { + var teamElement = document.createElement("div"); + teamElement.classList.add("teams"); + teamElement.innerHTML = "\n

                      " + team.name + "

                      \n \n

                      " + team.league + "

                      "; + divContainer.appendChild(teamElement); +}); +newTeamForm.addEventListener("submit", function (event) { + try { + event.preventDefault(); + newTeamForm.classList.add("hide"); + var teamNameValue = teamNameInput.value; + var badgeImgValue = badgeImgInput.value; + var leagueValue = leagueInput.value; + footballTeams.push(new FootballTeam(teamNameValue, badgeImgValue, leagueValue)); + localStorage.setItem("footballTeams", JSON.stringify(footballTeams)); + divContainer.innerHTML = ''; + footballTeams.forEach(function (team) { + var teamElement = document.createElement("div"); + teamElement.classList.add("teams"); + teamElement.innerHTML = + "

                      " + team.name + "

                      \n \n

                      " + team.league + "

                      "; + divContainer.appendChild(teamElement); + }); + } + catch (error) { + console.error(error); + } +}); +adminLoginForm.addEventListener("submit", function (event) { + try { + event.preventDefault(); + var username_1 = adminName.value; + localStorage.setItem("username", username_1); + welcomeMsg.innerText = "Hey " + username_1 + " , Welcome to FOOTOP"; + adminLoginBtn.classList.add("hide"); + adminLoginForm.classList.add("hide"); + } + catch (error) { + console.error(error); + } +}); diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/quiz.css b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/quiz.css new file mode 100644 index 000000000..025e26ae8 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/quiz.css @@ -0,0 +1,103 @@ +*, *::before, *::after { + box-sizing: border-box; + font-family: "Itim", cursive; +} + +body { + background-color: lightgoldenrodyellow; + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + position: relative; +} + +header { + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} + +.quizBody { + width: 100vw; + height: 75vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + max-width: 80%; + padding: 50px; + border-radius: 10px; + box-shadow: 0 0 10px 2px; + background-color: rgba(28, 59, 151, 0.329); +} +.container .btns { + display: grid; + grid-template-columns: repeat(2, auto); + gap: 10px; + margin: 30px 0; +} +.container .btn { + padding: 10px 15px; + border-radius: 5px; + outline: none; + border: 2px solid #233569; + background-color: #758dd6; + color: white; +} +.container .btn--correct { + background-color: #3b5a0d; +} +.container .btn--wrong { + background-color: red; +} +.container .btn:hover { + border-color: black; + cursor: pointer; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; +} +.controls .menuBtn { + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; +} + +.endGame { + height: 400px; + width: 900px; + border-radius: 50%; + background-color: rgba(28, 59, 151, 0.555); + justify-content: center; + align-items: center; + text-align: center; + box-shadow: 0 0 10px 2px; +} +.endGame #finalScore { + font-size: 50px; +} +.endGame #endGameMessage { + color: lightgoldenrodyellow; + padding: 51px 0 40px 0; +} +.endGame #restartBtn { + border-radius: 5px; + outline: none; + border: 2px solid #233569; + background-color: #758dd6; + color: white; + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; +} + +.hide { + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/quiz.js b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/quiz.js new file mode 100644 index 000000000..104a17085 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/dist/quiz.js @@ -0,0 +1,170 @@ +var startBtn = document.querySelector("#startBtn"); +var questionsContainer = document.querySelector("#questionContainer"); +var questionElement = document.querySelector("#question"); +var answerButtonsElements = document.querySelectorAll("#answerButtons"); +var endGameAlert = document.querySelector("#endGameAlert"); +var quizContainer = document.querySelector(".container"); +var endGameMessage = document.querySelector("#endGameMessage"); +var finalScore = document.querySelector("#finalScore"); +var correctAnswers = 0; +var shuffleQuestions, currentQuestionIndex; +var questions = [ + { + question: "What team has the most UCL titles ?", + answers: [ + { text: "Real Madrid", correct: true }, + { text: "Manchester United", correct: false }, + { text: "Milan", correct: false }, + { text: "Barcelona", correct: false } + ] + }, + { + question: "Who won the Ballon D'or in 2017 ?", + answers: [ + { text: "Luka Modric", correct: false }, + { text: "Lionel Messi", correct: false }, + { text: "Karim Benzema", correct: false }, + { text: "Cristiano Ronaldo", correct: true } + ] + }, + { + question: "What transfer was the most expensive ?", + answers: [ + { text: "Neymar Jr to PSG", correct: true }, + { text: "Kylian Mbappe to PSG", correct: false }, + { text: "Joao Felix to Atletico Madrid", correct: false }, + { text: "Cristiano Ronaldo to Real Madrid", correct: false } + ] + }, + { + question: "What team has the biggest fan base in the world ?", + answers: [ + { text: "Real Madrid", correct: false }, + { text: "Manchester United", correct: true }, + { text: "Liverpool", correct: false }, + { text: "Barcelona", correct: false } + ] + }, + { + question: "Who has the most Ballon D'or ?", + answers: [ + { text: "Zinedine Zidane", correct: false }, + { text: "Cristiano Ronaldo", correct: false }, + { text: "Lionel Messi", correct: true }, + { text: "Kaka", correct: false } + ] + }, + { + question: "Who won the Ballon D'or in 2020 ?", + answers: [ + { text: "Robert Lewandowski", correct: false }, + { text: "Cristiano Ronaldo", correct: false }, + { text: "Lionel Messi", correct: false }, + { text: "Never awarded due to Covid19", correct: true } + ] + }, + { + question: "Which club has never won the UCL ?", + answers: [ + { text: "Ajax", correct: false }, + { text: "Inter-milano", correct: false }, + { text: "Porto", correct: false }, + { text: "PSG", correct: true } + ] + }, + { + question: "What country has the most World Cup titles ?", + answers: [ + { text: "Brazil", correct: true }, + { text: "Spain", correct: false }, + { text: "Italy", correct: false }, + { text: "Germany", correct: false } + ] + }, + { + question: "What is the biggest fan capacity stadium in the world ?", + answers: [ + { text: "Santiago Bernabau (Real Madrid)", correct: false }, + { text: "Manchester United (Old Traford)", correct: false }, + { text: "Camp Nou (Barcelona)", correct: true }, + { text: "Signal Idunna Park (Dortmund)", correct: false } + ] + }, + { + question: "Who is the highest scorer on one single UCL season ?", + answers: [ + { text: "Cristiano Ronaldo", correct: true }, + { text: "Robert Lewandowski", correct: false }, + { text: "Lionel Messi", correct: false }, + { text: "Neymar Jr", correct: false } + ] + } +]; +startBtn.addEventListener("click", startGame); +function startGame() { + startBtn.classList.add("hide"); + shuffleQuestions = questions.sort(function () { return Math.random() - .5; }); + currentQuestionIndex = 0; + questionsContainer.classList.remove("hide"); + setNextQuestion(); +} +function setNextQuestion() { + resetState(); + showQandA(shuffleQuestions[currentQuestionIndex]); +} +function showQandA(question) { + questionElement.innerText = question.question; + question.answers.forEach(function (answer) { + var optionButton = document.createElement("button"); + optionButton.innerText = answer.text; + optionButton.classList.add("btn"); + if (answer.correct) { + optionButton.dataset.correct = answer.correct; + } + optionButton.addEventListener("click", selectAnswer); + answerButtonsElements[0].appendChild(optionButton); + }); +} +; +function resetState() { + while (answerButtonsElements[0].firstChild) { + answerButtonsElements[0].removeChild(answerButtonsElements[0].firstChild); + } +} +function selectAnswer(event) { + if (event.target.dataset.correct) { + event.target.classList.add("btn--correct"); + correctAnswers++; + } + else { + event.target.classList.add("btn--wrong"); + } + if (shuffleQuestions.length > currentQuestionIndex + 1) { + currentQuestionIndex++; + setTimeout(setNextQuestion, 600); + } + else { + setTimeout(function () { + startBtn.classList.remove("hide"); + startBtn.innerText = "Play again"; + quizContainer.classList.add("hide"); + endGameAlert.classList.remove("hide"); + if (correctAnswers <= 2) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "Your football knowledge is nothing to be proud of..."; + } + else if (correctAnswers >= 3 && correctAnswers <= 6) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "Not bad"; + } + else if (correctAnswers >= 7 && correctAnswers <= 9) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "You know your football !"; + } + else if (correctAnswers == 10) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "You are a true FOOTOPER !!!"; + } + }, 1000); + } +} diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.html b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.html new file mode 100644 index 000000000..3655beb28 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + Document + + +
                      + + +
                      +

                      +
                      + +
                      + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.scss b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.scss new file mode 100644 index 000000000..6f3c242ce --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.scss @@ -0,0 +1,122 @@ +*{ + padding: 0; + margin: 0; +} +body{ + background-color: lightgoldenrodyellow; + height: 100%; + width: 100%; + position: relative; + font-family: 'Itim', cursive; +} +html{ + height: 100%; + width: 100%; +} +header{ + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} + +#divContainer{ + padding: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + .teams{ + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin: 20px 5px 0px 5px ; + padding: 25px; + height: 300px; + width: 200px; + border: 4px solid rgb(24, 56, 155); + border-radius: 10px; + img{ + padding-top:10px ; + height: 150px; + } + h3{ + padding: 20px; + } + .deleteTeam{ + height: 25px; + position: absolute; + top: -3px; + left: 2px; + } + } + +} + +.teams:hover{ + transition: all 1s ease-in-out; + cursor: pointer; + color: lightgoldenrodyellow; + background-color: rgba(28, 59, 151, 0.952); +} + + +a{ + img{ + height: 80px; + position: absolute; + top: 30px; + right: 30px; + } +} + +.hide{ + display: none; +} + +.btn{ + box-shadow: 0 0 10px 2px; + background-color:#F6BF05; + border-radius: 10px; + padding: 10px; + position: absolute; + left: 50px; + top: 45px; +} + +.btn:hover{ + cursor: pointer; + box-shadow: 0 0 13px 4px; +} + +.adminLoginForm{ + border-radius: 10px; + text-align: center; + padding: 10px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + background-color: #F6BF05; + box-shadow: 0 0 10px 2px; +} + +.adminNewTeamForm{ + border-radius: 10px; + text-align: center; + padding: 8px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + box-shadow: 0 0 10px 2px; + background-color: #F6BF05; +} + + +.welcomeMsg{ + text-align: center; + padding: 30px 0 0 0; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.ts b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.ts new file mode 100644 index 000000000..92abb171f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/index.ts @@ -0,0 +1,135 @@ +const teamNameInput = document.querySelector("#teamName") as HTMLInputElement +const badgeImgInput = document.querySelector("#badgeImg") as HTMLInputElement +const leagueInput = document.querySelector("#league") as HTMLInputElement + + +const adminLoginForm = document.querySelector("#adminLoginForm") as HTMLFormElement +const adminLoginBtn = document.querySelector(".adminLoginBtn") as HTMLButtonElement +const adminName = document.querySelector("#adminName") as HTMLInputElement + +const newTeamForm = document.querySelector("#addTeamForm") as HTMLFormElement +const addTeamBtn = document.querySelector(".addTeamBtn") as HTMLButtonElement + +const welcomeMsg = document.querySelector(".welcomeMsg") as HTMLHeadingElement || null +const divContainer = document.querySelector("#divContainer") as HTMLDivElement +const username = localStorage.getItem("username"); + + +if (username) { + adminLoginBtn.classList.add("hide") + welcomeMsg.innerText = `Hello ${username} , Welcome to FOOTOP`; + + addTeamBtn.classList.remove("hide") + addTeamBtn.addEventListener("click" , ()=>{ + newTeamForm.classList.remove("hide") + }) +} + + + +adminLoginBtn.addEventListener("click", ()=>{ + adminLoginForm.classList.remove("hide") +}) + + + +class FootballTeam { + name: string; + image: string; + league: string; + + + constructor(name: string, image: string, league: string) { + this.name = name; + this.image = image; + this.league = league; + } +} + +//dont use let, use const +let footballTeams: FootballTeam[] = []; +const storedFootballTeams = localStorage.getItem("footballTeams"); +if (storedFootballTeams) { + footballTeams = JSON.parse(storedFootballTeams); +} else { + footballTeams = [ + new FootballTeam("Manchester United", "./photos/man united.png", "Premier League"), + new FootballTeam("Real Madrid", "./photos/real madrid.png", "La Liga"), + new FootballTeam("Barcelona", "./photos/barcelona.png", "La Liga"), + new FootballTeam("Bayern Munich", "./photos/bayern.png", "Bundesliga"), + new FootballTeam("Manchester City", "./photos/Manchester_City.png", "Premier League"), + ]; +} + +//should enter in to a function, and rune when needed. + +footballTeams.forEach((team) => { + const teamElement = document.createElement("div"); + teamElement.classList.add("teams"); + teamElement.innerHTML = ` +

                      ${team.name}

                      + +

                      ${team.league}

                      `; + divContainer.appendChild(teamElement); + }); + + + + + + +newTeamForm.addEventListener("submit" , (event)=>{ + try { + event.preventDefault() + + + newTeamForm.classList.add("hide") + + const teamNameValue = teamNameInput.value + const badgeImgValue = badgeImgInput.value + const leagueValue = leagueInput.value + + + footballTeams.push(new FootballTeam(teamNameValue,badgeImgValue,leagueValue)) + localStorage.setItem("footballTeams", JSON.stringify(footballTeams)); + + divContainer.innerHTML = ''; + + footballTeams.forEach((team)=>{ + const teamElement = document.createElement("div"); + teamElement.classList.add("teams") + teamElement.innerHTML = + `

                      ${team.name}

                      + +

                      ${team.league}

                      ` + + divContainer.appendChild(teamElement); + + }) + + + + } catch (error) { + console.error(error) + } +}) + + +adminLoginForm.addEventListener("submit" , (event)=>{ + try { + event.preventDefault() + + const username = adminName.value; + localStorage.setItem("username", username); + welcomeMsg.innerText = `Hey ${username} , Welcome to FOOTOP` + + adminLoginBtn.classList.add("hide") + adminLoginForm.classList.add("hide") + + + } catch (error) { + console.error(error) + } +}) + + diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/Manchester_City.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/Manchester_City.png new file mode 100644 index 000000000..a709fbbdd Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/Manchester_City.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/Quiz-Logo-PNG-HD.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/Quiz-Logo-PNG-HD.png new file mode 100644 index 000000000..15fe2c086 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/Quiz-Logo-PNG-HD.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/barcelona.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/barcelona.png new file mode 100644 index 000000000..580410d51 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/barcelona.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/bayern.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/bayern.png new file mode 100644 index 000000000..135e05c84 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/bayern.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/man united.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/man united.png new file mode 100644 index 000000000..e1aa84f10 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/man united.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/psg.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/psg.png new file mode 100644 index 000000000..143dace48 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/psg.png differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/real madrid.png b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/real madrid.png new file mode 100644 index 000000000..e363cfad5 Binary files /dev/null and b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/real madrid.png differ diff --git "a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/\327\246\327\231\327\234\327\225\327\235 \327\236\327\241\327\232_20230201_201558.png" "b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/\327\246\327\231\327\234\327\225\327\235 \327\236\327\241\327\232_20230201_201558.png" new file mode 100644 index 000000000..69f87ded3 Binary files /dev/null and "b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/photos/\327\246\327\231\327\234\327\225\327\235 \327\236\327\241\327\232_20230201_201558.png" differ diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.html b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.html new file mode 100644 index 000000000..2755f0ac6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.html @@ -0,0 +1,40 @@ + + + + + + + + + + FOOTOP QUIZ APP + + +
                      + +
                      +
                      +
                      +
                      +

                      + +
                      +
                      + +
                      +
                      +
                      + + +
                      +
                      + +
                      + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.scss b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.scss new file mode 100644 index 000000000..8ac51e5b6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.scss @@ -0,0 +1,114 @@ +*, *::before, *::after { + box-sizing: border-box; + font-family: 'Itim', cursive; +} + +body{ + background-color: lightgoldenrodyellow; + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + position: relative; + + +} + +header{ + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} +.quizBody{ + width: 100vw; + height: 75vh; + display: flex; + justify-content: center; + align-items: center; +} +.container{ + + max-width: 80%; + padding: 50px; + border-radius: 10px; + box-shadow: 0 0 10px 2px; + background-color: rgba(28, 59, 151, 0.329); + .btns{ + display: grid; + grid-template-columns: repeat(2, auto); + gap: 10px; + margin: 30px 0; + } + + .btn{ + padding: 10px 15px; + border-radius: 5px; + outline: none; + border: 2px solid rgb(35, 53, 105); + background-color: rgb(117, 141, 214); + color: white; + &--correct{ + background-color: rgb(59, 90, 13); + } + + &--wrong{ + background-color: red; + } + + } + + .btn:hover{ + border-color: black; + cursor: pointer; + } + +} + +.controls{ + display: flex; + justify-content: center; + align-items: center; + .menuBtn{ + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; + } +} + + +.endGame{ + height: 400px; + width: 900px; + border-radius: 50%; + background-color: rgba(28, 59, 151, 0.555); + justify-content: center; + align-items: center; + text-align: center; + box-shadow: 0 0 10px 2px; + #finalScore{ + font-size: 50px; + } + #endGameMessage{ + color: lightgoldenrodyellow; + padding: 51px 0 40px 0; + } + + #restartBtn{ + border-radius: 5px; + outline: none; + border: 2px solid rgb(35, 53, 105); + background-color: rgb(117, 141, 214); + color: white; + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; + } + + +} + + +.hide{ + display: none; +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.ts b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.ts new file mode 100644 index 000000000..b7f128290 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/YuvalAramaProject/quiz.ts @@ -0,0 +1,196 @@ +const startBtn = document.querySelector("#startBtn") as HTMLButtonElement +const questionsContainer = document.querySelector("#questionContainer") as HTMLDivElement +const questionElement:any = document.querySelector("#question") +const answerButtonsElements = document.querySelectorAll("#answerButtons") +const endGameAlert = document.querySelector("#endGameAlert") as HTMLDivElement +const quizContainer = document.querySelector(".container") as HTMLDivElement +const endGameMessage = document.querySelector("#endGameMessage") as HTMLHeadingElement +const finalScore = document.querySelector("#finalScore") as HTMLHeadingElement +let correctAnswers = 0; +let shuffleQuestions , currentQuestionIndex + + +const questions = [ + { + question: "What team has the most UCL titles ?" , + answers: [ + { text: "Real Madrid", correct: true}, + { text: "Manchester United" , correct: false}, + { text: "Milan" , correct: false}, + { text: "Barcelona" , correct: false} + ] + + }, + { + question: "Who won the Ballon D'or in 2017 ?" , + answers: [ + { text: "Luka Modric", correct: false}, + { text: "Lionel Messi" , correct: false}, + { text: "Karim Benzema" , correct: false}, + { text: "Cristiano Ronaldo" , correct: true} + ] + + }, + { + question: "What transfer was the most expensive ?" , + answers: [ + { text: "Neymar Jr to PSG", correct: true}, + { text: "Kylian Mbappe to PSG" , correct: false}, + { text: "Joao Felix to Atletico Madrid" , correct: false}, + { text: "Cristiano Ronaldo to Real Madrid" , correct: false} + ] + + }, + { + question: "What team has the biggest fan base in the world ?" , + answers: [ + { text: "Real Madrid", correct: false}, + { text: "Manchester United" , correct: true}, + { text: "Liverpool" , correct: false}, + { text: "Barcelona" , correct: false} + ] + + }, + { + question: "Who has the most Ballon D'or ?" , + answers: [ + { text: "Zinedine Zidane", correct: false}, + { text: "Cristiano Ronaldo" , correct: false}, + { text: "Lionel Messi" , correct: true}, + { text: "Kaka" , correct: false} + ] + + }, + { + question: "Who won the Ballon D'or in 2020 ?" , + answers: [ + { text: "Robert Lewandowski", correct: false}, + { text: "Cristiano Ronaldo" , correct: false}, + { text: "Lionel Messi" , correct: false}, + { text: "Never awarded due to Covid19" , correct: true} + ] + + }, + { + question: "Which club has never won the UCL ?" , + answers: [ + { text: "Ajax", correct: false}, + { text: "Inter-milano" , correct: false}, + { text: "Porto" , correct: false}, + { text: "PSG" , correct: true} + ] + + }, + { + question: "What country has the most World Cup titles ?" , + answers: [ + { text: "Brazil", correct: true}, + { text: "Spain" , correct: false}, + { text: "Italy" , correct: false}, + { text: "Germany" , correct: false} + ] + + }, + { + question: "What is the biggest fan capacity stadium in the world ?" , + answers: [ + { text: "Santiago Bernabau (Real Madrid)", correct: false}, + { text: "Manchester United (Old Traford)" , correct: false}, + { text: "Camp Nou (Barcelona)" , correct: true}, + { text: "Signal Idunna Park (Dortmund)" , correct: false} + ] + + }, + { + question: "Who is the highest scorer on one single UCL season ?" , + answers: [ + { text: "Cristiano Ronaldo", correct: true}, + { text: "Robert Lewandowski" , correct: false}, + { text: "Lionel Messi" , correct: false}, + { text: "Neymar Jr" , correct: false} + ] + + } +] + + +startBtn.addEventListener("click" , startGame) + +function startGame(){ + startBtn.classList.add("hide") + shuffleQuestions = questions.sort(() => Math.random() - .5) + currentQuestionIndex = 0 + questionsContainer.classList.remove("hide") + setNextQuestion() +} + + +function setNextQuestion(){ + resetState() + showQandA(shuffleQuestions[currentQuestionIndex]) + +} + +function showQandA(question) { + questionElement.innerText = question.question; + question.answers.forEach(answer => { + const optionButton = document.createElement("button") + optionButton.innerText = answer.text + optionButton.classList.add("btn") + if(answer.correct) { + optionButton.dataset.correct = answer.correct + } + optionButton.addEventListener("click" , selectAnswer) + answerButtonsElements[0].appendChild(optionButton) + }); + }; + + +function resetState(){ + while (answerButtonsElements[0].firstChild) { + answerButtonsElements[0].removeChild + (answerButtonsElements[0].firstChild) + } +} + +function selectAnswer(event){ + if(event.target.dataset.correct){ + event.target.classList.add("btn--correct") + correctAnswers++ + }else{ + event.target.classList.add("btn--wrong") + } + if(shuffleQuestions.length > currentQuestionIndex +1){ + currentQuestionIndex++ + setTimeout(setNextQuestion , 600) + }else{ + setTimeout(()=>{ + startBtn.classList.remove("hide") + startBtn.innerText = "Play again" + quizContainer.classList.add("hide") + endGameAlert.classList.remove("hide") + if(correctAnswers <= 2){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `Your football knowledge is nothing to be proud of...` + } + else if(correctAnswers >= 3 && correctAnswers <= 6){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `Not bad` + }else if(correctAnswers >= 7 && correctAnswers <= 9){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `You know your football !` + }else if(correctAnswers == 10){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `You are a true FOOTOPER !!!` + } + + } + , 1000) + + + + +}} + + + diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/dist/model.js b/02-TypeScript/18-personalProject/Need improvment/john-ben/dist/model.js new file mode 100644 index 000000000..fcf76f2f1 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/dist/model.js @@ -0,0 +1,11 @@ +var User = /** @class */ (function () { + function User(name) { + this.name = name; + } + return User; +}()); +var users = []; +// items.push( +// new Item("addias z45", "blue", 120, "shoes", 44, "fgdfgsdg543534t345") +// ); +console.log(users); diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/index.html b/02-TypeScript/18-personalProject/Need improvment/john-ben/index.html new file mode 100644 index 000000000..52c551732 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/index.html @@ -0,0 +1,76 @@ + + + + + + + Todo List 2023 + + + + + + + + + + + + + + Login + +
                      + +
                      +

                      + What's up, +

                      +
                      + + + +
                      +

                      CREATE A TODO

                      +
                      +

                      What's on your todo?

                      + + +

                      Pick a category

                      +
                      + + +
                      + + +
                      +
                      + + + +
                      +

                      TODO LIST

                      +
                      +
                      + + +
                      + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/main.css b/02-TypeScript/18-personalProject/Need improvment/john-ben/main.css new file mode 100644 index 000000000..e26e1754d --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/main.css @@ -0,0 +1,259 @@ +/* Variables */ +:root { + --primary: #EA40A4; + --business: #3a82ee; + --personal: var(--primary); + --light: #EEE; + --grey: #888; + --dark: #313154; + --danger: #ff5b57; + + --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + --business-glow: 0px 0px 4px rgba(58, 130, 238, 0.75); + --personal-glow: 0px 0px 4px rgba(234, 64, 164, 0.75); +} +/* End of Variables */ + +/* Resets */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'montserrat', sans-serif; +} + +input:not([type="radio"]):not([type="checkbox"]), button { + appearance: none; + border: none; + outline: none; + background: none; + cursor: initial; +} +/* End of Resets */ + +body { + background: var(--light); + color: var(--dark); +} + +section { + /* margin-top: 2rem; */ + margin-bottom: 2rem; + padding-left: 1.0rem; + padding-right: 1.0rem; +} + +h3 { + color: var(--dark); + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.5rem; +} + +h4 { + color: var(--dark); + font-size: 0.875rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + + + +.greeting .title { + display: flex; + margin-left: 40%; +} + +.greeting .title input { + margin-left: 0.5rem; + flex: 1 1 0%; + min-width: 0; + color: var(--business); + font-size: 1.5rem; + font-weight: 700; + +} + +.greeting .title{ + color: var(--primary); + font-size: 1.5rem; + font-weight: 700; +} + +.create-todo input[type="text"] { + display: block; + width: 100%; + font-size: 1.125rem; + padding: 1rem 1.5rem; + color: var(--dark); + background-color: #FFF; + border-radius: 0.5rem; + box-shadow: var(--shadow); + margin-bottom: 1.5rem; +} + +.create-todo .options { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 1rem; + margin-bottom: 1.5rem; +} + +.create-todo .options label { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #FFF; + padding: 1.5rem; + box-shadow: var(--shadow); + border-radius: 0.5rem; + cursor: pointer; +} + +input[type="radio"], +input[type="checkbox"] { + display: none; +} + +.bubble { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border-radius: 999px; + border: 2px solid var(--business); + box-shadow: var(--business-glow); +} + +.bubble.personal { + border-color: var(--personal); + box-shadow: var(--personal-glow); +} + +.bubble::after { + content: ''; + display: block; + opacity: 0; + width: 0px; + height: 0px; + background-color: var(--business); + box-shadow: var(--business-glow); + border-radius: 999px; + transition: 0.2s ease-in-out; +} + +.bubble.personal::after { + background-color: var(--personal); + box-shadow: var(--personal-glow); +} + +input:checked ~ .bubble::after { + width: 10px; + height: 10px; + opacity: 1; +} + +.create-todo .options label div { + color: var(--dark); + font-size: 1.125rem; + margin-top: 1rem; +} + +.create-todo input[type="submit"] { + display: block; + width: 100%; + font-size: 1.125rem; + padding: 1rem 1.5rem; + color: #FFF; + font-weight: 700; + text-transform: uppercase; + background-color: var(--primary); + box-shadow: var(--personal-glow); + border-radius: 0.5rem; + cursor: pointer; + transition: 0.2s ease-out; +} + +.create-todo input[type="submit"]:hover { + opacity: 0.75; +} + +.todo-list .list { + margin: 1rem 0; +} + +.todo-list .todo-item { + display: flex; + align-items: center; + background-color: #FFF; + padding: 1rem; + border-radius: 0.5rem; + box-shadow: var(--shadow); + margin-bottom: 1rem; +} + +.todo-item label { + display: block; + margin-right: 1rem; + cursor: pointer; +} + +.todo-item .todo-content { + flex: 1 1 0%; +} + +.todo-item .todo-content input { + color: var(--dark); + font-size: 1.125rem; +} + +.todo-item .actions { + display: flex; + align-items: center; +} + +.todo-item .actions button { + display: block; + padding: 0.5rem; + border-radius: 0.25rem; + color: #FFF; + cursor: pointer; + transition: 0.2s ease-in-out; +} + +.todo-item .actions button:hover { + opacity: 0.75; +} + +.todo-item .actions .edit { + margin-right: 0.5rem; + background-color: var(--primary); +} + +.todo-item .actions .delete { + background-color: var(--danger); +} + +.todo-item.done .todo-content input { + text-decoration: line-through; + color: var(--grey); +} + +a { + + text-decoration: none; + color: #ddd; + font-size: 19px; + background-color: var(--primary); + padding: 10px; + margin: 20px; + display: flex; + /* margin-left: 1700px; */ + justify-content: center; + width: 100px; + box-shadow: 4px 4px 60px rgba(0, 0, 0, .2); + + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/main.js b/02-TypeScript/18-personalProject/Need improvment/john-ben/main.js new file mode 100644 index 000000000..f82039e30 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/main.js @@ -0,0 +1,125 @@ + +window.addEventListener('load', () => { + todos = JSON.parse(localStorage.getItem('todos')) || []; + const nameInput = document.querySelector('#name'); + const newTodoForm = document.querySelector('#new-todo-form'); + + const username = localStorage.getItem('username') || ''; + + nameInput.value = username; + + nameInput.addEventListener('change', (e) => { + localStorage.setItem('username', e.target.value); + }) + + newTodoForm.addEventListener('submit', e => { + e.preventDefault(); + + const todo = { + content: e.target.elements.content.value, + category: e.target.elements.category.value, + done: false, + createdAt: new Date().getTime() + } + + todos.push(todo); + console.log(todos); + + localStorage.setItem('todos', JSON.stringify(todos)); + + // Reset the form + e.target.reset(); + + DisplayTodos() + }) + DisplayTodos() + +}) +function DisplayTodos () { + const todoList = document.querySelector('#todo-list'); + todoList.innerHTML = ""; + + todos.forEach(todo => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + const label = document.createElement('label'); + const input = document.createElement('input'); + const span = document.createElement('span'); + const content = document.createElement('div'); + const actions = document.createElement('div'); + const edit = document.createElement('button'); + const deleteButton = document.createElement('button'); + + input.type = 'checkbox'; + input.checked = todo.done; + span.classList.add('bubble'); + if (todo.category == 'personal') { + span.classList.add('personal'); + } else { + span.classList.add('business'); + } + content.classList.add('todo-content'); + actions.classList.add('actions'); + edit.classList.add('edit'); + deleteButton.classList.add('delete'); + + content.innerHTML = ``; + edit.innerHTML = 'Edit'; + deleteButton.innerHTML = 'Delete'; + + label.appendChild(input); + label.appendChild(span); + actions.appendChild(edit); + actions.appendChild(deleteButton); + todoItem.appendChild(label); + todoItem.appendChild(content); + todoItem.appendChild(actions); + + todoList.appendChild(todoItem); + + if (todo.done) { + todoItem.classList.add('done'); + } + + // fonction qui permet de barer du contenu su la todo list + + input.addEventListener('change', (e) => { + todo.done = e.target.checked; + localStorage.setItem('todos', JSON.stringify(todos)); + + if (todo.done) { + todoItem.classList.add('done'); + } else { + todoItem.classList.remove('done'); + } + + DisplayTodos() + + }) + + // fonction qui permet de changer du contenu su la todo list + + edit.addEventListener('click', (e) => { + const input = content.querySelector('input'); + input.removeAttribute('readonly'); + input.focus(); + input.addEventListener('blur', (e) => { + input.setAttribute('readonly', true); + todo.content = e.target.value; + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos() + + }) + }) + + // fonction qui permet de supprimer du contenu su la todo list + + deleteButton.addEventListener('click', (e) => { + todos = todos.filter(t => t != todo); + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos() + }) + + }) +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/model.ts b/02-TypeScript/18-personalProject/Need improvment/john-ben/model.ts new file mode 100644 index 000000000..7c96faa9b --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/model.ts @@ -0,0 +1,15 @@ +class User { + + constructor( + public name: string, + ) { + + } + } + const users: User[] = []; + + // items.push( + // new Item("addias z45", "blue", 120, "shoes", 44, "fgdfgsdg543534t345") + // ); + console.log(users); + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.css b/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.css new file mode 100644 index 000000000..4e290105f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.css @@ -0,0 +1,133 @@ +body { + background: linear-gradient(45deg, #FC466B, #3F5EFB); + height: 100vh; + font-family: arial, sans-serif; + display: flex; + align-items: center; + justify-content: center; + } + + .container { + position: relative; + } + form { + background: rgba(255, 255, 255, .3); + padding: 3rem; + height: 320px; + border-radius: 20px; + border-left: 1px solid rgba(255, 255, 255, .3); + border-top: 1px solid rgba(255, 255, 255, .3); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + -moz-backdrop-filter: blur(10px); + box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2); + text-align: center; + } + p { + color: white; + font-weight: 600; + opacity: .7; + font-size: 1.4rem; + margin-bottom: 60px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, .2); + } + + a { + + text-decoration: none; + color: #ddd; + font-size: 19px; + background-color: #7c76ea; + padding: 14px 25px; + text-align: center; + display: inline-block; + box-shadow: 4px 4px 60px rgba(0, 0, 0, .2); + + } + + a:hover { + box-shadow: #b756a3; + text-shadow: 2px 2px 6px #00000040; + + } + + a:active { + text-shadow: none; + } + + input { + background: transparent; + border: none; + border-left: 1px solid rgba(255, 255, 255, .3); + border-top: 1px solid rgba(255, 255, 255, .3); + padding: 1rem; + width: 350px; + border-radius: 50px; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + -moz-backdrop-filter: blur(5px); + box-shadow: 4px 4px 60px rgba(0, 0, 0, .2); + color: white; + font-weight: 500; + text-shadow: 2px 2px 4px rgba(0, 0, 0, .2); + transition: all .3s; + margin-bottom: 2em; + } + + input:hover, +input[type="name"]:focus, +input[type="nickname"]:focus{ + background: rgba(255,255,255,0.1); + box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2); +} + +input[type="button"] { + margin-top: 10px; + width: 250px; + font-size: 1rem; + cursor: pointer; +} + +::placeholder { + color: #fff; +} + +.drop { + background: rgba(255, 255, 255, .3); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 10px; + border-left: 1px solid rgba(255, 255, 255, .3); + border-top: 1px solid rgba(255, 255, 255, .3); + box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2); + position: absolute; + transition: all 0.2s ease; + } + + .drop-1 { + height: 80px; width: 80px; + top: -20px; left: -40px; + z-index: -1; + } + + .drop-2 { + height: 80px; width: 80px; + bottom: -30px; right: -10px; + } + + .drop-3 { + height: 100px; width: 100px; + bottom: 120px; right: -50px; + z-index: -1; + } + + .drop-4 { + height: 120px; width: 120px; + top: -60px; right: -60px; + } + + .drop-5 { + height: 60px; width: 60px; + bottom: 170px; left: 90px; + z-index: -1; + } diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.html b/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.html new file mode 100644 index 000000000..c28a935dc --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.html @@ -0,0 +1,36 @@ + + + + + + + Todo List 2023 + + + + + + + + + + + + + + + +
                      +
                      +

                      Welcome to your To-Do-List

                      +
                      + submit + +
                      +
                      +
                      +
                      +
                      +
                      +
                      + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.js b/02-TypeScript/18-personalProject/Need improvment/john-ben/tdl.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/control.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/control.js new file mode 100644 index 000000000..fad7fcdca --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/control.js @@ -0,0 +1,37 @@ + +window.addEventListener('load', () => { + todos = JSON.parse(localStorage.getItem('todos')) || []; + // const nameInput = document.querySelector('#name'); + const newTodoForm = document.querySelector('#new-todo-form'); + + // username = JSON.parse(window.localStorage.getItem('name')); + + // nameInput.value = username; + + // nameInput.addEventListener('change', (e) => { + // localStorage.setItem('username', e.target.value); + // }) + + newTodoForm.addEventListener('submit', e => { + e.preventDefault(); + + const todo = { + content: e.target.elements.content.value, + category: e.target.elements.category.value, + done: false, + createdAt: new Date().getTime() + } + + todos.push(todo); + console.log(todos); + + localStorage.setItem('todos', JSON.stringify(todos)); + + // Reset the form + e.target.reset(); + + DisplayTodos() + }) + DisplayTodos() + +}) \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/control.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/control.dev.js new file mode 100644 index 000000000..2de35bda4 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/control.dev.js @@ -0,0 +1,28 @@ +"use strict"; + +window.addEventListener('load', function () { + todos = JSON.parse(localStorage.getItem('todos')) || []; // const nameInput = document.querySelector('#name'); + + var newTodoForm = document.querySelector('#new-todo-form'); // username = JSON.parse(window.localStorage.getItem('name')); + // nameInput.value = username; + // nameInput.addEventListener('change', (e) => { + // localStorage.setItem('username', e.target.value); + // }) + + newTodoForm.addEventListener('submit', function (e) { + e.preventDefault(); + var todo = { + content: e.target.elements.content.value, + category: e.target.elements.category.value, + done: false, + createdAt: new Date().getTime() + }; + todos.push(todo); + console.log(todos); + localStorage.setItem('todos', JSON.stringify(todos)); // Reset the form + + e.target.reset(); + DisplayTodos(); + }); + DisplayTodos(); +}); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/index.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/index.dev.js new file mode 100644 index 000000000..9a390c31f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/index.dev.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main.dev.js new file mode 100644 index 000000000..f6a0b6a41 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main.dev.js @@ -0,0 +1,107 @@ +"use strict"; + +window.addEventListener('load', function () { + todos = JSON.parse(localStorage.getItem('todos')) || []; + var nameInput = document.querySelector('#name'); + var newTodoForm = document.querySelector('#new-todo-form'); + username = JSON.parse(window.localStorage.getItem('name')); + nameInput.value = username; + nameInput.addEventListener('change', function (e) { + localStorage.setItem('username', e.target.value); + }); + newTodoForm.addEventListener('submit', function (e) { + e.preventDefault(); + var todo = { + content: e.target.elements.content.value, + category: e.target.elements.category.value, + done: false, + createdAt: new Date().getTime() + }; + todos.push(todo); + console.log(todos); + localStorage.setItem('todos', JSON.stringify(todos)); // Reset the form + + e.target.reset(); + DisplayTodos(); + }); + DisplayTodos(); +}); + +function DisplayTodos() { + var todoList = document.querySelector('#todo-list'); + todoList.innerHTML = ""; + todos.forEach(function (todo) { + var todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + var label = document.createElement('label'); + var input = document.createElement('input'); + var span = document.createElement('span'); + var content = document.createElement('div'); + var actions = document.createElement('div'); + var edit = document.createElement('button'); + var deleteButton = document.createElement('button'); + input.type = 'checkbox'; + input.checked = todo.done; + span.classList.add('bubble'); + + if (todo.category == 'personal') { + span.classList.add('personal'); + } else { + span.classList.add('business'); + } + + content.classList.add('todo-content'); + actions.classList.add('actions'); + edit.classList.add('edit'); + deleteButton.classList.add('delete'); + content.innerHTML = ""); + edit.innerHTML = 'Edit'; + deleteButton.innerHTML = 'Delete'; + label.appendChild(input); + label.appendChild(span); + actions.appendChild(edit); + actions.appendChild(deleteButton); + todoItem.appendChild(label); + todoItem.appendChild(content); + todoItem.appendChild(actions); + todoList.appendChild(todoItem); + + if (todo.done) { + todoItem.classList.add('done'); + } // fonction qui permet de barer du contenu su la todo list + + + input.addEventListener('change', function (e) { + todo.done = e.target.checked; + localStorage.setItem('todos', JSON.stringify(todos)); + + if (todo.done) { + todoItem.classList.add('done'); + } else { + todoItem.classList.remove('done'); + } + + DisplayTodos(); + }); // fonction qui permet de changer du contenu su la todo list + + edit.addEventListener('click', function (e) { + var input = content.querySelector('input'); + input.removeAttribute('readonly'); + input.focus(); + input.addEventListener('blur', function (e) { + input.setAttribute('readonly', true); + todo.content = e.target.value; + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos(); + }); + }); // fonction qui permet de supprimer du contenu su la todo list + + deleteButton.addEventListener('click', function (e) { + todos = todos.filter(function (t) { + return t != todo; + }); + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos(); + }); + }); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main2.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main2.dev.js new file mode 100644 index 000000000..9a390c31f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main2.dev.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main3.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main3.dev.js new file mode 100644 index 000000000..c644a459a --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/main3.dev.js @@ -0,0 +1,15 @@ +"use strict"; + +function store() { + //stores items in the localStorage + var name = document.getElementById('name').value; + var user = { + name: name + }; + localStorage.setItem('name', JSON.stringify(user)); //converting object to string +} + +onload = function onload() { + //ensures the page is loaded before functions are executed. + document.getElementById("login").onsubmit = store; +}; \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/script.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/script.dev.js new file mode 100644 index 000000000..475bd8d4f --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/script.dev.js @@ -0,0 +1,107 @@ +"use strict"; + +window.addEventListener('load', function () { + todos = JSON.parse(localStorage.getItem('todos')) || []; // const nameInput = document.querySelector('#name'); + + var newTodoForm = document.querySelector('#new-todo-form'); // username = JSON.parse(window.localStorage.getItem('name')); + // nameInput.value = username; + // nameInput.addEventListener('change', (e) => { + // localStorage.setItem('username', e.target.value); + // }) + + newTodoForm.addEventListener('submit', function (e) { + e.preventDefault(); + var todo = { + content: e.target.elements.content.value, + category: e.target.elements.category.value, + done: false, + createdAt: new Date().getTime() + }; + todos.push(todo); + console.log(todos); + localStorage.setItem('todos', JSON.stringify(todos)); // Reset the form + + e.target.reset(); + DisplayTodos(); + }); + DisplayTodos(); +}); + +function DisplayTodos() { + var todoList = document.querySelector('#todo-list'); + todoList.innerHTML = ""; + todos.forEach(function (todo) { + var todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + var label = document.createElement('label'); + var input = document.createElement('input'); + var span = document.createElement('span'); + var content = document.createElement('div'); + var actions = document.createElement('div'); + var edit = document.createElement('button'); + var deleteButton = document.createElement('button'); + input.type = 'checkbox'; + input.checked = todo.done; + span.classList.add('bubble'); + + if (todo.category == 'personal') { + span.classList.add('personal'); + } else { + span.classList.add('business'); + } + + content.classList.add('todo-content'); + actions.classList.add('actions'); + edit.classList.add('edit'); + deleteButton.classList.add('delete'); + content.innerHTML = ""); + edit.innerHTML = 'Edit'; + deleteButton.innerHTML = 'Delete'; + label.appendChild(input); + label.appendChild(span); + actions.appendChild(edit); + actions.appendChild(deleteButton); + todoItem.appendChild(label); + todoItem.appendChild(content); + todoItem.appendChild(actions); + todoList.appendChild(todoItem); + + if (todo.done) { + todoItem.classList.add('done'); + } // fonction qui permet de barer du contenu su la todo list + + + input.addEventListener('change', function (e) { + todo.done = e.target.checked; + localStorage.setItem('todos', JSON.stringify(todos)); + + if (todo.done) { + todoItem.classList.add('done'); + } else { + todoItem.classList.remove('done'); + } + + DisplayTodos(); + }); // fonction qui permet de changer du contenu su la todo list + + edit.addEventListener('click', function (e) { + var input = content.querySelector('input'); + input.removeAttribute('readonly'); + input.focus(); + input.addEventListener('blur', function (e) { + input.setAttribute('readonly', true); + todo.content = e.target.value; + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos(); + }); + }); // fonction qui permet de supprimer du contenu su la todo list + + deleteButton.addEventListener('click', function (e) { + todos = todos.filter(function (t) { + return t != todo; + }); + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos(); + }); + }); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/view.dev.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/view.dev.js new file mode 100644 index 000000000..09bcdfe02 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/dist/view.dev.js @@ -0,0 +1,80 @@ +"use strict"; + +function DisplayTodos() { + var todoList = document.querySelector('#todo-list'); + todoList.innerHTML = ""; + todos.forEach(function (todo) { + var todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + var label = document.createElement('label'); + var input = document.createElement('input'); + var span = document.createElement('span'); + var content = document.createElement('div'); + var actions = document.createElement('div'); + var edit = document.createElement('button'); + var deleteButton = document.createElement('button'); + input.type = 'checkbox'; + input.checked = todo.done; + span.classList.add('bubble'); + + if (todo.category == 'personal') { + span.classList.add('personal'); + } else { + span.classList.add('business'); + } + + content.classList.add('todo-content'); + actions.classList.add('actions'); + edit.classList.add('edit'); + deleteButton.classList.add('delete'); + content.innerHTML = ""); + edit.innerHTML = 'Edit'; + deleteButton.innerHTML = 'Delete'; + label.appendChild(input); + label.appendChild(span); + actions.appendChild(edit); + actions.appendChild(deleteButton); + todoItem.appendChild(label); + todoItem.appendChild(content); + todoItem.appendChild(actions); + todoList.appendChild(todoItem); + + if (todo.done) { + todoItem.classList.add('done'); + } // fonction qui permet de barer du contenu su la todo list + + + input.addEventListener('change', function (e) { + todo.done = e.target.checked; + localStorage.setItem('todos', JSON.stringify(todos)); + + if (todo.done) { + todoItem.classList.add('done'); + } else { + todoItem.classList.remove('done'); + } + + DisplayTodos(); + }); // fonction qui permet de changer du contenu su la todo list + + edit.addEventListener('click', function (e) { + var input = content.querySelector('input'); + input.removeAttribute('readonly'); + input.focus(); + input.addEventListener('blur', function (e) { + input.setAttribute('readonly', true); + todo.content = e.target.value; + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos(); + }); + }); // fonction qui permet de supprimer du contenu su la todo list + + deleteButton.addEventListener('click', function (e) { + todos = todos.filter(function (t) { + return t != todo; + }); + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos(); + }); + }); +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/index.css b/02-TypeScript/18-personalProject/Need improvment/john-ben2/index.css new file mode 100644 index 000000000..e411f17e6 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/index.css @@ -0,0 +1,259 @@ +/* Variables */ +:root { + --primary: #EA40A4; + --business: #3a82ee; + --personal: var(--primary); + --light: #EEE; + --grey: #888; + --dark: #313154; + --danger: #ff5b57; + + --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + --business-glow: 0px 0px 4px rgba(58, 130, 238, 0.75); + --personal-glow: 0px 0px 4px rgba(234, 64, 164, 0.75); +} +/* End of Variables */ + +/* Resets */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'montserrat', sans-serif; +} + +input:not([type="radio"]):not([type="checkbox"]), button { + appearance: none; + border: none; + outline: none; + background: none; + cursor: initial; +} +/* End of Resets */ + +body { + background: var(--light); + color: var(--dark); +} + +section { + /* margin-top: 2rem; */ + margin-bottom: 2rem; + padding-left: 1.0rem; + padding-right: 1.0rem; +} + +h3 { + color: var(--primary); + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.5rem; +} + +h4 { + color: var(--dark); + font-size: 0.875rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + + + +.greeting .title { + display: flex; + margin-left: 40%; +} + +.greeting .title input { + margin-left: 0.5rem; + flex: 1 1 0%; + min-width: 0; + color: var(--business); + font-size: 1.5rem; + font-weight: 700; + +} + +.greeting .title{ + color: var(--primary); + font-size: 1.5rem; + font-weight: 700; +} + +.create-todo input[type="text"] { + display: block; + width: 100%; + font-size: 1.125rem; + padding: 1rem 1.5rem; + color: var(--dark); + background-color: #FFF; + border-radius: 0.5rem; + box-shadow: var(--shadow); + margin-bottom: 1.5rem; +} + +.create-todo .options { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 1rem; + margin-bottom: 1.5rem; +} + +.create-todo .options label { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #FFF; + padding: 1.5rem; + box-shadow: var(--shadow); + border-radius: 0.5rem; + cursor: pointer; +} + +input[type="radio"], +input[type="checkbox"] { + display: none; +} + +.bubble { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border-radius: 999px; + border: 2px solid var(--business); + box-shadow: var(--business-glow); +} + +.bubble.personal { + border-color: var(--personal); + box-shadow: var(--personal-glow); +} + +.bubble::after { + content: ''; + display: block; + opacity: 0; + width: 0px; + height: 0px; + background-color: var(--business); + box-shadow: var(--business-glow); + border-radius: 999px; + transition: 0.2s ease-in-out; +} + +.bubble.personal::after { + background-color: var(--personal); + box-shadow: var(--personal-glow); +} + +input:checked ~ .bubble::after { + width: 10px; + height: 10px; + opacity: 1; +} + +.create-todo .options label div { + color: var(--dark); + font-size: 1.125rem; + margin-top: 1rem; +} + +.create-todo input[type="submit"] { + display: block; + width: 100%; + font-size: 1.125rem; + padding: 1rem 1.5rem; + color: #FFF; + font-weight: 700; + text-transform: uppercase; + background-color: var(--primary); + box-shadow: var(--personal-glow); + border-radius: 0.5rem; + cursor: pointer; + transition: 0.2s ease-out; +} + +.create-todo input[type="submit"]:hover { + opacity: 0.75; +} + +.todo-list .list { + margin: 1rem 0; +} + +.todo-list .todo-item { + display: flex; + align-items: center; + background-color: #FFF; + padding: 1rem; + border-radius: 0.5rem; + box-shadow: var(--shadow); + margin-bottom: 1rem; +} + +.todo-item label { + display: block; + margin-right: 1rem; + cursor: pointer; +} + +.todo-item .todo-content { + flex: 1 1 0%; +} + +.todo-item .todo-content input { + color: var(--dark); + font-size: 1.125rem; +} + +.todo-item .actions { + display: flex; + align-items: center; +} + +.todo-item .actions button { + display: block; + padding: 0.5rem; + border-radius: 0.25rem; + color: #FFF; + cursor: pointer; + transition: 0.2s ease-in-out; +} + +.todo-item .actions button:hover { + opacity: 0.75; +} + +.todo-item .actions .edit { + margin-right: 0.5rem; + background-color: var(--primary); +} + +.todo-item .actions .delete { + background-color: var(--danger); +} + +.todo-item.done .todo-content input { + text-decoration: line-through; + color: var(--grey); +} + +a { + + text-decoration: none; + color: #ddd; + font-size: 19px; + background-color: var(--primary); + padding: 10px; + margin: 20px; + display: flex; + /* margin-left: 1700px; */ + justify-content: center; + width: 100px; + box-shadow: 4px 4px 60px rgba(0, 0, 0, .2); + + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/index.html b/02-TypeScript/18-personalProject/Need improvment/john-ben2/index.html new file mode 100644 index 000000000..1606ae985 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/index.html @@ -0,0 +1,81 @@ + + + + + + + Todo List 2023 + + + + + + + + + + + + + + + + Login + T-D-L + +
                      + +
                      +

                      + What's up,

                      + +
                      + + + +
                      +

                      CREATE A TODO

                      +
                      +

                      What's on your todo?

                      + + +

                      Pick a category

                      +
                      + + +
                      + + + +
                      +
                      + + + + +
                      +

                      TODO LIST

                      +
                      +
                      + + +
                      + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/login.css b/02-TypeScript/18-personalProject/Need improvment/john-ben2/login.css new file mode 100644 index 000000000..7143966d2 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/login.css @@ -0,0 +1,133 @@ +body { + background: linear-gradient(45deg, #FC466B, #3F5EFB); + height: 100vh; + font-family: arial, sans-serif; + display: flex; + align-items: center; + justify-content: center; + } + + .container { + position: relative; + } + form { + background: rgba(255, 255, 255, .3); + padding: 3rem; + height: 320px; + border-radius: 20px; + border-left: 1px solid rgba(255, 255, 255, .3); + border-top: 1px solid rgba(255, 255, 255, .3); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + -moz-backdrop-filter: blur(10px); + box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2); + text-align: center; + } + p { + color: white; + font-weight: 600; + opacity: .7; + font-size: 1.4rem; + margin-bottom: 60px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, .2); + } + + a,button { + + text-decoration: none; + color: #ddd; + font-size: 19px; + background-color: #7c76ea; + padding: 14px 25px; + text-align: center; + display: inline-block; + box-shadow: 4px 4px 60px rgba(0, 0, 0, .2); + + } + + a:hover ,button:hover { + box-shadow: #b756a3; + text-shadow: 2px 2px 6px #00000040; + + } + + a:active , button:active { + text-shadow: none; + } + + input { + background: transparent; + border: none; + border-left: 1px solid rgba(255, 255, 255, .3); + border-top: 1px solid rgba(255, 255, 255, .3); + padding: 1rem; + width: 350px; + border-radius: 50px; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + -moz-backdrop-filter: blur(5px); + box-shadow: 4px 4px 60px rgba(0, 0, 0, .2); + color: white; + font-weight: 500; + text-shadow: 2px 2px 4px rgba(0, 0, 0, .2); + transition: all .3s; + margin-bottom: 2em; + } + + input:hover, +input[type="name"]:focus, +input[type="nickname"]:focus{ + background: rgba(255,255,255,0.1); + box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2); +} + +input[type="button"] { + margin-top: 10px; + width: 250px; + font-size: 1rem; + cursor: pointer; +} + +::placeholder { + color: #fff; +} + +.drop { + background: rgba(255, 255, 255, .3); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 10px; + border-left: 1px solid rgba(255, 255, 255, .3); + border-top: 1px solid rgba(255, 255, 255, .3); + box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2); + position: absolute; + transition: all 0.2s ease; + } + + .drop-1 { + height: 80px; width: 80px; + top: -20px; left: -40px; + z-index: -1; + } + + .drop-2 { + height: 80px; width: 80px; + bottom: -30px; right: -10px; + } + + .drop-3 { + height: 100px; width: 100px; + bottom: 120px; right: -50px; + z-index: -1; + } + + .drop-4 { + height: 120px; width: 120px; + top: -60px; right: -60px; + } + + .drop-5 { + height: 60px; width: 60px; + bottom: 170px; left: 90px; + z-index: -1; + } diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/login.html b/02-TypeScript/18-personalProject/Need improvment/john-ben2/login.html new file mode 100644 index 000000000..dab936024 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/login.html @@ -0,0 +1,39 @@ + + + + + + + Todo List 2023 + + + + + + + + + + + + + + + + +
                      +
                      +

                      Welcome to your To-Do-List

                      +
                      + + To T-D-L + + +
                      +
                      +
                      +
                      +
                      +
                      +
                      + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/model.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/model.js new file mode 100644 index 000000000..cfabfc880 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/model.js @@ -0,0 +1,17 @@ +function store(){ //stores items in the localStorage + var name = document.getElementById('name').value; + + + const user = { + name: name, + } + + localStorage.setItem('name',JSON.stringify(user)); + //converting object to string +} + + + +onload =function(){ //ensures the page is loaded before functions are executed. + document.getElementById("login").onsubmit = store +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/john-ben2/view.js b/02-TypeScript/18-personalProject/Need improvment/john-ben2/view.js new file mode 100644 index 000000000..b8ac94f2e --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/john-ben2/view.js @@ -0,0 +1,90 @@ + + +function DisplayTodos () { + const todoList = document.querySelector('#todo-list'); + todoList.innerHTML = ""; + + todos.forEach(todo => { + const todoItem = document.createElement('div'); + todoItem.classList.add('todo-item'); + + const label = document.createElement('label'); + const input = document.createElement('input'); + const span = document.createElement('span'); + const content = document.createElement('div'); + const actions = document.createElement('div'); + const edit = document.createElement('button'); + const deleteButton = document.createElement('button'); + + input.type = 'checkbox'; + input.checked = todo.done; + span.classList.add('bubble'); + if (todo.category == 'personal') { + span.classList.add('personal'); + } else { + span.classList.add('business'); + } + content.classList.add('todo-content'); + actions.classList.add('actions'); + edit.classList.add('edit'); + deleteButton.classList.add('delete'); + + content.innerHTML = ``; + edit.innerHTML = 'Edit'; + deleteButton.innerHTML = 'Delete'; + + label.appendChild(input); + label.appendChild(span); + actions.appendChild(edit); + actions.appendChild(deleteButton); + todoItem.appendChild(label); + todoItem.appendChild(content); + todoItem.appendChild(actions); + + todoList.appendChild(todoItem); + + if (todo.done) { + todoItem.classList.add('done'); + } + + // fonction qui permet de barer du contenu su la todo list + + input.addEventListener('change', (e) => { + todo.done = e.target.checked; + localStorage.setItem('todos', JSON.stringify(todos)); + + if (todo.done) { + todoItem.classList.add('done'); + } else { + todoItem.classList.remove('done'); + } + + DisplayTodos() + + }) + + // fonction qui permet de changer du contenu su la todo list + + edit.addEventListener('click', (e) => { + const input = content.querySelector('input'); + input.removeAttribute('readonly'); + input.focus(); + input.addEventListener('blur', (e) => { + input.setAttribute('readonly', true); + todo.content = e.target.value; + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos() + + }) + }) + + // fonction qui permet de supprimer du contenu su la todo list + + deleteButton.addEventListener('click', (e) => { + todos = todos.filter(t => t != todo); + localStorage.setItem('todos', JSON.stringify(todos)); + DisplayTodos() + }) + + }) +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/matanel harush/css/dist/style.css b/02-TypeScript/18-personalProject/Need improvment/matanel harush/css/dist/style.css new file mode 100644 index 000000000..045728c29 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/matanel harush/css/dist/style.css @@ -0,0 +1,118 @@ +body { + background-color: #333; + color: #fff; + font-family: Arial, sans-serif; +} + +.container { + width: 500px; + margin: 50px auto; + text-align: center; +} + +h1 { + text-align: center; + font-size: 36px; + text-shadow: 2px 2px #000; + margin-bottom: 40px; +} + +.form { + display: block; + text-align: center; +} + +form { + display: inline-block; + margin-left: auto; + margin-right: auto; + text-align: left; +} + +input[type=text] { + padding: 10px; + font-size: 16px; + width: 300px; + background-color: #555; + color: #fff; + border: none; + border-radius: 5px; + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + font-size: 16px; + background-color: #9B59B6; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + margin-right: 10px; +} + +.displayedText { + font-size: 20px; + font-weight: bold; + color: #9B59B6; + text-align: center; +} + +.footer { + background: #000; + padding: 30px 0px; + margin-top: 350px; + font-family: "Play", sans-serif; + text-align: center; +} + +.footer .row { + width: 100%; + justify-content: center; + padding: 0.6% 0%; + color: gray; + font-size: 0.8em; +} + +.footer .row a { + text-decoration: none; + color: gray; + transition: 0.5s; +} + +.footer .row a:hover { + color: #fff; +} + +.footer .row ul { + width: 100%; +} + +.footer .row ul li { + display: inline-block; + justify-content: center; + margin: 20px 30px; + margin-right: 115px; +} + +.footer .row a i { + font-size: 2em; + margin: 0% 1%; +} + +@media (max-width: 720px) { + .footer { + text-align: left; + padding: 5%; + } + + .footer .row ul li { + display: block; + margin: 10px 0px; + text-align: left; + } + + .footer .row a i { + margin: 0% 3%; + } +} \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/matanel harush/css/style.scss b/02-TypeScript/18-personalProject/Need improvment/matanel harush/css/style.scss new file mode 100644 index 000000000..71001e921 --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/matanel harush/css/style.scss @@ -0,0 +1,120 @@ +body { + background-color: #333; + color: #fff; + font-family: Arial, sans-serif; + } + + .container { + width: 500px; + margin: 50px auto; + text-align: center; + } + + h1 { + text-align: center; + font-size: 36px; + text-shadow: 2px 2px #000; + margin-bottom: 40px; + } + + + .form{ + display: block; + text-align: center; + } + + form{ + display: inline-block; + margin-left: auto; + margin-right: auto; + text-align: left; + } + + input[type="text"] { + padding: 10px; + font-size: 16px; + width: 300px; + background-color: #555; + color: #fff; + border: none; + border-radius: 5px; + margin-bottom: 20px; + } + + button { + padding: 10px 20px; + font-size: 16px; + background-color: #9B59B6; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + margin-right: 10px; + } + + + .displayedText { + font-size: 20px; + font-weight: bold; + color: #9B59B6; + text-align: center; + } + + + + .footer{ + background:#000; + padding:30px 0px; + margin-top: 350px; + font-family: 'Play', sans-serif; + text-align:center; + } + + .footer .row{ + width:100%; + justify-content: center; + padding:0.6% 0%; + color:gray; + font-size:0.8em; + } + + .footer .row a{ + text-decoration:none; + color:gray; + transition:0.5s; + } + + .footer .row a:hover{ + color:#fff; + } + + .footer .row ul{ + width:100%; + } + + .footer .row ul li{ + display:inline-block; + justify-content: center; + margin:20px 30px; + margin-right: 115px; + } + + .footer .row a i{ + font-size:2em; + margin:0% 1%; + } + + @media (max-width:720px){ + .footer{ + text-align:left; + padding:5%; + } + .footer .row ul li{ + display:block; + margin:10px 0px; + text-align:left; + } + .footer .row a i{ + margin:0% 3%; + } + } \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/matanel harush/index.html b/02-TypeScript/18-personalProject/Need improvment/matanel harush/index.html new file mode 100644 index 000000000..800d8775c --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/matanel harush/index.html @@ -0,0 +1,43 @@ + + + + + + + Forex Course Access + + + + + + + + +

                      Give access to forex course

                      + +
                      +
                      + + + +
                      +
                      +
                      +
                      + + +
                      +
                      +
                      + +
                      + + +
                      + INT PROJECT +
                      +
                      +
                      + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/Need improvment/matanel harush/src/submit.js b/02-TypeScript/18-personalProject/Need improvment/matanel harush/src/submit.js new file mode 100644 index 000000000..20af55a8e --- /dev/null +++ b/02-TypeScript/18-personalProject/Need improvment/matanel harush/src/submit.js @@ -0,0 +1,87 @@ +let savedTexts = []; + +function handleSubmit(event) { + event.preventDefault(); + const inputText = document.getElementById("inputText").value; + if (savedTexts.includes(inputText)) { + alert("User already exist"); + } else { + createTextObject(inputText); + savedTexts.push(inputText); + } +} + +function handleRemove(event) { + event.preventDefault(); + const inputText = document.getElementById("inputText").value; + if (!savedTexts.includes(inputText)) { + alert("This user does not exist"); + } else { + removeTextObject(inputText); + const index = savedTexts.indexOf(inputText); + savedTexts.splice(index, 1); + } +} + +function createTextObject(text) { + const textObject = { text }; + displayText(textObject); +} + +function removeTextObject(text) { + const displayContainer = document.getElementById("displayContainer"); + const displayedTexts = document.getElementsByClassName("displayedText"); + for (const displayedText of displayedTexts) { + if (displayedText.innerText === text) { + displayContainer.removeChild(displayedText); + break; + } + } +} + +function displayText(textObject) { + const displayContainer = document.getElementById("displayContainer"); + const textParagraph = document.createElement("p"); + textParagraph.innerText = textObject.text; + textParagraph.classList.add("displayedText"); + displayContainer.appendChild(textParagraph); +} + + + + +// const fs = require('fs'); +// const http = require('http'); +// const querystring = require('querystring'); + +// const server = http.createServer(function (req, res) { +// if (req.method === 'POST') { +// let body = ''; +// req.on('data', function (data) { +// body += data; +// }); +// req.on('end', function () { +// const post = querystring.parse(body); +// const text = post.text; +// fs.writeFile('text.txt', text, function (err) { +// if (err) { +// console.log(err); +// } else { +// res.end('Text written to file'); +// } +// }); +// }); +// } else { +// fs.readFile('form.html', function (err, data) { +// if (err) { +// console.log(err); +// } else { +// res.writeHead(200, { 'Content-Type': 'text/html' }); +// res.write(data); +// res.end(); +// } +// }); +// } +// }); + +// server.listen(5500); diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/login.dev.js b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/login.dev.js new file mode 100644 index 000000000..9a390c31f --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/login.dev.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/login.js b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/login.js new file mode 100644 index 000000000..6e2abb03c --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/login.js @@ -0,0 +1,4 @@ +document.getElementById("submitted").addEventListener("click", gotoUrl); +function gotoUrl() { + window.location.assign("./index.html"); +} diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/script.dev.js b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/script.dev.js new file mode 100644 index 000000000..06ccf8932 --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/script.dev.js @@ -0,0 +1,141 @@ +"use strict"; + +var record = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; +var imgRec = []; +var rand; +var flipIndex = 0; +var cardTextRec = []; +var cardRec = []; +var cardNum; +var front; +var back; +var cardChk = 0; +var memory = document.getElementById("game"); +var newGame; +var h1Res = document.getElementById("h1Res"); +var pRes = document.getElementById("pRes"); +var status = 0; +var gameOver = false; +memory.addEventListener("click", function (e) { + var el = e.target.parentElement; + var numId = el.id; + + if (Number.isInteger(parseInt(numId.replace("back", ""), 10))) { + cardClick(el.parentElement.id); + } else { + cardClick(numId); + } +}); + +function cardClick(cardId) { + cardNum = cardId.replace("card", ""); + cardNum = parseInt(cardNum, 10); + + if (record[cardNum - 1] == 0 && cardChk == 0 && gameOver == false) { + front = document.getElementById("front" + cardNum); + back = document.getElementById("back" + cardNum); + front.style.transform = "rotateY(-180deg)"; + back.style.transform = "rotateY(0deg)"; + cardTextRec.push(back.innerHTML); + cardRec.push(cardNum); + flipIndex++; + record[cardNum - 1] = 1; + + if (flipIndex == 2) { + if (cardTextRec[0] == cardTextRec[1]) { + correct++; + scoreEl.innerHTML = "Score: " + correct; + cardRec = []; + cardTextRec = []; + flipIndex = 0; + + if (correct == 10) { + setTimeout(function () { + displayResult(); + }, 600); + } + + return; + } else { + cardChk = 1; + setTimeout(function () { + flipBack(); + }, 600); + return; + } + } + } + + if (gameOver == true) { + alert("Game is over."); + } +} + +function flipBack() { + front = document.getElementById("front" + cardRec[0]); + back = document.getElementById("back" + cardRec[0]); + front.style.transform = "rotateY(0deg)"; + back.style.transform = "rotateY(180deg)"; + front = document.getElementById("front" + cardRec[1]); + back = document.getElementById("back" + cardRec[1]); + front.style.transform = "rotateY(0deg)"; + back.style.transform = "rotateY(180deg)"; + record[cardRec[0] - 1] = 0; + record[cardRec[1] - 1] = 0; + cardTextRec = []; + cardRec = []; + flipIndex = 0; + cardChk = 0; +} + +newGame = document.getElementById("new"); +newGame.addEventListener("click", newClick); + +function newClick() { + window.location.reload(); +} + +function newBoard() { + for (var i = 0; i < 20; i++) { + if (i == 0) { + rand = Math.round(Math.random() * images.length); + + while (rand == images.length) { + rand = Math.round(Math.random() * images.length); + } + + imgRec[i] = rand; + } else { + while (status == 0) { + rand = Math.round(Math.random() * images.length); + + if (rand !== images.length) { + for (var j = 0; j < imgRec.length; j++) { + if (rand == imgRec[j]) { + break; + } else if (j == imgRec.length - 1) { + status = 1; + imgRec[i] = rand; + } + } + } + } + } + + status = 0; + document.getElementById("back" + (i + 1)).innerHTML = images[rand]; + } +} + +function displayResult() { + gameOver = true; + var width = window.innerWidth; + + if (correct == 10) { + h1Res.innerHTML = "Congratulations! You won!"; + } else { + h1Res.innerHTML = "Try again!"; + } +} + +window.onload = newBoard(); \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/script.js b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/script.js new file mode 100644 index 000000000..d79e1460b --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/dist/script.js @@ -0,0 +1,134 @@ +var record = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; +var imgRec = []; +var rand; +var flipIndex = 0; +var cardTextRec = []; +var cardRec = []; +var cardNum; +var front; +var back; +var cardChk = 0; +var memory = document.getElementById("game"); +var newGame; +var opacityD = document.getElementById("opacityD"); +var h1Res = document.getElementById("h1Res"); +var pRes = document.getElementById("pRes"); +var status = 0; +var gameOver = false; +memory.addEventListener("click", function (e) { + var el = e.target.parentElement; + var numId = el.id; + if (Number.isInteger(parseInt(numId.replace("back", ""), 10))) { + cardClick(el.parentElement.id); + } + else { + cardClick(numId); + } +}); +function cardClick(cardId) { + cardNum = cardId.replace("card", ""); + cardNum = parseInt(cardNum, 10); + if (record[cardNum - 1] == 0 && cardChk == 0 && gameOver == false) { + front = document.getElementById("front" + cardNum); + back = document.getElementById("back" + cardNum); + front.style.transform = "rotateY(-180deg)"; + back.style.transform = "rotateY(0deg)"; + cardTextRec.push(back.innerHTML); + cardRec.push(cardNum); + flipIndex++; + record[cardNum - 1] = 1; + if (flipIndex == 2) { + if (cardTextRec[0] == cardTextRec[1]) { + correct++; + scoreEl.innerHTML = "Score: " + correct; + cardRec = []; + cardTextRec = []; + flipIndex = 0; + if (correct == 10) { + setTimeout(function () { displayResult(); }, 600); + } + return; + } + else { + cardChk = 1; + setTimeout(function () { flipBack(); }, 600); + return; + } + } + } + if (gameOver == true) { + alert("Game is over. Click on the New Game button to start a new game"); + } +} +function flipBack() { + front = document.getElementById("front" + cardRec[0]); + back = document.getElementById("back" + cardRec[0]); + front.style.transform = "rotateY(0deg)"; + back.style.transform = "rotateY(180deg)"; + front = document.getElementById("front" + cardRec[1]); + back = document.getElementById("back" + cardRec[1]); + front.style.transform = "rotateY(0deg)"; + back.style.transform = "rotateY(180deg)"; + record[cardRec[0] - 1] = 0; + record[cardRec[1] - 1] = 0; + cardTextRec = []; + cardRec = []; + flipIndex = 0; + cardChk = 0; +} +newGame = document.getElementById("new"); +newGame.addEventListener("click", newClick); +function newClick() { + window.location.reload(); +} +function newBoard() { + for (var i = 0; i < 20; i++) { + if (i == 0) { + rand = Math.round(Math.random() * images.length); + while (rand == images.length) { + rand = Math.round(Math.random() * images.length); + } + imgRec[i] = rand; + } + else { + while (status == 0) { + rand = Math.round(Math.random() * images.length); + if (rand !== images.length) { + for (var j = 0; j < imgRec.length; j++) { + if (rand == imgRec[j]) { + break; + } + else if (j == imgRec.length - 1) { + status = 1; + imgRec[i] = rand; + } + } + } + } + } + status = 0; + document.getElementById("back" + (i + 1)).innerHTML = images[rand]; + } +} +function displayResult() { + gameOver = true; + var width = window.innerWidth; + opacityD.style.display = "block"; + result.style.display = "block"; + result.style.left = (width / 2) - (500 / 2) + "px"; + result.style.top = 150 + "px"; + if (correct == 10) { + h1Res.innerHTML = "Congratulations! You won!"; + pRes.innerHTML = "You've scored " + correct + " points."; + } + else { + h1Res.innerHTML = "Try again!"; + pRes.innerHTML = "You've scored " + correct + " points."; + } +} +var okayButton = document.getElementById("okayButton"); +okayButton.addEventListener("click", okayClick); +function okayClick() { + opacityD.style.display = "none"; +} +window.onload = newBoard(); diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/back.jpg b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/back.jpg new file mode 100644 index 000000000..493d44714 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/back.jpg differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/bone.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/bone.png new file mode 100644 index 000000000..2687043db Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/bone.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img1.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img1.png new file mode 100644 index 000000000..87980b688 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img1.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img10.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img10.png new file mode 100644 index 000000000..03705a803 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img10.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img2.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img2.png new file mode 100644 index 000000000..52cb7ce2c Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img2.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img3.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img3.png new file mode 100644 index 000000000..1af58d763 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img3.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img4.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img4.png new file mode 100644 index 000000000..5007beec7 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img4.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img5.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img5.png new file mode 100644 index 000000000..d1601083b Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img5.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img6.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img6.png new file mode 100644 index 000000000..08d31b3fc Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img6.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img7.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img7.png new file mode 100644 index 000000000..789070798 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img7.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img8.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img8.png new file mode 100644 index 000000000..39e8617c7 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img8.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img9.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img9.png new file mode 100644 index 000000000..085a9022a Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/images/img9.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/index.html b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/index.html new file mode 100644 index 000000000..2d7590368 --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/index.html @@ -0,0 +1,103 @@ + + + + + + Memory Game + + + + +
                      + + +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      +
                      + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/login.html b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/login.html new file mode 100644 index 000000000..26207929f --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/login.html @@ -0,0 +1,40 @@ + + + + + + + login form + + + + +
                      +
                      +
                      +
                      + + +
                      +
                      + welcome +
                      + +
                      +
                      + + +
                      +
                      + + +
                      + Remember Password + + + +
                      +
                      + + + diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/login.ts b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/login.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/pictures/dogs1.jpg b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/pictures/dogs1.jpg new file mode 100644 index 000000000..5e84ef15f Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/pictures/dogs1.jpg differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/pictures/welcome.png b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/pictures/welcome.png new file mode 100644 index 000000000..0400696c6 Binary files /dev/null and b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/pictures/welcome.png differ diff --git a/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/script.js b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/script.js new file mode 100644 index 000000000..85a80e9c5 --- /dev/null +++ b/02-TypeScript/18-personalProject/PrologedDelay/Tanya Holczer/pictures/script.js @@ -0,0 +1,146 @@ +var record = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; +var imgRec = []; +var rand; +var flipIndex = 0; +var cardTextRec = []; +var cardRec = []; +var cardNum; +var front; +var back; +var cardChk = 0; + + +var memory = document.getElementById("game"); +var newGame; +var h1Res = document.getElementById("h1Res"); +var pRes = document.getElementById("pRes"); +var status = 0; +var gameOver = false; + + +memory.addEventListener("click",function(e) { + var el = e.target.parentElement; + var numId = el.id; + if(Number.isInteger(parseInt(numId.replace("back",""),10))) { + cardClick(el.parentElement.id); + } + else { + cardClick(numId); + } +}); + +function cardClick(cardId) { + cardNum = cardId.replace("card",""); + cardNum = parseInt(cardNum,10); + + + if(record[cardNum-1] == 0 && cardChk == 0 && gameOver == false) { + front = document.getElementById("front" + cardNum); + back = document.getElementById("back" + cardNum); + front.style.transform = "rotateY(-180deg)"; + back.style.transform = "rotateY(0deg)"; + + + cardTextRec.push(back.innerHTML); + cardRec.push(cardNum); + flipIndex++; + record[cardNum-1] = 1; + + if(flipIndex == 2) { + if(cardTextRec[0] == cardTextRec[1]) { + correct++; + scoreEl.innerHTML = "Score: " + correct; + cardRec = []; + cardTextRec = []; + flipIndex = 0; + + if(correct == 10) { + setTimeout(function(){displayResult();},600); + } + return; + } + else { + cardChk = 1; + setTimeout(function(){flipBack();},600); + return; + } + } + } + + if(gameOver == true) { + alert("Game is over."); + } +} + +function flipBack() { + front = document.getElementById("front" + cardRec[0]); + back = document.getElementById("back" + cardRec[0]); + front.style.transform = "rotateY(0deg)"; + back.style.transform = "rotateY(180deg)"; + + front = document.getElementById("front"+cardRec[1]); + back = document.getElementById("back"+cardRec[1]); + front.style.transform = "rotateY(0deg)"; + back.style.transform = "rotateY(180deg)"; + + record[cardRec[0]-1] = 0; + record[cardRec[1]-1] = 0; + cardTextRec= []; + cardRec = []; + flipIndex = 0; + cardChk = 0; +} + + +newGame = document.getElementById("new"); +newGame.addEventListener("click",newClick); + +function newClick() { + window.location.reload(); +} + + +function newBoard() { + for(var i=0; i<20; i++) { + if(i==0) { + rand = Math.round(Math.random() * images.length); + while(rand == images.length) { + rand = Math.round(Math.random() * images.length); + } + imgRec[i] = rand; + } + else { + while(status == 0) { + rand = Math.round(Math.random() * images.length); + if(rand !== images.length) { + for(var j=0; j + + + + + + + + Add new recipe + + + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/liat asulin/new-recipe/new-recipe.ts b/02-TypeScript/18-personalProject/liat asulin/new-recipe/new-recipe.ts new file mode 100644 index 000000000..c3a7f6984 --- /dev/null +++ b/02-TypeScript/18-personalProject/liat asulin/new-recipe/new-recipe.ts @@ -0,0 +1,76 @@ +interface Recipe { + id: number; + name: string; + ingredients: string[]; + instructions: string; +} + +const startingRecipes: Recipe[] = [ + { + id: 1, + name: "Spaghetti Bolognese", + ingredients: ["Spaghetti", "Tomato Sauce", "Ground Beef", "Onions", "Garlic"], + instructions: "1. Cook spaghetti according to package instructions.\n2. In a separate pan, sauté onions and garlic until softened.\n3. Add ground beef and cook until browned.\n4. Stir in tomato sauce and let simmer for 10 minutes.\n5. Serve sauce over cooked spaghetti." + }, + { + id: 2, + name: "Pancakes", + ingredients: ["Flour", "Baking Powder", "Salt", "Sugar", "Eggs", "Milk", "Butter"], + instructions: "1. In a large bowl, whisk together flour, baking powder, salt, and sugar.\n2. In a separate bowl, beat together eggs and milk.\n3. Stir the egg mixture into the dry ingredients until just combined.\n4. Heat a non-stick pan over medium heat and melt a little butter.\n5. Pour batter into the pan to form pancakes.\n6. Cook until bubbles form on the surface, then flip and cook until the other side is golden brown.\n7. Serve with syrup and butter." + }, + { + id: 3, + name: "Chicken Stir-Fry", + ingredients: ["Chicken Breasts", "Vegetables", "Soy Sauce", "Cornstarch", "Oil"], + instructions: "1. Cut chicken into thin strips.\n2. In a small bowl, whisk together soy sauce and cornstarch.\n3. Heat a wok or large pan over high heat and add a little oil.\n4. Stir-fry chicken strips until browned.\n5. Add vegetables and continue to stir-fry until tender.\n6. Stir in the soy sauce mixture and continue cooking until sauce thickens.\n7. Serve over rice." + } +]; + + + +let nextRecipeId = 4; + +const addRecipeButton = document?.getElementById("add-recipe-button") as HTMLButtonElement; +const addRecipeModal = document?.getElementById("add-recipe-modal") as HTMLDivElement; +const addRecipeModalClose = document?.getElementById("add-recipe-modal-close") as HTMLButtonElement; +const addRecipeModalSave = document?.getElementById("add-recipe-modal-save") as HTMLButtonElement; +const addRecipeNameInput = document?.getElementById("add-recipe-name-input") as HTMLInputElement; +const addRecipeIngredientsInput = document?.getElementById("add-recipe-ingredients-input") as HTMLTextAreaElement; +const addRecipeInstructionsInput = document?.getElementById("add-recipe-instructions-input") as HTMLTextAreaElement; + +let storageRecipes = localStorage.getItem('RECIPES') + +let recipes = storageRecipes ? JSON.parse(storageRecipes) : startingRecipes + + +addRecipeButton?.addEventListener("click", () => { + addRecipeModal.style.display = "block"; +}); + +addRecipeModalClose?.addEventListener("click", () => { + window.location.href = '../recipe-book/recipe-book.html' +}); + + +addRecipeModalSave.addEventListener("click", () => { + const name = addRecipeNameInput.value; + const ingredients = addRecipeIngredientsInput.value.split("\n"); + const instructions = addRecipeInstructionsInput.value; + + const newRecipe: Recipe = { + id: nextRecipeId++, + name, + ingredients, + instructions + }; + + recipes.push(newRecipe); + + localStorage.setItem('RECIPES', JSON.stringify(recipes)) + + addRecipeNameInput.value = ""; + addRecipeIngredientsInput.value = ""; + addRecipeInstructionsInput.value = ""; + + window.location.href = '../recipe-book/recipe-book.html' +}); diff --git a/02-TypeScript/18-personalProject/liat asulin/recipe-book-20230213T144017Z-001.zip b/02-TypeScript/18-personalProject/liat asulin/recipe-book-20230213T144017Z-001.zip new file mode 100644 index 000000000..88d2be22b Binary files /dev/null and b/02-TypeScript/18-personalProject/liat asulin/recipe-book-20230213T144017Z-001.zip differ diff --git a/02-TypeScript/18-personalProject/liat asulin/recipe-book/dist/recipe-book.js b/02-TypeScript/18-personalProject/liat asulin/recipe-book/dist/recipe-book.js new file mode 100644 index 000000000..c6b2262e7 --- /dev/null +++ b/02-TypeScript/18-personalProject/liat asulin/recipe-book/dist/recipe-book.js @@ -0,0 +1,50 @@ +var startingRecipes = [ + { + id: 1, + name: "Spaghetti Bolognese", + ingredients: ["Spaghetti", "Tomato Sauce", "Ground Beef", "Onions", "Garlic"], + instructions: "1. Cook spaghetti according to package instructions.\n2. In a separate pan, sauté onions and garlic until softened.\n3. Add ground beef and cook until browned.\n4. Stir in tomato sauce and let simmer for 10 minutes.\n5. Serve sauce over cooked spaghetti." + }, + { + id: 2, + name: "Pancakes", + ingredients: ["Flour", "Baking Powder", "Salt", "Sugar", "Eggs", "Milk", "Butter"], + instructions: "1. In a large bowl, whisk together flour, baking powder, salt, and sugar.\n2. In a separate bowl, beat together eggs and milk.\n3. Stir the egg mixture into the dry ingredients until just combined.\n4. Heat a non-stick pan over medium heat and melt a little butter.\n5. Pour batter into the pan to form pancakes.\n6. Cook until bubbles form on the surface, then flip and cook until the other side is golden brown.\n7. Serve with syrup and butter." + }, + { + id: 3, + name: "Chicken Stir-Fry", + ingredients: ["Chicken Breasts", "Vegetables", "Soy Sauce", "Cornstarch", "Oil"], + instructions: "1. Cut chicken into thin strips.\n2. In a small bowl, whisk together soy sauce and cornstarch.\n3. Heat a wok or large pan over high heat and add a little oil.\n4. Stir-fry chicken strips until browned.\n5. Add vegetables and continue to stir-fry until tender.\n6. Stir in the soy sauce mixture and continue cooking until sauce thickens.\n7. Serve over rice." + } +]; +var storageRecipes = localStorage.getItem('RECIPES'); +var recipes = storageRecipes ? JSON.parse(storageRecipes) : startingRecipes; +var recipeList = document === null || document === void 0 ? void 0 : document.getElementById("recipe-list"); +var recipeDetails = document === null || document === void 0 ? void 0 : document.getElementById("recipe-details"); +function renderRecipes() { + recipeList.innerHTML = ''; + recipes.forEach(function (recipe, index) { + var listItemRemover = document.createElement('div'); + listItemRemover.className = 'recipe-remover'; + listItemRemover.textContent = 'delete'; + listItemRemover === null || listItemRemover === void 0 ? void 0 : listItemRemover.addEventListener("click", function () { + recipes.splice(index, 1); + localStorage.setItem('RECIPES', JSON.stringify(recipes)); + renderRecipes(); + }); + var listItemWrapper = document.createElement('div'); + listItemWrapper.className = 'recipe-wrapper'; + var listItem = document.createElement("li"); + listItem.className = 'recipe-name'; + listItem.textContent = recipe.name; + listItem === null || listItem === void 0 ? void 0 : listItem.addEventListener("click", function () { + recipeDetails.innerHTML = "\n

                      " + recipe.name + "

                      \n

                      Ingredients

                      \n
                        \n " + recipe.ingredients.map(function (ingredient) { return "
                      • " + ingredient + "
                        • "; }).join("") + "\n
                      \n

                      Instructions

                      \n

                      " + recipe.instructions + "

                      \n "; + recipeDetails.style.display = 'block'; + }); + listItemWrapper === null || listItemWrapper === void 0 ? void 0 : listItemWrapper.appendChild(listItem); + listItemWrapper === null || listItemWrapper === void 0 ? void 0 : listItemWrapper.appendChild(listItemRemover); + recipeList === null || recipeList === void 0 ? void 0 : recipeList.appendChild(listItemWrapper); + }); +} +renderRecipes(); diff --git a/02-TypeScript/18-personalProject/liat asulin/recipe-book/recipe-book.html b/02-TypeScript/18-personalProject/liat asulin/recipe-book/recipe-book.html new file mode 100644 index 000000000..8f67c1262 --- /dev/null +++ b/02-TypeScript/18-personalProject/liat asulin/recipe-book/recipe-book.html @@ -0,0 +1,27 @@ + + + + + + + + + Recipe Book + + + +

                      My Recipe Book

                      +
                      +
                      +

                      Recipes

                      +
                        + Add Recipe + +
                        +
                        +
                        + + + + + \ No newline at end of file diff --git a/02-TypeScript/18-personalProject/liat asulin/recipe-book/recipe-book.ts b/02-TypeScript/18-personalProject/liat asulin/recipe-book/recipe-book.ts new file mode 100644 index 000000000..c2f5e478d --- /dev/null +++ b/02-TypeScript/18-personalProject/liat asulin/recipe-book/recipe-book.ts @@ -0,0 +1,80 @@ +interface Recipe { + id: number; + name: string; + ingredients: string[]; + instructions: string; +} + +const startingRecipes: Recipe[] = [ + { + id: 1, + name: "Spaghetti Bolognese", + ingredients: ["Spaghetti", "Tomato Sauce", "Ground Beef", "Onions", "Garlic"], + instructions: "1. Cook spaghetti according to package instructions.\n2. In a separate pan, sauté onions and garlic until softened.\n3. Add ground beef and cook until browned.\n4. Stir in tomato sauce and let simmer for 10 minutes.\n5. Serve sauce over cooked spaghetti." + }, + { + id: 2, + name: "Pancakes", + ingredients: ["Flour", "Baking Powder", "Salt", "Sugar", "Eggs", "Milk", "Butter"], + instructions: "1. In a large bowl, whisk together flour, baking powder, salt, and sugar.\n2. In a separate bowl, beat together eggs and milk.\n3. Stir the egg mixture into the dry ingredients until just combined.\n4. Heat a non-stick pan over medium heat and melt a little butter.\n5. Pour batter into the pan to form pancakes.\n6. Cook until bubbles form on the surface, then flip and cook until the other side is golden brown.\n7. Serve with syrup and butter." + }, + { + id: 3, + name: "Chicken Stir-Fry", + ingredients: ["Chicken Breasts", "Vegetables", "Soy Sauce", "Cornstarch", "Oil"], + instructions: "1. Cut chicken into thin strips.\n2. In a small bowl, whisk together soy sauce and cornstarch.\n3. Heat a wok or large pan over high heat and add a little oil.\n4. Stir-fry chicken strips until browned.\n5. Add vegetables and continue to stir-fry until tender.\n6. Stir in the soy sauce mixture and continue cooking until sauce thickens.\n7. Serve over rice." + } +]; + + +let storageRecipes = localStorage.getItem('RECIPES') + +let recipes = storageRecipes ? JSON.parse(storageRecipes) : startingRecipes + +const recipeList = document?.getElementById("recipe-list") as HTMLUListElement; +const recipeDetails = document?.getElementById("recipe-details") as HTMLDivElement; + + +function renderRecipes() { + recipeList.innerHTML = '' + recipes.forEach((recipe, index) => { + const listItemRemover = document.createElement('div'); + listItemRemover.className = 'recipe-remover'; + listItemRemover.textContent = 'delete'; + + + listItemRemover?.addEventListener("click", () => { + recipes.splice(index, 1) + localStorage.setItem('RECIPES', JSON.stringify(recipes)) + renderRecipes() + }); + + const listItemWrapper = document.createElement('div') + listItemWrapper.className = 'recipe-wrapper' + const listItem = document.createElement("li"); + listItem.className = 'recipe-name' + listItem.textContent = recipe.name; + listItem?.addEventListener("click", () => { + recipeDetails.innerHTML = ` +

                        ${recipe.name}

                        +

                        Ingredients

                        +
                          + ${recipe.ingredients.map(ingredient => `
                        • ${ingredient}
                          • `).join("")} +
                        +

                        Instructions

                        +

                        ${recipe.instructions}

                        + `; + recipeDetails.style.display = 'block' + }); + + listItemWrapper?.appendChild(listItem) + + listItemWrapper?.appendChild(listItemRemover) + + recipeList?.appendChild(listItemWrapper); + }) +} + +renderRecipes() + + diff --git a/02-TypeScript/18-personalProject/liat asulin/style.css b/02-TypeScript/18-personalProject/liat asulin/style.css new file mode 100644 index 000000000..4b1310695 --- /dev/null +++ b/02-TypeScript/18-personalProject/liat asulin/style.css @@ -0,0 +1,144 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; +} + +h1 { + text-align: center; + font-size: 36px; + margin: 50px 0; +} + +.container { + display: flex; + justify-content: space-between; + margin: 0 50px; +} + +.recipes { + width: 30%; + background-color: #ffffff; + padding: 20px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + border-radius: 10px; + margin-bottom: 20px; +} + +.recipe-details { + width: 60%; + background-color: #ffffff; + padding: 20px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + border-radius: 10px; + margin-bottom: 20px; +} + +h2 { + font-size: 24px; + margin-bottom: 20px; +} + +ul { + list-style-type: none; + padding: 0; + margin-bottom: 20px; +} + +li { + cursor: pointer; + margin-bottom: 10px; +} + +.recipe-name { + font-weight: bold; +} + +button { + padding: 10px 20px; + background-color: #4CAF50; + color: #ffffff; + border: none; + border-radius: 5px; + cursor: pointer; + margin-top: 20px; + float: right; +} + +#recipe-details { + display: none; +} + +#add-recipe-button { + display: flex; + float: right; + justify-content: center; + flex-wrap: wrap; + align-content: center; + font-weight: 700; + background-color: #4CAF50; + color: #ffffff; + border-radius: 5px; + height: 30px; + width: 110px; + text-align: center; + text-decoration: none; + margin-top: 20px; + cursor: pointer; +} + +.modal-content { + background-color: #f2f2f2; + padding: 20px; + width: 80%; +} + +.input-group { + margin-bottom: 20px; +} + +label { + display: block; + font-size: 18px; + margin-bottom: 10px; +} + +.recipe-wrapper { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + align-items: center; + +} + + +.recipe-remover { + height: 26px; + display: flex; + align-items: center; + width: 60px; + justify-content: center; + border-radius: 25px; + background-color: red; + color: white; + cursor: pointer; + +} + +input[type="text"], +textarea { + padding: 10px; + font-size: 16px; + width: 100%; + box-sizing: border-box; + border-radius: 5px; + border: 1px solid #ddd; + margin-bottom: 20px; +} + +#add-recipe-modal-close { + float: right; + font-weight: bold; + cursor: pointer; + background-color: #ffffff; +} + diff --git a/02-TypeScript/19-vite/example/testing/.gitignore b/02-TypeScript/19-vite/example/testing/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/02-TypeScript/19-vite/example/testing/index.html b/02-TypeScript/19-vite/example/testing/index.html new file mode 100644 index 000000000..f86e483c9 --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + TS + + +
                        + + + diff --git a/02-TypeScript/19-vite/example/testing/package.json b/02-TypeScript/19-vite/example/testing/package.json new file mode 100644 index 000000000..f858f6496 --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/package.json @@ -0,0 +1,15 @@ +{ + "name": "testing", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "devDependencies": { + "typescript": "^4.9.3", + "vite": "^4.1.0" + } +} \ No newline at end of file diff --git a/02-TypeScript/19-vite/example/testing/public/vite.svg b/02-TypeScript/19-vite/example/testing/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/02-TypeScript/19-vite/example/testing/src/counter.ts b/02-TypeScript/19-vite/example/testing/src/counter.ts new file mode 100644 index 000000000..09e5afd2d --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/src/counter.ts @@ -0,0 +1,9 @@ +export function setupCounter(element: HTMLButtonElement) { + let counter = 0 + const setCounter = (count: number) => { + counter = count + element.innerHTML = `count is ${counter}` + } + element.addEventListener('click', () => setCounter(counter + 1)) + setCounter(0) +} diff --git a/02-TypeScript/19-vite/example/testing/src/main.ts b/02-TypeScript/19-vite/example/testing/src/main.ts new file mode 100644 index 000000000..df7c82c3c --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/src/main.ts @@ -0,0 +1,23 @@ +import './style.css' +import typescriptLogo from './typescript.svg' +import { setupCounter } from './counter' + +document.querySelector('#app')!.innerHTML = ` +
                        + + + + + + +

                        Vite + TypeScript

                        +
                        + +
                        +

                        + Click on the Vite and TypeScript logos to learn more +

                        +
                        +` + +setupCounter(document.querySelector('#counter')!) diff --git a/02-TypeScript/19-vite/example/testing/src/style.css b/02-TypeScript/19-vite/example/testing/src/style.css new file mode 100644 index 000000000..b528b6cc2 --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/src/style.css @@ -0,0 +1,97 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.vanilla:hover { + filter: drop-shadow(0 0 2em #3178c6aa); +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/02-TypeScript/19-vite/example/testing/src/typescript.svg b/02-TypeScript/19-vite/example/testing/src/typescript.svg new file mode 100644 index 000000000..d91c910cc --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/src/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/02-TypeScript/19-vite/example/testing/src/vite-env.d.ts b/02-TypeScript/19-vite/example/testing/src/vite-env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/02-TypeScript/19-vite/example/testing/tsconfig.json b/02-TypeScript/19-vite/example/testing/tsconfig.json new file mode 100644 index 000000000..eac16d14a --- /dev/null +++ b/02-TypeScript/19-vite/example/testing/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "strict": true, + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "skipLibCheck": true + }, + "include": ["src"] +} diff --git a/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/dist/main.js b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/dist/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/dist/style.css b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/dist/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/index.html b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/index.html new file mode 100644 index 000000000..ab567f41b --- /dev/null +++ b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/index.html @@ -0,0 +1,14 @@ + + + + + + + Recipes Web + + + + + + + \ No newline at end of file diff --git a/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/main.ts b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/main.ts new file mode 100644 index 000000000..e69de29bb diff --git a/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/style.scss b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/style.scss new file mode 100644 index 000000000..139597f9c --- /dev/null +++ b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/style.scss @@ -0,0 +1,2 @@ + + diff --git a/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/text.txt b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/text.txt new file mode 100644 index 000000000..45bf7a293 --- /dev/null +++ b/02-TypeScript/20-TeamProject/example/Room7RecipesWeb/text.txt @@ -0,0 +1,40 @@ + ReceptList: Design document + +/// Description: +Recipes web storage + + +/// PRD (product requirement Document) +* Add new recipe +* Favourite list +* Delete recipe from favourite list +* List of recipe +* Sort +* Search +* Share +* Rankings +* Login and register +* User list +* Customer succes +* Comments + +// MVP (Minimum viable product) +What will be the minimal set of features that the user would like to reuse the product? +CRUD recipes +List +Login/register +User List +Accesability + +// Entities +Users +Recipe + + +// Pages + +/ Use cases + +I want to print/display a recipe +Create recipe + diff --git a/02-TypeScript/20-TeamProject/example/dist/model.js b/02-TypeScript/20-TeamProject/example/dist/model.js new file mode 100644 index 000000000..8fbf604eb --- /dev/null +++ b/02-TypeScript/20-TeamProject/example/dist/model.js @@ -0,0 +1,10 @@ +var User = /** @class */ (function () { + function User() { + } + return User; +}()); +var Song = /** @class */ (function () { + function Song() { + } + return Song; +}()); diff --git a/02-TypeScript/20-TeamProject/example/model.ts b/02-TypeScript/20-TeamProject/example/model.ts new file mode 100644 index 000000000..7bfc2a8bd --- /dev/null +++ b/02-TypeScript/20-TeamProject/example/model.ts @@ -0,0 +1,7 @@ +class User{ + +} + +class Song{ + +} \ No newline at end of file diff --git a/02-position-box-model/Exercise/Kseniya_T/paddingExercise.css b/02-position-box-model/Exercise/Kseniya_T/paddingExercise.css deleted file mode 100644 index 644cd138b..000000000 --- a/02-position-box-model/Exercise/Kseniya_T/paddingExercise.css +++ /dev/null @@ -1,28 +0,0 @@ -#box1 { - margin-left: 300px; - background-color: rgb(255, 191, 202); -} -#box2 { - margin-left: 200px; - background-color: rgb(255, 152, 169); -} -#box3 { - margin-left: 100px; - background-color: rgb(255, 125, 147); -} -#box4 { - margin-left: 200px; - background-color: rgb(255, 88, 116); -} -#box5 { - margin-left: 300px; - background-color: rgb(255, 50, 84); -} - - -.box { - width: 100px; - height: 100px; - - margin: 30px; -} diff --git a/02-position-box-model/Exercise/Kseniya_T/paddingExercise.html b/02-position-box-model/Exercise/Kseniya_T/paddingExercise.html deleted file mode 100644 index 3d190a47a..000000000 --- a/02-position-box-model/Exercise/Kseniya_T/paddingExercise.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - Padding Exersice - - - -
                        -
                        -
                        -
                        -
                        -                         - - \ No newline at end of file diff --git a/02-position-box-model/Exercise/VladiB/index.html b/02-position-box-model/Exercise/VladiB/index.html deleted file mode 100644 index 758a29e96..000000000 --- a/02-position-box-model/Exercise/VladiB/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Document - - - -
                        -
                        -
                        -
                        - - \ No newline at end of file diff --git a/02-position-box-model/Exercise/VladiB/style.css b/02-position-box-model/Exercise/VladiB/style.css deleted file mode 100644 index 045c2e1eb..000000000 --- a/02-position-box-model/Exercise/VladiB/style.css +++ /dev/null @@ -1,15 +0,0 @@ -.box { - border: 4px solid black; - width: 200px; - height: 200px; - background-color: blue; - margin: 10px auto; -} - -.first { - margin-left: 50%; -} - -.third{ - margin-right: 50%; -} \ No newline at end of file diff --git a/02-position-box-model/Exercise/adi/index.html b/02-position-box-model/Exercise/adi/index.html deleted file mode 100644 index aad41b411..000000000 --- a/02-position-box-model/Exercise/adi/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - Document - - - -
                        -
                        -
                        -
                        -
                        -
                        - - \ No newline at end of file diff --git a/02-position-box-model/Exercise/adi/style.css b/02-position-box-model/Exercise/adi/style.css deleted file mode 100644 index 19b66dad1..000000000 --- a/02-position-box-model/Exercise/adi/style.css +++ /dev/null @@ -1,30 +0,0 @@ - - - - -.main{ - - - background-color: black; - width: 500px; - margin: auto; - margin-top: 150px; -} - -.box{ - - width: 150px; - height: 150px; - background-color: blue; - margin-top: 10px; - margin: auto; -} - - .main #one{ - margin-right: 50px; -} - -.two{ - - margin-left: 20px; -} \ No newline at end of file diff --git a/02-position-box-model/Exercise/txt.txt b/02-position-box-model/Exercise/txt.txt deleted file mode 100644 index 56e2eae70..000000000 --- a/02-position-box-model/Exercise/txt.txt +++ /dev/null @@ -1,2 +0,0 @@ -create 4 cubes underneath one another -all of them should be in the middle \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/3_dots.png b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/3_dots.png deleted file mode 100644 index 5e05a5a45..000000000 Binary files a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/3_dots.png and /dev/null differ diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/48-486744_png-file-svg-instagram-love-icon-png-icon.png b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/48-486744_png-file-svg-instagram-love-icon-png-icon.png deleted file mode 100644 index b6d23bba2..000000000 Binary files a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/48-486744_png-file-svg-instagram-love-icon-png-icon.png and /dev/null differ diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/bbc_karin.html b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/bbc_karin.html deleted file mode 100644 index 07d8f92a6..000000000 --- a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/bbc_karin.html +++ /dev/null @@ -1,177 +0,0 @@ - - - - - - - BBC - - - -
                        - - - -
                        -
                        -

                        Home

                        -
                        -
                        -

                        News

                        -
                        -
                        -

                        Sport

                        -
                        -
                        -

                        Reel

                        -
                        -
                        -

                        Worklife

                        -
                        -
                        -

                        Travel

                        -
                        -
                        -

                        Future

                        -
                        -
                        -

                        Culture

                        -
                        -
                        -
                        -
                        - -
                        -
                        - -
                        -
                        -
                        - -
                        -
                        -

                        Welcome to BBC.com

                        -
                        -
                        -

                        Wednesday, 16 November

                        -
                        -
                        - -
                        -
                        - -
                        -

                        Many schoolchildren among Indonesia quake dead

                        -

                        The death toll from Monday's earthquake on Java island soars to 268, with many people still missing.

                        -
                        -
                        -
                        - -
                        -

                        Germany have to be 'very focused from the first moment'

                        -

                        Germany v Japan

                        -
                        -
                        -
                        - -
                        -

                        Many in Germany were bracing for a tough winter after Russia slashed supplies of gas

                        -

                        BBC News, Wilhelmshaven

                        -
                        -
                        -
                        - -
                        -

                        Russia slashed its supplies of gas to Europe following the invasion of Ukraine -

                        -

                        BBC News

                        -
                        -
                        -
                        - -
                        -

                        China Covid: Angry protests at giant iPhone factory in Zhengzhou

                        -

                        Workers told the BBC they weren't being paid their promised wages

                        -
                        -
                        - -
                        - -
                        -
                        -
                        -
                        -
                        -
                        -
                        -
                        -
                        -

                        News

                        -
                        -
                        - -
                        -
                        - -

                        A 15-year-old boy has been killed and 14 other people have been wounded in two suspected bomb attacks at bus stops in Jerusalem, Israeli police say.

                        -

                        The explosions happened at two busy areas on the outskirts of the city as people were heading to work.

                        -
                        -
                        - -

                        China wants retired military staff to help boost production at the world's largest iPhone factory in Zhengzhou.

                        -

                        The call came from a Veteran Affairs Bureau of the People's Liberation Army in the same province as the plant.

                        -
                        -
                        - -

                        Workers have broken out of Apple's largest iPhone assembly factory in China after a Covid outbreak forced staff to lockdown at the workplace.

                        -

                        Video shared online showed about 10 people jumping a fence outside the plant, owned by manufacturer Foxconn, in the central city of Zhengzhou.

                        -
                        -
                        -
                        -
                        -
                        -
                        - -
                        -
                        -

                        Sport

                        -
                        -
                        - -
                        -
                        - -

                        Former Manchester United forward Cristiano Ronaldo has been banned for two domestic matches for knocking a phone out of an Everton fan's hand.

                        -

                        Ronaldo was also fined £50,000 by the Football Association.

                        -
                        -
                        - -

                        Surrey and Manchester Originals limited-overs batter Laurie Evans has tested positive for "trace amounts of a banned substance".

                        -

                        It follows a sample provided in August by the 35-year-old while playing for Originals in The Hundred.

                        -
                        -
                        - -

                        A non-league goalkeeper says he was sent off for reacting to a fan who urinated in his water bottle during an FA Trophy tie.

                        -

                        Warrington Town keeper Tony Thompson, 28, squirted the Guiseley fan after drinking from the bottle.

                        -
                        -
                        - -
                        -
                        -
                        - - - \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/dist/style.css b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/dist/style.css deleted file mode 100644 index 9a818e34b..000000000 --- a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/dist/style.css +++ /dev/null @@ -1,265 +0,0 @@ -body { - margin: 0%; -} - -.header { - width: 100%; - height: 50px; - background-color: black; - display: flex; - justify-content: center; - margin: auto; -} -.header__logo { - width: 100px; - height: 35px; - display: flex; - justify-content: space-between; -} -.header__logo__bbc { - width: 70px; - height: 100%; - display: flex; - justify-content: space-between; -} -.header__logo__bbc h3 { - background-color: white; - margin: 0; - margin-top: 10px; - font-size: x-large; -} -.header__sign_in { - width: 120px; - height: 40px; - display: flex; - justify-content: space-between; -} -.header__sign_in__icon img { - height: 100%; - width: 100%; -} -.header__sign_in__button { - height: 40px; - width: 70px; -} -.header__sign_in__button h3 { - color: white; - margin-top: 10px; - font-size: smaller; -} -.header__menu { - width: 500px; - height: 100%; - display: flex; - justify-content: space-between; - margin-top: 4px; -} -.header__menu h3 { - color: white; - font-size: small; -} -.header__rigth { - width: 100px; - height: 50px; - display: flex; - justify-content: space-between; -} -.header__rigth__dots { - width: 30px; - height: 30px; - margin-top: 10px; -} -.header__rigth__dots img { - height: 100%; - width: 100%; -} -.header__rigth__search { - height: 50px; - width: 50px; - padding-top: 15px; -} - -.title { - width: 85%; - height: 60px; - background-color: white; - display: flex; - justify-content: space-between; - margin: auto; -} -.title__welcome { - width: 300px; - margin-left: 120px; -} -.title__welcome h2 { - color: #494848; -} -.title__date { - color: #b7b5b5; - margin-right: 0; - width: 300px; -} - -.grid_container { - margin: auto; - display: grid; - gap: 10px; - grid-template-areas: "item1 item1 item2 item3" "item1 item1 item4 item5"; - width: 1000px; - height: 200px; -} -.grid_container__item1 { - grid-area: item1; - position: relative; - text-align: center; - color: white; -} -.grid_container__item1__centered1 { - position: absolute; - top: 65%; - left: 35%; - transform: translate(-50%, -50%); -} -.grid_container__item1__centered1 h4 { - font-size: x-large; -} -.grid_container__item1 img { - width: 100%; - height: 100%; -} -.grid_container__item2 { - grid-area: item2; - position: relative; - text-align: center; - color: white; -} -.grid_container__item2__centered2 { - position: absolute; - top: 65%; - left: 35%; - transform: translate(-50%, -50%); -} -.grid_container__item2 img { - width: 100%; - height: 100%; -} -.grid_container__item3 { - grid-area: item3; - position: relative; - text-align: center; - color: white; -} -.grid_container__item3__centered3 { - position: absolute; - top: 55%; - left: 35%; - transform: translate(-50%, -50%); -} -.grid_container__item3 img { - width: 100%; - height: 100%; -} -.grid_container__item4 { - grid-area: item4; - position: relative; - text-align: center; - color: white; -} -.grid_container__item4__centered4 { - position: absolute; - top: 55%; - left: 35%; - transform: translate(-50%, -50%); -} -.grid_container__item4 img { - width: 100%; - height: 100%; -} -.grid_container__item5 { - grid-area: item5; - position: relative; - text-align: center; - color: white; -} -.grid_container__item5__centered5 { - position: absolute; - top: 65%; - left: 35%; - transform: translate(-50%, -50%); -} -.grid_container__item5 img { - width: 100%; - height: 100%; -} - -.title2 { - width: 100%; - height: 60px; - background-color: white; - display: flex; - justify-content: space-between; -} -.title2__news h2 { - color: #494848; - padding-left: 200px; -} - -.grid_container2 { - margin: auto; - display: grid; - gap: 10px; - grid-template-areas: "item1 item2 item3"; - width: 820px; - height: 340px; -} -.grid_container2__item1 { - grid-area: item1; -} -.grid_container2__item1 img { - width: 100%; - height: 50%; -} -.grid_container2__item2 { - grid-area: item2; -} -.grid_container2__item2 img { - width: 100%; - height: 50%; -} -.grid_container2__item3 { - grid-area: item3; -} -.grid_container2__item3 img { - width: 100%; - height: 50%; -} - -.grid_container3 { - margin: auto; - display: grid; - gap: 10px; - grid-template-areas: "item1 item2 item3"; - width: 820px; - height: 340px; -} -.grid_container3__item1 { - grid-area: item1; -} -.grid_container3__item1 img { - width: 100%; - height: 50%; -} -.grid_container3__item2 { - grid-area: item2; -} -.grid_container3__item2 img { - width: 100%; - height: 50%; -} -.grid_container3__item3 { - grid-area: item3; -} -.grid_container3__item3 img { - width: 100%; - height: 50%; -} \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/style.scss b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/style.scss deleted file mode 100644 index 9c6a5bec4..000000000 --- a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/BBC_karin/style.scss +++ /dev/null @@ -1,340 +0,0 @@ -body{ - margin:0% - -} - -.header{ - width: 100%; - height: 50px; - background-color: black; - display: flex; - justify-content: center; - margin: auto; - - &__logo{ - width: 100px; - height: 35px; - display: flex; - justify-content: space-between; - - &__bbc{ - width: 70px; - height: 100%; - display: flex; - justify-content: space-between; - } - - &__bbc h3{ - background-color: white; - margin: 0; - margin-top: 10px; - font-size:x-large; - } - } - - &__sign_in{ - width: 120px; - height: 40px; - display: flex; - justify-content: space-between; - - - &__icon img{ - height: 100%; - width: 100%; - } - - &__button{ - height: 40px; - width: 70px; - - } - - &__button h3{ - color: white; - margin-top: 10px; - font-size:smaller; - } - } - - &__menu{ - width: 500px; - height: 100%; - display: flex; - justify-content: space-between; - margin-top: 4px; - } - - &__menu h3{ - color: white; - font-size: small; - } - - &__rigth{ - width: 100px; - height: 50px; - display: flex; - justify-content: space-between; - - &__dots{ - width: 30px; - height: 30px; - margin-top: 10px; - - } - - &__dots img{ - height: 100%; - width: 100%; - - } - - &__search{ - height: 50px; - width: 50px; - padding-top: 15px; - } - } -} - -.title{ - width: 85%; - height: 60px; - background-color: white; - display: flex; - justify-content:space-between; - margin: auto; - - - &__welcome{ - width: 300px; - margin-left: 120px; - - } - - &__welcome h2{ - color: rgb(73, 72, 72); - } - - &__date{ - color: rgb(183, 181, 181); - margin-right: 0; - width: 300px; - } -} - - -.grid_container{ - margin: auto; - display: grid; - gap: 10px; - grid-template-areas: - 'item1 item1 item2 item3' - 'item1 item1 item4 item5'; - width: 1000px; - height: 200px; - - - &__item1{ - grid-area: item1; - position: relative; - text-align: center; - color: white; - - &__centered1{ - position: absolute; - top: 65%; - left: 35%; - transform: translate(-50%, -50%); - } - - &__centered1 h4{ - font-size: x-large; - } - - } - &__item1 img{ - width: 100%; - height: 100%; - } - - &__item2{ - grid-area: item2; - position: relative; - text-align: center; - color: white; - - &__centered2{ - position: absolute; - top: 65%; - left: 35%; - transform: translate(-50%, -50%); - - } - - } - - &__item2 img{ - width: 100%; - height: 100%; - } - - &__item3{ - grid-area: item3; - position: relative; - text-align: center; - color: white; - - &__centered3{ - position: absolute; - top: 55%; - left: 35%; - transform: translate(-50%, -50%); - } - } - &__item3 img{ - width: 100%; - height: 100%; - } - - &__item4{ - grid-area: item4; - position: relative; - text-align: center; - color: white; - - &__centered4{ - position: absolute; - top: 55%; - left: 35%; - transform: translate(-50%, -50%); - } - } - - &__item4 img{ - width: 100%; - height: 100%; - } - - &__item5{ - grid-area: item5; - position: relative; - text-align: center; - color: white; - - &__centered5{ - position: absolute; - top: 65%; - left: 35%; - transform: translate(-50%, -50%); - } - } - - &__item5 img{ - width: 100%; - height: 100%; - } -} - - -.title2{ - width: 100%; - height: 60px; - background-color: white; - display: flex; - justify-content:space-between; - - - &__news h2{ - color: rgb(73, 72, 72); - padding-left: 200px; - } - -} - -.grid_container2{ - margin: auto; - display: grid; - gap: 10px; - grid-template-areas: - 'item1 item2 item3'; - width: 820px; - height: 340px; - - - &__item1{ - grid-area: item1; - } - - &__item1 img{ - width: 100%; - height: 50%; - } - - &__item2{ - grid-area: item2; - } - - &__item2 img{ - width: 100%; - height: 50%; - } - - &__item3{ - grid-area: item3; - } - &__item3 img{ - width: 100%; - height: 50%; - } - -} - -.grid_container3{ - margin: auto; - display: grid; - gap: 10px; - grid-template-areas: - 'item1 item2 item3'; - width: 820px; - height: 340px; - - - &__item1{ - grid-area: item1; - } - - &__item1 img{ - width: 100%; - height: 50%; - } - - &__item2{ - grid-area: item2; - } - - &__item2 img{ - width: 100%; - height: 50%; - } - - &__item3{ - grid-area: item3; - } - - &__item3 img{ - width: 100%; - height: 50%; - } - -} - - - - - - - - - - \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/Instagram_Logo_2016.png b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/Instagram_Logo_2016.png deleted file mode 100644 index 62619bfac..000000000 Binary files a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/Instagram_Logo_2016.png and /dev/null differ diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/download.jpeg b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/download.jpeg deleted file mode 100644 index 29c78cadb..000000000 Binary files a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/download.jpeg and /dev/null differ diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/instagram-3814047_1280.webp b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/instagram-3814047_1280.webp deleted file mode 100644 index a4058be33..000000000 Binary files a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/instagram-3814047_1280.webp and /dev/null differ diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/instagram-karin.html b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/instagram-karin.html deleted file mode 100644 index 85513429b..000000000 --- a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/instagram-karin.html +++ /dev/null @@ -1,133 +0,0 @@ - - - - - - - - Instagram - - - - -
                        -
                        -
                        - -
                        -
                        -
                        - -
                        -
                        - -
                        - -
                        -
                        - -
                        - - - - - -
                        - -
                        -
                        - -

                        coockies_tv

                        - -
                        -
                        - -
                        -
                        -

                        A recipe for cheesecake, mocha and chocolate -

                        -
                        -
                        -
                        - - - -
                        -
                        - -
                        -
                        -
                        -

                        5,635 likes -
                        - view all 10 comments -

                        - 2 days ago -

                        -
                        -
                        -
                        - -
                        -
                        - -
                        -
                        - Post -
                        -
                        - -
                        - - -
                        -
                        - -

                        health_israel

                        - -
                        -
                        - -
                        -
                        -

                        האם אנו באמת זקוקים לתוספי תזונה?? -

                        -
                        -
                        - - - -
                        -
                        - -
                        -
                        -
                        -

                        10,454 likes -
                        - view all 35 comments -

                        - 1 day ago -

                        -
                        -
                        -
                        - -
                        -
                        - -
                        -
                        - Post -
                        -
                        -
                        -
                        -
                        - - - \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/style.css b/02-position-box-model/Exrecise2/Karin_Levi/Instagram/style.css deleted file mode 100644 index b8941dd57..000000000 --- a/02-position-box-model/Exrecise2/Karin_Levi/Instagram/style.css +++ /dev/null @@ -1,356 +0,0 @@ - -body { - background-color: rgb(214, 212, 212); - overflow-x: hidden; - margin: 0%; - height: 100%; -} - -.wrapper { - overflow: auto; - margin: 0px auto; - height: 100%; - width: 100%; - background-color: rgb(246, 242, 242); - border: 1px solid rgb(106, 106, 106); -} - -.wrapper .header { - width: 100%; - height: 50px; - border: 2px solid rgb(178, 174, 174); - position: fixed; - background-color: white; - display: flex; - align-content: center; - justify-content: space-between ; -} - -.header .search-div{ - display: flex; - align-content: center; - justify-content: space-between ; -} - -.header-img-div img { - height: 80%; - width: 120px; - padding-top: 7px; - padding-left: 10px; -} - - -.search-div img { - height: 25px; - width: 40px; - margin-top: 10px; -} - -.search-div input{ - height: 25px; - width: 200px; - margin-top: 10px; - margin-right: 10px; -} - -.wrapper .stories { - margin: auto; - width: 470px; - height: 100px; - border: 1px solid rgb(198, 193, 193); - background-color: white; - border-radius: 10px; - margin-top: 100px; - display: flex; - justify-content: center; - align-content: space-between -} - -.stories img{ - height: 70px; - width: 80px; - border-radius: 50%; - padding-top: 10px; - -} - -.feedbox1 { - margin: auto; - width: 469px; - height: 500px; - /* border: 1px solid rgb(198, 193, 193); */ - background-color: white; - border-radius: 10px; - margin-top: 30px; -} - -.feedbox1 .name-div { - margin: auto; - width: 100%; - height: 57px; - border: 0.5px solid rgb(217, 216, 216); - background-color: white; - border-radius: 10px 10px 0px 0px; - display: flex; - -} - -.name-div .picture{ - border-radius: 50%; - width: 42px; - height: 42px; - order: -1; - margin-left: 10px; - margin-top: 7px; -} - -.name-div .dots{ - margin-left: 250px; - -} - -.name-div h3{ - margin-left: 10px; -} - -.feedbox1 .img-div { - margin: auto; - width: 100%; - height: 300px; - border: 1px solid rgb(198, 193, 193); - background-color: white; -} - -.img-div img{ - width: 100%; - height: 100%; -} - -.feedbox1 .paragraph{ - width: 100%; - height: 70px; - border: 1px solid rgb(198, 193, 193); -} - -.paragraph p{ - padding-left: 10px; -} - -.feedbox1 .icons-div{ - width: 100%; - height: 40px; - border: 1px solid rgb(198, 193, 193); - display: flex; - align-items: center; - justify-content: space-between ; -} - -.icons-div .heart-img{ - width: 30px; - height: 30px; - margin-left: 5px; -} - -.icons-div .comment-img{ - width: 30px; - height: 30px; -} - -.icons-div .share-img{ - width: 30px; - height: 30px; -} - -.icons-div .save-img{ - width: 30px; - height: 30px; - margin-right: 5px; -} - -.feedbox1 .paragraph2{ - width: 100%; - height: 90px; - border: 1px solid rgb(198, 193, 193); - background-color: white; -} - -.paragraph2 p{ - font-size: 15px; - padding-left: 30px; - background-color: white; - -} - -.paragraph2 .date{ - font-size: small; - -} - -.feedbox1 .comment-div{ - width: 100%; - height: 50px; - border: 1px solid rgb(198, 193, 193); - display: flex; - align-items: center; - /* justify-content: space-between ; */ - background-color: white; - border-radius: 0px 0px 10px 10px; -} - -.comment-div .imoji-div img{ - width: 35px; - height: 30px; -} - -.comment-div input{ - height: 25px; - width: 370px; - border:0; -} - -.comment-div strong{ - color: blue; -} - - - -.feedbox2 { - margin: auto; - width: 469px; - height: 500px; - border: 1px solid rgb(198, 193, 193); - background-color: white; - border-radius: 10px; - margin-top: 200px; -} - -.feedbox2 .name-div2 { - margin: auto; - width: 100%; - height: 57px; - border: 0.5px solid rgb(217, 216, 216); - background-color: white; - border-radius: 10px 10px 0px 0px; - display: flex; - -} - -.name-div2 .picture2{ - border-radius: 50%; - width: 42px; - height: 42px; - order: -1; - margin-left: 10px; - margin-top: 7px; -} - -.name-div2 .dots2{ - margin-left: 250px; -} - -.name-div2 h3{ - margin-left: 10px; -} - -.feedbox2 .img-div2 { - margin: auto; - width: 100%; - height: 300px; - border: 1px solid rgb(198, 193, 193); - background-color: white; -} - - -.img-div2 video{ - width: 100%; - height: 100%; -} - -.feedbox2 .paragraph-two{ - width: 100%; - height: 70px; -} - -.paragraph-two p{ - padding-left: 10px; -} - -.feedbox2 .icons-div2{ - width: 100%; - height: 40px; - border: 1px solid rgb(198, 193, 193); - display: flex; - align-items: center; - justify-content: space-between ; -} - -.icons-div2 .heart-img2{ - width: 30px; - height: 30px; - margin-left: 5px; -} - -.icons-div2 .heart-img2{ - width: 30px; - height: 30px; - margin-left: 5px; -} - -.icons-div2 .comment-img2{ - width: 30px; - height: 30px; -} - -.icons-div2 .share-img2{ - width: 30px; - height: 30px; -} - -.icons-div2 .save-img2{ - width: 30px; - height: 30px; - margin-right: 5px; -} - -.feedbox2 .paragraph3{ - width: 100%; - height: 90px; - border: 1px solid rgb(198, 193, 193); - background-color: white; -} - -.paragraph3 .date{ - font-size: small; - background-color: white; -} - -.paragraph3 .date2{ - font-size: small; - background-color: white; -} - -.feedbox2 .comment-div2{ - width: 100%; - height: 50px; - border: 1px solid rgb(198, 193, 193); - display: flex; - align-items: center; - /* justify-content: space-between ; */ - background-color: white; - border-radius: 0px 0px 10px 10px; -} - -.comment-div2 .imoji-div2 img{ - width: 35px; - height: 30px; -} - -.comment-div2 input{ - height: 25px; - width: 370px; - border:0; -} - -.comment-div2 strong{ - color: blue; -} diff --git a/02-position-box-model/Exrecise2/Kseniya_T/pageExample.css b/02-position-box-model/Exrecise2/Kseniya_T/pageExample.css deleted file mode 100644 index a26c0e05b..000000000 --- a/02-position-box-model/Exrecise2/Kseniya_T/pageExample.css +++ /dev/null @@ -1,26 +0,0 @@ -.wrapper{ - position: relative; - margin: 0; -} -.box { - height: 70px; - width: 50px; - background-color: aqua; - z-index: 3; -} - -.pageTopper{ - background-color: rgb(201, 98, 241); - height: 70px; - position: fixed; - width: 100%; - z-index: 1; -} - -.pageHaeder{ - background-color: rgb(167, 167, 167); - height: 200px; - position: sticky; - top: 0px; - font-size: 5rem; -} diff --git a/02-position-box-model/Exrecise2/Kseniya_T/pageExample.html b/02-position-box-model/Exrecise2/Kseniya_T/pageExample.html deleted file mode 100644 index f4ffe5077..000000000 --- a/02-position-box-model/Exrecise2/Kseniya_T/pageExample.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - page example - - -
                        -
                        -
                        Fashion Blog
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        -
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aspernatur saepe explicabo accusantium dolore error unde beatae delectus dicta harum, laudantium, repellat molestiae qui deserunt debitis at quod? Praesentium, culpa.
                        - - \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/TanyaHolczerBBC/BBC_logo.png b/02-position-box-model/Exrecise2/TanyaHolczerBBC/BBC_logo.png deleted file mode 100644 index 877f765a4..000000000 Binary files a/02-position-box-model/Exrecise2/TanyaHolczerBBC/BBC_logo.png and /dev/null differ diff --git a/02-position-box-model/Exrecise2/TanyaHolczerBBC/bbc.html b/02-position-box-model/Exrecise2/TanyaHolczerBBC/bbc.html deleted file mode 100644 index b6c16b41e..000000000 --- a/02-position-box-model/Exrecise2/TanyaHolczerBBC/bbc.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - - - BBC - - - - - -
                        -
                        -
                        - -
                        - -
                        -
                        -
                        -

                        Home

                        -
                        -
                        -

                        News

                        -
                        -
                        -

                        Sport

                        -
                        -
                        -

                        Reel

                        -
                        -
                        -

                        Worklife

                        -
                        -
                        -

                        Travel

                        -
                        -
                        -

                        Future

                        -
                        -
                        -

                        Culture

                        -
                        -
                        -
                        - -
                        -
                        -
                        -
                        -

                        Welcome to BBC.com

                        -
                        -
                        -

                        Wednsday, 23 November

                        -
                        -
                        -
                        -
                        - kitty -

                        Nature

                        -
                        -

                        Lorem ipsum dolor sit, amet consectetur adipisicing elit.

                        -
                        -
                        - puppy -

                        Nature

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - deer -

                        Nature

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - yoda -

                        Nature

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - bear -

                        Nature

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - -

                        Travel

                        -
                        -
                        - boat -

                        Travel

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - balloons -

                        Travel

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - map -

                        Travel

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - waterfall -

                        Travel

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - train -

                        Travel

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - mountain -

                        Travel

                        -
                        -

                        Lorem ipsum dolor sit

                        -
                        -
                        - - - - \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/TanyaHolczerBBC/style.css b/02-position-box-model/Exrecise2/TanyaHolczerBBC/style.css deleted file mode 100644 index 6cae88d6d..000000000 --- a/02-position-box-model/Exrecise2/TanyaHolczerBBC/style.css +++ /dev/null @@ -1,118 +0,0 @@ -* { - margin: 0; - padding: 0; - font-family: Arial, Helvetica, sans-serif; - color: #fff; -} -/* black nav bar */ -.menu { - background-color: #000; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 3vh; -} -.menu_left { - display: flex; - align-items: center; - justify-content: flex-start; -} -.center_menu { - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; -} -#home, #news, #sport, #reel, #worklife, #travel, #future, #culture { - padding-left: 3vh; -} -.search #search { - color: #333; -} -.welcome { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 3vh; -} -h2 { - color: lightgray; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} -/* first grid */ -.image_grid { - box-sizing: border-box; - padding: 1vh; - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-auto-rows: 25vh; - gap: 3vh; -} -.image_grid img { - width: 100%; - height: 100%; - object-fit: cover; - position: relative; - display: block; -} -.first { - grid-column: span 2; - grid-row: span 2; - position: relative; - display: block; -} -.second { - position: relative; - display: block; - box-sizing: border-box; - width: 100%; - height: 100%; - object-fit: cover; -} - -.article_tag { - font-weight: bold; - z-index: 1; - position: absolute; - bottom: 1vh; - left: 1vh; -} -.text { - z-index: 1; - position: absolute; - bottom: 5vh; - left: 1vh; -} -.image_grid2 { - box-sizing: border-box; - padding: 1vh; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 30vh; - gap: 3vh; - - } - .image_grid2 img { - width: 100%; - height: 100%; - object-fit: cover; - position: relative; - display: block; - } - .third { - position: relative; - display: block; - box-sizing: border-box; - object-fit: cover; - } - - - - - - - - - diff --git a/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/index.html b/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/index.html deleted file mode 100644 index ec9df54af..000000000 --- a/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/index.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - Document - - - -
                        -
                        - -
                        - -
                        -
                        -

                        hello

                        - -
                        - -
                        -

                        - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae laborum quam libero aspernatur perspiciatis debitis voluptatum ratione rerum nesciunt explicabo reiciendis totam repellat sunt, consequatur facilis et dolore sint laboriosam? -v -

                        -
                        - - - - - \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/style.css b/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/style.css deleted file mode 100644 index 574c08859..000000000 --- a/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/style.css +++ /dev/null @@ -1,42 +0,0 @@ -.main { - height: 100px; - background-color: red; - width: 100%; - position: fixed; - top: 0px; -} - -body { -position: relative; -margin: 0%; -} - -.img { - position: fixed; - top: 10px; - right: 10px; - width: 100px; - height: 100px; -} -.img img { - width: 100%; -} -h4 { - position: sticky; - text-align: center; - margin-top: 110px; - -} - -.title { - background-color: gray; - height: 50px; - position: sticky; - top: 100px; -} - -.text { - height: 100%; - background-color: rgb(17, 13, 13); - color: white; -} \ No newline at end of file diff --git a/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/text.txt b/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/text.txt deleted file mode 100644 index 9e08bfa11..000000000 --- a/02-position-box-model/Exrecise2/UrielB-IdanB-Zikiy/text.txt +++ /dev/null @@ -1 +0,0 @@ -this is the task \ No newline at end of file diff --git a/02-position-box-model/Tanya-Holczer/catsdogs.jpg b/02-position-box-model/Tanya-Holczer/catsdogs.jpg deleted file mode 100644 index 115b49777..000000000 Binary files a/02-position-box-model/Tanya-Holczer/catsdogs.jpg and /dev/null differ diff --git a/02-position-box-model/Tanya-Holczer/family.png b/02-position-box-model/Tanya-Holczer/family.png deleted file mode 100644 index f5404c32c..000000000 Binary files a/02-position-box-model/Tanya-Holczer/family.png and /dev/null differ diff --git a/02-position-box-model/Tanya-Holczer/index.html b/02-position-box-model/Tanya-Holczer/index.html deleted file mode 100644 index a1a9a8bba..000000000 --- a/02-position-box-model/Tanya-Holczer/index.html +++ /dev/null @@ -1,149 +0,0 @@ - - - - - - - Instagram layout - - - - - - -
                        - -
                        - -
                        - - - -
                        -
                        - -
                        -
                        - - - - -
                        -
                        -
                        - - - - -
                        -
                        - -
                        -
                        -
                        -
                        - -
                        -
                        -

                        Alice_Holczer

                        -
                        -
                        - -
                        - -

                        comments:

                        -

                                Awesome :)

                        -

                            We need to adopt more!

                        -
                        -
                        -
                        - - - -
                        -
                        -
                        - -
                        -
                        -

                          37,560 likes

                        -

                        View all 100 comments

                        -

                          2 days ago

                        -
                        -
                        - -
                        - -
                        -
                        - -
                        -
                        -
                        -
                        -
                        -
                        -
                        - -
                        -
                        -

                        Alice_Holczer

                        -
                        -
                        - -
                        - -

                        comments:

                        -

                                Awesome :)

                        -

                            We need to adopt more!

                        -
                        -
                        -
                        - - - -
                        -
                        -
                        - -
                        -
                        -

                          37,560 likes

                        -

                        View all 100 comments

                        -

                          2 days ago

                        -
                        -
                        - -
                        - -
                        -
                        - -
                        -
                        -
                        -
                        -
                        -
                        -
                        - - - - -
                        - -
                        -
                        -
                        - - \ No newline at end of file diff --git a/02-position-box-model/Tanya-Holczer/logo.png b/02-position-box-model/Tanya-Holczer/logo.png deleted file mode 100644 index 29806ae04..000000000 Binary files a/02-position-box-model/Tanya-Holczer/logo.png and /dev/null differ diff --git a/02-position-box-model/Tanya-Holczer/style.css b/02-position-box-model/Tanya-Holczer/style.css deleted file mode 100644 index fc0f293d4..000000000 --- a/02-position-box-model/Tanya-Holczer/style.css +++ /dev/null @@ -1,232 +0,0 @@ -body { - background-color: #F2F3F4; - margin: 0; - font-family: 'Roboto', sans-serif; - overflow-x: none; - } -/* Grey outer box */ - .container { -position: relative; -box-sizing: border-box; -background: #bfc9ca; -margin:auto; -width: 500px; -height: 1450px; -} -/* First bar */ -.navbar1 { - position: fixed; - display: flex; - padding: 10px 10px; - background: #f4f4f4; - border: lightgrey; - margin: 0px 10px ; - height: 30px; - width: 450px; - z-index: 1; - top: 0px; - border-radius: 0px 0px 15px 15px; - -} -#instagram_logo { - display: flex; - height: 30px; - -} -.right_holder { - display: flex; - position: relative; - justify-content: center; - align-items: center; - width: 300px; - left: 100px; -} -.search { - border: #bfc9ca; - display: flex; - padding: 10px; - } -.fa-regular:hover { - display: flex; - color: red; - margin: 0px; -} -/* second bar */ -.navbar2 { - position: relative; - background: #f4f4f4; - width: 450px; - height: 100px; - margin: auto; - margin-top: 3px; - box-sizing: border-box; - top: 70px; - border-radius: 15px; - - } -.images { - display: flex; - align-items: center; - justify-content: space-around; - -} -.images img { - margin-top: 5px; - border-radius: 50%; - display: inline-block; - - } - .nameplates { - display: flex; - align-items: center; - justify-content: space-around; - - } -.button { - background: #4c6ca0; - border: none; - color: #fff; - font-size: 16px; - border-radius: 5px; - font-size: 10px; - height: 25px; - width: 50px; - margin-bottom: 5px; - -} -.button:hover { - color: #FA8072 ; - background: #446190; -} - -/* Third bar */ -.picture_post { - position: relative; - background: #f4f4f4; - width: 450px; - height: 560px; - margin: auto; - margin-top: 5px; - box-sizing: border-box; - top: 80px; - border-radius: 15px; -} -.top { - display: flex; - align-items:baseline; - justify-content: space-between; - padding: 0px 10px; -} - -.left_nametag { - display: flex; - margin-left: 10px; - -} -.alice { - display: inline-block; - margin-left: 10px; - margin-top: 10px; -} -h1 { - font-size: 14px; -} -.fa-solid:hover { - color: #40E0D0; -} -#catsdogs { - display: flex; - align-self: center; - width: 450px; - margin: auto; -} -#comments { - text-decoration: underline; - font-size: 14px; -} -#comments2 { - font-size: 14px; - right: 50 px; -} -.signs { -display: flex; -} -.right_sign { - float: left; - margin-left: 200px; - -} -.left_signs { - display: flex; - float: right; - width: 200px; - margin: 0px; -} -.left_signs1 { - display: flex; - align-content: space-between; - align-items: center; - position: relative; - left: 20px; -} -.fa-comment { - padding: 0px 20px; -} - -#likes { - font-size: 14px; - font-weight: bold; -} -#comment { - color: #717D7E; -} -#time_stamp { - color: #717D7E; - font-size: small; -} -.comment_section { - display: flex; -} -.comment_box { - display: flex; -} -.fa-face-smile { - padding: 0px 10px; -} -.add_comment { - height: 30px; - width: 100px; -} -.button_post { - display: flex; - position: relative; -} -.post { - position: relative; - display: flex; - background: #f4f4f4; - border: none; - color: #6495ED; - font-size: 16px; - margin-bottom: 5px; - left: 100px; -} -.post:hover { - color:#154360; - -} -.navbar3 { - position: fixed; - display: flex; - padding: 15px 10px; - background: #f4f4f4; - border: lightgrey; - height: 30px; - width: 450px; - margin: 0px 10px; - z-index: 1; - align-items:center; - justify-content: space-evenly; - bottom: 0px; - border-radius: 15px 15px 0px 0px; -} diff --git a/02-position-box-model/example/index.html b/02-position-box-model/example/index.html deleted file mode 100644 index 0d18012cc..000000000 --- a/02-position-box-model/example/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Document - - - -

                        Hi

                        -
                        -
                        -
                        -
                        -
                        -
                        - - - \ No newline at end of file diff --git a/02-position-box-model/example/style.css b/02-position-box-model/example/style.css deleted file mode 100644 index 02b68de86..000000000 --- a/02-position-box-model/example/style.css +++ /dev/null @@ -1,16 +0,0 @@ -.box { - width: 100px; - height: 100px; - background-color: blueviolet; - border: 5px solid black; - margin: auto; -} - -.header { - background-color: blue; - border: 3px solid black; - /* padding: 30px 40px 50px 60px; - margin: 30px; */ - /* padding-top: 50px; */ - padding: 50px 10px 50px 90px; -} \ No newline at end of file diff --git a/02-position-box-model/shlomi-a/hard1/WhatsApp Image 2022-10-16 at 3.13.34 PM.jpeg b/02-position-box-model/shlomi-a/hard1/WhatsApp Image 2022-10-16 at 3.13.34 PM.jpeg deleted file mode 100644 index 20eb336e6..000000000 Binary files a/02-position-box-model/shlomi-a/hard1/WhatsApp Image 2022-10-16 at 3.13.34 PM.jpeg and /dev/null differ diff --git a/02-position-box-model/shlomi-a/hard1/ca9d0480be6bdf6a03fdad322d322dc4ef2fac27.webp b/02-position-box-model/shlomi-a/hard1/ca9d0480be6bdf6a03fdad322d322dc4ef2fac27.webp deleted file mode 100644 index 55289684b..000000000 Binary files a/02-position-box-model/shlomi-a/hard1/ca9d0480be6bdf6a03fdad322d322dc4ef2fac27.webp and /dev/null differ diff --git a/02-position-box-model/shlomi-a/hard1/index.html b/02-position-box-model/shlomi-a/hard1/index.html deleted file mode 100644 index 44e0fdf7f..000000000 --- a/02-position-box-model/shlomi-a/hard1/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - tomer cohen - - - - - -
                        -
                        - -
                        -
                        - -

                        text

                        -
                        -
                        -

                        title of newspaper

                        -

                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus nulla molestiae illum ipsam - aliquam totam maxime facilis fuga itaque nemo obcaecati tempore, quibusdam cupiditate accusamus - consectetur explicabo natus odit. Nemo.

                        -

                        made by tomer

                        -
                        -
                        - - - - \ No newline at end of file diff --git a/02-position-box-model/shlomi-a/hard1/papers.co-vv16-water-drop-rain-cold-blue-pattern-background-bokeh-blue-33-iphone6-wallpaper-250x444.jpg b/02-position-box-model/shlomi-a/hard1/papers.co-vv16-water-drop-rain-cold-blue-pattern-background-bokeh-blue-33-iphone6-wallpaper-250x444.jpg deleted file mode 100644 index 48db4ef45..000000000 Binary files a/02-position-box-model/shlomi-a/hard1/papers.co-vv16-water-drop-rain-cold-blue-pattern-background-bokeh-blue-33-iphone6-wallpaper-250x444.jpg and /dev/null differ diff --git a/02-position-box-model/shlomi-a/hard1/photo-1588421357574-87938a86fa28.jpg b/02-position-box-model/shlomi-a/hard1/photo-1588421357574-87938a86fa28.jpg deleted file mode 100644 index 325579432..000000000 Binary files a/02-position-box-model/shlomi-a/hard1/photo-1588421357574-87938a86fa28.jpg and /dev/null differ diff --git a/02-position-box-model/shlomi-a/hard1/style.css b/02-position-box-model/shlomi-a/hard1/style.css deleted file mode 100644 index eb0dc2fce..000000000 --- a/02-position-box-model/shlomi-a/hard1/style.css +++ /dev/null @@ -1,27 +0,0 @@ - -.border{ - border: 20px solid blue; - height: 27.7rem; - -} -.pictxt{ - display: inline; - background-color: red; - margin-left: 220px; -} -div{ - width: 250px; - height: 450px; -} -#text{ - background-image: url("/01-HTML-CSS/Tomer-C/hard1/photo-1588421357574-87938a86fa28.jpg"); - width: 554px; - height: 200px; - position: absolute; - top: 491px; -} -#balls{ - position: absolute; - left: 270px; - bottom: 448px; -} \ No newline at end of file diff --git a/02-position-box-model/shlomi-a/homework2/index.html b/02-position-box-model/shlomi-a/homework2/index.html deleted file mode 100644 index 4db13839d..000000000 --- a/02-position-box-model/shlomi-a/homework2/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - home work div - - - -
                        -
                        - -

                        THIS IS MY FAVORIT GAME RIGHT NOW

                        -

                        in sunday 6.11 was a world cup in the game and my team i was fan of lost in the finel

                        -
                        -
                        -
                        -
                        - -

                        THIS IS MY FAVORIT GAME RIGHT NOW

                        -

                        in sunday 6.11 was a world cup in the game and my team i was fan of lost in the finel

                        -
                        -
                        -
                        -
                        - -

                        THIS IS MY FAVORIT GAME RIGHT NOW

                        -

                        in sunday 6.11 was a world cup in the game and my team i was fan of lost in the finel

                        -
                        -
                        - - \ No newline at end of file diff --git a/02-position-box-model/shlomi-a/homework2/style.css b/02-position-box-model/shlomi-a/homework2/style.css deleted file mode 100644 index e53c1a662..000000000 --- a/02-position-box-model/shlomi-a/homework2/style.css +++ /dev/null @@ -1,4 +0,0 @@ -.imgandtext{ - background-color: blue; - display: inline-block -} diff --git a/02-position-box-model/shlomi-a/position/index.html b/02-position-box-model/shlomi-a/position/index.html deleted file mode 100644 index 132e63c26..000000000 --- a/02-position-box-model/shlomi-a/position/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Document - - - -
                        -
                        -
                        -
                        - - \ No newline at end of file diff --git a/02-position-box-model/shlomi-a/position/style.css b/02-position-box-model/shlomi-a/position/style.css deleted file mode 100644 index 925840d9b..000000000 --- a/02-position-box-model/shlomi-a/position/style.css +++ /dev/null @@ -1,10 +0,0 @@ -.box{ - width: 100px; - height: 100px; - background-color: blue; - outline: 2px solid red; - margin: auto; -} -.top{ - -} \ No newline at end of file diff --git a/Ayala Perlovich-WhatsApp/dist/style.scss.css b/Ayala Perlovich-WhatsApp/dist/style.scss.css deleted file mode 100644 index 90fe19517..000000000 --- a/Ayala Perlovich-WhatsApp/dist/style.scss.css +++ /dev/null @@ -1,79 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} - -.WhatsApp { - background-color: whitesmoke; - color: black; - width: 40%; - height: 839px; - /*align-content: center;*/ - border-radius: 10px; - border: solid 3px black; - margin: 30%; - margin-top: 0; -} -.WhatsApp__img { - width: 40px; - padding-top: 15px; -} -.WhatsApp .header { - display: grid; - grid-template-columns: 80% 10% 10%; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - color: whitesmoke; - background-color: #04af8ffc; - font-size: large; - font-weight: 500; -} -.WhatsApp .header__logo { - display: grid; - grid-template-columns: 60% 40%; - color: white; -} -.WhatsApp .header__icon { - display: grid; - grid-template-columns: 80% 10% 10%; -} -.WhatsApp .header__icon--search { - color: white; -} -.WhatsApp__nav { - display: grid; - grid-template-columns: 25% 25% 25% 25%; - color: white; - padding-left: 20px; - padding-bottom: 10px; - padding-top: 10px; - background-color: #04af8ffc; - font-size: small; - height: 50px; -} -.WhatsApp .line { - border-bottom: 3px solid whitesmoke; - height: 80px; - display: grid; - grid-template-columns: 18% 72% 10%; - padding-top: 10px; -} -.WhatsApp .line .profil { - height: 50px; - width: 45px; - background-color: #25d225; - border-radius: 50%; - padding-left: 10%; -} -.WhatsApp .line__Username { - justify-content: center; - height: 90px; - justify-content: space-between; - border: 1px solid wheat; -} -.WhatsApp .line__Username__video { - padding-top: 15px; -} \ No newline at end of file diff --git a/Ayala Perlovich-WhatsApp/iimg.icon.png b/Ayala Perlovich-WhatsApp/iimg.icon.png deleted file mode 100644 index 0aedc013d..000000000 Binary files a/Ayala Perlovich-WhatsApp/iimg.icon.png and /dev/null differ diff --git a/Ayala Perlovich-WhatsApp/img.WhatsApp.png b/Ayala Perlovich-WhatsApp/img.WhatsApp.png deleted file mode 100644 index fcbdfe123..000000000 Binary files a/Ayala Perlovich-WhatsApp/img.WhatsApp.png and /dev/null differ diff --git a/Ayala Perlovich-WhatsApp/img.profil.png b/Ayala Perlovich-WhatsApp/img.profil.png deleted file mode 100644 index a5f57bc5a..000000000 Binary files a/Ayala Perlovich-WhatsApp/img.profil.png and /dev/null differ diff --git a/Ayala Perlovich-WhatsApp/index.html b/Ayala Perlovich-WhatsApp/index.html deleted file mode 100644 index 0a315ebda..000000000 --- a/Ayala Perlovich-WhatsApp/index.html +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - - - - - Document - - - - - - -
                        -
                        - - - -
                        - -
                        -
                        -
                        - -
                        -
                        -
                        CHATS
                        -
                        STATUS
                        -
                        CALLS
                        - - -
                        - - - -
                        -
                        -
                        -
                        Username 1 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - -
                        -
                        -
                        -
                        Username 2 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - - -
                        -
                        -
                        -
                        Username 3 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - - - -
                        -
                        -
                        -
                        Username 4 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - -
                        -
                        -
                        -
                        Username 5 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - -
                        -
                        -
                        -
                        Username 6 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - -
                        -
                        -
                        -
                        Username -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - -
                        -
                        -
                        -
                        Username 8 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - - - - - - - - -
                        -
                        -
                        -
                        Username 9 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - -
                        con.png
                        -
                        -
                        - - -
                        - - -
                        - -
                        - - > - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Ayala Perlovich-WhatsApp/style.scss.scss b/Ayala Perlovich-WhatsApp/style.scss.scss deleted file mode 100644 index f83370eed..000000000 --- a/Ayala Perlovich-WhatsApp/style.scss.scss +++ /dev/null @@ -1,125 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -} - - - - -.WhatsApp { - - background-color: whitesmoke; - color: black; - width: 40%; - height: 839px; - /*align-content: center;*/ - border-radius: 10px; - border: solid 3px black; - margin: 30%; - margin-top: 0; - - &__img { - width: 40px; - padding-top: 15px; - - - - } - - .header { - display: grid; - grid-template-columns: 80% 10% 10%; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - color: whitesmoke; - background-color: #04af8ffc; - font-size: large; - font-weight: 500; - - - - &__logo { - - display: grid; - grid-template-columns: 60% 40%; - - color: white; - - - - } - - &__icon { - display: grid; - grid-template-columns: 80% 10% 10%; - - - - &--search { - color: white; - - } - - - - } - - } - - &__nav { - display: grid; - grid-template-columns: 25% 25% 25% 25%; - color: white; - padding-left: 20px; - padding-bottom: 10px; - padding-top: 10px; - background-color: #04af8ffc; - font-size: small; - height: 50px; - } - - - .line { - border-bottom: 3px solid whitesmoke; - height: 80px; - display: grid; - grid-template-columns: 18% 72% 10%; - padding-top: 10px; - - - .profil { - height: 50px; - width: 45px; - background-color: rgb(37, 210, 37); - border-radius: 50%; - padding-left: 10%; - - - } - - &__Username { - justify-content: center; - height: 90px; - justify-content: space-between; - border: 1px solid wheat; - - - &__video { - padding-top: 15px; - } - - } - - - - } - - - -} - - - diff --git a/Ayala Perlovich/dist/index.js b/Ayala Perlovich/dist/index.js deleted file mode 100644 index 0b741a5a8..000000000 --- a/Ayala Perlovich/dist/index.js +++ /dev/null @@ -1,13 +0,0 @@ -var Namedeveloper = "David" + "or" + "Dani" + "yonit" + "Dana" + "Rina" + "Omer" + "Tomer" + "Dafna" + "Sigal"; -var SalarieDavid = 8000; -var Salarieor = 10000; -var SalarieDani = 13000; -var Salarieyonit = 12000; -var SalarieDana = 9000; -var SalarieRina = 16000; -var SalarieOmer = 18000; -var SalarieTomer = 20000; -var SalarieDafna = 21000; -var SalarieSigal = 19000; -var avg = (SalarieDavid + Salarieor + SalarieDani + Salarieyonit + SalarieDana + SalarieRina + SalarieOmer + SalarieTomer + SalarieDafna + SalarieSigal) / 10; -console.log(" The average salary of a developeris " + avg); diff --git a/Ayala Perlovich/index.ts b/Ayala Perlovich/index.ts deleted file mode 100644 index 4df5a7297..000000000 --- a/Ayala Perlovich/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -var Namedeveloper = "David" + "or" + "Dani" + "yonit" + "Dana" + "Rina" + "Omer" + "Tomer" + "Dafna" + "Sigal"; -var SalarieDavid = 8000; -var Salarieor = 10000; -var SalarieDani = 13000; -var Salarieyonit = 12000; -var SalarieDana = 9000; -var SalarieRina = 16000; -var SalarieOmer = 18000; -var SalarieTomer = 20000; -var SalarieDafna = 21000; -var SalarieSigal = 19000; - - -var avg = (SalarieDavid + Salarieor + SalarieDani + Salarieyonit + SalarieDana + SalarieRina + SalarieOmer + SalarieTomer + SalarieDafna + SalarieSigal) / 10; - -console.log(` The average salary of a developeris ${avg}`); \ No newline at end of file diff --git a/WhatsApp/dist/style.scss.css b/WhatsApp/dist/style.scss.css deleted file mode 100644 index 90fe19517..000000000 --- a/WhatsApp/dist/style.scss.css +++ /dev/null @@ -1,79 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} - -.WhatsApp { - background-color: whitesmoke; - color: black; - width: 40%; - height: 839px; - /*align-content: center;*/ - border-radius: 10px; - border: solid 3px black; - margin: 30%; - margin-top: 0; -} -.WhatsApp__img { - width: 40px; - padding-top: 15px; -} -.WhatsApp .header { - display: grid; - grid-template-columns: 80% 10% 10%; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - color: whitesmoke; - background-color: #04af8ffc; - font-size: large; - font-weight: 500; -} -.WhatsApp .header__logo { - display: grid; - grid-template-columns: 60% 40%; - color: white; -} -.WhatsApp .header__icon { - display: grid; - grid-template-columns: 80% 10% 10%; -} -.WhatsApp .header__icon--search { - color: white; -} -.WhatsApp__nav { - display: grid; - grid-template-columns: 25% 25% 25% 25%; - color: white; - padding-left: 20px; - padding-bottom: 10px; - padding-top: 10px; - background-color: #04af8ffc; - font-size: small; - height: 50px; -} -.WhatsApp .line { - border-bottom: 3px solid whitesmoke; - height: 80px; - display: grid; - grid-template-columns: 18% 72% 10%; - padding-top: 10px; -} -.WhatsApp .line .profil { - height: 50px; - width: 45px; - background-color: #25d225; - border-radius: 50%; - padding-left: 10%; -} -.WhatsApp .line__Username { - justify-content: center; - height: 90px; - justify-content: space-between; - border: 1px solid wheat; -} -.WhatsApp .line__Username__video { - padding-top: 15px; -} \ No newline at end of file diff --git a/WhatsApp/iimg.icon.png b/WhatsApp/iimg.icon.png deleted file mode 100644 index 0aedc013d..000000000 Binary files a/WhatsApp/iimg.icon.png and /dev/null differ diff --git a/WhatsApp/img.WhatsApp.png b/WhatsApp/img.WhatsApp.png deleted file mode 100644 index fcbdfe123..000000000 Binary files a/WhatsApp/img.WhatsApp.png and /dev/null differ diff --git a/WhatsApp/img.profil.png b/WhatsApp/img.profil.png deleted file mode 100644 index a5f57bc5a..000000000 Binary files a/WhatsApp/img.profil.png and /dev/null differ diff --git a/WhatsApp/index.html b/WhatsApp/index.html deleted file mode 100644 index 0a315ebda..000000000 --- a/WhatsApp/index.html +++ /dev/null @@ -1,228 +0,0 @@ - - - - - - - - - - Document - - - - - - -
                        -
                        - - - -
                        - -
                        -
                        -
                        - -
                        -
                        -
                        CHATS
                        -
                        STATUS
                        -
                        CALLS
                        - - -
                        - - - -
                        -
                        -
                        -
                        Username 1 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - -
                        -
                        -
                        -
                        Username 2 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - - -
                        -
                        -
                        -
                        Username 3 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - - - -
                        -
                        -
                        -
                        Username 4 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - -
                        -
                        -
                        -
                        Username 5 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - -
                        -
                        -
                        -
                        Username 6 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - -
                        -
                        -
                        -
                        Username -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - -
                        -
                        -
                        -
                        Username 8 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - - -
                        -
                        -
                        - - - - - - - - - - - -
                        -
                        -
                        -
                        Username 9 -
                        -

                        yesterday 3:20pm

                        - -
                        -
                        - -
                        con.png
                        -
                        -
                        - - -
                        - - -
                        - - - - > - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/WhatsApp/style.scss.scss b/WhatsApp/style.scss.scss deleted file mode 100644 index f83370eed..000000000 --- a/WhatsApp/style.scss.scss +++ /dev/null @@ -1,125 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -} - - - - -.WhatsApp { - - background-color: whitesmoke; - color: black; - width: 40%; - height: 839px; - /*align-content: center;*/ - border-radius: 10px; - border: solid 3px black; - margin: 30%; - margin-top: 0; - - &__img { - width: 40px; - padding-top: 15px; - - - - } - - .header { - display: grid; - grid-template-columns: 80% 10% 10%; - padding-left: 20px; - padding-top: 20px; - padding-bottom: 20px; - color: whitesmoke; - background-color: #04af8ffc; - font-size: large; - font-weight: 500; - - - - &__logo { - - display: grid; - grid-template-columns: 60% 40%; - - color: white; - - - - } - - &__icon { - display: grid; - grid-template-columns: 80% 10% 10%; - - - - &--search { - color: white; - - } - - - - } - - } - - &__nav { - display: grid; - grid-template-columns: 25% 25% 25% 25%; - color: white; - padding-left: 20px; - padding-bottom: 10px; - padding-top: 10px; - background-color: #04af8ffc; - font-size: small; - height: 50px; - } - - - .line { - border-bottom: 3px solid whitesmoke; - height: 80px; - display: grid; - grid-template-columns: 18% 72% 10%; - padding-top: 10px; - - - .profil { - height: 50px; - width: 45px; - background-color: rgb(37, 210, 37); - border-radius: 50%; - padding-left: 10%; - - - } - - &__Username { - justify-content: center; - height: 90px; - justify-content: space-between; - border: 1px solid wheat; - - - &__video { - padding-top: 15px; - } - - } - - - - } - - - -} - - - diff --git a/YuvalAramaProject/dist/index.css b/YuvalAramaProject/dist/index.css new file mode 100644 index 000000000..ef5208983 --- /dev/null +++ b/YuvalAramaProject/dist/index.css @@ -0,0 +1,120 @@ +* { + padding: 0; + margin: 0; +} + +body { + background-color: lightgoldenrodyellow; + height: 100%; + width: 100%; + position: relative; + font-family: "Itim", cursive; +} + +html { + height: 100%; + width: 100%; +} + +header { + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} + +#divContainer { + padding: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} +#divContainer .teams { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin: 20px 5px 0px 5px; + padding: 25px; + height: 300px; + width: 200px; + border: 4px solid #18389b; + border-radius: 10px; +} +#divContainer .teams img { + padding-top: 10px; + height: 150px; +} +#divContainer .teams h3 { + padding: 20px; +} +#divContainer .teams .deleteTeam { + height: 25px; + position: absolute; + top: -3px; + left: 2px; +} + +.teams:hover { + transition: all 1s ease-in-out; + cursor: pointer; + color: lightgoldenrodyellow; + background-color: rgba(28, 59, 151, 0.952); +} + +a img { + height: 80px; + position: absolute; + top: 30px; + right: 30px; +} + +.hide { + display: none; +} + +.btn { + box-shadow: 0 0 10px 2px; + background-color: #F6BF05; + border-radius: 10px; + padding: 10px; + position: absolute; + left: 50px; + top: 45px; +} + +.btn:hover { + cursor: pointer; + box-shadow: 0 0 13px 4px; +} + +.adminLoginForm { + border-radius: 10px; + text-align: center; + padding: 10px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + background-color: #F6BF05; + box-shadow: 0 0 10px 2px; +} + +.adminNewTeamForm { + border-radius: 10px; + text-align: center; + padding: 8px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + box-shadow: 0 0 10px 2px; + background-color: #F6BF05; +} + +.welcomeMsg { + text-align: center; + padding: 30px 0 0 0; +} \ No newline at end of file diff --git a/YuvalAramaProject/dist/index.js b/YuvalAramaProject/dist/index.js new file mode 100644 index 000000000..88c0b2bab --- /dev/null +++ b/YuvalAramaProject/dist/index.js @@ -0,0 +1,85 @@ +var teamNameInput = document.querySelector("#teamName"); +var badgeImgInput = document.querySelector("#badgeImg"); +var leagueInput = document.querySelector("#league"); +var adminLoginForm = document.querySelector("#adminLoginForm"); +var adminLoginBtn = document.querySelector(".adminLoginBtn"); +var adminName = document.querySelector("#adminName"); +var newTeamForm = document.querySelector("#addTeamForm"); +var addTeamBtn = document.querySelector(".addTeamBtn"); +var welcomeMsg = document.querySelector(".welcomeMsg") || null; +var divContainer = document.querySelector("#divContainer"); +var username = localStorage.getItem("username"); +if (username) { + adminLoginBtn.classList.add("hide"); + welcomeMsg.innerText = "Hello " + username + " , Welcome to FOOTOP"; + addTeamBtn.classList.remove("hide"); + addTeamBtn.addEventListener("click", function () { + newTeamForm.classList.remove("hide"); + }); +} +adminLoginBtn.addEventListener("click", function () { + adminLoginForm.classList.remove("hide"); +}); +var FootballTeam = /** @class */ (function () { + function FootballTeam(name, image, league) { + this.name = name; + this.image = image; + this.league = league; + } + return FootballTeam; +}()); +var footballTeams = []; +var storedFootballTeams = localStorage.getItem("footballTeams"); +if (storedFootballTeams) { + footballTeams = JSON.parse(storedFootballTeams); +} +else { + footballTeams = [ + new FootballTeam("Manchester United", "./photos/man united.png", "Premier League"), + new FootballTeam("Real Madrid", "./photos/real madrid.png", "La Liga"), + new FootballTeam("Barcelona", "./photos/barcelona.png", "La Liga"), + new FootballTeam("Bayern Munich", "./photos/bayern.png", "Bundesliga"), + new FootballTeam("Manchester City", "./photos/Manchester_City.png", "Premier League"), + ]; +} +footballTeams.forEach(function (team) { + var teamElement = document.createElement("div"); + teamElement.classList.add("teams"); + teamElement.innerHTML = "\n

                        " + team.name + "

                        \n \n

                        " + team.league + "

                        "; + divContainer.appendChild(teamElement); +}); +newTeamForm.addEventListener("submit", function (event) { + try { + event.preventDefault(); + newTeamForm.classList.add("hide"); + var teamNameValue = teamNameInput.value; + var badgeImgValue = badgeImgInput.value; + var leagueValue = leagueInput.value; + footballTeams.push(new FootballTeam(teamNameValue, badgeImgValue, leagueValue)); + localStorage.setItem("footballTeams", JSON.stringify(footballTeams)); + divContainer.innerHTML = ''; + footballTeams.forEach(function (team) { + var teamElement = document.createElement("div"); + teamElement.classList.add("teams"); + teamElement.innerHTML = + "

                        " + team.name + "

                        \n \n

                        " + team.league + "

                        "; + divContainer.appendChild(teamElement); + }); + } + catch (error) { + console.error(error); + } +}); +adminLoginForm.addEventListener("submit", function (event) { + try { + event.preventDefault(); + var username_1 = adminName.value; + localStorage.setItem("username", username_1); + welcomeMsg.innerText = "Hey " + username_1 + " , Welcome to FOOTOP"; + adminLoginBtn.classList.add("hide"); + adminLoginForm.classList.add("hide"); + } + catch (error) { + console.error(error); + } +}); diff --git a/YuvalAramaProject/dist/quiz.css b/YuvalAramaProject/dist/quiz.css new file mode 100644 index 000000000..025e26ae8 --- /dev/null +++ b/YuvalAramaProject/dist/quiz.css @@ -0,0 +1,103 @@ +*, *::before, *::after { + box-sizing: border-box; + font-family: "Itim", cursive; +} + +body { + background-color: lightgoldenrodyellow; + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + position: relative; +} + +header { + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} + +.quizBody { + width: 100vw; + height: 75vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + max-width: 80%; + padding: 50px; + border-radius: 10px; + box-shadow: 0 0 10px 2px; + background-color: rgba(28, 59, 151, 0.329); +} +.container .btns { + display: grid; + grid-template-columns: repeat(2, auto); + gap: 10px; + margin: 30px 0; +} +.container .btn { + padding: 10px 15px; + border-radius: 5px; + outline: none; + border: 2px solid #233569; + background-color: #758dd6; + color: white; +} +.container .btn--correct { + background-color: #3b5a0d; +} +.container .btn--wrong { + background-color: red; +} +.container .btn:hover { + border-color: black; + cursor: pointer; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; +} +.controls .menuBtn { + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; +} + +.endGame { + height: 400px; + width: 900px; + border-radius: 50%; + background-color: rgba(28, 59, 151, 0.555); + justify-content: center; + align-items: center; + text-align: center; + box-shadow: 0 0 10px 2px; +} +.endGame #finalScore { + font-size: 50px; +} +.endGame #endGameMessage { + color: lightgoldenrodyellow; + padding: 51px 0 40px 0; +} +.endGame #restartBtn { + border-radius: 5px; + outline: none; + border: 2px solid #233569; + background-color: #758dd6; + color: white; + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; +} + +.hide { + display: none; +} \ No newline at end of file diff --git a/YuvalAramaProject/dist/quiz.js b/YuvalAramaProject/dist/quiz.js new file mode 100644 index 000000000..104a17085 --- /dev/null +++ b/YuvalAramaProject/dist/quiz.js @@ -0,0 +1,170 @@ +var startBtn = document.querySelector("#startBtn"); +var questionsContainer = document.querySelector("#questionContainer"); +var questionElement = document.querySelector("#question"); +var answerButtonsElements = document.querySelectorAll("#answerButtons"); +var endGameAlert = document.querySelector("#endGameAlert"); +var quizContainer = document.querySelector(".container"); +var endGameMessage = document.querySelector("#endGameMessage"); +var finalScore = document.querySelector("#finalScore"); +var correctAnswers = 0; +var shuffleQuestions, currentQuestionIndex; +var questions = [ + { + question: "What team has the most UCL titles ?", + answers: [ + { text: "Real Madrid", correct: true }, + { text: "Manchester United", correct: false }, + { text: "Milan", correct: false }, + { text: "Barcelona", correct: false } + ] + }, + { + question: "Who won the Ballon D'or in 2017 ?", + answers: [ + { text: "Luka Modric", correct: false }, + { text: "Lionel Messi", correct: false }, + { text: "Karim Benzema", correct: false }, + { text: "Cristiano Ronaldo", correct: true } + ] + }, + { + question: "What transfer was the most expensive ?", + answers: [ + { text: "Neymar Jr to PSG", correct: true }, + { text: "Kylian Mbappe to PSG", correct: false }, + { text: "Joao Felix to Atletico Madrid", correct: false }, + { text: "Cristiano Ronaldo to Real Madrid", correct: false } + ] + }, + { + question: "What team has the biggest fan base in the world ?", + answers: [ + { text: "Real Madrid", correct: false }, + { text: "Manchester United", correct: true }, + { text: "Liverpool", correct: false }, + { text: "Barcelona", correct: false } + ] + }, + { + question: "Who has the most Ballon D'or ?", + answers: [ + { text: "Zinedine Zidane", correct: false }, + { text: "Cristiano Ronaldo", correct: false }, + { text: "Lionel Messi", correct: true }, + { text: "Kaka", correct: false } + ] + }, + { + question: "Who won the Ballon D'or in 2020 ?", + answers: [ + { text: "Robert Lewandowski", correct: false }, + { text: "Cristiano Ronaldo", correct: false }, + { text: "Lionel Messi", correct: false }, + { text: "Never awarded due to Covid19", correct: true } + ] + }, + { + question: "Which club has never won the UCL ?", + answers: [ + { text: "Ajax", correct: false }, + { text: "Inter-milano", correct: false }, + { text: "Porto", correct: false }, + { text: "PSG", correct: true } + ] + }, + { + question: "What country has the most World Cup titles ?", + answers: [ + { text: "Brazil", correct: true }, + { text: "Spain", correct: false }, + { text: "Italy", correct: false }, + { text: "Germany", correct: false } + ] + }, + { + question: "What is the biggest fan capacity stadium in the world ?", + answers: [ + { text: "Santiago Bernabau (Real Madrid)", correct: false }, + { text: "Manchester United (Old Traford)", correct: false }, + { text: "Camp Nou (Barcelona)", correct: true }, + { text: "Signal Idunna Park (Dortmund)", correct: false } + ] + }, + { + question: "Who is the highest scorer on one single UCL season ?", + answers: [ + { text: "Cristiano Ronaldo", correct: true }, + { text: "Robert Lewandowski", correct: false }, + { text: "Lionel Messi", correct: false }, + { text: "Neymar Jr", correct: false } + ] + } +]; +startBtn.addEventListener("click", startGame); +function startGame() { + startBtn.classList.add("hide"); + shuffleQuestions = questions.sort(function () { return Math.random() - .5; }); + currentQuestionIndex = 0; + questionsContainer.classList.remove("hide"); + setNextQuestion(); +} +function setNextQuestion() { + resetState(); + showQandA(shuffleQuestions[currentQuestionIndex]); +} +function showQandA(question) { + questionElement.innerText = question.question; + question.answers.forEach(function (answer) { + var optionButton = document.createElement("button"); + optionButton.innerText = answer.text; + optionButton.classList.add("btn"); + if (answer.correct) { + optionButton.dataset.correct = answer.correct; + } + optionButton.addEventListener("click", selectAnswer); + answerButtonsElements[0].appendChild(optionButton); + }); +} +; +function resetState() { + while (answerButtonsElements[0].firstChild) { + answerButtonsElements[0].removeChild(answerButtonsElements[0].firstChild); + } +} +function selectAnswer(event) { + if (event.target.dataset.correct) { + event.target.classList.add("btn--correct"); + correctAnswers++; + } + else { + event.target.classList.add("btn--wrong"); + } + if (shuffleQuestions.length > currentQuestionIndex + 1) { + currentQuestionIndex++; + setTimeout(setNextQuestion, 600); + } + else { + setTimeout(function () { + startBtn.classList.remove("hide"); + startBtn.innerText = "Play again"; + quizContainer.classList.add("hide"); + endGameAlert.classList.remove("hide"); + if (correctAnswers <= 2) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "Your football knowledge is nothing to be proud of..."; + } + else if (correctAnswers >= 3 && correctAnswers <= 6) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "Not bad"; + } + else if (correctAnswers >= 7 && correctAnswers <= 9) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "You know your football !"; + } + else if (correctAnswers == 10) { + finalScore.innerText = correctAnswers + " / " + shuffleQuestions.length; + endGameMessage.innerText = "You are a true FOOTOPER !!!"; + } + }, 1000); + } +} diff --git a/YuvalAramaProject/index.html b/YuvalAramaProject/index.html new file mode 100644 index 000000000..3655beb28 --- /dev/null +++ b/YuvalAramaProject/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + Document + + +
                        + + +
                        +

                        +
                        + +
                        + + \ No newline at end of file diff --git a/YuvalAramaProject/index.scss b/YuvalAramaProject/index.scss new file mode 100644 index 000000000..6f3c242ce --- /dev/null +++ b/YuvalAramaProject/index.scss @@ -0,0 +1,122 @@ +*{ + padding: 0; + margin: 0; +} +body{ + background-color: lightgoldenrodyellow; + height: 100%; + width: 100%; + position: relative; + font-family: 'Itim', cursive; +} +html{ + height: 100%; + width: 100%; +} +header{ + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} + +#divContainer{ + padding: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + .teams{ + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin: 20px 5px 0px 5px ; + padding: 25px; + height: 300px; + width: 200px; + border: 4px solid rgb(24, 56, 155); + border-radius: 10px; + img{ + padding-top:10px ; + height: 150px; + } + h3{ + padding: 20px; + } + .deleteTeam{ + height: 25px; + position: absolute; + top: -3px; + left: 2px; + } + } + +} + +.teams:hover{ + transition: all 1s ease-in-out; + cursor: pointer; + color: lightgoldenrodyellow; + background-color: rgba(28, 59, 151, 0.952); +} + + +a{ + img{ + height: 80px; + position: absolute; + top: 30px; + right: 30px; + } +} + +.hide{ + display: none; +} + +.btn{ + box-shadow: 0 0 10px 2px; + background-color:#F6BF05; + border-radius: 10px; + padding: 10px; + position: absolute; + left: 50px; + top: 45px; +} + +.btn:hover{ + cursor: pointer; + box-shadow: 0 0 13px 4px; +} + +.adminLoginForm{ + border-radius: 10px; + text-align: center; + padding: 10px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + background-color: #F6BF05; + box-shadow: 0 0 10px 2px; +} + +.adminNewTeamForm{ + border-radius: 10px; + text-align: center; + padding: 8px; + width: 200px; + position: absolute; + top: 98px; + left: 10px; + box-shadow: 0 0 10px 2px; + background-color: #F6BF05; +} + + +.welcomeMsg{ + text-align: center; + padding: 30px 0 0 0; +} \ No newline at end of file diff --git a/YuvalAramaProject/index.ts b/YuvalAramaProject/index.ts new file mode 100644 index 000000000..733f41f1a --- /dev/null +++ b/YuvalAramaProject/index.ts @@ -0,0 +1,135 @@ +const teamNameInput = document.querySelector("#teamName") as HTMLInputElement +const badgeImgInput = document.querySelector("#badgeImg") as HTMLInputElement +const leagueInput = document.querySelector("#league") as HTMLInputElement + + +const adminLoginForm = document.querySelector("#adminLoginForm") as HTMLFormElement +const adminLoginBtn = document.querySelector(".adminLoginBtn") as HTMLButtonElement +const adminName = document.querySelector("#adminName") as HTMLInputElement + +const newTeamForm = document.querySelector("#addTeamForm") as HTMLFormElement +const addTeamBtn = document.querySelector(".addTeamBtn") as HTMLButtonElement + +const welcomeMsg = document.querySelector(".welcomeMsg") as HTMLHeadingElement || null +const divContainer = document.querySelector("#divContainer") as HTMLDivElement +const username = localStorage.getItem("username"); + + +if (username) { + adminLoginBtn.classList.add("hide") + welcomeMsg.innerText = `Hello ${username} , Welcome to FOOTOP`; + + addTeamBtn.classList.remove("hide") + addTeamBtn.addEventListener("click" , ()=>{ + newTeamForm.classList.remove("hide") + }) +} + + + +adminLoginBtn.addEventListener("click", ()=>{ + adminLoginForm.classList.remove("hide") +}) + + + +class FootballTeam { + name: string; + image: string; + league: string; + + + constructor(name: string, image: string, league: string) { + this.name = name; + this.image = image; + this.league = league; + } +} + + +let footballTeams: FootballTeam[] = []; +const storedFootballTeams = localStorage.getItem("footballTeams"); +if (storedFootballTeams) { + footballTeams = JSON.parse(storedFootballTeams); +} else { + footballTeams = [ + new FootballTeam("Manchester United", "./photos/man united.png", "Premier League"), + new FootballTeam("Real Madrid", "./photos/real madrid.png", "La Liga"), + new FootballTeam("Barcelona", "./photos/barcelona.png", "La Liga"), + new FootballTeam("Bayern Munich", "./photos/bayern.png", "Bundesliga"), + new FootballTeam("Manchester City", "./photos/Manchester_City.png", "Premier League"), + ]; +} + + + +footballTeams.forEach((team) => { + const teamElement = document.createElement("div"); + teamElement.classList.add("teams"); + teamElement.innerHTML = ` +

                        ${team.name}

                        + +

                        ${team.league}

                        `; + divContainer.appendChild(teamElement); + }); + + + + + + +newTeamForm.addEventListener("submit" , (event)=>{ + try { + event.preventDefault() + + + newTeamForm.classList.add("hide") + + const teamNameValue = teamNameInput.value + const badgeImgValue = badgeImgInput.value + const leagueValue = leagueInput.value + + + footballTeams.push(new FootballTeam(teamNameValue,badgeImgValue,leagueValue)) + localStorage.setItem("footballTeams", JSON.stringify(footballTeams)); + + divContainer.innerHTML = ''; + + footballTeams.forEach((team)=>{ + const teamElement = document.createElement("div"); + teamElement.classList.add("teams") + teamElement.innerHTML = + `

                        ${team.name}

                        + +

                        ${team.league}

                        ` + + divContainer.appendChild(teamElement); + + }) + + + + } catch (error) { + console.error(error) + } +}) + + +adminLoginForm.addEventListener("submit" , (event)=>{ + try { + event.preventDefault() + + const username = adminName.value; + localStorage.setItem("username", username); + welcomeMsg.innerText = `Hey ${username} , Welcome to FOOTOP` + + adminLoginBtn.classList.add("hide") + adminLoginForm.classList.add("hide") + + + } catch (error) { + console.error(error) + } +}) + + diff --git a/YuvalAramaProject/photos/Manchester_City.png b/YuvalAramaProject/photos/Manchester_City.png new file mode 100644 index 000000000..a709fbbdd Binary files /dev/null and b/YuvalAramaProject/photos/Manchester_City.png differ diff --git a/YuvalAramaProject/photos/Quiz-Logo-PNG-HD.png b/YuvalAramaProject/photos/Quiz-Logo-PNG-HD.png new file mode 100644 index 000000000..15fe2c086 Binary files /dev/null and b/YuvalAramaProject/photos/Quiz-Logo-PNG-HD.png differ diff --git a/YuvalAramaProject/photos/barcelona.png b/YuvalAramaProject/photos/barcelona.png new file mode 100644 index 000000000..580410d51 Binary files /dev/null and b/YuvalAramaProject/photos/barcelona.png differ diff --git a/YuvalAramaProject/photos/bayern.png b/YuvalAramaProject/photos/bayern.png new file mode 100644 index 000000000..135e05c84 Binary files /dev/null and b/YuvalAramaProject/photos/bayern.png differ diff --git a/YuvalAramaProject/photos/deleteSymbol.png b/YuvalAramaProject/photos/deleteSymbol.png new file mode 100644 index 000000000..0d30fb064 Binary files /dev/null and b/YuvalAramaProject/photos/deleteSymbol.png differ diff --git a/YuvalAramaProject/photos/man united.png b/YuvalAramaProject/photos/man united.png new file mode 100644 index 000000000..e1aa84f10 Binary files /dev/null and b/YuvalAramaProject/photos/man united.png differ diff --git a/YuvalAramaProject/photos/psg.png b/YuvalAramaProject/photos/psg.png new file mode 100644 index 000000000..143dace48 Binary files /dev/null and b/YuvalAramaProject/photos/psg.png differ diff --git a/YuvalAramaProject/photos/real madrid.png b/YuvalAramaProject/photos/real madrid.png new file mode 100644 index 000000000..e363cfad5 Binary files /dev/null and b/YuvalAramaProject/photos/real madrid.png differ diff --git "a/YuvalAramaProject/photos/\327\246\327\231\327\234\327\225\327\235 \327\236\327\241\327\232_20230201_201558.png" "b/YuvalAramaProject/photos/\327\246\327\231\327\234\327\225\327\235 \327\236\327\241\327\232_20230201_201558.png" new file mode 100644 index 000000000..69f87ded3 Binary files /dev/null and "b/YuvalAramaProject/photos/\327\246\327\231\327\234\327\225\327\235 \327\236\327\241\327\232_20230201_201558.png" differ diff --git a/YuvalAramaProject/quiz.html b/YuvalAramaProject/quiz.html new file mode 100644 index 000000000..2755f0ac6 --- /dev/null +++ b/YuvalAramaProject/quiz.html @@ -0,0 +1,40 @@ + + + + + + + + + + FOOTOP QUIZ APP + + +
                        + +
                        +
                        +
                        +
                        +

                        + +
                        +
                        + +
                        +
                        +
                        + + +
                        +
                        + +
                        + + + + \ No newline at end of file diff --git a/YuvalAramaProject/quiz.scss b/YuvalAramaProject/quiz.scss new file mode 100644 index 000000000..8ac51e5b6 --- /dev/null +++ b/YuvalAramaProject/quiz.scss @@ -0,0 +1,114 @@ +*, *::before, *::after { + box-sizing: border-box; + font-family: 'Itim', cursive; +} + +body{ + background-color: lightgoldenrodyellow; + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + position: relative; + + +} + +header{ + background-color: #F6BF05; + display: flex; + width: 100%; + justify-content: center; +} +.quizBody{ + width: 100vw; + height: 75vh; + display: flex; + justify-content: center; + align-items: center; +} +.container{ + + max-width: 80%; + padding: 50px; + border-radius: 10px; + box-shadow: 0 0 10px 2px; + background-color: rgba(28, 59, 151, 0.329); + .btns{ + display: grid; + grid-template-columns: repeat(2, auto); + gap: 10px; + margin: 30px 0; + } + + .btn{ + padding: 10px 15px; + border-radius: 5px; + outline: none; + border: 2px solid rgb(35, 53, 105); + background-color: rgb(117, 141, 214); + color: white; + &--correct{ + background-color: rgb(59, 90, 13); + } + + &--wrong{ + background-color: red; + } + + } + + .btn:hover{ + border-color: black; + cursor: pointer; + } + +} + +.controls{ + display: flex; + justify-content: center; + align-items: center; + .menuBtn{ + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; + } +} + + +.endGame{ + height: 400px; + width: 900px; + border-radius: 50%; + background-color: rgba(28, 59, 151, 0.555); + justify-content: center; + align-items: center; + text-align: center; + box-shadow: 0 0 10px 2px; + #finalScore{ + font-size: 50px; + } + #endGameMessage{ + color: lightgoldenrodyellow; + padding: 51px 0 40px 0; + } + + #restartBtn{ + border-radius: 5px; + outline: none; + border: 2px solid rgb(35, 53, 105); + background-color: rgb(117, 141, 214); + color: white; + font-size: 2.5rem; + font-weight: bold; + padding: 20px 20px; + } + + +} + + +.hide{ + display: none; +} \ No newline at end of file diff --git a/YuvalAramaProject/quiz.ts b/YuvalAramaProject/quiz.ts new file mode 100644 index 000000000..b7f128290 --- /dev/null +++ b/YuvalAramaProject/quiz.ts @@ -0,0 +1,196 @@ +const startBtn = document.querySelector("#startBtn") as HTMLButtonElement +const questionsContainer = document.querySelector("#questionContainer") as HTMLDivElement +const questionElement:any = document.querySelector("#question") +const answerButtonsElements = document.querySelectorAll("#answerButtons") +const endGameAlert = document.querySelector("#endGameAlert") as HTMLDivElement +const quizContainer = document.querySelector(".container") as HTMLDivElement +const endGameMessage = document.querySelector("#endGameMessage") as HTMLHeadingElement +const finalScore = document.querySelector("#finalScore") as HTMLHeadingElement +let correctAnswers = 0; +let shuffleQuestions , currentQuestionIndex + + +const questions = [ + { + question: "What team has the most UCL titles ?" , + answers: [ + { text: "Real Madrid", correct: true}, + { text: "Manchester United" , correct: false}, + { text: "Milan" , correct: false}, + { text: "Barcelona" , correct: false} + ] + + }, + { + question: "Who won the Ballon D'or in 2017 ?" , + answers: [ + { text: "Luka Modric", correct: false}, + { text: "Lionel Messi" , correct: false}, + { text: "Karim Benzema" , correct: false}, + { text: "Cristiano Ronaldo" , correct: true} + ] + + }, + { + question: "What transfer was the most expensive ?" , + answers: [ + { text: "Neymar Jr to PSG", correct: true}, + { text: "Kylian Mbappe to PSG" , correct: false}, + { text: "Joao Felix to Atletico Madrid" , correct: false}, + { text: "Cristiano Ronaldo to Real Madrid" , correct: false} + ] + + }, + { + question: "What team has the biggest fan base in the world ?" , + answers: [ + { text: "Real Madrid", correct: false}, + { text: "Manchester United" , correct: true}, + { text: "Liverpool" , correct: false}, + { text: "Barcelona" , correct: false} + ] + + }, + { + question: "Who has the most Ballon D'or ?" , + answers: [ + { text: "Zinedine Zidane", correct: false}, + { text: "Cristiano Ronaldo" , correct: false}, + { text: "Lionel Messi" , correct: true}, + { text: "Kaka" , correct: false} + ] + + }, + { + question: "Who won the Ballon D'or in 2020 ?" , + answers: [ + { text: "Robert Lewandowski", correct: false}, + { text: "Cristiano Ronaldo" , correct: false}, + { text: "Lionel Messi" , correct: false}, + { text: "Never awarded due to Covid19" , correct: true} + ] + + }, + { + question: "Which club has never won the UCL ?" , + answers: [ + { text: "Ajax", correct: false}, + { text: "Inter-milano" , correct: false}, + { text: "Porto" , correct: false}, + { text: "PSG" , correct: true} + ] + + }, + { + question: "What country has the most World Cup titles ?" , + answers: [ + { text: "Brazil", correct: true}, + { text: "Spain" , correct: false}, + { text: "Italy" , correct: false}, + { text: "Germany" , correct: false} + ] + + }, + { + question: "What is the biggest fan capacity stadium in the world ?" , + answers: [ + { text: "Santiago Bernabau (Real Madrid)", correct: false}, + { text: "Manchester United (Old Traford)" , correct: false}, + { text: "Camp Nou (Barcelona)" , correct: true}, + { text: "Signal Idunna Park (Dortmund)" , correct: false} + ] + + }, + { + question: "Who is the highest scorer on one single UCL season ?" , + answers: [ + { text: "Cristiano Ronaldo", correct: true}, + { text: "Robert Lewandowski" , correct: false}, + { text: "Lionel Messi" , correct: false}, + { text: "Neymar Jr" , correct: false} + ] + + } +] + + +startBtn.addEventListener("click" , startGame) + +function startGame(){ + startBtn.classList.add("hide") + shuffleQuestions = questions.sort(() => Math.random() - .5) + currentQuestionIndex = 0 + questionsContainer.classList.remove("hide") + setNextQuestion() +} + + +function setNextQuestion(){ + resetState() + showQandA(shuffleQuestions[currentQuestionIndex]) + +} + +function showQandA(question) { + questionElement.innerText = question.question; + question.answers.forEach(answer => { + const optionButton = document.createElement("button") + optionButton.innerText = answer.text + optionButton.classList.add("btn") + if(answer.correct) { + optionButton.dataset.correct = answer.correct + } + optionButton.addEventListener("click" , selectAnswer) + answerButtonsElements[0].appendChild(optionButton) + }); + }; + + +function resetState(){ + while (answerButtonsElements[0].firstChild) { + answerButtonsElements[0].removeChild + (answerButtonsElements[0].firstChild) + } +} + +function selectAnswer(event){ + if(event.target.dataset.correct){ + event.target.classList.add("btn--correct") + correctAnswers++ + }else{ + event.target.classList.add("btn--wrong") + } + if(shuffleQuestions.length > currentQuestionIndex +1){ + currentQuestionIndex++ + setTimeout(setNextQuestion , 600) + }else{ + setTimeout(()=>{ + startBtn.classList.remove("hide") + startBtn.innerText = "Play again" + quizContainer.classList.add("hide") + endGameAlert.classList.remove("hide") + if(correctAnswers <= 2){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `Your football knowledge is nothing to be proud of...` + } + else if(correctAnswers >= 3 && correctAnswers <= 6){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `Not bad` + }else if(correctAnswers >= 7 && correctAnswers <= 9){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `You know your football !` + }else if(correctAnswers == 10){ + finalScore.innerText = `${correctAnswers} / ${shuffleQuestions.length}` + endGameMessage.innerText = `You are a true FOOTOPER !!!` + } + + } + , 1000) + + + + +}} + + +