Newton Coder: web development assignmets

Showing posts with label web development assignmets. Show all posts

Sunday, November 20, 2022

Basic HTML Tables - Layout, HTML Tables, Attributes, Aside, Footer, Tr tag, Td tag, Th tag, Tbody

<table>
    <thead>
        <th>
            roll number
        </th>
        <th>
            name

        </th>
    </thead>
    <tbody>
        <tr>
            <td>
                7</td>

            <td>
                Dhoni</td>
        </tr>
        <tr>
            <td>
                8</td>

            <td>
                Kohli</td>
        </tr>
    </tbody>
</table>

HTML Feedback form

HTML Feedback form - HTML Forms, Base Elements, Form attributes, Form Elements

<form method="POST">          
 <h1>Feedback Form</h1>

<label for="name">Name</label><br>
<input type="text" id="name"   minlength="3"
maxlength="50" required><br>
<label for="portfolio">Portfolio</label><br>
<input type="url" id="portfolio"  required> 
<br>
<label for="favColor">favColor</label><br>
<input type="color" id="favColor" required>        
 <br>
<label for="likeness">likeness</label><br>
<input type="range" min="1" max="100"
id="likeness" required>
   <br>
<button type="submit">Submit</button>

Wednesday, November 9, 2022

Youtube Likes - JS do while loop, JS for in, JS Getters & Setters, JS This keyword, DOM Model

Youtube Likes:

We've all seen the like and dislike buttons on youtube. There is a number that shows the count of total likes. Let's replicate that feature of Youtube and use it in our own social networking site.

Acceptance Criteria:

Render two buttons. The Like button should have id="increment". The dislike button should have id="decrement"

There should be a h3 element that displays the count of the count of Likes. This element should have id="counter"

The count should not go below zero. If dislike button is pressed when count is 0, it should remain at 0
HTML:
<!DOCTYPE html>
<html>
    <body>
<button id="increment" onclick="inc()">Like</button>

<button id="decrement" onclick="dec()">Dislike</button>

<h3 id="counter">0</h3>
</body>
</html>

JS:

var c=0;

function inc()
{
c++;
document.getElementById("counter").innerText = c;
}

function dec(){
    if(c>0)
    {
        c--;
        document.getElementById("counter").innerText = c;
    }
}

Output:

Monday, November 7, 2022

Portfolio Page - Adding video, Src, Href, Height, Width, Alt, Article

<!DOCTYPE html>
<html>
    <head>
        <title> Portfolio Page </title>
    </head>
    <body>
        <img src="https://japanpowered.com/media/images//goku.png" 
        width=200px alt="Error loading image">
        <br>
        <label for="linkedin profile"> Linkedin Profile </label>
        <a href="https://www.linkedin.com/in/guku6380b10/"
         target="_blank"> Go to my Linkedin </a>
        <br>
        <section id="skills">
            <h1> Skills </h1>
            <ol>
                <li> Analytical Skills </li>
                <li> Basics of the Backend </li>
                <li> HTML/CSS Skills </li>
                <li> JavaScript Skills </li>
                <li> Responsive Design Skills </li>
            </ol>
        </section>
        <section id="projects">
            <h1> Projects </h1>
            <ul>
                <li> Car Sign-up form </li>
                <li> Prime or Composite </li>
                <li> For checking Day name </li>
                <li> Can Vote or Can not </li>
                <li> To check Grade </li>
            </ul>
        </section>
    </body>
</html>

Shopping or Holiday?

Lists are used very extensively to organize information. They can be ordered and un-ordereded. Let's make some of our own using HTML lists.

Imagine you got a job from Newton School. Make 2 lists identifying the use of the money you'll make from the job
Acceptance Criteria
- The first list should be an ordered list of 3 items that you'd like to buy with your salary.
- This list should have data-ns-test attribute in the <li> element and value of the attribute should be "shoppingList"
- The second list should be an unordered list of the holiday destinations that you'd like to visit after you got a job.
- It should at least have 3 places. This list should have data-ns-test attribute in the <li> element and value of the attribute should be "holidayList"

<html>
    <head>
        <title> Shopping or Holiday? </title>
    </head>
    <body>
        <ol>
            <li data-ns-test="shoppingList"> A Car </li>
            <li data-ns-test="shoppingList"> Own a house </li>
            <li data-ns-test="shoppingList"> A MacBook </li>
        </ol>
        <ul>
            <li data-ns-test="holidayList"> Goa </li>
            <li data-ns-test="holidayList"> Europe </li>
            <li data-ns-test="holidayList"> Italy </li>
        </ul>
    </body>
</html>

Favourite Song

What's your current favourite song? Can you direct us to its youtube link through the anchor tag?

Acceptance Criteria:
- All the content should be inside div tag
- Display the text "My current favourite song is <song name>"
- Link the text to the official youtube link of the song through anchor tags

<div>

<a href="https://www.youtube.com/watch?v=T9HbWSZICQ4">My current favourite song is fitoor</a>

</div>

Block or Inline?

We have to identify whether the following elements are block or inline. To identify that, please render each element twice inside a block.

