0% found this document useful (0 votes)
22 views10 pages

JavaScript and HTML Coding Solutions

Uploaded by

Abdul Rehman
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views10 pages

JavaScript and HTML Coding Solutions

Uploaded by

Abdul Rehman
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

SECTION A (24 Marks)

Solution of PBA Class X (Other School / College)


Question No. 1 [10]
a. Debug and correct the following JavaScript code to print the even numbers
from 2 to 10.
<scripts>
let i = 1;
while(I > 10) {
if(I % 2 = 0);
[Link] (“Even number: “ + i)
i + 2;
}
</scrip>
Answer (Solution)
Corrected Code List of Errors Fixed:
1. HTML
<script> Tags: Changed <scripts> and </scrip> to the
let i = 2; correct <script> and </script>.
while (i <= 10) {
2. Initialization: Changed let i = 1 to let i = 2.
if (i % 2 === 0) {
[Link]("Even number: " + To print even numbers starting from 2, it is most
i); efficient to start the counter at 2.
} 3. Case Sensitivity: Changed I (capital)
i++; to i (lowercase). JavaScript is case-sensitive,
} so I was undefined.
</script> 4. Loop Condition: Changed while(I
>10) to while(i <= 10). The original condition (1
> 10) was false, so the loop would never run.
5. Comparison Operator: Changed if(I % 2 =
0) to if(i % 2 = = = 0). A single = is used for
assignment; = = = is used for comparison.
6. Punctuation: Removed the semicolon; after
the if statement. A semicolon there terminates the
logic immediately, separating it from the code that
follows.
7. Quote Marks: Changed the "smart quotes"
(“ and ”) to standard programming straight quotes
("). Smart quotes cause syntax errors.
8. Increment Logic: Changed i + 2 to i++ (or i = i
+ 1). The original code calculated a value but did
not save it back to the variable i, which would
cause an infinite loop.
 Note: I changed the increment to 1 so that
the if statement checks every number.
Alternatively, you could remove the if statement
entirely and simply do i += 2.
b. Write a JavaScript program to calculate the area and perimeter of a
rectangle. [5]
Requirements:
 Take length and width as variables (you may assume: length=8,
width=5)
 Calculate area = length x width
 Calculate perimeter = 2 x (length + width)
 Display both results using [Link]()
Answer (Solution)
Here is the JavaScript program based on our Output:
requirements.

JavaScript The area of the rectangle is: 40


The perimeter of the rectangle is: 26
// 1. Define the variables
let length = 8;
let width = 5;

// 2. Calculate the area


let area = length * width;

// 3. Calculate the perimeter


let perimeter = 2 * (length + width);

// 4. Display the results


[Link]("The area of the rectangle is:
" + area);
[Link]("The perimeter of the rectangle
is: " + perimeter);

OR
a. Write a JavaScript program to display the first 7 terms of the even numbers
series. (Term: 2, 4, 6, . . .) [5]
Answer (Solution)
Here is the JavaScript program to display the first 7 Output:
terms of the even number series.
2
4
JavaScript 6
8
10
// Loop from 1 to 7 because we need exactly 7 12
terms 14
for (let i = 1; i <= 7; i++)
{
// Multiply the loop counter by 2 to get the
even number
// i=1 -> 2, i=2 -> 4, i=3 -> 6, etc.
let evenNumber = i * 2;
[Link](evenNumber);
}
b. What will be the output of the following code? [5]
let x = 5;
let y = 3
if(x % 2 == 1 && y < x) {
[Link](“Valid”);
}
else
{
[Link] (“Invalid”);
}
Answer (Solution)
Output: Explanation:
The output of the code will be:1. Variables: x is 5 and y is 3.
2. The if condition: (x % 2 == 1 && y < x)
Valid  Part 1 (x % 2 == 1): 5 % 2 calculates the remainder of 5
divided by 2. The remainder is 1. So, 1 == 1 evaluates to True.
 Part 2 (y < x): Is 3 less than 5? This evaluates to True.
 Logical AND (&&): Since both parts are True (True && True),
the entire condition is True.
3. Result: The code executes the block inside the if statement,
printing "Valid".

Question No. 2 [10]


Design a “Personal Portfolio Webpage: using HTML. Include the following
elements:
a. Add a proper title to the page [1]

b. Header containing your name using <header> tag. [1]

c. Main content selection: [3]


 Insert a profile picture using <img>
 Add a short biography using <p>
 Add a skills list using <ul>

d. Navigation Menu with links: Home, Projects, Contact [1]

e. Add a table showing your academic record: [1]


(3 rows + 4 columns)
Answer (Solution)
Here is the complete HTML code for the Personal Portfolio Webpage.

I have added comments in the code to show exactly where each requirement (a, b, c, d, e) is met.

<!DOCTYPE html>
<html>
<head>
<!-- Requirement a: Proper title -->
<title>My Personal Portfolio</title>
<style>
/* Optional: Adding basic styling to make the table look neat */
table { border-collapse: collapse; width: 50%; }
th, td { padding: 8px; text-align: left; }
</style>
</head>
<body>

<!-- Requirement b: Header containing name -->


<header>
<h1>John Doe</h1>
</header>

<!-- Requirement d: Navigation Menu -->


<nav>
<a href="#home">Home</a> |
<a href="#projects">Projects</a> |
<a href="#contact">Contact</a>
</nav>
<hr>

<!-- Requirement c: Main content selection -->


<main>
<h3>About Me</h3>

<!-- Profile Picture -->


<!-- Note: Replace '[Link]' with the actual name of your image file -->
<img src="[Link]" alt="Profile Picture" width="150" height="150">

<!-- Short Biography -->


<p>
Welcome to my portfolio! I am a passionate student currently learning Web
Development.
I love creating clean and functional websites and solving programming
problems.
</p>

<!-- Skills List -->


<h3>My Skills</h3>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript</li>
<li>Problem Solving</li>
<li>Project Management</li>
</ul>
</main>
<hr>

<!-- Requirement e: Academic Record Table (3 rows, 4 columns) -->


<section>
<h3>Academic Record</h3>
<table border="1">
<!-- Row 1 (Header Row) -->
<tr>
<th>Degree/Level</th>
<th>Institution Name</th>
<th>Year Passed</th>
<th>Grade/CGPA</th>
</tr>
<!-- Row 2 -->
<tr>
<td>High School</td>
<td>City High School</td>
<td>2018</td>
<td>A Grade</td>
</tr>
<!-- Row 3 -->
<tr>
<td>Bachelor's</td>
<td>State University</td>
<td>2022</td>
<td>3.8 CGPA</td>
</tr>
</table>
</section>

</body>
</html>

Question No. 3 [4]


a. Write CSS code to change the text color of all headings <h1> to dark blue
Answer (Solution)
Method 1: Internal CSS (using <style> tag)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Example</title>
<style>
h1 {
color: darkblue;
}
</style>
</head>
<body>
<h1>This is a Dark Blue Heading</h1>
<h1>This is Another Dark Blue Heading</h1>
</body>
</html>
Answer (Solution)
Method 2: Using Hex Color Code
h1 {
color: #00008B; // color code of dark blue color
}
Answer (Solution)
Method 3: Using RGB Value
h1 {
color: rgb(0, 0, 139); // rgb color code
}
Answer (Solution)
Method 4: Inline CSS (applied directly to element)
<h1 style="color: darkblue;">This is a Dark Blue Heading</h1>
Answer (Solution)
Method 5: External CSS
Create a separate file called [Link]:
/* [Link] */
h1 {
color: darkblue;
}
Then link it in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a Dark Blue Heading</h1>
</body>
</html>

b. Write CSS code to add a black border and rounded corners to all images
Answer (Solution)
Method 1: Internal CSS (using <style> tag)
Here are different ways to write CSS code to add a black border and rounded corners to all
images:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Image Styling</title>
<style>
img {
border: 2px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="[Link]" alt="Image 1" width="200">
<img src="[Link]" alt="Image 2" width="200">
</body>
</html>
Answer (Solution)
Method 2: External CSS
Create a separate file called [Link]:
/* [Link] */
img {
border: 2px solid black;
border-radius: 10px;
}
Then link it in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Image Styling</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<img src="[Link]" alt="Image 1" width="200">
</body>
</html>
Answer (Solution)
Method 3: Inline CSS
<img src="[Link]" alt="Image 1" width="200" style="border: 2px solid black; border-
radius: 10px;">
Different Border and Border-Radius Variations
Thicker Border Circular Image (Perfect Round)
img { img {
border: 5px solid black; border: 3px solid black;
border-radius: 15px; border-radius: 50%;
} }
Dashed Border Dotted Border
img { img {
border: 2px dashed black; border: 2px dotted black;
border-radius: 10px; border-radius: 10px;
} }

SECTION B (16 Marks)


Question No. 4 [05]
Draw a flowchart to search a number in a list of 5 elements [5]
Answer (Solution)
Simple Text/ASCII Version (for quick drawing):
+------------------+
| START |
+------------------+

+-------------------------------+
| Input Array[5] and Target |
+-------------------------------+

i = 0

+------------+
| i < 5 ? | ---- No ----> +---------------------+
+------------+ | Print "Not Found" |
↓ Yes +---------------------+
+---------------------+ ↓
| Array[i] == Target? | --- Yes ---> +---------------------+
+---------------------+ | Print "Found" |
↓ No +---------------------+
+------------+ ↓
| i = i + 1 | <---------------------------+
+------------+

Loop
OR
Write an algorithm to find the factorial of a number using a loop [5]
Answer (Solution)
What is Factorial?
Factorial of a number n (denoted as n!) is the product of all positive integers from 1 to n.
Example:
 5! = 5 × 4 × 3 × 2 × 1 = 120
 4! = 4 × 3 × 2 × 1 = 24
 0! = 1 (by definition)
Algorithm: Factorial of a Number

Step 1: START
Step 2: Declare variables: num, factorial, i
Step 3: Read the number from user and store in num
Step 4: Check if num < 0
- If Yes, print "Factorial not possible for negative numbers"
- Go to Step 8
Step 5: Initialize factorial = 1
Step 6: Initialize i = 1
Step 7: Repeat while i <= num
a. factorial = factorial × i
b. i = i + 1
Step 8: Print factorial
Step 9: STOP

Question No. 5
Explain the difference between ASCII and UNICODE [05]
Answer (Solution)
What is ASCII? What is UNICODE?
ASCII stands for American Standard Code UNICODE stands for Universal Character
for Information Interchange. Encoding.

 Developed in 1963  Developed in 1991


 Uses 7 bits to represent characters  Uses 8, 16, or 32 bits to represent characters
 Can represent 128 characters (0 to 127)  Can represent over 1.1 million characters
 Includes English letters, digits, and basic  Includes characters from all languages
symbols worldwide
 Extended ASCII uses 8 bits (256 characters)  Supports symbols, emojis, and special
characters
Question No. 6 [06]
A business named “TechFix Solutions” provides mobile and laptop repair services
with free pick and drop. Prepare a business plan:
 Company name: TechFix Solutions
 Company’s Slogan
 Executive Summary (one line)
 Any TWO objectives
 Product specifications: (Pricing, promotion, packaging, delivery strategy)
 Potential Customers (any TWO)
Answer (Solution)
Business Plan – TechFix Solutions
Company Name: TechFix Solutions
Company’s Slogan:
"We Pick It Broken, We Drop It Fixed – Zero Hassle, 100% Trust"
OR “Your Device, Our Priority – Fixed at Your Door!”
Executive Summary (one line):
TechFix Solutions is a premium mobile & laptop repair service that offers completely free pick-up
and drop across the city with fast, reliable, and transparent repairs at unbeatable prices.
Any TWO Objectives:
1. To become the most trusted and highest customer-rated device repair brand in the city within 03
years.
2. To achieve Rs15 lak annual revenue with minimum 5000 successful repairs in the first year.
Product Specifications:
 Pricing:
– Transparent fixed pricing (displayed on website & WhatsApp)
– Mobile screen replacement starts at Rs 2000
 – Laptop repair starts at Rs 500
– No fix = No charge policy (diagnosis completely free)
 Promotion:
– "First Repair? Get Rs 300 off + Free Tempered Glass"
– "Refer & Earn Rs 200" for both referrer and referee
– Heavy social media marketing (Instagram Reels, WhatsApp Status, YouTube Shorts showing
live repairs)
 Packaging:
– Devices picked and delivered in shock-proof, branded TechFix tamper-proof boxes
– Free premium bubble wrap + sealed security tape
 Delivery Strategy:
– 100% FREE pick-up & drop service anywhere in the city
– Same-day repair & delivery possible for 70% cases
– Real-time WhatsApp tracking + live location of rider
– Evening delivery slot (6 PM – 10 PM) specially for working customers
Potential Customers (any TWO):
1. College students & young professionals (aged 18–30) who heavily depend on their phones/laptops
and want hassle-free service.
2. Busy working parents & homemakers who cannot visit repair shops and prefer doorstep service
with complete trust and safety.

You might also like