MIDTERM LABORATORY EXERCISE

Group Leader (LN, FN MI.): 1 Agbon, Kian L. Score:

Group Members (LN, FN 2 Bagumba, Lhenard B.

3 Cirilo, Zedric
MI.): In alphabetical Order
4 Dimaculangan, Gian

5 Efergan, Iris B.

6 Lagera, Larry Jr. P. Date:

7 Mirabel, Shannyn M.

8 Rosete, Isaiah Charles D.

9 Salvador Rod Christian C.

1 Suelo ,Christine Mae S.

0

Section: 2IT - E Instructor: Prof. Janus Raymond C. Tan Sem./ 2nd/ 22-23
A.Y.

Project Link: https://codepen.io/Gian-Dimaculangan/pen/bGxQEBo

TRAITS GRADING SCALE WEIGHT

UNSATISFACTO NEEDS GOOD EXCEPTIONAL

RY (1) IMPROVEMENT (2) (3) (4)

DOCUMENTATION There is no The documentation is The documentation The 20

documentation. simply comments consists of documentation is
embedded in the code embedded well written and
and does not help the comment and some clearly explains
reader understand the simple header what the code is
code. documentation that accomplishing and
is somewhat useful how.
in understanding
the code.

READABILITY The code is Appropriate spacing Appropriate spacing Appropriate 20

poorly organized and indentation are and indentation are spacing and
and very difficult observed in some observed in most indentation are
to read. parts of the program parts of the strictly observed,
code, and/or most program code, and and all identifiers
identifiers do not have most identifiers have descriptive
descriptive names. have descriptive names.
names.

EFFICIENCY The code is huge The code is brute The code is fairly The code is 30
and force and efficient without extremely efficient
appears to be unnecessarily long. sacrificing without sacrificing
patched readability and readability and
together. understanding. understanding.

CORRECTNESS The program The program works The program works The program 30
does not run. but may encounter but have minor works and
run-time errors or issues in some meets all of the
incorrect output in specifications. specifications.
some scenarios.
INSTRUCTION:

Create simple web application that will allow a user to enter a String in a text field and will generate the
following output in a tag with id = “pOutput” using HTML DOM:

1) Uppercase First Character of Every Word Function: UFCWord(str) – returns a new string which
changes the first character of every word to a capital letter.

Sample Test Cases:

console.log( UFCWord(“pamantasan ng cabuyao”) ); // Pamantasan Ng Cabuyao

console.log( UFCWord(“PamaNTAsan ng Cabuyao”) ); // PamaNTAsan Ng Cabuyao

2) Uppercase Last Character of Every Word Function: ULCWord(str) – returns a new string which
changes the last character of every word to a capital letter.

Sample Test Cases:

console.log( ULCWord(“pamantasan ng cabuyao”) ); // pamantasaN nG cabuyaO

console.log( ULCWord(“PamaNTAsan ng Cabuyao”) ); // PamaNTAsaN nG cabuyaO

3) Reverse the String Function: revString(str) – returns a new string which contains the reversed
sequence of characters within the String.
Sample Test Cases:

console.log( revString(“pamantasan ng cabuyao”) ); // oayubac gn nasatnamap

Assume that the user will enter a single SPACE character between words. THE CHALLENGE IS, YOU ARE
NOT ALLOWED TO USE ANY BUILT-IN JAVASCRIPT STRING FUNCTIONS TO COMPLETE THE
REQUIREMENTS. Formulate your own logic to answer the problem.

Each operation will be assigned with individual buttons for execution. Include a CLEAR button that will
clear all the contents of the fields and to allow the user to repeat the program execution. All operations
given in the bullets will be equivalent to JavaScript functions (you can use whatever type of function will
you use, either function declaration, function expression or arrow function). Use an external JavaScript file
to separate the HTML from JavaScript code. You can design your web application depending on your
choice.

IMPORTANT NOTE:

1) Use only the topics we discussed as ways to answer this problem otherwise your score will be considered
ZERO.
2) If in case there will be possible answers from the internet, make sure not to copy the code and make
your own self-made solutions. Failure to do so will mean a score of ZERO.
3) Make sure to refresh the page of the LMS before submission so that possible errors will not be
encountered.
4) All members should submit his/ her own attachment.
5) Late submissions will not be accepted.
6) No excuses related to internet connection or technical problems will be

considered.

