What I learned?
I learned the following topics:
- audio and video tags in HTML
- new keyword behind the scenes in javascript
- Prototype and Inheritance in JavaScript
What I develop/solved?
- Created a simple Media player using HTML which displays Audio and video preview
Difficulties I am facing.
- Advanced javascript concepts such as constructor function and prototype seems quite difficult to understand in one go
Code snippet/Screenshots/notes
- Web Development Excercise 1(HTML only)
- Problem statement: you are given 12 files, 6 audio files(mp3) and 6 video files(mp4)
- - Design a website using HTML only, which shows these 12 files
- - We can use element, which is used to embed sound content in documents.
- - We can use element to embed video content on the page
- - Controls attribute: When the control attribute is present, the browser will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handling Audio and Video files</title>
</head>
<body>
<div>
<strong>Handling audio files</strong>
<ol>
<li><audio controls
src="/Projects/Web Development Practice/Exercise 1/Audio files/fight-for-a-while.mp3"></audio></li>
<li><audio controls
src="/Projects/Web Development Practice/Exercise 1/Audio files/holiday-for-all.mp3"></audio>
</li>
<li><audio controls
src="/Projects/Web Development Practice/Exercise 1/Audio files/luck-for-the-brave.mp3"></audio></li>
<li><audio controls
src="/Projects/Web Development Practice/Exercise 1/Audio files/promotion-at-work.mp3"></audio></li>
<li><audio controls src="/Projects/Web Development Practice/Exercise 1/Audio files/spring-mood.mp3"></audio>
</li>
<li><audio controls
src="/Projects/Web Development Practice/Exercise 1/Audio files/wildflowers-for-beloved.mp3"></audio>
</li>
</ol>
</div>
<hr>
<div>
<strong>Handling Video files</strong><br>
<video height="200px" width="200px" controls
src="/Projects/Web Development Practice/Exercise 1/Video files/first.mp4"></video>
<video height="200px" width="200px" controls
src="/Projects/Web Development Practice/Exercise 1/Video files/second.mp4"></video>
<video height="200px" width="200px" controls
src="/Projects/Web Development Practice/Exercise 1/Video files/third.mp4"></video>
<video height="200px" width="200px" controls
src="/Projects/Web Development Practice/Exercise 1/Video files/fourth.mp4"></video>
<video height="200px" width="200px" controls
src="/Projects/Web Development Practice/Exercise 1/Video files/fifth.mp4"></video>
<video height="200px" width="200px" controls
src="/Projects/Web Development Practice/Exercise 1/Video files/sixth.mp4"></video>
</div>
</body>
</html>
- Web development excercise 2(CSS based)
- Problem statement: write html and css code to style a paragraph inside a div which contains 5 other paragraphs(total 6). The first paragraph must have background color yellow and text color red. The other paragraphs must have background color blue and text color white. We must write css in separate file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS only excersise</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae architecto quis similique.</p>
<p>Lorem architecto quis similique.</p>
<p>Lorem i elit. Quae architecto quis similique.</p>
<p>Lorem amet consectetur adipisicing elit. Quae architecto quis similique.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae architecto quis similique.</p>
<p>Quae architecto quis similique.</p>
</div>
</body>
</html>
p:nth-child(1){
background-color: yellow;
color: red;
}
p{
background-color: blue;
color: white;
}
Output
Javascript - new keyword behind the scenes
- A new object is created: The new keyword initiates the creation of new javascript object
- A prototype of linked: The newly created object gets liked to the prototype property of the constructor function. This means that it has access to properties and methods defined on the contstructor’s prototype.
- The constructor is called: The constructor function is called with specified arguments and this is bound to the newly created object. If no explicit return value is specified from the constructor, JavaScript assumes this, the newly created object, to the intended return value.
- The new object is returned: After the constructor function has been called, if it doesn’t return a non-primitive value (object, array, function, etc. ), the newly created object is returned.
function createUser(username, age) {
this.username = username;
this.age = age;
}
createUser.prototype.increaseAge = function () {
this.age++;
}
createUser.prototype.printAge = function () {
console.log(`user's age is: ${this.age}`)
}
const user1 = new createUser("bdkgigidsgighids", 20)
user1.printAge() //output: user's age is: 20
Prototype
- template or blueprint from which other objects inherit properties and methods. Each JavaScript object has a prototype from which it inherits methods and properties.
let players = ["Jonathan", "Admino"]
let signature_move = {
Jonathan: "de Jiggle de Jiggle",
Admino: "Strong Close range",
seeJonathanMove: function () {
console.log(`Jonathan's signature move is: ${this.Jonathan}`);
}
}
Object.prototype.Ashish = function () {
console.log("Ashish's signature move is: Mid range spray");
}
Array.prototype.HelloAshish = function () {
console.log(`Hello Ashish`)
}
signature_move.Ashish();
players.HelloAshish();
let username = "Ashish "
String.prototype.trueLength = function(){
console.log(`${this.trim().length}`)
}
username.trueLength(); //output: 6
Inheritance
- Inheritance in JavaScript allows objects to inherit properties and methods from other objects
const Developer = {
buildingProject: true
}
const HR = {
hiringCurrently: false
}
const softwareTester = {
isTesting: true,
__proto__: Developer
}
const DevOps = {
deploying: true
}
DevOps.__proto__ = Developer
//modern syntax
Object.setPrototypeOf(Developer, DevOps)
Top comments (0)