Week 14: Interface & Application Programming
Objectives
- Individual Assignment
- Group Assignment
Group Assignment
Individual Assignment
Training
Using Java Script to perform Document Object Model (DOM) Maniupulation
First our instructor, Midlaj helped us undertand how to use Javascript. I learnt to use document.getElementById and .addEventListener able to use Java script to use buttons and for updating text in real time as shown here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</head>
<body>
<h1>My name is
<p id="Hello">
<input id="type" placeholder="Enter your name">
<button id="button">Click Here
<script>
const button = document.getElementById('button');
const type = document.getElementById('type');
const Hello = document.getElementById('Hello');
const name= document.getElementById('name');
button.addEventListener('click', function(Clicktext){
Hello.textContent='Hello There';
});
type.addEventListener('input', function(Update){
name.textContent=type.value;
const nameLen = name.textContent.length;
if (nameLen>=5 && nameLen<=10){
name.style.color="red";
}
else if (nameLen>10){
name.style.color="blue";
}
else{
name.style.color="black";
}
})
</script>
</body>
</html>
To speed up my process of learning, I used the help of ChatGPT
Prompt 1: Explain this code to me
This HTML/JavaScript code creates an interactive webpage that displays a header saying "My Name is <name>", which updates in real time as the user types their name into a textbox. Additionally, the color and font size of the name changes based on the length of the input.
Key Features:
<input>: Allows user input of a name.<span id="name">: Dynamically updates to show the name.- Real-time event listener for
inputevents: Changes the text and its style based on length.
Dynamic Styling Logic:
- Length > 10 → Red color, font size 2em
- Length > 5 → Black color, font size 1em
- Length ≤ 5 → Green color, font size 1.5em
Prompt 2: What do you call this type of DOM?
This is an example of DOM manipulation using JavaScript, specifically:
- Event-driven DOM updates: Reacting to user input events to update HTML elements.
- Real-time DOM updates: Dynamically modifying element properties (text, color, font size) based on input.
To search for tutorials, use terms like: "JavaScript DOM manipulation", "real-time input handling in JavaScript", "interactive HTML with JS".
Prompt 3: Explain const inputValue = inputBox.value;
This line gets the current value from the input box and stores it in the variable inputValue:
inputBoxis the input element (referenced withgetElementById)..valuegets the current text typed by the user.const inputValuestores that value into a new variable.
It's commonly used in event listeners to grab user input in real-time.
Prompt 4: else if (nameLen > 5 && < 9)
This code is syntactically incorrect. You must repeat the variable after each comparison operator.
❌ Wrong:
else if (nameLen > 5 && < 9)
✅ Correct:
else if (nameLen > 5 && nameLen < 9)
JavaScript requires complete expressions on both sides of logical operators.
Prompt 5: Problem in this code
In the code you shared, everything works except one minor inefficiency:
Line:
const nameLen = nameSpan.textContent;
This stores the entire text content (a string), not the length.
Fix:
const nameLen = nameSpan.textContent.length;
This ensures you're comparing the actual number of characters, not a string object.
Prompt 6: What is the error here?
❌ Error: Variable Shadowing
button.addEventListener('click', function(Hello) {
Hello.textContent = 'Hello There';
});
Here, Hello is used both as a variable (the <p> element) and a function parameter (event object).
✅ Fix:
button.addEventListener('click', function(event) {
Hello.textContent = 'Hello There';
});
⚠️ Also recommended:
Don't use name as a variable name, as it's a global browser property. Use nameSpan instead to avoid bugs.
Connecting to ESP32 via Web Serial
Using the Sensor
Pinouts and how to use it
Designing the Output Device
Document any new features
Schematic
Document any new features
PCB Designing
Document any new features
Making the PCB
Milling
Bill of Materials
Soldering
Verification
Using the Microscope
Using the Benchtop Power Supply
Using the Blink program
Programming
Program 1:
Conclusion
Mistakes & Solutions
Add Mistakes only in Mistakes and Solutions section to avoid break in flow
References
References to help reader understand in detail
Look at previous year documentation
Design Files
Click here to access the design files