Repeat practical
- Take your existing website, or make a new website.
Implement the following CSS plus JS functionality.
- Divide the home page main content into divs.
- Give the divs clear borders and margins, so they are clearly separate from each other.
- Arrange them in a "flexbox" with CSS, so they wrap nicely as window width changes.
- Once that is working, turn the divs into JS string constants using backquotes (research it).
- Then each time the page loads, use JS with document.write to randomly reshuffle the order of the divs.
Buttons
Add a few buttons at the top that call JS functions as follows:
- Click on a "Highlight Random" button picks a random div and radically changes its CSS to make it stand out.
- Click again on "Highlight Random" button and it changes the div back to normal, and picks a new div to highlight.
- Click on a "All normal style" button and it changes all divs' CSS back to normal.
- Click on a "Hide Random" button picks a random div and hides it.
- Click again on "Hide Random" button and it shows the div it used to hide, and picks a new div to hide.
- Click on a "Show all" button and it shows all divs.
- Click on a "Delete Random" button actually deletes a random div, and it cannot be got back.
- Click again on "Delete Random" button and it deletes another, until there are none left.
Extra
- Add one special CSS effect all of your own.
- Add one special JS function all of your own.
Document
- Submit a short document (3 pages or under) with it to explain it.
The document will take the major HTML/CSS/JS effects
and explain how the HTML/CSS/JS achieves them.
-
I want details in the document. Sentences like this for CSS:
Hover moves the div because of this section: "div.class:hover" which does: "transform: translateY"
or like this for JS:
When button clicked, the JS function myfn() is called. This uses Window.getSelection() to get the selected text, and then ..
I want details. Actual relationship between HTML/CSS/JS code and the effect on the page.
- Include snippets of the important code in the document.
- No need to submit all the code.
It is client-side, so I can "view source" to see the code.