PROGRAM CODE:
HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>String Manipulation</h1>
<input type="text" id="inputString" placeholder="Enter a string">
<div>
<button id="btnUFCWord">Uppercase</button>
<button id="btnULCWord">Lowercase</button>
<button id="btnRevString">Reverse String</button>
<button id="btnClear">Clear</button>
</div>
<p id="pOutput"></p>
<script src="script.js"></script>
</body>
</html>

CSS

body {
background-color: #899499;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: white; /* Make the text color white to contrast with the background */
}

input[type="text"] {
display: block;
margin: 0 auto;
padding: 10px;
width: 50%;
}

button {
background-color: #D3D3D3;
border: 2px solid white; /* Add a white border to make the button visible against the background */
color: black; /* Change the text color to black to contrast with the button background */
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

button:hover {
 background-color: #71797E;
}

#btnClear {
background-color: #800020;
}

#btnClear:hover {
background-color: #880808;
}

div {
text-align: center;
margin-top: 20px;
}

p{
text-align: center;
font-size: 18px;
margin-top: 20px;
color: white; /* Make the text color white to contrast with the background */

JS

// Uppercase the first character of each word in a string

function UFCWord(str) {
const words = str.split(" ");
for (let i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1);
}
return words.join(" ");
}

// Uppercase the last character of each word in a string

function ULCWord(str) {
const words = str.split(" ");
for (let i = 0; i < words.length; i++) {
const lastChar = words[i].charAt(words[i].length - 1);
words[i] = words[i].slice(0, -1) + lastChar.toUpperCase();
}
return words.join(" ");
}

// Reverse a string
function revString(str) {
let result = "";
for (let i = str.length - 1; i >= 0; i--) {
result += str.charAt(i);
}
return result;
}

// Apply the UFCWord function to the input string and display the result
const applyUFCWord = () => {
const inputString = document.getElementById("inputString").value;
const outputString = UFCWord(inputString);
document.getElementById("pOutput").innerHTML = outputString;
}
// Apply the ULCWord function to the input string and display the result
const applyULCWord = () => {
const inputString = document.getElementById("inputString").value;
const outputString = ULCWord(inputString);
document.getElementById("pOutput").innerHTML = outputString;
}

// Apply the revString function to the input string and display the result
const applyRevString = () => {
const inputString = document.getElementById("inputString").value;
const outputString = revString(inputString);
document.getElementById("pOutput").innerHTML = outputString;
}

// Clear the input field and output area

const clearInput = () => {
document.getElementById("inputString").value = "";
document.getElementById("pOutput").innerHTML = "";
}

// Attach event listeners to the buttons

document.getElementById("btnUFCWord").addEventListener("click", applyUFCWord);
document.getElementById("btnULCWord").addEventListener("click", applyULCWord);
document.getElementById("btnRevString").addEventListener("click", applyRevString);
document.getElementById("btnClear").addEventListener("click", clearInput);

PROJECT SAMPLE RUN SCREENSHOT/S WITH DESCRIPTIONS:

String Manipulation
Uppercase

When the "Uppercase" button is clicked, the applyUFCWord function is called. This function retrieves
the input string from the HTML input field with the id "inputString". It then applies the UFCWord function to the
input string, which capitalizes the first letter of each word in the string. The resulting output string is then
displayed in the HTML paragraph element with the id "pOutput".

The UFCWord function splits the input string into an array of words using the space character as a delimiter. It
then loops through each word and capitalizes the first letter of each word using the charAt() and substring()
methods. Finally, it joins the array of words back into a string using the space character as a delimiter and
returns the resulting string.

Overall, the "Uppercase" button takes an input string, capitalizes the first letter of each word, and displays the
resulting output string in the HTML paragraph element.

Lowercase

The "Lowercase" button is one of the four buttons on the webpage designed to manipulate strings.
When clicked, it triggers the applyULCWord function, which applies the ULCWord function to the input string.
The ULCWord function capitalizes the last letter of each word in the input string and returns the modified string.
Finally, the modified string is displayed in the output area on the webpage.

Reverse String
 The "Reverse String" button triggers the applyRevString() function, which takes the input string from the
text field and passes it to the revString() function. The revString() function then reverses the order of the
characters in the string using a for loop, and returns the reversed string to applyRevString(). Finally,
applyRevString() updates the output area with the reversed string. Therefore, when the "Reverse String" button
is clicked, the string entered in the input field is reversed and displayed in the output area.

Clear

The clear button resets the input field and output area, clearing any text that was entered or displayed.

Attach the PDF file (all members should turn in) as your submission in the assigned task upon
submitting using your LMS Account following the given format above. (your PDF file should begin with
the first page of the given format)