Skip to content
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

Jump to bottom

Issue 7 Ready For Review #18

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Issue 7 Ready For Review #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d644e4
Issue #7 folder, index.html & lib.js all created
May 10, 2023
8b3ef75
Buttons are now functioning.
May 14, 2023
f3a2cd5
Issue #7 ready for review
May 14, 2023
6060150
Changed absolute directory to relative on line 8 of index.html
May 16, 2023
740c64d
Did not have proper directory on line 5 of index.html -> fixed
May 16, 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
10 changes: 10 additions & 0 deletions Issue-7/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
</head>
<body class="background-bisq">
<script type="text/javascript" src="./lib.js"></script>
</body>
</html>
61 changes: 61 additions & 0 deletions Issue-7/lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// Select the <body> element
let body = document.body;

let itemCount = 1;

let addItem = () => {
let list = document.getElementById('list');
let listItem = document.createElement('li');
listItem.innerHTML = `Item #${itemCount}`;
listItem.addEventListener('click', function() {
let classList = body.classList;

// Make an event that listens for a click on one of the list items and when that event happens something updates (example: the background color updates) using .classList.add and .classList.remove
if (classList.contains('background-bisque')) {
classList.remove('background-bisque');
classList.add('background-aqua');
} else {
classList.remove('background-aqua');
classList.add('background-bisque');
}
})

list.appendChild(listItem);
itemCount++;
}

let removeItem = () => {
let list = document.getElementById('list');
let lastItem = list.lastElementChild;
if (lastItem) {
list.removeChild(lastItem);
}
itemCount--;
}


let titleItem = document.createElement('h1');
titleItem.innerHTML = 'My List';

// Add a list element as a child of the body
let newList = document.createElement('ul');
newList.id = 'list';

let buttonRow = document.createElement('section');

// Add 2 button as children to the <body> element
// The first button should add an list item element to the newly created list
let addItemButton = document.createElement('button');
addItemButton.innerHTML = 'Add Item';
addItemButton.addEventListener('click', addItem);
// The second button should remove a list item from the list
let removeItemButton = document.createElement('button');
removeItemButton.innerHTML = 'Remove Item';
removeItemButton.addEventListener('click', removeItem);

buttonRow.appendChild(addItemButton);
buttonRow.appendChild(removeItemButton);

body.appendChild(titleItem);
body.appendChild(newList);
body.appendChild(buttonRow);
32 changes: 32 additions & 0 deletions Issue-7/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
body {
margin: 0px;
padding: 0px;
}

button {
width: 200px;
height: auto;
}

ul {
width: 400px;
height: auto;
margin: 20px;
}

li:hover {
cursor: pointer;
}

section {
display: flex;
justify-content: space-evenly;
}

.background-aqua {
background-color: aqua;
}

.background-bisque {
background-color: bisque;
}