1.Programming Foundations with JavaScript, HTML and CSS
[!INDEX]
- html
- tag- image, link, nested list
- nested link item
- css class
- css id
- css combinations
1. html
[!NOTE]
- metadata - head, title, html
- section - body hi div
2. tag- image, link, nested list
<!-- image tag -->
<img src ="#" width = " ">
<!-- link tag -->
<a href ="#" > link </a>
<!-- nested link item -->
<ol>
<li> one </li>
<li> two * </li>
<li> three </li>
<li> four </li>
</ol>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
</ul>
3. css class
/* class */
.foodli {
color:Red;
}
/* id */
#cakeli {
color:Red;
}
/* combinations */
ul li {
}4. html tag with css class, id
<li class =foodli>tea</li>
<img scr = "cat.png" id = "cakeli" />5. color 140 standard
[!NOTE]
- method invoke on object .
- function not invoke on object - print(x) .
- java - statically typed language ( write type of variable explicityl in the code ) .
- js - dynamically typed language .
6. pixel concepts
for(var pxl of img.values()){
//pxl creates a box and points to first pixel (0,0)
// pahle pixle ki value pxl me aa jayegee jo hai
// x=0 , y=0
//R=255 , B=255, g=0
//var newg =
}1. Exercise 1 - Turn the chapel red-1
// Exercise 1 - Turn the chapel red-1
var image = new SimpleImage("chapel.png");
for( var pxl of image.values()){
// var newcolor = pxl.setRed(255);// my code
pxl.setRed(255);// coursera code
}
print(image);
2. Exercise 2 - Remove all the red
// Exercise 1 - Turn the chapel red-1
var image = new SimpleImage("chapel.png");
for( var pxl of image.values()){
pxl.setRed(0);
}
print(image);
3. Exercise 3 - Turn the eggs less red
// Exercise 3 - Turn the eggs less red
var image = new SimpleImage("eastereggs.jpg");
for(var pxl of image.values() ){
var findred = pxl.getRed();
if(findred>70){
pxl.setRed(70);
}
}
print(image);
4. Exercise 4 - Add Thick Black Line to Bottom of Owen
// Exercise 4 - Add Thick Black Line to Bottom of Owen
var image = new SimpleImage("astrachan.jpg");
var oldHeight = image.getHeight();
var newHeight = image.getHeight()-10;
print(oldHeight);
print(newHeight);
for( var pxl of image.values()){
if(pxl.getY()>=newHeight){
pxl.setRed(0);
pxl.setGreen(0);
pxl.setBlue(0);
}
}
print(image);
5. Exercise 5 - Green square in top left corner
// Exercise 5 - Green square in top left corner
var image = new SimpleImage("chapel.png");
var newheight = 50;
var newwidth = 50;
for( var pxl of image.values()){
if( pxl.getX()<50 && pxl.getY()<50){ // my code
pxl.setRed(0);
pxl.setGreen(255);
pxl.setBlue(0);
}
if( pxl.getX()<50){ // coursera
if(pxl.getY()<50){
pxl.setRed(0);
pxl.setGreen(255);
pxl.setBlue(0);
}
}
}
print(image);
6. Exercise 6 - Rectangle of any color in top right corner -1
// Exercise 6 - Rectangle of any color in top right corner -1
var picture = new SimpleImage("chapel.png");
//print(picture);
var result = topRightCorner(30, 60, picture, 255, 255, 0);
print(result);
function topRightCorner(cornerWidth, cornerHeight, someImage, red, green, blue) {
for( var pxl of someImage.values()){
if(pxl.getX()>someImage.getWidth()-cornerWidth){
if(pxl.getY()<cornerHeight){
pxl.setRed(255);
pxl.setGreen(255);
pxl.setBlue(0);
}
}
}
return someImage;
// missing code
}
6. Exercise 6 - Rectangle of any color in top right corner -2
// Exercise 6 - Rectangle of any color in top right corner -2
var picture = new SimpleImage("smalllion.jpg");
//print(picture);
var result = topRightCorner(125, 20, picture, 255, 0, 0);
print(result);
function topRightCorner(cornerWidth, cornerHeight, someImage, red, green, blue) {
for( var pxl of someImage.values()){
if(pxl.getX()>someImage.getWidth()-cornerWidth){
if(pxl.getY()<cornerHeight){
pxl.setRed(red);
pxl.setGreen(green);
pxl.setBlue(blue);
}
}
}
return someImage;
}
7. Exercise 7 - Changes in Red, gradiant
// Exercise 7 - Changes in Red, gradiant
var result = changeRed(256,200);
print(result);
function changeRed(width, height) {
var picture = new SimpleImage(width, height);
var red = 0;
for( var pxl of picture.values()){
pxl.setRed(red);// set all to red
pxl.setGreen(0);
pxl.setBlue(0);
if(pxl.getRed()==255){
red=0;
}
else{
red=red+1;
}
}
return picture;
}
// first pixel is red, yes, put red = 0
// second pixel is red, yes, put red = 1
// third pixel is red, yes, put red = 2
// fourth pixel is red, yes, put red = 3
// fifth pixel is red, yes, put red = 4 .. and so on
7. Exercise 7 - OPTIONAL_ONE CHANGE
// Exercise 7 - OPTIONAL: ONE CHANGE
var result = changeRed(256,200,100,200);
print(result);
function changeRed(width, height, bC, gC) {
var picture = new SimpleImage(width, height);
var red = 0;
for( var pxl of picture.values()){
pxl.setRed(red);// set all to red
pxl.setGreen(gC);
pxl.setBlue(bC);
if(pxl.getRed()==255){
red=0;
}
else{
red=red+1;
}
}
return picture;
}
// first pixel is red, yes, put red = 0
// second pixel is red, yes, put red = 1
// third pixel is red, yes, put red = 2
// fourth pixel is red, yes, put red = 3
// fifth pixel is red, yes, put red = 4 .. and so on
8. duke color blue to yellow
// duke coloe blue to yellow
var picture = new SimpleImage("duke_blue_devil.png");
var width = picture.getWidth();
var height = picture.getHeight();
for( var pxl of picture.values()){
if( (pxl.getBlue()==227) && (pxl.getGreen()==51) && (pxl.getRed()===0) ) {
pxl.setRed(255);
pxl.setGreen(255);
pxl.setBlue(0);
}else{}
}
print(picture);
9. three colorfull strips
// three colorfull strips
var picture = new SimpleImage("hilton.jpg");
var width = picture.getWidth();
var height = picture.getHeight();
print(width);
print(height);
for( var pxl of picture.values()){
var w1= width/3;
if(pxl.getX()<w1){
pxl.setRed(255);
}
if((pxl.getX()<(w1+w1)) && (pxl.getX()>w1)){
pxl.setGreen(255);
}
if((pxl.getX()<(w1+w1+w1)) && (pxl.getX()>(w1+w1)) ){
pxl.setBlue(255);
}
}
print(picture);
10. colorfull_top_corner
// 10_colorfull_top_corner
var picture = new SimpleImage("chapel.png");
var result = topRightCorner(30, 60, picture, 255, 255, 0);
var result2 = topRightCorner(60, 30, picture, 0, 0, 255);
var result2 = topRightCorner(30, 30, picture, 0, 255, 0);
print(result);
function topRightCorner(cornerWidth, cornerHeight, someImage, red, green, blue) {
var width = someImage.getWidth();
for (var pixel of someImage.values()) {
if(pixel.getY()<cornerHeight){
if(pixel.getX()>width-cornerWidth){
pixel.setRed(red);
pixel.setGreen(green);
pixel.setBlue(blue);
}
}
}
return someImage;
}
11. // Translating to Code
var fgImage = new SimpleImage("drewRobert.png");
var bgImage = new SimpleImage("dinos.png");
var output = new SimpleImage(fgImage.getWidth(), fgImage.getHeight());
// process each pixel of image
for(var pixel of fgImage.values()){
if (pixel.getGreen() == 255){
// find cordinate of green pixel
var x = pixel.getX();
var y = pixel.getY();
// find cordinate of bg pixel
var bgPixel = bgImage.getPixel(x,y);
// set output and replace green pixel with the corresponding bg pixel
output.setPixel(x, y, bgPixel);
}
else{
// output.setPixel(x, y, pixel);
output.setPixel (pixel.getX(), pixel.getY(), pixel);
}
}
print(output);
12. bug code-2
var img = new SimpleImage(200,200);
for (var px of img.values()){
var x = px.getX();
var y = px.getY();
if (x < img.getWidth()/2){
px.setRed(255);
}
if (y>img.getHeight()/2){
px.setBlue(255);
}
if(x >= img.getWidth()/2 && y <= img.getHeight()/2 ) {
// else {
px.setGreen(255);
}
}
print (img);
13. bug code-2 solution
var img = new SimpleImage(200,200);
for (var px of img.values()){
var x = px.getX();
var y = px.getY();
if (x < img.getWidth()/2){
px.setRed(255);
}
if (y>img.getHeight()/2){
px.setBlue(255);
}
if(x >= img.getWidth()/2 && y <= img.getHeight()/2 ) {
// else {
px.setGreen(255);
}
}
print (img);