0% found this document useful (0 votes)
1K views

Web Tech Codes

Web technologies codes

Uploaded by

Prajwal HM
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
1K views

Web Tech Codes

Web technologies codes

Uploaded by

Prajwal HM
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 31
outa ee20-p On Sue meee / HTM Practice program: Article(semantic tags) esse Seto Fe se ple & Run Evabite Ful screen Descriptor 7 ote my ce i le > Sane 1 coeeabgnscantas eon ¢ ote skig ee (exartnanolors wert, , @ Deshboard / Pret 20-AppDev / Stoge / Web Technologies / HTML Practice program: Table of Contents - TOC ‘Desexintion ‘Srading lew File List Compile & Run Evaluate Full screer-_-—_-Descriotion ingeximie | 16 height: 160% a7 width: 5083 48 position: Fixed; 39 overflow: scroll; 20. z-index: 1; 21 top: 8 2) B stett ( 2a left: 0; 25 background-color: #006000; y 27 aright { 28 right: 0; 23. background-color: #808080; 34 text-decoration:none; 35. color:#aasese; 36) 37 39. 40 41 ceiy Classe"split left") 2 ‘l=-FL1L the code--> 3 Cul Lde"2inks” style="1ist-style-type:none;"> “a

4s CLioca hrefartsyntax™ Ade" Link2">

¢/ 14> 46 "eattributes” ide"Link3">

a7 "Linké"»

48 Link5">

9 "adva" Ad="Link6">

MTHLS AUDIO & VIDEO/p> 50 wy 1 «sai 52. cdiv classe"split right"> 53 header 5a “chasTable of Contents 55 56 col types" 57 se cul styles"List-style-type:circle;"> 59 «0 ot e n> a a> 4 6 clivep ide"syntax" >HNTLS SYNTAKC/p> 66 (ul style="list-style-typezcirele;"> eo 6s 70 n “HATLS. Elenents

n ‘LincpoHMTLS attributesc/p> a ELL ™ 1 Ab 76 n n
110 |& Dastboard / Pimer20-AppDev | Stage’ / WebTechnoogies / HTML Practice program: Chess Board Designing Descuntion ‘Sadi vew OHSS 2 45 saption{ a ‘font-family: Georgia; s ‘text-align: canter; ae ‘font-size: 26px 7 border-radius: “6px 8 padding: 5px; 2° background-color: #FFFFFE; 50 border: 3px solid #e0ses0; sib 52 53 Amput(type="button" It 54 width: 96px5 5s 56 37 38 59) 50 51 62 3 5a 5 55 CHESS-HASTERc/caption> 67 58 te 68 ed hnite_square” title=elack Rook"> 7 ee Black Knight=> n ee Black Bishop"> n etd de"Q8" classe"black Square” titlee"slack queen"> 2 5" Classa"white square” titles"Black King"> 74 classe"black square” titles"Black Bishop"> 75 Classe"unite_square” titles"Black Knight™> 76 Classe"black_aquare” titlee"Black Rook"> 7 cite 9 ct 80 ete Black Pawn"> oe ack Pown> ete titles"slack Pawn"> ete titles"Black Pawn’> ete ete ae ‘lass-"uhite square’ title-"lack Pawn> Class="black_square™ Uitle="Black Pawn> Classe"vhite_square™ title="Black Pawn"> cto ete ete white square> black_square> ee lasse*unite_square” ete elasse"black_square”> ete classe"wntte_square™> ete classe"black square" > 7 ete 98 ete 9 ces 162 101 ct 102 class="black_square"> 103 ete Classe"whitelsquare"> 164 ete clesse"black_square”> 105, ete classe"wnite_square™> 106 ete class="black square" > 197 ste Classe"unite_square”> 108 ete Classe "black _square™> 109 ete classe"white_square® > ue ee 1 nz tor 13 white _square"> na ete Classe"black_square"> us ete closse"white square" > ns ete classe"black_square™> a7 ce Classe"white_square® > ns ste elasse"black_square" ns ete Classe"wnite_square”> 120 ce classe"black square" > ra ie rr 123 cto 1a classe"black_square"> cred ee Classe"white_square" ue ete classe "black square*> wr ete classe"wnite_square™> 128 ete classe"black square” 19 ste class-"unite_square”> ae ete Classe "black_square”> 131 ce whitesquare"> 132 ces cert 134 cto Bs hnite_square’ titles"thite Pawn"> 136 lack_square” title="hhite Pawn"> 137 te LderQ82" class="uhite square” titles"white Pawn"> ae 139 ‘ete [dark2" Classe"white-square’ titlen"wite Pawn"> 140 ‘te Lde"k82" classe"black square” titlee"hhite Pawn"> 1 142 ‘te Ld="KR2" Class="black_square™ title="White Pawn"> 13 ces 14a 125, ce M6 te Ad="QRI" class="black_square” 147 ete 138 ‘te dds"Qet" clase~"black square” title~ as 158 te Ad-"Ka" Classe"black square” title-"white King"> 151 ete nite. square” title="white Blshop"s 152 ete ack_square” title="white Knight"> 133 cre nite square” title="white Rook"> 154 cee 155, 158 137 158 ctfoot ide"table_foater"> 159 10 try 161 162 td 162 ‘input types"button’ i¢ etupcard”> 164 165 187 cite 168 163 cite 178 11 174 c/eody> 175 cyntml> le ist Comple & Run — Evaluate Fullscreen Descrctior oer vugnesssegaeseeceropeuseerorees eye ieee aes sapreeesensagse) i i cogpnsnercy sansa ee a en re een) Practice program: Welcome Message Deseription code Eeitor Grading view ‘change oF delete the try/eaten block yyusleonelt re sry { //Get the First name ond lest mane using DO" functions yar Tirsthiane ~ documens.getélenentiylo( fname’ ).values var lastNene = docunert.gettlenent®)Td('Inane").velues //Oisplay the output in div with id “result” docunent.gettlenent6yId(*result").inerHTHL = "helcone " + firstiane +" " + lestWave; 2 ae} catch(err) { a socunsnt. getéLenentsyld(“result").ianar#ThL-erry 2} Se Practice program: Table Booking Decsipton Coder Grain view mm fs §# | eee = + | AT) Fyoonre change on delete she ery/eaten slack 2- Function clsplaycontimmaciontessaze0) scr i {jieplay the sueput tn Sie wien hd esate” ‘ ‘or nant = doconen grieve #14 rare). veue? ; fe Gis > emer et tlomestsitine( Sane SE Selectesiining =) a Ser Gar d= Op 2c cindogs.tengeng 400) ( a 2¥ Canines}. creces) a Selecting ~ tains] otis 5 y ~ # 3 i doconantsgetElomentyfdC‘ressle") Amer, = “HL names" yeur tale hor been bnotad bntveen + slectodTénings She) atehlor) { 8 ‘ecunent eet Elerent®TA("resule”)ednnertTML-errs Practice program: Zogy online food d gales Practice program: Strike Rate Finder Desciptin —Codeedtor——_Grangvew mma fs . [Loser Se lisse ocunare. ete lanent6yia{ nave" )-oaluey ® ‘be Runs = docunertgetelenent5/Z4(‘runs")-val ° ae Balls ~ docunentgetflonerttyZ4("ealls") values 8 oss Sk = (Rane Soi1s) 1003 B oss message = lanes “corofune Seared : “efunet “cervealis Faced : “eBallas"chrvstrie Rate: "+ se.tarieed(2); S document. getElement yid(“result)-innecH™ML = messages B+) caten(err) { HSS getetenersy2 resi") onan a} Practice program: Ugly Num ‘Bescon coseeat sieara ew [xsecene |e 0 [a] Erbe an wr ates the ty | 3 Fenceion,wscozay() ae Fe qoute f aa 16 (oun 98) * ao Lagly = ehactuplymabicecniy Ps oe 2 Chsugly? Pr ster finae 6 * 6 an tly aba 2 Fate ( FS ‘lareCnum 6 7 te 008 ae ogy: manor") = ‘ a a wente dnye = 2 ae ay | & } ae vette (muy = eee af sete fase x 6 aT net f= Se Veatci t meckughymmmers.” + eee) PESESRESEREESS Practice program: Ugly Number Description Code Editor Grading view File List ct UT ee) Full screen index.html D | script.js 0 1 k1--Do not make any change in this code template --> 6 & 9 10-
un 2 B 14 15 16 U7
20 Practice program: Alliteration Description Code Editor Grading view index.html © | script.js 0 1 a> chemb> Gl) thastivencript eves eenine saTocsaerietrerbionly 2 cody - eae di iia 5 “table icheckalliteration();return False;" a ‘ctd> label fore’ 2 20 2 {body> 22 Literbtn” volue="Check AlLitenation"> Practice program: Alliteration Description Code Editor Grading view Cre index.htm! ||" script.js © 1 J /oont change or delete the try/catch block 2 3° function checkalliteration(){ a try 5 6 _// Get the value of char & alliter components, 7 If Znvoke getcount() method - will return the nunber of words. 8 —// TF the number of words in the sentence is <3, display the corresponding output statenent in div with 9 18 —// ELSE, invoke validatesentence() method - will return true / false. 11 // IF false, display the corresponding output staterent in div with id ‘result’ 33 ——// ELSE, Invoke getscore() - will return the calculated score. 34 —_// Display the corresponding output statenent in div with id ‘result’ 45 var char ~ docunent.getelenentayrd( ‘char’ ).value.toLovercase() ; 16 var sentence = docusent.getelenentayid( 'alliter'). value. toLovercase(); a 18 var wordcount = getcount(sentence); 2 2° iF (wordcount < 2) { a ‘docunent.gete lenentaytd(“result valid number of words"; 2 return false5 3 y en 25 var isvalidsentence - validatesentence(sentence); 6 27 if (lisvalidsentence) { 28 ‘document. get lenentayrd("result").innersTil = “Invalid sentence"; 2B return false; ey x a 32 var Score = getscore(sentence, char); 35 document. getElementayrd("result").innerHT™L ="Your score is "+Scores » 35 return false; 36" eaten(err){ 7 document. getelenentayid("result").innerWTML="Function checkalliteration: =} 3} 40 ‘417 function getcount(str){ ar try 33 44 // Calculates the nunber of words in str returns the count 45 var words = str.split(" "); 46 return words. lengths 47 48-—eatch(err){ 9 docunent. getelenentsyT("result").dnnerwTmL="Function getcount: "serr3 3} sy 52 53> function validatesentence(str)< sa 55 56 57 53 53 60° 33 tet // When any word of str sterts with a vowel, retum false: else, return true var wares ~ atreeplit(" ")3 vor validCherCount = 95 for (oar 315 5 ¢ words tenth; $4) Af (worost 4J[9] toLowercase() === char) { valistharCeunt 5 ? ? 2F (woras.engtn < 3 && woras{a}(e}.toLovercase() returns feieey char) < > for (var i= Bs 4 < words.tength; i++) Af (/*[eeLouatrou}/.test(words[4][2})) ¢ ‘return Faleey y ? return trues pestencerr)¢ cocunent getELenantByte(""resuit") -innerHTML~ nction valisstesentence: * > Bar function gatScore(str, chon) a5 86 7 ta 1 ne a1 12 3 103 tryi UJ Compare the First letter of every word from str with char, calculate and retuen the score var wend ste.split(" *) e 4f{words{93(2] -tolonerCase() score = 0} returns scarey ? 11 Compare the first Letter of every word from str with char for (ver i = 1; £ < words.Jengthy ir) ¢ 4F G <3 &8 words[il [0]. toLoverCase() score == 1; } eles if (2 5 2 88 worde[i][0} toLowerCaze() --- char) // For each correct word after the rirst 3, 8 score of 2 is given score = 25 char) & > return scores deatentern){ cocunent.getELenentByte(""resuit") -innerHTML-"Function getScore: "serrs > Practice program: Concert Ticket Booking Description Code Editor Grading view Evaluate (eee Saat) CONCERThim! © concertjpgO0 | scriptjsO > Function show_value(”) { 2 document .getElenentBy Id("demo") -innecHTM"L 3} 4 57 tunction costCaleulation() { © var noof Tickets = parseint(docunent. gett lenentsyid(“noofTickets*) value); 7 var ticketType = document. gettlenentsyid(“ticketType”). value 3 var couponcode = document. getelenentsyid(“ccuponcode”) checked 9 var refreshment = docurent. getEleentByrd("refresiinent”).checked 12 var basePrice = (ticketType === "Floor") ? 4e0 : 500; 11 var total = noofTickets * baserric 12 ver discount =05 3 14 // Apply discount for more than 20 tickets 13- Af (noofTickets > 20) { 15 tote] *= 0.9; // 10% discount 7} 18 19 / Apply coupon code discount 20° — 3F (couponcode) { 2 discount - noofTickets “ bazePrice * 0.025 // 2% cizcount 22 cote] - total - discount; 2} 24 25 // Add refreshment cost 25> iF (refreshment) { 2 ‘total 4= 10% 2} 29 39 total = HMath.round(total): // Round to the nearest integer 31 document .getElenentyld("result”).innerHTML = "Your ticket charge is Rs. ° 4 total; 32. return falses 33 Practice program: Concert Ticket Booki aercapsgauaet 08 ar CGpelon veluc-Tecertnas™ Ld-coupcotes> ne ‘Gptlon velucssavente Les*cupencoaes?> 3 Sascatees us ‘tastes io ister ie “Gina ype” noressubis” Ge" wae" cnFEM SORKIN /> im ‘Mipit (pence! aons*clear" L*cheae solueseLea™ 7 Ee ty teerenntes ate is Sikes 3 ctotichetTypeceb> RA ‘Shion apeying coupon coder =t> etic Sass Sea>LOh discounts te> “dsOK discount lta Sees28 diccounee/23> ue “afoo “etd colspanad>* Vou must pay Re-1O extra on choosing Refrashnent aa isfoo eyathe ton ibe cihend Ba /nezas 65H 66 chibaqua Fish Stalle/bi>- 67>
Sas rable ide"customerberatis"> soe ets 70 a etas n Bete 7 etasphone Numbers ‘tds 6 Be- cts 81 ctéoanchovy 82 etaseinput type="number” id="anchovy" min="a" step="8.5"s in Kge/td> 83 eytr> Bay etre 85 86 etascinput type="number® id="barracuds” min="a" step="8.5"> in Kgc/td> 8? eitre Bay tres 89 etascrabe/tde se in tge/tdy a1 sftre gee tre 93 etasKing Mackerel c/ta> 24 etdo 39 etre) qer ctr, i etePrammestdy 182 18? 2BB- etry 289 stdoSandine stds ne ¢téxeinput type="number” id="sardine” min="@" step="8.5"> in Kgc/td> 1 eftre Hide tre 13 etassharkei/td» a4 ctdo in Ke us e/tre ie ctr> i? ttésTilapiac/td> nig stde in Kes/tde 118 eitre ioe 221
323 ractice program: Aqua Fis Description Code Editor Grading view’ See ay index.htmi | script.js 0 aa a 2 a3 a as 45> a7 Pr a9 se 51 s2- 33 5a 5s 56 ST Se 59 ee [bon 1 "= change or delete the try/catch black ‘{/ebug and display the message as per the description in div tag with id “result’ Var name = docunent.getélementty1d("nane") value; var phonenunber = docunent. getElement 8yid{ "phonenumber”).value; var total = getTotalAnount(}; Gocunent. get lenentlyle( “result” ). inners TH Please pay $"+total; aten(ern) { document. getéLenentaytd(*resu *) dnnerttaa- ion getotalanount() J] Debug this Javascript code to calculate the cost of fish and return the total amount ar sun = 85 ry 4F(cocunant. getelenent tyid(“anchovy") value) { sum += docunent.getElenentBy1d("anchovy").value"2; 2 4¢(docunent. getetenent Byid("barracuda"}.value) { sum += document. getElenent8yid("barracuda”) .value"55 d iF(docunent. getElenent By!d("crab").Walue) { sun += docurant. getElenentSyla("crab") . walue™ d EF(docunent. gatElenent Byid("kingnackerel”).value) { sum += document .getElenentty1d(*kingmackere1”).value'i8; 3 ‘iF (document. getelenentayid("ponfret”).value) ( sun += docunent.getElenenttyld("ponfret™).value'9; 4f (document. getElement yld("prawn”).value) { ‘aur += dscunent,getElementBy1a(*pravn”).value*3; 2 (document, getelenent8yid("salnon"). value) { sun += docunent.getElenentByld("salnon"),value"6; 3 SF(cocunant. getelenent tyid( "sardine" ) value) { sum += docunent.getElenentBy1d("sardine”).value’ d 4F(Gocument. getelenentayid("shark").value) { sum += docunent.getElenenteyid("shark" ). value"; 2 EF(docunent. getélenent #yid("titapia") value) { sun + documant.getélenentayla("tilepia”).value"a; 2 catcn(err) 4 ) funer: 4 tl i y y ‘Socument. getélenenttyld(“result”).innerHTML=err; Practice program: Factorial Number - J Description Code Editor Grading view Full screen ty index.html Q | scnpt.is 0 YT Ki--De hot make any change in this code template --> 2 3 4. chon Tang-"=n"> 5+ 8 7- 1a