Question

In: Computer Science

In this weeks assignment you will creating some character cards on a web page. These character...

In this weeks assignment you will creating some character cards on a web page. These character cards can be similar to a baseball card, Magic The Gathering Card. It is your choice and anything is fair game.

Requirements:

  • Use an external CSS & JS file, no internal or inline styles & scripts
    • Please comment your JS to break down your understanding of what is happening. Please put your name in your code.
  • Create at least 3 character card elements (div's would work fine)
    • Each card needs to have an image, a description paragraph, and 3 other text elements in a list (examples: Age, Height, Element, Weakness, Level etc.)
    • Cards and their images must be the same size and dimensions.
    • Cards should have an appropriate style for their content and easy to read.
  • CSS Background Images and Border Images need to be use somewhere on the page. A good idea might be to use them on a page H1 title.
  • Use JS to find each card element, then apply a class to each card element. They can all get the same class, the goal here is to make sure you understand how to find elements and add CSS classes dynamically
    • HINT: Use the classList (Links to an external site.) or setAttribute (Links to an external site.) properties and methods.
  • Use JS to add a link element to the web page after the cards.
    • Set the href attribute to a link appropriate to your card content.
    • SUPER HINT: createElement (Links to an external site.) and appendChild (Links to an external site.) should be very helpful
  • Style your page
    • Font, color, spacing and layout should be intentional and not default for all other elements on the page
    • Use classes for styling
    • As always no CSS frameworks all custom creations from your original self

Solutions

Expert Solution

ANSWER:

<html>
<head>
<style>
body {
font-family: system-ui;
background: #f2f2f2;
}
h1 {
font-size: 24px;
padding: 10px 0;
border: 2px solid transparent;
/ border image /
border-image: url("https://www.freepngimg.com/thumb/pokemon/20708-7-pokeball-hd-thumb.png")
20% round;
}
#cards {
display: flex;
flex-wrap: wrap;
}
.card {
width: 320px;
border: 1px solid #eee;
background-color: #fff;
margin: 10px;
background-position: 75px 100px;
text-align: center;
border-radius: 4px;
padding: 15px 10px;
}
p {
font-size: 15px;
}

.traits {
display: flex;
justify-content: space-around;
}

.traits > div {
padding: 10px 15px;
border-radius: 8px;
background-color: #e62121;
color: #fff;
}
.traits > div p {
font-size: 13px;
margin-bottom: 0;
}
.traits > div h3 {
margin: 10px 0;
font-size: 18px;
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1 align="center">Pokemon Cards</h1>
<div id="cards">
<div class="card">
<h2>Pikachu</h2>
<img
align="center"
src="https://www.freepngimg.com/thumb/pokemon/37444-9-pikachu-file-thumb.png"
/>
<p>
Pikachu is an electric type pokemon. It evolves from Pichu when
leveled up with high friendship and evolves into Raichu when exposed
to a Thunder Stone. It has a Gigantamax form.
</p>

<div class="traits">
<div>
<p>Element</p>
<h3>Electric</h3>
</div>
<div>
<p>Height</p>
<h3>40.6</h3>
</div>
<div>
<p>Weakness</p>
<h3>Ground</h3>
</div>
</div>
</div>
<div class="card">
<h2>Charmander</h2>
<img
align="center"
src="https://www.freepngimg.com/thumb/pokemon/37543-2-pokemon-picture-thumb.png"
/>
<p>
Charmander is a Fire-type, reptilian Pokémon with a primarily orange
body and blue eyes. It evolves into Charmeleon starting at level 16,
which evolves into Charizard starting at level 36.
</p>

<div class="traits">
<div>
<p>Element</p>
<h3>Fire</h3>
</div>
<div>
<p>Height</p>
<h3>61cm</h3>
</div>
<div>
<p>Weakness</p>
<h3>Water</h3>
</div>
</div>
</div>
<div class="card">
<h2>Munchlax</h2>
<img
align="center"
src="https://www.freepngimg.com/thumb/pokemon/20597-8-pokemon-image-thumb.png"
/>
<p>
Munchlax is a Normal-type Baby Pokémon introduced in Generation IV. It
is known for its very high appetite and eats anything edible except
for Pokémon and humans.
</p>

<div class="traits">
<div>
<p>Element</p>
<h3>Normal</h3>
</div>
<div>
<p>Height</p>
<h3>61cm</h3>
</div>
<div>
<p>Weakness</p>
<h3>Fighting</h3>
</div>
</div>
</div>
</div>
<script>
// Get All Card Elements
const cards = document.getElementsByClassName("card");

// Add a class to all elements
for (let i = 0; i < cards.length; i++) cards[i].classList.add("shadow");

// Add the link
const link = document.createElement("a");
link.setAttribute("href", "https://pokemon.com"); // set href
link.innerText = "Pokemon Website"; // set link text

document.body.appendChild(link); // add it to the body
</script>
</body>
</html>

If you do not get anything in this solution,please put a comment and i will help you out.

Do not give a downvote instantly.It is a humble request.

If you like my answer,please give an upvote.....Thank you.

venereology answered 1 year ago
Next > < Previous

Related Solutions

Week 4 Assignment HTML – Creating a Simple Web Page “HTML or HyperText Markup Language as...
Week 4 Assignment HTML – Creating a Simple Web Page “HTML or HyperText Markup Language as it is formally known is the main markup language for creating web pages and other information that can be displayed in a webbrowser”. It was created by Tim Berners-Lee in 1989 as a user friendly way of sharing information on the Internet. http://en.wikipedia.org/wiki/HTML Assignment Instructions - Create a simple HTML Web Page that includes hyperlinks to three of your favorite websites. Use the online...
In this weeks assignment you will be sharing your favorite recipe with us via a web...
In this weeks assignment you will be sharing your favorite recipe with us via a web page. The recipe is of your choice and does not have to be a culinary creation, it can be anything! Your web page style and aesthetic should compliment your recipe, do some research for design inspiration if you cannot think of anything. Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down...
For this assignment you are required to create a web page displaying a recipe of your...
For this assignment you are required to create a web page displaying a recipe of your choosing. Your submission should appropriately use the basic head and body construction of an HTML document. Additionally you are required to appropriately use at least three different HTML element types. For example you might use an unordered list for your ingredients, an ordered list for the steps of your recipe, and an image to show the final result. If you choose to use an...
n this assignment, you will need to code a Web page that will allow a user...
n this assignment, you will need to code a Web page that will allow a user to enter their first and last names and indicate how many pets they have, if any. If they have pets, the user will be able to list up to three of their names. You will code validations on some of the fields and display error messages on the page when a field does not pass the validation test. If all the data entered is...
In this assignment you will create a web page about your favorite sports to play or...
In this assignment you will create a web page about your favorite sports to play or teams to watch. If you don’t watch or play sports, please make up your favorite sports to play or teams to watch. You will be incorporating images into your web page, as well as other concepts learned in this unit. Create an external style sheet using a text editor of your choosing. In the CSS file add the following style rules: A background image...
Web Projects If you are learning a web technology, you must create a new page that...
Web Projects If you are learning a web technology, you must create a new page that is web-accessible (use your individual burrow account) that includes a form with a field that allows the user to enter a number only. ● Create an input that allows a number to be entered. Only whole numbers should be allowed. ● Add a button below the input that says "Translate". ● When the button is clicked, it should grab the current number in the...
In this course project, you will be creating Pharmacology Information Cards for the most common medications...
In this course project, you will be creating Pharmacology Information Cards for the most common medications related to surgery. For detailed instructions, review the Requirements section of the Course Project Introduction page in Module 01. Instructions For Information Cards Part 2, create an information card for each of the following medications (8 total): 1.Methylene blue 2.Gentian violet 3.Acetic acid 4.Mannitol 5.Oxytocin 6.Prednisone 7.Epinephrine 8.Norepinephrine Each Pharmacology Information Card should focus on a single medication used in the surgical environment and...
For this weeks assignment please respond in a 1-2 page single-spaced paper (2 pages maximum) addressing...
For this weeks assignment please respond in a 1-2 page single-spaced paper (2 pages maximum) addressing the following: How are statistics generated? Vital statistics—What information is collected by the state, what is the responsibility of healthcare facilities? Name three different types of public health or general healthcare organizations and the type of statistics that would be the most beneficial to them
In this assignment, you will develop a simple Web server in Python that is capable of...
In this assignment, you will develop a simple Web server in Python that is capable of processing only one request. Specifically, your Web server will (i) create a connection socket when contacted by a client (browser); (ii) receive the HTTP request from this connection; (iii) parse the request to determine the specific file being requested; (iv) get the requested file from the server’s file system; (v) create an HTTP response message consisting of the requested file preceded by header lines;...
Choose a software system (or a web page) that you think will benefit the users if...
Choose a software system (or a web page) that you think will benefit the users if it employed the principles of direct manipulation. Illustrate some of the operations under the direct manipulation scheme
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT