JS211_CurrentDateTimeProject/main.js at master · dmcavoy631/JS211_CurrentDateTimeProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
// **THIS IS INCREDIBLY IMPORTANT THAT YOU DO BOTH SECTIONS!!! You will be doing only front-end work in 421 and you need to brush up on your HTML elements**


// ***************************
//          PART ONE
// ***************************
// Write a JavaScript program to display the current day and time, start with:
console.log(new Date)

const displayDate = () => {
  const currentDate = new Date()

  document.getElementById("display-element1").innerHTML = currentDate;
}

// Or


// Write a JavaScript program to convert a number to a string.

const toStr = () => {
  var x = document.getElementById('numStr').value;

  x = x.toString();

  document.getElementById("display-element2").innerHTML = x;
}


// Write a JavaScript program to convert a string to the number.


const toNum = () => {
  var x = document.getElementById('strNum').value;

  x = parseInt(x, 10);

  document.getElementById("display-element3").innerHTML = x;

}


// Write a JavaScript program that takes in different datatypes and prints out whether they are a:
  // * Boolean
  // * Null
  // * Undefined
  // * Number
  // * NaN
  // * String

  const whatDataType = () =>{
    var dType = document.getElementById('dataType').value;

    document.getElementById("display-element4").insertAdjacentHTML("afterend", typeof dType);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/> <p>  Type </p>");

    document.getElementById("display-element4").insertAdjacentHTML("afterend", typeof false);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/>");

    document.getElementById("display-element4").insertAdjacentHTML("afterend", typeof null);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/>");


    document.getElementById("display-element4").insertAdjacentHTML("afterend", typeof t);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/>");

    document.getElementById("display-element4").insertAdjacentHTML("afterend",typeof NaN);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/>");


    document.getElementById("display-element4").insertAdjacentHTML("afterend",typeof 150);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/>");


    document.getElementById("display-element4").insertAdjacentHTML("afterend",typeof NaN);

    document.getElementById("display-element4").insertAdjacentHTML("afterend", "<hr/>");


    document.getElementById("display-element4").insertAdjacentHTML("afterend", typeof 'Bla Bla BlA');

  }


// Write a JavaScript program that adds 2 numbers together.

const addSum = () => {
  var x = document.getElementById('num1').value;
  var y = document.getElementById('num2').value;

  result = parseInt(x) + parseInt(y);

    //  return result in html element
  document.getElementById("display-element5").innerHTML = result;

}


// Write a JavaScript program that runs only when 2 things are true.

const truthTest1 = () => {
  var t1 = document.getElementById('t1_1').value;
  var t2 = document.getElementById('t2_1').value;


  if (Boolean(t1) == true && Boolean(t2) == true) {
    document.getElementById("display-element6").innerHTML = "Both of these are TRUE";
  } else {
    document.getElementById("display-element6").innerHTML = "1 of these are not TRUE";
  }
}


// Write a JavaScript program that runs when 1 of 2 things are true.

const truthTest2 = () => {
  var t1 = document.getElementById('t1_2').value;
  var t2 = document.getElementById('t2_2').value;


  if (Boolean(t1) == true || Boolean(t2) == true) {
    document.getElementById("display-element7").innerHTML = "1 of these are TRUE";
  } else {
    document.getElementById("display-element7").innerHTML = "Both of these are FALSE";
  }
}


// Write a JavaScript program that runs when both things are not true.

const truthTest3 = () => {
  var t1 = document.getElementById('t1_3').value;
  var t2 = document.getElementById('t2_3').value;


  if (Boolean(t1) == false && Boolean(t2) == false) {
    document.getElementById("display-element8").innerHTML = "Both of these are TRUE";
  } else {
    document.getElementById("display-element8").innerHTML = "1 of these are not TRUE";
  }
}


// ***************************
//         PART TWO
// ***************************

// 1. download Live-Server by Ritwick Dey,
// 2. reload VS Code,
// 3. click the "Go Live" button
// 4. Go local host 5500 or http://127.0.0.1:5500/index.html to see your web page
// 5. Or go use the `npm start` command and navigate to localhost:8080 (ctrl + C to close)
// 6. go to `index.html`
// 7. create inputs, buttons and event listeners that render the code blocks you built above to the DOM.


// Additional Resources
// Video1: https://player.vimeo.com/video/377147232
// Video2: https://www.youtube.com/embed/bkvH28PXLWc
// Video3: https://www.youtube.com/embed/TrGI9Yki-24