Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
S
shopping_list
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
3
Issues
3
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
experiment_web_app
shopping_list
Compare Revisions
256798eae0c1b00bc73303989d2afba77f03310e...5461021a3094130386ac8b7025217822b88884d7
Source
5461021a3094130386ac8b7025217822b88884d7
Select Git revision
...
Target
256798eae0c1b00bc73303989d2afba77f03310e
Select Git revision
Compare
Commits (2)
change the typo
· 4f55e7fd
jonathan Courat
authored
Dec 30, 2017
4f55e7fd
Create dinamicly the list with an object
· 5461021a
jonathan Courat
authored
Jan 01, 2018
5461021a
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
75 additions
and
46 deletions
+75
-46
style.css
css/style.css
+6
-1
index.html
index.html
+4
-45
list.js
js/list.js
+20
-0
script.js
js/script.js
+45
-0
No files found.
css/style.css
View file @
5461021a
/*
* This the CSS for the Shopping List App
* This
is
the CSS for the Shopping List App
*
*
*/
html
{
font-family
:
"Gill Sans Extrabold"
,
sans-serif
;
}
div
{
font-size
:
15px
;
}
h1
{
font-size
:
15px
;
color
:
grey
;
...
...
index.html
View file @
5461021a
...
...
@@ -4,52 +4,11 @@
<meta
charset=
"UTF-8"
>
<title>
Shopping list
</title>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/style.css"
/>
<script
type=
"text/javascript"
src=
"js/list.js"
></script>
</head>
<body>
<h1>
My Shopping List
</h1>
<!-- all items of cat 1 -->
<h2>
category 1
</h2>
<fieldset>
<legend
class=
"noprint"
>
Select items for shopping
</legend>
<div
class=
"itemToSelect noprint"
>
<input
type=
"checkbox"
id=
"item_1"
name=
"cat1"
value=
"item 1"
>
<div
class=
"checkForPrint"
></div>
<label
for=
"cat1"
>
Pain
</label>
<p
class=
"quantity"
>
1
</p>
<button
class=
"plusBt"
>
+
</button>
<button
class=
"minusBt"
>
-
</button>
</div>
<div
class=
"itemToSelect noprint"
>
<input
type=
"checkbox"
id=
"item_2"
name=
"cat_1"
value=
"item 2"
>
<div
class=
"checkForPrint"
></div>
<label
for=
"cat_1"
>
beurre
</label>
<p
class=
"quantity"
>
1
</p>
<button
class=
"plusBt"
>
+
</button>
<button
class=
"minusBt"
>
-
</button>
</div>
</fieldset>
<!-- all items of cat 2 -->
<h2>
category 2
</h2>
<fieldset>
<legend
class=
"noprint"
>
Select items for shopping 2
</legend>
<div
class=
"itemToSelect noprint"
>
<input
type=
"checkbox"
id=
"item_3"
name=
"cat_2"
value=
"item 1"
>
<div
class=
"checkForPrint"
></div>
<label
for=
"cat_2"
>
fromage rapé
</label>
<p
class=
"quantity"
>
1
</p>
<button
class=
"plusBt"
>
+
</button>
<button
class=
"minusBt"
>
-
</button>
</div>
<div
class=
"itemToSelect noprint"
>
<input
type=
"checkbox"
id=
"item_4"
name=
"cat_2"
value=
"item 2"
>
<div
class=
"checkForPrint"
></div>
<label
for=
"cat_2"
>
Yahourt
</label>
<p
class=
"quantity"
>
1
</p>
<button
class=
"plusBt"
>
+
</button>
<button
class=
"minusBt"
>
-
</button>
</div>
</fieldset>
</body>
<script
type=
"text/javascript"
src=
"js/script.js"
></script>
</html>
\ No newline at end of file
</body>
<script
type=
"text/javascript"
src=
"js/script.js"
></script>
</html>
\ No newline at end of file
js/list.js
0 → 100644
View file @
5461021a
let
shopList
=
{
cat1
:
[
"pain"
,
"pain au lait"
,
"confiture"
,
"café"
,
"thé"
,
"miel"
],
cat2
:
[
"céreals"
,
"lait"
,
"nesquick"
]
};
console
.
log
(
"this is the list"
);
console
.
log
(
shopList
);
js/script.js
View file @
5461021a
console
.
log
(
"script say hi!"
);
/* Create the items */
console
.
log
(
shopList
);
function
createSection
(
sectionName
,
itemList
)
{
const
newSection
=
document
.
createElement
(
"fieldset"
);
let
makeItems
=
`<legend><h2>
${
sectionName
}
</h2></legend>`
;
for
(
el
in
itemList
)
{
makeItems
+=
addItem
(
itemList
[
el
]);
itNum
++
;
}
newSection
.
innerHTML
=
makeItems
;
document
.
body
.
appendChild
(
newSection
);
}
function
addItem
(
itemName
)
{
return
`<div class="itemToSelect noprint">\
<input type="checkbox" id="item_
${
itNum
}
" name="cat
${
itNum
}
" value="item
${
itNum
}
">\
<div class="checkForPrint"></div>\
<label for="cat
${
itNum
}
">
${
itemName
}
</label>\
<p class="quantity">1</p>\
<button class="plusBt">+</button>\
<button class="minusBt">-</button>\
</div>`
;
}
let
itNum
=
0
;
for
(
let
prop
in
shopList
)
{
console
.
log
(
`obj.
${
prop
}
=
${
shopList
[
prop
]}
`
);
createSection
(
prop
,
shopList
[
prop
]);
}
/* Set the interaction */
let
items
=
document
.
querySelectorAll
(
"input"
);
items
.
forEach
(
function
(
checkBox
){
checkBox
.
checked
=
false
;
});
...
...
@@ -41,6 +83,7 @@ addEventListenerList(items, 'click', displayItem);
/* PLUS BUTTON */
let
plusBt
=
document
.
querySelectorAll
(
'.plusBt'
);
function
incrementQuantity
()
{
...
...
@@ -52,7 +95,9 @@ function incrementQuantity() {
addEventListenerList
(
plusBt
,
'click'
,
incrementQuantity
);
/* MINUS BUTTON */
let
minusBt
=
document
.
querySelectorAll
(
'.minusBt'
);
function
decrementQuantity
()
{
...
...