2017-04-11

Apr 12 In-Class Exercise.

Please post your solutions to the Apr 12 In-Class Exercise here.
Best, Chris
Please post your solutions to the Apr 12 In-Class Exercise here. Best, Chris

-- Apr 12 In-Class Exercise
<html>
<head>
<script>
	function onSave()
	{
		let book = {};
		let titleElem = document.getElementById("title");
		let authorElem = document.getElementById("author");
		let publisherElem = document.getElementById("publisher");
		let yearElem = document.getElementById("year"); 
 
		book.title = titleElem.value;
		book.author = authorElem.value;
		book.publisher = publisherElem.value;
		book.year = yearElem.value; 
 
		alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: " + book.publisher + "\nYear: " + book.year);
	}
</script> </head> <body> <form>
	<label>Title <input id="title" type="text"/></label>
	<label>Author <input id="author" type="text"/></label>
	<label>Publisher <input id="publisher" type="text"/></label>
	<label>Year <input id="year" type="text"/></label>
	<button type="confirm" onClick="onSave()">Save</button>
</form> </body> </html> (Edited: 2017-04-12)
<pre> <html> <head> <script> function onSave() { let book = {}; let titleElem = document.getElementById("title"); let authorElem = document.getElementById("author"); let publisherElem = document.getElementById("publisher"); let yearElem = document.getElementById("year"); book.title = titleElem.value; book.author = authorElem.value; book.publisher = publisherElem.value; book.year = yearElem.value; alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: " + book.publisher + "\nYear: " + book.year); } </script> </head> <body> <form> <label>Title <input id="title" type="text"/></label> <label>Author <input id="author" type="text"/></label> <label>Publisher <input id="publisher" type="text"/></label> <label>Year <input id="year" type="text"/></label> <button type="confirm" onClick="onSave()">Save</button> </form> </body> </html> </pre>

-- Apr 12 In-Class Exercise
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>In Class Excercise</title>
</head>
<body>
  <label for="title">Title</label>
  <input id="title" type="text" name="title" />
  <label for="author">Author</label>
  <input id="author" type="text" name="author" />
  <label for="year">Year</label>
  <input id="year" type="text" name="year" />
  <input type="submit" value="Submit" onclick="showObject()"/>
</body>
<script>
  function showObject()
  {
    var obj = {};
    obj.title = document.getElementById("title").value;
    obj.author = document.getElementById("author").value;
    obj.year = document.getElementById("year").value;
    alert("title: " + obj.title + "author: " + obj.author + "year: " + obj.year);
  }
</script>
</html>
(Edited: 2017-04-12)
<pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>In Class Excercise</title> </head> <body> <label for="title">Title</label> <input id="title" type="text" name="title" /> <label for="author">Author</label> <input id="author" type="text" name="author" /> <label for="year">Year</label> <input id="year" type="text" name="year" /> <input type="submit" value="Submit" onclick="showObject()"/> </body> <script> function showObject() { var obj = {}; obj.title = document.getElementById("title").value; obj.author = document.getElementById("author").value; obj.year = document.getElementById("year").value; alert("title: " + obj.title + "author: " + obj.author + "year: " + obj.year); } </script> </html> </pre>

-- Apr 12 In-Class Exercise
Kirtan Patel <!DOCTYPE html> <html> <head>
	<title>In Class Exercise</title>
</head> <body>
	<form>
		<input type="text" id="Title" placeholder="Title"/>
		<input type="text" id="Author" placeholder="Author"/>
		<input type="text" id="Publisher" placeholder="Publisher"/>
		<input type="text" id="Year" placeholder="Year"/>
		<button onclick="display();">Save</button>
		<script type="text/javascript">
			function display(){
				var title = document.getElementById("Title");
				var author = document.getElementById("Author");
				var publisher = document.getElementById("Publisher");
				var year = document.getElementById("Year");
				var book = [title.value, author.value, publisher.value, year.value];
				alert("Title: " + book[0] + " | Author: " + book[1] + " | Publisher: " + book[2] + " | Year: " + book[3]);
			}
		</script>
	</form>
</body> </html>
Kirtan Patel <!DOCTYPE html> <html> <head> <title>In Class Exercise</title> </head> <body> <form> <input type="text" id="Title" placeholder="Title"/> <input type="text" id="Author" placeholder="Author"/> <input type="text" id="Publisher" placeholder="Publisher"/> <input type="text" id="Year" placeholder="Year"/> <button onclick="display();">Save</button> <script type="text/javascript"> function display(){ var title = document.getElementById("Title"); var author = document.getElementById("Author"); var publisher = document.getElementById("Publisher"); var year = document.getElementById("Year"); var book = [title.value, author.value, publisher.value, year.value]; alert("Title: " + book[0] + " | Author: " + book[1] + " | Publisher: " + book[2] + " | Year: " + book[3]); } </script> </form> </body> </html>

-- Apr 12 In-Class Exercise
Chaz Acheronti
<!DOCTYPE html>
<html>
	<head>
		<title>JS Books</title>
	</head>
	<body>
		<form>
			<label for="title">Title:</label>
			<input type="text" name="title" id="titleID" /><br />
			<label for="author">Author:</label>
			<input type="text" name="author" id="authorID" /><br />
			<label for="publisher">Publisher:</label>
			<input type="text" name="publisher" id="publisherID"/><br />
			<label for="author">Author:</label>
			<input type="text" name="year" id="yearID"/><br />
			<button onClick="return storeObject();">Save</button>
		</form>
		<script type="text/javascript" >
			var book = new Object();
			function storeObject() {
				book.title = document.getElementById("titleID").value;
				book.author = document.getElementById("authorID").value;
				book.publisher = document.getElementById("publisherID").value;
				book.year = document.getElementById("yearID").value;
				alert(	book.title + "\n"
						+ book.author + "\n"
						+ book.publisher + "\n"
						+ book.year);
			}
		</script>
	</body>
</html>
(Edited: 2017-04-12)
Chaz Acheronti <pre> <!DOCTYPE html> <html> <head> <title>JS Books</title> </head> <body> <form> <label for="title">Title:</label> <input type="text" name="title" id="titleID" /><br /> <label for="author">Author:</label> <input type="text" name="author" id="authorID" /><br /> <label for="publisher">Publisher:</label> <input type="text" name="publisher" id="publisherID"/><br /> <label for="author">Author:</label> <input type="text" name="year" id="yearID"/><br /> <button onClick="return storeObject();">Save</button> </form> <script type="text/javascript" > var book = new Object(); function storeObject() { book.title = document.getElementById("titleID").value; book.author = document.getElementById("authorID").value; book.publisher = document.getElementById("publisherID").value; book.year = document.getElementById("yearID").value; alert( book.title + "\n" + book.author + "\n" + book.publisher + "\n" + book.year); } </script> </body> </html> </pre>

-- Apr 12 In-Class Exercise
Yash Parikh.
<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <title>Title</title>
</head> <body>
    <form>
        <label>Title: </label><input type="text" id="title" name="Title" placeholder="Enter... "/>
<label>Author: </label><input type="text" id="author" name="Author" placeholder="Enter... "/>
<label>Publisher: </label><input type="text" id="publish" name="Publisher" placeholder="Enter... "/>
<label>Year: </label><input type="text" id="year" name="Year" placeholder="Enter... "/>
        <button onclick="displayElements();">Save</button>
        <script>
            var book = {
                Title: ,
                Author: 	,
                Publisher: ,
                Year: 	
            };
            function displayElements() {
                book.Author = document.getElementById("author").value;
                book.Title = document.getElementById("title").value;
                book.Publisher = document.getElementById("publish").value;
                book.Year = document.getElementById("year").value;
                alert("Title: " + book.Title + ", Author: " + book.Author + ", Publisher: " + book.Publisher + ", Year: " + book.Year);
            }
        </script>
    </form>
</body> </html>
Yash Parikh. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <label>Title: </label><input type="text" id="title" name="Title" placeholder="Enter... "/><br/> <label>Author: </label><input type="text" id="author" name="Author" placeholder="Enter... "/><br/> <label>Publisher: </label><input type="text" id="publish" name="Publisher" placeholder="Enter... "/><br/> <label>Year: </label><input type="text" id="year" name="Year" placeholder="Enter... "/><br/> <button onclick="displayElements();">Save</button> <script> var book = { Title: '', Author: '', Publisher: '', Year: '' }; function displayElements() { book.Author = document.getElementById("author").value; book.Title = document.getElementById("title").value; book.Publisher = document.getElementById("publish").value; book.Year = document.getElementById("year").value; alert("Title: " + book.Title + ", Author: " + book.Author + ", Publisher: " + book.Publisher + ", Year: " + book.Year); } </script> </form> </body> </html>

-- Apr 12 In-Class Exercise
Name: Pei Liu ID: 010200255
 <!DOCTYPE html>
 <html>
 <header>
 <title>title</title>
 <script type="text/javascript">
 	function test() {
 		var book = new Object();
 		book["title"] = document.getElementById("title");
 		book["author"] = document.getElementById("author");
 		book["publisher"] = document.getElementById("publisher");
 		book["year"] = document.getElementById("year");
 		alert("title: " + book.title.value + "author: " + book.author.value + "publisher: " + book.publisher.value + "year: " + 
 book.year.value);
 	}
 </script>
 </header>
 <body>
 <form>
 	<label>Title<input type="text" id="title" /></label>
 	<label>Author<input type="text" id="author" /></label>
 	<label>Publisher<input type="text" id="publisher" /></label>
 	<label>Year<input type="number" id="year" /></label>
 	<input type="button" value="save" onclick="return test();" />
 </form>
 </body>
 </html>
 
(Edited: 2017-04-12)
'''Name: Pei Liu ID: 010200255''' <!DOCTYPE html> <html> <header> <title>title</title> <script type="text/javascript"> function test() { var book = new Object(); book["title"] = document.getElementById("title"); book["author"] = document.getElementById("author"); book["publisher"] = document.getElementById("publisher"); book["year"] = document.getElementById("year"); alert("title: " + book.title.value + "author: " + book.author.value + "publisher: " + book.publisher.value + "year: " + book.year.value); } </script> </header> <body> <form> <label>Title<input type="text" id="title" /></label> <label>Author<input type="text" id="author" /></label> <label>Publisher<input type="text" id="publisher" /></label> <label>Year<input type="number" id="year" /></label> <input type="button" value="save" onclick="return test();" /> </form> </body> </html>

-- Apr 12 In-Class Exercise
Tanusan Rajmohan
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title>In Class Exercise 8</title>
 	</head>
 	<body>
 		<form> 
 			<label for="Title">Title</label>
 			<input id="Title" type="text"/>
 			<label for="Author">Author</label>
 			<input id="Author" type="text"/>
 			<label for="Publisher">Publisher</label>
 			<input id="Publisher" type="text"/>
 			<label for="Year">Year</label>
 			<input id="Year" type="text"/>
 			<input type="submit" onclick='display();' value="save"/>
 		</form>
 	</body>
 	<script>
 		function display() {
 			var book = new Object();
 			book.title = document.getElementById('Title').value, 
 			book.author = document.getElementById('Author').value, 
 			book.publisher = document.getElementById('Publisher').value, 
 			book.year = document.getElementById('Year').value;
 			alert("Title: " + book.title + "\n Author: " + book.author + "\n Publisher: " + book.publisher + "\n Year: " + book.year);
 		}
 	</script>
 </html>
'''Tanusan Rajmohan''' <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>In Class Exercise 8</title> </head> <body> <form> <label for="Title">Title</label> <input id="Title" type="text"/> <label for="Author">Author</label> <input id="Author" type="text"/> <label for="Publisher">Publisher</label> <input id="Publisher" type="text"/> <label for="Year">Year</label> <input id="Year" type="text"/> <input type="submit" onclick='display();' value="save"/> </form> </body> <script> function display() { var book = new Object(); book.title = document.getElementById('Title').value, book.author = document.getElementById('Author').value, book.publisher = document.getElementById('Publisher').value, book.year = document.getElementById('Year').value; alert("Title: " + book.title + "\n Author: " + book.author + "\n Publisher: " + book.publisher + "\n Year: " + book.year); } </script> </html>

-- Apr 12 In-Class Exercise
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>In-Class Exercise | April 12, 2017</title>
    <script>
        function save() {
            var book = {
                title: document.getElementById('title').value,
                author: document.getElementById('author').value,
                publisher: document.getElementById('publisher').value,
                year: document.getElementById('year').value
            }
            show(book)
        }
        function show(book) {
            alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: "
                + book.publisher + "\nYear: " + book.year + "\n")
        }
    </script>
    <style>
        input {
            display: block;
        }
    </style>
