· 4 months ago · May 28, 2025, 02:50 AM
1EXTRA QUESTIONS:
2(table creation using img)
3<!DOCTYPE html>
4<html lang="en">
5<head>
6<meta charset="UTF-8">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<title>Invoice</title>
9<style>
10table {
11width: 100%;
12border-collapse: collapse;
13font-family: Arial, sans-serif;
14}
15th, .heading-cell {
16font-weight: bold;
17background-color: #f2f2f2;
18}
19td, th {
20padding: 8px;
21border: 1px solid #ddd;
22text-align: left;
23}
24.right-align {
25text-align: right;
26}
27</style>
28</head>
29<body>
30<table>
31<tr>
32<td class="heading-cell" colspan="2">Invoice #123456789</td>
33<td class="heading-cell" colspan="2">14 January 2025</td>
34</tr>
35<tr>
36<td class="heading-cell" colspan="2">Pay to:</td>
37<td class="heading-cell" colspan="2">Customer:</td>
38</tr>
39<tr>
40<td colspan="2">Acme Billing Co.<br>123 Main St.<br>Cityville, NA 12345</td>
41<td colspan="2">John Smith<br>321 Willow Way<br>Southeast Northwesternshire,
42MA 54321</td>
43</tr>
44<tr>
45<th>Name / Description</th>
46<th>Qty.</th>
47<th>@</th>
48<th>Cost</th>
49</tr>
50<tr>
51<td>Paper clips</td>
52<td>1000</td>
53<td>0.01</td>
54<td>10.00</td>
55</tr>
56<tr>
57<td>Staples (box)</td>
58<td>100</td>
59<td>1.00</td>
60<td>100.00</td>
61</tr>
62<tr>
63<td class="heading-cell" colspan="3">Subtotal</td>
64<td>110.00</td>
65</tr>
66<tr>
67<td class="heading-cell" colspan="3">Tax</td>
68<td>8.80</td>
69</tr>
70<tr>
71<td class="heading-cell" colspan="3">Grand Total</td>
72<td>$ 118.80</td>
73</tr>
74</table>
75</body>
76</html>
77```
78
79
80
81(upper and lower case)
82<!DOCTYPE html>
83<html lang="en">
84<head>
85 <meta charset="UTF-8">
86 <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
87 <title>Document</title>
88</head>
89<body>
90 <input type="text" id="inputString">
91 <button onclick="changeCase()">submit</button>
92 <p id="output"></p>
93 <script>
94 function changeCase(){
95 const inputString=document.getElementById("inputString").value;
96 let result='';
97 for(let i=0;i<inputString.length;i++){
98 const char=inputString[i];
99 if(char===char.toUpperCase()){
100 result+=char.toLowerCase();
101 }
102 else if(char===char.toLowerCase()){
103 result+=char.toUpperCase();
104 }
105 else{
106 result+=char;
107 }
108 }
109 document.getElementById('output').textContent=result;
110 }
111 </script>
112</body>
113</html>
114
115
116
117
118(new 2 cells adding)
119<!DOCTYPE html>
120<html lang="en">
121<head>
122 <meta charset="UTF-8">
123 <meta name="viewport" content="width=device-width, initial-scale=1.0">
124 <title>Document</title>
125 <style>
126 body {
127 font-family: Arial, sans-serif;
128 padding: 20px;
129 }
130
131 table {
132 border-collapse: collapse;
133 width: 50%;
134 margin-bottom: 20px;
135 }
136
137 td {
138 border: 1px solid #333;
139 padding: 10px;
140 text-align: center;
141 transition: background-color 0.3s ease;
142 cursor: pointer;
143 }
144
145 button {
146 padding: 10px 20px;
147 font-size: 16px;
148 background-color: #4CAF50;
149 color: white;
150 border: none;
151 border-radius: 6px;
152 cursor: pointer;
153 }
154
155 button:hover {
156 background-color: #45a049;
157 }
158
159 #display {
160 margin-top: 20px;
161 font-size: 18px;
162 font-weight: bold;
163 color: #333;
164 }
165 </style>
166</head>
167<body>
168 <table>
169 <tr id="table1">
170 <td>Column1</td>
171 <td>Column2</td>
172 </tr>
173 </table>
174 <button id="btn1">Add Row</button>
175 <div id="display"></div>
176 <script>
177 document.getElementById('btn1').addEventListener('click', function() {
178 const table = document.querySelector('table');
179 const newRow = table.insertRow();
180
181 for (let i = 0; i < 2; i++) {
182 const cell = newRow.insertCell();
183 const randomNum = Math.floor(Math.random() * 200) + 1;
184 cell.textContent = randomNum;
185
186 cell.addEventListener('mouseover', function () {
187 const value = parseInt(this.textContent);
188 this.style.backgroundColor = (value % 2 === 0) ? "blue" : "pink";
189 });
190
191 cell.addEventListener('mouseout', function () {
192 this.style.backgroundColor = "";
193 });
194
195 cell.addEventListener('click', function () {
196 document.getElementById('display').textContent = this.textContent;
197 });
198 }
199 });
200 </script>
201</body>
202</html>
203
204
205
206
207<!DOCTYPE html>
208<html lang="en">
209<head>
210<meta charset="UTF-8">
211<meta name="viewport" content="width=device-width, initial-scale=1.0">
212<title>Academic Table</title>
213<style>
214table {
215border-collapse: collapse;
216width: 100%;
217font-family: Arial, sans-serif;
218margin: 20px 0;
219}
220th {
221color: red;
222font-weight: bold;
223border: 1px solid #ddd;
224padding: 8px;
225text-align: left;
226}
227td {
228color: blue;
229border: 1px solid #ddd;
230padding: 8px;
231}
232tr:hover td {
233background-color: #f5f5f5;
234}
235/* Special styling for merged cells */
236.merged-row {
237border-top: none;
238}
239</style>
240</head>
241<body>
242<table>
243<thead>
244<tr>
245<th>Sno</th>
246<th>Course</th>
247<th>Subject</th>
248<th colspan="2">Marks</th>
249<th>Category</th>
250</tr>
251<tr>
252<td></td>
253<td></td>
254<td></td>
255<th>Internal</th>
256<th>External</th>
257<td></td>
258</tr>
259</thead>
260<tbody>
261<tr>
262<td>1</td>
263<td>BTech(CSE)</td>
264<td>Fun with Game Design</td>
265<td>30</td>
266<td>70</td>
267<td rowspan="2"></td>
268</tr>
269<tr class="merged-row">
270<td></td>
271<td></td>
272<td>Fun with Programming</td>
273<td>30</td>
274<td></td>
275</tr>
276</tbody>
277</table>
278</body>
279</html>
280
281
282
283<!DOCTYPE html>
284<html lang="en">
285<head>
286 <meta charset="UTF-8" />
287 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
288 <title>Simple Registration</title>
289 <style>
290 .error {
291 color: red;
292 font-size: 0.9em;
293 }
294 </style>
295</head>
296<body>
297 <form id="form">
298 <input id="username" placeholder="Username">
299 <div id="usernameError" class="error"></div><br>
300
301 <input id="password" type="password" placeholder="Password">
302 <div id="passwordError" class="error"></div><br>
303
304 <input id="confirmPassword" type="password" placeholder="Confirm Password">
305 <div id="confirmPasswordError" class="error"></div><br>
306
307 <input id="email" type="email" placeholder="Email">
308 <div id="emailError" class="error"></div><br>
309
310 <!-- Button type is "button" to prevent form from auto-submitting -->
311 <button type="button" onclick="validate()">Register</button>
312 </form>
313
314 <script>
315 function validate() {
316 // Get input values from the form
317 const u = username.value.trim(); // Trim spaces from username
318 const p = password.value; // Password value
319 const cp = confirmPassword.value; // Confirm password value
320 const em = email.value; // Email value
321
322 let valid = true; // This tracks if all fields are valid
323
324 // Username must not be empty
325 if (!u) {
326 usernameError.textContent = 'Username is required';
327 valid = false;
328 }
329
330 // Password must be at least 6 characters
331 if (p.length < 6) {
332 passwordError.textContent = 'Password must be at least 6 chars';
333 valid = false;
334 }
335
336 // Password and confirm password must match
337 if (p !== cp) {
338 confirmPasswordError.textContent = 'Passwords do not match';
339 valid = false;
340 }
341
342 // Email must include "@" and "."
343 if (!em.includes('@') || !em.includes('.')) {
344 emailError.textContent = 'Invalid email';
345 valid = false;
346 }
347
348 // If all checks passed
349 if (valid) {
350 alert('Registration successful!');
351 // Optionally submit the form here
352 // document.getElementById('form').submit();
353 }
354 }
355 </script>
356</body>
357</html>
358
359
3601st part:
361function bizzFizz() {
362const result = [];
363for (let i = 1; i <= 100; i++) {
364if (i % 3 === 0 && i % 5 === 0) {
365result.push("BizzFizz");
366} else if (i % 3 === 0) {
367result.push("Bizz");
368} else if (i % 5 === 0) {
369result.push("Fizz");
370} else {
371result.push(i);
372}
373}
374return result;
375}
376// Usage:
377const bizzFizzArray = bizzFizz();
378console.log(bizzFizzArray);
379
3802nd part:
381<!DOCTYPE html>
382<html>
383 <style>
384 #output{
385 margin: 20%;
386 padding: 20px;
387 display: flex;
388 justify-content: center;
389 align-items: center;
390 font-size: x-large;
391 border: 1px solid;
392 height: 150px;
393 width: 250px;
394 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
395 }
396 </style>
397<body>
398 <h2>Grade Ranges</h2>
399 <div id="output"></div>
400
401 <script>
402 const students = [
403 { grade: 45 }, { grade: 36 }, { grade: 42 },
404 { grade: 35 }, { grade: 25 }, { grade: 22 }, { grade: 20 }
405 ];
406
407 const count = { '0-20': 0, '21-30': 0, '31-40': 0, '41-50': 0 };
408
409 students.forEach(s => {
410 if (s.grade <= 20) count['0-20']++;
411 else if (s.grade <= 30) count['21-30']++;
412 else if (s.grade <= 40) count['31-40']++;
413 else count['41-50']++;
414 });
415
416 document.getElementById("output").innerHTML =
417 Object.entries(count).map(([range, num]) => ${range}: ${num}).join("<br>");
418 </script>
419</body>
420</html>
421
422
423
424<!DOCTYPE html>
425<html>
426<head>
427 <title>Attendance</title>
428 <style>
429 table { border-collapse: collapse; width: 100%; }
430 th, td { border: 1px solid #000; padding: 6px; text-align: center; }
431 .low { background: #f88; }
432 .medium { background: #acf; }
433 .high { background: #afa; }
434 </style>
435</head>
436<body>
437
438<h2>Attendance Report</h2>
439<table>
440 <tr><th>Name</th><th>Attended</th><th>%</th></tr>
441 <tbody id="data"></tbody>
442</table>
443
444<script>
445 const students = [
446 { name: "John", attended: 25 },
447 { name: "Jane", attended: 32 },
448 { name: "Mike", attended: 30 },
449 { name: "Sarah", attended: 28 },
450 { name: "David", attended: 35 }
451 ];
452 const total = 40;
453 const table = document.getElementById('data');
454
455 students.forEach(s => {
456 let p = Math.round((s.attended / total) * 100);
457 let cls = p < 75 ? 'low' : p <= 85 ? 'medium' : 'high';
458 table.innerHTML += <tr class="${cls}"><td>${s.name}</td><td>${s.attended}</td><td>${p}%</td></tr>;
459 });
460</script>
461
462</body>
463</html>
464
465
466
467
468import React, { useState, useEffect } from 'react';
469function TimeBasedGreeting() {
470const [greeting, setGreeting] = useState('');
471useEffect(() => {
472const updateGreeting = () => {
473const now = new Date();
474const hours = now.getHours();
475if (hours >= 0 && hours < 12) {
476setGreeting('Good Morning');
477} else if (hours >= 12 && hours < 17) {
478setGreeting('Good Afternoon');
479} else if (hours >= 17 && hours < 21) {
480setGreeting('Good Evening');
481} else {
482setGreeting('Good Night');
483}
484};
485// Update greeting immediately
486updateGreeting();
487// Update greeting every minute to handle day changes
488const interval = setInterval(updateGreeting, 60000);
489return () => clearInterval(interval);
490}, []);
491return (
492<div className="greeting-app">
493<h1>{greeting}</h1>
494<p>Current time: {new Date().toLocaleTimeString()}</p>
495</div>
496);
497}
498export default TimeBasedGreeting;
499
500
501
502
503
504import React from 'react';
505import './App.css';
506function IssueTracker() {
507// Static issue data
508const issues = [
509{
510id: 1,
511title: 'Error in Login screen',
512description: 'On entry of correct password it displays incorrect password unable to login',
513status: 'Closed'
514},
515{
516id: 2,
517title: 'Server Message 200 On Error',
518description: 'Instead of 204 No content error message Message 200 Success is
519displayed',
520status: 'Open'
521},
522{
523id: 3,
524title: 'Mobile Responsiveness Issue',
525description: 'Layout breaks on mobile devices below 400px width',
526status: 'Open'
527}
528];
529return (
530<div className="issue-tracker">
531<h1>Issue Tracker</h1>
532<div className="issues-container">
533{issues.map(issue => (
534<div key={issue.id} className={issue-card ${issue.status.toLowerCase()}}>
535<h3>{issue.title}</h3>
536<p className="description">{issue.description}</p>
537<div className="status">
538Status: <span className={`status-badge
539${issue.status.toLowerCase()}`}>{issue.status}</span>
540</div>
541</div>
542))}
543</div>
544</div>
545);
546}
547export default IssueTracker;
548
549
550
551
552<!DOCTYPE html>
553<html>
554<head>
555 <title>Attendance</title>
556 <style>
557 table { border-collapse: collapse; width: 100%; }
558 th, td { border: 1px solid #000; padding: 6px; text-align: center; }
559 .low { background: #f88; }
560 .medium { background: #acf; }
561 .high { background: #afa; }
562 </style>
563</head>
564<body>
565
566<h2>Attendance Report</h2>
567<table>
568 <tr><th>Name</th><th>Attended</th><th>%</th></tr>
569 <tbody id="data"></tbody>
570</table>
571
572<script>
573 const students = [
574 { name: "John", attended: 25 },
575 { name: "Jane", attended: 32 },
576 { name: "Mike", attended: 30 },
577 { name: "Sarah", attended: 28 },
578 { name: "David", attended: 35 }
579 ];
580 const total = 40;
581 const table = document.getElementById('data');
582
583 students.forEach(s => {
584 let p = Math.round((s.attended / total) * 100);
585 let cls = p < 75 ? 'low' : p <= 85 ? 'medium' : 'high';
586 table.innerHTML += <tr class="${cls}"><td>${s.name}</td><td>${s.attended}</td><td>${p}%</td></tr>;
587 });
588</script>
589
590</body>
591</html>
592
593
594
595
596<!DOCTYPE html>
597<html>
598<body>
599 <input id="input" placeholder="Enter text">
600 <button onclick="check()">Check</button>
601 <p id="result"></p>
602
603 <script>
604 function check() {
605 // Get the input value from the text box
606 let inputValue = document.getElementById('input').value;
607
608 // Convert the input to lowercase and remove all non-alphanumeric characters
609 // This makes the check case-insensitive and ignores spaces, punctuation, etc.
610 let cleaned = inputValue.toLowerCase().replace(/[^a-z0-9]/g, '');
611
612 // Reverse the cleaned string
613 let reversed = cleaned.split('').reverse().join('');
614
615 // Compare the cleaned string with its reversed version
616 if (cleaned === reversed) {
617 // If they match, it's a palindrome
618 document.getElementById('result').textContent = 'Palindrome';
619 } else {
620 // If not, it's not a palindrome
621 document.getElementById('result').textContent = 'Not a palindrome';
622 }
623 }
624</script>
625
626</body>
627</html>
628
629
630
631
632import React, { useState } from 'react';
633function WelcomeMessage() {
634const [message, setMessage] = useState("Welcome to Dayananda Sagar");
635const handleClick = () => {
636setMessage("The best place to enjoy without time");
637};
638return (
639<div style={{ textAlign: 'center', marginTop: '50px' }}>
640<h1>{message}</h1>
641<button
642onClick={handleClick}
643style={{
644padding: '10px 20px',
645fontSize: '16px',
646backgroundColor: '#4CAF50',
647color: 'white',
648border: 'none',
649borderRadius: '5px',
650cursor: 'pointer'
651}}
652>
653Change Message
654</button>
655</div>
656);
657}
658export default WelcomeMessage;
659
660. Express.js Server (Mount Event Function)
661const express = require('express');
662const app = express();
663// Mount event middleware
664app.use((req, res, next) => {
665console.log("Teacher taught --- First Message");
666next();
667console.log("Student did not listen --- Second Message");
668});
669// Basic route
670app.get('/', (req, res) => {
671res.send('Server is running');
672});
673// Start server
674const PORT = 3000;
675app.listen(PORT, () => {
676console.log(Server listening on PORT ${PORT});
677});
678
679
680
681
682
683<!DOCTYPE html>
684<html>
685<head>
686 <title>Poem Screenshot</title>
687 <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
688 <style>
689 body { font-family: Georgia; text-align: center; background: #f9f9f9; padding: 20px; }
690 h1, h2 { text-decoration: underline; }
691 .poet { font-style: italic; margin-top: 20px; }
692 button { margin-top: 30px; padding: 10px 20px; background: #4a6fa5; color: #fff; border: none; border-radius: 4px; }
693 </style>
694</head>
695<body id="poem">
696 <h1>Poem by Sir Walter Scott</h1>
697 <h2>My Native Land</h2>
698 <p><u>Breathes</u> there the man, with soul so dead,<br>
699 Who never to himself hath said,<br>
700 This is my own, my native land!</p>
701 <div class="poet">- Sir Walter Scott</div>
702
703 <button onclick="takeScreenshot()">Take Screenshot</button>
704
705 <script>
706 function takeScreenshot() {
707 html2canvas(document.body).then(canvas => {
708 let link = document.createElement('a');
709 link.download = 'poem-screenshot.png';
710 link.href = canvas.toDataURL();
711 link.click();
712 });
713 }
714 </script>
715</body>
716</html>
717
718
719
720
721LAB PROGRAMS:
722
723<!DOCTYPE html>
724<html lang="en">
725<head>
726 <meta charset="UTF-8">
727 <meta name="viewport" content="width=device-width, initial-scale=1.0">
728 <title>Document</title>
729 <style>
730 td {
731 padding: 5px;
732 font-size: larger;
733 font-family: 'Courier New', Courier, monospace;
734 }
735 table{
736 background-origin: padding-box;
737 border: 1px outset;
738 box-shadow: 20px , 30 px;
739 }
740 </style>
741</head>
742<body>
743
744<header style="display: flex; align-items: center; justify-content: center;">
745 <img src="download.jpg" style="width: 80px; height: 100px;">
746 <div style="margin-left: 10px; text-align: center;">
747 <h1>Dayananda Sagar College Of Engineering</h1>
748 <h2>Affiliated to VTU</h2>
749 <h3>Dept of Information Science and Engineering</h3>
750 </div>
751</header>
752<hr>
753<br><br>
754
755<center>
756<h1>Course Registation </h1>
757<form action="#">
758 <table >
759 <tr>
760 <td>Std Name:</td>
761 <td><input type="text" required></td>
762 </tr>
763 <tr>
764 <td>Std USN:</td>
765 <td><input type="text" required></td>
766 </tr>
767 <tr>
768 <td>Std P.Num:</td>
769 <td><input type="number" required></td>
770 </tr>
771 <tr>
772 <td>Std Email:</td>
773 <td><input type="email" required></td>
774 </tr>
775 <tr>
776 <td>Std Sem:</td>
777 <td><input type="text" required></td>
778 </tr>
779 <tr>
780 <td>Std Section:</td>
781 <td><select style="width: 178px;">
782 <option value="" disabled selected>Select your section</option>
783 <option value="A">A</option>
784 <option value="B">B</option>
785 <option value="C">C</option>
786 </select>
787 </td>
788 </tr>
789 <tr>
790 <td>Std Subject:</td>
791 <td><select size=3 style="width: 178px;">
792 <option value="A">A</option>
793 <option value="B">B</option>
794 <option value="C">C</option>
795 </select>
796 </td>
797 </tr>
798 <tr>
799 <td>
800 <label>Fee Paid</label>
801 </td>
802 <td>
803 <input type="radio" name="yes" id="fee">Yes
804 <input type="radio" name="yes" id="fee">No
805 </td>
806 </tr>
807 </table>
808 <br>
809
810 <input type="submit" style="width: 100px;">
811 <input type="reset" style="width: 100px;">
812 </div>
813
814</form>
815</center>
816
817
818</body>
819</html>
820
821
822
823
824<!DOCTYPE html>
825<html lang="en">
826<head>
827 <meta charset="UTF-8" />
828 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
829 <title>Profile Card</title>
830 <style>
831 body {
832 margin: 0;
833 font-family: Arial;
834 display: flex;
835 justify-content: center;
836 align-items: center;
837 /* min-height: 100vh; */
838 background: #f0f0f0;
839 }
840 .card {
841 width: 80%;
842 /* max-width: 800px; */
843 background-color: antiquewhite;
844 padding: 40px;
845 box-shadow: 0 0 10px #aaa;
846 }
847 .card img {
848 width: 100px;
849 height: auto;
850 }
851 .card .p {
852 text-align: center;
853 }
854 .personal {
855 background-color: aqua;
856 margin-top: 20px;
857 padding: 10px;
858 }
859 </style>
860</head>
861<body>
862 <div class="card">
863 <div class="p">
864 <img src="download.jpg" alt="Profile Picture" />
865 <h1>Shravya S Shetty</h1>
866 <h4>Student at DSCE</h4>
867 </div>
868
869 <div class="personal">
870 <h1>Education</h1>
871 <hr />
872 <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
873 </div>
874
875 <div class="personal">
876 <h1>Education</h1>
877 <hr />
878 <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
879 </div>
880
881 <div class="personal">
882 <h1>Education</h1>
883 <hr />
884 <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
885 </div>
886
887 <div class="personal">
888 <h1>Education</h1>
889 <hr />
890 <p>Bachelor of Eng at ISE<br />DSCE<br />2022-2026</p>
891 </div>
892 </div>
893</body>
894</html>
895
896
897
898<!DOCTYPE html>
899<html>
900<head>
901 <title>Parent Teacher Meet</title>
902 <style>
903 body {
904 font-family: Arial;
905 display: flex;
906 justify-content: center;
907 align-items: center;
908 min-height: 100vh;
909 margin: 0;
910 background: #f0f0f0;
911 }
912 .card {
913 max-width: 400px;
914 background: white;
915 padding: 20px;
916 box-shadow: 0 0 10px #ccc;
917 text-align: center;
918 }
919 .card img {
920 height: 50px;
921 margin: 5px;
922 }
923 .title {
924 font-weight: bold;
925 color: white;
926 background-color: #0047ab;
927 }
928 .meeting {
929 background: #0047ab;
930 color: white;
931 padding: 10px;
932 margin: 15px 0;
933 }
934 .footer {
935 font-size: 12px;
936 margin-top: 20px;
937 }
938 </style>
939</head>
940<body>
941 <div class="card">
942 <div class="title">DAYANANDA SAGAR COLLEGE OF ENGINEERING
943 <p> Affiliated to VTU</p>
944 <p>Dept ISE</p>
945 </div>
946 <div>
947 <img src="download.jpg" alt="">
948 <img src="iiclogo.jpg" alt="">
949 <img src="images.jpg" alt="">
950 </div>
951 <div class="meeting">1st Year ISE <br> Parent Teachers Meeting</div>
952 <img src="ptm.webp" alt="Meeting" style="width:350px; height: 250px;">
953 <p><b>April 12, 2025 | 02:00 PM</b><br>Venue: ISE-308</p>
954 <div class="footer">
955 Dr. Madhura J || Prof. Bharath B C <br>
956 Dr. Annapurna P Patil || HOD<br>
957 Dr. B G Prasad || Princpial
958 </div>
959 </div>
960</body>
961</html>
962
963
964
965
966<!DOCTYPE html>
967<html>
968<head><title>Prime Factor Calculator</title></head>
969<body>
970 <h2>Prime Factor Calculator</h2>
971 <input id="n" type="number" placeholder="Enter number">
972 <button onclick="f()">Calculate</button>
973 <p id="r"></p>
974
975 <script>
976 function f() {
977 let n =document.getElementById("n").value, r = [], d = 2;
978 while (n > 1) {
979 if (n % d === 0) {
980 r.push(d);
981 n /= d; }
982 else d++;
983 }
984 document.getElementById("r").textContent = r.length ? Prime factors: ${r.join(" , ")} : "Invalid input";
985 }
986 </script>
987</body>
988</html>
989
990
991
992
993<!DOCTYPE html>
994<html>
995<head><title>Alphanumerical Sort</title></head>
996<body>
997 <h2>Alpha Numerical Sorting</h2>
998 <p>Original: <span id="original"></span></p>
999 <p>Sorted: <span id="sorted"></span></p>
1000
1001 <script>
1002 const arr = ["mango", "TuttyFruity", "Bell", "1DS22IS108", "Peanuts", "HoD", "Z", "dob", "3300", "hod", "Jack"];
1003 document.getElementById("original").textContent = arr.join(", ");
1004 document.getElementById("sorted").textContent = arr.sort((a, b) => a.localeCompare(b)).join(", ");
1005 </script>
1006</body>
1007</html>
1008
1009
1010
1011import React, { useState } from "react";
1012
1013export default function App() {
1014 const [votes, setVotes] = useState({ Akash: 0, Dhanush: 0, Srusthi: 0 });
1015 const [showVotes, setShowVotes] = useState(false);
1016
1017 const vote = (name) => {
1018 setVotes({ ...votes, [name]: votes[name] + 1 });
1019 setShowVotes(false);
1020 };
1021
1022 const total = Object.values(votes).reduce((a, b) => a + b, 0);
1023
1024 return (
1025 <div style={{ textAlign: "center", fontFamily: "Arial" }}>
1026 <h1>Voting App</h1>
1027 {Object.keys(votes).map((name) => (
1028 <div key={name} style={{ border: "1px solid #ccc", margin: 10, padding: 10 }}>
1029 <h2>{name}</h2>
1030 <p>Votes: {showVotes ? votes[name] : "-"}</p>
1031 <button onClick={() => vote(name)}>Vote</button>
1032 </div>
1033 ))}
1034 <button onClick={() => setShowVotes(true)} style={{ marginTop: 20 }}>
1035 View Votes
1036 </button>
1037 {showVotes && <p>Total Votes: {total}</p>}
1038 </div>
1039 );
1040}
1041
1042
1043
1044
1045LoginForm.js
1046import React, { useState } from 'react';
1047
1048const LoginForm = () => {
1049 const [email, setEmail] = useState('');
1050 const [password, setPassword] = useState('');
1051 const [msg, setMsg] = useState('');
1052
1053 const isValid = (pwd) =>
1054 /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%*?&]).{8,}$/.test(pwd);
1055
1056 const handleSubmit = (e) => {
1057 e.preventDefault();
1058 setMsg(
1059 isValid(password)
1060 ? 'Login successful (dummy validation).'
1061 : 'Password must be 8+ characters with uppercase, lowercase, number, and special character.'
1062 );
1063 };
1064
1065 return (
1066 <div style={{ maxWidth: 300, margin: '50px auto', fontFamily: 'Arial' }}>
1067 <h2>Login</h2>
1068 <form onSubmit={handleSubmit}>
1069 <input
1070 type="email"
1071 placeholder="Email"
1072 value={email}
1073 onChange={(e) => setEmail(e.target.value)}
1074 required
1075 style={{ width: '100%', marginBottom: 10 }}
1076 />
1077 <input
1078 type="password"
1079 placeholder="Password"
1080 value={password}
1081 onChange={(e) => setPassword(e.target.value)}
1082 required
1083 style={{ width: '100%', marginBottom: 10 }}
1084 />
1085 <button type="submit">Login</button>
1086 </form>
1087 <p style={{ color: 'red', marginTop: 10 }}>{msg}</p>
1088 </div>
1089 );
1090};
1091
1092export default LoginForm;
1093
1094App.js
1095import React from 'react';
1096import LoginForm from './LoginForm';
1097
1098function App() {
1099 return (
1100 <div>
1101 <LoginForm />
1102 </div>
1103 );
1104}
1105
1106export default App;
1107
1108
1109
1110
1111
1112ListDir.js
1113const fs = require('fs');
1114const path = require('path');
1115
1116function listDirectoryContents(dirPath) {
1117 try {
1118 const items = fs.readdirSync(dirPath);
1119 const result = items.map(item => {
1120 const fullPath = path.join(dirPath, item);
1121 const isDirectory = fs.statSync(fullPath).isDirectory();
1122 return {
1123 name: item,
1124 type: isDirectory ? 'directory' : 'file',
1125 path: fullPath
1126 };
1127 });
1128
1129 console.log(JSON.stringify(result, null, 2));
1130 } catch (err) {
1131 console.error('Error reading directory:', err.message);
1132 }
1133}
1134
1135const inputPath = process.argv[2] || '.';
1136listDirectoryContents(inputPath);
1137
1138#node ListDir.js "C:\Users\YourName\Documents"(output)