Running head: DYNAMIC CLIENT-SIDE WEB PRESENTATION
1
Client-Side Dynamic Web Presentation
Name
Institution
Course
DYNAMIC CLIENT-SIDE WEB PRESENTATION
2
Question Two
The web presentation is of a simple addition calculator. CSS and HTML are utilized to
present the user with the layout on the web browser. The calculator consists of a field that shows
the result of a computation, two entry fields that capture user input values, and a button to
compute the sum. The inputs only accept numbers due to the type property, which is set to
number. Additionally, the input that displays the solution is set to read-only to ensure no value
can be entered. The click() method fires the button’s click event. It calls the calculate function,
which handles the computation. To get the values from the HTML document, I used both
getElementByID and querySelector.
The browser prefixes employed in CSS are a method to ensure that all browsers support
the features and are especially helpful when using a brand-new CSS property. They became
common after CSS3 development. In its early stages, different browser introduced numerous
properties at different times. Using prefixes in the CSS ensures the transform feature is supported
in all browsers. -webkit- offers support for Safari, iOS, Chrome, and Android browsers, -moz-
for Mozilla Firefox, -o- for opera mini, and lastly, -ms- for internet explorer.
Question Four
I employed HTML to display graphical information. Additionally, I used CSS and
Bootstrap framework to improve the organization of the visual designs into aesthetic
presentations on the web browser. Bootstrap hastened my development time since it offers a grid
system, a basic layout for components and elements, and a basic structure of the website. I was
able to add Bootstrap CSS and JavaScript using the Bootstrap Content Delivery Network.
DYNAMIC CLIENT-SIDE WEB PRESENTATION
3
Responsive design attained through bootstrap columns allows the website to shrink the
elements and content to match the screen size. Furthermore, it makes the website mobile-
friendly. Images do not become bigger than the size of the screen. The homepage consists of a
carousel that displays some of the products on the e-commerce webpage. The navigation is also
responsive and hides the links to display a hamburger menu when viewed on mobile devices.
Question Six
The website has two pages. The main sections of the website include the navigation and
footer. The navigation consists of a strip at the top of the webpage. It has a logo on the left side
and links on the left side. On the other hand, the footer consists of copyright information. These
two are similar on both pages. Consistency is vital in web design and is important in improving
the website’s useability. Other similar designs include the font, background color, and body
padding.
On the home page, I used JavaScript to generate a promotion code for the user. The user
is presented with a button which, when clicked, calls a function in JavaScript. Promotion codes
are stored in an array. The function selects a random item in the array and presents it to the user
in a p element that is populated using the innerHTML property whose key function is to either
return or set the value of an element.
