Skip to content

Done #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kishan-kumar2020 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Done #53

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 125 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>lab-javascript-oops-blog</title>
<meta name="generator" content="Jekyll v3.9.2" />
<meta property="og:title" content="lab-javascript-oops-blog" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://nirmalanim.github.io/lab-javascript-oops-blog/" />
<meta property="og:url" content="https://nirmalanim.github.io/lab-javascript-oops-blog/" />
<meta property="og:site_name" content="lab-javascript-oops-blog" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="lab-javascript-oops-blog" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","headline":"lab-javascript-oops-blog","name":"lab-javascript-oops-blog","url":"https://nirmalanim.github.io/lab-javascript-oops-blog/"}</script>
<!-- End Jekyll SEO tag -->

<link rel="stylesheet" href="/lab-javascript-oops-blog/assets/css/style.css?v=3b835f680c36c42a6977a601ff9dcff8d8bab51d">
<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->



<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="/lab-javascript-oops-blog/favicon.ico" -->

<!-- end custom head snippets -->

</head>
<body>
<div class="container-lg px-3 my-5 markdown-body">

<h1><a href="https://nirmalanim.github.io/lab-javascript-oops-blog/">lab-javascript-oops-blog</a></h1>


<p><img src="https://i1.faceprep.in/ProGrad/prograd-logo.png" alt="Image description" /></p>

<h1 id="prograd-lab--js-blog">ProGrad Lab | JS BLOG</h1>

<p>We have learned Object-oriented programming and how class and inheritance work in JavaScript. Now lets work with our Viking friends, applying all of the concepts we have just learned.</p>

<h2 id="what-should-you-do">What should you do</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Fork this repo
Clone this repo
Practice OOPs Features
</code></pre></div></div>

<h2 id="how-to-submit">How To Submit</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Upon completion, run the following commands:

git add .
git commit -m "ProGrad ID"
git push origin master

And finally, create a pull request so your ProGrad Mentor (PM) can review your work.
</code></pre></div></div>

<h2 id="instructions">Instructions</h2>
<p>We must write the correct code in the script.js file. In this file you will find the following starter code:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>class Blog{

}
</code></pre></div></div>

<p>In this case, it says that Blog class should receive 2 arguments (title &amp; detail), so we have to write the correct code. Let’s make the Blog class receive two arguments:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>class Blog{
constuctor(title,detail){}

}
</code></pre></div></div>
<h3 id="progression-1-write-up">Progression 1: WRITE UP</h3>
<p>Modify the Blog class and add two methods to it: addTitle(), and addDescription().</p>

<h3 id="class">class</h3>
<ul>
<li>should receive two arguments title and detail.</li>
<li>should receive title as first argument.</li>
<li>should receive detail as second argument.</li>
</ul>

<h3 id="addtitle">addTitle()</h3>
<ul>
<li>should be a method.</li>
<li>should receive 0 arguments.</li>
<li>should display the title of Blog as H1.
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> var title_card = document.createElement('h1');
title_card.setAttribute("id","blog-title");
console.log(title_card);
document.getElementById('card-text').appendChild(title_card);
title_card.innerHTML += this.title;
</code></pre></div> </div>
</li>
</ul>

<h3 id="adddescription">addDescription()</h3>
<ul>
<li>should be a method.</li>
<li>should have 0 arguments.</li>
<li>should display the description as a paragraph.
<img src="https://i1.faceprep.in/ProGrad/Mern-Blog-1.png" alt="Image description" /></li>
</ul>

<p><img src="https://i1.faceprep.in/ProGrad/Mern-Blog-2.png" alt="Image description" /></p>

<h3 id="progression-2--show-em-up">Progression 2: SHOW EM UP</h3>

<p>Setup <code class="language-plaintext highlighter-rouge">EventListeners</code>, so that we can display the entire blog for the users
<img src="https://i1.faceprep.in/ProGrad/Mern-Blog-3.png" alt="Image description" /></p>

<p>Happy Coding ProGrads❤️</p>




</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
<script>anchors.add();</script>
</body>
</html>