Mad9014 - objects and arrays

Developer
Mobile Application Design-Development
Size
2,606 Kb
Views
24,288
  1. Mad9014 - objects and arrays Previews
  2. Mad9014 - objects and arrays HTML Codes
  3. Mad9014 - objects and arrays CSS Codes
  4. Mad9014 - objects and arrays JS Codes

How do I make an mad9014 - objects and arrays?

What is a mad9014 - objects and arrays? How do you make a mad9014 - objects and arrays? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.

Mad9014 - objects and arrays Previews
IQ Test

Mad9014 - objects and arrays - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>mad9014 - objects and arrays</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <title>Arrays &amp; Objects</title> </head> <body> <div class="wrapper"> <section class="ordered"> <p><button id="loader">Load Data</button></p> <h2>The Ordered List</h2> <ol></ol> </section> <section class="dictionary"> <h2>The Dictionary List</h2> <dl></dl> </section> </div> <ul data-use="template"> <li>Use a clone of this for each new list item</li> </ul> <dl data-use="template"> <dt>Use a clone of this for each new dictionary term</dt> <dd>Use a clone of this for each new dictionary definition</dd> </dl> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Mad9014 - objects and arrays - Script Codes CSS Codes

[data-use*=template]{ /*** Any element with a data-use attribute That has "template" as part of its value ***/ display:none;
}
/***************************** General Styles
*****************************/
h2{ font-size: 1.618rem; font-family:Georgia, serif;
}
button{ border-radius: 6px; font-size: 1.0rem; line-height: 1.6; padding: 0 5rem;
}
li,dt,dd{ font-family:Calibri, Helvetica, sans-serif;
}
li,dt{ font-weight:bold; font-size: 1.4rem; color: #333;
}
dd{ font-size: 1.0rem; color: #666;
}

Mad9014 - objects and arrays - Script Codes JS Codes

var people = ["Billy","Mike","Tre","Jason"];
//var people = new Array("Billy","Mike","Tre","Jason")
var greenDay = {"lead_singer":"Billy Joe Armstrong", "last_album":"Tre", "band_member_count":4, "rating":"Awesome"};
//var info = new Object();
var myObj = {};
var ordered, dictionary, li, dt, dd;
//global variables can be used anywhere
//assigning HTML to them CANNOT be done until AFTER DOMContentLoaded
document.addEventListener("DOMContentLoaded", init);
//window.addEventListener("load", init);
function init(){ ordered = document.querySelector(".ordered ol"); dictionary = document.querySelector(".dictionary dl"); li = document.querySelector("ul[data-use=template] li"); //No "var" in front of the global variables //Add click listener for the button document.querySelector("#loader").addEventListener("click", btnClicked);
}
function btnClicked(ev){ var numPeople = people.length; //var is used for local variables for(var i=0; i<numPeople; i++){ var cli = li.cloneNode(false); ordered.appendChild(cli); //cli.innerHTML = people[i] ; var txt = document.createTextNode(people[i]); cli.appendChild( txt ); } for( cheesecake in greenDay){ var cdt = document.querySelector("[data-use=template] dt").cloneNode(); var cdd = document.querySelector("[data-use=template] dd").cloneNode(); dictionary.appendChild(cdt); dictionary.appendChild(cdd); cdt.innerHTML = cheesecake; cdd.innerHTML = greenDay[cheesecake]; }
}
Mad9014 - objects and arrays - Script Codes
Mad9014 - objects and arrays - Script Codes
Home Page Home
Developer Mobile Application Design-Development
Username mad-d
Uploaded August 10, 2022
Rating 3
Size 2,606 Kb
Views 24,288
Do you need developer help for Mad9014 - objects and arrays?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mobile Application Design-Development (mad-d) Script Codes
Name
A Pen by Mobile Application Design-Development
Contact Manager
Cordova Cheatsheet
MAD9013-F2015-Midterm
Practice querySelector
Geolocation
Two-Column Form
MAD9013 - Float Images with Content
MAD9022 Refactoring Practice
HTML Modal Windows
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!