Important Notes:
You should ONLY use the language constructs we learned in the class.
If you use any construct other than what we learned in the class I
reserve the right to deduct points ranging from a couple of points to
no credit at all depending what you used.
Implement all of the below without any JavaScript library (except for
Bootstrap which should only be used for the page layout and
responsive Web).
Final exam should be done on an individual basis as other homeworks.
Any code sharing may get no credit with a disciplinary action taken.
1. You will design a 3-column web page using Bootstrap.
2. The content of your page should consist of the things you are
interested in so that you decide your title of the page, what
sections to have and so forth.
3. Use image(s) (with text wrapping them), table(s), form(s) etc on
your page with CSS styling them.
4. You will implement a brief library (a class or constructor
function) that will create a bar graph given proper data. In this
case the data will be hard coded in your JavaScript code (that is
is not coming from a database since we do not cover the server
side yet). Even though data for the bar graph are in your
JavaScript code, make no assumptions on how many bars, with
what values, etc are passed to your library, that is, write your
library as flexible as possible. The important thing is that the
data come in a specified format (in object literal notation), that
is, you are required to pass your data in object literal notation to
your class’ constructor (or your constructor function). Your data
should include the x-axis title, y-axis title, the number of bars in
the graph together with their value (y-value). . Your whole graph
should be placed in a div which you should be able to place
anywhere on your page. Use as much object-oriented JavaScript
as possible in your code to show your understanding. Do not
use canvas (Html5 element) in your implementation. A figure of
your bar graph is given at the end of this document.
5. Somewhere on your page you should have a quote of the day
sliding from left to right randomly chosen from a set of quotes of
the day repository stored on your page. Pick a location for it.
Keep this quote changing (and sliding). Implement it with
JavaScript (with no CSS animation).
6. Somewhere on your page have a questions/answers section on
how to cope with staying home during a pandemic. That is,
share your experience with others. Initially only questions
should show up with a down arrow at the beginning of it. Once
you move your mouse over one the question should show some
signs that you are on it. Clicking the mouse should expand it to
reveal the answer to that question turning the down arrow to up
arrow. Clicking on the question should shrink it all to the
question again.
7. Somewhere on your page you will a “digital clock” showing the
hour,minute and second in the 24-hour format. This clock should
be in a div. In your implementation of the clock, make sure that
its digits will consist of smaller divs that you should create
dynamically. Use an object oriented way if you can. A figure of
your clock is given at the end of this document.
A bar graph example. To create the bar graph given below (or any
other), you should pass at leas the title for the graph (Favorite type of
moive), each bar (its value, color, name [4, green, Comedy]), the yvalue
of the char (People, here you write people without any
transformation [as People] or use CSS for the transformation)
The clock.
An example of a digital clock is given
on the left. Each digit consists of at
most 7 div’s (the 8 digit) or at leat 2
div’s (the 1 digit).
Deliverables:
All your file(s) zipped with your full name should be turned in the
UBIS system by the due date and time.
İşin Yapılacağı Konum: İSTANBUL
Görevin Başlangıç Tarihi: 09-06-2020
Görevin Bitiş Tarihi: 11-06-2020
Kategori: Yazılım