<html>
<head>
</head>
<body>
    <div data-ns-test="block-inline-sup">
        <sup>Test1</sup>
        <sup>Test2</sup>
        Answer: Inline
    </div> 

    <div data-ns-test="block-inline-sub">
        <sub>Test1</sub>
        <sub>Test2</sub>
        Answer: Inline
    </div>
    
    <div data-ns-test="block-inline-h1">
        <h1>Test1</h1>
        <h1>Test2</h1>
        Answer: Block
    </div> 

    <div data-ns-test="block-inline-code">
        <code>Test1</code>
        <code>Test2</code>
        Answer: Inline
    </div> 

    <div data-ns-test="block-inline-input">
        <input>Test1</input>
        <input>Test2</input>
        Answer: Inline
    </div> 

    <div data-ns-test="block-inline-p">
        <p>Test1</p>
        <p>Test2</p>
        Answer: Block
    </div> 

    <div data-ns-test="block-inline-span">
        <span>Test1</span>
        <span>Test2</span>
        Answer: Inline
    </div> 

    <div data-ns-test="block-inline-div">
        <div>Test1</div>
        <div>Test2</div>
        Answer: Block
    </div> 

    <div data-ns-test="block-inline-button">
        <button>Test1</button>
        <button>Test2</button>
        Answer: Inline
    </div> 


</body>
</html>

Thursday, November 3, 2022

Semantic IMDb

Create a simple HTML document. It should consist of your favorite movie, should have actors of the movie, and some quotes from the movie that you liked. Style your page as you like.

<html>
    <body>
        <header>End Game</header>
        <nav >
            <a href="#actor" id="nav-actor">Actors</a>
        
         
            <a href="#quote"  id="nav-quote">Quotes</a>
        </nav>
        <details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
<section id="actor">
  <h2>The Night Watch</h2>
  <p>
    The Night Watch (Dutch: De Nachtwacht), is a 1642 
    painting by Rembrandt van Rijn. It is in the collection 
    of the Amsterdam Museum but is prominently displayed 
    in the Rijksmuseum (State Museum) as the best-known 
    painting in its collection. The Night Watch is 
    the most famous Dutch Golden Age painting.
  </p>
</section>
<section id="quote">
  <h2>The Night Watch</h2>
  <p>
    The Night Watch (Dutch: De Nachtwacht), is a 1642 
    painting by Rembrandt van Rijn. It is in the collection 
    of the Amsterdam Museum but is prominently displayed 
    in the Rijksmuseum (State Museum) as the best-known 
    painting in its collection. The Night Watch is 
    the most famous Dutch Golden Age painting.
  </p>
</section>
<aside>
<h4>IMDB rating 5<h4>
<p>Release Date: 02/02/2022</p>
</aside>
<footer>Produced by: Sajid</footer>
    </body>
</html>

Getting Started

Display the text "Welcome to the world of Web development" on the screen

<html>
    <body>
        <div id=text>Welcome to the world of Web development</div>
    </body>
</html>

Dog Adoption

Dog Adoption

Ritesh is your friend and wants to adopt a dog. He likes them and wants to learn more about their breed. Please help him by linking these images to the respective breed's wiki page

<html>
<body>
<ul>
<li><a href="https://en.wikipedia.org/wiki/
             Golden_Retriever">
<img src="https://upload.wikimedia.org/wikipedia/
commons/c/cf/BassetHound_profil.jpg" >
</a></li>
<li> 
<a href="https://en.wikipedia.org/wiki/Poodle">
<img src="https://upload.wikimedia.org/wikipedia/
commons/thumb/f/f8/
Full_attention_%288067543690%29.jpg/
1280px-Full_attention_%288067543690%29.jpg">
</li></a>
</ul>
</body>
</html>

Wednesday, November 2, 2022

Why Software? Create a HTML page and write about your motivations behind becoming a software developer.

<html>

    <head>
    </head>
    <body>
        <h1>Why I want to become a developer?</h1>
        <p>lorem</p>
    </body>
</html>                                                                                

Newton Coder

Pages

Sunday, November 20, 2022

Basic HTML Tables - Layout, HTML Tables, Attributes, Aside, Footer, Tr tag, Td tag, Th tag, Tbody

HTML Feedback form

HTML Feedback form - HTML Forms, Base Elements, Form attributes, Form Elements

Wednesday, November 9, 2022

Youtube Likes - JS do while loop, JS for in, JS Getters & Setters, JS This keyword, DOM Model

Youtube Likes:

Monday, November 7, 2022

Portfolio Page - Adding video, Src, Href, Height, Width, Alt, Article

Shopping or Holiday?

Favourite Song

Block or Inline?

Thursday, November 3, 2022

Semantic IMDb

Getting Started

Dog Adoption

Wednesday, November 2, 2022

Why Software? Create a HTML page and write about your motivations behind becoming a software developer.

ads vert

Basic HTML Tables - Layout, HTML Tables, Attributes, Aside, Footer, Tr tag, Td tag, Th tag, Tbody