diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..d41ca15 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "program": "${workspaceFolder}/js/script.js" + } + ] +} \ No newline at end of file diff --git a/css/design.css b/css/design.css index 2094f8d..0f4ab0a 100644 --- a/css/design.css +++ b/css/design.css @@ -1,119 +1,128 @@ -body{ - background-color: #e1f1f6; - font-family: Helvetica, sans-serif; - color: #222; +body { + background-color: #e1f1f6; + font-family: Helvetica, sans-serif; + color: #222; } -.page{ - margin: 50px auto; - width: 70%; - background-color: #fff; - border-radius: 5px; - padding: 50px; +.page { + margin: 50px auto; + width: 70%; + background-color: #fff; + border-radius: 5px; + padding: 50px; } -.page-header{ - margin-bottom: 20px; +.page-header { + margin-bottom: 20px; } - .page-header h2{ + +.page-header h2 { float: left; font-size: 22px; text-transform: uppercase; font-weight: bold; color: #555; - } +} - .page-header .student-search{ +.page-header .student-search { float: right; - } - - .page-header .student-search input{ - border-radius: 5px; - border: 1px solid #eaeaea; - padding: 8px 15px; - font-size: 14px; - } - - .page-header .student-search button{ - border-radius: 5px; - border: 1px solid #eaeaea; - padding: 8px 15px; - font-size: 14px; - background-color: #4ba6c3; - color: #fff - } - -.student-list{} - - .student-item{ +} + +.page-header .student-search input { + border-radius: 5px; + border: 1px solid #eaeaea; + padding: 8px 15px; + font-size: 14px; +} + +.page-header .student-search button { + border-radius: 5px; + border: 1px solid #eaeaea; + padding: 8px 15px; + font-size: 14px; + background-color: #4ba6c3; + color: #fff +} + +.student-list {} + +.student-item { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #eaeaea; - } - - .student-details{ - width: 50%; - float: left; - } - - .student-details .avatar{ - width: 40px; - height: auto; - border-radius: 20px; - float: left; - margin-right: 14px - } - - .student-details h3{ - margin: 4px 0 2px 0; - font-weight: bold; - color: #4ba6c3; - } - - .student-details .email{ - color: #888; - font-size: 14px; - } - - - .joined-details{ - width: 50%; - float: left; - text-align: right; - } - - .joined-details .date{ - margin-top: 15px; - display: block; - font-size: 14px; - color: #999; - } - - .student-item:last-child{ +} + +.student-details { + width: 50%; + float: left; +} + +.student-details .avatar { + width: 40px; + height: auto; + border-radius: 20px; + float: left; + margin-right: 14px +} + +.student-details h3 { + margin: 4px 0 2px 0; + font-weight: bold; + color: #4ba6c3; +} + +.student-details .email { + color: #888; + font-size: 14px; +} + +.joined-details { + width: 50%; + float: left; + text-align: right; +} + +.joined-details .date { + margin-top: 15px; + display: block; + font-size: 14px; + color: #999; +} + +.student-item:last-child { margin: 0; padding: 0; border-bottom: none; - } +} -.pagination{ - margin: 40px 0 0 0; - text-align: center; +.pagination { + margin: 40px 0 0 0; + text-align: center; } - - .pagination li{ + +.pagination li { display: inline; - } - - .pagination li a{ - border: 1px solid #eaeaea; - border-radius: 5px; - padding: 3px 8px; - text-decoration: none; - color: #4ba6c3; - } - - .pagination li a.active, - .pagination li a:hover{ - background-color: #4ba6c3; - color: #fff; - } \ No newline at end of file +} + +.pagination li a { + border: 1px solid #eaeaea; + border-radius: 5px; + padding: 3px 8px; + text-decoration: none; + color: #4ba6c3; +} + +.pagination li a.active, +.pagination li a:hover { + background-color: #4ba6c3; + color: #fff; +} + +.nav_btn { + padding: 10px; + margin: 1px; +} + +.active { + border-color: cyan; +} \ No newline at end of file diff --git a/index.html b/index.html index 8e11bd0..2c90374 100644 --- a/index.html +++ b/index.html @@ -1,565 +1,571 @@ - - - + + + + Students - - + + +
-
-

Students

- +
+

Students

+ + +
+ + + -
- -
- - + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index 84358aa..6446fb5 100644 --- a/js/script.js +++ b/js/script.js @@ -1,50 +1,76 @@ -/****************************************** -Treehouse Techdegree: -FSJS project 2 - List Filter and Pagination -******************************************/ - +/*jslint es6 */ // Study guide for this project - https://drive.google.com/file/d/1OD1diUsTMdpfMDv677TfL1xO2CEkykSz/view?usp=sharing - -/*** - Add your global variables that store the DOM elements you will - need to reference and/or manipulate. - - But be mindful of which variables should be global and which - should be locally scoped to one of the two main functions you're - going to create. A good general rule of thumb is if the variable - will only be used inside of a function, then it can be locally - scoped to that function. -***/ - - - - -/*** - Create the `showPage` function to hide all of the items in the - list except for the ten you want to show. - - Pro Tips: - - Keep in mind that with a list of 54 students, the last page - will only display four. - - Remember that the first student has an index of 0. - - Remember that a function `parameter` goes in the parens when - you initially define the function, and it acts as a variable - or a placeholder to represent the actual function `argument` - that will be passed into the parens later when you call or - "invoke" the function -***/ - - - - -/*** - Create the `appendPageLinks function` to generate, append, and add - functionality to the pagination buttons. -***/ - - - - - -// Remember to delete the comments that came with this file, and replace them with your own code comments. \ No newline at end of file +// select all the students by getting all the children of the student list div +const student_list = document.querySelector('.student-list').children; +const items_per_page = 10; +// calculate how many nav buttons are needed, use the rounded up number. +const num_navbuttons = Math.ceil(student_list.length / items_per_page); + +// Create theh pagination buttons +appendPageLinks(); +hide_all_students(); +showPage(student_list, 1); +let btns = document.querySelectorAll('.nav_btn'); +btns[0].className += ' active'; + + +function hide_all_students() { + // remove all student except for the first ten + for (let i = 0; i < student_list.length; i++) { + student_list[i].style.display = 'none'; + } +} + +function showPage(list, page) { + // first hide all students + hide_all_students() + // show the students that are on the page passed + let start_page = 0 + (page - 1) * 10; + for (let i = start_page; i < start_page + items_per_page; i++) { + + // if incase we are at the last page that does not have the full number of students, then break the loop here to prevent an error. + if (i === list.length) { + break; + } + + // show the student + list[i].style.display = 'block'; + } +} + +function updateButtons(event) { + // update the nav buttons + buttons = document.querySelectorAll('.nav_btn'); + for (let i = 0; i < buttons.length; i++) { + buttons[i].className = 'nav_btn'; + } + + + // add the active tag to the clicked btn + event.target.className += ' active'; +} + +function appendPageLinks() { + console.log('page func'); + let navbuttons = []; + let pagination_div = document.querySelector('.pagination'); + + // iteate and create buttons as needed. + for (let i = 0; i < num_navbuttons; i++) { + let pagebox = document.createElement('button'); + pagebox.textContent = i + 1; // set the text of the buttons to one more than 1 since in real life we do not use 0 index. + pagebox.className = 'nav_btn'; + // Add event listener to the button as we create it. + pagebox.addEventListener('click', function(event) { + // when this button is clicked call the display page with the number written on this button as the argument to the function. + let page = event.target.textContent; + let list = student_list + showPage(list, page); + updateButtons(event); + }); + + // add the button in to the div + pagination_div.appendChild(pagebox); + } +} \ No newline at end of file