Question

In: Computer Science

* (create grid of images any images) apply a CSS3 grid, so that several columns and...

* (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

Solutions

Expert Solution

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";
});

venereology answered 8 months ago
Next > < Previous

Related Solutions

Create a table in SQL with foreign key reference: 1.Create the three tables without any columns...
Create a table in SQL with foreign key reference: 1.Create the three tables without any columns 2.Alter the tables to add the columns 3.Alter the tables to create the primary and foreign keys
The Lo Shu Magic Square is a grid with 3 rows and 3 columns shown in...
The Lo Shu Magic Square is a grid with 3 rows and 3 columns shown in Figure 8-23. The Lo Shu Magic Square has the following properties: l The grid contains the numbers 1 through 9 exactly. l The sum of each row, each column, and each diagonal all add up to the same number. This is shown in Figure 8-24. In a program, you can simulate a magic square using a two-dimensional array. Design a program that initializes a...
Describe the principle components of the ISO Grid Management System (So called the ISO Grid Control...
Describe the principle components of the ISO Grid Management System (So called the ISO Grid Control Center).
Define the groupings of related products. (The columns in your grid) Again your company name is...
Define the groupings of related products. (The columns in your grid) Again your company name is hello winter and is about selling gloves. It should follow last question that was ask.
1 How can we specify the number of rows and columns in a grid layout? 2....
1 How can we specify the number of rows and columns in a grid layout? 2. What happens when we don't have enough items to be displayed in a grid layout with a specified size? 3. How can we specify a grid layout component to occupy more than one columns or rows? 4. What happens if the components in a linear and grid layout exceed the layout size? How can we handle this problem so that all components can be...
Write a rudimentary spreadsheet program using C++. Display a grid of cells with columns A through...
Write a rudimentary spreadsheet program using C++. Display a grid of cells with columns A through H and rows 1 through 20. Accept input in the first row of the screen. The commands are of the form column row entry, where entry is a number, a cell address preceded by a plus (e.g., +A5), a string, or a function preceded by an at sign, @. The functions are: max, min, avg, and sum. During execution of your program, build and...
Methodology (with images) How to apply staining technique for animal and plant cells?
Methodology (with images) How to apply staining technique for animal and plant cells?
Create a table showing the payment of a mortgage of $239,000 month by month. Create columns...
Create a table showing the payment of a mortgage of $239,000 month by month. Create columns for: - Time (in years) - Interest (for that month) - Payment (always the same value) - Payment against principal - Remaining Principal The mortgage is to last 33 years, and the nominal interest rate is 6.03% (a) What is the monthly payment? (b) What is the interest paid at the end of the 9th month? (c) How much of the principal is paid...
create a Eliminate-Reduce-Raise-Create Grid for General Dynamics. Briefly state your rationale.
create a Eliminate-Reduce-Raise-Create Grid for General Dynamics. Briefly state your rationale.
Does the Maillard reaction create any compounds that cause health concerns? If so, what kind of...
Does the Maillard reaction create any compounds that cause health concerns? If so, what kind of compounds raise what sort of concerns?
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT