Skip to content

Commit 7334ea2

Browse files
gixxerbladegixxerblade
committed
refinements on append items to array app
1 parent 80c9a0c commit 7334ea2

File tree

3 files changed

+106
-74
lines changed

3 files changed

+106
-74
lines changed

‎weekSix/append-prepend/app.js

+41-19
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,55 @@ const display = document.getElementById("btn2");
33
const text = document.getElementById("text1");
44
const wrapper = document.getElementById("wrapper");
55
const item = document.getElementById("added-item");
6+
const resetBtn = document.getElementById("btn3");
67
let result = document.getElementById("result");
8+
display.setAttribute("disabled", "");
79

810
let addedItem = 0;
911
let array = new Array();
10-
add.addEventListener("click", () => {
11-
item.removeAttribute("style");
12-
if(text.value == '') return
13-
else{
14-
array[addedItem] = text.value;
15-
item.textContent = `You have added ${array[addedItem]} to the array at index ${addedItem}`;
16-
addedItem++;
17-
console.log(array);
18-
text.value = "";}
19-
});
20-
display.addEventListener("click", () => {
12+
let displayArray = () => {
13+
result.removeAttribute("style");
2114
item.setAttribute("style", "display:none;");
2215
result.prepend("You have added the following to the array: ");
23-
text.focus();
24-
let e = '';
16+
let e = "";
2517
for (let i = 0; i < array.length; i++) {
26-
e += `Element ${i} is ${array[i]} <br>`;
18+
e += `Element ${i} is ${array[i]} <br>`;
2719
result.innerHTML = e;
28-
}
29-
});
30-
display.addEventListener("keypress", () => {
31-
if (event.keyCode === 13) {
32-
display.click();
20+
}
21+
text.focus();
22+
};
23+
display.addEventListener("click", displayArray);
24+
25+
let addAnItemToArray = () => {
26+
item.removeAttribute("style");
27+
display.removeAttribute("disabled", "");
28+
if (text.value == "") return;
29+
else {
30+
result.setAttribute("style", "display:none;");
31+
array[addedItem] = text.value;
32+
item.textContent = `You have added ${array[addedItem]} to the array at index ${addedItem}`;
33+
addedItem++;
34+
console.log(array);
35+
text.value = "";
36+
}
37+
text.focus();
38+
};
39+
40+
let resetArray = () => {
41+
array = [];
42+
result.setAttribute("style", "display:none;");
43+
item.setAttribute("style", "display:none;");
44+
text.value == "";
45+
display.setAttribute("disabled", "");
46+
text.focus();
47+
};
48+
resetBtn.addEventListener("click", resetArray);
49+
add.addEventListener("click", addAnItemToArray);
50+
51+
text.addEventListener("keydown", function(event) {
52+
if (event.key === "Enter") {
53+
event.preventDefault();
54+
addAnItemToArray();
3355
text.focus();
3456
}
3557
});

‎weekSix/append-prepend/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ <h1>Append an item to an array</h1>
1818
<input type="text" id="text1" />
1919
<input type="button" id="btn1" value="Add" title="Add items to the array" />
2020
<input type="button" id="btn2" value="Display" title="Show items in the array" />
21+
<input type="button" id="btn3" value="Reset" title="Reset the array">
2122
</form>
2223
<div id="result"></div>
2324
<div id="added-item"></div>

‎weekSix/append-prepend/style.css

+64-55
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,76 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
55
}
6-
body{
7-
width: 100vw;
8-
height: 100vh;
9-
font-size: 16px;
10-
font-family: 'Poppins', sans-serif;
11-
color: white;
12-
background:#4458a0 ;
6+
body {
7+
width: 100vw;
8+
height: 100vh;
9+
font-size: 16px;
10+
font-family: "Poppins", sans-serif;
11+
color: white;
12+
background: #4458a0;
1313
}
14-
h1{
15-
margin: 1em;
16-
font-size: 3em;
17-
border: 1px solid white;
18-
width: 16em;
19-
text-align: center;
20-
height: 2em;
14+
#wrapper {
15+
width: inherit;
16+
height: inherit;
17+
display: flex;
18+
align-items: center;
19+
justify-content: flex-start;
20+
flex-flow: column nowrap;
21+
}
22+
#text1 {
23+
width: 15em;
24+
height: 2em;
25+
font-size: 1.5em;
26+
text-align: center;
27+
cursor: pointer;
2128
}
22-
#wrapper{
23-
width: inherit;
24-
height: inherit;
25-
display: flex;
26-
align-items: center;
27-
justify-content: center;
28-
flex-flow: column wrap;
29+
h1 {
30+
margin: 0;
31+
padding: 0;
32+
font-size: 3em;
33+
width: 16em;
34+
text-align: center;
35+
text-transform: uppercase;
36+
border-bottom: 3px double white;
2937
}
30-
#text1{
31-
width: 15em;
32-
height: 2em;
33-
font-size: 1.5em;
34-
text-align: center;
35-
cursor: pointer;
38+
form{
39+
border: white 1px solid;
40+
margin: 1em;
41+
padding: 1em;
3642
}
3743
#btn1,
38-
#btn2{
39-
height: 2em;
40-
width: 6em;
41-
padding: .5em;
42-
margin: .5em;
43-
font-size: 1.5em;
44-
border-style: none;
45-
background-color: #212436;
46-
color: white;
47-
font-weight: 600;
48-
border-radius: .2em;
49-
cursor: pointer;
50-
;
44+
#btn2,
45+
#btn3 {
46+
height: 2em;
47+
width: 6em;
48+
padding: 0.5em;
49+
margin: 0.5em;
50+
font-size: 1.5em;
51+
border-style: none;
52+
background-color: #212436;
53+
color: white;
54+
font-weight: 600;
55+
border-radius: 0.2em;
56+
cursor: pointer;
5157
}
5258
#btn1:hover,
53-
#btn2:hover{
54-
color: black;
55-
background: white;
59+
#btn2:hover,
60+
#btn3:hover {
61+
color: black;
62+
background: white;
5663
}
5764
#btn1:active,
58-
#btn2:active{
59-
color: greenyellow;
60-
background: #857e7e;
65+
#btn2:active,
66+
#btn3:active {
67+
color: greenyellow;
68+
background: #857e7e;
6169
}
6270
#result,
63-
#added-item{
64-
font-size: 2em;
65-
font-weight: 600;
66-
margin: 1em;
67-
}
71+
#added-item {
72+
font-size: 2em;
73+
font-weight: 600;
74+
margin: 1em;
75+
height: 40em;
76+
}

0 commit comments

Comments
 (0)