Before.
9:21
%%js
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];
for (var i = 0; i < 10; i++) {
alphabetList.push(i);
}
console.log(alphabetList);
9:21
After
9:21
%%js
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];
for (var i = 0; i < 10; i++) {
alphabetList.push(alphabet[i]);
}
console.log(alphabetList);
9:21
2. Before
9:21
%%js
// Copy your previous code to built alphabetList here
let letterNumber = 5
for (var i = 0; i < alphabetList; i++) {
if (i === letterNumber) {
console.log(letterNumber + " is letter number 1 in the alphabet")
}
}
// Should output:
// "e" is letter number 5 in the alphabet
9:21
2. after
9:21
%%js
// Copy your previous code to build alphabetList here
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var alphabetList = [];
for (var i = 0; i < 10; i++) {
alphabetList.push(alphabet[i]);
}
let letterToFind = "e";
for (var i = 0; i < alphabetList.length; i++) {
if (alphabetList[i] === letterToFind) {
console.log(letterToFind + " is letter number " + (i + 1) + " in the alphabet");
break; // Once found, exit the loop
}
}
9:22
3 doesnt have any changes
File "<ipython-input-2-de727c8e67f6>", line 1
Before.
^
SyntaxError: invalid syntax
%%html
<style>
button {
background-color: #4E804F;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: darkgreen;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: #D1D9CE;
}
/* Additional styles for better presentation */
div {
margin: 20px;
}
.top {
background-color: #4E804F;
padding: 10px 0;
text-align: center;
}
.top a {
margin: 0 20px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>☆ Online Grocery Store! ☆</h1>
</header>
<nav class=“top”>
<a href=“/”>☆ Home</a>
<a href=“/fruits”>☆ Fruits</a>
<a href=“/vegetables”>☆ Vegetables</a>
<a href=“/dairy”>☆ Dairy</a>
</nav>
<section>
<h2>Shop Now</h2>
<p>Explore a wide variety of fresh and delicious groceries.</p>
<button>Start Shopping</button>
</section>
<section>
<h2>Our Products</h2>
<p>Discover the finest selection of fruits, vegetables, and dairy products.</p>
<a href=“/fruits”>Fruits</a>
<a href=“/vegetables”>Vegetables</a>
<a href=“/dairy”>Dairy</a>
</section>
</body>
</html>
</head>
☆ Online Grocery Store! ☆
Shop Now
Explore a wide variety of fresh and delicious groceries.
Our Products
Discover the finest selection of fruits, vegetables, and dairy products.
<a href=“/fruits”>Fruits</a> <a href=“/vegetables”>Vegetables</a> <a href=“/dairy”>Dairy</a></html>
%%html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery Store</title>
</head>
<body>
<!-- Grocery Store Title -->
<h1 id="storeTitle">My Grocery Store</h1>
<!-- Grocery List -->
<ul id="groceryList">
<li>Apples</li>
<li>Bananas</li>
<li>Carrots</li>
</ul>
<!-- Add Item Form -->
<div>
<input type="text" id="itemInput" placeholder="Enter an item">
<button id="addItemButton">Add Item</button>
</div>
<!-- JavaScript Code -->
<script>
// Function to add an item to the grocery list
function addItemToList() {
var itemInput = document.getElementById("itemInput");
var groceryList = document.getElementById("groceryList");
if (itemInput.value.trim() !== "") {
var newItem = document.createElement("li");
newItem.innerText = itemInput.value;
groceryList.appendChild(newItem);
// Clear the input field
itemInput.value = "";
// Update the top paragraph to indicate a change
var storeTitle = document.getElementById("storeTitle");
storeTitle.innerText = "My Grocery Store (Updated)";
// Change the innerHTML of the top paragraph
var topParagraph = document.querySelector("p");
topParagraph.innerText = "Switched!";
}
}
// Add an item when the button is clicked
var addItemButton = document.getElementById("addItemButton");
addItemButton.onclick = addItemToList;
</script>
</body>
</html>
<!DOCTYPE html>
My Grocery Store
- Apples
- Bananas
- Carrots
%%html
console.log("If statements + Operators")
var age1 = 16
var age2 = 17
if (age1 > age2) {
// runs if age1 is more than age2
console.log("age1 is more than age2")
}
if (age1 === age2) {
// runs if age1 and age2 are the same
console.log("age1 is the same as age2")
}
if (age1 < age2) {
// runs if age2 is more than age1
console.log("age1 is less than age2")
}
console.log(“If statements + Operators”) var age1 = 16 var age2 = 17 if (age1 > age2) { // runs if age1 is more than age2 console.log(“age1 is more than age2”) } if (age1 === age2) { // runs if age1 and age2 are the same console.log(“age1 is the same as age2”) } if (age1 < age2) { // runs if age2 is more than age1 console.log(“age1 is less than age2”) }
%%js
const groceryStore = {
name: "GreenGrocers",
location: "Virtual",
products: [
{
name: "Apples",
price: 1.5,
quantity: 100,
},
{
name: "Bananas",
price: 0.75,
quantity: 150,
},
{
name: "Milk",
price: 2.0,
quantity: 50,
},
],
customers: ["Customer1", "Customer2", "Customer3"],
orders: [
{
orderId: 1,
customer: "Customer1",
items: ["Apples", "Bananas"],
total: 2.25,
},
{
orderId: 2,
customer: "Customer2",
items: ["Milk", "Apples"],
total: 3.5,
},
],
};
console.log("Grocery Store Object:");
console.log(groceryStore);
groceryStore.products[0].quantity += 10;
console.log("Updated quantity of Apples:");
console.log(groceryStore.products[0]);
// Perform mathematical operations
const totalPrice = groceryStore.products.reduce(
(total, product) => total + product.price * product.quantity,
0
);
console.log("Total value of all products in store: $" + totalPrice);
// Use typeof to determine types of fields
console.log("Type of 'name':", typeof groceryStore.name);
console.log("Type of 'products':", typeof groceryStore.products);
console.log("Type of 'orders':", typeof groceryStore.orders);
// Display JavaScript output in the Jupyter Notebook cell
element.text("JavaScript code executed. Check the browser console for output.");
<IPython.core.display.Javascript object>