add assignment solution
parent
f84a501933
commit
7fd5ae6684
@ -0,0 +1,60 @@
|
||||
const customName = document.getElementById('customname');
|
||||
const randomize = document.querySelector('.randomize');
|
||||
const story = document.querySelector('.story');
|
||||
|
||||
function randomValueFromArray(array){
|
||||
const random = Math.floor(Math.random()*array.length);
|
||||
return array[random];
|
||||
}
|
||||
|
||||
var storyText = "It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.";
|
||||
|
||||
var insertX = [
|
||||
"Willy the Goblin",
|
||||
"Big Daddy",
|
||||
"Father Christmas"
|
||||
];
|
||||
|
||||
var insertY = [
|
||||
"the soup kitchen",
|
||||
"Disneyland",
|
||||
"the White House"
|
||||
];
|
||||
|
||||
var insertZ = [
|
||||
"spontaneously combusted",
|
||||
"melted into a puddle on the sidewalk",
|
||||
"turned into a slug and crawled away"
|
||||
];
|
||||
|
||||
randomize.addEventListener('click', result);
|
||||
|
||||
function result() {
|
||||
|
||||
let newStory = storyText;
|
||||
|
||||
let xItem = randomValueFromArray(insertX);
|
||||
let yItem = randomValueFromArray(insertY);
|
||||
let zItem = randomValueFromArray(insertZ);
|
||||
|
||||
newStory = newStory.replace(':insertx:',xItem);
|
||||
newStory = newStory.replace(':insertx:',xItem);
|
||||
newStory = newStory.replace(':inserty:',yItem);
|
||||
newStory = newStory.replace(':insertz:',zItem);
|
||||
|
||||
if(customName.value !== '') {
|
||||
let name = customName.value;
|
||||
newStory = newStory.replace('Bob',name);
|
||||
}
|
||||
|
||||
if(document.getElementById("uk").checked) {
|
||||
let weight = Math.round(300*13.9999813334) + " stone";
|
||||
let temperature = Math.round((94-32)*(5/9)) + " centigrade";
|
||||
newStory = newStory.replace('94 fahrenheit',temperature);
|
||||
newStory = newStory.replace('300 pounds',weight);
|
||||
}
|
||||
|
||||
story.textContent = newStory;
|
||||
story.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
h1 {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.full-img {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
background: rgba(150,150,150,0.6);
|
||||
text-shadow: 1px 1px 1px white;
|
||||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.thumb-bar img {
|
||||
display: block;
|
||||
width: 20%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Image gallery</title>
|
||||
|
||||
<link rel="stylesheet" href="HM3.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Image gallery example</h1>
|
||||
|
||||
<div class="full-img">
|
||||
<img class="displayed-img" src="pic1.jpg">
|
||||
<div class="overlay"></div>
|
||||
<button class="dark">Darken</button>
|
||||
</div>
|
||||
|
||||
<div class="thumb-bar">
|
||||
|
||||
|
||||
</div>
|
||||
<script src="HM3.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
const displayedImage = document.querySelector('.displayed-img');
|
||||
const thumbBar = document.querySelector('.thumb-bar');
|
||||
|
||||
const btn = document.querySelector('button');
|
||||
const overlay = document.querySelector('.overlay');
|
||||
|
||||
//Looping image
|
||||
|
||||
for(let i = 1; i <= 5; i++) {
|
||||
const newImage = document.createElement('img');
|
||||
newImage.setAttribute('src', 'pic' + i + '.jpg');
|
||||
thumbBar.appendChild(newImage);
|
||||
newImage.onclick = function(e) {
|
||||
displayedImage.src = e.target.src;
|
||||
}
|
||||
}
|
||||
|
||||
//Adding darken effect and revert option
|
||||
|
||||
btn.onclick = function() {
|
||||
const btnClass = btn.getAttribute('class');
|
||||
if(btnClass === 'dark') {
|
||||
btn.setAttribute('class','light');
|
||||
btn.textContent = 'Lighten';
|
||||
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
|
||||
} else {
|
||||
btn.setAttribute('class','dark');
|
||||
btn.textContent = 'Darken';
|
||||
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fundamental CSS comprehension</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2 id="test">Chris Mills</h2>
|
||||
<h2>fafgdf </h2>
|
||||
</header>
|
||||
<article>
|
||||
<img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
|
||||
<p>50 My Street</br>
|
||||
The Town<br>
|
||||
Gray Peach<br>
|
||||
UK<br>
|
||||
ZO50 1MU<br>
|
||||
<strong>Tel</strong>: 01234 567 890<br>
|
||||
<strong>Mail</strong>: chris@nothere.com</p>
|
||||
</article>
|
||||
<footer>
|
||||
<p id ="test">Editing, <i>writing</i>, and web development services</p>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
HTML5 ---- Latest ....
|
||||
|
||||
</section>
|
||||
|
||||
<div class = "mystyle">
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2></h2>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
/* General page styles - put these straight into your stylesheet */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
html {
|
||||
font-family: 'Helvetica neue', Arial, 'sans serif';
|
||||
font-size: 10px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* General styles*/
|
||||
.card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Selectors to be matched up with rulesets */
|
||||
|
||||
.card article img {
|
||||
|
||||
float: right;
|
||||
max-height: 100%
|
||||
|
||||
}
|
||||
.card footer{
|
||||
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
|
||||
border-radius: 0 0 1.5em 1.5em;
|
||||
}
|
||||
.card header{
|
||||
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
|
||||
border-radius: 1.5em 1.5em 0 0;
|
||||
}
|
||||
.card {
|
||||
width: 35em;
|
||||
height: 22em;
|
||||
margin: 5em auto;
|
||||
background-color: red;
|
||||
border: 0.2em solid black;
|
||||
border-radius: 1.5em;}
|
||||
|
||||
|
||||
/*styles specific to the setup of the card container*/
|
||||
|
||||
/* styles specific to the header and footer*/
|
||||
.card header {
|
||||
max-height: 50px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
line-height: 5px;
|
||||
}
|
||||
|
||||
.card footer {
|
||||
max-height: 50px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
line-height: 2px;
|
||||
}
|
||||
|
||||
|
||||
/*styles specific to the main business card contents*/
|
||||
.card article {
|
||||
height:120px;
|
||||
background: rgba(151, 33, 33, 0.5);
|
||||
padding-left: 15px;
|
||||
color:whitesmoke ;
|
||||
line-height: 16px;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue