Home Contact About

【 Responsive Header with internal links】

Description: Resize the browser window to see the effect.

【 HTML: Media & Image】

Description:external links, audio, video, image.


By Eliza Barclay from NPR

【HTML:Audio】with figcaption and external links.

By Telefónica Digital Trends from Youtube.

【HTML:Audio】with figcaption and external links.
Equality is always Right Now

From Wiff Leg Gif

【HTML:Image】with figcaption and external links.

【 HTML: Table & Form】

Description: Tables, Forms which collect and display data.

O X O
X O X
X X O
【HTML: Table】 with caption attribute.

【HTML: Form】with label, textarea and link.

You can email me at maincsna@gmail.com.

【CSS Formating: Animation & Transition】

Description: animation, transition is on the top logo and transformation is below.

2000 BC

"Frozen syrup iscreated in China
using snow andsalt as freezing
agents."
200 BC

"The Chinese createanother variation
of ice cream, withmilk, overcookedrice and spices,
packed in snowto freeze."
20TH CENTURY

"Ernest A. Hamwi, aSyrian immigrant,
is credited withthe invention of
the ice-cream cone– rolled from oneof his waffles."
500 BC

"The Persian Empireis introduced to
frozen desserts viatrade with China.The word “sorbet”
comes from the Arabic šariba, which means, to drink."
8TH CENTURY

"Sorbet isintroduced to Italy
when the Arabsconquer the islandof Sicily, giving
rise to the famous,semi-frozen Italiandessert granita."
21ST CENTURY

"Asian soft-serveice cream (known
as “soft cream” inJapan) is boomingin popularity, with
Korean brands suchas Honey Crèmeexpanding acrossthe region.""

【CSS Layout : Grid & Column & Flex 】

Description: gird, flex, column, external links.

Basic HTML
Working with Links
Working with Media
Using Tables and Forms
CSS Formatting
CSS Layout
Responsive Web Design
Java:Vending Machine

import java.util.Scanner;
public class VendingMachine
{
public static void main(String[] args)
{
final int rateChip=125;
final int rateCookie=85;
final int rateCandy=95;
final int quarter= 25;
final int dimes=10;
final int nickels=5;
int buyerMoney, change;
//create a menu
System.out.println ("Here is a selection menu for the food:");
System.out.println ("1) Potato Chips");
System.out.println ("2) Cookies");
System.out.println ("3) Candies");
Scanner input = new Scanner(System.in);
System.out.print ("Please select the food:");
int foodSelection = input.nextInt();
// if the food doesn't exist
if (foodSelection != 1 && foodSelection != 2 && foodSelection != 3)
{
System.out.print("Sorry, your selection doesn't exist!");
return;
}
System.out.print ("Please enter the amount of food:");
int foodQuantity = input.nextInt();
// if the food sold out
if (foodQuantity > 1)
{
System.out.print("Sold out, please make another choice!");
return;
}
if (foodQuantity == 0)
{
System.out.print("Please go away, don't waste my time!");
return;
}
System.out.print ("Please enter the amount of quarter:");
int numQuarters = input.nextInt();
System.out.print ("Please enter the amount of dimes:");
int numDimes = input.nextInt();
System.out.print ("Please enter the amount of nickels:");
int numNickles = input.nextInt();
buyerMoney=numQuarters * quarter + numDimes * dimes + numNickles * nickels;
// assume you only choose one quantity
if (foodQuantity == 1)
{
if (foodSelection == 1)
{
// if the amount is exactly the same the cost
if (buyerMoney == rateChip * foodQuantity )
System.out.print("Please take your food, NO change!");
// if the amount is less than the the cost
if (buyerMoney < rateChip * foodQuantity )
System.out.print("Sorry, you don't have enough money!");
// if the amount is more than the cost
if (buyerMoney > rateChip * foodQuantity )
{
change = buyerMoney - rateChip * foodQuantity;
System.out.print("Please take your food and your change: "+ change + " cents.");
}
}
else if (foodSelection == 2)
{
// if the amount is exactly the same the cost
if (buyerMoney == rateCookie * foodQuantity )
System.out.print("Please take your food, NO change!");
// if the amount is less than the the cost
if (buyerMoney < rateCookie * foodQuantity )
System.out.print("Sorry, you don't have enough money!");
// if the amount is more than the cost
if (buyerMoney> rateCookie * foodQuantity )
{
change = buyerMoney - rateCookie * foodQuantity;
System.out.print("Please take your food and your change: "+ change + " cents.");
}
}
else if (foodSelection == 3)
{
// if the amount is exactly the same the cost
if (buyerMoney == rateCandy * foodQuantity )
System.out.print("Please take your food, NO change!");
// if the amount is less than the the cost
if (buyerMoney < rateCandy * foodQuantity )
System.out.print("Sorry, you don't have enough money!");
// if the amount is more than the cost
if (buyerMoney>rateCandy * foodQuantity )
{
change = buyerMoney - rateCandy * foodQuantity;
System.out.print("Please take your food and your change: "+ change + " cents.");
}
}
}
}
}















C++: Free Frozen Yogurt

//define the getKeyCharacter method
char getKeyCharacter()
{
string keyCharacter;
bool validated;
int length;
char letter;
// Get input from console, until it passes our tests
validated = false;
while (!validated)
{
cout << "Please enter a SINGLE character to act as key:";
getline(cin, keyCharacter);
length = keyCharacter.length();
// test for reasonable length
if (length == 1)
{
letter = keyCharacter[0];
break;
}else
continue;
}
return letter;
}
//define the getString method
string getString()
{
string theString;
bool validated;
int length;
const int MIN_LENGTH = 6;
const int MAX_LENGTH = 160;
// Get input from console, until it passes our tests
validated = false;
while (!validated)
{
cout << "Please enter a phrase or sentence > = " <<MIN_LENGTH << " and <= " << MAX_LENGTH << " characters:";
getline(cin, theString);
length = theString.length();
// test for reasonable length
if (length >= MIN_LENGTH && length <= MAX_LENGTH)
break;
else
continue;
}
return theString;
}
//define the maskCharacter method
string maskCharacter(string theString, char keyCharacter)
{
for (int i=0; i<= theString.length(); i++)
{
if (theString[i] == keyCharacter)
theString[i] = '#';
}
return theString;
}
//define the removeCharacter method
string removeCharacter(string theString, char keyCharacter)
{
string newString="";
for (int i=0; i<=theString.length(); i++)
{
if (theString[i]!= keyCharacter)
newString = newString + theString[i] ;
}
return newString;
}
//define the countKey method
int countKey(string theString, char keyCharacter)
{
int countKey=0;
for(int i=0; i<=theString.length(); i++)
{
if (theString[i] == keyCharacter)
countKey++;
} return countKey;
}
// main
int main()
{
string userInput;
while(true)
{
//Ask the user to enter a key character
char keyCharacter = getKeyCharacter();
//Ask the user to enter a target string (phrase, sentence, etc.)
string theString = getString();
cout<<endl;
//has each occurrence of the key character replaced by a number sign char, '#'
string stringMasked = maskCharacter(theString, keyCharacter);
cout << "String with key character, '" << keyCharacter << "' masked:"<< endl;
cout << stringMasked <<endl << endl;
//remove the key character
string stringRemoved = removeCharacter(theString, keyCharacter);
cout << "String with '" << keyCharacter << "' removed:" << endl;
cout <<stringRemoved << endl << endl;
// count the number of key character
int occurence = countKey(theString, keyCharacter);
cout << "# of occurrences of key character, '" <<keyCharacter << "': " << occurence << endl;
cout <<"Press any key to continue . . ." <<endl << endl;
getline(cin,userInput);
}
return 0;
}
C++
Java
Python
HTML
CSS
JavaScript