JavaScript Discussion Board Exit Ticket Project Notebook
from IPython.display import display, HTML
import json
class Person:
def __init__(self, name, comment, date_of_birth):
self.name = name
self.comment = comment
self.date_of_birth = date_of_birth
def add_comment():
# Prompt the user to enter their name, comment, and date of birth
name = input("Enter your name: ")
comment = input("Enter your comment: ")
date_of_birth = input("Enter your date of birth (YYYY-MM-DD): ")
# Create a new Person object with the provided information
person = Person(name, comment, date_of_birth)
user_list.append(person)
def generate_board():
# Display the board with name, comment, and date of birth for each person
for person in user_list:
print(f"Name: {person.name}")
print(f"Comment: {person.comment}")
print(f"Date of Birth: {person.date_of_birth}")
print()
# Create an empty list to store user comments
user_list = []
# Prompt the user to enter the number of comments
num_comments = int(input("Enter the number of comments: "))
# Loop through the number of comments and add each comment
for _ in range(num_comments):
add_comment()
# Generate and display the board with all the comments
generate_board()
# Convert the list of Person objects to JSON format
user_json = json.dumps([person.__dict__ for person in user_list], indent=4)
# Print the JSON representation of the user comments
print("\nUser JSON:\n")
print(user_json)
%%html
<!-- CSS styles for the calculator -->
<style>
/* Add some basic styling to the calculator */
.calculator {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f2f2f2;
text-align: center;
}
.result {
font-size: 20px;
margin-bottom: 10px;
color: #000;
}
.btn {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
cursor: pointer;
}
.btn.operator {
background-color: #e6b800;
color: #fff;
}
.btn.clear {
background-color: #ff704d;
color: #fff;
}
</style>
<!-- Calculator HTML structure -->
<div class="calculator">
<!-- Result display -->
<div class="result" id="result">0</div>
<table>
<!-- Number buttons -->
<tr>
<td><button class="btn" onclick="appendNumber(7)">7</button></td>
<td><button class="btn" onclick="appendNumber(8)">8</button></td>
<td><button class="btn" onclick="appendNumber(9)">9</button></td>
<td><button class="btn operator" onclick="appendOperator('+')">+</button></td>
</tr>
<tr>
<td><button class="btn" onclick="appendNumber(4)">4</button></td>
<td><button class="btn" onclick="appendNumber(5)">5</button></td>
<td><button class="btn" onclick="appendNumber(6)">6</button></td>
<td><button class="btn operator" onclick="appendOperator('-')">-</button></td>
</tr>
<tr>
<td><button class="btn" onclick="appendNumber(1)">1</button></td>
<td><button class="btn" onclick="appendNumber(2)">2</button></td>
<td><button class="btn" onclick="appendNumber(3)">3</button></td>
<td><button class="btn operator" onclick="appendOperator('*')">*</button></td>
</tr>
<!-- Clear button, zero button, and operator buttons -->
<tr>
<td colspan="2"><button class="btn clear" onclick="clearResult()">C</button></td>
<td><button class="btn" onclick="appendNumber(0)">0</button></td>
<td><button class="btn operator" onclick="appendOperator('/')">/</button></td>
</tr>
<!-- Equal button -->
<tr>
<td colspan="4"><button class="btn operator" onclick="calculate()">=</button></td>
</tr>
</table>
</div>
<!-- JavaScript code for calculator functionality -->
<script>
var result = document.getElementById("result");
var expression = "";
// Function to append a number to the expression
function appendNumber(number) {
expression += number;
//have the equation but then, add another number ontop
result.textContent = expression;
//update the result based on what was previously added ontop of it.
}
// Function to append an operator to the expression
function appendOperator(operator) {
expression += operator;
result.textContent = expression;
}
// Function to clear the result and expression
function clearResult() {
expression = "";
result.textContent = "0";
}
// Function to evaluate the expression and display the result
function calculate() {
try {
var resultValue = eval(expression);
expression = String(resultValue);
result.textContent = expression;
} catch (error) {
result.textContent = error;
}
}
</script>
Calculator Project This project is a simple calculator implemented using HTML, CSS, and JavaScript. It provides basic arithmetic operations and allows users to perform calculations interactively.
HTML Structure The calculator is built using the following HTML structure:
<div class="calculator">
<div class="result" id="result">0</div>
<table>
<!-- Number buttons -->
...
<!-- Clear button, zero button, and operator buttons -->
...
<!-- Equal button -->
...
</table>
</div>
The calculator container has a class calculator. Inside it, we have a
CSS Styling The calculator is styled using CSS. Here are the main CSS rules:
.calculator {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f2f2f2;
text-align: center;
}
.result {
font-size: 20px;
margin-bottom: 10px;
color: #000;
}
.btn {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
cursor: pointer;
}
.btn.operator {
background-color: #e6b800;
color: #fff;
}
.btn.clear {
background-color: #ff704d;
color: #fff;
}
The styles define the appearance of the calculator. The calculator class sets the width, border, padding, background color, and text alignment. The result class sets the font size, margin, and color of the result display. The btn class sets the width, height, font size, margin, and cursor of the buttons. The btn.operator class sets the background color and text color of the operator buttons. The btn.clear class sets the background color and text color of the clear button.
JavaScript Logic The calculator functionality is implemented using JavaScript. Here's the JavaScript code:
var result = document.getElementById("result");
var expression = "";
function appendNumber(number) {
expression += number;
result.textContent = expression;
}
function appendOperator(operator) {
expression += operator;
result.textContent = expression;
}
function clearResult() {
expression = "";
result.textContent = "0";
}
function calculate() {
try {
var resultValue = eval(expression);
expression = String(resultValue);
result.textContent = expression;
} catch (error) {
result.textContent = "Error";
}
}
The JavaScript code defines several functions to handle button clicks and perform calculations. The appendNumber function appends a number to the expression and updates the result display. The appendOperator function appends an operator to the expression and updates the result display. The clearResult function clears the expression and resets the result display to "0". The calculate function evaluates the expression using the eval function, updates the expression and result display with the result value, and handles any errors that may occur.