Skip to content

Exercise2 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pmmachadov wants to merge 2 commits into
base: main
Choose a base branch
from
+341 −47
Open

Exercise2 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19d1359
Code reorganization
pmmachadov Dec 7, 2023
3ec7067
exercise2
pmmachadov Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 images/JSON key value.jpeg → exercise1/images/JSON key value.jpeg
View file
Open in desktop
File renamed without changes
0 images/Session storage.png → exercise1/images/Session storage.png
View file
Open in desktop
File renamed without changes
0 images/communicating with a server.jpeg → ...1/images/communicating with a server.jpeg
View file
Open in desktop
File renamed without changes
0 images/dom.png → exercise1/images/dom.png
View file
Open in desktop
File renamed without changes
0 images/favicon.png → exercise1/images/favicon.png
100755 → 100644
View file
Open in desktop
File renamed without changes
0 images/output from console.png → exercise1/images/output from console.png
View file
Open in desktop
File renamed without changes
0 images/output from dev tools 2.png → exercise1/images/output from dev tools 2.png
View file
Open in desktop
File renamed without changes
0 images/output from dev tools 3.png → exercise1/images/output from dev tools 3.png
View file
Open in desktop
File renamed without changes
0 images/output from dev tools.png → exercise1/images/output from dev tools.png
View file
Open in desktop
File renamed without changes
43 changes: 43 additions & 0 deletions exercise1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>

<html lang="en">

<head>
<title>To-do App</title>
<link rel="stylesheet" href="./styles/styles.css">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
</head>

<body>
<div class="header">
<div class="container">
<h1 class="header__title">Todo</h1>
<h2 class="header__subtitle">Create Some Tasks</h2>
</div>
</div>

<div class="actions">
<div class="actions__container">
<input id="search-text" class="input" type="text" placeholder="Filter todos">
<label class="checkbox">
<input type="checkbox" id="show-finished"> Finished
</label>
<label class="checkbox">
<input type="checkbox" id="show-unfinished"> Unfinished
</label>
</div>
</div>

<div class="container">
<form id="new-todo">
<input type="text" class="input" placeholder="Something to do" name="text">
<button class="button">Create</button>
</form>
<div id="todos"></div>
</div>


<script src="./scripts/script.js"></script>
</body>

</html>
0 scripts/oop.js → exercise1/scripts/oop.js
View file
Open in desktop
File renamed without changes.
17 changes: 17 additions & 0 deletions exercise1/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
0 styles/styles.css → exercise1/styles/styles.css
100755 → 100644
View file
Open in desktop
File renamed without changes.
Binary file added exercise2/images/JSON key value.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/Session storage.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/communicating with a server.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/dom.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/output from console.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/output from dev tools 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/output from dev tools 3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercise2/images/output from dev tools.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions exercise2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>

<html lang="en">

<head>
<title>To-do App</title>
<link rel="stylesheet" href="./styles/styles.css">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
</head>

<body>
<div class="header">
<div class="container">
<h1 class="header__title">Todo</h1>
<h2 class="header__subtitle">Create Some Tasks</h2>
</div>
</div>

<div class="actions">
<div class="actions__container">
<input id="search-text" class="input" type="text" placeholder="Filter todos">
<label class="checkbox">
<input type="checkbox" id="show-finished"> Finished
</label>
<label class="checkbox">
<input type="checkbox" id="show-unfinished"> Unfinished
</label>
</div>
</div>

<div class="container">
<form id="new-todo">
<input type="text" class="input" placeholder="Something to do" name="text">
<button class="button">Create</button>
</form>
<div id="todos"></div>
</div>


<script src="./scripts/script.js"></script>
</body>

</html>
Empty file added exercise2/scripts/oop.js
View file
Open in desktop
Empty file.
8 changes: 8 additions & 0 deletions exercise2/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
230 changes: 230 additions & 0 deletions exercise2/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file removed images/.DS_Store
View file
Open in desktop
Binary file not shown.
40 changes: 0 additions & 40 deletions index.html
View file
Open in desktop

This file was deleted.

Loading