Treehouse Full Stack Javascript

Developer
Delano
Size
6,450 Kb
Views
14,168
  1. Treehouse Full Stack Javascript Previews
  2. Treehouse Full Stack Javascript HTML Codes
  3. Treehouse Full Stack Javascript CSS Codes
  4. Treehouse Full Stack Javascript JS Codes

How do I make an treehouse full stack javascript?

What is a treehouse full stack javascript? How do you make a treehouse full stack javascript? This script and codes were developed by Delano on 19 October 2022, Wednesday.

Treehouse Full Stack Javascript Previews
IQ Test

Treehouse Full Stack Javascript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Treehouse Full Stack Javascript</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Students</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/design.css"> </head> <body> <div class="page"> <div class="page-header cf"> <h2>Students</h2> </div> <ul class="student-list"> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"> <h3>iboya vat</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/15/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> <h3>aapo niskanen</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/15/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> <h3>phillip cox</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/11/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg"> <h3>zilda moreira</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/15/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg"> <h3>lilou le gall</h3> <span class="email">lilou.le [email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/16/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg"> <h3>lucy hall</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/11/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> <h3>mark colin</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/14/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg"> <h3>sara alves</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/19/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> <h3>ramon macrae</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/13/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg"> <h3>connor taylor</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/18/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg"> <h3>aymeric morel</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> <h3>lorenz otto</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/11/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> <h3>karl williamson</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/12/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> <h3>ouassim heering</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/18/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> <h3>roberto molina</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg"> <h3>jordan hubert</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> <h3>melvin baker</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/18/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg"> <h3>everett gordon</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/17/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg"> <h3>aiden ma</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/18/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg"> <h3>florent gerard</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/12/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg"> <h3>amber chen</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/12/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg"> <h3>alexandra davies</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/11/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg"> <h3>sergio cole</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/17/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg"> <h3>edgar dixon</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/17/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg"> <h3>kirk myers</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/17/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg"> <h3>ani hesseling</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 08/14/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> <h3>victoire bonnet</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/13/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg"> <h3>marcos morales</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/12/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> <h3>nils neumann</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 03/11/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg"> <h3>emily harrison</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/18/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> <h3>matthew fortin</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 03/18/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg"> <h3>charlotte steward</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/18/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> <h3>marceau rodriguez</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/13/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> <h3>hudson anderson</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/12/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg"> <h3>warren phillips</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/11/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> <h3>leo niva</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/14/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> <h3>hani prevoo</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/11/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg"> <h3>veronica rodriguez</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/17/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> <h3>ginestal das neves</h3> <span class="email">ginestal.das [email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/19/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> <h3>devon barnes</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/19/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg"> <h3>brennan pierce</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/15/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> <h3>zachary singh</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/19/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> <h3>arlo harris</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/12/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg"> <h3>hannah ginnish</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/17/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg"> <h3>goos brunt</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/15/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> <h3>eduard riedel</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/12/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg"> <h3>geesken jekel</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/12/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg"> <h3>dolores ryan</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/17/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> <h3>steven rogers</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/18/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> <h3>virgulino silva</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 03/18/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg"> <h3>lucile bertrand</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg"> <h3>elsa lahti</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 04/15/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg"> <h3>soline leclercq</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/12/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg"> <h3>henri kruse</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/14/13</span> </div> </li> </ul> </div> </body> <script type="text/javascript" src="js/app.js"></script>
</html> <script src="js/index.js"></script>
</body>
</html>

Treehouse Full Stack Javascript - Script Codes CSS Codes

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-header{ margin-bottom: 20px;
} .page-header h2{ float: left; font-size: 22px; text-transform: uppercase; font-weight: bold; color: #555; } .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{ 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{ margin: 0; padding: 0; border-bottom: none; }
.pagination{ margin: 40px 0 0 0; text-align: center;
} .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; }
/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;
}
body { line-height: 1;
}
ol, ul { list-style: none;
}
blockquote, q { quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
.cf:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;
}
.navlink { float: left;
}

Treehouse Full Stack Javascript - Script Codes JS Codes

