Unit 1: Web page and script development

html<!-- Scrolling college letterhead (CSS animation replaces the obsolete marquee tag) -->
<style>
  .ticker { overflow: hidden; white-space: nowrap; background: #1e3a8a; color: #fff; }
  .ticker span { display: inline-block; padding-left: 100%; animation: scroll 12s linear infinite; }
  @keyframes scroll { to { transform: translateX(-100%); } }
</style>
<div class="ticker"><span>Synetic Business School, Ludhiana — Affiliated to I.K. Gujral Punjab Technical University</span></div>

<!-- In-page navigation with fragment links -->
<nav><a href="#about">About</a> | <a href="#courses">Courses</a> | <a href="#contact">Contact</a></nav>
<h2 id="about">About</h2> ...
<h2 id="courses">Courses</h2> ...
<h2 id="contact">Contact</h2> ... <a href="#top">Back to top</a>

• Audio: <audio src="song.mp3" controls></audio>
• Video: <video src="tour.mp4" width="480" controls></video>
• Multi-frame page: a logo frame at the top, a menu on the left and content on the right — built with <frameset> in old HTML, or with <iframe> and CSS layout today.

html<table border="1" cellpadding="6" style="border-collapse: collapse">
  <caption><b>Bio-Data</b></caption>
  <tr><td rowspan="4"><img src="photo.jpg" alt="Photograph" width="110"></td>
      <th>Name</th><td>Simran Kaur</td></tr>
  <tr><th>Designation</th><td>Assistant Professor</td></tr>
  <tr><th>Qualification</th><td>M.Sc IT, UGC-NET</td></tr>
  <tr><th>Email</th><td><a href="mailto:simran@example.com">simran@example.com</a></td></tr>
  <tr><th colspan="2">Experience</th><td>6 years</td></tr>
</table>

html<link rel="stylesheet" href="hospital.css">

cssbody { font-family: Arial, sans-serif; margin: 0; }
header { background: #0b6b3a; color: white; padding: 20px; }
nav a { color: white; margin-right: 15px; text-decoration: none; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; }

html<!-- iframe-based dual display (framesets are obsolete in HTML5) -->
<div style="display:flex; gap:8px; height:90vh">
  <iframe src="page1.html" title="Page one" style="flex:1; border:1px solid #ccc"></iframe>
  <iframe src="page2.html" title="Page two" style="flex:1; border:1px solid #ccc"></iframe>
</div>

javascriptfunction validateReg() {
  const f = document.forms["reg"];
  if (!/^[0-9]{10}$/.test(f.phone.value)) { alert("Enter a 10-digit phone"); return false; }
  if (f.pwd.value !== f.cpwd.value) { alert("Passwords do not match"); return false; }
  return true;
}

html<input id="a" type="number"> <input id="b" type="number"> <input id="c" type="number">
<button onclick="calc()">Run</button> <pre id="out"></pre>
<script>
function calc() {
  const a = +document.getElementById("a").value,
        b = +document.getElementById("b").value,
        c = +document.getElementById("c").value;
  let s = `Sum ${a + b}, Difference ${a - b}, Product ${a * b}, Quotient ${b ? (a / b).toFixed(2) : "undefined"}\n`;
  s += `Greatest of three: ${Math.max(a, b, c)}\n`;
  const d = b * b - 4 * a * c;                        // treat a, b, c as coefficients
  if (a === 0) s += "Not a quadratic equation";
  else if (d >= 0) s += `Roots: ${((-b + Math.sqrt(d)) / (2 * a)).toFixed(2)}, ${((-b - Math.sqrt(d)) / (2 * a)).toFixed(2)}`;
  else s += `Complex roots: ${(-b / (2 * a)).toFixed(2)} ± ${(Math.sqrt(-d) / (2 * a)).toFixed(2)}i`;
  document.getElementById("out").textContent = s;
}
</script>

javascriptfunction grade(marks) {                      // marks: array of five subject marks
  const avg = marks.reduce((s, m) => s + m, 0) / marks.length;
  const g = avg >= 90 ? "O" : avg >= 75 ? "A" : avg >= 60 ? "B" : avg >= 40 ? "C" : "F";
  return `Average ${avg.toFixed(1)} — Grade ${g}`;
}
console.log(grade([78, 85, 91, 66, 72]));      // Average 78.4 — Grade A

html<input id="disp" readonly>
<div id="keys"></div>
<script>
const keys = ["7","8","9","/","sin","4","5","6","*","cos","1","2","3","-","tan",
              "0",".","(",")","+","sqrt","log","^","C","="];
const disp = document.getElementById("disp");
for (const k of keys) {
  const b = document.createElement("button"); b.textContent = k;
  b.onclick = () => {
    if (k === "C") disp.value = "";
    else if (k === "=") {
      try {
        const expr = disp.value.replace(/sin|cos|tan|sqrt|log/g, f => "Math." + (f === "log" ? "log10" : f))
                               .replace(/\^/g, "**");
        if (!/^[0-9+\-*/().\s Mathsincotaqrlg]*$/.test(expr)) throw "bad";
        disp.value = Function(`"use strict"; return (${expr})`)();
      } catch { disp.value = "Error"; }
    } else disp.value += ["sin","cos","tan","sqrt","log"].includes(k) ? k + "(" : k;
  };
  document.getElementById("keys").appendChild(b);
}
</script>

• Trigonometric functions use radians. The whitelist check stops arbitrary code from being run.

javascriptconst n = parseInt(prompt("Enter a number"), 10);
document.write(`${n} is ${n % 2 === 0 ? "even" : "odd"}<br>`);

let prime = n > 1;
for (let i = 2; i * i <= n; i++) if (n % i === 0) { prime = false; break; }
document.write(`${n} is ${prime ? "" : "not "}prime<br>`);

for (let i = 1; i <= 10; i++) document.write(`${n} × ${i} = ${n * i}<br>`);

let f = 1n;                                   // BigInt for large factorials
for (let i = 2n; i <= BigInt(n); i++) f *= i;
document.write(`${n}! = ${f}<br>`);

let a = 0, b = 1, series = [];
for (let i = 0; i < n; i++) { series.push(a); [a, b] = [b, a + b]; }
document.write("Fibonacci: " + series.join(", "));