Python Stuff

  • I spent like an hour on this code bellow, just to realise that I had to do a JAVASCRIPT Project.
  • I spent too much time on it to delete it though.
from IPython.display import display, HTML
import json

class Person:
    def __init__(self, name, comment):
        self.name = name
        self.comment = comment

def add_comment():
    name = input("Enter your name: ")
    comment = input("Enter your comment: ")

    person = Person(name, comment)
    user_list.append(person)

def generate_board():
    for person in user_list:
        print(f"Name: {person.name}")
        print(f"Comment: {person.comment}")
        print()

# create an empty list to store user comments
user_list = []
num_comments = int(input("Enter the number of comments: "))

for _ in range(num_comments):
    add_comment()

generate_board()

user_json = json.dumps([person.__dict__ for person in user_list], indent=4)
print("\nUser JSON:\n")
print(user_json)

Name: Amay
Comment: What is this thing?

Name: Lave
Comment: Its my python discussion board

Name: Amay
Comment: Oh cool


User JSON:

[
    {
        "name": "Amay",
        "comment": "What is this thing?"
    },
    {
        "name": "Lave",
        "comment": "Its my python discussion board"
    },
    {
        "name": "Amay",
        "comment": "Oh cool"
    }
]

First attempt: 

%%html
<h3>Enter Your Information</h3>
<div>
  <label for="name">Name:</label>
  <input type="text" id="name" placeholder="Enter your name">
</div>
<div>
  <label for="exercise">Favorite Exercise:</label>
  <input type="text" id="exercise" placeholder="Enter your favorite exercise">
</div>
<div>
  <label for="effectiveness">Why You Like It:</label>
  <input type="text" id="effectiveness" placeholder="Enter why why you like it">
</div>
<button onclick="submitData()">Submit</button>

<!-- Table to display submitted data -->
<table id="dataTable" class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Favorite Exercise</th>
      <th>Why You Like It</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  // Function to submit the entered data
  function submitData() {
    const name = document.getElementById('name').value;
    const exercise = document.getElementById('exercise').value;
    const effectiveness = document.getElementById('effectiveness').value;

    // create a new row in the table and append the entered data
    const table = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    const cell3 = newRow.insertCell(2);
    cell1.innerHTML = name;
    cell2.innerHTML = exercise;
    cell3.innerHTML = effectiveness;

    // clear the input fields
    document.getElementById('name').value = '';
    document.getElementById('exercise').value = '';
    document.getElementById('effectiveness').value = '';
  }
</script>

Enter Your Information

Name Favorite Exercise Why You Like It 
%%html
<html>
<head>
    <style>
        #outputTable {
            background-color: #353b45;
            padding: 10px;
            border: 3px solid #ccc;
            box-shadow: 0.8em 0.4em 0.4em grey;
        }
    </style>
</head>

<body>
    <table id="outputTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Favorite Physical Activity</th>
                <th>Why You Like it</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" id="nameInput"></td>
                <td><input type="text" id="exerciseInput"></td>
                <td><input type="text" id="favoriteInput"></td>
            </tr>
        </tbody>
    </table>
    <br>
    <button onclick="submitForm()">Submit</button>
</body>
</html>

<script>
function submitForm() {
    const name = document.getElementById("nameInput").value;
    const exercise = document.getElementById("exerciseInput").value;
    const favorite = document.getElementById("favoriteInput").value;

    // create new row at the end

    const outputRow = "<tr><td>" + name + "</td><td>" + exercise + "</td><td>" + favorite + "</td></tr>";
    $("#outputTable tbody").append(outputRow);

    // clear the input fields so you don't have to delete it yourself
    document.getElementById("nameInput").value = "";
    document.getElementById("exerciseInput").value = "";
    document.getElementById("favoriteInput").value = "";
}
</script>
Name Favorite Physical Activity Why You Like it

Explainations

  • Here I broke down every major portion of my code and explained it

Overall:

  • The overall program is a simple web form that allows users to input their name, favorite physical activity, and why they like it.
    • When the user clicks the "Submit" button, the submitForm function is called.

  • Inside the submitForm function, the values entered by the user are retrieved from the input fields using their respective id attributes.

    • These values are stored in the name, exercise, and favorite variables.

  • A new HTML table rows are constructed by the values from the input fields into an HTML string (outputRow).

    • Each value is wrapped in a table data element (td>). This row represents the user's input data.

  • The outputRow is appended to the tbody> of the table with the id attribute "outputTable".

    • This means the user's input data will be added as a new row in the table.

  • After appending the row, the input fields are cleared by setting their values to an empty string.

    • This prepares the form for the next input.

  • Overall, the program allows users to enter their name, favorite physical activity, and reason for liking it through the input fields.

    • When the form is submitted, the data is displayed in a table below the form. The table is dynamically updated as users submit more data.

Head and Body 

<html>
<head>
    <style>
        #outputTable {
            background-color: #353b45;
            padding: 10px;
            border: 3px solid #ccc;
            box-shadow: 0.8em 0.4em 0.4em grey;
        }
    </style>
</head>

<body>
    ...
</body>
</html>
  • This part defines the basic structure/ design of the HTML document.
    • You can see the backround color and shadow as well as the font and color for the words.

Output table 

<table id="outputTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Favorite Physical Activity</th>
            <th>Why You Like it</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="nameInput"></td>
            <td><input type="text" id="exerciseInput"></td>
            <td><input type="text" id="favoriteInput"></td>
        </tr>
    </tbody>
</table>
<br>
<button onclick="submitForm()">Submit</button>
  • Within the body section, this code defines a table with the id attribute set to "outputTable".
    • The table has a header row thead> and a body section tbody. The header row contains three columns: "Name," "Favorite Physical Activity," and "Why You Like it."
  • Inside the body section, there is a single row tr within the table body
    • contains three input fields input wrapped in td (table data) elements. Each input field has a unique id attribute: "nameInput," "exerciseInput," and "favoriteInput."
  • After the table, there's a line break br and a submit button with the onclick attribute set to "submitForm()".
    • This means that when the button is clicked, the submitForm function will be called.

Submit Form 

<script>
function submitForm() {
    const name = document.getElementById("nameInput").value;
    const exercise = document.getElementById("exerciseInput").value;
    const favorite = document.getElementById("favoriteInput").value;

    const outputRow = "<tr><td>" + name + "</td><td>" + exercise + "</td><td>" + favorite + "</td></tr>";
    $("#outputTable tbody").append(outputRow);

    // Clear input fields
    document.getElementById("nameInput").value = "";
    document.getElementById("exerciseInput").value = "";
    document.getElementById("favoriteInput").value = "";
}
</script>
  • This script defines the submitForm function.
    • When called, it retrieves the values entered in the input fields with the corresponding id attributes:
      • "nameInput," "exerciseInput,"
      • "favoriteInput."
    • These values are stored in the name, exercise, and favorite.