This deals with html, javascript and cssIn the attached zip folder, each sub-folder has a word document. Follow the word document instruction in each sub-folder to do the requirement
assign/CSS Animation/CSS Animation.docx In the CSS Animation folder, use cssanimationTemplate and animate all the transitions found on this link https://domfu.com/app5/db/cssanimation/ Save all CSS in the css_animation file in the CSS Animation folder assign/CSS Animation/css_animation.css /* WORK GOES HERE */ assign/CSS Animation/cssanimationTemplate.html Control transition 1 way transition 2 way Default Linear EaseIn EaseOut EaseInOut bezier1,0,0,1 Step10 zoom rotate seesaw walk DDD FUN Combo Combo Combo Combo Combo Combo Combo Combo assign/CSS Table/CSS Table.docx Use CSS for visual formatting of the table (htmltable-assignment) centering, colors, borders. Use the table included in this folder – htmltable-assignment 1. Use CSS classes to color the table and avoid any use of style attributes or bgcolor attributes in the HTML. Try to not have bordering shows use the same color. 2. Challenge: Hide the half hour labels (12:30 etc;) use a CSS class instead of what the normal assignment does. Challenge: use an advanced selector to do this without editing any HTML around the TH tags (you'll have to alternate rows only using the CSS selector.) 3. You must do accessibility requirement of the normal assignment (choose one of the two ways to do it... only one method is mentioned in that assignment.) 4. Use the scope attribute. 5. Hovering of a show with the mouse causes an border outline to show up. (black? some color with contrast.) assign/CSS Table/htmltable-assignment.html blankMondayTuesdayWednesdayThursdayFridaySaturdaySunday 12:00Ben & Jerry's showI love PeterBiggest ReportCaptain Nosebleed and Gosh BoyPlanet of the Worker, FarmersD'Oh Wars 12:30 1:00 1:30Police CopsDance TalkSad Max 2:00Peterfield 2:30 3:00Leg Street 3:30Get Lucky!Wonder Worker, Farmer 4:00Supper Bonobo ChimpsThe Nice ColorWalking My Ride 4:30Utopia TrekThe Sam ShowSlowly Disguised Toy Ad 5:00Slowly Sleep SundayThing SleepAds with Ad BreaksWAIT to Watch This 5:30 6:00 6:30The Adventures of PaulFriday Today 7:00WalkingistOw, my Pot!McPaulThe Silence of the Bonobo Chimpss 7:30Danced News 8:00God Needs Money2001: A Space Sad 8:30Finished Stuff2001: A Space Loneliness 9:00Planet of the Bonobo ChimpsLoneliness Max 9:30Finished GumpSpam TV 10:00Raiders of the Lost TableSleeping JohnOoh WarsHouse Workers, Farmers of UtopiaBig Brother: 1984 10:30Duh Paid ProgrammingCOPS in Paris 11:00 11:30Slowly Look SaturdayDanced Gump assign/DOM Hack1/DOM Hack1.docx https://domfu.com/app5/db/domhack0/MetropolitanState.html Use firefox developer tools to inspect the page above, you may also want to use the Style Editor feature to create a new stylesheet (.css). · You won't directly edit and save to the HTML file itself! Only modify the page in memory using the developer tools. Be careful about reloading the page because your work will be lost. Figure out how to grab the tags in the page using CSS selectors. Suggestion I'd recommend changing appearance to make sure you are selecting the right tags. Such as: outline: 8px solid green; or background-color:red; or both. Example to grab the video at the bottom of the page use this CSS: #metro--homev {outline: 8px solid green; background-color:red;} ℹ️ FYI: Knowing basic CSS selectors is essential; the better your CSS Selector skills the easier and faster this is. We need to grab parts of the page we want to modify and the fast easy way to do this is to leverage CSS to get those tags on the page. Parts of the page we will need to grab to modify: 1. Video section at the bottom of the page - grabbing the whole section's HTML tag not just the video itself (which I made into an image tag anyhow.) 2. The two testimonials: 3. The whole slideshow carousel at the top with the animated photos 4. The above 3 can all be combined into 1 selector (use a commas) 5. This button (which is just an anchor tag) · Suggestion Make a list of CSS selectors; using CSS to visually highlight it is purely optional, but quite useful. You can save the internal CSS you made in the Style Editor to a file just to keep your work safe for now. · Purpose If you can't do something using CSS or dig into the HTML or modify CSS or HTML using the developer tools you won't be able to tell the stupid machine in Javascript how to do it! Always figure out how to do it yourself! Then automate it. 4) Javascript: add CSS to a page using javascript (automating the above but with a slight change.) 1. Go to the console. · If you have the CSS filter on in the console, you'll want to turn it off to avoid all the CSS warnings cluttering up the console. · You'll want the error,log,warn,debug filters ON so any problems show up in the console. 2. var styleTag = document.createElement('style'); This is how you create new HTML tags in DOM. styleTag is a variable holding the object for the HTML tag (aka Element in the DOM terminology.) We need some way to refer to it in the program - that is what variables are for! 3. styleTag.setAttribute('type', 'text/css'); This is how you edit HTML attributes on an HTML tag. 4. document.head.appendChild(styleTag); This is how you add HTML Elements (aka tags) to the head tag of the document. document.body is for the body tag (which gets used more.) ℹ️ FYI: If you look at the bottom of the head tag with the Inspector you'll see your style tag you created! 5. styleTag.innerText = #metro--homev {display:none} ; · The video has now been removed from the page. right? · This is how you add CSS to a page using javascript · Hint: Javascript 5+ added support for multiple-line strings using the diacritic character instead of quote: ` (to the left of your 1 key on your keyboard.) this will let you paste in huge amounts of CSS source into your javascript as string (javascript doesn't actually understand CSS!) 5) Use javascript to add CSS to remove/hide the parts of the page given in step #3 above from 1 to 4 but leave #5 current students alone. Everything covered so far is all you need. 6) Save all your javascript in a file so you do not lose/forget it all; this is what you'll turn in later. · This javascript needs all the lines of code so you can copy/paste the whole file into the console to repeat the changes if you reload the webpage. The whole point of programming is to automate repetitive work! · try it out on another browser window with the same page to make sure you have all your javascript working (and to not lose whatever you've done so far so you can figure out what you missed.) Make sure this works before moving ahead. · Remember: you are not to save/modify the HTML page I gave you! The goal here is to have 1 javascript program that does all the changes... that hacks with the page. 7) Current Students menu · Upon closer inspection of this menu, the web developer of this site is not using :hover or :active in the CSS to trigger the menu so the ONLY alternative they have is javascript. This means we'll have to FAKE the mouse clicking on the menu to fool their javascript; we can't necessarily use CSS as we did previously. 1. document.querySelector( css selector goes here ); · this will return 1 tag object in the console from the given CSS Selector (and being programmers they correctly call it a query! but also to keep CSS people happy they call it a Selector; hence the compromise name querySelector. Like me calling you a personHuman.) · FYI: You can also get an array of tags from a CSS Selector by using document.querySelectorAll() 2. Store the tag object in a variable! 3. .click(); method HTML tag objects fake a mouse click. (If you had the wrong tag you just end up; in the worst case, having to try every possible tag until it works and then you know which tag. To save you time, I tried to guide you to the A tag which is the one they did this on.) 4. Add this code to your javascript file so it automatically shows the current students menu. Optional: you could add some margin-top to the emergency notice at the top so it is not covered up by the student menu being down. assign/DOM Hack2/DOM Hack2.docx Modify this page https://domfu.com/app5/db/domhack1/domhacktemplate.html following the instructions below. Send final javaScript file 1) No libraries are allowed. Only your javascript and the DOM API are allowed. · Using firefox developer tools will be necessary; however, you may find it useful to Save As… the page to your desktop to help you debug and explore. For example, you could edit the HTML file manually before you write a program to do that. (If you can not do it .) · The final result must be only a single javascript file which shall be opened and run in the Console on the online page (in other words, you can not alter the webpage at all, only your javascript can edit the page.) 2) Create an extract function to the page which (when run) reads all the text in a table and dumps it to console.log(). Either table, commas or tabs between columns, only the text data Real world use case: Scraping info from a webapp, reformat a page you do not have access to edit, access database information without direct access to the database. 3) Add 2 Extract buttons to the page; 1 for each table and have them run your extract function on the table the button was created for. hint: Make the extract function with an argument/parameter so it can be reused on any table you give it stuck?: make 2 extract functions and have those work on each table; then figure out how to make it just 1 function. This is worth being able to do, anytime you repeat yourself (copy/paste) that is a sign that you could be smarter about what you are doing (aka lazy programmer who doesn't ever want to do the same thing again.) 4) Have your 2 extract buttons be added to the page using Javascript when your script runs so no HTML editing is required. · goal: running only your javascript on a page is all that is needed to easily extract information from the page. HINTS: DOM API names that may be useful to look up: document, appendChild(), createElement(), innerHTML, innerText, getElementById(), getElementsByClassName(), querySelector(), setAttribute(), children[], onclick, addEventListener() assign/DOM Hack3/DOM Hack3.docx Modify this page https://domfu.com/app5/db/domhack2/domhacktemplate.html with instructions below. Send final javaScript file 1) No libraries are allowed. Only your javascript and the DOM API are allowed. · Using firefox developer tools will be necessary; however, you may find it useful to Save As… the page to your desktop to help you debug and explore. For example, you could edit the HTML file manually before you write a program to do that. (If you can not do it .) · The final result must be only a single javascript file which shall be opened and run in the Console on the