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

Web Tech Codes

Web technologies codes

Uploaded by

Prajwal HM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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