├── index.html
├── myscript.js
└── mystyle.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Day of the week
8 |
9 |
10 |
11 |
12 |
13 |
Today is :
14 |
15 | Display day of the week.
16 | Display a quote
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/myscript.js:
--------------------------------------------------------------------------------
1 | var d = new Date();
2 | var weekday = new Array(7);
3 | weekday[0]= "Sunday";
4 | weekday[1] = "Monday";
5 | weekday[2] = "Tuesday";
6 | weekday[3] = "Wednesday";
7 | weekday[4] = "Thursday";
8 | weekday[5] = "Friday";
9 | weekday[6] = "Saturday";
10 |
11 | var date2 = new Date();
12 | var weekday2 = new Array(7);
13 | weekday2[0]= "Time to chillax!";
14 | weekday2[1] = "Monday morning blues!";
15 | weekday2[2] = "Taco Time!";
16 | weekday2[3] = "Two more days to the weekend.";
17 | weekday2[4] = "The weekend is almost here...";
18 | weekday2[5] = "Weekend is here!";
19 | weekday2[6] = "Time to party!.";
20 |
21 | var n = weekday[d.getDay()];
22 | var n2 = weekday2[date2.getDay()];
23 |
24 | var displayWeekday = document.getElementById('weekday');
25 | var phrase = document.getElementById('phrase');
26 |
27 | whatDayIsIt();
28 |
29 | function whatDayIsIt() {
30 |
31 | displayWeekday.innerText = n ;
32 | phrase.innerText = n2;
33 |
34 | }
--------------------------------------------------------------------------------
/mystyle.css:
--------------------------------------------------------------------------------
1 |
2 | body {
3 | font-family:Helvetica, Arial, sans-serif;
4 | margin: 50px;
5 | background:#fff;
6 | }
7 |
8 |
9 | #container {
10 |
11 | width:650px;
12 | height:350px;
13 | background-color: #00ffff;
14 | margin:auto; /* This centers block elements like divs */
15 | border-radius: 30px;
16 |
17 | }
18 | h1 {
19 | font-size: 47px;
20 | font-weight: 600px;
21 | color:#fff;
22 | text-transform:uppercase;
23 | margin-bottom:20px;
24 | margin-left: 170px;
25 | background:#0000ff;
26 | padding: 10px;
27 | border-radius: 5px;
28 | display:inline-block;
29 | }
30 |
31 | #weekday {
32 | font-size: 80px;
33 | color:#dd5800;
34 | font-weight: 800px;
35 | margin-left: 170px;
36 | }
37 |
38 | #phrase {
39 | font-size: 40px;
40 | color:#0000ff;
41 | font-weight: 800;
42 | margin-left: 170px;
43 | }
--------------------------------------------------------------------------------