diff --git a/asignmentQ4and5solution/HM2.js b/asignmentQ4and5solution/HM2.js new file mode 100644 index 0000000..e9f5c08 --- /dev/null +++ b/asignmentQ4and5solution/HM2.js @@ -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'; +} + diff --git a/asignmentQ4and5solution/HM3.css b/asignmentQ4and5solution/HM3.css new file mode 100644 index 0000000..141ef5e --- /dev/null +++ b/asignmentQ4and5solution/HM3.css @@ -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; + } \ No newline at end of file diff --git a/asignmentQ4and5solution/HM3.html b/asignmentQ4and5solution/HM3.html new file mode 100644 index 0000000..c0c2b87 --- /dev/null +++ b/asignmentQ4and5solution/HM3.html @@ -0,0 +1,27 @@ + + + + + + Image gallery + + + + + + +

Image gallery example

+ +
+ +
+ +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/asignmentQ4and5solution/HM3.js b/asignmentQ4and5solution/HM3.js new file mode 100644 index 0000000..72c8ba6 --- /dev/null +++ b/asignmentQ4and5solution/HM3.js @@ -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)'; + } +} diff --git a/asignmentQ4and5solution/pic1.jpg b/asignmentQ4and5solution/pic1.jpg new file mode 100644 index 0000000..499da05 Binary files /dev/null and b/asignmentQ4and5solution/pic1.jpg differ diff --git a/asignmentQ4and5solution/pic2.jpg b/asignmentQ4and5solution/pic2.jpg new file mode 100644 index 0000000..14da4d3 Binary files /dev/null and b/asignmentQ4and5solution/pic2.jpg differ diff --git a/asignmentQ4and5solution/pic3.jpg b/asignmentQ4and5solution/pic3.jpg new file mode 100644 index 0000000..d2baecb Binary files /dev/null and b/asignmentQ4and5solution/pic3.jpg differ diff --git a/asignmentQ4and5solution/pic4.jpg b/asignmentQ4and5solution/pic4.jpg new file mode 100644 index 0000000..2df0746 Binary files /dev/null and b/asignmentQ4and5solution/pic4.jpg differ diff --git a/asignmentQ4and5solution/pic5.jpg b/asignmentQ4and5solution/pic5.jpg new file mode 100644 index 0000000..ecb9544 Binary files /dev/null and b/asignmentQ4and5solution/pic5.jpg differ diff --git a/assignmentQ1Solution/chris.jpg b/assignmentQ1Solution/chris.jpg new file mode 100644 index 0000000..bc9b1bf Binary files /dev/null and b/assignmentQ1Solution/chris.jpg differ diff --git a/assignmentQ1Solution/index.html b/assignmentQ1Solution/index.html new file mode 100644 index 0000000..36b4694 --- /dev/null +++ b/assignmentQ1Solution/index.html @@ -0,0 +1,44 @@ + + + + + Fundamental CSS comprehension + + + + +
+
+

Chris Mills

+

fafgdf

+
+
+ A picture of Chris - a man with glasses, a beard, and a silly wooly hat +

50 My Street
+ The Town
+ Gray Peach
+ UK
+ ZO50 1MU
+ Tel: 01234 567 890
+ Mail: chris@nothere.com

+
+ +
+ +
+ HTML5 ---- Latest .... + +
+ +
+

+
+ +
+

+
+ + + \ No newline at end of file diff --git a/assignmentQ1Solution/styles.css b/assignmentQ1Solution/styles.css new file mode 100644 index 0000000..66bb988 --- /dev/null +++ b/assignmentQ1Solution/styles.css @@ -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; + + } diff --git a/jsObjectsAndJSON/objectArraytoJSON.js b/jsObjectsAndJSON/objectArraytoJSON.js index 8c642f5..2a34775 100644 --- a/jsObjectsAndJSON/objectArraytoJSON.js +++ b/jsObjectsAndJSON/objectArraytoJSON.js @@ -13,12 +13,12 @@ var bankbal = [{ const bankbalJSONstring = JSON.stringify(bankbal[0]); const backtoObj = JSON.parse(bankbalJSONstring); -console.log(bankbal[0]); -console.log(bankbalJSONstring); -console.log(backtoObj); +console.log(bankbal[0]); // print object #1 +console.log(bankbalJSONstring); // print JSON string +console.log(backtoObj); // print object #1 -var a = ["DBS:10000", "HSBC:20000"]; -const aJSON = JSON.stringify(a); -console.log(a); +var a = [{DBS:10000}, {HSBC:20000}]; +const aJSON = JSON.stringify(a[0]); +console.log(a[0]); console.log(aJSON);