Technological Institute of the Philippines
938 Aurora Blvd. Cubao, Quezon City
College of Computer Studies
IT 005 – Integrative Programming and Technologies
Preliminary Period
JavaScript using HTML Forms and Functions
Name: MEDINA, LIZET D. Date: 09/09/2025
Program / Section: IT 005 - IT31S2 Instructor: Arceli F. Salo
Assessment Task: Assignment 3.1 || Control Structure
Instructions:
- Write a JS that will ask the user to enter any number, if the number entered is one the program will
alert "Today is Monday" if 2 "Today is Tuesday" etc. until 7. If the number is not from 1 to 7 the
program will alert "I LOVE YOU" using an asterisk and it will open another window with the 2x2
pictures of all members in the group. The height of lettering using an asterisk is 10. Use switch
statement.
- Use the format below. Make sure to provide 8 screenshot representing the 1 to 7 and default
output.
Requirements:
Use the code below to open another window.
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>A new window!</p>");
myWindow.blur();
}
</script>
Assessment Tool:
This assessment will be graded using the Rubric for Laboratory Performance in Web Systems and
Technologies.
Answer:
If the number entered is one the program will alert "Today is Monday".
If the number entered is 2 the program will alert "Today is Tuesday".
If the number entered is 3 the program will alert "Today is Wednesday".
If the number entered is 4 the program will alert "Today is Thursday".
If the number entered is 5 the program will alert "Today is Friday".
If the number entered is 6 the program will alert "Today is Saturday".
If the number entered is 7 the program will alert "Today is Sunday".
If the number is not from 1 to 7 the program will alert "I LOVE YOU" using an asterisk.
And it will open another window with the 2x2 pictures of all members in the group.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I LOVE YOU</title>
<style>
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(135deg, #ffd6e8, #ffe6f0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
background: #fff0f6;
padding: 25px 30px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
text-align: center;
border: 2px solid #ffb6c1;
max-width: 350px;
width: 90%;
}
h2 {
color: #ff4d88;
margin-bottom: 15px;
font-size: 22px;
}
input {
padding: 10px;
font-size: 16px;
width: 80%;
margin-top: 10px;
border-radius: 8px;
border: 2px solid #ff99c8;
text-align: center;
outline: none;
transition: all 0.3s;
}
input:focus {
border-color: #ff4d88;
box-shadow: 0 0 6px rgba(255, 77, 136, 0.5);
}
button {
padding: 10px 18px;
font-size: 16px;
margin-top: 15px;
background-color: #ff4d88;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #e63972;
transform: scale(1.05);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: #fff0f6;
border: 2px solid #ff99c8;
border-radius: 15px;
padding: 20px;
text-align: center;
max-width: 1000px;
box-shadow: 0 4px 15px rgba(255,105,180,0.4);
animation: pop 0.3s ease;
max-height: 400px;
overflow-y: auto;
}
.modal-content h3 {
color: #ff4d88;
margin-bottom: 10px;
}
.close-btn {
margin-top: 10px;
padding: 8px 15px;
background: #ff4d88;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
.close-btn:hover {
background: #e63972;
}
@keyframes pop {
from { transform: scale(0.7); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
#modalMessage {
white-space: pre;
font-family: monospace, monospace;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<h2>Enter a Number (1 - 7)</h2>
<input type="number" id="numInput" placeholder="Enter number">
<br>
<button onclick="checkDay()">♡ Submit ♡</button>
</div>
<div id="customModal" class="modal">
<div class="modal-content">
<h3 id="modalMessage"></h3>
<button class="close-btn" onclick="closeModal()">Close</button>
</div>
</div>
<script>
function checkDay() {
let num = parseInt(document.getElementById("numInput").value);
let message = "";
switch(num) {
case 1: message = "Today is Monday"; break;
case 2: message = "Today is Tuesday"; break;
case 3: message = "Today is Wednesday"; break;
case 4: message = "Today is Thursday"; break;
case 5: message = "Today is Friday"; break;
case 6: message = "Today is Saturday"; break;
case 7: message = "Today is Sunday"; break;
default:
message = drawILoveYou();
openGroupWindow();
}
showModal(message);
}
function showModal(text) {
document.getElementById("modalMessage").innerText = text;
document.getElementById("customModal").style.display = "flex";
}
function closeModal() {
document.getElementById("customModal").style.display = "none";
}
function drawILoveYou() {
const art = [
"******* *** ******** *** *** ********* *** *** ",
"******* *** ******** *** *** ********* *** *** ",
" *** *** * * ** ** ** *** *** ",
" *** *** * * * * ** *** *** ",
" *** *** * * * * ********* *** *** ",
" *** *** * * * * ********* *** *** ",
" *** *** * * * * ** *** *** ",
" *** *** * * * * ** *** *** ",
"******* ********* ******** * * ********* ************ ",
"******* ********* ******** * ********* ************ "
];
return art.join('\n');
}
function openGroupWindow() {
let myWindow = window.open("", "", "width=420,height=420");
myWindow.document.write(`
<html>
<head>
<title>Group Members</title>
<style>
body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 15px;
background: #fff0f6;
}
img {
width: 100%;
border-radius: 12px;
border: 2px solid #ff99c8;
box-shadow: 0 0 8px rgba(255, 105, 180, 0.4);
}
</style>
</head>
<body>
<img src="https://i.imgur.com/kc2CaKS.png">
<img src="https://i.imgur.com/doNfEUq.png">
</body>
</html>
`);
}
</script>
</body>
</html>
