JavaScript
Title
Question
<span style="color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">Why JavaScript?</span>
JavaScript Overview-of-JavaScript 00-01 min 10-20 sec
Answers:
<span <span style="background-color: rgb(250, 250, 250);">style="color: rgb(51, 51, 51); font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"</span>>
JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.
</span>
<span style="background-color: rgb(250, 250, 250);">JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.</span>
<span style="background-color: rgb(250, 250, 250);">
</span>
</span>
Correct! JavaScript makes web pages dynamic and interactive using events and objects.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Add Comment — JavaScript Example</title>
<style>
:root {
--bg: #fafafa;
--card: #ffffff;
--muted: #6b7280;
--accent: #2563eb;
--border: #e6e9ef;
--shadow: 0 6px 20px rgba(32,33,36,0.06);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body {
background: linear-gradient(180deg, var(--bg), #fff);
margin: 24px;
color: #111827;
-webkit-font-smoothing:antialiased;
}
.container {
max-width: 820px;
margin: 0 auto;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
box-shadow: var(--shadow);
}
.original {
background: #fff;
border-radius: 8px;
padding: 12px;
border: 1px dashed #e0e6f0;
margin-bottom: 12px;
white-space: pre-wrap;
}
.meta {
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
}
.controls {
display:flex;
gap:8px;
align-items:center;
margin-bottom:14px;
flex-wrap:wrap;
}
select, button, input[type="checkbox"] + label {
font-size:14px;
}
select, .btn {
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: white;
}
.btn {
cursor:pointer;
background: linear-gradient(180deg, #fff, #f8fbff);
box-shadow: 0 2px 6px rgba(16,24,40,0.04);
border-color: rgba(37,99,235,0.12);
color: var(--accent);
}
.comment-list {
margin-top: 12px;
display:flex;
flex-direction:column;
gap:10px;
}
.comment {
border-left: 3px solid #cfe0ff;
padding: 10px 12px;
background: linear-gradient(180deg,#ffffff,#fbfdff);
border-radius:8px;
}
.comment .by {
font-weight:600;
font-size:13px;
}
.comment .time {
font-size:12px;
color:var(--muted);
margin-left:8px;
font-weight:400;
}
.comment .text {
margin-top:6px;
font-size:15px;
}
.small {
font-size:13px;
color:var(--muted);
}
footer.note {
margin-top:14px;
font-size:13px;
color:var(--muted);
text-align:center;
}
@media (max-width:520px){
.controls { flex-direction:column; align-items:stretch; }
.controls > * { width:100%; }
}
</style>
</head>
<body>
<main class="container">
<h1 style="font-size:20px;margin-bottom:12px">Add a comment — example</h1>
<section class="card" aria-labelledby="origTitle">
<h2 id="origTitle" class="small" style="margin:0 0 8px 0">Original text (selected):</h2>
<div class="original" id="originalText" role="article" aria-label="Original text">
<span style="background-color: rgb(250, 250, 250);">JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.</span>
<span style="background-color: rgb(250, 250, 250);">
</span>
26-07-25, 11:50 a.m. siya12032008
</div>
<div class="meta">Choose comment style and click <strong>Add comment</strong>.</div>
<div class="controls" role="region" aria-label="Comment controls">
<label for="style" class="small">Comment style:</label>
<select id="style" aria-label="Choose comment style">
<option value="short">Short — one line</option>
<option value="detailed">Detailed — paragraph</option>
</select>
<label style="display:flex;align-items:center
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Add Comment — JavaScript Example</title>
<style>
:root {
--bg: #fafafa;
--card: #ffffff;
--muted: #6b7280;
--accent: #2563eb;
--border: #e6e9ef;
--shadow: 0 6px 20px rgba(32,33,36,0.06);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body {
background: linear-gradient(180deg, var(--bg), #fff);
margin: 24px;
color: #111827;
-webkit-font-smoothing:antialiased;
}
.container {
max-width: 820px;
margin: 0 auto;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
box-shadow: var(--shadow);
}
.original {
background: #fff;
border-radius: 8px;
padding: 12px;
border: 1px dashed #e0e6f0;
margin-bottom: 12px;
white-space: pre-wrap;
}
.meta {
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
}
.controls {
display:flex;
gap:8px;
align-items:center;
margin-bottom:14px;
flex-wrap:wrap;
}
select, button, input[type="checkbox"] + label {
font-size:14px;
}
select, .btn {
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: white;
}
.btn {
cursor:pointer;
background: linear-gradient(180deg, #fff, #f8fbff);
box-shadow: 0 2px 6px rgba(16,24,40,0.04);
border-color: rgba(37,99,235,0.12);
color: var(--accent);
}
.comment-list {
margin-top: 12px;
display:flex;
flex-direction:column;
gap:10px;
}
.comment {
border-left: 3px solid #cfe0ff;
padding: 10px 12px;
background: linear-gradient(180deg,#ffffff,#fbfdff);
border-radius:8px;
}
.comment .by {
font-weight:600;
font-size:13px;
}
.comment .time {
font-size:12px;
color:var(--muted);
margin-left:8px;
font-weight:400;
}
.comment .text {
margin-top:6px;
font-size:15px;
}
.small {
font-size:13px;
color:var(--muted);
}
footer.note {
margin-top:14px;
font-size:13px;
color:var(--muted);
text-align:center;
}
@media (max-width:520px){
.controls { flex-direction:column; align-items:stretch; }
.controls > * { width:100%; }
}
</style>
</head>
<body>
<main class="container">
<h1 style="font-size:20px;margin-bottom:12px">Add a comment — example</h1>
<section class="card" aria-labelledby="origTitle">
<h2 id="origTitle" class="small" style="margin:0 0 8px 0">Original text (selected):</h2>
<div class="original" id="originalText" role="article" aria-label="Original text">
<span style="background-color: rgb(250, 250, 250);">JavaScript is widely used in web and application development. It is event-based, interpreted, object-oriented, client-side scripting language used to develop dynamic web pages.</span>
<span style="background-color: rgb(250, 250, 250);">
</span>
26-07-25, 11:50 a.m. siya12032008
</div>
<div class="meta">Choose comment style and click <strong>Add comment</strong>.</div>
<div class="controls" role="region" aria-label="Comment controls">
<label for="style" class="small">Comment style:</label>
<select id="style" aria-label="Choose comment style">
<option value="short">Short — one line</option>
<option value="detailed">Detailed — paragraph</option>
</select>
<label style="display:flex;align-items:center
Login to add comment