logenkain/school
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update javascript class

Browse Source
This commit is contained in:
Logen Kain 2021-04-02 15:29:15 -04:00
parent fe39bf84d2
commit 307d7d1876
6 changed files with 208 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
html-java-script/week11/10.14-lab-superhero-supervillain-classes/LAB JavaScript SuperHero and SuperVillain classes.zip Normal file
View File

Binary file not shown.

70
html-java-script/week11/10.14-lab-superhero-supervillain-classes/hero.js Normal file
View File

@ -0,0 +1,70 @@
"use strict"
class SuperHuman {
constructor(name, powerLevel) {
this.name = name;
this.powerLevel = powerLevel;
}
}
// Define SuperHero and SuperVillain classes here
class SuperHero extends SuperHuman{
constructor(name, alias, powerLevel){
super(name, powerLevel);
this.alias = alias;
}
battle(sv){
if (this.powerLevel >= sv.powerLevel){return true;}
else{return false;}
}
}
class SuperVillain extends SuperHuman{
constructor(name, alias, powerLevel){
super(name, powerLevel);
this.alias = alias;
}
getEvilChuckle(){return "Ha ha ha!";}
}
const heroes = {
"Super Bacon": new SuperHero("Jack Oinker", "Super Bacon", 2),
"Flat-Man": new SuperHero("Peter Pranker", "Flat-Man", 5),
"Mighty Woman": new SuperHero("Diana Dense", "Mighty Woman", 8),
"Captain Marvelous": new SuperHero("Carol Hangers", "Captain Marvelous", 9)
}
const villains = {
"The Jokester": new SuperHero("Jack Nastier", "The Jokester", 3),
"Magnet Man": new SuperHero("Max Eisenhardt", "Magnet Man", 6),
"Lex Loner": new SuperHero("Lex Loner", "Lex Loner", 2),
"Thankos": new SuperHero("Thankos", "Thankos", 9)
}
window.addEventListener("DOMContentLoaded", domLoaded);
function domLoaded() {
// Detect selection of hero and villain
document.querySelector("#heroSelect").addEventListener("change", selectionChanged);
document.querySelector("#villainSelect").addEventListener("change", selectionChanged);
selectionChanged();
}
function selectionChanged() {
var selectedHeroValue = document.querySelector("#heroSelect").value;
var selectedVillainValue = document.querySelector("#villainSelect").value;
// Get hero and villain selected
var selectedHero = heroes[selectedHeroValue];
var selectedVillain = villains[selectedVillainValue];
// Your code goes here
if (selectedHero.battle(selectedVillain)){
document.querySelector("#winner").innerHTML = "Winner: " + selectedHero.alias + "!";
}
else{
document.querySelector("#winner").innerHTML = "Winner: " + selectedVillain.alias + "!";
}
}

33
html-java-script/week11/10.14-lab-superhero-supervillain-classes/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<title>Super Heroes vs. Super Villains</title>
<script src="hero.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<h1>Super Heroes vs. Super Villains</h1>
<p>Select a hero:
<select id="heroSelect">
<option>Super Bacon</option>
<option>Flat-Man</option>
<option>Mighty Woman</option>
<option>Captain Marvelous</option>
</select>
</p>
<p>Select a villain:
<select id="villainSelect">
<option>The Jokester</option>
<option>Magnet Man</option>
<option>Lex Loner</option>
<option>Thankos</option>
</select>
</p>
<p id="winner"></p>
</body>
</html>

BIN
html-java-script/week11/10.15-lab-grocery-list/LAB Grocery list.zip Normal file
View File

Binary file not shown.

88
html-java-script/week11/10.15-lab-grocery-list/groceries.js Normal file
View File

@ -0,0 +1,88 @@
"use strict"
let groceryList = [];
// Wait until DOM is loaded
window.addEventListener("DOMContentLoaded", function() {
document.querySelector("#addBtn").addEventListener("click", addBtnClick);
document.querySelector("#clearBtn").addEventListener("click", clearBtnClick);
// Load the grocery list from localStorage
groceryList = loadList();
if (groceryList.length > 0) {
// Display list
for (let item of groceryList) {
showItem(item);
}
}
else {
// No list to display
enableClearButton(false);
}
});
// Enable or disable the Clear button
function enableClearButton(enabled) {
document.querySelector("#clearBtn").disabled = !enabled;
}
// Show item at end of the ordered list
function showItem(item) {
let list = document.querySelector("ol");
list.innerHTML += `<li>${item}</li>`;
}
// Add item to grocery list
function addBtnClick() {
let itemTextInput = document.querySelector("#item");
let item = itemTextInput.value.trim();
if (item.length > 0) {
enableClearButton(true);
showItem(item);
groceryList.push(item);
// Save groceryList to localStorage
saveList(groceryList);
}
// Clear input
itemTextInput.value = '';
}
// Clear the list
function clearBtnClick() {
enableClearButton(false);
groceryList = [];
let list = document.querySelector("ol");
list.innerHTML = "";
// Remove the grocery list from localStorage
clearList();
}
// Complete the functions below
function loadList() {
let groceryList;
let storage;
groceryList = [];
storage=localStorage.getItem("list");
if (storage != null){
groceryList = storage.split(",");
}
return groceryList;
}
function saveList(groceryList) {
console.log(groceryList.toString());
localStorage.setItem("list", groceryList.toString());
}
function clearList() {
localStorage.clear();
}

17
html-java-script/week11/10.15-lab-grocery-list/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE HTML>
<html lang="en">
<title>Grocery List</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script src="groceries.js"></script>
<body>
<h1>Grocery List</h1>
<input type="text" id="item"> <input type="button" id="addBtn" value="Add">
<ol></ol>
<input type="button" id="clearBtn" value="Clear">
</body>
</html>