</head>
<body>
<form>
    <label for="title">Title:</label>
    <input type="text" name="title" id="title">
    <label for="author">Author:</label>
    <input type="text" name="author" id="author">
    <label for="publisher">Publisher:</label>
    <input type="text" name="publisher" id="publisher">
    <label for="year">Year:</label>
    <input type="text" name="year" id="year">
    <button onclick="return save()">Save</button>
</form>
</body>
</html>
<pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>In-Class Exercise | April 12, 2017</title> <script> function save() { var book = { title: document.getElementById('title').value, author: document.getElementById('author').value, publisher: document.getElementById('publisher').value, year: document.getElementById('year').value } show(book) } function show(book) { alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: " + book.publisher + "\nYear: " + book.year + "\n") } </script> <style> input { display: block; } </style> </head> <body> <form> <label for="title">Title:</label> <input type="text" name="title" id="title"> <label for="author">Author:</label> <input type="text" name="author" id="author"> <label for="publisher">Publisher:</label> <input type="text" name="publisher" id="publisher"> <label for="year">Year:</label> <input type="text" name="year" id="year"> <button onclick="return save()">Save</button> </form> </body> </html> </pre>

-- Apr 12 In-Class Exercise
Michael Nguyen
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise 1</title>
    <script type="text/javascript">
        function book(){
            var book = new Object();
            book.title = document.getElementById("titleID").value;
            book.author = document.getElementById("authorID").value;
            book.publisher = document.getElementById("pubID").value;
            book.year = document.getElementById("yearID").value; 
 
            alert("Title: " + book["title"] + "\nAuthor: " + book["author"] + "\nPublisher: " + book["publisher"] + "\nYear: " + book["year"]);
        }
    </script>
</head>
<body>
    <form>
        Title: <input type="text" name="title" id="titleID" placeholder="Title" maxlength="30"> 

        Author: <input type="text" name="author" id="authorID" placeholder="Author" maxlength="30"> 

        Publisher: <input type="text" name="publisher" id="pubID" placeholder="Publisher" maxlength="30"> 

        Year: <input type="text" name="year" id="yearID" placeholder="Year" maxlength="30"> 

        <input type = "submit" value ="Save" onclick="return book();"/>     </form> </body> </html>
'''Michael Nguyen''' <pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Exercise 1</title> <script type="text/javascript"> function book(){ var book = new Object(); book.title = document.getElementById("titleID").value; book.author = document.getElementById("authorID").value; book.publisher = document.getElementById("pubID").value; book.year = document.getElementById("yearID").value; alert("Title: " + book["title"] + "\nAuthor: " + book["author"] + "\nPublisher: " + book["publisher"] + "\nYear: " + book["year"]); } </script> </head> <body> <form> Title: <input type="text" name="title" id="titleID" placeholder="Title" maxlength="30"> <br/><br/> Author: <input type="text" name="author" id="authorID" placeholder="Author" maxlength="30"> <br/><br/> Publisher: <input type="text" name="publisher" id="pubID" placeholder="Publisher" maxlength="30"> <br/><br/> Year: <input type="text" name="year" id="yearID" placeholder="Year" maxlength="30"> <br/><br/> <input type = "submit" value ="Save" onclick="return book();"/> </form> </body> </html> </pre>
[ Next ]
X