SlideShare une entreprise Scribd logo
1  sur  2
Télécharger pour lire hors ligne
<html>
<head>
<title>SQUARE PROBLEM</title>
<style>
form{color:black; background-color:purple; border:20px solid yellow;max-width:
400px;color:white;padding-right:10px;border-radius:100%;padding-left:30px;
padding-right:30px;padding-bottom:30px;font: 1.5em monospace}
label.title{outline:solid 7px yellow;color:black; background-color:yellow; float:left;
text-align:center; width:90%;border:solid yellow 10px;font-size:1.5em;margin-bottom
:5px;border-top-right-radius: 60px;border-top-left-radius: 60px;}
label.input{float:left; width:130px;color:black;margin-top:5px;color:white;margin-left:
20px}
label.output1{float:left; width:130px;color:red;}
label.output2{float:left; width:130px}
div{text-align: center;}
br{clear:both;}
.one,select{color:white;background-color:black; border:4px solid yellow; max-width:
150px; float:left;border-radius:25px;margin-top:5px;padding:4px;font:1em
monospace;}
.two{background-color:yellow; border:4px solid black; max-width:150px; float:left;
border-radius:25px;padding:4px}
.one2{background-color:red;border:4px solid black;color:white;border-radius:25px;}
.two2{border:4px solid yellow;background:black;color:lightblue;border-radius:25px;
font:1em monospace;}
</style>
</head>
<body>
<form>
<label class='title'><strong>SQUARE PROBLEM</strong></label><p>
<label class='input'><strong>Enter Side:</strong></label><input type="text" class=
'one' /><br>
<hr>
<label class='input'><strong>Area:</strong></label> <input type="text" class='one'
/><br>
<label class='input'><strong>Perimeter:</strong></label> <input type="text" class=
'one' /><br>
<hr>
<div>
<input type="button" value="Area" class='two2'/>
<input type="button" value="Perimeter" class='two2'/>
<input type="button" value="Both" onclick="both" class='two2'/><br>
<input type="button" value="Clear" class='two2' />
</div>
</form>
</body>
</html>
othenise it will be -20 for the correct square NoTE: Make sure to wse 1. Add Javascript to the
problem I the area, perineter or Both FORVULAS: Areaside'side periseter=4"side sure to make all
but tons 2. Externalize the JavaScript (10pts) 3. Externalize the CSS(10pts) SQUARE PROBLEM

Contenu connexe

Similaire à lthtmlgt ltheadgt lttitlegtSQUARE PROBLEMltti.pdf

HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219
GrezCZ
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
Yeni metin belgesi (2)
Yeni metin belgesi (2)Yeni metin belgesi (2)
Yeni metin belgesi (2)
makarnalar
 
sitecssindex.css.version.index{color#0000F2;background-colo.docx
sitecssindex.css.version.index{color#0000F2;background-colo.docxsitecssindex.css.version.index{color#0000F2;background-colo.docx
sitecssindex.css.version.index{color#0000F2;background-colo.docx
maoanderton
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.no
Hannee92
 
常用的CSS样式备份精华
常用的CSS样式备份精华常用的CSS样式备份精华
常用的CSS样式备份精华
wensheng wei
 
Css code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdfCss code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdf
aroraenterprisesmbd
 
CSS Box Model and Dimensions
CSS Box Model and DimensionsCSS Box Model and Dimensions
CSS Box Model and Dimensions
Gerson Abesamis
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
a5494535
 
Doctype html publi
Doctype html publiDoctype html publi
Doctype html publi
Eddy_TKJ
 
cssblocks.css.b_page{ width 930px; margin 0 auto; position.docx
cssblocks.css.b_page{ width 930px; margin 0 auto; position.docxcssblocks.css.b_page{ width 930px; margin 0 auto; position.docx
cssblocks.css.b_page{ width 930px; margin 0 auto; position.docx
faithxdunce63732
 

Similaire à lthtmlgt ltheadgt lttitlegtSQUARE PROBLEMltti.pdf (20)

Theme03
Theme03Theme03
Theme03
 
HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
Yeni metin belgesi (2)
Yeni metin belgesi (2)Yeni metin belgesi (2)
Yeni metin belgesi (2)
 
This is a test
This is a testThis is a test
This is a test
 
CSS Box Model
CSS Box ModelCSS Box Model
CSS Box Model
 
sitecssindex.css.version.index{color#0000F2;background-colo.docx
sitecssindex.css.version.index{color#0000F2;background-colo.docxsitecssindex.css.version.index{color#0000F2;background-colo.docx
sitecssindex.css.version.index{color#0000F2;background-colo.docx
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.no
 
常用的CSS样式备份精华
常用的CSS样式备份精华常用的CSS样式备份精华
常用的CSS样式备份精华
 
Theme01
Theme01Theme01
Theme01
 
Tmx9
Tmx9Tmx9
Tmx9
 
Xlrays online web tutorials
Xlrays online web tutorialsXlrays online web tutorials
Xlrays online web tutorials
 
Floating ad widget
Floating ad widgetFloating ad widget
Floating ad widget
 
Theme04
Theme04Theme04
Theme04
 
Css code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdfCss code for a awoko newspaper html website which provides busines.pdf
Css code for a awoko newspaper html website which provides busines.pdf
 
CSS Box Model and Dimensions
CSS Box Model and DimensionsCSS Box Model and Dimensions
CSS Box Model and Dimensions
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
 
Doctype html publi
Doctype html publiDoctype html publi
Doctype html publi
 
cssblocks.css.b_page{ width 930px; margin 0 auto; position.docx
cssblocks.css.b_page{ width 930px; margin 0 auto; position.docxcssblocks.css.b_page{ width 930px; margin 0 auto; position.docx
cssblocks.css.b_page{ width 930px; margin 0 auto; position.docx
 

Plus de adityastores21

Ltfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdf
Ltfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdfLtfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdf
Ltfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdf
adityastores21
 
Luisa Ortega naci a trmino y peso normal A las 4 semanas .pdf
Luisa Ortega naci a trmino y peso normal A las 4 semanas .pdfLuisa Ortega naci a trmino y peso normal A las 4 semanas .pdf
Luisa Ortega naci a trmino y peso normal A las 4 semanas .pdf
adityastores21
 
LTC Coding Activity Quiz Instructions Using the information.pdf
LTC Coding Activity Quiz Instructions Using the information.pdfLTC Coding Activity Quiz Instructions Using the information.pdf
LTC Coding Activity Quiz Instructions Using the information.pdf
adityastores21
 
Ltfen soruyu okuyun ve cevaplayn Green River Katili olara.pdf
Ltfen soruyu okuyun ve cevaplayn  Green River Katili olara.pdfLtfen soruyu okuyun ve cevaplayn  Green River Katili olara.pdf
Ltfen soruyu okuyun ve cevaplayn Green River Katili olara.pdf
adityastores21
 
MAINCPP include ltiostreamgt include ltstringgt u.pdf
MAINCPP include ltiostreamgt include ltstringgt u.pdfMAINCPP include ltiostreamgt include ltstringgt u.pdf
MAINCPP include ltiostreamgt include ltstringgt u.pdf
adityastores21
 

Plus de adityastores21 (20)

Ltfen admlar gsterin Zorbas hisseleri halka ak olma.pdf
Ltfen admlar gsterin   Zorbas hisseleri halka ak olma.pdfLtfen admlar gsterin   Zorbas hisseleri halka ak olma.pdf
Ltfen admlar gsterin Zorbas hisseleri halka ak olma.pdf
 
ltheadergt with lth1gt tags that contain a titlehea.pdf
ltheadergt with lth1gt tags that contain a titlehea.pdfltheadergt with lth1gt tags that contain a titlehea.pdf
ltheadergt with lth1gt tags that contain a titlehea.pdf
 
Los virus utilizan la maquinaria de la clula husped para r.pdf
Los virus utilizan la maquinaria de la clula husped para r.pdfLos virus utilizan la maquinaria de la clula husped para r.pdf
Los virus utilizan la maquinaria de la clula husped para r.pdf
 
Luria ve Delbruck tarafndan gerekletirilen dalgalanma testi.pdf
Luria ve Delbruck tarafndan gerekletirilen dalgalanma testi.pdfLuria ve Delbruck tarafndan gerekletirilen dalgalanma testi.pdf
Luria ve Delbruck tarafndan gerekletirilen dalgalanma testi.pdf
 
Lululemon ile ilgili kullanc tarafndan oluturulan ierii inc.pdf
Lululemon ile ilgili kullanc tarafndan oluturulan ierii inc.pdfLululemon ile ilgili kullanc tarafndan oluturulan ierii inc.pdf
Lululemon ile ilgili kullanc tarafndan oluturulan ierii inc.pdf
 
Louis files as a single taxpayer In April of this year he r.pdf
Louis files as a single taxpayer In April of this year he r.pdfLouis files as a single taxpayer In April of this year he r.pdf
Louis files as a single taxpayer In April of this year he r.pdf
 
Ltfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdf
Ltfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdfLtfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdf
Ltfen Washington Irvingin hikayesinde Ichabod Crane ve Bro.pdf
 
Lucy and Melvin share a flat They spend some of their money.pdf
Lucy and Melvin share a flat They spend some of their money.pdfLucy and Melvin share a flat They spend some of their money.pdf
Lucy and Melvin share a flat They spend some of their money.pdf
 
Luisa Ortega naci a trmino y peso normal A las 4 semanas .pdf
Luisa Ortega naci a trmino y peso normal A las 4 semanas .pdfLuisa Ortega naci a trmino y peso normal A las 4 semanas .pdf
Luisa Ortega naci a trmino y peso normal A las 4 semanas .pdf
 
Loyola Beeri Bilimlerden en iyi mezunlardan biri olan Maria.pdf
Loyola Beeri Bilimlerden en iyi mezunlardan biri olan Maria.pdfLoyola Beeri Bilimlerden en iyi mezunlardan biri olan Maria.pdf
Loyola Beeri Bilimlerden en iyi mezunlardan biri olan Maria.pdf
 
Lotus irketinin son bilanosu aadaki gibidir Varlklar D.pdf
Lotus irketinin son bilanosu aadaki gibidir  Varlklar  D.pdfLotus irketinin son bilanosu aadaki gibidir  Varlklar  D.pdf
Lotus irketinin son bilanosu aadaki gibidir Varlklar D.pdf
 
Los socios de Newman Company deciden liquidar la empresa cua.pdf
Los socios de Newman Company deciden liquidar la empresa cua.pdfLos socios de Newman Company deciden liquidar la empresa cua.pdf
Los socios de Newman Company deciden liquidar la empresa cua.pdf
 
LTC Coding Activity Quiz Instructions Using the information.pdf
LTC Coding Activity Quiz Instructions Using the information.pdfLTC Coding Activity Quiz Instructions Using the information.pdf
LTC Coding Activity Quiz Instructions Using the information.pdf
 
Ltfen adli botanikte bitki trlerinin tanmlanmas iin DNA a.pdf
Ltfen adli botanikte bitki trlerinin tanmlanmas iin DNA a.pdfLtfen adli botanikte bitki trlerinin tanmlanmas iin DNA a.pdf
Ltfen adli botanikte bitki trlerinin tanmlanmas iin DNA a.pdf
 
Los pacientes del hospital a menudo reciben medicamentos nu.pdf
Los pacientes del hospital a menudo reciben medicamentos nu.pdfLos pacientes del hospital a menudo reciben medicamentos nu.pdf
Los pacientes del hospital a menudo reciben medicamentos nu.pdf
 
Louis ha pasado al paso de planificacin de la investigacin.pdf
Louis ha pasado al paso de planificacin de la investigacin.pdfLouis ha pasado al paso de planificacin de la investigacin.pdf
Louis ha pasado al paso de planificacin de la investigacin.pdf
 
Los genes A B y C se clasifican y controlan de forma indep.pdf
Los genes A  B y C se clasifican y controlan de forma indep.pdfLos genes A  B y C se clasifican y controlan de forma indep.pdf
Los genes A B y C se clasifican y controlan de forma indep.pdf
 
Ltfen soruyu okuyun ve cevaplayn Green River Katili olara.pdf
Ltfen soruyu okuyun ve cevaplayn  Green River Katili olara.pdfLtfen soruyu okuyun ve cevaplayn  Green River Katili olara.pdf
Ltfen soruyu okuyun ve cevaplayn Green River Katili olara.pdf
 
MAINCPP include ltiostreamgt include ltstringgt u.pdf
MAINCPP include ltiostreamgt include ltstringgt u.pdfMAINCPP include ltiostreamgt include ltstringgt u.pdf
MAINCPP include ltiostreamgt include ltstringgt u.pdf
 
Many features of firm and bank balance sheets are the same o.pdf
Many features of firm and bank balance sheets are the same o.pdfMany features of firm and bank balance sheets are the same o.pdf
Many features of firm and bank balance sheets are the same o.pdf
 

Dernier

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Dernier (20)

21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Basic Intentional Injuries Health Education
Basic Intentional Injuries Health EducationBasic Intentional Injuries Health Education
Basic Intentional Injuries Health Education
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 

lthtmlgt ltheadgt lttitlegtSQUARE PROBLEMltti.pdf

  • 1. <html> <head> <title>SQUARE PROBLEM</title> <style> form{color:black; background-color:purple; border:20px solid yellow;max-width: 400px;color:white;padding-right:10px;border-radius:100%;padding-left:30px; padding-right:30px;padding-bottom:30px;font: 1.5em monospace} label.title{outline:solid 7px yellow;color:black; background-color:yellow; float:left; text-align:center; width:90%;border:solid yellow 10px;font-size:1.5em;margin-bottom :5px;border-top-right-radius: 60px;border-top-left-radius: 60px;} label.input{float:left; width:130px;color:black;margin-top:5px;color:white;margin-left: 20px} label.output1{float:left; width:130px;color:red;} label.output2{float:left; width:130px} div{text-align: center;} br{clear:both;} .one,select{color:white;background-color:black; border:4px solid yellow; max-width: 150px; float:left;border-radius:25px;margin-top:5px;padding:4px;font:1em monospace;} .two{background-color:yellow; border:4px solid black; max-width:150px; float:left; border-radius:25px;padding:4px} .one2{background-color:red;border:4px solid black;color:white;border-radius:25px;} .two2{border:4px solid yellow;background:black;color:lightblue;border-radius:25px; font:1em monospace;} </style> </head>
  • 2. <body> <form> <label class='title'><strong>SQUARE PROBLEM</strong></label><p> <label class='input'><strong>Enter Side:</strong></label><input type="text" class= 'one' /><br> <hr> <label class='input'><strong>Area:</strong></label> <input type="text" class='one' /><br> <label class='input'><strong>Perimeter:</strong></label> <input type="text" class= 'one' /><br> <hr> <div> <input type="button" value="Area" class='two2'/> <input type="button" value="Perimeter" class='two2'/> <input type="button" value="Both" onclick="both" class='two2'/><br> <input type="button" value="Clear" class='two2' /> </div> </form> </body> </html> othenise it will be -20 for the correct square NoTE: Make sure to wse 1. Add Javascript to the problem I the area, perineter or Both FORVULAS: Areaside'side periseter=4"side sure to make all but tons 2. Externalize the JavaScript (10pts) 3. Externalize the CSS(10pts) SQUARE PROBLEM