Advanced Computer Programming

Assignment 2

Submitted By
Muhammad Ali (18514)

Submitted To
Ali Haider

BS (IT)
6th Semester
Spring-2023

Riphah International University,

Faisalabad Campus
 Lab Task 1
Display, Change colour, size of text

Add a html tag of <p> for text

In CSS display none

 Create buttons for each functionality to perform on text using JavaScript

 Add on click() as an attribute to each button
 when the button is clicked, function will be called from JavaScript

 For Show Text in a HTML paragraph, display text() function will be called
 Change Text of HTML paragraph, change text() function will be called
 To Change Colour of a text, change colour() function will be called
  Change Text size of html paragraph, change size function will be called
 Function contains if/else condition to get its previous size

Output:
 Lab Task 2
BULB ONN/OFF

 Create main div known as wrapper

 Add image tag and button in the main div
 Apply CSS on main wrapper div to centre image, also style button and background
  Now for OFF/ON functionality add on click() attribute to call JavaScript function
 In JavaScript add if/else condition to change button state and it’s functionality of
ON/OFF

Output:

On:
 Lab Task 3
Create a Calculator

 Create separate CSS and Javascript file and link them in head tag
 Now create parent div (main_div), add three more divs in parent div for heading,
input field and third one for calculator buttons etc • Add class Field to style input field
of calculations • Set buttons type Submit and add class btn for their styling

Now styling mentioned divs through their classes in CSS

  To perform calculations using JavaScript, first create a variable to store clicked button
values
 Create another variable to access all buttons using their class through
querySelectorAll
 Now create an array with if/else condition, so when each one of button is clicked it
will check using if/else condition to display the result

Output:
 Lab Task 4
Alarm Clock

 Create main div (wrapper) and add another child div (inner-wrapper)
 Add multiple divs like one for clock image, for heading, one div for select input fields
for hours, minutes and ap/pm and last div for set alarm button

Add styling to mentioned classes of divs such as centering main div (wrapper), background
color and set alarm button
 Now for javascript operations first take a const variable and access heading tag, select
fields and button through querySelector and two let variables to set alarm and
ringtone
 Take three for loops for hours, minutes and am/pm and apply if/else condition through
ternary operators, set the values in temporary variable to display in HTML option tag

 Calling javascript built in function setInterval as an arrow function, get hours, minutes
and seconds from built in function Date() and store their values in given variables
 Through innerText display the current time in HTML heading and in last check
alarmTime variables is set then pass true value to ringtone variable to start
Now in last call setAlarm function and apply if/else condition to check whether the alarm is
set or not, if it is set then change variable values which will display during set time and if it is
not then assign values which will be shown when its not set

Output: