Ok so this one is a big assignment. Do it carefully, and take it seriously (for once, please). You will be making a web app using HTML, CSS, AND JavaScript. Apply everything you know (try to impress me :) )
DUE DATE: NONEInformation written in this assignment is very specific. Do pay attention while reading, and while building up thoughts on solutions. I will not be responsibe (as you think I am) for any of careless reading done by you. In account of mistaken information from you, you will have to face it since it is obviously your fault.
I made this assignment so that you can have a big side project, in which you keep adding things along with learning them. Apply as you learn. Do as much you know, if there is some concept you don't understand then you can ask me (or google). This assignment is not expected to be done immediately. But if you are able to, then that is really good :)
You need to be adding things to this, step by step, but you don't need to be fast. This assignment has some relatively harder aspects which are difficult and more challanging to solve. But you don't need to get overwhelmed by it since right at this level I don't expect you to do this assignment all at once. Do as much as you can, ask others stuff, and learn along. That's what I expect.
Create a single page applcation, which lets the user to add and remove HTML tags, and apply basic CSS to them too, in their initially blank canvas. Each element should be clickable to view and edit its properties, and an export all function should be present to export the created webpage into HTML for actual use.
The page should have 2 side bars, one on the left, and one on the right. Left one should contain controls to add HTML elements, and right one should be the properties bar, containing the properties controls. Bootstrap needs to be completely utilized on common elements like buttons, input fields etc.
The page should consist of 3 sections/panes, vertically visible when the page is being viewed. The right and left panes shouldn't scroll when the center canvas becomes scrollable; they should be fixed on the screen:
Properties Bar
Visible only when an element is selectedThe properties pane should initially be hidden, and only be visible when a user-created element from the canvas is clicked
The application should allow the user to append (or prepend) the specified HTML tags (see the left sidebar section), along with the class list. The user should be allowed to freely create, update or remove class elements as they desire. The user should obviously also be allowed to add inner tag body. Two buttons, saying Prepend to page and Append to page should be visible to add the desired element according to the desired way.
The center view/canvas should act as the container for all the user generated tags. When any of the generated element is clicked, it should show a border (or any indicator that that element is now selected), and the right pane should appear into view.
The right page should allow all customizations, custom CSS, class list, and inner tag body. This pane should disappear once the user clicks anywhere other than the generated tags.
The left sidebar is the main application control section. It should display the title of the app, in such a way that the first sight of the user hits this title, and the user immediately understands what this app is about. These are important design techniques which leave a better impression when the user visits the landing page.
Apart from the title, there should be a few elements that let the user to add elements to the canvas.
Select tag:There should be a select tag which contains all the possible insertable tags. These tags should be insertable, with the descriptions visible to the user as follows:
When the user selects any of the above option, the elements below (further details for the tag) should update according to the specific element attributes (if any). For example, if the user selects the image tag, then automatically an "Enter Image Link" field should appear, so that the user can enter the link of their desired image.
Tag detail fields:There should be present some fields, from which the user can edit the inner tag body and customize the class list completely. The user should be allowed to freely create, update or remove class elements as they desire. This structure will be complex, since it will contain more buttons to edit or remove individual classes.
There should be a button to add a classname, which opens a textfield to input the name of the class, and a confirm button, which when pressed, should add the classname to the list.
The added classname should appear as a div, with options to edit or delete that classname. To edit the classname, a textfield and a confirm button should appear right inside the classname div, to edit the name and confirm the change.
If you couldnt precisely understand the classname explaination, then you just need to achieve the 3 specified actions: create, edit and deletion of classnames. No matter whichever system of elements you use.
Add buttons:Next, the actual action buttons. There should exist two buttons, named Prepend to page and Append to page, which should add the desired tag, with the desired options (class list, tag specific options, etc.) to the canvas. The append button should add the element at the end of the canvas, and the prepend button should add the element at the start of the canvas.
Once any of these two buttons are pressed, all the input fields and the select tag should reset their values for next use.
Export button:Lastly, the export button. They should generate HTML of all the created canvas content and show all that to the user to copy it (in any sort of way possible)
This button should be present anywhere in the left pane.
The main window/canvas should only show the contents of the user-created page, and should act as the canvas for the creation.
p tag in grey color, saying: (Add elements to this canvas from the left pane)
This element should be entirely interactable like other elements generated by the user.If any element is clicked in this screen, it should show some sort of highlighting (a border is in my mind right now, you can use the outline property which works exactly like borderproperty, but won't interfere with the border of the element itself), so that the user determines that this element is now selected. Once any element is selected, then the right pane should appear into view, giving the user the options to edit or remove the specified element. There shouldn't be any possibility of two elements getting selected at once. And if the user clicks anywhere in the canvas, outside of any user generated element, then the currently selected element should unselect, along with the sidebar disappearing.
You can also have a hover effect for every element in the canvas too if you like.
The right sidebar should only appear when an element from the main canvas is selected, apart from that, it should stay hidden. And the area of the sidebar should be filled by the main canvas when it is hidden, like this:
This sidebar should contain all the properties that can be edited in your app. A few sections shall be placed here:
The tagname should be displayed (uneditable), and the inner text should also be placed, but it should be editable. (Use any text field for it; input or textarea, etc.)
The same classlist management structure as used in the left side bar, you can copy and paste it :)
This should be a bigger section. This should contain a label, and an input field, for all the editable properties in your app. You can use as many properties as you want, but the items marked with a * are required:
[1]Should only show available options in a select tag
[2]Should show an input field (of number type) and available options (px / % / vw / vh / em etc. how much ever you want) in a select tag
[3]Should show three fields, one input field of number type, one select tag for available options available options (px / % / vw / vh / em etc.) and the third input field for color.
A simple remove button should be present which removes the element from the canvas, and hides the right sidebar.
Any change made using the above fields (text change/option selected, etc.) should be applied in the canvas immediately.
This option will be really simple. This should be present anywhere in the left sidebar. When this is clicked, it should show a copyable text of all the HTML (of the canvas), along with an indication that this is the resultant HTML. The exported html should contain a link to bootstrap as well, so that the output has the same styling as your app has. You can achieve this using a simple prompt(), or a bootstrap modal as well if you want to give the app a more modern look.
The marks distribution along with the rewards are specified below:
Negative marking will be applied on very important parts.
| Topic | Marks | Negative Marks | Obtained Marks |
|---|---|---|---|
| OVERALL | |||
| App Pane Layout | 3 | -3 | - |
| Proper Bootstrap usage | 8 | -4 | - |
| Main Canvas Expansion when right sidebar is hidden | 5 | -1 | - |
| Proper/Clean folder structure | 4 | -2 | - |
| EXTRA: External CSS and/or JS | 2 | (Extra) | - |
| LEFT SIDEBAR | |||
| App Title | 3 | 0 | - |
| EXTRA: Info button | 4 | (Extra) | - |
Element Selection: select tag overall styling & behaviour |
2 | -1 | - |
| Element Selection: All specified tags implemented | 3 | 0 | - |
| Classlist editor: all features implemented | 4 | -4 | - |
| Classlist editor: UI | 2 | 0 | - |
| Prepend/Appent buttons: Functionality | 5 | -2 | - |
| Prepend/Appent buttons: Input fields reset | 2 | 0 | - |
| MAIN WINDOW | |||
| EXTRA: Default Text | 4 | (Extra) | - |
| Main canvas Selection implementation | 12 | -3 | - |
| Main canvas Selection Indicator | 4 | -4 | - |
| RIGHT SIDEBAR | |||
| Properties: inner text editable | 3 | -1 | - |
| Properties: Classlist editing | 4 | 0 | - |
| Properties: Well presented CSS Properties editor | 2 | 0 | - |
| EXTRA: Extra CSS Properties (1 Point Each) | 7 | (Extra) | - |
| Properties: CSS Properties editable | 4 | -2 | - |
| Properties: CSS Properties Input fields guidelines | 4 | -4 | - |
| Properties: Remove button | 3 | -2 | - |
| Properties: Changes immediately applied upon interaction | 3 | -3 | - |
| EXPORT BUTTON | |||
| Easy to understand user interface & location | 3 | -1 | - |
Actual functionality: contains all the html, body etc. tags |
2 | 0 | - |
| Actual functionality: gives the same output as the canvas (exported html should contain a link to bootstrap as well) |
5 | -2 | - |
| TOTAL | Marks | Negative Marks | - |
Extra marks: Extra marks are not part of the total obtainable marks, but will be awarded when the specified task is completed accurately.
Negative marks: Negative marks will be deducted from the total obtained, when the specified task is not fulfilled at all, or is improperly done.
The folder structure should be a lot simpler than any other assignment you have created before. Folder structure also has marking, so make sure that your file and folder structure and naming sense is correct, and is as specified. Following structure is expected:
assignment-4.zip (name of zip can be anything, no restriction)resources (no restriction on folder name)... (any icons/videos/content other than styling and scripting goes here.)index.htmlscript.jsstyle.cssUpon good performance, following rewarding criteria will be applied after the assignment is completed and checked: