diff --git a/images/JSON key value.jpeg b/exercise1/images/JSON key value.jpeg similarity index 100% rename from images/JSON key value.jpeg rename to exercise1/images/JSON key value.jpeg diff --git a/images/Session storage.png b/exercise1/images/Session storage.png similarity index 100% rename from images/Session storage.png rename to exercise1/images/Session storage.png diff --git a/images/communicating with a server.jpeg b/exercise1/images/communicating with a server.jpeg similarity index 100% rename from images/communicating with a server.jpeg rename to exercise1/images/communicating with a server.jpeg diff --git a/images/dom.png b/exercise1/images/dom.png similarity index 100% rename from images/dom.png rename to exercise1/images/dom.png diff --git a/images/favicon.png b/exercise1/images/favicon.png old mode 100755 new mode 100644 similarity index 100% rename from images/favicon.png rename to exercise1/images/favicon.png diff --git a/images/output from console.png b/exercise1/images/output from console.png similarity index 100% rename from images/output from console.png rename to exercise1/images/output from console.png diff --git a/images/output from dev tools 2.png b/exercise1/images/output from dev tools 2.png similarity index 100% rename from images/output from dev tools 2.png rename to exercise1/images/output from dev tools 2.png diff --git a/images/output from dev tools 3.png b/exercise1/images/output from dev tools 3.png similarity index 100% rename from images/output from dev tools 3.png rename to exercise1/images/output from dev tools 3.png diff --git a/images/output from dev tools.png b/exercise1/images/output from dev tools.png similarity index 100% rename from images/output from dev tools.png rename to exercise1/images/output from dev tools.png diff --git a/exercise1/index.html b/exercise1/index.html new file mode 100644 index 0000000..418b6f5 --- /dev/null +++ b/exercise1/index.html @@ -0,0 +1,43 @@ + + + + + + To-do App + + + + + +
+
+

Todo

+

Create Some Tasks

+
+
+ +
+
+ + + +
+
+ +
+
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/scripts/oop.js b/exercise1/scripts/oop.js similarity index 100% rename from scripts/oop.js rename to exercise1/scripts/oop.js diff --git a/exercise1/scripts/script.js b/exercise1/scripts/script.js new file mode 100644 index 0000000..f8908a5 --- /dev/null +++ b/exercise1/scripts/script.js @@ -0,0 +1,17 @@ +alert("hello!"); + +document.querySelector('#new-todo').addEventListener('submit', (e) => { + e.preventDefault(); + const text = e.target.elements.text.value.trim(); + alert(text); +}) + +// This JavaScript code snippet is designed to interact with a web page.It begins by displaying an alert box with the message "hello!" when the script is loaded. + +// The next part of the code is an event listener attached to an HTML element with the id 'new-todo'.This event listener is set to trigger when the 'submit' event is fired, which typically happens when a form is submitted. + +// The event listener is an arrow function that takes an event object 'e' as a parameter. Inside this function, e.preventDefault(); is called to prevent the default action of the event.In the case of a form submission, the default action is to send a request to the server and reload the page.By preventing this, the page stays on the client side, allowing for a smoother user experience. + +// Next, the value of the form input field named 'text' is retrieved and trimmed of any leading or trailing white spaces.This value is stored in the constant 'text'. + +// Finally, an alert box is displayed with the value of 'text'.This is likely a placeholder for further code that will do something more useful with the input, such as adding a new to -do item to a list. \ No newline at end of file diff --git a/styles/styles.css b/exercise1/styles/styles.css old mode 100755 new mode 100644 similarity index 100% rename from styles/styles.css rename to exercise1/styles/styles.css diff --git a/exercise2/images/JSON key value.jpeg b/exercise2/images/JSON key value.jpeg new file mode 100644 index 0000000..c13a175 Binary files /dev/null and b/exercise2/images/JSON key value.jpeg differ diff --git a/exercise2/images/Session storage.png b/exercise2/images/Session storage.png new file mode 100644 index 0000000..0de3bcd Binary files /dev/null and b/exercise2/images/Session storage.png differ diff --git a/exercise2/images/communicating with a server.jpeg b/exercise2/images/communicating with a server.jpeg new file mode 100644 index 0000000..5244596 Binary files /dev/null and b/exercise2/images/communicating with a server.jpeg differ diff --git a/exercise2/images/dom.png b/exercise2/images/dom.png new file mode 100644 index 0000000..2df7af1 Binary files /dev/null and b/exercise2/images/dom.png differ diff --git a/exercise2/images/favicon.png b/exercise2/images/favicon.png new file mode 100644 index 0000000..c353ad8 Binary files /dev/null and b/exercise2/images/favicon.png differ diff --git a/exercise2/images/output from console.png b/exercise2/images/output from console.png new file mode 100644 index 0000000..a574868 Binary files /dev/null and b/exercise2/images/output from console.png differ diff --git a/exercise2/images/output from dev tools 2.png b/exercise2/images/output from dev tools 2.png new file mode 100644 index 0000000..f451e06 Binary files /dev/null and b/exercise2/images/output from dev tools 2.png differ diff --git a/exercise2/images/output from dev tools 3.png b/exercise2/images/output from dev tools 3.png new file mode 100644 index 0000000..fea1813 Binary files /dev/null and b/exercise2/images/output from dev tools 3.png differ diff --git a/exercise2/images/output from dev tools.png b/exercise2/images/output from dev tools.png new file mode 100644 index 0000000..e630caf Binary files /dev/null and b/exercise2/images/output from dev tools.png differ diff --git a/exercise2/index.html b/exercise2/index.html new file mode 100644 index 0000000..418b6f5 --- /dev/null +++ b/exercise2/index.html @@ -0,0 +1,43 @@ + + + + + + To-do App + + + + + +
+
+

Todo

+

Create Some Tasks

+
+
+ +
+
+ + + +
+
+ +
+
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/exercise2/scripts/oop.js b/exercise2/scripts/oop.js new file mode 100644 index 0000000..e69de29 diff --git a/exercise2/scripts/script.js b/exercise2/scripts/script.js new file mode 100644 index 0000000..2d6490e --- /dev/null +++ b/exercise2/scripts/script.js @@ -0,0 +1,8 @@ +// Access the Create button element using document.querySelector() +let createButton = document.querySelector('.button'); + +// Log the element to the console +console.log(createButton); + +// Change the background color of the button +createButton.style.backgroundColor = 'red'; diff --git a/exercise2/styles/styles.css b/exercise2/styles/styles.css new file mode 100644 index 0000000..b43f58a --- /dev/null +++ b/exercise2/styles/styles.css @@ -0,0 +1,230 @@ +/* + +// Colors +$off-black: #20222b; +$dark-blue: #333745; +$blue: #3c4251; +$light-blue: #464b5e; +$off-white: #a5afd7; +$purple: #8357c5; +// Spacing +$s-size: 1.2rem; +$m-size: 1.6rem; +$l-size: 3.2rem; +$xl-size: 4.8rem; +$desktop-breakpoint: 45rem; + +*/ + +/* Base Styles */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 62.5%; +} + +body { + background: #2B292E; + color: #fafafa; + font-family: Helvetica, Arial, sans-serif; + font-size: 1.6rem; +} + +button { + cursor: pointer; +} + +a { + color: #6F439C; +} + +/* Container */ + +.container { + max-width: 60rem; + margin: 0 auto; + padding: 0 1.6rem; +} + +/* Header */ + +.header { + background: #6F439C; + color:white; + padding: 1.6rem 0; +} + +.header__title { + font-size: 3.2rem; + margin-bottom: .4rem; +} + +.header__subtitle { + /* color: #777; */ + font-size: 1.6rem; + font-weight: 300; +} + +/* Actions Bar */ + +.actions { + background-color: #353239; + /* border-bottom: 1px solid #dedfe0; */ + /* color: #333333; */ + padding: 1rem +} + +.actions__container { + align-items: center; + display: flex; + max-width: 60rem; + margin: 0 auto; + min-height: 3rem; + padding: 0 1.6rem; +} + +.actions__container--spaced { + justify-content: space-between +} + +/* Form Inputs */ + +#new-todo { + margin-top: 3rem; +} + +.input { + border: none; + font-size: 1.4rem; + font-weight: 300; + height: 3rem; + margin-right: 1.6rem; + padding: .4rem .8rem; +} + +.checkbox { + display: flex; + align-items: baseline; + margin-right: 1rem; +} + +.checkbox > input { + margin-right: .4rem; +} + +.button { + background: #7044a0; + border: none; + border-bottom: 2px solid #603a88; + color: white; + font-size: 1.4rem; + font-weight: 300; + padding: .8rem; + transition: background .3s ease, color .3s ease; +} + +.button:hover { + background: #5F3A87; +} + +.button--secondary { + background: #888888; + border-bottom: 2px solid #717171; +} + +.button--secondary:hover { + background: #6E6E6E; +} + +.button--text { + background: none; + border: none; + color: #aaa; +} + +.button--text:hover { + background: none; + color: white; + text-decoration: underline; +} + +/* Note editor */ + +.title-input { + border: 1px solid #DEDFE0; + font-size: 2rem; + font-weight: 300; + display: block; + margin: 2.4rem 0; + padding: .8rem; + width: 100%; +} + +.body-input { + border: 1px solid #DEDFE0; + font-family: inherit; + font-size: 1.6rem; + font-weight: 300; + display: block; + margin: 2.4rem 0; + min-height: 15rem; + padding: .8rem; + width: 100%; +} + +/* Note List Item */ + +.list-item { + text-decoration: none; + color: #fafafa; + cursor: pointer; + background: #353239; + border: 1px solid #423e47; + margin: 1.6rem 0; + padding: 1rem 1.6rem; + display: block; + transition: background .3s ease; + display: flex; + justify-content: space-between; + align-items: center +} + +.list-item__container { + display: flex; + font-size: 1.8rem; + font-weight: 300; + align-items: baseline; +} + +.list-item__container > *:first-child { + margin-right: .8rem; +} + +.list-item:hover { + background: #3d3941; +} + +.list-item__title { + font-size: 1.8rem; + margin-bottom: .4rem +} + +.list-item__subtitle { + color: #666; + font-size: 1.4rem; + font-weight: 300; + font-style: italic; +} + +.list-title { + margin: 3.2rem 0 1.6rem; +} + +.empty-message { + margin: 3.2rem 0; +} \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store deleted file mode 100755 index 5008ddf..0000000 Binary files a/images/.DS_Store and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100755 index 29cd7bb..0000000 --- a/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - To-do App - - - - -
-
-

Todo

-

Create Some Tasks

-
-
- -
-
- - - -
-
- -
-
- - -
-
-
- - - - - \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js deleted file mode 100755 index c7b164d..0000000 --- a/scripts/script.js +++ /dev/null @@ -1,7 +0,0 @@ -alert("hello!"); - -document.querySelector('#new-todo').addEventListener('submit', (e) => { - e.preventDefault(); - const text = e.target.elements.text.value.trim(); - alert(text); -}) \ No newline at end of file