Skip to content

Commit 962fed9

Browse files
author
Sonyl Nagale
committed
Stickies
1 parent aff84ce commit 962fed9

File tree

6 files changed

+127
-0
lines changed

6 files changed

+127
-0
lines changed

‎chapter-6/stickies/solution-code/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title></title>
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<input class="box-color-input" type="text" placeholder="Sticky Color">
12+
<input class="box-color-note" type="text" placeholder="Sticky Note Message">
13+
<button class="box-creator-button">Create a Sticky!</button>
14+
15+
<div class="container"></div>
16+
17+
<script src="script.js"></script>
18+
</body>
19+
20+
</html>

‎chapter-6/stickies/solution-code/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const container = document.querySelector('.container') // set .container to a variable so we don't need to find it every time we click
2+
let noteCount = 1 // inital value
3+
4+
// access our button and assign a click handler
5+
document.querySelector('.box-creator-button').addEventListener('click', () => {
6+
// create our DOM element
7+
const stickyNote = document.createElement('div')
8+
9+
// set our class name
10+
stickyNote.className = 'box'
11+
12+
// get our other DOM elements
13+
const stickyMessage = document.querySelector('.box-color-note')
14+
const stickyColor = document.querySelector('.box-color-input')
15+
16+
// get our variables
17+
const message = stickyMessage.value
18+
const color = stickyColor.value
19+
20+
// blank out the input fields
21+
stickyMessage.value = stickyColor.value = ''
22+
23+
// define the attributes
24+
stickyNote.innerHTML = `${noteCount++}. ${message}`
25+
stickyNote.style.backgroundColor = color
26+
27+
// add the sticky
28+
container.appendChild(stickyNote)
29+
})

‎chapter-6/stickies/solution-code/style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
html,
2+
body {
3+
margin: 0;
4+
height: 100%;
5+
width: 100%;
6+
}
7+
.container {
8+
display: flex;
9+
justify-content: space-around;
10+
flex-wrap: wrap;
11+
}
12+
.box {
13+
height: 200px;
14+
width: 200px;
15+
margin: 2px;
16+
text-align: center;
17+
font-size: 1.5em;
18+
line-height: 185px;
19+
font-weight: bold;
20+
}

‎chapter-6/stickies/starter-code/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title></title>
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<input class="box-color-input" type="text" placeholder="Sticky Color">
12+
<input class="box-color-note" type="text" placeholder="Sticky Note Message">
13+
<button class="box-creator-button">Create a Sticky!</button>
14+
15+
<div class="container"></div>
16+
17+
<script src="script.js"></script>
18+
</body>
19+
20+
</html>

‎chapter-6/stickies/starter-code/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const container = document.querySelector('.container') // set .container to a variable so we don't need to find it every time we click
2+
let noteCount = 1 // inital value
3+
4+
// access our button and assign a click handler
5+
6+
// create our DOM element
7+
8+
// set our class name
9+
10+
// get our other DOM elements
11+
12+
// get our variables
13+
14+
// blank out the input fields
15+
16+
// define the attributes
17+
18+
// add the sticky

‎chapter-6/stickies/starter-code/style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
html,
2+
body {
3+
margin: 0;
4+
height: 100%;
5+
width: 100%;
6+
}
7+
.container {
8+
display: flex;
9+
justify-content: space-around;
10+
flex-wrap: wrap;
11+
}
12+
.box {
13+
height: 200px;
14+
width: 200px;
15+
margin: 2px;
16+
text-align: center;
17+
font-size: 1.5em;
18+
line-height: 185px;
19+
font-weight: bold;
20+
}

0 commit comments

Comments
 (0)