Question regarding .Net/Razor -- > code and question below =====================
ID: 3735742 • Letter: Q
Question
Question regarding .Net/Razor -- > code and question below
==========================
create a form (the colors are Red, Green, Blue):
When you submit the form, the colors are combined as follows:
• Red & Red = Red
• Red & Green OR Green & Red = Yellow
• Red & Blue OR Blue & Red = Magenta
• Green & Green = Green
• Green & Blue OR Blue & Green = Cyan
• Blue & Blue = Blue
---CODE----
<!DOCTYPE html>
<html>
<!-- Head Start -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<!-- bootstrap stylesheet -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<title>Primary Colors</title>
</head>
<body>
<!-- navbar START-->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
</div>
</nav>
<!-- navbar END-->
<!--Jumbotron START-->
<div class="container">
<!-- Container Color -->
<div class="container">
<h1>Primary Colors</h1><hr />
</div>
<!-- Color form group -->
<form role="form">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Select color 1</label>
<select class="form-control">
<option>(none)</option>
<option value="red">(red)</option>
<option value="green">(green)</option>
<option value="blue">(blue)</option>
</select>
</div>
<div class="form-group">
<label for="name">Select color 2</label>
<select class="form-control">
<option>(none)</option>
<option value="red1">(red)</option>
<option value="green1">(green)</option>
<option value="blue1">(blue)</option>
</select>
</div>
</div>
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
</div>
<!-- jquery and bootstrap frameworks -->
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/jquery-ui.min.css" rel="stylesheet" />
<script src="Content/jquery-ui.min.js"></script>
<!-- script begin -->
<script>
$(function () {
//variable randomNumber will give Random number each time and corresponding switch will apply random CSS
protected void Submit_Click(object sender , EventArgs e)
{
if(Color1.SelectedValue == "red" && Color2.SelectedValue == "red1") { Resultant.Text = "Red"; }
if (Color1.SelectedValue == "red" && Color2.SelectedValue == "green1") { Resultant.Text = "Yellow"; }
if (Color1.SelectedValue == "green" && Color2.SelectedValue == "red1") { Resultant.Text = "Yellow"; }
if (Color1.SelectedValue == "red" && Color2.SelectedValue == "blue1") { Resultant.Text = "Magenta"; }
if (Color1.SelectedValue == "blue" && Color2.SelectedValue == "red1") { Resultant.Text = "Magenta"; }
if (Color1.Selected Value == "green" && Color2.SelectedValue == "green1") { Resultant.Text = "Green"; }
if (Color1.SelectedValue == "green" && Color2.SelectedValue == "blue1") { Resultant.Text = "Cyan"; }
if (Color1.SelectedValue == "blue" && Color2.SelectedValue == "green1") { Resultant.Text = "Cyan"; }
if (Color1.SelectedValue == "blue" && Color2.SelectedValue == "blue1") { Resultant.Text = "Blue"; }
}
});
</script>
</body>
</html>
Explanation / Answer
need any help, give me a comment
<!DOCTYPE html>
<html>
<!-- Head Start -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<!-- bootstrap stylesheet -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<title>Primary Colors</title>
</head>
<body>
<!-- navbar START-->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
</div>
</nav>
<!-- navbar END-->
<!--Jumbotron START-->
<div class="container">
<!-- Container Color -->
<div class="container">
<h1>Primary Colors</h1>
<hr />
</div>
<!-- Color form group -->
<form role="form">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Select color 1</label>
<select class="form-control" id="Class1" name="Color1">
<option>(none)</option>
<option value="red">(red)</option>
<option value="green">(green)</option>
<option value="blue">(blue)</option>
</select>
</div>
<div class="form-group">
<label for="name">Select color 2</label>
<select class="form-control" id="Color2" name="Color2">
<option>(none)</option>
<option value="red1">(red)</option>
<option value="green1">(green)</option>
<option value="blue1">(blue)</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="row">
Result is: <span id="Result"></span>
</div>
</div>
<!-- jquery and bootstrap frameworks -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/jquery-ui.min.css" rel="stylesheet" />
<script src="Content/jquery-ui.min.js"></script>
<!-- script begin -->
<script>
$(function () {
//variable randomNumber will give Random number each time and corresponding switch will apply random CSS
});
$("form").submit(function (e) {
e.preventDefault();
Color1 = $("select[name=Color1]").val();
Color2 = $("select[name=Color2]").val();
Resultant = $("#Result");
if (Color1 == "red" && Color2 == "red1") { Resultant.text("Red"); }
if (Color1 == "red" && Color2 == "green1") { Resultant.text("Yellow"); }
if (Color1 == "green" && Color2 == "red1") { Resultant.text("Yellow"); }
if (Color1 == "red" && Color2 == "blue1") { Resultant.text("Magenta"); }
if (Color1 == "blue" && Color2 == "red1") { Resultant.text("Magenta"); }
if (Color1 == "green" && Color2 == "green1") { Resultant.text("Green"); }
if (Color1 == "green" && Color2 == "blue1") { Resultant.text("Cyan"); }
if (Color1 == "blue" && Color2 == "green1") { Resultant.text("Cyan"); }
if (Color1 == "blue" && Color2 == "blue1") { Resultant.text("Blue"); }
});
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.