The midterm will be held during lecture on Monday. If you haven't started studying yet, do so today!
We will provide a detailed cheat sheet for you to use during the exam. You can print and bring any other notes or books you want (no computers/phones).
Good luck!
You should expect any of the following topics to be covered in the exam:
An invalid HTML document is provided on the slide below. It generates many validation errors and warnings, however it is possible to make it validate by changing 5 lines in the HTML. Indicate what changes you could make to the document to make it pass validation.
<html lang="en">
<head>
<title> CSE 154 Hello, World!</title>
</head>
<body>
Hello World!
<src="hello.jpg" alt="image of hello" img>
<p
CSE 154 is the best class ever! #propaganda machine
</p>
<blockquote>
The internet is a series of tubes.
</body>
</html>
HTML
<html lang="en">
<head>
<title> CSE 154 Hello, World!</title>
</head>
<body>
Hello World!
<src="hello.jpg" alt="image of hello" img>
<p
CSE 154 is the best class ever! #propaganda machine
</p>
<blockquote>
The internet is a series of tubes.
</body>
</html>
HTML
DOCTYPE to inform the consumer what
type of document this isimg tag - 'img' should be the first thing following the
opening Open the source code of the provided HTML in a new tab (the document won't fit on this slide). For each of the following query selectors, indicate the id's of all of the HTML elements that would be found in the given HTML by the selector.
span .banner-advertisement .home-link div a div p, div > span Using the provided HTML source code, implement index.css:
.content div float to the right and consume 75% of the
width of the page.<p> elements have no margin, border, or paddingblack and have a 3px border that is solid
and colored rebecaapurplewhiteThe following two problems (Problem 3 and Problem 4) use the provided HTML document. Save it and open it in a new tab through each part of Problems 3 and 4.
Implement sesame-street.js
(Big Bird Yellow): When the page loads, apply a style to the #cookie-header
<h2> that sets the text color to hex value #f7f16d
(Count Chocula): Implement JavaScript in sesame-street.js such that when the
page loads, you find all of the cookie list items in the cookie-jar, count them, and
set the text of the #cookie-count <p> to be:
< # of cookies>! There are <# cookies> in cookie(s) in the cookie
jar!
(Replace '<# of cookies>' with the correct number).
(Cookie Monster Hungry): Implement JavaScript logic to remove the last cookie in
Whitaker's cookie jar every 30 seconds. Make sure to update the
#cookie-count when you remove a cookie: to accomplish this, you may
assume that your solution from (b) is correct and functional.
window.onload = function() {
document.getElementById("cookie-header").color = "#F7F16D";
};
// helper functions
function $(id) {
return document.getElementById(id);
}
function $$(query) {
return document.querySelectorAll(query);
}
JS
window.onload = function() {
countCookies();
};
function countCookies() {
let cookies = $$("#cookie-jar li.cookie");
let count = $("cookie-count");
count.innerHTML = cookies.length + "! There are " +
cookies.length + " cookie(s) in the cookie jar!";
}
JS
let timer = null;
window.onload = function() {
timer = setInterval(eatTheCookies, 1000 * 30);
};
function eatTheCookies() {
let cookies = $$("#cookie-jar li.cookie");
if (cookies.length) {
let lastCookie = cookies[cookies.length - 1];
lastCookie.parent.removeChild(lastCookie);
} else {
// clear timer
timer = null;
}
// update cookie count (part b)
countCookies();
}
JS
Implement fetch-pie.js. fetch-pie.js should allow the
user to click the 'Moar Pie!' button to fetch Whitaker's pies from a web service.
Make an AJAX GET request to a web service that lives at:
https://whitakers.pi.es/getPies.php
This web service returns a JSON object with this structure:
{ "pies" :
[
{"type" : "pumpkin"},
{"type" : "banana-cream"},
{"type" : "gluten-free vegan sugar-free fat-free buttermilk
triple-chocolate fudge fantasy with extra rainbow sprinkles"}
]
}Upon receiving the JSON, use JavaScript to insert one list item per pie into the
#pie-cupboard <ul>. Each pie should have class 'pie'. The list
item's text should contain only the type of pie (exactly as it appears in the 'type'
property). Replace or remove any pies that were present in #pie-cupboard.
For example, with the above JSON, you should insert the following list items into the
#pie-cupboard <ul>:
pumpkin
banana-cream
gluten-free vegan sugar-free fat-free buttermilk triple-chocolate
fudge fantasy with extra rainbow sprinkles
HTML
If there is an error retrieving the pies, insert one list item into the
#pie-cupboard <ul> with class 'error' and text that you choose that
describes that an error occurred while fetching the pies. Replace or remove any pies
that were present in #pie-cupboard.