Javascript DOM, functions, methods and events ? Personal Homepage JS Due Dates: HW is due prior to the start of the next class. Objectives Set up an HTM
Javascript DOM, functions, methods and events – Personal Homepage JS
Due Dates:
HW is due prior to the start of the next class.
Objectives
Set up an HTML page using the basic page elements.
Be able to use HTML5 semantic elements to structure a web page.
Properly use images, lists, headings and semantic elements.
Successfully use CSS to style and modify the appearance of page and the elements
contained within.
Basic Requirements
Properly use and indent all tags.
Set up page with <html>, <head> and <body> tags.
Assignment Details
Using the your previously created homepage, add a few elements of Javascript to the
page. You may use elements that were discussed in the lecture, or you may also
research other javascript functionality and include those in your site, AS LONG AS YOU
UNDERSTAND WHAT THEY ARE DOING.
Submit your assignment
1. Combine all work files into a zip folder (include all HTML, CSS, font, and image files).
Keep the file structure the same as it was when you were working on the
assignment.
2. Submit the zip folder via desire2learn in the appropriate Assignment folder in order
to receive credit. While you may also submit screenshots, you are required to
submit the actual code files, not just screenshots of the code.
about.html
About me
My name is Kabiru Aeez, I was born in Lagos State, Nigeria. I am from the western part of Nigeria (Yoruba). I was born into the family of 6, which am the second child.
I got to Chicago in 2014, and i attended Harry S Truman College. During then, I lost my father to a terrible illness.
My college life was a bit challenging because i had difficulties adjusting to the educational system. I graduated from Truman College in 2017 with a GPA of 3.7, with High Honor.
While at Truman college, and I received 3 Honor of Dean List.
I got admission to the Northeastern Illinois University as a third year undergraduate to gain a bachelor of science in Information Technology Management.
To be able to achieve all I have now, I will not hesitate to mention my family that are so supportive. My mum, my two uncles and my aunt.
They taught me about what life they have given me, how they want me to be educated and be a man that will be part of a progressive society.
Life have been kind of easy for me because i have families who i rely on to guide me, so i can be able to accomplish my set goals.
My set goal is to become a web designer and application developer, so i contribute to my country and the society at large.
css/normalize.css
/*HTML5 Reset Stylesheet http://html5doctor.com/html-5-reset-stylesheet***/ html, body, div, h1, h2, h3, p, img, strong, ul, li, aside, footer, header, nav, section, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } aside,footer,header,nav,section { display:block; } nav ul { list-style:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
css/style.css
body{ background-color:#7FDBFF; position: absolute; } #map { height: 400px; border: 3px solid black; margin: 50px; } .summary{ background-color: #a1c4fd; font-family: Arial; width: 95%; margin: 5% auto; border: 0.1em solid black; padding-top: 10px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; font-size: 20px; } p{ font-family: cursive; padding-bottom: 10px; } .subheader{ display: block; margin: 0 auto; margin-left: 0; margin-right: 0; padding-top: 1.25em; } header{ text-align: center; text-transform:capitalize; padding-top: 0.1em; padding-bottom: 0.2em; font-family: cursive; border:0.1em solid #fff; background-color: #a1c4fd;; font-size: large; } #navigation a{ text-decoration:none; } #navigation{ text-decoration: none; font-weight: bold; text-align: center; padding: 1em; } #navigation li{ display: inline; } #navigation a:link { color: #000033; } #navigation a:visited { color: #000000; } #navigation a:hover { color: #FFFFFF; } img{ display: block; max-width: 100%; max-height: 100%; padding-bottom: 1.25em; margin: 0 auto; float:right; } #creation h2{ text-align: center; font-size: large; margin-bottom: 1.25em; text-decoration: underline; } #creation p { margin-bottom: 15px; font-family: 'Tangerine', serif; } #creation video { display: block; max-width: 100%; max-height: 100%; padding-bottom: 1.25em; margin: 0 auto; float:right; } .myself{ padding-top: 1.25em; } .info{ padding-top: 1.25em; } .education ul, .education ul li { padding-bottom: 10px; font-family: monospace; font-size: 20px; } .skills ul, .skills ul li { padding-bottom: 10px; font-family: monospace; font-size: 20px; } .experience ul, .experience ul li { padding-bottom: 10px; font-family: monospace; font-size: 20px; } .location p{ /*margin-left: 70px;*/ padding-left: 550px; } .period p{ /*margin-left: 70px;*/ padding-left: 550px; } .year p{ /*margin-left: 70px;*/ padding-left: 550px; } .gradepoint p{ /*margin-left: 70px;*/ padding-left: 550px; } .time p{ /*margin-left: 70px;*/ padding-left: 550px; } .loc p{ /*margin-left: 70px;*/ padding-left: 550px; } .state p{ /*margin-left: 70px;*/ padding-left: 550px; } footer{ font-size: 75%; font-style: italic; font-family: Georgia, 'Times New Roman', serif; text-align: center; padding: 20px; } footer a:hover{ color: #FFFFFF; } footer a:link, footer a:visited{ color: #FFFFFF; } @media screen and (min-width: 26.875em) { nav { font-size: 1em; /* 18px @ 18px em */ } .nav a { line-height: 1em; } video, img { max-height: 80vh; } } /*600px @ 16px em 8 columns at 57px each and 16px gutters */ @media screen and (min-width: 37.5em) { #page { padding-left: 2.6666666667%; /* 16 px out of 600px */ padding-right: 2.6666666667%; /* 16 px out of 600px */ } video { margin: 0; height: auto; width: 48.5915492958%; /*4 columns */ } } @media screen and (min-width: 52.5em) { body { padding-left: 10.9523809524%; padding-right: 10.9523809524%; } video { margin: 0; width: 48.1707317073%; } } @media screen and (min-width: 64.5em) { body { padding-left: 18.6046511628%; padding-right: 10.46511628%; } }
index.html
Homepage
Yoruba Myth About Creation
The Yoruba tribe of West Africa has a myth about how they where created:
In the beginning, there was only the sky above, water and marshland below.
The chief god Olorun (the creator) ruled the sky, and the goddess Olokun (goddess of the Ocean) ruled what was below.
Obatala (the creator of earth), another god, reflected upon this situation, then went to Olorun (the creator) for permission to create dry land for all kinds of living creatures to inhabit. He was given permission, so he sought advice from Orunmila (god of divination), oldest son of Olorun (the Creator) and the god of prophecy. He was told he would need a gold chain long enough to reach below, a snail's shell filled with sand, a white hen, a black cat, and a palm nut, all of which he was to carry in a bag. All the gods contributed what gold they had, and Orunmila (god of divination) supplied the articles for the bag. When all was ready, Obatala (the creator of earth) hung the chain from a corner of the sky, placed the bag over his shoulder, and started the downward climb. When he reached the end of the chain he saw he still had some distance to go. From above, he heard Orunmila (god of divination) instruct him to pour the sand from the snail's shell, and also immediately release the white hen. He did as he was told, whereupon the hen landing on the sand began scratching and scattering it about. Wherever the sand landed it formed dry land, the bigger piles becoming hills and the smaller piles valleys. Obatala (the creator of earth) jumped to a hill and named the place Ile-Ife (ancient Yoruba city).
The dry land now extended as far as he could see. He dug a hole, planted the palm nut, and saw it grow to maturity in a flash. The mature palm tree dropped more palm nuts on the ground, each of which grew immediately to maturity and repeated the process. Obatala (the creator of earth) settled down with the cat for company. Many months passed, and he grew bored with his routine. He decided to create beings like himself to keep him company. He dug into the sand and soon found clay with which to mold figures like himself and started on his task, but he soon grew tired and decided to take a break. He made wine from a nearby palm tree, and drank bowl after bowl. Not realizing he was drunk, Obatala (the creator of earth) returned to his task of fashioning the new beings; because of his condition he fashioned many imperfect figures. Without realizing this, he called out to Olorun (the creator) to breathe life into his creatures. The next day he realized what he had done, and swore never to drink again, and to take care of those who were deformed, thus becoming Protector of the Deformed.
The new people built huts as Obatala (the creator of earth) had done, and soon Ile-Ife prospered and became a city. All the other gods were happy with what Obatala (the creator of earth) had done, and visited the land often, except for Olokun (goddess of the ocean), the ruler of all below the sky. She had not been consulted by Obatala (the creator of earth), and grew angry that he had usurped so much of her kingdom. When Obatala (the creator of earth) returned to his home in the sky for a visit, Olokun (goddess of the ocean) summoned the great waves of her vast oceans and sent them surging across the land. Wave after wave she unleashed, until much of the land was underwater and many of the people were drowned. Those that had fled to the highest land beseeched the god Eshu (a trickster) who had been visiting, to return to the sky and report what was happening to them. Eshu (a trickster) demanded sacrifice be made to Obatala (the creator of earth) and himself before he would deliver the message. The people sacrificed some goats, and Eshu (a trickster) returned to the sky. When Orunmila (god of divination) heard the news he climbed down the golden chain to the earth, and cast many spells which caused the flood waters to retreat and the dry African land reappear. So ended the great flood.
media/myth.mp3
YORUBA
THE
194466.67
eng – converted by convert2mp3.net
media/videoplayback.mp4
media/wintery_welcome.jpeg
media/wintery_welcome.jpg
resume.html
Resume
Kabiru B Azeez
Chicago, IL 60626 | (773) 9973290 | kbazeez.neiu.edu
MOTIVATED INFORMATION TECHNOLOGY MANAGEMENT STUDENT SEEKING A PART TIME POSITION WITH NORTHEASTERN ILLINOIS UNIVERSITY.
Education
NORTHEASTERN ILLINOIS UNIVERSITY ———————————— Chicago, IL
Bachelors in Science ——————————————- Expected 7/2023
Major in Information Technology Management
Harry S Truman College ———————————————– Chicago, IL
Associate in Science ——————————————- 09/2014 to 05/2017
Major in Computer Information Systems ——————————————- GPA 3.79/4.0
- Honor List – Decemeber 2015
- Honor List – May 2016
- Honor List – Decemeber 2016
Skills
- Intermediate Java Programming and C++ skills
- Intermediate Web Design
- Knowledge in software installations
- Proficient with MS Office (Word, Excel, Access and PowerPoint)
- Ability to work under pressure and fast learner
- Configure computers to connect to an existing network
- Great customer service orientation
- Perform preventive maintenance and advanced troubleshooting on computer systems
Experience
Brain Builder College ———————————— Lagos, Nigeria
Software Installer / Tutor ——————————————- 08/2012 to 09/2014
- Solved and installed broken virus
- Formatted systems corrupted by virus
- Checked and updated outdated software
- Tutored students on Microsoft word, PowerPoint, Access and Excel
- Created database to keep student's information
about-me.png
index.png
resume.png
,
Javascript_DOM_Functions_Objects_Events/css/styles.css
body{ float: left; width: 100%; padding: 0; margin: 0; font-family: calibri, arial, sans-serif; } header{ position: fixed; top: 0; left: 0; width: 96%; height: 75px; padding: 20px 2%; border-bottom: 2px solid black; background: #f7f7f7; z-index: 5; color: #008B95; } header .left{ font-size: 36px; } header .right{ font-size: 18px; } .left{ float: left; width: 35%; } .right{ float: right; width: 60%; text-align: right; } .big{ font-weight: 900; text-transform: uppercase; } .small{ font-weight: 400; text-transform: lowercase; } #container{ float: left; width: 100%; height: 500px; margin-top: 150px; } article{ float: right; width: 98%; padding-top: 2%; min-width: 490px; height: auto; } h2{ float: left; clear: both; width: 50%; margin: 10px 0 5px 5%; } .clear{ float: left; width: 100%; clear: both; } footer{ float: left; width: 100%; padding: 20px 0; margin-top: 30px; border-top: 5px double black; } .ftrLeft{ padding-left: 2%; } .ftrRight{ padding-right: 2%; } .orange{ background: #E98E4E; } .orangeHover{ background: #f0b083; } .blueGreen{ background: #6CA3B2; } .lightAqua{ background: #99D1D5; } .lightAquaHover{ background: #b8dfe2; } /*Lot*/ .row{ width: 100%; height: 12%; float: left; } .col-3{ width: 24%; } .col-6{ width: 49%; } .col-9{ width: 74%; } .button{ height: 80%; line-height: 100%; margin: 1.25px .5%; float: left; background: #6CA3B2; color: white; text-align: center; font-size: 48px; } .button:hover{ cursor: pointer; background: #b8dfe2 !important; } #carLot{ width: 25%; height: 420px; margin-left: 2%; padding: 2%; float: left; background: rgba(0, 0, 0, .1); color: white; border: 2px solid black; } #console{ width: 64%; height: 470px; margin-right: 2%; float: right; font-size: 18px; border: 2px solid black; overflow: scroll; } #console div b{ text-decoration: underline; } #consoleLeft{ height: 100%; width: 30%; border-right: 1px solid rgba(0, 0, 0, .5); } #consoleRight{ height: 100%; /*width: 56%;*/ float: left; } #consoleLeft, #consoleRight{ padding: 2%; text-align: left; overflow: scroll; } .make{ float: left; clear: both; width: 100%; height: 145px; } .makeName{ float: left; clear: both; width: 100%; height: 30px; line-height: 30px; font-size: 24px; color: black; } .car{ float: left; height: 100px; width: 15%; margin: 2%; border: 1px solid black; color: black; background: #99D1D5; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .3); } .car:hover, .car:active{ background: #b8dfe2; } .car:active{ font-weight: bold; border-width: 3px; } .roof{ float: left; width: 96%; height: 50%; margin-top: 40%; padding: 2%; line-height: 50px; text-align: center; border-top: 1px solid black; border-bottom: 1px solid black; } .roof:active{ border-top-width: 3px; border-bottom-width: 3px; }
Javascript_DOM_Functions_Objects_Events/images/favicon.ico
Javascript_DOM_Functions_Objects_Events/index.html
NEIU CS300 Javascript DOM, Functions & Events Honda ACRD ODSY CRV PLT Toyota CMRY SNA CRLA Nissan RGE ALTM MXMA SNTR ARMD Computer User No Cars Selected Northeastern Illinois University – CS300 © Copyright 2018
Javascript_DOM_Functions_Objects_Events/scripts/cars.js
/* * using a function to create an object */ function Car(make, model, year, doors, price){ this.make = make; this.model = model; this.year = year; this.doors = doors; this.price = price; /* * Privelaged function -> a function belonging to the object */ this.msrp = function(){ /* * toLocaleString -> allows us to format text according to region */ return price.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); } this.monthlyPayments = function(term){ var amount = this.price / term; return amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); } } var accord = new Car('Honda', 'Accord', 2017, 4, 26000); var odyssey = new Car('Honda', 'Odyssey', 2018, 4, 35000); var crv = new Car('Honda', 'CRV', 2017, 4, 17500); var pilot = new Car('Honda', 'Pilot', 2018, 4, 32595); var camry = new Car('Toyota', 'Camry', 2018, 4, 27500); var sienna = new Car('Toyota', 'Sienna', 2018, 4, 34500); var corolla = new Car('Toyota', 'Corolla', 2017, 4, 23250); var rogue = new Car('Nissan', 'Rogue', 2018, 4, 19570); var altima = new Car('Nissan', 'Altima', 2018, 4, 28200); var maxima = new Car('Nissan', 'Maxima', 2018, 2, 31000); var sentra = new Car('Nissan', 'Sentra', 2017, 4, 16500); var armada = new Car('Nissan', 'Armada', 2017, 4, 32250); var cars = [accord, odyssey, crv, pilot, camry, sienna, corolla, rogue, altima, maxima, sentra, armada];
Javascript_DOM_Functions_Objects_Events/scripts/scripts.js
/* * document.getElementById(id) -> single node * ToDo: Get #consoleLeft and #consoleRight */ var consoleLeft = document.getElementById('consoleLeft'); var consoleRight = document.getElementById('consoleRight'); /* * document.getElementsByClassName(class) -> nodeList * ToDo: Get all .car */ var allCars = document.getElementsByClassName('car'); /* * document.querySelectorAll(selector) -> nodeList * ToDo: Get all #toyotas .car and #nissans .car */ var toyotas = document.querySelectorAll('#toyotas .car'); var nissans = document.querySelectorAll('#nissans .car'); /* * document.getElementsByTagName(tagName) –> return a node list with every element of this type */ var paragraphs = document.getElementsByTagName('p'); /* * document.createElement(tagToCreate) -> new tag * ToDo: Create a new paragraph */ var newParagraph = document.createElement('p'); /* * [element].innerHTML -> set the HTML of a node (may include tags) * ToDo: Set HTML of new paragraph to list the count of cars in the dealer lot */ newParagraph.innerHTML = '<b>There are: ' + allCars.length + ' cars in the lot</b>'; /* * [element].style -> set a desired CSS property (use camelCase instead of hyphens) * ToDo: Change new paragraph text color to red */ newParagraph.style.color = 'red'; /* * [element].setAttribute(attrName, attrValue) -> set a desired attribute * ToDo: Set id for new paragraph to 'allCars' */ newParagraph.setAttribute('id', 'allCars'); /* * [element].appendChild(newElement) -> adds new element as the last child of the parent * ToDo: Add new paragraph to #consoleLeft */ consoleLeft.appendChild(newParagraph); //Create another new paragraph newParagraph = document.createElement('p'); /* * document.createTextNode('text') -> new text node (i.e. text only) * ToDo: Create a new text node and set text to be # of Toyotas on the dealer lot * – Add the new text to the paragraph * – Add the paragraph to #consoleLeft */ var txt = document.createTextNode('Number of Toyotas: ' + toyotas.length); newParagraph.appendChild(txt); consoleLeft.appendChild(newParagraph); //Create another new paragraph newParagraph = document.createElement('p'); //Set the text to be # of Nissans on the dealer lot newParagraph.textContent = 'Number of Nissans: ' + nissans.length; consoleLeft.appendChild(newParagraph); //Create a new ul var list = document.createElement('ul'); /* * forEach -> loop through a collection/list * ToDo: Loop thru all nissans * – Create an li for each nissan * – Get the model from name attribute * – Make text the model using [element].textContent * * Inside forEach loop * [element].getAttribute(attr) -> gets the value of an attribute */ nissans.forEach(function(nissan) { var listItem = document.createElement('li'); var name = nissan.getAttribute('name'); listItem.textContent = name; list.appendChild(listItem); }); //Add ul to #consoleLeft consoleLeft.appendChild(list); /* * [element].insertBefore(newElement, existingElement) -> adds new element before a specific child * ToDo: Add new paragraph to #consoleLeft before the ul */ newParagraph = document.createElement('p'); newParagraph.innerHTML = '<b>NISSANS</b>'; consoleLeft.insertBefore(newParagraph, list); /* * function -> Javascript version of a method * ToDo: Create printCarDetails(carDiv) * – Loop thru cars and compare model to name attribute (getAttribute) * – Get Car Details and output to #consoleRight */ function printCarDetails(carDiv){ var name = carDiv.getAttribute('name'); //Loop thru cars and find selected car object var selectedCar = cars.filter(x => x.model == name)[0]; //Get #carTitle var carTitle = document.getElementById('carTitle'); //Create h5 and give id carTitle var newCarTitle = document.createElement('h5'); newCarTitle.setAttribute('id', 'carTitle'); /* * [element].textContent -> another way to set a node's text (no tags allowed) * ToDo: Set h5 text to car make and model */ newCarTitle.textContent = selectedCar.make + ' ' + selectedCar.model; /* * [element].replaceChild(newElement, existingElement) -> replace existing child with new element * ToDo: Replace h5 with carTitle */ consoleRight.replaceChild(newCarTitle, carTitle); /* * ToDo: Create new paragraph * – Set innerHTML to be year, # of doors, MSRP, 72 monthly payments */ var newParagraph = document.createElement('p'); newParagraph.innerHTML = 'Year: ' + selectedCar.year + '<br>' + 'Doors: ' + selectedCar.doors + '<br>' + 'MSRP: ' + selectedCar.msrp() + '<br>' + '72 Monthly Payments: ' + selectedCar.monthlyPayments(72); //Find all existing #consoleRight p and remove 1st one /* * Inside if block * [element].removeChild(toRemove) -> remove existing child */ var existingParagraphs = document.querySelectorAll('#consoleRight p'); if(existingParagraphs.length > 0) consoleRight.removeChild(existingParagraphs[0]); //Add new paragraph to #consoleRight consoleRight.appendChild(newParagraph); } /* * addEventListener -> add a 'listener' so we can respond to a specific action * ToDo: Add 'click' event listener for all Toyotas to go to printCarDetails(this) * ToDo: Add 'click' event listener for all Nissans to go to printCarDetails(this) */ toyotas.forEach(function(toyota){ toyota.addEventListener('click', function(){ printCarDetails(this); }); }); nissans.forEach(function(nissan){ nissan.addEventListener('click', function(){ printCarDetails(this); }); }); /* * setInterval(codeToExecute, milliseconds) -> executes something at a specified interval (every 'x' amount of milliseconds) * ToDo: Set an interval that will update the count of Hondas on the lot once every second */ var hondaCount = document.getElementById('hondaCount'); hondaCount.textContent = 1; var hondaInterval = setInterval(function(){ hondaCount.textContent++; }, 1000); var toyotaCount = document.getElementById('toyotaCount'); toyotaCount.textContent = 1; var toyotaInterval = setInterval(function(){ toyotaCount.textContent++; }, 1000); /* * setTimeout(codeToExecute, milliseconds) -> executes the specified code ONCE after 'x' amount of time * clearInterval(intervalName) -> stops the interval * ToDo: Since there are only 4 Hondas on the lot, stop the counter after 4 seconds. Set a timeout for 4 seconds that will clear the interval */ setTimeout(function(){ clearInterval(hondaInterval); }, 3000); setTimeout(function(){ clearInterval(toyotaInterval); }, 2000); //Set an interval that will update the count of Toyotas on the lot once every second. Stop counting once you've reached the number of toyotas
,
__MACOSX/._Javascript_DOM_Functions_Objects_Events
Javascript_DOM_Functions_Objects_Events/index.html
NEIU CS300 Javascript DOM, Functions & Events Honda ACRD ODSY CRV PLT Toyota CMRY SNA CRLA Nissan RGE ALTM MXMA SNTR ARMD Computer User No Cars Selected Northeastern Illinois University – CS300 © Copyright 2018
Javascript_DOM_Functions_Objects_Events/.DS_Store
__MACOSX/Javascript_DOM_Functions_Objects_Events/._.DS_Store
Javascript_DOM_Functions_Objects_Events/css/.DS_Store
__MACOSX/Javascript_DOM_Functions_Objects_Events/css/._.DS_Store
Javascript_DOM_Functions_Objects_Events/css/styles.css
body{ float: left; width: 100%; padding: 0; margin: 0; font-family: calibri, arial, sans-serif; } header{ position: fixed; top: 0; left: 0; width: 96%; height: 75px; padding: 20px 2%; border-bottom: 2px solid black; background: #f7f7f7; z-index: 5; color: #008B95; } header .left{ font-size: 36px; } header .right{ font-size: 18px; } .left{ float: left; width: 35%; } .right{ float: right; width: 60%; text-align: right; } .big{ font-weight: 900; text-transform: uppercase; } .small{ font-weight: 400; text-transform: lowercase; } #container{ float: left; width: 100%; height: 500px; margin-top: 150px; } article{ float: right; width: 98%; padding-top: 2%; min-width: 490px; height: auto; } h2{ float: left; clear: both; width: 50%; margin: 10px 0 5px 5%; } .clear{ float: left; width: 100%; clear: both; } footer{ float: left; width: 100%; padding: 20px 0; margin-top: 30px; border-top: 5px double black; } .ftrLeft{ padding-left: 2%; } .ftrRight{ padding-right: 2%; } .orange{ background: #E98E4E; } .orangeHover{ background: #f0b083; } .blueGreen{ background: #6CA3B2; } .lightAqua{ background: #99D1D5; } .lightAquaHover{ background: #b8dfe2; } /*Lot*/ .row{ width: 100%; height: 12%; float: left; } .col-3{ width: 24%; } .col-6{ width: 49%; } .col-9{ width: 74%; } .button{ height: 80%; line-height: 100%; margin: 1.25px .5%; float: left; background: #6CA3B2; color: white; text-align: center; font-size: 48px; } .button:hover{ cursor: pointer; background: #b8dfe2 !important; } #carLot{ width: 25%; height: 420px; margin-left: 2%; padding: 2%; float: left; background: rgba(0, 0, 0, .1); color: white; border: 2px solid black; } #console{ width: 64%; height: 470px; margin-right: 2%; float: right; font-size: 18px; border: 2px solid black; overflow: scroll; } #console div b{ text-decoration: underline; } #consoleLeft{ height: 100%; width: 30%; border-right: 1px solid rgba(0, 0, 0, .5); } #consoleRight{ height: 100%; /*width: 56%;*/ float: left; } #consoleLeft, #consoleRight{ padding: 2%; text-align: left; overflow: scroll; } .make{ float: left; clear: both; width: 100%; height: 145px; } .makeName{ float: left; clear: both; width: 100%; height: 30px; line-height: 30px; font-size: 24px; color: black; } .car{ float: left; height: 100px; width: 15%; margin: 2%; border: 1px solid black; color: black; background: #99D1D5; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .3); } .car:hover, .car:active{ background: #b8dfe2; } .car:active{ font-weight: bold; border-width: 3px; } .roof{ float: left; width: 96%; height: 50%; margin-top: 40%; padding: 2%; line-height: 50px; text-align: center; border-top: 1px solid black; border-bottom: 1px solid black; } .roof:active{ border-top-width: 3px; border-bottom-width: 3px; }
Javascript_DOM_Functions_Objects_Events/images/favicon.ico
__MACOSX/Javascript_DOM_Functions_Objects_Events/images/._favicon.ico
Javascript_DOM_Functions_Objects_Events/images/.DS_Store
__MACOSX/Javascript_DOM_Functions_Objects_Events/images/._.DS_Store
Javascript_DOM_Functions_Objects_Events/scripts/scripts.js
/* * document.getElementById(id) -> single node * ToDo: Get #consoleLeft and #consoleRight */ /* * document.getElementsByClassName(class) -> nodeList * ToDo: Get all .car */ /* * document.querySelectorAll(selector) -> nodeList * ToDo: Get all #toyotas .car and #nissans .car */ /* * document.getElementsByTagName(tagName) –> return a node list with every element of this type */ /* * document.createElement(tagToCreate) -> new tag * ToDo: Create a new paragraph */ /* * [element].innerHTML -> set the HTML of a node (may include tags) * ToDo: Set HTML of new paragraph to list the count of cars in the dealer lot */ /* * [element].style -> set a desired CSS property (use camelCase instead of hyphens) * ToDo: Change new paragraph text color to red */ /* * [element].setAttribute(attrName, attrValue) -> set a desired attribute * ToDo: Set id for new paragraph to 'allCars' */ /* * [element].appendChild(newElement) -> adds new element as the last child of the parent * ToDo: Add new paragraph to #consoleLeft */ //Create another new paragraph /* * document.createTextNode('text')
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.
All Rights Reserved Terms and Conditions
College pals.com Privacy Policy 2010-2018