How to create a toggle switch in html/css where you toggle the toggle switch and it changes the text in the tag from draw mode to proof mode?

1. When the user clicks on a picture and it opens a window containing a zoomed version of the image, give her a hyperlink (button) to add the pic to a favorites’ area at the bottom of the first page (add img nodes to the DOM). 2. A maximum of 5 pics can be added to the favorites. After that a message is displayed to remove at least a favorite first. 3. If the user clicks on a favorite, a Remove link (button) shows up next to that picture. If the user clicks it, the pic is removed from the favorites. 4. (10% of the grade) Use good web design practices to enhance visually your html page. Add a title, picture, copyright line, etc.

HTML Last lab, you created a webpage about someone you admire. Now we are going to add some styling to the webpage. You must apply descriptors (css rule) to the following selectors (any tags you do not currently have need to be added): body h1,h2,h3,h4,h5,h6,h7 (use at least 2) p ul li img You must use all of the following descriptors below in your page. Although you are not being graded on your design ability, do your best to make the style your own. Text Descriptors color font-size font-weight text-align Background background-color border Size width height margin You may add any additional styling or layout descriptors you like. Layout is a complicated topic in CSS and the lab does not require any specific layout, but here is a good explanation if you want to alter the layout anyway: https://learnlayout.com/

Please help me with this question. I am having trouble understanding what to do. The HTML code is provided in one of the images below as well as the instructions. The client_side.js and the CSS code are provide below Thank you CLIENT; var url = "http://localhost:3000/post"; var myID; var guessWord; function resetGame(){ var myName = prompt("What is your name?") document.getElementById("mistakes").innerHTML = "Wrong Letters: " // request server to start a new game! $.post(url+'?data='+JSON.stringify({ 'name':myName, //client's identity on the server 'action':'generateWord'}), response); } function printGuess(){ //you write code here! //1. Locate the HTML element with ID 'guessarea' //2. Cycle through the 'guessWord' array and write // each character to the 'guessarea' in turn } function makeGuess(){ //ask the server to validate the guess $.post(...

When the text is larger, one of the options in navigation bar keeps dropping. How to make it stop without changing any of text sizes: header.html <nav> <ul> <li><ahref="index.html"class="active">Home</a></li> <li><ahref="morningroutine.html">Morning routine</a></li> <li><ahref="nightroutine.html">Night routine</a></li> <li><ahref="form.html">Contact us</a></li> </ul> </nav> header.css nav ul { list-style-type: none; background-color: #b5dffd; overflow: hidden; } nav li { display: inline; margin-right: 90px; } nav a { font-weight: bold; float: left; color: black; text-align: center; padding: 2%2.3%; text-decoration: none; } nav a:hover { background-color: hsl(139, 85%, 13%); color: white; } nav a.active { background-color: hsl(139, 85%, 13%); color: white; }