Advance Computer Programming

Assignment. 2

Submitted By
Muhammad Faheem (18836)

Submitted To
Ali Haider

BS (IT)
6th Semester
Spring-2022

Riphah International University,

Faisalabad Campus
 Lab task – 1 (Change text, color and size)

• Using HTML add a text in paragraph tag <P>

• Assign display none through CSS (in-line)

• Create buttons for each functionality to perform on text using javascript

• Add onclick as an attribute to each button, so 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 Color of a text, change_color 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

Complete output of Lab Task – 1

 Lab task – 2 (Bulb ON/OFF)

• Create main div known as wrapper

• Add image tag and button in the main div

• Apply CSS on main wrapper div to center image, also style button and background
color
 • Now for OFF/ON functionality add onclick attribute to call javascript function
• In javascript add if/else condition to change button state and it’s functionality of
ON/OFF

Complete output of Lab Task – 2

 Lab task – 3 (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, such as heading, buttons and
field

• To perform calculations using javascript, first create a variable to store clicked button
values
• Create another variable to access all buttons using their class throung 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
Complete output of Lab Task – 3
 Lab task – 4 (Clock - Alarm)

• 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
Complete output of Lab Task – 3