/King Xiong/Views/Home/Portfolio.cshtml
Razor | 690 lines | 558 code | 79 blank | 53 comment | 38 complexity | 036460ea9a6a3cfff630243c9017c886 MD5 | raw file
- @{
- ViewBag.Title = "Portfolio";
- }
- <body>
- <section>
- <h2 class=" container section-heading text-center">Project Exercise</h2>
- <div class="container text-center">
- <div class="row">
- <div class="col-md-12 ">
- <h3>JavaScript Exercise</h3>
- <img src="~/Library/Template/img/5.jpg" class="btn page-scroll" data-toggle="modal" data-target="#series" title="5 Number Series" style="max-height:250px; max-width: 250px">
- <img src="~/Library/Template/img/Factorial.jpeg" class="btn page-scroll" data-toggle="modal" data-target="#factorialMod" title="Factorial" style="max-height:250px; max-width: 250px">
- <img src="~/Library/Template/img/FizzNBuzz.png" class="btn page-scroll" data-toggle="modal" data-target="#fizzbuzz" title="Fizz and Buzz" style="max-height:250px; max-width: 250px">
- <img src="~/Library/Template/img/Palindrome.png" class="btn page-scroll" data-toggle="modal" data-target="#palindrome" title="Palindrome" style="max-height:250px; max-width: 250px">
- <h3>C# Exercise</h3>
- <a href="" class="btn btn-primary btn-xl page-scroll btn-shape" data-toggle="modal" data-target="#cSeries" style="width:245.55px">5 Series of Numbers</a>
- <a href="" class="btn btn-primary btn-xl page-scroll btn-shape" data-toggle="modal" data-target="#cFactorial" style="width:245.55px">Factorial</a>
- <a href="" class="btn btn-primary btn-xl page-scroll btn-shape" data-toggle="modal" data-target="#cFizzBuzz" style="width:245.55px">Fizz and Buzz</a>
- <a href="" class="btn btn-primary btn-xl page-scroll btn-shape" data-toggle="modal" data-target="#cPalindrome" style="width:245.55px">Palindrome</a>
- </div>
- </div>
- </div>
- <br />
- </section>
- <!-- Modal for JS 5 Series program -->
- <div class="modal fade" id="series" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">5 Series</font></h1>
- </div>
- <!--5 series Html Code for output-->
- <!-- class="modal-body col-*-*" is important for organization -->
- <div class="modal-body col-sm-12">
- <!--My functions-->
- <h4 style="color:black">Write a program that accepts a series of at least 5 numbers from the user and performs the follwing actions:</h4>
- <h4 style="color:black">a. Determine which number is the least</h4>
- <h4 style="color:black">b. Determine which number is the greatest</h4>
- <h4 style="color:black">c. Determine the mean of the numbers</h4>
- <h4 style="color:black">d. Determine the sum of all the numbers</h4>
- <h4 style="color:black">e. Determine the product of all the numbers</h4>
- <div class="row">
- <!--Rows before Column-->
- <div class="col-md-2">
- <!--Trying to config two columns, 1 column is for input(submitting numbers), the other is for output(result)-->
- <form>
- <!--Form tag is for boxes to input materials-->
- <div class="form-group">
- <!--Form-group is to group all the labels & input into each separate row (only for bootstrap)-->
- <input type="number" id="firstNumber" name="firstNumber" class="form-control" placeholder="First Number" />
- <!--Form-control enables the uses of bootstrap--><!--id="firstNumber" is unique-->
- </div>
- <div class="form-group">
- <input type="number" id="secondNumber" name="secondNumber" class="form-control" placeholder="Second Number" />
- <!--id="secondNumber" is unique-->
- </div>
- <div class="form-group">
- <input type="number" id="thirdNumber" name="thirdNumber" class="form-control" placeholder="Third Number" />
- <!--id="thirdNumber" is unique-->
- </div>
- <div class="form-group">
- <input type="number" id="fourthNumber" name="fourthNumber" class="form-control" placeholder="Fourth Number" />
- <!--id="fourthNumber" is unique-->
- </div>
- <div class="form-group">
- <input type="number" id="fifthNumber" name="fifthNumber" class="form-control" placeholder="Fifth Number" />
- <!--id="fifthNumber" is unique-->
- </div>
- </form>
- <button id="calculate" type="submit" class="btn btn-block" value="Run">Calculate</button>
- <!--id="calculate" is unique in HTML-->
- </div>
- <div class="col-md-2">
- <!--The second column with width of 6-->
- <div class="form-group">
- <label>Least:</label>
- <label id="least"></label>
- </div>
- <div class="form-group">
- <label>Greatest:</label>
- <label id="greatest"></label>
- </div>
- <div class="form-group">
- <label>Mean:</label>
- <label id="mean"></label>
- </div>
- <div class="form-group">
- <label>Sum:</label>
- <label id="sum"></label>
- </div>
- <div class="form-group">
- <label>Product:</label>
- <label id="product"></label>
- </div>
- </div>
- <div class="col-md-8">
- <pre class="brush: js">
- $(document).ready(function () {
- $("#calculate").click(function (event) {
- event.preventDefault();
- });
- });
- $("#calculate").click(calculateNumbers);
- function calculateNumbers() {
- //input
- var firstValue = parseInt($("#firstNumber").val());
- //parseInt is converting input as an integer value instead of a text value
- var secondValue = parseInt($("#secondNumber").val());
- // $("#secondNumber") is using jquery to test if id="secondNumber" is a integer value.
- var thirdValue = parseInt($("#thirdNumber").val());
- var fourthValue = parseInt($("#fourthNumber").val());
- var fifthValue = parseInt($("#fifthNumber").val());
- //Processing
- //inputing the variable min to be Math.min( , , , , )
- //min
- var min = Math.min(firstValue, secondValue, thirdValue, fourthValue, fifthValue);
- //max
- var max = Math.max(firstValue, secondValue, thirdValue, fourthValue, fifthValue);
- //sum
- var add = firstValue + secondValue + thirdValue + fourthValue + fifthValue;
- //product
- var numArray = [firstValue, secondValue, thirdValue, fourthValue, fifthValue];
- var multiplication = 1;
- for (i = 0; i < numArray.length; i++)
- {
- multiplication *= numArray[i];
- }
- /* Simplier version
- var multiplication = firstValue * secondValue * thirdValue * fourthValue * fifthValue;
- */
- //mean
- var mean = add / numArray.length;
- //output
- $("#least").html(min);
- $("#greatest").html(max);
- $("#mean").html(mean);
- $("#sum").html(add);
- // id="sum" exist in HTML, but .html(add) exist in var add in JavaScript
- $("#product").html(multiplication);
- };
- </pre>
- </div>
- </div>
- <!--End of 5 series function -->
- </div>
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!--End of Modal for 5 Series exercise-->
- <!-- Modal for JS Factorial project -->
- <div class="modal fade" id="factorialMod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">Factorial</font></h1>
- </div>
- <!--Factorial Html Code for output-->
- <div class="modal-body col-sm-12">
- <div class="row" style="color:black">
- <div class="col-lg-2">
- <h2>Input your number</h2>
- <form>
- <div class="form-group">
- <input type="number" id="factorialNumber" name="factorialNumber" class="form-control" placeholder="Number" />
- <button id="factorialCalculate" type="submit" class="btn btn-block">Calculate</button>
- </div>
- </form>
- </div>
- <div class="col-lg-2">
- <label>Factorial:</label><br />
- <label id="factorial"></label>
- </div>
- <div class="col-lg-8">
- <pre class="brush: js">
- $(document).ready(function () {
- $("#factorialCalculate").click(function (event) {
- event.preventDefault();
- });
- });
- $("#factorialCalculate").click(calculateFactorial);
- function calculateFactorial() {
- //input variables
- var factorialFunction = 1;
- var inputNum = parseInt($("#factorialNumber").val());
- //process
- for (i = inputNum; i > 0; i--) {
- factorialFunction *= i;
- }
- //output
- $("#factOutput").html(factorialFunction);
- }
- </pre>
- </div>
- </div>
- </div>
- <!--End of 5 series function -->
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!-- End of modal for Factorial exercise -->
- <!-- Modal for JS Fizz and Buzz-->
- <div class="modal fade" id="fizzbuzz" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">Fizz and Buzz</font></h1>
- </div>
- <!--Fizz and Buzz Html Code for output-->
- <div class="modal-body col-sm-12">
- <div class="row" style="color:black">
- <div class="col-lg-3">
- <h1>Fizz And Buzz</h1>
- <form>
- <div class="form-group">
- <input type="number" min="1" max="100" id="first" class="form-control" placeholder="Enter the first number" />
- <input type="number" min="1" max="100" id="second" class="form-control" placeholder="Enter the second number" />
- <button id="solve" type="submit" class="btn btn-block">Solve</button>
- </div>
- </form>
- </div>
- <div class="col-lg-2" id="answers-scroll">
- <label>Result:</label><br />
- <label id="result"></label>
- </div>
- <div class="col-lg-7">
- <pre class="brush: js">
- $(document).ready(function () {
- $("#solve").click(function (event) {
- event.preventDefault();
- });
- });
- $("#solve").click(computing);
- function computing() {
- var inputOne = parseInt($("#first").val());
- var inputTwo = parseInt($("#second").val());
- var numArray = [];
- ////adding 1-100 into numArray
- for (i = 1; i <= 100; i++)
- {
- numArray.push(i);
- }
- //indexing
- for (j = 0; j < 100; j++)
- {
-
- if (numArray[j] % inputOne === 0 && numArray[j] % inputTwo === 0) {
- $("#result").append("Fizz&Buzz");
- }
- else if (numArray[j] % inputOne === 0) {
- $("#result").append("Fizz");
- }
- else if (numArray[j] % inputTwo === 0) {
- $("#result").append("Buzz");
- } else {
- $("#result").append(numArray[j]);
- }
- $("#result").append("<br>")
- }
- };
- </pre>
- </div>
- </div>
- </div>
- <!--End of Fizz and Buzz function -->
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!-- End of modal for Fizz And Buzz exercise -->
- <!-- Modal for JS Palindrome-->
- <div class="modal fade" id="palindrome" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">Palindrome</font></h1>
- </div>
- <!-- Palindrome Html Code for output-->
- <div class="modal-body col-sm-12">
- <div class="row" style="color:black">
- <div class="col-lg-5">
- <h2>Please enter a word.</h2>
- <h2>This program will check if it is a Palindrome word.</h2>
- <form>
- <div class="form-group">
- <!--form-group groups anything in forms into separate boxes-->
- <input type="text" id="inputWord" class="form-control" placeholder="Palindrome Word" />
- <button id="confirmPal" type="submit" class="btn btn-block">Solve</button>
- </div>
- </form>
- <div>
- <label>Outcome:</label>
- <label id="outcome"></label>
- </div>
- <!-- End of Palindrome function -->
- </div>
- <div class="col-lg-7">
- <pre class="brush: js">
- $(document).ready(function () {
- $("#confirmPal").click(function (event) {
- event.preventDefault();
- });
- });
- $("#confirmPal").click(computing);
- function computing() {
- //declares variable input
- //.val() is a method in jQuery used to put value in an object.
- var inputWord = $("#inputWord").val();
- var theText = [];
- //computing the results
- for (j = 0; j <= inputWord.length - 1; j++) {
- //setting the array theText to be the same as each individual character from the inputed word.
- theText[j] = inputWord.charAt(j);
- }
- theText.reverse();
- //theText.reverse() converts the inputed word around
- var oppText = theText.join("");
- //oppText changes the theText.join("") into the array with no commas in between
- //example (["a","f","t","e","r"] ==> "after")
- //output
- if (inputWord === oppText) {
- $("#outcome").html("It is a palindrome");
- } else if (theText !== oppText) {
- $("#outcome").html("It is not a palindrome");
- }
- }
- </pre>
- </div>
- </div>
- </div>
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!-- End of modal for Palindrome exercise -->
- <!-- C# modal for 5 Series -->
- <div class="modal fade" id="cSeries" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">5 Series C#</font></h1>
- </div>
- <!--5 series C# code-->
- <div class="modal-body col-sm-12">
- <!--My functions-->
- <h4 style="color:black">Write a program that accepts a series of at least 5 numbers from the user and performs the follwing actions:</h4>
- <h4 style="color:black">a. Determine which number is the least</h4>
- <h4 style="color:black">b. Determine which number is the greatest</h4>
- <h4 style="color:black">c. Determine the mean of the numbers</h4>
- <h4 style="color:black">d. Determine the sum of all the numbers</h4>
- <h4 style="color:black">e. Determine the product of all the numbers</h4>
- <div class="row">
- <!--Rows before Column-->
- <div class="col-md-12">
- <pre class="brush: csharp">
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- namespace _5_Series
- {
- class Program
- {
- static void Main(string[] args)
- {
- double first, second, third, fourth, fifth, minNumber, maxNumber, sum, product, mean;
- string firstInput, secondInput, thirdInput, fourthInput, fifthInput;
- Console.WriteLine("Enter your first number");
- firstInput = Console.ReadLine();
- first = double.Parse(firstInput);
- Console.WriteLine("Enter your second number");
- secondInput = Console.ReadLine();
- second = double.Parse(secondInput);
- Console.WriteLine("Enter your third number");
- thirdInput = Console.ReadLine();
- third = double.Parse(thirdInput);
- Console.WriteLine("Enter your fourth number");
- fourthInput = Console.ReadLine();
- fourth = double.Parse(fourthInput);
- Console.WriteLine("Enter your fifth number");
- fifthInput = Console.ReadLine();
- fifth = double.Parse(fifthInput);
- double[] numberArray = { first, second, third, fourth, fifth };
- maxNumber = numberArray.Max();
- minNumber = numberArray.Min();
- sum = first + second + third + fourth + fifth;
- product = first * second * third * fourth * fifth;
- mean = sum / numberArray.Length;
- Console.WriteLine("Max " + maxNumber);
- Console.WriteLine("Min " + minNumber);
- Console.WriteLine("Sum " + sum);
- Console.WriteLine("Product " + product);
- Console.WriteLine("Mean " + mean);
- Console.ReadKey();
- }
- }
- }
- </pre>
- </div>
- </div>
- <!--End of 5 series function -->
- </div>
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!-- End of C# modal for 5 Series -->
- <!-- C# modal for Factorial -->
- <div class="modal fade" id="cFactorial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">Factorial C#</font></h1>
- </div>
- <!--Factorial C# code-->
- <div class="modal-body col-sm-12">
- <!--My functions-->
- <h4 style="color:black">
- Write a program that calculates the factorial of a number. The factorial of a non-negative integer <em>n</em>
- is the product of all positive integers less than or equal to <em>n</em>. (i.e. 5! = 5 x 4 x 3 x 2 x 1 = 120)
- </h4>
- <div class="row">
- <!--Rows before Column-->
- <div class="col-md-12">
- <pre class="brush: csharp">
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- namespace Factorial_cSharp
- {
- class Program
- {
- static void Main(string[] args)
- {
- int factorialNumber;
- int factorialResult = 1;
- string facNumInput;
- Console.WriteLine("Enter your factorial number");
- facNumInput = Console.ReadLine();
- factorialNumber = int.Parse(facNumInput);
- for (int i = factorialNumber; i > 0; i--)
- {
- factorialResult *= i;
- }
- Console.WriteLine("Factorial Number is " + factorialResult);
- Console.ReadKey();
- }
- }
- }
- </pre>
- </div>
- </div>
- <!--End of Factorial function -->
- </div>
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!-- End of C# modal for Factorial -->
- <!--C# modal for FizzBuzz-->
- <div class="modal fade" id="cFizzBuzz" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">Fizz and Buzz C#</font></h1>
- </div>
- <!--FizzBuzz C# code-->
- <div class="modal-body col-sm-12">
- <!--My functions-->
- <h4 style="color:black">
- Write a program that accepts two numbers between 1 and 100 from the user. The program then iterates
- through all numbers from 1 to 100, printing numbers in ascending order to the screen. For each number
- that is a multiple of the first number input by the user, print "Fizz" instead of the number. For each
- number that is a multiple of the second number input by the user, print "Buzz" instead of the number.
- For numbers that are multiples of both numbers, print "FizzBuzz" instead of the number.
- </h4>
- <div class="row">
- <!--Rows before Column-->
- <div class="col-md-12">
- <pre class="brush: csharp">
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- namespace FizzAndBuzz_cSharp
- {
- class Program
- {
- static void Main(string[] args)
- {
- int fbOne, fbTwo;
- string oneInput, twoInput;
- int[] fbArray = new int [101];
- Console.WriteLine("Enter the first number");
- oneInput = Console.ReadLine();
- fbOne = int.Parse(oneInput);
- Console.WriteLine("Enter the second number");
- twoInput = Console.ReadLine();
- fbTwo = int.Parse(twoInput);
- for (int i = 0; i < 100; i++)
- {
- fbArray[i] = i;
- }
- Console.WriteLine("Result: ");
- for (int j = 1; j <= 100; j++)
- {
- if (fbArray[j] % fbOne == 0 && fbArray[j] % fbTwo == 0)
- Console.WriteLine("Fizz Buzz");
- else if (fbArray[j] % fbOne == 0)
- Console.WriteLine("Fizz");
- else if (fbArray[j] % fbTwo == 0)
- Console.WriteLine("Buzz");
- else
- Console.WriteLine(j);
- }
- Console.ReadKey();
- }
- }
- }
- </pre>
- </div>
- </div>
- <!--End of FizzBuzz function -->
- </div>
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- <!-- End of C# modal for FizzBuzz -->
- <!-- C# modal for Palindrome -->
- <div class="modal fade" id="cPalindrome" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
- <h1 class="modal-title" id="myModalLabel"><font color="black">Palindrome C#</font></h1>
- </div>
- <!--Palindrome C# code-->
- <div class="modal-body col-sm-12">
- <!--My functions-->
- <h4 style="color:black">
- Write a program that determines whether a word is a Palindrome (the same backward as
- it is forward - "radar" for example). Display the result to the user.
- </h4>
- <div class="row">
- <!--Rows before Column-->
- <div class="col-md-12">
- <pre class="brush: csharp">
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- namespace Palindrome_cSharp
- {
- class Program
- {
- static void Main(string[] args)
- {
- Console.WriteLine("Enter your Palindrome Word");
- string inputText = Console.ReadLine();
- int textLength = inputText.Length;
- //arrText is an array that stores each individual characters in each individual slot
- char[] arrText = inputText.ToCharArray();
- //bool isPalindrome = true;
- // RADAR
- for (int i = 0; i < textLength; i++)
- {
- if (arrText[i] != arrText[textLength - i - 1])
- {
- Console.WriteLine("Not Palindrome");
- i = textLength;
- }
- if(i == textLength-1 && arrText[i] == arrText[textLength - i - 1])
- {
- Console.WriteLine("Palindrome");
- }
- }
- Console.ReadKey();
- }
- }
- }
- </pre>
- </div>
- </div>
- <!--End of Palindrome function -->
- </div>
- <div class="modal-footer no-margin">
- </div>
- </div>
- </div>
- </div>
- </body>