Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

lab5/lab5.html

Go to file
 
 
Cannot retrieve contributors at this time
120 lines (93 sloc) 4.92 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html>
<head>
<title>Lab 5: JavaScript</title>
</head>
<body>
<form>
<label for="myName">Choose a name from this list or enter your own:</label>
<input list="names" id="myName" name="myName" />
<datalist id="names">
</datalist>
<br>
<label for="myLocation">Choose a location from this list or enter your own:</label>
<input list="locations" id="myLocation" name="myLocation" />
<datalist id="locations">
</datalist>
<br>
<label for="myTime">Choose a time from this list or enter your own:</label>
<input list="times" id="myTime" name="myTime" />
<datalist id="times">
</datalist>
<br>
<label for="myEvent">Choose an event from this list or enter your own:</label>
<input list="events" id="myEvent" name="myEvent" />
<datalist id="events">
</datalist>
<br>
<button id="generate">Generate a story</button>
</form>
<p id="story"></p>
<script>
// DO NOT CHANGE THE FOLLOWING CODE
function CreateOption(optionText) {
let newOption = document.createElement("option");
newOption.setAttribute("value", optionText);
return newOption;
}
function AddToOptionToList(listid, nameoption) {
const myList = document.getElementById(listid);
myList.appendChild(nameoption);
}
function UpdateStory(story) {
document.getElementById("story").innerHTML = story;
}
function Warning(message = "Some of the input values are empty!") {
alert(message);
}
// END OF DO NOT CHANGE
// TODO 1: declare an array of 5 different names, an array of 4 different locations, an array of 3 different times (for example, "on Sunday morning"), and an array of 5 different activities (for example, "reading a book") (10 pts)
const names = ["Alice", "Bob", "Charlie", "Diana", "Edward"];
const locations = ["park", "museum", "restaurant", "beach"];
const times = ["in the morning", "at noon", "in the evening"];
const events = ["reading a book", "playing football", "having a picnic", "swimming in the sea", "taking photographs"];
// TODO 2: create a for loop that use the CreateOption and AddNameOptionToList function to add all items you created in TODO 1 to the suitable datalist (12 pts)
names.forEach(name => AddToOptionToList("names", CreateOption(name)));
locations.forEach(location => AddToOptionToList("locations", CreateOption(location)));
times.forEach(time => AddToOptionToList("times", CreateOption(time)));
events.forEach(event => AddToOptionToList("events", CreateOption(event)));
document.getElementById("generate").addEventListener("click", function(event) {
event.preventDefault();
const myName = document.getElementById("myName").value;
const myEvent = document.getElementById("myEvent").value;
const myLocation = document.getElementById("myLocation").value;
const myTime = document.getElementById("myTime").value;
// TODO 3: Implement a control logic such that if any of the above string is empty, call the Warning function and provide a message that helps the user understand what information is missing. The warning message needs to specified all the fields that are missing (12 pts)
let missingFields = [];
if (!myName) missingFields.push("name");
if (!myEvent) missingFields.push("event");
if (!myLocation) missingFields.push("location");
if (!myTime) missingFields.push("time");
if (missingFields.length > 0) {
Warning("Please provide a value for: " + missingFields.join(", "));
return;
}
// TODO 4: following TODO 3, if all above strings are not empty, concatenate the four strings above into a meaningful sentence, and store it in a new string (4 pts)
const story = `${myName} will be ${myEvent} at the ${myLocation} ${myTime}.`;
// TODO 5: update the story using the UpdateStory function when appropriate (4pts)
UpdateStory(story);
// TODO 6: Write a function that can ansewr the following question: (8pts)
// Given an array of integers <nums> and an integer <target>, return an array of indices of all items in <nums> whose values are the same as <target>. If there is no such number, return -1
// for example, when nums = [1,2,4,6,2,3,4] and target = 2, the return value should be [1,4]
// when nums = [1,2,4,6,2,3,4] and target = 10, the return value should be -1
function findIndices(nums, target) {
const indices = [];
nums.forEach((num, index) => {
if (num === target) indices.push(index);
});
return indices.length > 0 ? indices : -1;
}
});
</script>
</body>
</html>