diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..3b13c9499 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "monday-u-exercises", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "monday-u-exercises", + "version": "1.0.0", + "license": "ISC" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..ad219b962 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "monday-u-exercises", + "description": "Welcome to monday-u official github repository! We are very excited to have you here! This is going to be so much fun! Here are a few general details:", + "version": "1.0.0", + "main": "index.js", + "type": "module", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/epent/monday-u-exercises.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/epent/monday-u-exercises/issues" + }, + "homepage": "https://github.com/epent/monday-u-exercises#readme" +} diff --git a/src/ex1/index.html b/src/ex1/index.html deleted file mode 100644 index 4d8c49943..000000000 --- a/src/ex1/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Exercise 1 - - - - -

Todo list

- - - - - diff --git a/src/ex1/index_ex1.html b/src/ex1/index_ex1.html new file mode 100644 index 000000000..eac3e0cdb --- /dev/null +++ b/src/ex1/index_ex1.html @@ -0,0 +1,38 @@ + + + + Task Manager + + + + + + +
+

Task Manager

+
+ + +
+ + + +
+ + + diff --git a/src/ex1/script.js b/src/ex1/script.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/ex1/script_ex1.js b/src/ex1/script_ex1.js new file mode 100644 index 000000000..9fe0e6f11 --- /dev/null +++ b/src/ex1/script_ex1.js @@ -0,0 +1,141 @@ +const addButton = document.querySelector("#add-task-button"); +const triangle = document.querySelector("#triangle"); +const box = document.querySelector("#box"); +const welcome = document.querySelector("#welcome-sentence"); +const addTaskButton = document.querySelector(".task-button"); +const addTaskInput = document.querySelector(".task-input"); +const clearAllButton = document.querySelector("#clear-all-button"); +const sortByNameButton = document.querySelector("#sort-by-name-button"); +const listOfTasks = []; + +addTaskButton.addEventListener("click", addTask); +clearAllButton.addEventListener("click", clearAll); +sortByNameButton.addEventListener("click", sortByName); + +addTaskInput.addEventListener("keypress", (event) => { + if (event.key === "Enter") { + addTask(); + } +}); + +function addTask() { + const task = document.querySelector(".task-input").value; + const text = capitalize(task); + + if (text === "") { + alert("Input cannot be empty"); + } else { + if (listOfTasks.length === 0) { + hideWelcomePart(); + } + listOfTasks.push(text); + createTask(text); + } +} + +function hideWelcomePart() { + addButton.classList.remove("hithere"); + clearAllButton.classList.remove("hidden"); + sortByNameButton.classList.remove("hidden"); + + triangle.classList.add("hidden"); + box.classList.add("hidden"); + welcome.classList.add("hidden"); +} + +function showWelcomePart() { + addButton.classList.add("hithere"); + clearAllButton.classList.add("hidden"); + sortByNameButton.classList.add("hidden"); + + triangle.classList.remove("hidden"); + box.classList.remove("hidden"); + welcome.classList.remove("hidden"); +} + +function createTask(text) { + //create elements + const divElm = document.createElement("div"); + const liElm = document.createElement("li"); + const deleteButton = document.createElement("button"); + + // style elements + divElm.classList.add("task"); + divElm.classList.add("grow"); + liElm.classList.add("task-item"); + deleteButton.classList.add("delete-button"); + + //add textNodes + liElm.appendChild(document.createTextNode(text)); + deleteButton.appendChild(document.createTextNode("X")); + + //add ids + const idText = text.split(" ").join("-"); + divElm.setAttribute("id", `${idText}`); + deleteButton.setAttribute("id", `${idText}-button`); + + //append
  • and + + + + + + + + diff --git a/src/ex2/main.js b/src/ex2/main.js new file mode 100644 index 000000000..ac0ca957f --- /dev/null +++ b/src/ex2/main.js @@ -0,0 +1,34 @@ +import { itemManager } from "./ItemManager.js"; + +// Implement the `Main` class here +class Main { + constructor() {} + + addButton = document.querySelector("#list-item-submit"); + addItemInput = document.querySelector("#list-item-input"); + sortByNameButton = document.querySelector("#sort-by-name-button"); + clearAllButton = document.querySelector("#clear-all-button"); + + init() { + this.addButton.addEventListener("click", () => { + itemManager.addItem(this.addItemInput); + }); + + this.sortByNameButton.addEventListener("click", itemManager.sortByName); + this.clearAllButton.addEventListener("click", itemManager.removeAll); + + this.addItemInput.addEventListener("keypress", (event) => { + if (event.key === "Enter") { + itemManager.addItem(this.addItemInput); + } + }); + } +} + +const main = new Main(); + +document.addEventListener("DOMContentLoaded", function () { + // you should create an `init` method in your class + // the method should add the event listener to your "add" button + main.init(); +}); diff --git a/src/ex2/style.css b/src/ex2/style.css new file mode 100644 index 000000000..81af2a4e7 --- /dev/null +++ b/src/ex2/style.css @@ -0,0 +1,201 @@ +html { + height: 100%; +} +body { + margin: 0; + padding: 0; + height: 100%; +} + +.app-container { + width: 100%; + height: 100%; + font-family: "Dosis", sans-serif; + font-weight: lighter; + background-image: linear-gradient( + to top right, + white, + rgba(213, 245, 246, 0.76), + rgba(138, 210, 212, 0.76), + rgba(48, 155, 159, 0.76), + rgba(17, 150, 154, 0.76) + ); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.list-container { + display: flex; + flex-direction: column; + justify-content: space-around; + width: 30%; + height: 50%; + background-color: white; + border: 1px silver solid; + border-radius: 8px; + -webkit-box-shadow: 12px 12px 38px -13px #000000; + box-shadow: 12px 12px 38px -13px #000000; +} + +.app-name { + padding-left: 32px; + font-weight: 500; +} + +.list-controls { + padding: 0px 32px; + background-color: white; + display: flex; + align-items: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; +} + +.list-controls #list-item-input { + width: 85%; + height: 30px; + font-size: 16px; + padding-left: 8px; + border: 1px solid rgb(197, 196, 196); + border-radius: 3px; + outline: none; +} + +.list-controls #list-item-submit { + color: white; + background-color: #8181d6; + border-style: solid; + border-color: transparent; + border-radius: 4px; + height: 35px; + width: 35px; + font-size: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + margin-left: auto; +} + +.list-controls #list-item-submit:hover { + background-color: rgba(17, 150, 154, 0.76); + transition: background-color 0.2s ease-in-out; +} + +#list { + list-style-type: none; + margin: 0; + padding: 0px 30px; + height: 55%; + overflow-y: scroll; +} + +.list-item { + padding: 8px; + cursor: pointer; + display: flex; + align-items: center; + border-radius: 3px; + font-weight: 400; +} + +.list-item:not(:last-of-type) { + border-bottom: 1px #bbb5b5 solid; +} + +.list-item:hover { + background-color: #a7a7d9; + color: white; + transition: color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; +} + +.list-item-delete-button { + margin-left: auto; + padding: 8px; + cursor: pointer; + border-radius: 8px; +} + +.list-item-delete-button:hover { + background-color: #f0f0f5; + transition: background-color 0.2s ease-in-out; +} + +.hidden { + display: none; +} + +.list-footer { + display: flex; + justify-content: space-evenly; + margin: 10px 0; +} + +.footer-button { + font-size: medium; + padding: 9px 13px; + border: none; + border-radius: 3px; + width: 25%; + color: rgb(57, 53, 53); + cursor: pointer; +} + +#sort-by-name-button { + background-color: #a7a7d9; +} + +#sort-by-name-button:hover { + background-color: #8181d6; + color: white; + transition: background-color 0.2s ease-in-out; +} + +#clear-all-button { + background-color: rgba(77, 170, 173, 0.76); +} + +#clear-all-button:hover { + background-color: rgba(17, 150, 154, 0.76); + color: white; + transition: background-color 0.2s ease-in-out; +} + +.hithere { + animation: hithere 2s ease infinite; + animation-delay: 3s; +} +@keyframes hithere { + 30% { + transform: scale(1.2); + } + 40%, + 60% { + transform: rotate(-20deg) scale(1.2); + } + 50% { + transform: rotate(20deg) scale(1.2); + } + 70% { + transform: rotate(0deg) scale(1.2); + } + 100% { + transform: scale(1); + } +} + +.grow { + animation: grow 2s ease; +} +@keyframes grow { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} diff --git a/src/images/delete_icon.svg b/src/images/delete_icon.svg new file mode 100644 index 000000000..5122cab73 --- /dev/null +++ b/src/images/delete_icon.svg @@ -0,0 +1,3 @@ + + +