//All the JS code to append markup for the search and pagination links is in this file.
//Create pagination links depending on the number of students. We want 10 max per page.
//The first 10 students are shown when the page loads, and each pagination link displays the correct students.
//Clicking on “1” in the pagination links should should show students 1 to 10, etc...
//The correct HTML markup gets appended in the correct place (see filter-example.html) when the page loads.
//Searching is not case sensitive, you can type "Delano" or "delano"
//When the search button is pressed, the results should show up.
//Pagination links should update depending on the number of search results.
//get all the main elements on the page
var page = document.querySelector(".page");
var pageHeader = document.querySelector(".page-header");
var studentList = document.querySelector(".student-list");
var eachStudent = document.querySelectorAll(".student-item");
var studentDetails = document.querySelector(".student-details");
//Set the pages variable
var currentPage = 1;
var numPages = 0;
var studentsPerPage = 10;
var index;
//Recreate Search Element in Js
var searchBar = function createBar (searchString) {	//Creating the three elements that make up the search bar	var studentSearch = document.createElement("div");	var input = document.createElement("input");	var searchButton = document.createElement("button");	var txtNode = document.createTextNode("Search");	//Define the type of the entry	input.type="text";	//Set the attributes fro the different elements to make it easier to select them	studentSearch.setAttribute("class", "student-search");	input.setAttribute("id", "inputSearch");	searchButton.setAttribute("id", "search-button");	//Append all these elements to the page	searchButton.appendChild(txtNode);	studentSearch.appendChild(input);	studentSearch.appendChild(searchButton);	//Setting the placeholder for the searchButton	input.placeholder = "Type name here..";	//Return the main element which contains all the elements	return studentSearch;
}
//Create static container for pagination in Js
var paginationFilter = function pageFilter (nbOfEntries) {	//Create the static elements for the pagination	var pagination = document.createElement('div');	var ulList = document.createElement('ul');	//Giving them attributes to select them easily	pagination.setAttribute("class", "pagination");	ulList.setAttribute("id", "pagelist");	//Append the ulList to the main pagination div	pagination.appendChild(ulList);	//Return the main div that contains all the elements	return pagination;
};
//Finding the number of students
var numberOfStudents = function () {	var numberOfStudents = eachStudent.length;	//Return the number of students	return numberOfStudents;
}
//Finding the number of pages
var numberOfPages = function () {	//Divise the number of students by the number of students per pag	var numberOfPages = parseInt(numberOfStudents() / studentsPerPage);	//If there is a remaining to the above division then create an extra page	if ( numberOfStudents() % studentsPerPage > 0 ){	numPages += 1;	}	//Return the number of students	return numberOfPages;
};
//Start by hiding all the students on the list
var hideAll = function () {	for (var i = 0; i < numberOfStudents(); i++) {	eachStudent[i].style.display = "none";	}
};
//Then display only 10 intems per page
function showStudents (number) {	for (var i = 0; i < studentsPerPage; i++) {	index = number * studentsPerPage - studentsPerPage + i;	eachStudent[index].style.display = "block";	}
};
//Create the pagination links dynamically
function createPages () {	for (var i = 0; i <= numberOfPages(); i++) {	//Create the dynamic elements in the pagination	var liList = document.createElement('li');	var pageLink = document.createElement('a');	//Set attributes to the pagination links & the li list	pageLink.setAttribute("href", "#");	pageLink.setAttribute("class", "link");	liList.setAttribute("class", "pageLi");	//Append the different elements to the static ulList	var pagelist = document.getElementById("pagelist");	pagelist.appendChild(liList);	liList.appendChild(pageLink);	//Create and appending the page numbers for the pagination	var pageNumbers = document.createTextNode(i + 1);	pageLink.appendChild(pageNumbers);	pageLink.addEventListener("click", function(){	var pageNumClicked = (this.innerHTML || this.innerText);	changePage(pageNumClicked);	}, false);	}	return i;
};
//Create the search feature
var searchFunction = function searchFeature(searchString) {	console.log("Is my search feature working?");	//Get the value entered in the search box	var inputString = document.getElementById('inputSearch');	var count = 0;	//Onkeyup we want to filter the content by the string entered in the search box dynamically	inputString.onkeyup = function() {	//toUpperCase to make it case insensitive	var filter = inputString.value.toUpperCase();	//loop through all the li's	for (var i = 0; i < eachStudent.length; i++) {	//Select the student name and retrieve the .innerText value	var studentName = document.getElementsByTagName("h3");	var studentInfo = studentName[i].innerText;	//Display all the results where indexOf() does not return -1	if (studentInfo.toUpperCase().indexOf(filter) != -1) {	eachStudent[i].style.display = 'list-item';	count++;	} else {	eachStudent[i].style.display = 'none';	}	}	}
}
/*function noResults () {	if (studentInfo.toUpperCase().indexOf(filter) = -1) {	var message = document.createTextNode("Sorry, they are not results!")	studentList.appendChild(message);	}
}*/
//Global function to add all the elements onLoad of the page
function addElements() {	pageHeader.appendChild(searchBar());	page.appendChild(paginationFilter());	//Trigger the search function onClick of the 'Search' button	var searchButton = document.getElementById("search-button");	searchButton.addEventListener("click", searchFunction);	searchFunction();	createPages();	changePage(1);
}
function changePage (number) {	document.addEventListener('DOMContentLoaded', hideAll());	document.addEventListener('DOMContentLoaded', showStudents(number));	document.addEventListener('keyup', showStudents());
}
/* emptySearch () {	inputSearch.addEventListener("keyup", function(){	if(this.value == null) {	hideAll();	showStudents(1);	}	})
}*/
window.onload = addElements();
Treehouse Full Stack Javascript - Script Codes
Treehouse Full Stack Javascript - Script Codes
Home Page Home
Developer Delano
Username Delano83
Uploaded October 19, 2022
Rating 3
Size 6,450 Kb
Views 14,168
Do you need developer help for Treehouse Full Stack Javascript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Delano (Delano83) Script Codes
Name
Adform Creative Tabs
Adform_Referral_Program_Thank_You_Email
A Pen by Delano
Bootstrap Validator on StringLength
Label for Estes
Nav
Label Estes With Corrections
Search Bar in pure Js
JerrDan Home page
Original JerrDanBar
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!