uanjali / web_assignments

Cypress web assignments

Web_assignments

Cypress web assignments

1. CSS Assignment: Add Margin and Padding to Blog

Margin and padding are used to provide space between content and content, and content and border, respectively.

Both of them share a similar syntax, but the functionality is very different. You will see how they will arrange the content of the blog efficiently.

Below are some of the tasks you have to perform -

1. To the body tag, set left margin to 60 pixels and right margin to 20 pixels.
2. Set the top margin of the main header to 60 pixels.
3. Remove the bottom margin of the element with id 'site-title'.
4. Set the top margin of header image container to 50 pixels.

Expected look of the blog page is -

2. CSS Assignment: Add Id and Classes to Elements

As you can see that we have 2 header elements defined in our blog and we only wanted to add the padding to the header of our blog and not of our article.
The solution to this problem is using the classes and id attributes. Giving the classes and id's to certain elements give us the ability to manage and deal with different fragments of code differently.
First, try this yourself and also modify the CSS file accordingly.
Rewrite the styles (wherever necessary) using the class and id on the elements from the list given below -

Inside Header

1. We want to differentiate the 2 headers present, so give id 'main-header' to the 1st header in the blog.
2. Give the p tag - <p>Coding Ninjas Official Blog</p>, id 'about-site' and apply 'grey' color to it.
3. Give the parent element of the last image of the header an id 'header-image-container'.

Inside Main

1. Give the header id 'blog-header'
2. Give the article an id 'blog-content'.
3. Give the div containing the image, id 'blog-image-container'.
4. Give the headings inside the article, class 'h-style' and apply 'darkslategrey' color to it.

Expected look of the blog page is -

3. Completing the Project

Until now, you have created the post for the available data, but what if the user wants to add a new post to the JSON file. Complete the form given in the scaffold so that it is able to add new data to the JSON.

Objectives

1. Create an event handler function to get the values of all the input from the input of the form with the id "postForm".
2. Add submit event listener to the form with id "postForm".
3. Add proper event listener to add the post to the posts array and also display it on the windows with all the functionalities.

Expected Output

Note:

You must use the submit event Listener on the form instead of "click" event on the button.

Hints:

You can use the URL.createObjectURL to handle the image.