In: Computer Science
* (create grid of images any images) apply a CSS3 grid, so that several columns and rows of images now appear. Apply a color to the background and font to each grid box.
* In each box, add two buttons via JQuery or createElement(). One button will read 'make favorite' and the other will read 'unfavorite.'
* If the 'make favorite' button in any box is clicked, in the grid page, save the image's url or filename to a cookie. Next time the page loads, the 'make favorite' button will disappear for that grid box. A small picture icon will appear in its place, signifying that the image is the favorite. This may require creating divs for each button, and adding/removing the button if the favorite was selected.
* Sets of icons are available for free with sites like this: maxbuttons /free-icon-set/
* When the box with a 'favorite' is clicked, navigate to a detail page. On that page, an icon or small picture will be present, letting the user know that the image is a 'favorite.'
* When 'unfavorite' button is clicked, the cookie favorite is deleted, or set to "".
* Create a navigation bar at the top of every page, linking to each team mate's production.
#### Production notes
for your buttons created during the for-loop, use addEventListener, in this example, to add the button to each box, with a prescribed function. In the parameters of the function, you should send in the id of the button (i, in the loop), specifying the name of the image
1) for CSS3 grid, so that several columns and rows of images now appear. Apply a color to the background and font to each grid box
you write a code
.grid {
align-items: stretch;
}
.griditem {
display: flex;
align-items: center;
}
2) In each box, add two buttons via JQuery or createElement(). One button will read 'make favorite' and the other will read 'unfavorite.'
// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";
// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
// 3. Add event handler
button.addEventListener ("click", function() {
alert("did something");
});
3) If the 'make favorite' button in any box is clicked, in the grid page, save the image's url or filename to a cookie. Next time the page loads, the 'make favorite' button will disappear for that grid box. A small picture icon will appear in its place, signifying that the image is the favorite. This may require creating divs for each button, and adding/removing the button if the favorite was selected.
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>
4) Sets of icons are available for free with sites like this: maxbuttons /free-icon-set/
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
5) When the box with a 'favorite' is clicked, navigate to a detail page. On that page, an icon or small picture will be present, letting the user know that the image is a 'favorite.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
6) When 'unfavorite' button is clicked, the cookie favorite is deleted, or set to "".
<!DOCTYPE html>
<html>
<head>
<title>New page name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/*
* Create cookie with name and value.
* In your case the value will be a json array.
*/
function createCookie(name, value, days) {
var expires = '',
date = new Date();
if (days) {
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toGMTString();
}
document.cookie = name + '=' + value + expires + '; path=/';
}
/*
* Read cookie by name.
* In your case the return value will be a json array with list of pages saved.
*/
function readCookie(name) {
var nameEQ = name + '=',
allCookies = document.cookie.split(';'),
i,
cookie;
for (i = 0; i < allCookies.length; i += 1) {
cookie = allCookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
/*
* Erase cookie with name.
* You can also erase/delete the cookie with name.
*/
function eraseCookie(name) {
createCookie(name, '', -1);
}
var faves = new Array();
$(function(){
var url = window.location.href; // current page url
$(document.body).on('click','#addTofav',function(e){
e.preventDefault();
var pageTitle = $(document).find("title").text();
var fav = {'title':pageTitle,'url':url};
faves.push(fav);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
$(document.body).on('click','.remove',function(){
var id = $(this).data('id');
faves.splice(id,1);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
var myfaves = JSON.parse(readCookie('favespages'));
faves = myfaves;
$.each(myfaves,function(index,value){
var element = '<li class="'+index+'"><h4>'+value.title+'</h4> <a href="'+value.url+'">Open page</a> '+
'<a href="javascript:void(0);" class="remove" data-id="'+index+'">Remove me</a>';
$('#appendfavs').append(element);
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="addTofav">Add me to fav</a>
<ul id="appendfavs">
</ul>
</body>
</html>
7)
Create a navigation bar at the top of every page, linking to each team mate's production.
#### Production notes
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;}
8) your buttons created during the for-loop, use addEventListener, in this example, to add the button to each box, with a prescribed function. In the parameters of the function, you should send in the id of the button (i, in the loop), specifying the name of the image
document.getElementById("myBtn").addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});